更新用户权限管理页面

xinli-ui/src/views/psychology/permission/user.vue

@@ -8,25 +8,65 @@
       
       <el-form :model="form" label-width="120px">
         <el-form-item label="选择用户">
-          <el-select
+          <div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
-            v-model="userId"
+            <!-- 方式一：下拉框选择 -->
-            filterable
+            <el-select
-            remote
+              v-model="userId"
-            reserve-keyword
+              filterable
-            placeholder="输入姓名/账号搜索学员"
+              remote
-            :remote-method="searchUsers"
+              reserve-keyword
-            :loading="userSearchLoading"
+              placeholder="下拉框选择用户"
-            style="width: 320px;"
+              :remote-method="searchUsers"
-            @change="handleUserChange">
+              :loading="userSearchLoading"
-            <el-option
+              style="width: 280px;"
-              v-for="user in userOptions"
+              @focus="handleSelectFocus"
-              :key="user.userId"
+              @change="handleUserChange">
-              :label="user.nickName ? `${user.nickName}（${user.userName}）` : user.userName"
+              <el-option
-              :value="user.userId">
+                v-for="user in userOptions"
-            </el-option>
+                :key="user.userId"
-          </el-select>
+                :label="user.nickName ? `${user.nickName}（${user.userName}）` : user.userName"
-          <el-button type="text" @click="reloadCurrentUser" style="margin-left: 10px;">刷新当前</el-button>
+                :value="user.userId">
+              </el-option>
+            </el-select>
+            <!-- 方式二：搜索框搜索 -->
+            <el-input
+              v-model="searchKeyword"
+              placeholder="输入姓名/账号/手机号搜索用户"
+              clearable
+              style="width: 280px;"
+              @keyup.enter.native="handleSearch"
+              @clear="handleSearchClear">
+              <el-button slot="append" icon="el-icon-search" @click="handleSearch" :loading="searchLoading"></el-button>
+            </el-input>
+            <el-button type="text" @click="reloadCurrentUser">刷新当前</el-button>
+          </div>
         </el-form-item>
+        
+        <!-- 搜索结果列表 -->
+        <el-form-item v-if="searchResults.length > 0" label="搜索结果">
+          <el-table
+            :data="searchResults"
+            border
+            max-height="300"
+            highlight-current-row
+            @row-click="handleSelectSearchUser"
+            style="width: 100%;">
+            <el-table-column type="index" label="序号" width="60" align="center" />
+            <el-table-column prop="userName" label="账号" width="150" />
+            <el-table-column prop="nickName" label="姓名" width="150" />
+            <el-table-column prop="phonenumber" label="手机号" width="130" />
+            <el-table-column prop="email" label="邮箱" min-width="180" :show-overflow-tooltip="true" />
+            <el-table-column label="操作" width="100" align="center">
+              <template slot-scope="scope">
+                <el-button type="text" size="small" @click="handleSelectSearchUser(scope.row)">选择</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div style="margin-top: 10px; color: #909399; font-size: 12px;">
+            提示：点击表格行或"选择"按钮即可选择该用户
+          </div>
+        </el-form-item>
+        
         <el-form-item label="当前用户">
           <el-input v-model="userName" disabled style="width: 300px;" />
         </el-form-item>
@@ -71,7 +111,11 @@ export default {
       scaleList: [],
       selectedScaleIds: [],
       userOptions: [],
-      userSearchLoading: false
+      userSearchLoading: false,
+      // 搜索相关
+      searchKeyword: "",
+      searchResults: [],
+      searchLoading: false
     };
   },
   created() {
@@ -132,19 +176,37 @@ export default {
     /** 搜索可切换的用户 */
     searchUsers(keyword) {
       this.userSearchLoading = true;
-      listUser({
+      const queryParams = {
         pageNum: 1,
-        pageSize: 20,
+        pageSize: 10000, // 增加页面大小以获取更多用户
-        status: '0',
+        status: '0'
-        userName: keyword,
+      };
-        nickName: keyword
+      
-      }).then(response => {
+      // 如果有搜索关键词，添加搜索条件
+      if (keyword && keyword.trim()) {
+        queryParams.userName = keyword.trim();
+        queryParams.nickName = keyword.trim();
+      }
+      
+      listUser(queryParams).then(response => {
         const rows = response.rows || [];
-        this.userOptions = rows.map(item => ({
+        // 合并新搜索到的用户，避免重复
+        const newUsers = rows.map(item => ({
           userId: item.userId,
           userName: item.userName,
           nickName: item.nickName
         }));
+        
+        // 合并用户列表，去重
+        const existingUserIds = new Set(this.userOptions.map(u => u.userId));
+        newUsers.forEach(user => {
+          if (!existingUserIds.has(user.userId)) {
+            this.userOptions.push(user);
+          }
+        });
+      }).catch(error => {
+        console.error('搜索用户失败:', error);
+        this.$modal.msgError("搜索用户失败");
       }).finally(() => {
         this.userSearchLoading = false;
       });
@@ -202,6 +264,90 @@ export default {
     /** 选择变化 */
     handleChange(value, direction, movedKeys) {
       // 可以在这里添加额外的逻辑
+    },
+    /** 下拉框获得焦点时，如果没有用户列表，则加载所有用户 */
+    handleSelectFocus() {
+      if (this.userOptions.length === 0) {
+        this.loadAllUsers();
+      }
+    },
+    /** 加载所有用户 */
+    loadAllUsers() {
+      this.userSearchLoading = true;
+      listUser({
+        pageNum: 1,
+        pageSize: 1000, // 加载更多用户
+        status: '0'
+      }).then(response => {
+        const rows = response.rows || [];
+        this.userOptions = rows.map(item => ({
+          userId: item.userId,
+          userName: item.userName,
+          nickName: item.nickName
+        }));
+        this.$modal.msgSuccess(`已加载 ${this.userOptions.length} 个用户`);
+      }).catch(error => {
+        console.error('加载用户列表失败:', error);
+        this.$modal.msgError("加载用户列表失败");
+      }).finally(() => {
+        this.userSearchLoading = false;
+      });
+    },
+    /** 搜索用户 */
+    handleSearch() {
+      if (!this.searchKeyword || !this.searchKeyword.trim()) {
+        this.$modal.msgWarning("请输入搜索关键词");
+        return;
+      }
+      
+      this.searchLoading = true;
+      this.searchResults = [];
+      const keyword = this.searchKeyword.trim();
+      
+      // 支持按姓名、账号、手机号搜索
+      listUser({
+        pageNum: 1,
+        pageSize: 100,
+        status: '0',
+        userName: keyword,
+        nickName: keyword,
+        phonenumber: keyword
+      }).then(response => {
+        const rows = response.rows || [];
+        this.searchResults = rows.map(item => ({
+          userId: item.userId,
+          userName: item.userName,
+          nickName: item.nickName,
+          phonenumber: item.phonenumber || '-',
+          email: item.email || '-'
+        }));
+        
+        if (this.searchResults.length === 0) {
+          this.$modal.msgWarning("未找到匹配的用户");
+        } else {
+          this.$modal.msgSuccess(`找到 ${this.searchResults.length} 个用户`);
+        }
+      }).catch(error => {
+        console.error('搜索用户失败:', error);
+        this.$modal.msgError("搜索用户失败");
+      }).finally(() => {
+        this.searchLoading = false;
+      });
+    },
+    /** 清空搜索结果 */
+    handleSearchClear() {
+      this.searchResults = [];
+      this.searchKeyword = "";
+    },
+    /** 选择搜索结果中的用户 */
+    handleSelectSearchUser(row) {
+      if (!row || !row.userId) {
+        return;
+      }
+      this.userId = row.userId;
+      this.initializeUserData(row.userId);
+      this.searchResults = []; // 选择后清空搜索结果
+      this.$modal.msgSuccess(`已选择用户：${row.nickName || row.userName}`);
     }
   }
 };