董国庆
2025-06-16 c67b37d706daedbc7c4efc74ddadc8f591524b46
culture/src/components/SelectMember/index.vue
@@ -1,5 +1,5 @@
<template>
    <el-dialog @open="openDialog" class="select-member" :visible.sync="visible" width="53.33%"
    <el-dialog @open="openDialog" class="select-member" :z-index="1000"  :visible.sync="visible" width="53.33%"
        :close-on-click-modal="false" :show-close="false">
        <template #title>
            <div>选择参与人员</div>
@@ -17,12 +17,12 @@
                                        src="@/assets/public/close-circle-fill@2x.png" />
                                </div>
                            </div>
                            <el-button type="primary">搜索</el-button>
                            <el-button type="primary" @click="filterRoleList">搜索</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="searchUserList(item.roleId)" v-for="item in filteredRoleList" :key="item.roleId"
                                    class="select-member-content-left-list-itemBox-item"
                                    :class="roleId == item.roleId && 'active'">
                                    {{ item.roleName }}
@@ -36,8 +36,8 @@
                        <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="请输入姓名/手机号" @keyup.enter.native="searchUserList(roleId)" />
                                <el-button type="primary" @click="searchUserList(roleId)">搜索</el-button>
                            </div>
                        </div>
                        <Table ref="memberTable" :row-key="row => row.userId" :data="tableData" :total="0"
@@ -79,7 +79,8 @@
            nickNameOrPhone: '',
            tableData: [],
            selectData: [],
            roleList: [],
            roleList: [], // 原始角色列表
            filteredRoleList: [], // 过滤后的角色列表
            roleId: null,
        }
    },
@@ -98,18 +99,26 @@
        openDialog() {
            // 获取角色列表并根据项目组ID进行过滤
            getRoleList().then(res => {
                let roles = [];
                if (this.projectId) {
                    // 过滤出实验员和化验师角色
                    this.roleList = res.filter(item => item.roleId == 4 || item.roleId == 5);
                    roles = res.filter(item => item.roleId == 4 || item.roleId == 5);
                } else {
                    this.roleList = res;
                    roles = res.filter(item => item.roleId !== 1); // 排除 roleId 为 1 的角色
                }
                this.roleList = roles;
                this.filterRoleList(); // 获取后先进行一次过滤
            });
            this.searchUserList(null);
        },
        handleSelectionChange(val) {
            if (!this.singleSelect) {
                this.selectData = val;
                // 获取当前表格中未被选中的用户ID
                const unselectedInCurrentTable = this.tableData.filter(row => !val.some(selected => selected.userId === row.userId)).map(row => row.userId);
                // 从总的selectData中移除这些未选中的用户,保留其他角色已选中的用户
                const otherSelected = this.selectData.filter(item => !unselectedInCurrentTable.includes(item.userId));
                // 合并当前表格的选中项和其他角色已选中的项
                this.selectData = [...otherSelected.filter(item => !val.some(v => v.userId === item.userId)), ...val];
            }
        },
        async searchUserList(roleId) {
@@ -117,7 +126,7 @@
            // 根据是否有项目组ID来决定调用不同的接口
            const params = {
                roleIds: roleId ? [roleId] : [],
                nickNameOrPhone: this.searchName,
                nickNameOrPhone: this.nickNameOrPhone, // 使用 nickNameOrPhone 进行搜索
                pageSize: 9999,
                pageNum: 1
            };
@@ -139,7 +148,15 @@
            })
        },
        searchRole() {
            this.search = ''
            this.search = '';
            this.filterRoleList(); // 清空搜索词后重新过滤
        },
        filterRoleList() {
            if (this.search) {
                this.filteredRoleList = this.roleList.filter(item => item.roleName.includes(this.search));
            } else {
                this.filteredRoleList = [...this.roleList];
            }
        },
        open() {
            this.visible = true
@@ -173,6 +190,8 @@
</script>
<style scoped lang="less">
// to fix el-message弹框被el-dialog覆盖的问题。
.select-member-content {
    .select-member-content-left {
        box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);