组件优化：重构成员选择功能，使用用户选择组件替代原生下拉框

src/views/system/staff/index.vue

@@ -11,9 +11,20 @@
         </el-select>
       </el-form-item>
       <el-form-item label="成员" prop="userId">
-        <el-select v-model="queryParams.userId" filterable clearable>
-          <el-option v-for="itemU in userList" :key="itemU.userId" :label="itemU.userName" :value="itemU.userId" />
-        </el-select>
+        <div class="approver-selector">
+          <div class="approver-input" @click="openQueryUserSelect">
+            <span v-if="selectedQueryUsers.length === 0" class="placeholder">请选择成员</span>
+            <el-tag 
+              v-for="(user, index) in selectedQueryUsers" 
+              :key="user.userId" 
+              closable 
+              @close="removeQueryUser(user, index)"
+              style="margin-right: 8px; margin-bottom: 5px"
+            >
+              {{ user.nickName || user.userName }}
+            </el-tag>
+          </div>
+        </div>
       </el-form-item>
       <!-- <el-form-item label="角色" prop="roleId">
         <el-select v-model="queryParams.roleId">
@@ -73,7 +84,7 @@
       <el-table-column label="成员类型" align="center" prop="userTypeName" />
       <el-table-column label="系统角色" align="center" prop="roleName" />
       <el-table-column label="创建日期" align="center" prop="createTime" />
-      <el-table-column label="进入项目日期" align="center" prop="mBdate" width="180" />
+      <!-- <el-table-column label="进入项目日期" align="center" prop="mBdate" width="180" />
       <el-table-column label="项目编号" align="center" prop="projectPid" min-width="90" >
         <template slot-scope="scope">
           <el-tooltip placement="top" popper-class="pid-tooltip">
@@ -90,7 +101,7 @@
           </el-tooltip>
         </template>
       </el-table-column>
-      <el-table-column label="用户名称" align="center" prop="userName" />
+      <el-table-column label="用户名称" align="center" prop="userName" /> -->
       <!-- <el-table-column label="角色" align="center" prop="roleName" /> -->
       <el-table-column label="进入项目日期" align="center" prop="mBdate" width="180">
         <template slot-scope="scope">
@@ -128,11 +139,20 @@
           </el-select>
         </el-form-item>
         <el-form-item label="成员" prop="userName">
-          <el-select v-model="form.userId" clearable style="width: 100%;" @focus="handleFocusUserInput"
-                     clearable>
-            <el-option v-for="itemU in userList" :key="itemU.userId.toString()" :label="itemU.userName"
-              :value="itemU.userId.toString()" />
-          </el-select>
+          <div class="approver-selector">
+            <div class="approver-input" @click="openUserSelect">
+              <span v-if="selectedUsers.length === 0" class="placeholder">请选择成员</span>
+              <el-tag 
+                v-for="(user, index) in selectedUsers" 
+                :key="user.userId" 
+                closable 
+                @close="removeUser(user, index)"
+                style="margin-right: 8px; margin-bottom: 5px"
+              >
+                {{ user.nickName || user.userName }}
+              </el-tag>
+            </div>
+          </div>
         </el-form-item>
 
         <!-- <el-form-item label="进入项目日期" prop="mBdate">-->
@@ -181,15 +201,33 @@
       </div>
     </el-dialog>
 
-
+    <!-- 用户选择组件 -->
+    <user-select
+      :visible.sync="showUserSelectDialog"
+      title="选择成员"
+      select-mode="single"
+      @confirm="handleUserSelectConfirm"
+    />
+    
+    <!-- 查询表单用户选择组件 -->
+    <user-select
+      :visible.sync="showQueryUserSelectDialog"
+      title="查询成员"
+      select-mode="single"
+      @confirm="handleQueryUserSelectConfirm"
+    />
   </div>
 </template>
 
 <script>
 import { listStaff, getStaff, delStaff, addStaff, updateStaff, projectList, userList, roleList } from "@/api/system/staff";
+import UserSelect from "@/components/UserSelect";
 
 export default {
   name: "Staff",
+  components: {
+    UserSelect
+  },
   data() {
     return {
       // 遮罩层
@@ -242,6 +280,13 @@ export default {
       },
       showUserDialog: false,
       userTotal: 0,
+      // 用户选择相关数据
+      showUserSelectDialog: false,
+      selectedUsers: [], // 当前选中的用户列表
+      
+      // 查询表单用户选择相关数据
+      showQueryUserSelectDialog: false,
+      selectedQueryUsers: [], // 查询表单中选中的用户列表
     };
   },
   created() {
@@ -318,6 +363,7 @@ export default {
         updateBy: null,
         updateTime: null
       };
+      this.selectedUsers = []; // 清空选中的用户
       this.resetForm("form");
       this.resetForm("queryUserForm");
     },
@@ -328,6 +374,7 @@ export default {
     },
     /** 重置按钮操作 */
     resetQuery() {
+      this.selectedQueryUsers = []; // 清空查询表单中选中的用户
       this.resetForm("queryForm");
       this.handleQuery();
     },
@@ -351,6 +398,7 @@ export default {
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
+      this.selectedUsers = []; // 清空选中的用户
       this.open = true;
       this.title = "添加项目成员";
     },
@@ -363,6 +411,14 @@ export default {
       this.getUserList();
       getStaff(id).then(response => {
         this.form = response.data;
+        // 设置选中的用户信息
+        if (row.userName && row.userId) {
+          this.selectedUsers = [{
+            userId: row.userId,
+            userName: row.userName,
+            nickName: row.nickName || row.userName
+          }];
+        }
         this.open = true;
         this.title = "修改项目成员";
       });
@@ -424,10 +480,83 @@ export default {
         this.roleList = response.rows;
       });
     },
+    
+    // 打开用户选择对话框
+    openUserSelect() {
+      this.showUserSelectDialog = true;
+    },
+    
+    // 处理用户选择确认
+    handleUserSelectConfirm(data) {
+      // 单选模式，只取第一个用户
+      if (data.users && data.users.length > 0) {
+        this.selectedUsers = [data.users[0]];
+        this.form.userId = data.users[0].userId;
+      }
+    },
+    
+    // 移除选中的用户
+    removeUser(user, index) {
+      this.selectedUsers.splice(index, 1);
+      this.form.userId = null;
+    },
+    
+    // 打开查询表单用户选择对话框
+    openQueryUserSelect() {
+      this.showQueryUserSelectDialog = true;
+    },
+    
+    // 处理查询表单用户选择确认
+    handleQueryUserSelectConfirm(data) {
+      // 单选模式，只取第一个用户
+      if (data.users && data.users.length > 0) {
+        this.selectedQueryUsers = [data.users[0]];
+        this.queryParams.userId = data.users[0].userId;
+      }
+    },
+    
+    // 移除查询表单中选中的用户
+    removeQueryUser(user, index) {
+      this.selectedQueryUsers.splice(index, 1);
+      this.queryParams.userId = null;
+    },
   }
 };
 </script>
 
+<style scoped>
+.approver-selector {
+  width: 100%;
+}
+
+.approver-input {
+  min-height: 32px;
+  padding: 0 15px;
+  border: 1px solid #DCDFE6;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: border-color 0.2s;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 5px;
+}
+
+.approver-input:hover {
+  border-color: #C0C4CC;
+}
+
+.approver-input:focus {
+  border-color: #409EFF;
+  outline: none;
+}
+
+.placeholder {
+  color: #C0C4CC;
+  font-size: 14px;
+}
+</style>
+
 <style>
 .pid-ellipsis {
   display: inline-block;