| | |
|---|
| | | <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 }} |
|---|
| | |
|---|
| | | <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" |
|---|
| | | <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="roleType" > |
|---|
| | | <el-table-column label="角色" prop="roleId" > |
|---|
| | | <template #default="scope"> |
|---|
| | | <span v-if="scope.row.roleType == 1">超级管理员</span> |
|---|
| | | <span v-if="scope.row.roleType == 2">审批人</span> |
|---|
| | | <span v-if="scope.row.roleType == 3">工艺工程师</span> |
|---|
| | | <span v-if="scope.row.roleType == 4">化验师</span> |
|---|
| | | <span v-if="scope.row.roleType == 5">实验员</span> |
|---|
| | | <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" /> |
|---|
| | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | 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; |
|---|
| | | // 确保 tableData 和 memberTable 都存在 |
|---|
| | |
|---|
| | | 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, |
|---|
| | | roleId: roleId?roleId:'', |
|---|
| | | projectId: this.projectId |
|---|
| | | projectId: this.projectId, |
|---|
| | | nickName: this.nickNameOrPhone, |
|---|
| | | } |
|---|
| | | delete params.roleIds; |
|---|
| | | // TODO: 这里需要替换为新的接口调用 |
|---|
| | |
|---|
| | | const res = await getUserList(params); |
|---|
| | | this.tableData = res.records; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 数据加载完成后重新应用选中状态 |
|---|
| | | this.setSelection(this.selectData) |
|---|
| | | }, |
|---|
| | | searchRole() { |
|---|
| | | searchRoleRest() { |
|---|
| | | this.search = '' |
|---|
| | | }, |
|---|
| | | open() { |
|---|
