新增团队多选人员功能

src/api/select.js

@@ -12,7 +12,7 @@ export async function getClassifyMarkSelApi(params) {
 // 部门下拉树
 export async function getDeptSelectApi(params) {
     return await request({
-        url: '/smartPlatform/transferApply/getDeptSelect',
+        url: '/smartPlatform/system/dept/list',
         method: 'get',
         params,
     })
@@ -25,4 +25,4 @@ export async function getRoleSelectApi(params) {
         method: 'get',
         params,
     })
-}
+}

src/views/system/team/components/TeamForm.vue

@@ -8,7 +8,25 @@
                     <el-input class="form-item" v-model="form.teamName" clearable show-word-limit placeholder="请输入团队名称"
                         maxlength="32"></el-input>
                 </el-form-item>
-                
+
+            <el-form-item label="团队成员" prop="memberIds">
+                <el-select
+                    v-model="form.memberIds"
+                    multiple
+                    clearable
+                    filterable
+                    placeholder="请选择团队成员"
+                    class="form-item"
+                    v-loading="false">
+                  <el-option
+                    v-for="person in personList"
+                    :key="person.userId"
+                    :label="person.userName"
+                    :value="person.userId">
+                  </el-option>
+                </el-select>
+            </el-form-item>
+
                 <el-form-item label="备注" prop="teamRemark">
                     <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" class="form-item"
                         v-model.trim="form.teamRemark" clearable show-word-limit placeholder="请输入备注"
@@ -26,6 +44,7 @@
 <script>
 import _ from 'lodash'
 import { addTeamAPI, editTeamAPI } from '@/api/system/team'
+import { listUser } from '@/api/system/user'
 // 默认参数
 export default {
     name: "TeamForm",
@@ -38,12 +57,18 @@ export default {
                 teamId: null,
                 teamName: '',
                 teamRemark: '',
+                memberIds: [],
             },
             rules: {
                 teamName: [
                     { required: true, message: '团队名称不能为空', trigger: 'blur' }
                 ],
+            memberIds: [
+                    { required: true, message: '请选择至少一名团队成员', trigger: 'change' }
+                ],
             },
+          personList: [], // 人员列表数据源
+          personLoading: false // 人员列表加载状态
         };
     },
     watch: {
@@ -56,15 +81,45 @@ export default {
             immediate: true,
         },
     },
+
+    created() {
+      this.initPersonList();
+    },
+
     methods: {
+
+        async initPersonList() {
+          try {
+            this.personLoading = true;
+            const res = await listUser({});
+            if (res.code === 200) {
+              const userList = res.rows || [];
+              this.personList = userList.map(item => {
+                return {
+                  userId: item.userId, // 主键ID
+                  userName: item.userName, // 显示名称
+                };
+              });
+            } else {
+              this.$modal.msgError('获取人员列表失败：' + res.msg);
+            }
+          } catch (error) {
+            this.$modal.msgError('获取人员列表异常：' + error.message);
+            console.error('获取人员列表失败：', error);
+          } finally {
+            this.personLoading = false;
+          }
+        },
+
         /** 初始化表单数据 */
         async initFormData() {
-            if (!this.rowData) return;
+          if (!this.rowData) return;
             // 编辑模式：填充表单数据
             this.form = {
                 teamId: this.rowData.teamId,
                 teamName: this.rowData.teamName || '',
                 teamRemark: this.rowData.teamRemark || '',
+                memberIds: this.rowData.memberIds || [], // 回显已选的用户ID数组
             };
         },
         /*关闭弹窗 */
@@ -191,7 +246,7 @@ export default {
 .w700 ::v-deep .el-dialog__header {
     flex-shrink: 0;
     border-bottom: 1px solid #EBEEF5;
-    
+
     .el-dialog__title {
         font-size: 16px;
     }
@@ -209,6 +264,10 @@ export default {
     width: 100%;
 }
 
+::v-deep .el-select__tags {
+  flex-wrap: wrap;
+}
+
 .select-style {
     display: flex;
     justify-content: space-between;
@@ -279,4 +338,4 @@ export default {
         }
     }
 }
-</style>
+</style>

src/views/system/team/config.js

@@ -12,7 +12,7 @@ export const formLabel = [
 
 export const columnsList = [
     { t_props: 'teamName', t_label: '团队名称' },
-    { t_slot: 'teamNum', t_label: '团队成员' },
+    { t_slot: 'teamNum', t_label: '团队成员'  },
     { t_props: 'teamRemark', t_label: '备注' },
     { t_props: 'createTime', t_label: '创建时间' },
-]
+]

src/views/system/team/index.vue

@@ -12,7 +12,13 @@
                             class="el-icon-plus"></i> 新增团队</el-button>
                 </template>
                 <template slot="teamNum" slot-scope="{ data }">
-                    <span>{{ data.teamNum }}</span>
+                    <span
+                      class="version-link"
+                      @click="handleUserListClick(data)"
+                      v-if="data.teamNum"
+                    >
+                      {{ data.teamNum }}
+                    </span>
                 </template>
 
                 <template slot="handle" slot-scope="{ data }">
@@ -60,6 +66,15 @@ export default {
     created() { },
 
     methods: {
+        handleUserListClick(data) {
+          this.$router.push({
+            name: 'UserList',
+            query: {
+              // templateId: encryptWithSM4(data.templateId.toString()),
+            },
+            title: `人员信息`
+          });
+        },
 
         /** 新增按钮操作 */
         handleAdd() {
@@ -153,4 +168,15 @@ export default {
         margin-right: 0;
     }
 }
+
+.version-link {
+  color: #1F72EA;
+  cursor: pointer;
+  transition: color 0.3s ease;
+
+  &:hover {
+    color: #4A8BFF;
+  }
+}
+
 </style>