H5/leshan-laboratory.git

			@@ -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>
			@@ -13,18 +13,19 @@
			<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 v-for="item in 10" :key="item.id"
			class="select-member-content-left-list-itemBox-item">
			实验员
			<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 }}
			</div>
			</div>
			</div>
			@@ -35,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="searchName" 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 :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="role" />
			<el-table-column label="姓名" prop="name" />
			<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>
			@@ -52,52 +67,160 @@
			</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, listByRole } from './service'
			export default {
			props: {
			projectId: {
			type: [String, Number],
			default: null
			},
			roleType: {
			type: [String, Number],
			default: null
			},
			},
			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: {
			handleSelectionChange(val) {
			this.selectData = val
			},
			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;
			// 确保 tableData 和 memberTable 都存在
			if (this.tableData && this.$refs.memberTable) {
			this.$nextTick(() => {
			// 设置新的选中状态
			this.tableData.forEach(row => {
			const isSelected = selected.some(i => i.userId === row.userId);
			this.$refs.memberTable.toggleRowSelection(row, isSelected);
			});
			});
			}
			},
			openDialog() {
			// 获取角色列表并根据项目组ID进行过滤
			getRoleList().then(res => {
			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;
			}
			});
			this.searchUserList(null);
			},
			handleSelectionChange(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 // 不再赋值 roleId，由 handleRoleClick 控制
			// 根据是否有项目组ID来决定调用不同的接口
			let params = {
			roleIds: roleId ? [roleId] : [],
			nickNameOrPhone: this.nickNameOrPhone,
			pageSize: 9999,
			pageNum: 1
			};
			if (this.projectId) {
			params = {
			...params,
			roleId: roleId ? roleId : '',
			projectId: this.projectId,
			nickName: this.nickNameOrPhone,
			}
			delete params.roleIds;
			// TODO: 这里需要替换为新的接口调用
			const res = await listByRole(params);
			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)
			},
			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)
			},
			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 +314,12 @@
			&:last-child {
			margin-bottom: 0;
			}

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