From e40fb13ab9b59ea216fc3bf6fadde70fce161fdc Mon Sep 17 00:00:00 2001
From: xingyuv <xingyu4j@vip.qq.com>
Date: Wed, 12 Apr 2023 16:17:27 +0800
Subject: [PATCH] feat: role scope init
---
src/views/system/role/RoleMenuModal.vue | 50 +++++++++++++++++++++++++
src/views/system/role/index.vue | 18 ++++++++-
src/views/system/role/role.data.ts | 38 ++++++++++++++++++-
3 files changed, 103 insertions(+), 3 deletions(-)
create mode 100644 src/views/system/role/RoleMenuModal.vue
diff --git a/src/views/system/role/RoleMenuModal.vue b/src/views/system/role/RoleMenuModal.vue
new file mode 100644
index 00000000..0cf48f22
--- /dev/null
+++ b/src/views/system/role/RoleMenuModal.vue
@@ -0,0 +1,50 @@
+<template>
+ <BasicModal v-bind="$attrs" @register="registerModal" :title="isUpdate ? '编辑' : '新增'" @ok="handleSubmit">
+ <BasicForm @register="registerForm" />
+ </BasicModal>
+</template>
+<script lang="ts" setup name="RoleMenuModal">
+import { ref, unref } from 'vue'
+import { BasicModal, useModalInner } from '@/components/Modal'
+import { BasicForm, useForm } from '@/components/Form'
+import { dataScopeFormSchema } from './role.data'
+import { createRole, getRole, updateRole } from '@/api/system/role'
+
+const emit = defineEmits(['success', 'register'])
+const isUpdate = ref(true)
+
+const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
+ labelWidth: 120,
+ baseColProps: { span: 24 },
+ schemas: dataScopeFormSchema,
+ showActionButtonGroup: false,
+ actionColOptions: { span: 23 }
+})
+
+const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+ resetFields()
+ setModalProps({ confirmLoading: false })
+ isUpdate.value = !!data?.isUpdate
+
+ if (unref(isUpdate)) {
+ const res = await getRole(data.record.id)
+ setFieldsValue({ ...res })
+ }
+})
+
+async function handleSubmit() {
+ try {
+ const values = await validate()
+ setModalProps({ confirmLoading: true })
+ if (unref(isUpdate)) {
+ await updateRole(values)
+ } else {
+ await createRole(values)
+ }
+ closeModal()
+ emit('success')
+ } finally {
+ setModalProps({ confirmLoading: false })
+ }
+}
+</script>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index e033e6be..9fc90b3e 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -20,13 +20,13 @@
icon: IconEnum.EDIT,
label: '菜单权限',
auth: 'system:permission:assign-role-menu',
- onClick: handleEdit.bind(null, record)
+ onClick: handleMenu.bind(null, record)
},
{
icon: IconEnum.EDIT,
label: '数据权限',
auth: 'system:permission:assign-role-data-scope',
- onClick: handleEdit.bind(null, record)
+ onClick: handleDataScope.bind(null, record)
},
{
icon: IconEnum.DELETE,
@@ -45,6 +45,8 @@
</template>
</BasicTable>
<RoleModal @register="registerModal" @success="reload()" />
+ <RoleMenuModal @register="registerMenuModal" @success="reload()" />
+ <RoleScopeModal @register="registerScopeModal" @success="reload()" />
</div>
</template>
<script lang="ts" setup name="Role">
@@ -52,6 +54,8 @@ import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage'
import { useModal } from '@/components/Modal'
import RoleModal from './RoleModal.vue'
+import RoleMenuModal from './RoleMenuModal.vue'
+import RoleScopeModal from './RoleScopeModal.vue'
import { IconEnum } from '@/enums/appEnum'
import { BasicTable, useTable, TableAction } from '@/components/Table'
import { RoleExportReqVO, deleteRole, exportRole, getRolePage } from '@/api/system/role'
@@ -60,6 +64,8 @@ import { columns, searchFormSchema } from './role.data'
const { t } = useI18n()
const { createConfirm, createMessage } = useMessage()
const [registerModal, { openModal }] = useModal()
+const [registerMenuModal, { openModal: openMenuModal }] = useModal()
+const [registerScopeModal, { openModal: openScopeModal }] = useModal()
const [registerTable, { getForm, reload }] = useTable({
title: '角色列表',
api: getRolePage,
@@ -84,6 +90,14 @@ function handleEdit(record: Recordable) {
openModal(true, { record, isUpdate: true })
}
+function handleMenu(record: Recordable) {
+ openMenuModal(true, { record, isUpdate: true })
+}
+
+function handleDataScope(record: Recordable) {
+ openScopeModal(true, { record, isUpdate: true })
+}
+
async function handleExport() {
createConfirm({
title: t('common.exportTitle'),
diff --git a/src/views/system/role/role.data.ts b/src/views/system/role/role.data.ts
index ff84a6eb..7c399d49 100644
--- a/src/views/system/role/role.data.ts
+++ b/src/views/system/role/role.data.ts
@@ -2,6 +2,7 @@ import { BasicColumn, FormSchema, useRender } from '@/components/Table'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { listSimpleDept } from '@/api/system/dept'
import { SystemDataScopeEnum } from '@/enums/systemEnum'
+import { listSimpleMenus } from '@/api/system/menu'
export const columns: BasicColumn[] = [
{
@@ -151,7 +152,7 @@ export const dataScopeFormSchema: FormSchema[] = [
},
{
label: '数据权限',
- field: 'status',
+ field: 'dataScopeDeptIds',
component: 'ApiTreeSelect',
ifShow: ({ values }) => values.dataScope === SystemDataScopeEnum.DEPT_CUSTOM,
componentProps: {
@@ -165,3 +166,38 @@ export const dataScopeFormSchema: FormSchema[] = [
}
}
]
+
+export const menuScopeFormSchema: FormSchema[] = [
+ {
+ label: '编号',
+ field: 'id',
+ show: false,
+ component: 'Input'
+ },
+ {
+ label: '角色名称',
+ field: 'name',
+ dynamicDisabled: true,
+ component: 'Input'
+ },
+ {
+ label: '角色标识',
+ field: 'code',
+ dynamicDisabled: true,
+ component: 'Input'
+ },
+ {
+ label: '菜单权限',
+ field: 'menuIds',
+ component: 'ApiTreeSelect',
+ componentProps: {
+ api: () => listSimpleMenus(),
+ fieldNames: {
+ label: 'name',
+ key: 'id',
+ value: 'id'
+ },
+ handleTree: 'id'
+ }
+ }
+]