diff --git a/.eslintrc.js b/.eslintrc.js index 870eb080..98fc3ef4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,4 +1,7 @@ module.exports = { root: true, extends: ['@vben'], + rules: { + 'no-undef': 'off', + }, }; diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue index 50b61d5b..b5a600ea 100644 --- a/src/components/Table/src/BasicTable.vue +++ b/src/components/Table/src/BasicTable.vue @@ -76,6 +76,25 @@ import { isFunction } from '/@/utils/is'; import { warn } from '/@/utils/log'; + const events = [ + 'fetch-success', + 'fetch-error', + 'selection-change', + 'register', + 'row-click', + 'row-dbClick', + 'row-contextmenu', + 'row-mouseenter', + 'row-mouseleave', + 'edit-end', + 'edit-cancel', + 'edit-row-end', + 'edit-change', + 'expanded-rows-change', + 'change', + 'columns-change', + ]; + export default defineComponent({ name: 'BasicTable', components: { @@ -84,24 +103,7 @@ HeaderCell, }, props: basicProps, - emits: [ - 'fetch-success', - 'fetch-error', - 'selection-change', - 'register', - 'row-click', - 'row-dbClick', - 'row-contextmenu', - 'row-mouseenter', - 'row-mouseleave', - 'edit-end', - 'edit-cancel', - 'edit-row-end', - 'edit-change', - 'expanded-rows-change', - 'change', - 'columns-change', - ], + emits: events, setup(props, { attrs, emit, slots, expose }) { const tableElRef = ref(null); const tableData = ref([]); diff --git a/src/components/Table/src/components/editable/CellComponent.ts b/src/components/Table/src/components/editable/CellComponent.ts index 3a166938..547940b3 100644 --- a/src/components/Table/src/components/editable/CellComponent.ts +++ b/src/components/Table/src/components/editable/CellComponent.ts @@ -33,7 +33,7 @@ export const CellComponent: FunctionalComponent = ( Popover, { overlayClassName: 'edit-cell-rule-popover', - visible: !!popoverVisible, + open: !!popoverVisible, ...(getPopupContainer ? { getPopupContainer } : {}), }, { diff --git a/src/components/Table/src/hooks/useColumns.ts b/src/components/Table/src/hooks/useColumns.ts index b71b61ba..75237253 100644 --- a/src/components/Table/src/hooks/useColumns.ts +++ b/src/components/Table/src/hooks/useColumns.ts @@ -15,7 +15,7 @@ function handleItem(item: BasicColumn, ellipsis: boolean) { item.align = item.align || DEFAULT_ALIGN; if (ellipsis) { if (!key) { - item.key = dataIndex; + item.key = typeof dataIndex == 'object' ? dataIndex.join('-') : dataIndex; } if (!isBoolean(item.ellipsis)) { Object.assign(item, { diff --git a/src/components/Table/src/hooks/useDataSource.ts b/src/components/Table/src/hooks/useDataSource.ts index f1616c66..c051cf38 100644 --- a/src/components/Table/src/hooks/useDataSource.ts +++ b/src/components/Table/src/hooks/useDataSource.ts @@ -208,7 +208,7 @@ export function useDataSource( function insertTableDataRecord( record: Recordable | Recordable[], - index: number, + index?: number, ): Recordable[] | undefined { // if (!dataSourceRef.value || dataSourceRef.value.length == 0) return; index = index ?? dataSourceRef.value?.length; @@ -349,7 +349,7 @@ export function useDataSource( } function setTableData(values: T[]) { - dataSourceRef.value = values; + dataSourceRef.value = values as Recordable[]; } function getDataSource() { diff --git a/src/components/Table/src/hooks/useRowSelection.ts b/src/components/Table/src/hooks/useRowSelection.ts index ed19b072..e87c3dfb 100644 --- a/src/components/Table/src/hooks/useRowSelection.ts +++ b/src/components/Table/src/hooks/useRowSelection.ts @@ -4,13 +4,14 @@ import { computed, ComputedRef, nextTick, Ref, ref, toRaw, unref, watch } from ' import { ROW_KEY } from '../const'; import { omit } from 'lodash-es'; import { findNodeAll } from '/@/utils/helper/treeHelper'; +import type { Key } from 'ant-design-vue/lib/table/interface'; export function useRowSelection( propsRef: ComputedRef, tableData: Ref, emit: EmitType, ) { - const selectedRowKeysRef = ref([]); + const selectedRowKeysRef = ref([]); const selectedRowRef = ref([]); const getRowSelectionRef = computed((): TableRowSelection | null => { @@ -21,7 +22,7 @@ export function useRowSelection( return { selectedRowKeys: unref(selectedRowKeysRef), - onChange: (selectedRowKeys: string[]) => { + onChange: (selectedRowKeys: Key[]) => { setSelectedRowKeys(selectedRowKeys); }, ...omit(rowSelection, ['onChange']), @@ -30,7 +31,7 @@ export function useRowSelection( watch( () => unref(propsRef).rowSelection?.selectedRowKeys, - (v: string[]) => { + (v?: Key[]) => { setSelectedRowKeys(v); }, ); @@ -62,8 +63,8 @@ export function useRowSelection( return unref(getAutoCreateKey) ? ROW_KEY : rowKey; }); - function setSelectedRowKeys(rowKeys: string[]) { - selectedRowKeysRef.value = rowKeys; + function setSelectedRowKeys(rowKeys?: Key[]) { + selectedRowKeysRef.value = rowKeys || []; const allSelectedRows = findNodeAll( toRaw(unref(tableData)).concat(toRaw(unref(selectedRowRef))), (item) => rowKeys?.includes(item[unref(getRowKey) as string]), @@ -72,7 +73,7 @@ export function useRowSelection( }, ); const trueSelectedRows: any[] = []; - rowKeys?.forEach((key: string) => { + rowKeys?.forEach((key: Key) => { const found = allSelectedRows.find((item) => item[unref(getRowKey) as string] === key); found && trueSelectedRows.push(found); }); diff --git a/src/components/Table/src/hooks/useTable.ts b/src/components/Table/src/hooks/useTable.ts index 323eb233..f7f29df7 100644 --- a/src/components/Table/src/hooks/useTable.ts +++ b/src/components/Table/src/hooks/useTable.ts @@ -7,6 +7,7 @@ import { getDynamicProps } from '/@/utils'; import { ref, onUnmounted, unref, watch, toRaw } from 'vue'; import { isProdMode } from '/@/utils/env'; import { error } from '/@/utils/log'; +import type { Key } from 'ant-design-vue/lib/table/interface'; type Props = Partial>; @@ -92,7 +93,7 @@ export function useTable(tableProps?: Props): [ const columns = getTableInstance().getColumns({ ignoreIndex }) || []; return toRaw(columns); }, - setColumns: (columns: BasicColumn[]) => { + setColumns: (columns: BasicColumn[] | string[]) => { getTableInstance().setColumns(columns); }, setTableData: (values: any[]) => { @@ -113,7 +114,7 @@ export function useTable(tableProps?: Props): [ clearSelectedRowKeys: () => { getTableInstance().clearSelectedRowKeys(); }, - setSelectedRowKeys: (keys: string[] | number[]) => { + setSelectedRowKeys: (keys: (string | number)[]) => { getTableInstance().setSelectedRowKeys(keys); }, getPaginationRef: () => { @@ -155,7 +156,7 @@ export function useTable(tableProps?: Props): [ expandAll: () => { getTableInstance().expandAll(); }, - expandRows: (keys: string[]) => { + expandRows: (keys: Key[]) => { getTableInstance().expandRows(keys); }, collapseAll: () => { diff --git a/src/components/Table/src/hooks/useTableExpand.ts b/src/components/Table/src/hooks/useTableExpand.ts index 26283659..49fd2d98 100644 --- a/src/components/Table/src/hooks/useTableExpand.ts +++ b/src/components/Table/src/hooks/useTableExpand.ts @@ -8,7 +8,7 @@ export function useTableExpand( tableData: Ref, emit: EmitType, ) { - const expandedRowKeys = ref([]); + const expandedRowKeys = ref<(string | number)[]>([]); const getAutoCreateKey = computed(() => { return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey; @@ -37,7 +37,7 @@ export function useTableExpand( expandedRowKeys.value = keys; } - function expandRows(keys: string[]) { + function expandRows(keys: (string | number)[]) { // use row ID expands the specified table row const { isTreeTable } = unref(propsRef); if (!isTreeTable) return; diff --git a/src/components/Table/src/hooks/useTableScroll.ts b/src/components/Table/src/hooks/useTableScroll.ts index ca8b632e..95f3a912 100644 --- a/src/components/Table/src/hooks/useTableScroll.ts +++ b/src/components/Table/src/hooks/useTableScroll.ts @@ -92,8 +92,8 @@ export function useTableScroll( } function caclFooterHeight(tableEl: Element): number { - const { pagination } = unref(propsRef); - let footerHeight = 0; + const { pagination } = unref(propsRef); + let footerHeight = 0; if (!isBoolean(pagination)) { if (!footerEl) { footerEl = tableEl.querySelector('.ant-table-footer') as HTMLElement; @@ -113,7 +113,7 @@ export function useTableScroll( return headerHeight; } - function calcBottomAndPaddingHeight(tableEl: Element, headEl: Element) { + function calcBottomAndPaddingHeight(tableEl: Element, headEl: Element) { const { pagination, isCanResizeParent, useSearchForm } = unref(propsRef); // Table height from bottom height-custom offset let paddingHeight = 30; @@ -145,7 +145,7 @@ export function useTableScroll( // Table height from bottom bottomIncludeBody = getViewportOffset(headEl).bottomIncludeBody; } - + return { paddingHeight, bottomIncludeBody, @@ -168,7 +168,7 @@ export function useTableScroll( } handleScrollBar(bodyEl, tableEl); - + bodyEl!.style.height = 'unset'; if (!unref(getCanResize) || !unref(tableData) || tableData.length === 0) return; @@ -179,12 +179,12 @@ export function useTableScroll( const headEl = tableEl.querySelector('.ant-table-thead '); if (!headEl) return; - + const paginationHeight = caclPaginationHeight(tableEl); const footerHeight = caclFooterHeight(tableEl); const headerHeight = calcHeaderHeight(headEl); const { paddingHeight, bottomIncludeBody } = calcBottomAndPaddingHeight(tableEl, headEl); - + let height = bottomIncludeBody - (resizeHeightOffset || 0) - @@ -242,4 +242,4 @@ export function useTableScroll( }); return { getScrollRef, redoHeight }; -} \ No newline at end of file +} diff --git a/src/components/Table/src/types/table.ts b/src/components/Table/src/types/table.ts index 937b0e96..d9e9ce68 100644 --- a/src/components/Table/src/types/table.ts +++ b/src/components/Table/src/types/table.ts @@ -1,7 +1,10 @@ import type { VNodeChild } from 'vue'; import type { PaginationProps } from './pagination'; import type { FormProps } from '/@/components/Form'; -import type { TableRowSelection as ITableRowSelection } from 'ant-design-vue/lib/table/interface'; +import type { + TableRowSelection as ITableRowSelection, + Key, +} from 'ant-design-vue/lib/table/interface'; import type { ColumnProps } from 'ant-design-vue/lib/table'; import { ComponentType } from './componentType'; @@ -19,7 +22,7 @@ export interface TableRowSelection extends ITableRowSelection { * Callback executed when selected rows change * @type Function */ - onChange?: (selectedRowKeys: string[] | number[], selectedRows: T[]) => any; + onChange?: (selectedRowKeys: Key[], selectedRows: T[]) => any; /** * Callback executed when select/deselect one row @@ -37,7 +40,7 @@ export interface TableRowSelection extends ITableRowSelection { * Callback executed when row selection is inverted * @type Function */ - onSelectInvert?: (selectedRows: string[] | number[]) => any; + onSelectInvert?: (selectedRows: Key[]) => any; } export interface TableCustomRecord { @@ -88,7 +91,7 @@ export interface TableActionType { getSelectRows: () => T[]; clearSelectedRowKeys: () => void; expandAll: () => void; - expandRows: (keys: string[] | number[]) => void; + expandRows: (keys: (string | number)[]) => void; collapseAll: () => void; scrollTo: (pos: string) => void; // pos: id | "top" | "bottom" getSelectRowKeys: () => string[]; @@ -106,7 +109,7 @@ export interface TableActionType { setLoading: (loading: boolean) => void; setProps: (props: Partial) => void; redoHeight: () => void; - setSelectedRowKeys: (rowKeys: string[] | number[]) => void; + setSelectedRowKeys: (rowKeys: Key[]) => void; getPaginationRef: () => PaginationProps | boolean; getSize: () => SizeType; getRowSelection: () => TableRowSelection; diff --git a/src/views/form-design/components/VFormDesign/components/CodeModal.vue b/src/views/form-design/components/VFormDesign/components/CodeModal.vue index d678ba9e..ddb952fa 100644 --- a/src/views/form-design/components/VFormDesign/components/CodeModal.vue +++ b/src/views/form-design/components/VFormDesign/components/CodeModal.vue @@ -5,7 +5,7 @@