Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/leshan-labor...

董国庆

2025-05-09 1224f7cc2c2f42a8b70466d14b15d443da1e27fd

 laboratory/src/components/SelectMember/index.vue

@@ -1,6 +1,6 @@
<template>
    <el-dialog class="select-member" :visible.sync="visible" width="53.33%" :close-on-click-modal="false"
        :show-close="false">
    <el-dialog @open="openDialog" class="select-member" :visible.sync="visible" width="53.33%"
        :close-on-click-modal="false" :show-close="false">
        <template #title>
            <div>选择参与人员</div>
        </template>
@@ -22,9 +22,10 @@
                        <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 v-for="item in 10" :key="item.id"
                                    class="select-member-content-left-list-itemBox-item">
                                    实验员
                                <div @click="searchUserList(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 }}
                                </div>
                            </div>
                        </div>
@@ -35,15 +36,15 @@
                        <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="searchName" placeholder="请输入姓名" />
                                <el-input clearable v-model="nickNameOrPhone" placeholder="请输入姓名/手机号" />
                                <el-button type="primary">搜索</el-button>
                            </div>
                        </div>
                        <Table :data="tableData" :total="0" @selection-change="handleSelectionChange"
                            :row-class-name="tableRowClassName">
                        <Table ref="memberTable" :height="null" :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="role" />
                            <el-table-column label="姓名" prop="name" />
                            <el-table-column label="角色" prop="roleName" />
                            <el-table-column label="姓名" prop="nickName" />
                            <el-table-column label="创建时间" prop="createTime" />
                        </Table>
                    </div>
@@ -52,40 +53,52 @@
        </div>
        <div class="select-member-footer">
            <el-button @click="close" type="default">关闭</el-button>
            <el-button type="primary">确认选择</el-button>
            <el-button type="primary" @click="submit">确认选择</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { mapState } from 'vuex'
import { getRoleList, getUserList } from './service'
export default {
    data() {
        return {
            visible: false,
            search: '',
            searchName: '',
            tableData: [
                {
                    name: '张三',
                    role: '实验员',
                    createTime: '2025-1-2 15:13:58'
                },
                {
                    name: '李四',
                    role: '实验员',
                    createTime: '2025-1-2 15:13:58'
                },
            ],
            selectData: []
            nickNameOrPhone: '',
            tableData: [],
            selectData: [],
            roleList: [],
            roleId: null,
        }
    },
    computed: {
        ...mapState(['isFold'])
    },
    methods: {
        setSelection(selected) {
            this.selectData = selected
            this.$nextTick(() => {
                // 设置新选中
                this.tableData.forEach(row => {
                    if (selected.some(i => i.userId === row.userId)) {
                        this.$refs.memberTable.toggleRowSelection(row, true)
                    }
                })
            })
        },
        openDialog() {
            getRoleList().then(res => {
                this.roleList = res;
            })
            this.searchUserList(null);
        },
        handleSelectionChange(val) {
            this.selectData = val
        },
        async searchUserList(roleId) {
            this.roleId = roleId
            const res = await getUserList({ roleIds: roleId ? [roleId] : [], nickNameOrPhone: this.searchName, pageSize: 9999, pageNum: 1 })
            this.tableData = res.records
            // 数据加载完成后重新应用选中状态
            this.setSelection(this.selectData)
        },
        searchRole() {
            this.search = ''
@@ -96,8 +109,11 @@
        close() {
            this.visible = false
        },
        submit() {
            this.$emit('submit', this.selectData)
        },
        tableRowClassName({ row, rowIndex }) {
            if (this.selectData.findIndex(item => item.name === row.name) != -1) {
            if (this.selectData.findIndex(item => item.userId === row.userId) != -1) {
                return 'select-row';
            }
            return '';
@@ -191,6 +207,12 @@
                    &:last-child {
                        margin-bottom: 0;
                    }

                    &:hover,
                    &.active {
                        background: rgba(4, 156, 154, 0.1);
                        color: #049C9A;
                    }
                }
            }
        }