From cec75849fc7db84a681b398f544e4d3e40d7d0f7 Mon Sep 17 00:00:00 2001
From: hejianhao <15708179461@qq.com>
Date: 星期四, 15 五月 2025 17:59:18 +0800
Subject: [PATCH] 菌种评定、项目管理
---
culture/src/components/SelectMember/index.vue | 109 +++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 79 insertions(+), 30 deletions(-)
diff --git a/culture/src/components/SelectMember/index.vue b/culture/src/components/SelectMember/index.vue
index 62039ee..7182483 100644
--- a/culture/src/components/SelectMember/index.vue
+++ b/culture/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" :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,79 @@
</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 {
+ props: {
+ projectId: {
+ 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: {
+ 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() {
+ // 获取角色列表并根据项目组ID进行过滤
+ getRoleList().then(res => {
+ if (this.projectId) {
+ // 过滤出实验员和化验师角色
+ this.roleList = res.filter(item => item.roleId == 4 || item.roleId == 5);
+ } else {
+ this.roleList = res;
+ }
+ });
+ this.searchUserList(null);
+ },
handleSelectionChange(val) {
this.selectData = val
+ },
+ async searchUserList(roleId) {
+ this.roleId = roleId
+ // 根据是否有项目组ID来决定调用不同的接口
+ const params = {
+ roleIds: roleId ? [roleId] : [],
+ nickNameOrPhone: this.searchName,
+ pageSize: 9999,
+ pageNum: 1
+ };
+
+ if (this.projectId) {
+ params.projectId = this.projectId;
+ // TODO: 这里需要替换为新的接口调用
+ // const res = await getProjectUserList(params);
+ } else {
+ const res = await getUserList(params);
+ this.tableData = res.records;
+ }
+
+ // 数据加载完成后重新应用选中状态
+ this.setSelection(this.selectData)
},
searchRole() {
this.search = ''
@@ -96,8 +136,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 +234,12 @@
&:last-child {
margin-bottom: 0;
}
+
+ &:hover,
+ &.active {
+ background: rgba(4, 156, 154, 0.1);
+ color: #049C9A;
+ }
}
}
}
--
Gitblit v1.7.1