162 lines
8.0 KiB
Vue
162 lines
8.0 KiB
Vue
|
<template>
|
||
|
|
<el-card>
|
||
|
|
<el-tabs v-model="tab">
|
||
|
|
<!-- 用户 -->
|
||
|
|
<el-tab-pane label="用户" name="users">
|
||
|
|
<div style="margin-bottom:10px">
|
||
|
|
<el-button type="primary" @click="openUser()">新增用户</el-button>
|
||
|
|
</div>
|
||
|
|
<el-table :data="users" border size="small">
|
||
|
|
<el-table-column prop="id" label="ID" width="60" />
|
||
|
|
<el-table-column prop="username" label="用户名" min-width="120" />
|
||
|
|
<el-table-column prop="name" label="姓名" min-width="110" />
|
||
|
|
<el-table-column prop="roleId" label="角色ID" width="80" />
|
||
|
|
<el-table-column prop="status" label="状态" width="90" />
|
||
|
|
<el-table-column label="操作" width="140">
|
||
|
|
<template #default="{row}">
|
||
|
|
<el-button size="small" @click="openUser(row)">编辑</el-button>
|
||
|
|
<el-button size="small" type="danger" @click="delUser(row)">删除</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</el-tab-pane>
|
||
|
|
|
||
|
|
<!-- 角色 -->
|
||
|
|
<el-tab-pane label="角色" name="roles">
|
||
|
|
<div style="margin-bottom:10px">
|
||
|
|
<el-button type="primary" @click="openRole()">新增角色</el-button>
|
||
|
|
</div>
|
||
|
|
<el-table :data="roles" border size="small">
|
||
|
|
<el-table-column prop="id" label="ID" width="60" />
|
||
|
|
<el-table-column prop="name" label="名称" min-width="120" />
|
||
|
|
<el-table-column prop="code" label="编码" min-width="130" />
|
||
|
|
<el-table-column prop="remark" label="备注" min-width="150" />
|
||
|
|
<el-table-column label="操作" width="140">
|
||
|
|
<template #default="{row}">
|
||
|
|
<el-button size="small" @click="openRole(row)">编辑</el-button>
|
||
|
|
<el-button size="small" type="danger" @click="delRole(row)">删除</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</el-tab-pane>
|
||
|
|
|
||
|
|
<!-- 权限 -->
|
||
|
|
<el-tab-pane label="权限菜单" name="perms">
|
||
|
|
<div style="margin-bottom:10px">
|
||
|
|
<el-button type="primary" @click="openPerm()">新增权限</el-button>
|
||
|
|
</div>
|
||
|
|
<el-table :data="perms" border size="small">
|
||
|
|
<el-table-column prop="id" label="ID" width="60" />
|
||
|
|
<el-table-column prop="code" label="编码" min-width="150" />
|
||
|
|
<el-table-column prop="name" label="名称" min-width="120" />
|
||
|
|
<el-table-column prop="type" label="类型" width="80" />
|
||
|
|
<el-table-column prop="path" label="路径" min-width="120" />
|
||
|
|
<el-table-column prop="sort" label="排序" width="70" />
|
||
|
|
<el-table-column label="操作" width="140">
|
||
|
|
<template #default="{row}">
|
||
|
|
<el-button size="small" @click="openPerm(row)">编辑</el-button>
|
||
|
|
<el-button size="small" type="danger" @click="delPerm(row)">删除</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
|
||
|
|
<!-- 用户编辑 -->
|
||
|
|
<el-dialog v-model="u.show" :title="u.id?'编辑用户':'新增用户'" width="420px">
|
||
|
|
<el-form :model="u" label-width="80px">
|
||
|
|
<el-form-item label="用户名"><el-input v-model="u.username" /></el-form-item>
|
||
|
|
<el-form-item label="密码"><el-input v-model="u.password" type="password" show-password /></el-form-item>
|
||
|
|
<el-form-item label="姓名"><el-input v-model="u.name" /></el-form-item>
|
||
|
|
<el-form-item label="角色">
|
||
|
|
<el-select v-model="u.roleId" style="width:100%">
|
||
|
|
<el-option v-for="r in roles" :key="r.id" :label="r.name" :value="r.id" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="状态">
|
||
|
|
<el-select v-model="u.status" style="width:100%">
|
||
|
|
<el-option label="启用" value="ENABLED" /><el-option label="禁用" value="DISABLED" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<template #footer><el-button @click="u.show=false">取消</el-button><el-button type="primary" @click="saveUser">保存</el-button></template>
|
||
|
|
</el-dialog>
|
||
|
|
|
||
|
|
<!-- 角色编辑 -->
|
||
|
|
<el-dialog v-model="r.show" :title="r.id?'编辑角色':'新增角色'" width="560px">
|
||
|
|
<el-form :model="r" label-width="80px">
|
||
|
|
<el-form-item label="名称"><el-input v-model="r.name" /></el-form-item>
|
||
|
|
<el-form-item label="编码"><el-input v-model="r.code" /></el-form-item>
|
||
|
|
<el-form-item label="备注"><el-input v-model="r.remark" /></el-form-item>
|
||
|
|
<el-form-item label="权限">
|
||
|
|
<el-select v-model="r.permissionCodes" multiple filterable style="width:100%">
|
||
|
|
<el-option v-for="p in perms" :key="p.code" :label="p.name" :value="p.code" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<template #footer><el-button @click="r.show=false">取消</el-button><el-button type="primary" @click="saveRole">保存</el-button></template>
|
||
|
|
</el-dialog>
|
||
|
|
|
||
|
|
<!-- 权限编辑 -->
|
||
|
|
<el-dialog v-model="p.show" :title="p.id?'编辑权限':'新增权限'" width="460px">
|
||
|
|
<el-form :model="p" label-width="80px">
|
||
|
|
<el-form-item label="编码"><el-input v-model="p.code" /></el-form-item>
|
||
|
|
<el-form-item label="名称"><el-input v-model="p.name" /></el-form-item>
|
||
|
|
<el-form-item label="类型"><el-input v-model="p.type" /></el-form-item>
|
||
|
|
<el-form-item label="路径"><el-input v-model="p.path" /></el-form-item>
|
||
|
|
<el-form-item label="排序"><el-input-number v-model="p.sort" /></el-form-item>
|
||
|
|
<el-form-item label="备注"><el-input v-model="p.remark" /></el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<template #footer><el-button @click="p.show=false">取消</el-button><el-button type="primary" @click="savePerm">保存</el-button></template>
|
||
|
|
</el-dialog>
|
||
|
|
</el-card>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, reactive, onMounted } from 'vue'
|
||
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
|
|
import request from '../utils/request'
|
||
|
|
|
||
|
|
const tab = ref('users')
|
||
|
|
const users = ref([]), roles = ref([]), perms = ref([])
|
||
|
|
const u = reactive({ show: false, id: 0, username: '', password: '', name: '', roleId: 0, status: 'ENABLED' })
|
||
|
|
const r = reactive({ show: false, id: 0, name: '', code: '', remark: '', permissionCodes: [] })
|
||
|
|
const p = reactive({ show: false, id: 0, code: '', name: '', type: 'MENU', path: '', sort: 0, remark: '' })
|
||
|
|
|
||
|
|
async function loadAll() {
|
||
|
|
users.value = (await request.get('/users')) || []
|
||
|
|
roles.value = (await request.get('/roles')) || []
|
||
|
|
perms.value = (await request.get('/permissions')) || []
|
||
|
|
}
|
||
|
|
function openUser(row) { Object.assign(u, row ? { ...row, show: true, password: '' } : { show: true, id: 0, username: '', password: '', name: '', roleId: roles.value[0]?.id || 0, status: 'ENABLED' }) }
|
||
|
|
async function saveUser() {
|
||
|
|
if (u.id) await request.put('/users', { ...u })
|
||
|
|
else await request.post('/users', { ...u })
|
||
|
|
ElMessage.success('保存成功'); u.show = false; loadAll()
|
||
|
|
}
|
||
|
|
async function delUser(row) {
|
||
|
|
await ElMessageBox.confirm('确认删除该用户？', '提示', { type: 'warning' })
|
||
|
|
await request.delete(`/users/${row.id}`); loadAll()
|
||
|
|
}
|
||
|
|
function openRole(row) { Object.assign(r, row ? { ...row, show: true } : { show: true, id: 0, name: '', code: '', remark: '', permissionCodes: [] }) }
|
||
|
|
async function saveRole() {
|
||
|
|
if (r.id) await request.put('/roles', { ...r })
|
||
|
|
else await request.post('/roles', { ...r })
|
||
|
|
ElMessage.success('保存成功'); r.show = false; loadAll()
|
||
|
|
}
|
||
|
|
async function delRole(row) {
|
||
|
|
await ElMessageBox.confirm('确认删除该角色？', '提示', { type: 'warning' })
|
||
|
|
await request.delete(`/roles/${row.id}`); loadAll()
|
||
|
|
}
|
||
|
|
function openPerm(row) { Object.assign(p, row ? { ...row, show: true } : { show: true, id: 0, code: '', name: '', type: 'MENU', path: '', sort: 0, remark: '' }) }
|
||
|
|
async function savePerm() {
|
||
|
|
if (p.id) await request.put('/permissions', { ...p })
|
||
|
|
else await request.post('/permissions', { ...p })
|
||
|
|
ElMessage.success('保存成功'); p.show = false; loadAll()
|
||
|
|
}
|
||
|
|
async function delPerm(row) {
|
||
|
|
await ElMessageBox.confirm('确认删除该权限？', '提示', { type: 'warning' })
|
||
|
|
await request.delete(`/permissions/${row.id}`); loadAll()
|
||
|
|
}
|
||
|
|
onMounted(loadAll)
|
||
|
|
</script>
|