董国庆
2025-09-12 527efb36f35b471710e445972673abff45bacdac
laboratory/src/components/SelectMember/index.vue
@@ -13,16 +13,16 @@
                                <img src="@/assets/public/search-outline@2x.png" />
                                <el-input v-model="search" placeholder="请输入" />
                                <div class="select-member-content-left-search-input-close">
                                    <img @click.stop="searchRole" v-if="search"
                                    <img @click.stop="searchRoleRest" v-if="search"
                                        src="@/assets/public/close-circle-fill@2x.png" />
                                </div>
                            </div>
                            <el-button type="primary">搜索</el-button>
                            <el-button type="primary" @click="searchRole()">搜索</el-button>
                        </div>
                        <div class="select-member-content-left-list">
                            <div class="select-member-content-left-list-title">角色列表</div>
                            <div class="select-member-content-left-list-itemBox">
                                <div @click="searchUserList(item.roleId)" v-for="item in roleList" :key="item.roleId"
                                <div @click="handleRoleClick(item.roleId)" v-for="item in roleList" :key="item.roleId"
                                    class="select-member-content-left-list-itemBox-item"
                                    :class="roleId == item.roleId && 'active'">
                                    {{ item.roleName }}
@@ -36,15 +36,29 @@
                        <div class="select-member-content-right-header">
                            <div class="select-member-content-right-header-text">人员列表</div>
                            <div class="select-member-content-right-header-search">
                                <el-input clearable v-model="nickNameOrPhone" placeholder="请输入姓名/手机号" />
                                <el-button type="primary">搜索</el-button>
                                <el-input clearable v-model="nickNameOrPhone" placeholder="请输入姓名" />
                                <el-button type="primary" @click="searchUserList(null)">搜索</el-button>
                            </div>
                        </div>
                        <Table ref="memberTable" :height="null" :row-key="row => row.userId" :data="tableData"
                            :total="0" @selection-change="handleSelectionChange" :row-class-name="tableRowClassName">
                        <Table ref="memberTable" :height="500" :row-key="row => row.userId" :data="tableData" :total="0"
                            @selection-change="handleSelectionChange" :row-class-name="tableRowClassName">
                            <el-table-column type="selection" width="55" />
                            <el-table-column label="角色" prop="roleName" />
                            <el-table-column label="角色" prop="roleId">
                                <template #default="scope">
                                    <span v-if="scope.row.roleId == 1">超级管理员</span>
                                    <span v-if="scope.row.roleId == 2">审批人</span>
                                    <span v-if="scope.row.roleId == 3">工艺工程师</span>
                                    <span v-if="scope.row.roleId == 4">化验师</span>
                                    <span v-if="scope.row.roleId == 5">实验员</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="姓名" prop="nickName" />
                            <el-table-column label="头像" prop="avatar">
                                <template #default="scope">
                                    <img :src="scope.row.avatar || require('../../assets/login/img1111.png')"
                                        style="width: 50px;height: 50px;border-radius: 50%;" />
                                </template>
                            </el-table-column>
                            <el-table-column label="创建时间" prop="createTime" />
                        </Table>
                    </div>
@@ -65,7 +79,11 @@
        projectId: {
            type: [String, Number],
            default: null
        }
        },
        roleType: {
            type: [String, Number],
            default: null
        },
    },
    data() {
        return {
@@ -79,18 +97,33 @@
        }
    },
    methods: {
        searchRole() {
            if (this.search) {
                this.roleList = this.roleList.filter(item => item.roleName.includes(this.search))
            } else {
                getRoleList().then(res => {
                    if (this.projectId) {
                        // 过滤出实验员和化验师角色
                        this.roleList = res.filter(item => item.roleId == 4 || item.roleId == 5);
                    } else {
                        this.roleList = res;
                    }
                });
            }
        },
        setSelection(selected) {
            this.selectData = selected
            this.$nextTick(() => {
                // 确保 tableData 和 memberTable 都存在
                if (this.tableData && this.$refs.memberTable) {
            this.selectData = selected;
            // 确保 tableData 和 memberTable 都存在
            if (this.tableData && this.$refs.memberTable) {
                this.$nextTick(() => {
                    // 设置新的选中状态
                    this.tableData.forEach(row => {
                        if (selected.some(i => i.userId === row.userId)) {
                            this.$refs.memberTable.toggleRowSelection(row, true)
                        }
                    })
                }
            })
                        const isSelected = selected.some(i => i.userId === row.userId);
                        this.$refs.memberTable.toggleRowSelection(row, isSelected);
                    });
                });
            }
        },
        openDialog() {
            // 获取角色列表并根据项目组ID进行过滤
@@ -98,6 +131,8 @@
                if (this.projectId) {
                    // 过滤出实验员和化验师角色
                    this.roleList = res.filter(item => item.roleId == 4 || item.roleId == 5);
                } else if (this.roleType) {
                    this.roleList = res.filter(item => item.roleId == this.roleType);
                } else {
                    this.roleList = res;
                }
@@ -105,44 +140,81 @@
            this.searchUserList(null);
        },
        handleSelectionChange(val) {
            this.selectData = val
            // 获取当前表格所有 userId
            const currentIds = this.tableData.map(i => i.userId);
            // 1. 保留不在当前表格的已选
            const remain = this.selectData.filter(i => !currentIds.includes(i.userId));
            // 2. 合并当前表格新选中的
            const merged = [...remain, ...val];
            // 3. 去重(以 userId 为唯一标识)
            const unique = [];
            const map = {};
            for (const item of merged) {
                if (!map[item.userId]) {
                    unique.push(item);
                    map[item.userId] = true;
                }
            }
            this.selectData = unique;
        },
        handleRoleClick(clickedRoleId) {
            if (this.roleId === clickedRoleId) {
                // 再次点击,取消筛选
                this.roleId = null;
                this.searchUserList(null);
            } else {
                // 切换到新角色
                this.roleId = clickedRoleId;
                this.searchUserList(clickedRoleId);
            }
        },
        async searchUserList(roleId) {
            this.roleId = roleId
            // this.roleId = roleId // 不再赋值 roleId,由 handleRoleClick 控制
            // 根据是否有项目组ID来决定调用不同的接口
            let params = {
                roleIds: roleId ? [roleId] : [],
                nickNameOrPhone: this.searchName,
                nickNameOrPhone: this.nickNameOrPhone,
                pageSize: 9999,
                pageNum: 1
            };
            if (this.projectId) {
                params={
                params = {
                    ...params,
                    roleId: roleId?roleId:'',
                    projectId: this.projectId
                    roleId: roleId ? roleId : '',
                    projectId: this.projectId,
                    nickName: this.nickNameOrPhone,
                }
                delete params.roleIds;
                // TODO: 这里需要替换为新的接口调用
                const res = await listByRole(params);
                this.tableData = res;
            } else {
                this.tableData = res.filter(item => item.status == 0 && (item.roleId == 4 || item.roleId == 5));
            } else if (this.roleType) {
                params = {
                    ...params,
                    roleIds: [this.roleType],
                }
                const res = await getUserList(params);
                this.tableData = res.records;
            } else {
                const res = await getUserList(params);
                this.tableData = res.records.filter(item => item.status == 0);
            }
            // 数据加载完成后重新应用选中状态
            this.setSelection(this.selectData)
        },
        searchRole() {
        searchRoleRest() {
            this.search = ''
        },
        open() {
            this.visible = true
        },
        close() {
            this.visible = false
            this.visible = false;
            this.selectData = [];
            this.roleId = null;
            this.search = '';
            this.nickNameOrPhone = '';
            this.tableData = [];
        },
        submit() {
            this.$emit('submit', this.selectData)