fix: 🐛角色管理权限勾选问题

src/api/system/dept/model.d.ts

@@ -7,6 +7,7 @@ declare namespace API {
     parentId: number;
     name: string;
     orderNum: number;
+    pIds?: number[];
   };
   /** 部门 */
   type MovedDeptItem = {

src/api/system/menu/model.d.ts

@@ -13,6 +13,7 @@ declare namespace API {
     viewPath: string;
     keepalive: boolean;
     isShow: boolean;
+    pIds?: number[];
   };
 
   /** 获取菜单列表参数 */

src/components/JSON-schema-form/index.ts

@@ -4,6 +4,6 @@ export * from './types/formItem';
 // export { default as SchemaForm } from './schema-form.vue'
 import SchemaForm from './schema-form.vue';
 
-export { useSchemaForm } from './hooks/useSchemaForm';
-
 export { SchemaForm };
+
+export type SchemaFormRef = InstanceType<typeof SchemaForm>;

src/components/JSON-schema-form/schema-form-item.vue

@@ -12,6 +12,7 @@
       <component
         v-else
         :is="getComponent"
+        :ref="setItemRef"
         :key="schemaItem.field"
         v-model:[modelValueType]="modelValue[schemaItem.field]"
         v-bind="getComponentProps"
@@ -22,7 +23,7 @@
 </template>
 
 <script setup lang="tsx">
-  import type { PropType, Ref } from 'vue';
+  import { PropType, Ref } from 'vue';
   import { computed, unref, toRefs, onMounted } from 'vue';
   import { Form, Col } from 'ant-design-vue';
   import type { ValidationRule } from 'ant-design-vue/lib/form/Form';
@@ -53,6 +54,11 @@
       type: Function as PropType<(key: string, value: any) => void>,
       default: null,
     },
+    /** 将表单组件实例保存起来 */
+    setItemRef: {
+      type: Function,
+      default: () => {},
+    },
   });
 
   // const currentInstance = getCurrentInstance();

src/components/JSON-schema-form/schema-form.vue

@@ -9,6 +9,7 @@
           :schema="formSchemaRef"
           :set-form-model="setFormModel"
           :form-model="formModel"
+          :setItemRef="setItemRef(schemaItem)"
         >
           <template v-for="item in Object.keys($slots)" #[item]="data" :key="item">
             <slot :name="item" v-bind="data || {}"></slot>
@@ -67,6 +68,8 @@
       const schemaFormPropsRef = ref<Partial<FormSchema>>({});
       // 缓存的表单值，用于恢复form-item v-if为true后的值
       const cacheFormModel = { ...props.initialValues };
+      // 将所有的表单组件实例保存起来
+      const compRefs = {} as any;
 
       // 获取表单所有属性
       const getFormProps = computed(() => {
@@ -97,6 +100,14 @@
           cacheFormModel[item.field] = defaultValue;
         }
       });
+      // 将所有的表单组件实例保存起来
+      const setItemRef = (formItem: FormItemSchema) => {
+        return (el) => {
+          if (el) {
+            compRefs[formItem.field] = el;
+          }
+        };
+      };
 
       const getFormItemIsShow = (formItem: FormItemSchema, key: 'vIf' | 'vShow') => {
         if (Reflect.has(formItem, key)) {
@@ -283,6 +294,8 @@
         formModel,
         formSchemaRef,
         getRowConfig,
+        compRefs,
+        setItemRef,
         getFormItemIsShow,
         resetFields,
         setFieldsValue,

src/components/dynamic-table/dynamic-table.vue

@@ -147,7 +147,6 @@
 
       const state = reactive({
         expandItemRefs: {},
-        customRow: () => ({} as TableProps['customRow']),
         tableData: [] as any[], // 表格数据
         loading: false, // 表格加载
       });
@@ -313,7 +312,7 @@
 
 <style lang="less" scoped>
   :deep(.ant-table-wrapper) {
-    padding: 0 6px;
+    padding: 0 6px 6px 6px;
     .ant-table {
       .ant-table-title {
         display: flex;

src/components/split-panel/index.vue

@@ -62,7 +62,7 @@
 
       .left-content {
         height: 100%;
-        padding-right: 20px;
+        padding: 12px 20px 12px 12px;
       }
 
       .separator {

src/core/permission/utils.ts

@@ -1,6 +1,8 @@
-import type { TreeDataItem } from 'ant-design-vue/lib/tree/Tree';
+import type { TreeDataItem as ATreeDataItem } from 'ant-design-vue/lib/tree/Tree';
 
-export type { TreeDataItem };
+interface TreeDataItem extends ATreeDataItem {
+  children: any;
+}
 
 /**
  * 渲染部门至树形控件
@@ -9,36 +11,41 @@ export type { TreeDataItem };
  */
 export const formatDept2Tree = (
   depts: API.SysDeptListResult[],
-  parentId: null | number = null,
+  parentId: number | null = null,
 ): TreeDataItem[] => {
   return depts
     .filter((item) => item.parentId === parentId)
-    .map((item) => ({
-      title: item.name,
-      key: item.id,
-      value: item.id,
-      formData: item,
-      children: formatDept2Tree(depts, item.id),
-    }));
+    .map((item) => {
+      const arr = formatDept2Tree(depts, item.id);
+      return Object.assign(item, {
+        title: item.name,
+        key: item.id,
+        value: item.id,
+        formData: item,
+        children: arr.length ? arr : null,
+      });
+    });
 };
 
 /**
  * 渲染菜单至树形控件
  * @param {Array} menus 所有菜单
  * @param {Number | null} parentId 父级菜单ID
  */
-export const formatMenu2Tree = (menus: API.MenuListResult, parentId: null | number = null) => {
+export const formatMenu2Tree = (
+  menus: API.MenuListResult,
+  parentId: number | null = null,
+): TreeDataItem[] => {
   return menus
-    .filter((item) => item.parentId == parentId)
+    .filter((item) => item.parentId === parentId)
     .map((item) => {
       const arr = formatMenu2Tree(menus, item.id);
-      return {
-        ...item,
+      return Object.assign(item, {
         title: item.name,
         key: item.id,
         value: item.id,
         formData: item,
         children: arr.length ? arr : null,
-      };
+      });
     });
 };

src/hooks/useModal/useFormModal.tsx

@@ -1,6 +1,7 @@
 import { useModal } from './index';
-import { nextTick } from 'vue';
-import { SchemaForm, FormSchema, useSchemaForm } from '@/components/JSON-schema-form';
+import { nextTick, ref } from 'vue';
+import { SchemaForm } from '@/components/JSON-schema-form';
+import type { SchemaFormRef, FormSchema } from '@/components/JSON-schema-form';
 import type { FormModalProps } from './types';
 
 interface ShowModalProps {
@@ -12,7 +13,7 @@ export const useFormModal = () => {
   const { show } = useModal();
 
   const showModal = async ({ modalProps, formSchema }: ShowModalProps) => {
-    const [formRef] = useSchemaForm();
+    const formRef = ref<SchemaFormRef>();
 
     const onCancel = (e: MouseEvent) => {
       formRef.value?.resetFields();

src/views/system/permission/role/index.vue

@@ -24,6 +24,7 @@
 
 <script lang="ts" setup>
   import { ref } from 'vue';
+  import type { TreeDataItem } from 'ant-design-vue/lib/tree/Tree';
   import {
     getRoleListByPage,
     updateRole,
@@ -43,15 +44,38 @@
 
   const [showModal] = useFormModal();
 
+  const getCheckedKeys = (checkedList: number[], options: TreeDataItem[], total = []) => {
+    return options.reduce<number[]>((prev, curr) => {
+      if (curr.children?.length) {
+        getCheckedKeys(checkedList, curr.children, total);
+      } else {
+        if (checkedList.includes(curr.value)) {
+          prev.push(curr.value);
+        }
+      }
+      return prev;
+    }, total);
+  };
+
+  /**
+   * @description 打开新增/编辑弹窗
+   */
   const openMenuModal = async (record: Partial<TableListItem>) => {
     const [formRef] = await showModal({
       modalProps: {
         title: `${record.id ? '编辑' : '新增'}角色`,
         width: '50%',
         onFinish: async (values) => {
-          console.log('新增/编辑角色', values);
           values.roleId = record.id;
-          await (record.id ? updateRole : createRole)(values);
+          const menusRef = formRef.value?.compRefs?.menus;
+          const deptsRef = formRef.value?.compRefs?.depts;
+          const params = {
+            ...values,
+            menus: [...menusRef.halfCheckedKeys, ...menusRef.checkedKeys],
+            depts: [...deptsRef.halfCheckedKeys, ...deptsRef.checkedKeys],
+          };
+          console.log('新增/编辑角色', params);
+          await (record.id ? updateRole : createRole)(params);
           dynamicTableRef.value?.refreshTable();
         },
       },
@@ -64,26 +88,32 @@
 
     const [deptData, menuData] = await Promise.all([getDeptList(), getMenuList()]);
 
+    const menuTree = formatMenu2Tree(menuData);
+    const deptTree = formatDept2Tree(deptData);
+
     formRef.value?.updateSchema([
       {
         field: 'menus',
-        componentProps: { treeData: formatMenu2Tree(menuData) },
+        componentProps: { treeData: menuTree },
       },
       {
         field: 'depts',
-        componentProps: { treeData: formatDept2Tree(deptData) },
+        componentProps: { treeData: deptTree },
       },
     ]);
     // 如果是编辑的话，需要获取角色详情
     if (record.id) {
       const data = await getRoleInfo({ roleId: record.id });
+      const menuIds = data.menus.map((n) => n.menuId);
+      const deptIds = data.depts.map((n) => n.departmentId);
+
       formRef.value?.setFieldsValue({
         ...record,
         name: data.roleInfo.name,
         label: data.roleInfo.label,
         remark: data.roleInfo.remark,
-        menus: data.menus.map((n) => n.menuId),
-        depts: data.depts.map((n) => n.departmentId),
+        menus: getCheckedKeys(menuIds, menuTree),
+        depts: getCheckedKeys(deptIds, deptTree),
       });
     }
   };