feat: role menu && data scope

src/views/system/role/RoleMenuModal.vue

@@ -1,22 +1,38 @@
 <template>
   <BasicModal v-bind="$attrs" @register="registerModal" :title="isUpdate ? '编辑' : '新增'" @ok="handleSubmit">
-    <BasicForm @register="registerForm" />
+    <BasicForm @register="registerForm">
+      <template #menuIds="{ model, field }">
+        <BasicTree
+          v-model:value="model[field]"
+          :treeData="treeData"
+          :fieldNames="{ title: 'name', key: 'id' }"
+          checkable
+          toolbar
+          title="菜单分配"
+        />
+      </template>
+    </BasicForm>
   </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 { menuScopeFormSchema } from './role.data'
 import { createRole, getRole, updateRole } from '@/api/system/role'
+import { BasicTree, TreeItem } from '@/components/Tree'
+import { listSimpleMenus } from '@/api/system/menu'
+import { handleTree } from '@/utils/tree'
+import { listRoleMenus } from '@/api/system/permission'
 
 const emit = defineEmits(['success', 'register'])
 const isUpdate = ref(true)
+const treeData = ref<TreeItem[]>([])
 
 const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
   labelWidth: 120,
   baseColProps: { span: 24 },
-  schemas: dataScopeFormSchema,
+  schemas: menuScopeFormSchema,
   showActionButtonGroup: false,
   actionColOptions: { span: 23 }
 })
@@ -24,10 +40,16 @@ const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
 const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
   resetFields()
   setModalProps({ confirmLoading: false })
+  if (unref(treeData).length === 0) {
+    const res = await listSimpleMenus()
+    treeData.value = handleTree(res, 'id')
+  }
   isUpdate.value = !!data?.isUpdate
 
   if (unref(isUpdate)) {
     const res = await getRole(data.record.id)
+    const menuRes = await listRoleMenus(data.record.id)
+    res.menuIds = menuRes
     setFieldsValue({ ...res })
   }
 })

src/views/system/role/RoleScopeModal.vue

@@ -1,17 +1,32 @@
 <template>
   <BasicModal v-bind="$attrs" @register="registerModal" :title="isUpdate ? '编辑' : '新增'" @ok="handleSubmit">
-    <BasicForm @register="registerForm" />
+    <BasicForm @register="registerForm">
+      <template #dataScopeDeptIds="{ model, field }">
+        <BasicTree
+          v-model:value="model[field]"
+          :treeData="treeData"
+          :fieldNames="{ title: 'name', key: 'id' }"
+          checkable
+          toolbar
+          title="部门分配"
+        />
+      </template>
+    </BasicForm>
   </BasicModal>
 </template>
 <script lang="ts" setup name="RoleScopeModal">
 import { ref, unref } from 'vue'
 import { BasicModal, useModalInner } from '@/components/Modal'
 import { BasicForm, useForm } from '@/components/Form'
+import { BasicTree, TreeItem } from '@/components/Tree'
 import { dataScopeFormSchema } from './role.data'
 import { createRole, getRole, updateRole } from '@/api/system/role'
+import { listSimpleDept } from '@/api/system/dept'
+import { handleTree } from '@/utils/tree'
 
 const emit = defineEmits(['success', 'register'])
 const isUpdate = ref(true)
+const treeData = ref<TreeItem[]>([])
 
 const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
   labelWidth: 120,
@@ -24,6 +39,10 @@ const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
 const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
   resetFields()
   setModalProps({ confirmLoading: false })
+  if (unref(treeData).length === 0) {
+    const res = await listSimpleDept()
+    treeData.value = handleTree(res, 'id')
+  }
   isUpdate.value = !!data?.isUpdate
 
   if (unref(isUpdate)) {

src/views/system/role/role.data.ts

@@ -1,8 +1,6 @@
 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[] = [
   {
@@ -122,7 +120,7 @@ export const formSchema: FormSchema[] = [
   }
 ]
 
-export const dataScopeFormSchema: FormSchema[] = [
+export const menuScopeFormSchema: FormSchema[] = [
   {
     label: '编号',
     field: 'id',
@@ -142,32 +140,14 @@ export const dataScopeFormSchema: FormSchema[] = [
     component: 'Input'
   },
   {
-    label: '权限范围',
+    label: '菜单权限',
-    field: 'dataScope',
+    field: 'menuIds',
-    required: true,
+    component: 'Input',
-    component: 'Select',
+    slot: 'menuIds'
-    componentProps: {
-      options: getIntDictOptions(DICT_TYPE.SYSTEM_DATA_SCOPE)
-    }
-  },
-  {
-    label: '数据权限',
-    field: 'dataScopeDeptIds',
-    component: 'ApiTreeSelect',
-    ifShow: ({ values }) => values.dataScope === SystemDataScopeEnum.DEPT_CUSTOM,
-    componentProps: {
-      api: () => listSimpleDept(),
-      fieldNames: {
-        label: 'name',
-        key: 'id',
-        value: 'id'
-      },
-      handleTree: 'id'
-    }
   }
 ]
 
-export const menuScopeFormSchema: FormSchema[] = [
+export const dataScopeFormSchema: FormSchema[] = [
   {
     label: '编号',
     field: 'id',
@@ -187,17 +167,19 @@ export const menuScopeFormSchema: FormSchema[] = [
     component: 'Input'
   },
   {
-    label: '菜单权限',
+    label: '权限范围',
-    field: 'menuIds',
+    field: 'dataScope',
-    component: 'ApiTreeSelect',
+    required: true,
+    component: 'Select',
     componentProps: {
-      api: () => listSimpleMenus(),
+      options: getIntDictOptions(DICT_TYPE.SYSTEM_DATA_SCOPE)
-      fieldNames: {
-        label: 'name',
-        key: 'id',
-        value: 'id'
-      },
-      handleTree: 'id'
     }
+  },
+  {
+    label: '数据权限',
+    field: 'dataScopeDeptIds',
+    ifShow: ({ values }) => values.dataScope === SystemDataScopeEnum.DEPT_CUSTOM,
+    component: 'Input',
+    slot: 'dataScopeDeptIds'
   }
 ]