fix: preserve manually edited menu names

zzw

23 小时以前 ffe06be91f95ffd2459ebdb2f9130d1e38d53ea7

 emergency-repair-web/src/views/system/RoleManage.vue

@@ -1,44 +1,219 @@
<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 - 150px)">
      <el-table :data="rows" border stripe height="calc(100vh - 190px)">
        <el-table-column prop="sortNo" label="排序" width="80" align="center"></el-table-column>
        <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>