更新用户权限管理页面
This commit is contained in:
parent
9b21dcf78e
commit
b2dad013ab
|
|
@ -8,15 +8,18 @@
|
|||
|
||||
<el-form :model="form" label-width="120px">
|
||||
<el-form-item label="选择用户">
|
||||
<div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
|
||||
<!-- 方式一：下拉框选择 -->
|
||||
<el-select
|
||||
v-model="userId"
|
||||
filterable
|
||||
remote
|
||||
reserve-keyword
|
||||
placeholder="输入姓名/账号搜索学员"
|
||||
placeholder="下拉框选择用户"
|
||||
:remote-method="searchUsers"
|
||||
:loading="userSearchLoading"
|
||||
style="width: 320px;"
|
||||
style="width: 280px;"
|
||||
@focus="handleSelectFocus"
|
||||
@change="handleUserChange">
|
||||
<el-option
|
||||
v-for="user in userOptions"
|
||||
|
|
@ -25,8 +28,45 @@
|
|||
:value="user.userId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-button type="text" @click="reloadCurrentUser" style="margin-left: 10px;">刷新当前</el-button>
|
||||
<!-- 方式二：搜索框搜索 -->
|
||||
<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,
|
||||
status: '0',
|
||||
userName: keyword,
|
||||
nickName: keyword
|
||||
}).then(response => {
|
||||
pageSize: 10000, // 增加页面大小以获取更多用户
|
||||
status: '0'
|
||||
};
|
||||
|
||||
// 如果有搜索关键词，添加搜索条件
|
||||
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}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user