From 527efb36f35b471710e445972673abff45bacdac Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期五, 12 九月 2025 17:36:09 +0800
Subject: [PATCH] 401跳转登录
---
laboratory/src/components/SelectMember/index.vue | 203 +++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 166 insertions(+), 37 deletions(-)
diff --git a/laboratory/src/components/SelectMember/index.vue b/laboratory/src/components/SelectMember/index.vue
index 62039ee..07d7e1b 100644
--- a/laboratory/src/components/SelectMember/index.vue
+++ b/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>
@@ -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;
+ }
}
}
}
--
Gitblit v1.7.1