From f9114ffadfab1c01198dd980c3afb66d0c44a5ea Mon Sep 17 00:00:00 2001
From: zzw <228544128@qq.com>
Date: 星期二, 06 十月 2026 18:22:00 +0800
Subject: [PATCH] fix: limit equipment picker to selected X number
---
emergency-repair-web/src/views/system/RoleManage.vue | 199 ++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 187 insertions(+), 12 deletions(-)
diff --git a/emergency-repair-web/src/views/system/RoleManage.vue b/emergency-repair-web/src/views/system/RoleManage.vue
index fbaec3e..a711de8 100644
--- a/emergency-repair-web/src/views/system/RoleManage.vue
+++ b/emergency-repair-web/src/views/system/RoleManage.vue
@@ -1,8 +1,8 @@
<template>
<div class="page">
<div class="page-title">
- <div><h2>瑙掕壊绠＄悊</h2><p>绗竴鐗堟殏涓嶅惎鐢ㄨ鑹叉帶鍒讹紝椤甸潰鍜屾暟鎹粨鏋勪负鍚庣画鏉冮檺鍚敤棰勭暀</p></div>
- <el-button type="primary" icon="el-icon-plus" @click="openCreate">鏂板瑙掕壊</el-button>
+ <div><h2>瑙掕壊绠＄悊</h2><p>缁存姢瑙掕壊淇℃伅锛屽苟鍙寜瑙掕壊璁剧疆鎵�灞炵敤鎴峰拰鑿滃崟鎸夐挳鏉冮檺</p></div>
+ <el-button type="primary" icon="el-icon-plus" v-permission="'system:roles:add'" @click="openCreate">鏂板瑙掕壊</el-button>
</div>
<div class="table-panel">
<el-table :data="rows" border stripe height="calc(100vh - 190px)">
@@ -10,35 +10,210 @@
<el-table-column prop="name" label="瑙掕壊鍚嶇О" min-width="180"></el-table-column>
<el-table-column prop="code" label="瑙掕壊缂栫爜" width="170"></el-table-column>
<el-table-column prop="roleType" label="瑙掕壊绫诲瀷" width="170"></el-table-column>
- <el-table-column prop="remark" label="澶囨敞" min-width="260" show-overflow-tooltip></el-table-column>
- <el-table-column label="鎿嶄綔" width="130" fixed="right"><template slot-scope="{ row }"><el-button type="text" @click="openEdit(row)">缂栬緫</el-button><el-button type="text" class="danger-link" @click="remove(row)">鍒犻櫎</el-button></template></el-table-column>
+ <el-table-column prop="remark" label="澶囨敞" min-width="220" show-overflow-tooltip></el-table-column>
+ <el-table-column label="鎿嶄綔" width="300" fixed="right">
+ <template slot-scope="{ row }">
+ <el-button type="text" v-permission="'system:roles:assign'" @click="openUserSetting(row)">鐢ㄦ埛璁剧疆</el-button>
+ <el-button type="text" v-permission="'system:roles:permission'" @click="openPermissionSetting(row)">鏉冮檺璁剧疆</el-button>
+ <el-button type="text" v-permission="'system:roles:edit'" @click="openEdit(row)">缂栬緫</el-button>
+ <el-button type="text" class="danger-link" v-permission="'system:roles:delete'" @click="remove(row)">鍒犻櫎</el-button>
+ </template>
+ </el-table-column>
</el-table>
</div>
+
<el-dialog :title="form.id ? '缂栬緫瑙掕壊' : '鏂板瑙掕壊'" :visible.sync="dialogVisible" width="560px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="95px">
<el-form-item label="瑙掕壊鍚嶇О" prop="name"><el-input v-model="form.name"></el-input></el-form-item>
<el-form-item label="瑙掕壊缂栫爜" prop="code"><el-input v-model="form.code"></el-input></el-form-item>
- <el-form-item label="瑙掕壊绫诲瀷"><el-select v-model="form.roleType" style="width:100%"><el-option label="涓氬姟瑙掕壊" value="BUSINESS"></el-option><el-option label="绯荤粺绠＄悊鍛�" value="SYSTEM_ADMIN"></el-option><el-option label="瀹夊叏淇濆瘑绠＄悊鍛�" value="SECURITY_ADMIN"></el-option><el-option label="瀹夊叏瀹¤绠＄悊鍛�" value="AUDIT_ADMIN"></el-option></el-select></el-form-item>
+ <el-form-item label="瑙掕壊绫诲瀷">
+ <el-select v-model="form.roleType" style="width:100%">
+ <el-option label="涓氬姟瑙掕壊" value="BUSINESS"></el-option>
+ <el-option label="绯荤粺绠＄悊鍛�" value="SYSTEM_ADMIN"></el-option>
+ <el-option label="瀹夊叏淇濆瘑绠＄悊鍛�" value="SECURITY_ADMIN"></el-option>
+ <el-option label="瀹夊叏瀹¤绠＄悊鍛�" value="AUDIT_ADMIN"></el-option>
+ </el-select>
+ </el-form-item>
<el-form-item label="鎺掑簭"><el-input-number v-model="form.sortNo" :min="1" style="width:160px"></el-input-number></el-form-item>
<el-form-item label="澶囨敞"><el-input v-model="form.remark" type="textarea" :rows="3"></el-input></el-form-item>
</el-form>
<template slot="footer"><el-button @click="dialogVisible = false">鍙栨秷</el-button><el-button type="primary" :loading="saving" @click="save">淇濆瓨</el-button></template>
</el-dialog>
+
+ <el-dialog title="瑙掕壊鐢ㄦ埛璁剧疆" :visible.sync="userDialogVisible" width="820px" append-to-body :close-on-click-modal="false">
+ <div class="user-setting-head">
+ <div>
+ <span class="role-label">褰撳墠瑙掕壊</span>
+ <strong>{{ currentRole.name }}</strong>
+ <span class="role-code">{{ currentRole.code }}</span>
+ </div>
+ <span class="selected-total">宸查�夋嫨 {{ selectedUserIds.length }} 浜�</span>
+ </div>
+ <div class="user-setting-toolbar">
+ <el-radio-group v-model="userScope" size="small">
+ <el-radio-button label="all">鍏ㄩ儴</el-radio-button>
+ <el-radio-button label="assigned">宸茶缃�</el-radio-button>
+ </el-radio-group>
+ <el-input v-model="userKeyword" clearable prefix-icon="el-icon-search" placeholder="鐢ㄦ埛鍚� / 璐︽埛鍚� / 閮ㄩ棬" style="width: 280px"></el-input>
+ </div>
+ <el-table
+ ref="roleUserTable"
+ v-loading="userLoading"
+ :data="filteredUsers"
+ row-key="userId"
+ height="430"
+ border
+ stripe
+ @selection-change="handleUserSelectionChange"
+ >
+ <el-table-column type="selection" reserve-selection width="48" align="center"></el-table-column>
+ <el-table-column prop="nickName" label="鐢ㄦ埛鍚�" min-width="120"></el-table-column>
+ <el-table-column prop="userName" label="璐︽埛鍚�" min-width="140"></el-table-column>
+ <el-table-column prop="deptName" label="鎵�灞為儴闂�" min-width="180" show-overflow-tooltip></el-table-column>
+ <el-table-column label="鐘舵��" width="80" align="center">
+ <template slot-scope="{ row }">
+ <el-tag size="mini" :type="row.status === '1' ? 'info' : 'success'">{{ row.status === '1' ? '鍋滅敤' : '姝ｅ父' }}</el-tag>
+ </template>
+ </el-table-column>
+ </el-table>
+ <template slot="footer">
+ <el-button @click="userDialogVisible = false">鍙栨秷</el-button>
+ <el-button type="primary" :loading="userSaving" v-permission="'system:roles:assign'" @click="saveRoleUsers">淇濆瓨</el-button>
+ </template>
+ </el-dialog>
+
+ <role-permission-dialog :visible.sync="permissionDialogVisible" :role="currentRole"></role-permission-dialog>
</div>
</template>
<script>
import api from '@/api'
+import RolePermissionDialog from './RolePermissionDialog.vue'
export default {
name: 'RoleManage',
- data() { return { rows: [], dialogVisible: false, saving: false, form: {}, rules: { name: [{ required: true, message: '璇疯緭鍏ヨ鑹插悕绉�', trigger: 'blur' }], code: [{ required: true, message: '璇疯緭鍏ヨ鑹茬紪鐮�', trigger: 'blur' }] } } },
+ components: { RolePermissionDialog },
+ data() {
+ return {
+ rows: [],
+ dialogVisible: false,
+ permissionDialogVisible: false,
+ saving: false,
+ userDialogVisible: false,
+ userLoading: false,
+ userSaving: false,
+ userKeyword: '',
+ userScope: 'all',
+ roleUsers: [],
+ selectedUserIds: [],
+ currentRole: {},
+ form: {},
+ rules: {
+ name: [{ required: true, message: '璇疯緭鍏ヨ鑹插悕绉�', trigger: 'blur' }],
+ code: [{ required: true, message: '璇疯緭鍏ヨ鑹茬紪鐮�', trigger: 'blur' }]
+ }
+ }
+ },
+ computed: {
+ filteredUsers() {
+ const assigned = new Set(this.selectedUserIds.map(String))
+ const users = this.userScope === 'assigned'
+ ? this.roleUsers.filter(item => assigned.has(String(item.userId)))
+ : this.roleUsers
+ const keyword = this.userKeyword.trim().toLowerCase()
+ if (!keyword) return users
+ return users.filter(item => [item.nickName, item.userName, item.deptName]
+ .some(value => String(value || '').toLowerCase().includes(keyword)))
+ }
+ },
created() { this.load() },
methods: {
- load() { api.get('/system/roles').then(res => { this.rows = res.data || [] }) },
- openCreate() { this.form = { name: '', code: '', roleType: 'BUSINESS', sortNo: this.rows.length + 1, remark: '' }; this.dialogVisible = true },
- openEdit(row) { this.form = { ...row }; this.dialogVisible = true },
- save() { this.$refs.form.validate(valid => { if (!valid) return; this.saving = true; const request = this.form.id ? api.put('/system/roles/' + this.form.id, this.form) : api.post('/system/roles', this.form); request.then(() => { this.$message.success('淇濆瓨鎴愬姛'); this.dialogVisible = false; this.load() }).finally(() => { this.saving = false }) }) },
- remove(row) { this.$confirm(`纭畾鍒犻櫎瑙掕壊鈥�${row.name}鈥濆悧锛焋, '鍒犻櫎纭', { type: 'warning' }).then(() => api.delete('/system/roles/' + row.id)).then(() => { this.$message.success('鍒犻櫎鎴愬姛'); this.load() }).catch(() => {}) }
+ load() {
+ api.get('/system/roles').then(res => { this.rows = res.data || [] })
+ },
+ openCreate() {
+ this.form = { name: '', code: '', roleType: 'BUSINESS', sortNo: this.rows.length + 1, remark: '' }
+ this.dialogVisible = true
+ },
+ openEdit(row) {
+ this.form = { ...row }
+ this.dialogVisible = true
+ },
+ save() {
+ this.$refs.form.validate(valid => {
+ if (!valid) return
+ this.saving = true
+ const request = this.form.id ? api.put('/system/roles/' + this.form.id, this.form) : api.post('/system/roles', this.form)
+ request.then(() => {
+ this.$message.success('淇濆瓨鎴愬姛')
+ this.dialogVisible = false
+ this.load()
+ }).finally(() => { this.saving = false })
+ })
+ },
+ remove(row) {
+ this.$confirm(`纭畾鍒犻櫎瑙掕壊鈥�${row.name}鈥濆悧锛焋, '鍒犻櫎纭', { type: 'warning' })
+ .then(() => api.delete('/system/roles/' + row.id))
+ .then(() => { this.$message.success('鍒犻櫎鎴愬姛'); this.load() })
+ .catch(() => {})
+ },
+ openUserSetting(row) {
+ this.currentRole = { ...row }
+ this.userKeyword = ''
+ this.userScope = 'all'
+ this.selectedUserIds = []
+ this.roleUsers = []
+ this.userDialogVisible = true
+ this.userLoading = true
+ api.get('/system/roles/' + row.id + '/users').then(res => {
+ const data = res.data || {}
+ this.roleUsers = data.records || []
+ this.selectedUserIds = (data.userIds || []).map(String)
+ this.$nextTick(this.restoreUserSelection)
+ }).finally(() => { this.userLoading = false })
+ },
+ openPermissionSetting(row) {
+ this.currentRole = { ...row }
+ this.permissionDialogVisible = true
+ },
+ restoreUserSelection() {
+ const table = this.$refs.roleUserTable
+ if (!table) return
+ table.clearSelection()
+ const selected = new Set(this.selectedUserIds)
+ this.roleUsers.forEach(row => {
+ if (selected.has(String(row.userId))) table.toggleRowSelection(row, true)
+ })
+ this.$nextTick(() => {
+ table.clearSelection()
+ this.roleUsers.forEach(row => {
+ if (selected.has(String(row.userId))) table.toggleRowSelection(row, true)
+ })
+ this.selectedUserIds = Array.from(selected)
+ })
+ },
+ handleUserSelectionChange(selection) {
+ this.selectedUserIds = (selection || []).map(item => String(item.userId))
+ },
+ saveRoleUsers() {
+ const userIds = this.selectedUserIds.slice()
+ const message = userIds.length
+ ? `纭畾灏嗏��${this.currentRole.name}鈥濊鑹茶缃负閫変腑鐨� ${userIds.length} 涓敤鎴峰悧锛焋
+ : `鏈�夋嫨鐢ㄦ埛锛屽皢娓呯┖鈥�${this.currentRole.name}鈥濊鑹茬殑鍏ㄩ儴鐢ㄦ埛锛屾槸鍚︾户缁紵`
+ this.$confirm(message, '瑙掕壊鐢ㄦ埛璁剧疆', { type: 'warning' }).then(() => {
+ this.userSaving = true
+ api.put('/system/roles/' + this.currentRole.id + '/users', { userIds }).then(() => {
+ this.$message.success('瑙掕壊鐢ㄦ埛璁剧疆宸蹭繚瀛�')
+ this.userDialogVisible = false
+ }).finally(() => { this.userSaving = false })
+ }).catch(() => {})
+ }
}
}
</script>
-<style scoped>.danger-link { color: #d9534f; }</style>
+<style scoped>
+.danger-link { color: #d9534f; }
+.user-setting-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; color: #31465d; }
+.role-label { margin-right: 10px; color: #7b8b9c; font-size: 13px; }
+.role-code { margin-left: 8px; color: #93a2b1; font-size: 12px; }
+.selected-total { color: #2f658f; font-size: 13px; }
+.user-setting-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
+</style>
--
Gitblit v1.9.1