fix: table setting error

buqiyuan · Oct 3, 2024 · 58617f9 · 58617f9
1 parent 9eb5216
commit 58617f9
Show file tree

Hide file tree

Showing 10 changed files with 47 additions and 45 deletions.
diff --git a/src/components/core/dynamic-table/src/components/editable-cell/index.vue b/src/components/core/dynamic-table/src/components/editable-cell/index.vue
@@ -53,6 +53,7 @@
 
   const tableContext = useTableContext();
   const {
+    tableProps,
     editFormModel,
     editTableFormRef,
     editFormErrorMsgs,
@@ -105,11 +106,7 @@
   const handleSaveCell = async () => {
     const { rowKey, column } = props;
     await validateCell(rowKey!, dataIndex.value);
-    const saveRes = tableContext.props.onSave?.(
-      rowKey!,
-      editFormModel.value[rowKey!],
-      column?.record,
-    );
+    const saveRes = tableProps.onSave?.(rowKey!, editFormModel.value[rowKey!], column?.record);
     if (isPromise(saveRes)) {
       saving.value = true;
       await saveRes.finally(() => (saving.value = false));
@@ -120,7 +117,7 @@
 
   const handleCancelSaveCell = () => {
     const { rowKey, column } = props;
-    tableContext.props?.onCancel?.(rowKey!, editFormModel.value[rowKey!], column?.record);
+    tableProps.onCancel?.(rowKey!, editFormModel.value[rowKey!], column?.record);
     isCellEdit.value = false;
     cancelCellEditable(props.rowKey!, dataIndex.value);
   };

diff --git a/src/components/core/dynamic-table/src/components/table-settings/column-setting.vue b/src/components/core/dynamic-table/src/components/table-settings/column-setting.vue
@@ -27,7 +27,7 @@
       </template>
       <template #content>
         <div ref="columnListRef">
-          <template v-for="item in tableColumns" :key="table.getColumnKey(item)">
+          <template v-for="item in tableColumns" :key="getColumnKey(item)">
             <div class="check-item">
               <div style="padding: 4px 16px 8px 0">
                 <DragOutlined class="table-column-drag-icon pr-6px cursor-move" />
@@ -85,14 +85,14 @@
   import { useI18n } from '@/hooks/useI18n';
 
   const { t } = useI18n();
-  const table = useTableContext();
+  const { tableProps, innerColumns, setProps, getColumnKey } = useTableContext();
 
   let inited = false;
   const defaultColumns = toRaw(
-    table.innerColumns.value.filter((n) => n.dataIndex !== ColumnKeyFlag.INDEX),
+    innerColumns.value?.filter((n) => n.dataIndex !== ColumnKeyFlag.INDEX),
   );
-  const defaultShowIndex = !!table.props.showIndex;
-  const defaultBordered = table.props.bordered;
+  const defaultShowIndex = !!tableProps.showIndex;
+  const defaultBordered = tableProps.bordered;
   const tableColumns = ref<TableColumn[]>([]);
 
   const checkAll = computed<boolean>({
@@ -106,7 +106,7 @@
   });
 
   const checkIndex = ref(defaultShowIndex);
-  const checkBordered = ref(table.props.bordered);
+  const checkBordered = ref(tableProps.bordered);
   const columnListRef = ref<HTMLDivElement>();
 
   // 初始化选中状态
@@ -129,20 +129,19 @@
   watch(
     tableColumns,
     (columns) => {
-      // @ts-ignore
-      table.setProps({ columns });
+      setProps({ columns });
     },
     {
       deep: true,
     },
   );
   // 设置序号列
   const handleIndexCheckChange = (e) => {
-    table.setProps({ showIndex: e.target.checked });
+    setProps({ showIndex: e.target.checked });
   };
   // 设置边框
   const handleBorderedCheckChange = (e) => {
-    table.setProps({ bordered: e.target.checked });
+    setProps({ bordered: e.target.checked });
   };
 
   const handleColumnFixed = (columItem, direction: 'left' | 'right') => {
@@ -175,7 +174,7 @@
 
   const reset = () => {
     initCheckStatus();
-    table.setProps({ showIndex: defaultShowIndex, bordered: defaultBordered });
+    setProps({ showIndex: defaultShowIndex, bordered: defaultBordered });
   };
 </script>
 

diff --git a/src/components/core/dynamic-table/src/components/table-settings/search-setting.vue b/src/components/core/dynamic-table/src/components/table-settings/search-setting.vue
@@ -1,8 +1,8 @@
 <template>
-  <template v-if="formSchemas?.length && getProps.search">
+  <template v-if="formSchemas?.length && tableProps.search">
     <Tooltip placement="top">
       <template #title>
-        <span>{{ getProps.search ? '隐藏搜索' : '显示搜索' }}</span>
+        <span>{{ innerPropsRef.search ? '隐藏搜索' : '显示搜索' }}</span>
       </template>
       <SearchOutlined @click="toggle" />
     </Tooltip>
@@ -13,11 +13,11 @@
   import { Tooltip } from 'ant-design-vue';
   import { useTableContext } from '../../hooks/useTableContext';
 
-  const { getProps, setProps, formSchemas } = useTableContext();
+  const { tableProps, innerPropsRef, setProps, formSchemas } = useTableContext();
 
   function toggle() {
     setProps({
-      search: !getProps.value.search,
+      search: !innerPropsRef.value.search,
     });
   }
 </script>
diff --git a/src/components/core/dynamic-table/src/components/table-settings/size-setting.vue b/src/components/core/dynamic-table/src/components/table-settings/size-setting.vue
@@ -36,7 +36,7 @@
   const { t } = useI18n();
   const table = useTableContext();
 
-  const selectedKeysRef = ref<SizeType[]>([unref(table.getProps)?.size || 'large']);
+  const selectedKeysRef = ref<SizeType[]>([unref(table.innerPropsRef)?.size || 'large']);
 
   function handleMenuClick({ key }: MenuInfo & { key: SizeType }) {
     selectedKeysRef.value = [key];

diff --git a/src/components/core/dynamic-table/src/dynamic-table.vue b/src/components/core/dynamic-table/src/dynamic-table.vue
@@ -3,7 +3,7 @@
     <Teleport to="body" :disabled="!isFullscreen">
       <div ref="containerElRef">
         <SchemaForm
-          v-if="getProps.search"
+          v-if="innerPropsRef.search"
           ref="searchFormRef"
           class="bg-white dark:bg-black mb-16px !pt-24px pr-24px"
           submit-on-reset
@@ -24,7 +24,7 @@
             :title-tooltip="titleTooltip"
             :show-table-setting="showTableSetting"
           >
-            <template v-for="name of Object.keys($slots)" #[name]="data">
+            <template v-for="name of Object.keys($slots)" #[name]="data" :key="name">
               <slot :name="name" v-bind="data || {}" />
             </template>
           </ToolBar>
@@ -89,7 +89,7 @@
     containerElRef,
     searchFormRef,
     editTableFormRef,
-    getProps,
+    innerPropsRef,
     getBindValues,
     editFormModel,
   } = tableState;
@@ -110,7 +110,7 @@
 
   // 当前组件所有的状态和方法
   const dynamicTableContext = {
-    props,
+    tableProps: props,
     emit,
     innerColumns,
     ...tableState,

diff --git a/src/components/core/dynamic-table/src/hooks/useColumns.ts b/src/components/core/dynamic-table/src/hooks/useColumns.ts
@@ -16,15 +16,16 @@ interface UseColumnsPayload {
   props: DynamicTableProps;
   tableMethods: TableMethods;
 }
+export type UseColumnsType = ReturnType<typeof useColumns>;
 
 export const useColumns = (payload: UseColumnsPayload) => {
   const slots = useSlots();
   const { tableState, props, tableMethods } = payload;
-  const { getProps, paginationRef } = tableState;
+  const { innerPropsRef, paginationRef } = tableState;
   const { getColumnKey, isEditable } = tableMethods;
 
   const innerColumns = computed(() => {
-    const innerProps = cloneDeep(unref(getProps));
+    const innerProps = cloneDeep(unref(innerPropsRef));
 
     // @ts-ignore
     const columns = innerProps!.columns!.filter((n) => !n.hideInTable);
@@ -135,7 +136,7 @@ export const useColumns = (payload: UseColumnsPayload) => {
       component: () => Input,
       defaultValue: record[key],
       colProps: {
-        span: unref(getProps).editableType === 'cell' ? 20 : 24,
+        span: unref(innerPropsRef).editableType === 'cell' ? 20 : 24,
       },
       formItemProps: {
         help: '',

diff --git a/src/components/core/dynamic-table/src/hooks/useTableContext.ts b/src/components/core/dynamic-table/src/hooks/useTableContext.ts
@@ -1,12 +1,23 @@
 import { injectLocal, provideLocal } from '@vueuse/core';
-import type { TableMethods, TableState, TableForm, UseEditableType } from './';
+import type {
+  TableMethods,
+  TableState,
+  TableForm,
+  UseEditableType,
+  ExportData2Excel,
+  UseColumnsType,
+} from './';
 import type { DynamicTableProps } from '../dynamic-table';
 
-type DynamicTableType = { props: DynamicTableProps } & TableMethods &
+type DynamicTableType = {
+  tableProps: DynamicTableProps;
+} & TableMethods &
   TableState &
   TableForm &
   UseEditableType &
-  UseEditableType;
+  UseEditableType &
+  ExportData2Excel &
+  UseColumnsType;
 
 const key = Symbol('dynamic-table');
 

diff --git a/src/components/core/dynamic-table/src/hooks/useTableForm.ts b/src/components/core/dynamic-table/src/hooks/useTableForm.ts
@@ -15,11 +15,11 @@ interface UseTableFormPayload {
 export function useTableForm(payload: UseTableFormPayload) {
   const slots = useSlots();
   const { tableState, tableMethods } = payload;
-  const { getProps, loadingRef } = tableState;
+  const { innerPropsRef, loadingRef } = tableState;
   const { getColumnKey, getSearchFormRef } = tableMethods;
 
   const getFormProps = computed((): SchemaFormProps => {
-    const { formProps } = unref(getProps);
+    const { formProps } = unref(innerPropsRef);
     const { submitButtonOptions } = formProps || {};
     return {
       showAdvancedButton: true,
@@ -35,7 +35,7 @@ export function useTableForm(payload: UseTableFormPayload) {
   const formSchemas = computed<FormSchema[]>(() => {
     const columnKeyFlags = Object.keys(ColumnKeyFlag);
     // @ts-ignore
-    return unref(getProps)
+    return unref(innerPropsRef)
       .columns.filter((n) => {
         const field = getColumnKey(n);
         return !n.hideInSearch && !!field && !columnKeyFlags.includes(field as string);

diff --git a/src/components/core/dynamic-table/src/hooks/useTableState.ts b/src/components/core/dynamic-table/src/hooks/useTableState.ts
@@ -28,7 +28,7 @@ export const useTableState = (props: DynamicTableProps) => {
   /** 表格数据 */
   const tableData = ref<any[]>([]);
   /** 内部属性 */
-  const innerPropsRef = ref<Partial<DynamicTableProps>>({});
+  const innerPropsRef = ref<Partial<DynamicTableProps>>({ ...props });
   /** 分页配置参数 */
   const paginationRef = ref<NonNullable<Pagination>>(false);
   /** 表格加载 */
@@ -67,13 +67,8 @@ export const useTableState = (props: DynamicTableProps) => {
       ...props.pagination,
     };
   }
-
-  const getProps = computed(() => {
-    return Object.assign({}, props, unref(innerPropsRef));
-  });
-
   const getBindValues = computed(() => {
-    const props = unref(getProps);
+    const props = unref(innerPropsRef);
 
     let propsData: Recordable = {
       ...props,
@@ -127,7 +122,6 @@ export const useTableState = (props: DynamicTableProps) => {
     tableData,
     searchFormRef,
     innerPropsRef,
-    getProps,
     getBindValues,
     paginationRef,
     editFormModel,

diff --git a/vite.config.ts b/vite.config.ts
@@ -118,8 +118,8 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       open: true,
       proxy: {
         '^/api': {
-          target: 'https://nest-api.buqiyuan.site',
-          // target: 'http://127.0.0.1:7001',
+          // target: 'https://nest-api.buqiyuan.site',
+          target: 'http://127.0.0.1:7001',
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, ''),
         },