| | |
| | | <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> |
| | |
| | | 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 }} |
| | |
| | | <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" |
| | |
| | | nickNameOrPhone: '', |
| | | tableData: [], |
| | | selectData: [], |
| | | roleList: [], |
| | | roleList: [], // 原始角色列表 |
| | | filteredRoleList: [], // 过滤后的角色列表 |
| | | roleId: null, |
| | | } |
| | | }, |
| | |
| | | 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) { |
| | |
| | | // 根据是否有项目组ID来决定调用不同的接口 |
| | | const params = { |
| | | roleIds: roleId ? [roleId] : [], |
| | | nickNameOrPhone: this.searchName, |
| | | nickNameOrPhone: this.nickNameOrPhone, // 使用 nickNameOrPhone 进行搜索 |
| | | pageSize: 9999, |
| | | pageNum: 1 |
| | | }; |
| | |
| | | }) |
| | | }, |
| | | 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 |
| | |
| | | </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); |