From 760f21a5e7cb989e456c294d80b80b4a27bec758 Mon Sep 17 00:00:00 2001
From: bqy_fe <1743369777@qq.com>
Date: Sat, 11 Dec 2021 22:31:55 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20:bug:=E8=A7=92=E8=89=B2=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E6=9D=83=E9=99=90=E5=8B=BE=E9=80=89=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/dept/model.d.ts                |  1 +
 src/api/system/menu/model.d.ts                |  1 +
 .../JSON-schema-form/hooks/useSchemaForm.ts   | 93 -----------------
 src/components/JSON-schema-form/index.ts      |  4 +-
 .../JSON-schema-form/schema-form-item.vue     |  8 +-
 .../JSON-schema-form/schema-form.vue          | 13 +++
 .../dynamic-table/dynamic-table.vue           |  3 +-
 src/components/split-panel/index.vue          |  2 +-
 src/core/permission/utils.ts                  | 37 ++++---
 src/hooks/useModal/useFormModal.tsx           |  7 +-
 src/views/system/permission/role/index.vue    | 42 ++++++--
 types/global.d.ts                             | 99 ++++++++++---------
 12 files changed, 138 insertions(+), 172 deletions(-)
 delete mode 100644 src/components/JSON-schema-form/hooks/useSchemaForm.ts

diff --git a/src/api/system/dept/model.d.ts b/src/api/system/dept/model.d.ts
index 89440c595..33a369cc8 100644
--- a/src/api/system/dept/model.d.ts
+++ b/src/api/system/dept/model.d.ts
@@ -7,6 +7,7 @@ declare namespace API {
     parentId: number;
     name: string;
     orderNum: number;
+    pIds?: number[];
   };
   /** 部门 */
   type MovedDeptItem = {
diff --git a/src/api/system/menu/model.d.ts b/src/api/system/menu/model.d.ts
index 41e022ac8..9a021ad52 100644
--- a/src/api/system/menu/model.d.ts
+++ b/src/api/system/menu/model.d.ts
@@ -13,6 +13,7 @@ declare namespace API {
     viewPath: string;
     keepalive: boolean;
     isShow: boolean;
+    pIds?: number[];
   };
 
   /** 获取菜单列表参数 */
diff --git a/src/components/JSON-schema-form/hooks/useSchemaForm.ts b/src/components/JSON-schema-form/hooks/useSchemaForm.ts
deleted file mode 100644
index 2b71eed12..000000000
--- a/src/components/JSON-schema-form/hooks/useSchemaForm.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import type { FormSchema, FormItemSchema, FormActionType } from '../types/form';
-import type { NamePath } from 'ant-design-vue/lib/form/interface';
-import { ref, unref, nextTick } from 'vue';
-
-export declare type ValidateFields = (nameList?: NamePath[]) => Promise<Recordable>;
-
-// eslint-disable-next-line
-export const useSchemaForm = (props?: Partial<FormSchema>) => {
-  const formRef = ref<Nullable<FormActionType>>(null);
-  // eslint-disable-next-line
-  const loadedRef = ref<Nullable<boolean>>(false);
-
-  async function getForm() {
-    const form = unref(formRef);
-    if (!form) {
-      console.error('未获取到表单实例，请确保表单实例是否注册。');
-    }
-    await nextTick();
-    return form as FormActionType;
-  }
-
-  const methods: FormActionType = {
-    scrollToField: async (name: NamePath, options?: ScrollOptions | undefined) => {
-      const form = await getForm();
-      form.scrollToField(name, options);
-    },
-    setProps: async (formProps: Partial<FormSchema>) => {
-      const form = await getForm();
-      form.setProps(formProps);
-    },
-
-    updateSchema: async (data: Partial<FormItemSchema> | Partial<FormItemSchema>[]) => {
-      const form = await getForm();
-      form.updateSchema(data);
-    },
-
-    resetSchema: async (data: Partial<FormItemSchema> | Partial<FormItemSchema>[]) => {
-      const form = await getForm();
-      form.resetSchema(data);
-    },
-
-    clearValidate: async (name?: string | string[]) => {
-      const form = await getForm();
-      form.clearValidate(name);
-    },
-
-    resetFields: async () => {
-      getForm().then(async (form) => {
-        await form.resetFields();
-      });
-    },
-
-    removeSchemaByFiled: async (field: string | string[]) => {
-      unref(formRef)?.removeSchemaByFiled(field);
-    },
-
-    // TODO promisify
-    getFieldsValue: <T>() => {
-      return unref(formRef)?.getFieldsValue() as T;
-    },
-
-    setFieldsValue: async <T>(values: T) => {
-      const form = await getForm();
-      form.setFieldsValue<T>(values);
-    },
-
-    appendSchemaByField: async (
-      schema: FormItemSchema,
-      prefixField: string | undefined,
-      first: boolean,
-    ) => {
-      const form = await getForm();
-      form.appendSchemaByField(schema, prefixField, first);
-    },
-
-    submit: async (): Promise<any> => {
-      const form = await getForm();
-      return form.submit();
-    },
-
-    validate: async (nameList?: NamePath[]): Promise<Recordable> => {
-      const form = await getForm();
-      return form.validate(nameList);
-    },
-
-    validateFields: async (nameList?: NamePath[]): Promise<Recordable> => {
-      const form = await getForm();
-      return form.validateFields(nameList);
-    },
-  };
-
-  return [formRef, methods] as const;
-};
diff --git a/src/components/JSON-schema-form/index.ts b/src/components/JSON-schema-form/index.ts
index 112f60db6..bf5d29399 100644
--- a/src/components/JSON-schema-form/index.ts
+++ b/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>;
diff --git a/src/components/JSON-schema-form/schema-form-item.vue b/src/components/JSON-schema-form/schema-form-item.vue
index 61fa9f85e..ff9edebd1 100644
--- a/src/components/JSON-schema-form/schema-form-item.vue
+++ b/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();
diff --git a/src/components/JSON-schema-form/schema-form.vue b/src/components/JSON-schema-form/schema-form.vue
index 4be568a81..ba625082d 100644
--- a/src/components/JSON-schema-form/schema-form.vue
+++ b/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,
diff --git a/src/components/dynamic-table/dynamic-table.vue b/src/components/dynamic-table/dynamic-table.vue
index da1e51392..381785c91 100644
--- a/src/components/dynamic-table/dynamic-table.vue
+++ b/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;
diff --git a/src/components/split-panel/index.vue b/src/components/split-panel/index.vue
index d5a06a3b5..507907c16 100644
--- a/src/components/split-panel/index.vue
+++ b/src/components/split-panel/index.vue
@@ -62,7 +62,7 @@
 
       .left-content {
         height: 100%;
-        padding-right: 20px;
+        padding: 12px 20px 12px 12px;
       }
 
       .separator {
diff --git a/src/core/permission/utils.ts b/src/core/permission/utils.ts
index 851468312..7cbcae996 100644
--- a/src/core/permission/utils.ts
+++ b/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,17 +11,20 @@ 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,
+      });
+    });
 };
 
 /**
@@ -27,18 +32,20 @@ export const formatDept2Tree = (
  * @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,
-      };
+      });
     });
 };
diff --git a/src/hooks/useModal/useFormModal.tsx b/src/hooks/useModal/useFormModal.tsx
index 824f2ce62..37f023bc2 100644
--- a/src/hooks/useModal/useFormModal.tsx
+++ b/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();
diff --git a/src/views/system/permission/role/index.vue b/src/views/system/permission/role/index.vue
index 667b91395..de8b52a1d 100644
--- a/src/views/system/permission/role/index.vue
+++ b/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),
       });
     }
   };
diff --git a/types/global.d.ts b/types/global.d.ts
index a597da4c6..a2beb4b27 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -4,92 +4,93 @@ import type {
   VNodeChild,
   ComponentPublicInstance,
   FunctionalComponent,
-  PropType as VuePropType
-} from 'vue'
+  PropType as VuePropType,
+} from 'vue';
 
 declare global {
   const __APP_INFO__: {
     pkg: {
-      name: string
-      version: string
-      dependencies: Recordable<string>
-      devDependencies: Recordable<string>
-    }
-    lastBuildTime: string
-  }
+      name: string;
+      version: string;
+      dependencies: Recordable<string>;
+      devDependencies: Recordable<string>;
+    };
+    lastBuildTime: string;
+  };
   // declare interface Window {
   //   // Global vue app instance
   //   __APP__: App<Element>;
   // }
 
   // vue
-  declare type PropType<T> = VuePropType<T>
-  declare type VueNode = VNodeChild | JSX.Element
+  declare type PropType<T> = VuePropType<T>;
+  declare type VueNode = VNodeChild | JSX.Element;
 
   export type Writable<T> = {
-    -readonly [P in keyof T]: T[P]
-  }
+    -readonly [P in keyof T]: T[P];
+  };
 
-  declare type Nullable<T> = T | null
-  declare type NonNullable<T> = T extends null | undefined ? never : T
-  declare type Recordable<T = any> = Record<string, T>
+  declare type Nullable<T> = T | null;
+  declare type NonNullable<T> = T extends null | undefined ? never : T;
+  declare type Recordable<T = any> = Record<string, T>;
   declare type ReadonlyRecordable<T = any> = {
-    readonly [key: string]: T
-  }
+    readonly [key: string]: T;
+  };
   declare type Indexable<T = any> = {
-    [key: string]: T
-  }
+    [key: string]: T;
+  };
   declare type DeepPartial<T> = {
-    [P in keyof T]?: DeepPartial<T[P]>
-  }
-  declare type TimeoutHandle = ReturnType<typeof setTimeout>
-  declare type IntervalHandle = ReturnType<typeof setInterval>
+    [P in keyof T]?: DeepPartial<T[P]>;
+  };
+
+  declare type TimeoutHandle = ReturnType<typeof setTimeout>;
+  declare type IntervalHandle = ReturnType<typeof setInterval>;
 
   declare interface ChangeEvent extends Event {
-    target: HTMLInputElement
+    target: HTMLInputElement;
   }
 
   declare interface WheelEvent {
-    path?: EventTarget[]
+    path?: EventTarget[];
   }
   interface ImportMetaEnv extends ViteEnv {
-    __: unknown
+    __: unknown;
   }
 
   declare interface ViteEnv {
-    VITE_PORT: number
-    VITE_USE_MOCK: boolean
-    VITE_USE_PWA: boolean
-    VITE_PUBLIC_PATH: string
-    VITE_PROXY: [string, string][]
-    VITE_GLOB_APP_TITLE: string
-    VITE_GLOB_APP_SHORT_NAME: string
-    VITE_USE_CDN: boolean
-    VITE_DROP_CONSOLE: boolean
-    VITE_BUILD_COMPRESS: 'gzip' | 'brotli' | 'none'
-    VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE: boolean
-    VITE_LEGACY: boolean
-    VITE_USE_IMAGEMIN: boolean
-    VITE_GENERATE_UI: string
+    VITE_PORT: number;
+    VITE_USE_MOCK: boolean;
+    VITE_USE_PWA: boolean;
+    VITE_PUBLIC_PATH: string;
+    VITE_PROXY: [string, string][];
+    VITE_GLOB_APP_TITLE: string;
+    VITE_GLOB_APP_SHORT_NAME: string;
+    VITE_USE_CDN: boolean;
+    VITE_DROP_CONSOLE: boolean;
+    VITE_BUILD_COMPRESS: 'gzip' | 'brotli' | 'none';
+    VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE: boolean;
+    VITE_LEGACY: boolean;
+    VITE_USE_IMAGEMIN: boolean;
+    VITE_GENERATE_UI: string;
   }
 
-  declare function parseInt(s: string | number, radix?: number): number
+  declare function parseInt(s: string | number, radix?: number): number;
 
-  declare function parseFloat(string: string | number): number
+  declare function parseFloat(string: string | number): number;
 
   namespace JSX {
     // tslint:disable no-empty-interface
-    type Element = VNode
+    type Element = VNode;
     // tslint:disable no-empty-interface
-    type ElementClass = ComponentRenderProxy
+    type ElementClass = ComponentRenderProxy;
     interface ElementAttributesProperty {
-      $props: any
+      $props: any;
     }
     interface IntrinsicElements {
-      [elem: string]: any
+      [elem: string]: any;
     }
     interface IntrinsicAttributes {
-      [elem: string]: any
+      [elem: string]: any;
     }
   }
 }
@@ -97,5 +98,5 @@ declare global {
 declare module 'vue' {
   export type JSXComponent<Props = any> =
     | { new (): ComponentPublicInstance<Props> }
-    | FunctionalComponent<Props>
+    | FunctionalComponent<Props>;
 }