Werheng Zhang
2024-03-27 05030ee9843d49f864576cd39b6e7f78a880527c
refactor: 优化代码 (#3695)

优化变量使用及定义的顺序
优化ts及tsx文件类型
使用===替换==
替换不必要的map为forEach
优化部分注释
14个文件已修改
2 文件已重命名
135 ■■■■ 已修改文件
src/components/Form/src/BasicForm.vue 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/Form/src/hooks/useFormEvents.ts 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/Form/src/hooks/useFormValues.ts 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/Scrollbar/src/bar.ts 52 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/Table/src/components/TableImg.vue 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/Table/src/components/editable/EditableCell.vue 40 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/Table/src/components/settings/ColumnSetting.vue 12 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/Table/src/hooks/useDataSource.ts 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/Table/src/hooks/usePagination.ts 6 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/Table/src/hooks/useTableExpand.ts 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/hooks/web/usePermission.ts 1 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/utils/helper/tsxHelper.ts 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/utils/index.ts 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/form-design/components/VFormDesign/components/ComponentProps.vue 4 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/form-design/components/VFormDesign/components/FormProps.vue 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/form-design/components/VFormDesign/config/componentPropsConfig.ts 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
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();
      }
    }
src/components/Form/src/hooks/useFormEvents.ts
@@ -87,7 +87,7 @@
      const defaultValueObj = schema?.defaultValueObj;
      const fieldKeys = Object.keys(defaultValueObj || {});
      if (fieldKeys.length) {
        fieldKeys.map((field) => {
        fieldKeys.forEach((field) => {
          formModel[field] = defaultValueObj![field];
        });
      }
src/components/Form/src/hooks/useFormValues.ts
@@ -138,7 +138,7 @@
      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];
src/components/Scrollbar/src/bar.ts
@@ -28,6 +28,35 @@
    });
    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) {
@@ -48,29 +77,6 @@
      const thumbPositionPercentage =
        ((offset - thumbHalf) * 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 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;
    };
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">
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 {};
@@ -161,11 +168,6 @@
      const getWrapperClass = computed(() => {
        const { align = 'center' } = props.column;
        return `edit-cell-align-${align}`;
      });
      const getRowEditable = computed(() => {
        const { editable } = props.record || {};
        return !!editable;
      });
      watchEffect(() => {
@@ -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,
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;
@@ -517,12 +523,6 @@
    // 列表列更新
    tableColumnsUpdate();
  };
  // 默认值
  let defaultIsIndexColumnShow: boolean = false;
  let defaultIsRowSelectionShow: boolean = false;
  let defaultRowSelection: TableRowSelection<Recordable<any>>;
  let defaultColumnOptions: ColumnOptionsType[] = [];
  const init = async () => {
    if (!isRestored) {
src/components/Table/src/hooks/useDataSource.ts
@@ -211,7 +211,7 @@
  }
  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[]) => {
src/components/Table/src/hooks/usePagination.ts
File was renamed from src/components/Table/src/hooks/usePagination.tsx
@@ -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 @@
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;
}
src/components/Table/src/hooks/useTableExpand.ts
@@ -105,7 +105,7 @@
  }
  // 监听展开事件,用于支持手风琴展开效果
  function handleTableExpand(expanded, record) {
  function handleTableExpand(expanded: boolean, record: Recordable) {
    // 手风琴开关
    // isTreeTable 或 expandRowByClick 时支持
    // 展开操作
src/hooks/web/usePermission.ts
@@ -40,7 +40,6 @@
  /**
   * Reset and regain authority resource information
   * 重置和重新获得权限资源信息
   * @param id
   */
  async function resume() {
    const tabStore = useMultipleTabStore();
src/utils/helper/tsxHelper.ts
File was renamed from src/utils/helper/tsxHelper.tsx
@@ -27,7 +27,7 @@
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;
    }
src/utils/index.ts
@@ -97,7 +97,7 @@
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]);
  });
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';
        });
      });
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
        >
src/views/form-design/components/VFormDesign/config/componentPropsConfig.ts
@@ -1099,7 +1099,7 @@
function deleteProps(list: Omit<IBaseFormAttrs, 'tag'>[], key: string) {
  list.forEach((element, index) => {
    if (element.name == key) {
    if (element.name === key) {
      list.splice(index, 1);
    }
  });