<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>
|
<div class="table-panel">
|
<el-table :data="rows" border stripe height="calc(100vh - 150px)">
|
<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>
|
</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-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>
|
</div>
|
</template>
|
<script>
|
import api from '@/api'
|
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' }] } } },
|
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(() => {}) }
|
}
|
}
|
</script>
|
<style scoped>.danger-link { color: #d9534f; }</style>
|
