From 05030ee9843d49f864576cd39b6e7f78a880527c Mon Sep 17 00:00:00 2001
From: Werheng Zhang <36580301+werheng@users.noreply.github.com>
Date: Wed, 27 Mar 2024 14:22:54 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=20(#3695)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

优化变量使用及定义的顺序
优化ts及tsx文件类型
使用===替换==
替换不必要的map为forEach
优化部分注释
---
 src/components/Form/src/BasicForm.vue         |  2 +-
 .../Form/src/hooks/useFormEvents.ts           |  2 +-
 .../Form/src/hooks/useFormValues.ts           |  2 +-
 src/components/Scrollbar/src/bar.ts           | 52 +++++++++++--------
 .../Table/src/components/TableImg.vue         |  2 +-
 .../src/components/editable/EditableCell.vue  | 40 +++++++-------
 .../src/components/settings/ColumnSetting.vue | 12 ++---
 .../Table/src/hooks/useDataSource.ts          |  2 +-
 .../{usePagination.tsx => usePagination.ts}   |  6 +--
 .../Table/src/hooks/useTableExpand.ts         |  2 +-
 src/hooks/web/usePermission.ts                |  1 -
 .../helper/{tsxHelper.tsx => tsxHelper.ts}    |  2 +-
 src/utils/index.ts                            |  2 +-
 .../VFormDesign/components/ComponentProps.vue |  4 +-
 .../VFormDesign/components/FormProps.vue      |  2 +-
 .../config/componentPropsConfig.ts            |  2 +-
 16 files changed, 71 insertions(+), 64 deletions(-)
 rename src/components/Table/src/hooks/{usePagination.tsx => usePagination.ts} (92%)
 rename src/utils/helper/{tsxHelper.tsx => tsxHelper.ts} (96%)

diff --git a/src/components/Form/src/BasicForm.vue b/src/components/Form/src/BasicForm.vue
index 62c321b1..68743ba4 100644
--- a/src/components/Form/src/BasicForm.vue
+++ b/src/components/Form/src/BasicForm.vue
@@ -285,7 +285,7 @@
     if (!autoSubmitOnEnter) return;
     if (e.key === 'Enter' && e.target && e.target instanceof HTMLElement) {
       const target: HTMLElement = e.target as HTMLElement;
-      if (target && target.tagName && target.tagName.toUpperCase() == 'INPUT') {
+      if (target && target.tagName && target.tagName.toUpperCase() === 'INPUT') {
         handleSubmit();
       }
     }
diff --git a/src/components/Form/src/hooks/useFormEvents.ts b/src/components/Form/src/hooks/useFormEvents.ts
index 2ed05862..e9e6ff8a 100644
--- a/src/components/Form/src/hooks/useFormEvents.ts
+++ b/src/components/Form/src/hooks/useFormEvents.ts
@@ -87,7 +87,7 @@ export function useFormEvents({
       const defaultValueObj = schema?.defaultValueObj;
       const fieldKeys = Object.keys(defaultValueObj || {});
       if (fieldKeys.length) {
-        fieldKeys.map((field) => {
+        fieldKeys.forEach((field) => {
           formModel[field] = defaultValueObj![field];
         });
       }
diff --git a/src/components/Form/src/hooks/useFormValues.ts b/src/components/Form/src/hooks/useFormValues.ts
index 026a7d92..70100f47 100644
--- a/src/components/Form/src/hooks/useFormValues.ts
+++ b/src/components/Form/src/hooks/useFormValues.ts
@@ -138,7 +138,7 @@ export function useFormValues({
       const { defaultValue, defaultValueObj } = item;
       const fieldKeys = Object.keys(defaultValueObj || {});
       if (fieldKeys.length) {
-        fieldKeys.map((field) => {
+        fieldKeys.forEach((field) => {
           obj[field] = defaultValueObj![field];
           if (formModel[field] === undefined) {
             formModel[field] = defaultValueObj![field];
diff --git a/src/components/Scrollbar/src/bar.ts b/src/components/Scrollbar/src/bar.ts
index f1832803..1a950595 100644
--- a/src/components/Scrollbar/src/bar.ts
+++ b/src/components/Scrollbar/src/bar.ts
@@ -28,6 +28,35 @@ export default defineComponent({
     });
     const barStore = ref<Recordable>({});
     const cursorDown = ref();
+
+    const mouseMoveDocumentHandler = (e: any) => {
+      if (cursorDown.value === false) {
+        return;
+      }
+      const prevPage = barStore.value[bar.value.axis];
+
+      if (!prevPage) {
+        return;
+      }
+
+      const offset =
+        (instance?.vnode.el?.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) *
+        -1;
+      const thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
+      const thumbPositionPercentage =
+        ((offset - thumbClickPosition) * 100) / instance?.vnode.el?.[bar.value.offset];
+      wrap.value[bar.value.scroll] =
+        (thumbPositionPercentage * wrap.value[bar.value.scrollSize]) / 100;
+    };
+
+    const startDrag = (e: any) => {
+      e.stopImmediatePropagation();
+      cursorDown.value = true;
+      on(document, 'mousemove', mouseMoveDocumentHandler);
+      on(document, 'mouseup', mouseUpDocumentHandler);
+      document.onselectstart = () => false;
+    };
+
     const clickThumbHandler = (e: any) => {
       // prevent click event of right button
       if (e.ctrlKey || e.button === 2) {
@@ -51,29 +80,6 @@ export default defineComponent({
       wrap.value[bar.value.scroll] =
         (thumbPositionPercentage * wrap.value[bar.value.scrollSize]) / 100;
     };
-    const startDrag = (e: any) => {
-      e.stopImmediatePropagation();
-      cursorDown.value = true;
-      on(document, 'mousemove', mouseMoveDocumentHandler);
-      on(document, 'mouseup', mouseUpDocumentHandler);
-      document.onselectstart = () => false;
-    };
-
-    const mouseMoveDocumentHandler = (e: any) => {
-      if (cursorDown.value === false) return;
-      const prevPage = barStore.value[bar.value.axis];
-
-      if (!prevPage) return;
-
-      const offset =
-        (instance?.vnode.el?.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) *
-        -1;
-      const thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
-      const thumbPositionPercentage =
-        ((offset - thumbClickPosition) * 100) / instance?.vnode.el?.[bar.value.offset];
-      wrap.value[bar.value.scroll] =
-        (thumbPositionPercentage * wrap.value[bar.value.scrollSize]) / 100;
-    };
 
     function mouseUpDocumentHandler() {
       cursorDown.value = false;
diff --git a/src/components/Table/src/components/TableImg.vue b/src/components/Table/src/components/TableImg.vue
index fdd221ec..e7b4def5 100644
--- a/src/components/Table/src/components/TableImg.vue
+++ b/src/components/Table/src/components/TableImg.vue
@@ -5,7 +5,7 @@
     v-if="imgList && imgList.length"
     :style="getWrapStyle"
   >
-    <Badge :count="!showBadge || imgList.length == 1 ? 0 : imgList.length" v-if="simpleShow">
+    <Badge :count="!showBadge || imgList.length === 1 ? 0 : imgList.length" v-if="simpleShow">
       <div class="img-div">
         <Image.PreviewGroup>
           <template v-for="(img, index) in imgList" :key="img">
diff --git a/src/components/Table/src/components/editable/EditableCell.vue b/src/components/Table/src/components/editable/EditableCell.vue
index fdcb55d9..2445d907 100644
--- a/src/components/Table/src/components/editable/EditableCell.vue
+++ b/src/components/Table/src/components/editable/EditableCell.vue
@@ -65,6 +65,19 @@
         return ['Checkbox', 'Switch'].includes(component);
       });
 
+      const getDisable = computed(() => {
+        const { editDynamicDisabled } = props.column;
+        let disabled = false;
+        if (isBoolean(editDynamicDisabled)) {
+          disabled = editDynamicDisabled;
+        }
+        if (isFunction(editDynamicDisabled)) {
+          const { record } = props;
+          disabled = editDynamicDisabled({ record, currentValue: currentValueRef.value });
+        }
+        return disabled;
+      });
+
       const getComponentProps = computed(() => {
         const isCheckValue = unref(getIsCheckComp);
         let compProps = props.column?.editComponentProps ?? ({} as any);
@@ -117,18 +130,7 @@
         const dataKey = (dataIndex || key) as string;
         set(record, dataKey, value);
       }
-      const getDisable = computed(() => {
-        const { editDynamicDisabled } = props.column;
-        let disabled = false;
-        if (isBoolean(editDynamicDisabled)) {
-          disabled = editDynamicDisabled;
-        }
-        if (isFunction(editDynamicDisabled)) {
-          const { record } = props;
-          disabled = editDynamicDisabled({ record, currentValue: currentValueRef.value });
-        }
-        return disabled;
-      });
+
       const getValues = computed(() => {
         const { editValueMap } = props.column;
 
@@ -149,6 +151,11 @@
         return option?.label ?? value;
       });
 
+      const getRowEditable = computed(() => {
+        const { editable } = props.record || {};
+        return !!editable;
+      });
+
       const getWrapperStyle = computed((): CSSProperties => {
         if (unref(getIsCheckComp) || unref(getRowEditable)) {
           return {};
@@ -163,11 +170,6 @@
         return `edit-cell-align-${align}`;
       });
 
-      const getRowEditable = computed(() => {
-        const { editable } = props.record || {};
-        return !!editable;
-      });
-
       watchEffect(() => {
         // defaultValueRef.value = props.value;
         currentValueRef.value = props.value;
@@ -191,7 +193,7 @@
         });
       }
 
-      async function handleChange(e: any) {
+      async function handleChange(e: any, ...rest: any[]) {
         const component = unref(getComponent);
         if (!e) {
           currentValueRef.value = e;
@@ -205,7 +207,7 @@
           currentValueRef.value = e;
         }
         const onChange = unref(getComponentProps)?.onChangeTemp;
-        if (onChange && isFunction(onChange)) onChange(...arguments);
+        if (onChange && isFunction(onChange)) onChange(e, ...rest);
 
         table.emit?.('edit-change', {
           column: props.column,
diff --git a/src/components/Table/src/components/settings/ColumnSetting.vue b/src/components/Table/src/components/settings/ColumnSetting.vue
index b2a01302..1a66513a 100644
--- a/src/components/Table/src/components/settings/ColumnSetting.vue
+++ b/src/components/Table/src/components/settings/ColumnSetting.vue
@@ -149,6 +149,12 @@
     return isFunction(attrs.getPopupContainer) ? attrs.getPopupContainer() : getParentContainer();
   };
 
+  // 默认值
+  let defaultIsIndexColumnShow: boolean = false;
+  let defaultIsRowSelectionShow: boolean = false;
+  let defaultRowSelection: TableRowSelection<Recordable<any>>;
+  let defaultColumnOptions: ColumnOptionsType[] = [];
+
   // 是否已经从缓存恢复
   let isRestored = false;
   let isInnerChange = false;
@@ -518,12 +524,6 @@
     tableColumnsUpdate();
   };
 
-  // 默认值
-  let defaultIsIndexColumnShow: boolean = false;
-  let defaultIsRowSelectionShow: boolean = false;
-  let defaultRowSelection: TableRowSelection<Recordable<any>>;
-  let defaultColumnOptions: ColumnOptionsType[] = [];
-
   const init = async () => {
     if (!isRestored) {
       // 获取数据列
diff --git a/src/components/Table/src/hooks/useDataSource.ts b/src/components/Table/src/hooks/useDataSource.ts
index 2872b1de..aa6a85f3 100644
--- a/src/components/Table/src/hooks/useDataSource.ts
+++ b/src/components/Table/src/hooks/useDataSource.ts
@@ -211,7 +211,7 @@ export function useDataSource(
   }
 
   function findTableDataRecord(keyValue: Key) {
-    if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
+    if (!dataSourceRef.value || dataSourceRef.value.length === 0) return;
     const { childrenColumnName = 'children' } = unref(propsRef);
 
     const findRow = (array: any[]) => {
diff --git a/src/components/Table/src/hooks/usePagination.tsx b/src/components/Table/src/hooks/usePagination.ts
similarity index 92%
rename from src/components/Table/src/hooks/usePagination.tsx
rename to src/components/Table/src/hooks/usePagination.ts
index 90bf2fc7..c653ada8 100644
--- a/src/components/Table/src/hooks/usePagination.tsx
+++ b/src/components/Table/src/hooks/usePagination.ts
@@ -1,6 +1,6 @@
 import type { PaginationProps } from '../types/pagination';
 import type { BasicTableProps } from '../types/table';
-import { computed, unref, ref, ComputedRef, watch } from 'vue';
+import { computed, unref, ref, ComputedRef, watch, h } from 'vue';
 import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
 import { isBoolean } from '@/utils/is';
 import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '../const';
@@ -14,9 +14,9 @@ interface ItemRender {
 
 function itemRender({ page, type, originalElement }: ItemRender) {
   if (type === 'prev') {
-    return page === 0 ? null : <LeftOutlined />;
+    return page === 0 ? null : h(LeftOutlined);
   } else if (type === 'next') {
-    return page === 1 ? null : <RightOutlined />;
+    return page === 1 ? null : h(RightOutlined);
   }
   return originalElement;
 }
diff --git a/src/components/Table/src/hooks/useTableExpand.ts b/src/components/Table/src/hooks/useTableExpand.ts
index 5b03f296..7d61444b 100644
--- a/src/components/Table/src/hooks/useTableExpand.ts
+++ b/src/components/Table/src/hooks/useTableExpand.ts
@@ -105,7 +105,7 @@ export function useTableExpand(
   }
 
   // 监听展开事件，用于支持手风琴展开效果
-  function handleTableExpand(expanded, record) {
+  function handleTableExpand(expanded: boolean, record: Recordable) {
     // 手风琴开关
     // isTreeTable 或 expandRowByClick 时支持
     // 展开操作
diff --git a/src/hooks/web/usePermission.ts b/src/hooks/web/usePermission.ts
index 0aca576d..7853cf7a 100644
--- a/src/hooks/web/usePermission.ts
+++ b/src/hooks/web/usePermission.ts
@@ -40,7 +40,6 @@ export function usePermission() {
   /**
    * Reset and regain authority resource information
    * 重置和重新获得权限资源信息
-   * @param id
    */
   async function resume() {
     const tabStore = useMultipleTabStore();
diff --git a/src/utils/helper/tsxHelper.tsx b/src/utils/helper/tsxHelper.ts
similarity index 96%
rename from src/utils/helper/tsxHelper.tsx
rename to src/utils/helper/tsxHelper.ts
index 920a274b..a8bca794 100644
--- a/src/utils/helper/tsxHelper.tsx
+++ b/src/utils/helper/tsxHelper.ts
@@ -27,7 +27,7 @@ export function getSlot(slots: Slots, slot = 'default', data?: any, opts?: Rende
 export function extendSlots(slots: Slots, excludeKeys: string[] = []) {
   const slotKeys = Object.keys(slots);
   const ret: any = {};
-  slotKeys.map((key) => {
+  slotKeys.forEach((key) => {
     if (excludeKeys.includes(key)) {
       return null;
     }
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 531ef7bf..2b6c68b4 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -97,7 +97,7 @@ export function openWindow(
 export function getDynamicProps<T extends Record<string, unknown>, U>(props: T): Partial<U> {
   const ret: Recordable = {};
 
-  Object.keys(props).map((key) => {
+  Object.keys(props).forEach((key) => {
     ret[key] = unref((props as Recordable)[key]);
   });
 
diff --git a/src/views/form-design/components/VFormDesign/components/ComponentProps.vue b/src/views/form-design/components/VFormDesign/components/ComponentProps.vue
index 05eaa840..e5271135 100644
--- a/src/views/form-design/components/VFormDesign/components/ComponentProps.vue
+++ b/src/views/form-design/components/VFormDesign/components/ComponentProps.vue
@@ -199,14 +199,14 @@
       // 控制性的选项
       const controlOptions = computed(() => {
         return allOptions.value.filter((item) => {
-          return item.category == 'control';
+          return item.category === 'control';
         });
       });
 
       // 非控制性选择
       const inputOptions = computed(() => {
         return allOptions.value.filter((item) => {
-          return item.category == 'input';
+          return item.category === 'input';
         });
       });
 
diff --git a/src/views/form-design/components/VFormDesign/components/FormProps.vue b/src/views/form-design/components/VFormDesign/components/FormProps.vue
index d2e2a24b..32a0c980 100644
--- a/src/views/form-design/components/VFormDesign/components/FormProps.vue
+++ b/src/views/form-design/components/VFormDesign/components/FormProps.vue
@@ -65,7 +65,7 @@
       </div>
       <FormItem label="表单属性">
         <Col
-          ><Checkbox v-model:checked="formConfig.colon" v-if="formConfig.layout == 'horizontal'"
+          ><Checkbox v-model:checked="formConfig.colon" v-if="formConfig.layout === 'horizontal'"
             >label后面显示冒号</Checkbox
           ></Col
         >
diff --git a/src/views/form-design/components/VFormDesign/config/componentPropsConfig.ts b/src/views/form-design/components/VFormDesign/config/componentPropsConfig.ts
index 802652ba..1220a5d1 100644
--- a/src/views/form-design/components/VFormDesign/config/componentPropsConfig.ts
+++ b/src/views/form-design/components/VFormDesign/config/componentPropsConfig.ts
@@ -1099,7 +1099,7 @@ const componentAttrs: IBaseComponentProps = {
 
 function deleteProps(list: Omit<IBaseFormAttrs, 'tag'>[], key: string) {
   list.forEach((element, index) => {
-    if (element.name == key) {
+    if (element.name === key) {
       list.splice(index, 1);
     }
   });