Skip to content

S
shop-vite-main
提交 8bccdd5c 作者: 郁骅焌
操作

角色修改

上级 bf0864e6
正在显示 包含 449 行增加 和 75 行删除
library/build/unplugin/components.d.ts
......@@ -21,6 +21,7 @@ declare module 'vue' {
CarouselVertical: typeof import('./../../../src/views/vab/carousel/vabAutoComponents/CarouselVertical.vue')['default']
CommonProperty: typeof import('./../../../src/views/other/workflow/vabAutoComponents/propertySetting/CommonProperty.vue')['default']
Control: typeof import('./../../../src/views/other/workflow/vabAutoComponents/lFComponents/Control.vue')['default']
copy: typeof import('./../../../src/views/system/roleManagement/vabAutoComponents/RoleManagementEdit2 copy.vue')['default']
DataDialog: typeof import('./../../../src/views/other/workflow/vabAutoComponents/lFComponents/DataDialog.vue')['default']
DataScreenBottom: typeof import('./../../../src/views/index/vabAutoComponents/DataScreenBottom.vue')['default']
DataScreenHeader: typeof import('./../../../src/views/index/vabAutoComponents/DataScreenHeader.vue')['default']
......@@ -161,6 +162,7 @@ declare module 'vue' {
Rank: typeof import('./../../../src/views/index/vabAutoComponents/Rank.vue')['default']
RankList: typeof import('./../../../src/views/index/vabAutoComponents/RankList.vue')['default']
Recommendation: typeof import('./../../../src/views/index/vabAutoComponents/Recommendation.vue')['default']
RoleManagementAuth: typeof import('./../../../src/views/system/roleManagement/vabAutoComponents/RoleManagementAuth.vue')['default']
RoleManagementEdit: typeof import('./../../../src/views/setting/roleManagement/vabAutoComponents/RoleManagementEdit.vue')['default']
RoleManagementEdit2: typeof import('./../../../src/views/system/roleManagement/vabAutoComponents/RoleManagementEdit2.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
......
library/styles/custom.scss
......@@ -3,3 +3,12 @@
align-items: center;
justify-content: center;
}
/* tree border */
.tree-border {
width: 100%;
margin-top: 5px;
background: var(--el-bg-color, #ffffff) none;
border: 1px solid var(--el-border-color-light, #e5e6e7);
border-radius: 4px;
}
src/api/menuManagement.ts
......@@ -50,3 +50,19 @@ export function getMenu(menuId: any) {
method: 'get',
})
}
// 查询菜单下拉树结构
export function treeselect() {
return request({
url: '/system/menu/treeselect',
method: 'get',
})
}
// 根据角色ID查询菜单下拉树结构
export function roleMenuTreeselect(roleId: any) {
return request({
url: `/system/menu/roleMenuTreeselect/${roleId}`,
method: 'get',
})
}
src/api/roleManagement.ts
......@@ -34,3 +34,28 @@ export const doDelete = (roleId: any) => {
method: 'delete',
})
}
// 查询角色详细
export function getRole(roleId: any) {
return request({
url: `/system/role/${roleId}`,
method: 'get',
})
}
// 根据角色ID查询部门树结构
export function deptTreeSelect(roleId: any) {
return request({
url: `/system/role/deptTree/${roleId}`,
method: 'get',
})
}
// 角色数据权限
export function dataScope(data: any) {
return request({
url: '/system/role/dataScope',
method: 'put',
data,
})
}
src/views/system/departmentManagement/vabAutoComponents/DepartmentManagementEdit2.vue
......@@ -49,7 +49,7 @@
</el-row>
</el-form>
<template #footer>
<el-button type="primary" @click="save">确定</el-button>
<el-button type="primary" @click="save">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</template>
</vab-dialog>
......
src/views/system/menuManagement/vabAutoComponents/MenuManagementEdit2.vue
......@@ -187,7 +187,7 @@
</el-row>
</el-form>
<template #footer>
<el-button type="primary" @click="save">确定</el-button>
<el-button type="primary" @click="save">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</template>
</vab-dialog>
......
src/views/system/postManagement/vabAutoComponents/PostManagementEdit.vue
......@@ -20,7 +20,7 @@
</el-form-item>
</el-form>
<template #footer>
<el-button type="primary" @click="save">确定</el-button>
<el-button type="primary" @click="save">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</template>
</vab-dialog>
......
src/views/system/roleManagement/index.vue
......@@ -92,10 +92,14 @@
<span v-else>{{ scope.row[item.prop] }}</span>
</template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" min-width="160">
<el-table-column align="center" fixed="right" label="操作" width="360">
<template #default="scope">
<div v-if="scope.row.roleId !== 1" class="table-operation-button">
<el-button icon="Edit" link type="primary" @click="handleUpdate(scope.row)">修改</el-button>
<el-button icon="Delete" link type="primary" @click="handleDelete(scope.row)">删除</el-button>
<el-button icon="CircleCheck" link type="primary" @click="handleDataScope(scope.row)">数据权限</el-button>
<el-button icon="User" link type="primary" @click="handleAuthUser(scope.row)">分配用户</el-button>
</div>
</template>
</el-table-column>
<template #empty>
......@@ -110,6 +114,7 @@
@size-change="handleSizeChange"
/>
<role-management-edit2 ref="editRef" @fetch-data="fetchData" />
<role-management-auth ref="authRef" @fetch-data="fetchData" />
</div>
</template>
......@@ -130,6 +135,7 @@ const isFullscreen = ref<boolean>(false)
const fold = ref<boolean>(true)
const tableRef = ref<TableInstance>()
const editRef = ref<any>(null)
const authRef = ref<any>(null)
const list = ref<any>([])
const listLoading = ref<boolean>(true)
......@@ -237,7 +243,7 @@ function handleUpdate(row: any) {
/** 删除按钮操作 */
const handleDelete = (row: any = {}) => {
if (row.roleId) {
$baseConfirm('您确定要删除当前项吗', null, async () => {
$baseConfirm(`您确定要删除角色名称为“${row.roleName}”的数据项吗`, null, async () => {
const { msg }: any = await doDelete(row.roleId)
$baseMessage(msg, 'success', 'hey')
await fetchData()
......@@ -266,4 +272,14 @@ function handleExport() {
`role_${Date.now()}.xlsx`
)
}
/** 分配数据权限操作 */
function handleDataScope(row: any) {
authRef.value.showEdit(row)
}
/** 分配用户 */
function handleAuthUser(row) {
// router.push("/system/role-auth/user/" + row.roleId);
}
</script>
src/views/system/roleManagement/vabAutoComponents/RoleManagementAuth.vue 0 → 100755
<template>
<vab-dialog v-model="dialogFormVisible" append-to-body :title="title" width="500px" @close="close">
<el-form ref="formRef" label-width="100px" :model="form">
<el-form-item label="角色名称">
<el-input v-model="form.roleName" :disabled="true" />
</el-form-item>
<el-form-item label="权限字符">
<el-input v-model="form.roleKey" :disabled="true" />
</el-form-item>
<el-form-item label="权限范围">
<el-select v-model="form.dataScope" @change="dataScopeSelectChange">
<el-option v-for="item in dataScopeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item v-show="form.dataScope == 2" label="数据权限">
<el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event)">展开/折叠</el-checkbox>
<el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event)">全选/全不选</el-checkbox>
<el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event)">父子联动</el-checkbox>
<el-tree
ref="deptRef"
:check-strictly="!form.deptCheckStrictly"
class="tree-border"
:data="deptOptions"
default-expand-all
empty-text="加载中，请稍候"
node-key="id"
:props="{ label: 'label', children: 'children' }"
show-checkbox
/>
</el-form-item>
</el-form>
<template #footer>
<el-button type="primary" @click="save">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</template>
</vab-dialog>
</template>
<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import { dataScope, deptTreeSelect, getRole } from '/@/api/roleManagement'
defineOptions({
name: 'RoleManagementAuth',
})
const { proxy } = getCurrentInstance() as any
const emit = defineEmits(['fetch-data'])
const menuRef = ref<any>(null)
const menuExpand = ref(false)
const menuNodeAll = ref(false)
const deptRef = ref<any>(null)
const deptExpand = ref(true)
const deptNodeAll = ref(false)
const deptOptions = ref<any>([])
/** 数据范围选项*/
const dataScopeOptions = ref([
{ value: '1', label: '全部数据权限' },
{ value: '2', label: '自定数据权限' },
{ value: '3', label: '本部门数据权限' },
{ value: '4', label: '本部门及以下数据权限' },
{ value: '5', label: '仅本人数据权限' },
])
const formRef = ref<FormInstance>()
const form = ref<any>({
roleId: undefined,
roleName: undefined,
roleKey: undefined,
roleSort: 0,
status: '0',
menuIds: [],
deptIds: [],
menuCheckStrictly: true,
deptCheckStrictly: true,
remark: undefined,
})
const title = ref<string>('')
const dialogFormVisible = ref<boolean>(false)
const showEdit = (row?: any) => {
reset()
title.value = '分配数据权限'
const deptTreeSelect = getDeptTree(row.roleId)
getRole(row.roleId).then((response) => {
form.value = response.data
dialogFormVisible.value = true
nextTick(() => {
deptTreeSelect.then((res: any) => {
nextTick(() => {
if (deptRef.value) {
deptRef.value.setCheckedKeys(res.checkedKeys)
}
})
})
})
})
}
/** 根据角色ID查询部门树结构 */
function getDeptTree(roleId: any) {
return deptTreeSelect(roleId).then((response: any) => {
deptOptions.value = response.depts
return response
})
}
/** 选择角色权限范围触发 */
function dataScopeSelectChange(value: any) {
if (value !== '2') {
deptRef.value.setCheckedKeys([])
}
}
/** 树权限（展开/折叠）*/
function handleCheckedTreeExpand(value: any) {
let treeList = deptOptions.value
for (const treeItem of treeList) {
deptRef.value.store.nodesMap[treeItem.id].expanded = value
}
}
/** 树权限（全选/全不选） */
function handleCheckedTreeNodeAll(value: any) {
deptRef.value.setCheckedNodes(value ? deptOptions.value : [])
}
/** 树权限（父子联动） */
function handleCheckedTreeConnect(value: any) {
form.value.deptCheckStrictly = value ? true : false
}
/** 所有部门节点数据 */
function getDeptAllCheckedKeys() {
// 目前被选中的部门节点
let checkedKeys = deptRef.value.getCheckedKeys()
// 半选中的部门节点
let halfCheckedKeys = deptRef.value.getHalfCheckedKeys()
checkedKeys.unshift(...halfCheckedKeys)
return checkedKeys
}
/** 重置新增的表单以及其他数据 */
function reset() {
if (menuRef.value != undefined) {
menuRef.value.setCheckedKeys([])
}
menuExpand.value = false
menuNodeAll.value = false
deptExpand.value = true
deptNodeAll.value = false
form.value = {
roleId: undefined,
roleName: undefined,
roleKey: undefined,
roleSort: 0,
status: '0',
menuIds: [],
deptIds: [],
menuCheckStrictly: true,
deptCheckStrictly: true,
remark: undefined,
}
proxy.resetForm('formRef')
}
const close = () => {
formRef.value?.clearValidate()
formRef.value?.resetFields()
emit('fetch-data')
}
const cancel = () => {
close()
dialogFormVisible.value = false
}
const save = () => {
formRef.value?.validate(async (valid: any) => {
if (valid) {
form.value.deptIds = getDeptAllCheckedKeys()
dataScope(form.value)
await $baseMessage('修改成功', 'success', 'hey')
cancel()
}
})
}
onBeforeMount(() => {})
defineExpose({
showEdit,
})
</script>
<style lang="scss" scoped>
.vab-tree-border {
width: 100%;
height: 250px;
padding: var(--el-padding);
overflow-y: auto;
border: 1px solid var(--el-border-color);
border-radius: var(--el-border-radius-base);
}
</style>
src/views/system/roleManagement/vabAutoComponents/RoleManagementEdit2.vue
<template>
<vab-dialog v-model="dialogFormVisible" append-to-body :title="title" width="500px" @close="close">
<el-form ref="formRef" label-width="80px" :model="form" :rules="rules">
<el-form-item label="角色码" prop="role">
<el-input v-model="form.role" clearable />
<el-form ref="formRef" label-width="100px" :model="form" :rules="rules">
<el-form-item label="角色名称" prop="roleName">
<el-input v-model="form.roleName" placeholder="请输入角色名称" />
</el-form-item>
<el-form-item label="菜单">
<div class="vab-tree-border">
<el-form-item prop="roleKey">
<template #label>
<span>
<el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
<el-icon><question-filled /></el-icon>
</el-tooltip>
权限字符
</span>
</template>
<el-input v-model="form.roleKey" placeholder="请输入权限字符" />
</el-form-item>
<el-form-item label="角色顺序" prop="roleSort">
<el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="菜单权限">
<el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event)">展开/折叠</el-checkbox>
<el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event)">全选/全不选</el-checkbox>
<el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event)">父子联动</el-checkbox>
<el-tree
ref="treeRef"
:data="list"
:default-checked-keys="form.menuCheckedList"
:default-expanded-keys="[]"
node-key="path"
ref="menuRef"
:check-strictly="!form.menuCheckStrictly"
class="tree-border"
:data="menuOptions"
empty-text="加载中，请稍候"
node-key="id"
:props="{ label: 'label', children: 'children' }"
show-checkbox
>
<template #default="{ data }">
<span>{{ data.meta.title }}</span>
</template>
</el-tree>
</div>
/>
</el-form-item>
<el-form-item label="按钮权限">
<el-input v-model="form.btnRolesCheckedList" clearable :rows="3" type="textarea" />
<el-form-item label="备注">
<el-input v-model="form.remark" placeholder="请输入内容" type="textarea" />
</el-form-item>
</el-form>
<template #footer>
<el-button type="primary" @click="save">保存</el-button>
<el-button type="primary" @click="save">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</template>
</vab-dialog>
</template>
<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import { doEdit } from '/@/api/roleManagement'
import { getList } from '/@/api/router'
import { treeselect as menuTreeselect, roleMenuTreeselect } from '/@/api/menuManagement'
import { doAdd, doEdit, getRole } from '/@/api/roleManagement'
defineOptions({
name: 'RoleManagementEdit',
})
const { proxy } = getCurrentInstance() as any
const { sys_normal_disable } = proxy.useDict('sys_normal_disable')
const emit = defineEmits(['fetch-data'])
const menuRef = ref<any>(null)
const menuExpand = ref(false)
const menuNodeAll = ref(false)
const deptExpand = ref(true)
const deptNodeAll = ref(false)
const formRef = ref<FormInstance>()
const treeRef = ref<any>(null)
const form = reactive<any>({
role: '',
btnRolesCheckedList: [
'read:system',
'write:system',
'delete:system',
'read:index',
'write:index',
'delete:index',
'read:index',
'write:index',
'delete:index',
],
const form = ref<any>({
roleId: undefined,
roleName: undefined,
roleKey: undefined,
roleSort: 0,
status: '0',
menuIds: [],
deptIds: [],
menuCheckStrictly: true,
deptCheckStrictly: true,
remark: undefined,
})
const rules = reactive<any>({
role: [{ required: true, trigger: 'blur', message: '请输入角色码' }],
roleName: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
roleKey: [{ required: true, message: '权限字符不能为空', trigger: 'blur' }],
roleSort: [{ required: true, message: '角色顺序不能为空', trigger: 'blur' }],
})
const title = ref<string>('')
const dialogFormVisible = ref<boolean>(false)
const list = ref<any>([])
const menuOptions = ref<any>([])
const showEdit = (row: any) => {
const showEdit = (row?: any) => {
reset()
if (row && row.roleId) {
title.value = '编辑'
const roleMenu = getRoleMenuTreeselect(row.roleId)
getRole(row.roleId).then((response) => {
form.value = response.data
form.value.roleSort = Number(form.value.roleSort)
dialogFormVisible.value = true
nextTick(() => {
if (row) {
title.value = '编辑'
Object.assign(form, row)
roleMenu.then((res: any) => {
let checkedKeys = res.checkedKeys
checkedKeys.forEach((v: any) => {
nextTick(() => {
menuRef.value.setChecked(v, true, false)
})
})
})
})
})
} else {
getMenuTreeselect()
title.value = '添加'
form.btnRolesCheckedList = [
'read:system',
'write:system',
'delete:system',
'read:index',
'write:index',
'delete:index',
'read:index',
'write:index',
'delete:index',
]
dialogFormVisible.value = true
}
}
/** 根据角色ID查询菜单树结构 */
function getRoleMenuTreeselect(roleId: any) {
return roleMenuTreeselect(roleId).then((response: any) => {
menuOptions.value = response.menus
return response
})
}
defineExpose({
showEdit,
})
/** 查询菜单树结构 */
function getMenuTreeselect() {
menuTreeselect().then((response) => {
menuOptions.value = response.data
})
}
/** 树权限（展开/折叠）*/
function handleCheckedTreeExpand(value: any) {
let treeList = menuOptions.value
for (const treeItem of treeList) {
menuRef.value.store.nodesMap[treeItem.id].expanded = value
}
}
/** 树权限（全选/全不选） */
function handleCheckedTreeNodeAll(value: any) {
menuRef.value.setCheckedNodes(value ? menuOptions.value : [])
}
/** 树权限（父子联动） */
function handleCheckedTreeConnect(value: any) {
form.value.menuCheckStrictly = value ? true : false
}
/** 所有菜单节点数据 */
function getMenuAllCheckedKeys() {
// 目前被选中的菜单节点
let checkedKeys = menuRef.value.getCheckedKeys()
// 半选中的菜单节点
let halfCheckedKeys = menuRef.value.getHalfCheckedKeys()
checkedKeys.unshift(...halfCheckedKeys)
return checkedKeys
}
/** 重置新增的表单以及其他数据 */
function reset() {
if (menuRef.value != undefined) {
menuRef.value.setCheckedKeys([])
}
menuExpand.value = false
menuNodeAll.value = false
deptExpand.value = true
deptNodeAll.value = false
form.value = {
roleId: undefined,
roleName: undefined,
roleKey: undefined,
roleSort: 0,
status: '0',
menuIds: [],
deptIds: [],
menuCheckStrictly: true,
deptCheckStrictly: true,
remark: undefined,
}
proxy.resetForm('formRef')
}
const close = () => {
formRef.value?.clearValidate()
......@@ -97,29 +191,32 @@ const close = () => {
emit('fetch-data')
}
const fetchData = async () => {
const { data } = await getList()
list.value = data.list
const cancel = () => {
close()
dialogFormVisible.value = false
}
const save = () => {
formRef.value?.validate(async (valid: any) => {
if (valid) {
const tree = treeRef.value.getCheckedKeys()
const treeObject = { 'treeArray:': tree }
const { msg }: any = await doEdit({
...form,
...treeObject,
})
await $baseMessage(msg, 'success', 'hey')
await close()
dialogFormVisible.value = false
if (form.value.roleId) {
form.value.menuIds = getMenuAllCheckedKeys()
await doEdit(form.value)
await $baseMessage('修改成功', 'success', 'hey')
} else {
form.value.menuIds = getMenuAllCheckedKeys()
await doAdd(form.value)
await $baseMessage('添加成功', 'success', 'hey')
}
cancel()
}
})
}
onBeforeMount(() => {
fetchData()
onBeforeMount(() => {})
defineExpose({
showEdit,
})
</script>
......
src/views/system/userManagement/vabAutoComponents/UserManagementEdit2.vue
......@@ -97,7 +97,7 @@
</el-row>
</el-form>
<template #footer>
<el-button type="primary" @click="save">确定</el-button>
<el-button type="primary" @click="save">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</template>
</vab-dialog>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论