From c2a31d4045ad65f7ae0c7862ad1ee60722a4543f Mon Sep 17 00:00:00 2001 From: buqiyuan <1743369777@qq.com> Date: Thu, 1 Sep 2022 00:52:49 +0800 Subject: [PATCH] fix(components): [dynamic-table] initial fetchData did not carry the default value --- package.json | 6 +- .../core/dynamic-table/src/dynamic-table.vue | 5 +- .../dynamic-table/src/hooks/useColumns.tsx | 9 +- .../dynamic-table/src/hooks/useEditable.ts | 64 +++---- .../src/hooks/useTableMethods.tsx | 48 ++++-- .../demos/tables/edit-row-table/columns.tsx | 6 + .../demos/tables/edit-row-table/index.vue | 3 +- .../demos/tables/search-table/columns.tsx | 5 + src/views/demos/tables/search-table/index.vue | 15 +- yarn.lock | 162 +++++++++--------- 10 files changed, 187 insertions(+), 136 deletions(-) diff --git a/package.json b/package.json index ca16763cc..73b700e3c 100644 --- a/package.json +++ b/package.json @@ -60,8 +60,8 @@ "@types/lodash-es": "~4.17.6", "@types/node": "~18.7.14", "@types/webpack-env": "~1.18.0", - "@typescript-eslint/eslint-plugin": "~5.36.0", - "@typescript-eslint/parser": "~5.36.0", + "@typescript-eslint/eslint-plugin": "~5.36.1", + "@typescript-eslint/parser": "~5.36.1", "@vue/cli-plugin-babel": "~5.0.8", "@vue/cli-plugin-eslint": "~5.0.8", "@vue/cli-plugin-router": "~5.0.8", @@ -103,7 +103,7 @@ "unplugin-vue-define-options": "~0.7.3", "vue-cli-plugin-windicss": "~1.1.6", "vue-eslint-parser": "~9.0.3", - "vue-tsc": "^0.40.4" + "vue-tsc": "^0.40.5" }, "__npminstall_done": false, "repository": { diff --git a/src/components/core/dynamic-table/src/dynamic-table.vue b/src/components/core/dynamic-table/src/dynamic-table.vue index bc20cfabd..f01c6bcb1 100644 --- a/src/components/core/dynamic-table/src/dynamic-table.vue +++ b/src/components/core/dynamic-table/src/dynamic-table.vue @@ -28,7 +28,6 @@ @@ -98,7 +97,7 @@ }; // 表格列的配置描述 - const { getColumns } = useColumns({ + const { innerColumns } = useColumns({ props, slots, state: tableState, diff --git a/src/components/core/dynamic-table/src/hooks/useColumns.tsx b/src/components/core/dynamic-table/src/hooks/useColumns.tsx index dd1ebff00..a510dc3f4 100644 --- a/src/components/core/dynamic-table/src/hooks/useColumns.tsx +++ b/src/components/core/dynamic-table/src/hooks/useColumns.tsx @@ -1,4 +1,4 @@ -import { computed, unref, useSlots } from 'vue'; +import { ref, watchEffect, unref, useSlots } from 'vue'; import { cloneDeep, isFunction, mergeWith } from 'lodash-es'; import { EditableCell } from '../components/'; import { ColumnKeyFlag, CustomRenderParams } from '../types/column'; @@ -24,11 +24,12 @@ export type UseTableColumnsContext = { export const useColumns = ({ state, methods, props, tableAction }: UseTableColumnsContext) => { const slots = useSlots(); + const innerColumns = ref(props.columns); const { getColumnKey } = methods; const { getProps } = state; const { isEditable } = tableAction; - const getColumns = computed[]>(() => { + watchEffect(() => { const innerProps = { ...unref(getProps) }; const ColumnKeyFlags = Object.keys(ColumnKeyFlag); const columns = cloneDeep(innerProps!.columns!.filter((n) => !n.hideInTable)); @@ -53,7 +54,7 @@ export const useColumns = ({ state, methods, props, tableAction }: UseTableColum } as TableColumn); } - return columns.map((item) => { + innerColumns.value = columns.map((item) => { const customRender = item.customRender; const rowKey = props.rowKey as string; @@ -149,6 +150,6 @@ export const useColumns = ({ state, methods, props, tableAction }: UseTableColum }; return { - getColumns, + innerColumns, }; }; diff --git a/src/components/core/dynamic-table/src/hooks/useEditable.ts b/src/components/core/dynamic-table/src/hooks/useEditable.ts index c5ef26e77..6779ec48c 100644 --- a/src/components/core/dynamic-table/src/hooks/useEditable.ts +++ b/src/components/core/dynamic-table/src/hooks/useEditable.ts @@ -3,6 +3,7 @@ import { cloneDeep } from 'lodash-es'; import { message } from 'ant-design-vue'; import type { DynamicTableProps } from '../dynamic-table'; import type { TableState } from './useTableState'; +import type { TableColumn } from '@/components/core/dynamic-table/src/types/column'; type UseTableMethodsContext = { state: TableState; @@ -40,6 +41,34 @@ export const useEditable = ({ state, props }: UseTableMethodsContext) => { }); }; + /** 获取要编辑的值 */ + const getEditValue = ( + recordKey: Key, + currentRow?: Recordable, + columns?: TableColumn>[], + ) => { + // 克隆当前行数据作为临时编辑的表单数据，避免直接修改原数据 + const editValue = cloneDeep( + currentRow ?? tableData.value.find((n) => n[String(props.rowKey)] === recordKey), + ); + // 用户设置的默认值优先 + columns?.forEach((item) => { + const { formItemProps, editFormItemProps } = item; + const field = (item.dataIndex || item.key) as string; + if ( + !Object.is(editFormItemProps?.extendSearchFormProps, false) && + formItemProps && + Reflect.has(formItemProps, 'defaultValue') + ) { + editValue[field] = formItemProps.defaultValue; + } + if (editFormItemProps && Reflect.has(editFormItemProps, 'defaultValue')) { + editValue[field] = editFormItemProps.defaultValue; + } + }); + return editValue; + }; + /** * @description 进入编辑行状态 * @@ -54,20 +83,7 @@ export const useEditable = ({ state, props }: UseTableMethodsContext) => { message.warn(props.onlyOneLineEditorAlertMessage || '只能同时编辑一行'); return false; } - // 克隆当前行数据作为临时编辑的表单数据，避免直接修改原数据 - const editValue = cloneDeep( - currentRow ?? tableData.value.find((n) => n[String(props.rowKey)] === recordKey), - ); - // 用户设置的默认值优先 - props.columns.forEach((item) => { - const field = (item.dataIndex || item.key) as string; - if (item.formItemProps && Reflect.has(item.formItemProps, 'defaultValue')) { - editValue[field] = item.formItemProps.defaultValue; - } - if (item.editFormItemProps && Reflect.has(item.editFormItemProps, 'defaultValue')) { - editValue[field] = item.editFormItemProps.defaultValue; - } - }); + const editValue = getEditValue(recordKey, currentRow, props.columns); setEditFormModel(recordKey, editValue); editableRowKeys.value.add(recordKey); return true; @@ -76,23 +92,9 @@ export const useEditable = ({ state, props }: UseTableMethodsContext) => { /** 进入编辑单元格状态 */ const startCellEditable = (recordKey: Key, dataIndex: Key, currentRow?: Recordable) => { editableRowKeys.value.clear(); - // 克隆当前行数据作为临时编辑的表单数据，避免直接修改原数据 - const editValue = cloneDeep( - currentRow ?? tableData.value.find((n) => n[String(props.rowKey)] === recordKey), - ); - const targetColumn = props.columns.find((n) => n.dataIndex === dataIndex); - if (targetColumn) { - const field = (targetColumn.dataIndex || targetColumn.key) as string; - if (targetColumn.formItemProps && Reflect.has(targetColumn.formItemProps, 'defaultValue')) { - editValue[field] = targetColumn.formItemProps.defaultValue; - } - if ( - targetColumn.editFormItemProps && - Reflect.has(targetColumn.editFormItemProps, 'defaultValue') - ) { - editValue[field] = targetColumn.editFormItemProps.defaultValue; - } - } + const targetColumn = props.columns.filter((n) => n.dataIndex === dataIndex); + const editValue = getEditValue(recordKey, currentRow, targetColumn); + editableCellKeys.value.add(`${recordKey}.${dataIndex}`); setEditFormModel(recordKey, { ...(getEditFormModel(recordKey) || editValue), diff --git a/src/components/core/dynamic-table/src/hooks/useTableMethods.tsx b/src/components/core/dynamic-table/src/hooks/useTableMethods.tsx index 45bb880b6..611c75256 100644 --- a/src/components/core/dynamic-table/src/hooks/useTableMethods.tsx +++ b/src/components/core/dynamic-table/src/hooks/useTableMethods.tsx @@ -1,10 +1,10 @@ -import { unref } from 'vue'; +import { unref, nextTick } from 'vue'; import { isObject, isFunction } from 'lodash-es'; import { useEditable } from './useEditable'; import type { DynamicTableProps, DynamicTableEmitFn } from '../dynamic-table'; import type { OnChangeCallbackParams, TableColumn } from '../types/'; -import type { TableState } from './useTableState'; -import { isAsyncFunction } from '@/utils/is'; +import type { Pagination, TableState } from './useTableState'; +import { isAsyncFunction, isBoolean } from '@/utils/is'; export type TableMethods = ReturnType; @@ -40,11 +40,20 @@ export const useTableMethods = ({ state, props, emit }: UseTableMethodsContext) * @description 获取表格数据 */ const fetchData = async (params = {}, rest?: OnChangeCallbackParams) => { + const [pagination] = rest || []; // 如果用户没有提供dataSource并且dataRequest是一个函数，那就进行接口请求 if ( Object.is(props.dataSource, undefined) && (isFunction(props.dataRequest) || isAsyncFunction(props.dataRequest)) ) { + await nextTick(); + if (queryFormRef.value) { + const values = await queryFormRef.value.validate(); + params = { + ...queryFormRef.value.handleFormValues(values), + ...params, + }; + } const _pagination = unref(paginationRef)!; // 是否启用了分页 const enablePagination = isObject(_pagination); @@ -74,11 +83,13 @@ export const useTableMethods = ({ state, props, emit }: UseTableMethodsContext) } } - Object.assign(unref(paginationRef), { - current: ~~page, - pageSize: ~~size, - total: ~~total, + updatePagination({ + current: page, + pageSize: size, + total, }); + } else { + updatePagination(pagination); } if (Array.isArray(data?.list)) { tableData.value = data!.list; @@ -87,7 +98,10 @@ export const useTableMethods = ({ state, props, emit }: UseTableMethodsContext) } else { tableData.value = []; } + } else { + updatePagination(pagination); } + retryFetchCount = 2; return tableData; }; @@ -109,13 +123,11 @@ export const useTableMethods = ({ state, props, emit }: UseTableMethodsContext) const handleTableChange = async (...rest: OnChangeCallbackParams) => { // const [pagination, filters, sorter] = rest; const [pagination] = rest; - let params = {}; if (queryFormRef.value) { - const values = await queryFormRef.value.validate(); - params = queryFormRef.value.handleFormValues(values); + await queryFormRef.value.validate(); } - Object.assign(unref(paginationRef), pagination || {}); - fetchData(params, rest); + updatePagination(pagination); + await fetchData({}, rest); emit('change', ...rest); }; @@ -137,6 +149,18 @@ export const useTableMethods = ({ state, props, emit }: UseTableMethodsContext) } }; + /** 更新表格分页信息 */ + const updatePagination = (info: Pagination = paginationRef.value) => { + if (isBoolean(info)) { + paginationRef.value = info; + } else if (isObject(paginationRef.value)) { + paginationRef.value = { + ...paginationRef.value, + ...info, + }; + } + }; + /** * @description当外部需要动态改变搜索表单的值或选项时，需要调用此方法获取dynamicFormRef实例 */ diff --git a/src/views/demos/tables/edit-row-table/columns.tsx b/src/views/demos/tables/edit-row-table/columns.tsx index ea75bfb48..64d859243 100644 --- a/src/views/demos/tables/edit-row-table/columns.tsx +++ b/src/views/demos/tables/edit-row-table/columns.tsx @@ -27,6 +27,12 @@ export const columns: TableColumn[] = [ return index > 0; }, formItemProps: { + defaultValue: '李白', + rules: [{ required: true, message: '请输入姓名' }], + }, + editFormItemProps: { + /** 不继承于 `formItemProps`的属性 */ + extendSearchFormProps: false, rules: [{ required: true, message: '请输入姓名' }], }, }, diff --git a/src/views/demos/tables/edit-row-table/index.vue b/src/views/demos/tables/edit-row-table/index.vue index ab4745166..7c96b545d 100644 --- a/src/views/demos/tables/edit-row-table/index.vue +++ b/src/views/demos/tables/edit-row-table/index.vue @@ -45,12 +45,13 @@ const [DynamicTable] = useTable(); - const editableType = ref('single'); + const editableType = ref('cell'); const loadData = async ( params, onChangeParams: OnChangeCallbackParams, ): Promise => { + console.log('params', params); console.log('onChangeParams', onChangeParams); await waitTime(500); diff --git a/src/views/demos/tables/search-table/columns.tsx b/src/views/demos/tables/search-table/columns.tsx index b433a396f..8c644b573 100644 --- a/src/views/demos/tables/search-table/columns.tsx +++ b/src/views/demos/tables/search-table/columns.tsx @@ -71,7 +71,10 @@ export const columns: TableColumn[] = [ align: 'center', dataIndex: 'name', sorter: true, + width: 300, + resizable: true, formItemProps: { + defaultValue: '李白', required: true, }, }, @@ -79,6 +82,8 @@ export const columns: TableColumn[] = [ title: '性别', align: 'center', dataIndex: 'gender', + width: 120, + resizable: true, formItemProps: { component: 'Select', componentProps: ({ formInstance, formModel, tableInstance }) => ({ diff --git a/src/views/demos/tables/search-table/index.vue b/src/views/demos/tables/search-table/index.vue index 781bd394f..b72a9fcb6 100644 --- a/src/views/demos/tables/search-table/index.vue +++ b/src/views/demos/tables/search-table/index.vue @@ -4,7 +4,14 @@ - +