chore: 解决 ESLint no-undef 规则校验问题和 basicTable 组件的类型问题，替换popover组件的 visible 属性。 (#3033)

* chore: 关闭eslint的no-undef规则校验

* chore(VFormDesign): 替换表单设计组件的modal是否可见属性

* chore(BasicTable): emit传参类型问题

* chore(Table): 调整函数参数类型

* chore: 调整expandedRowKeys数据类型

* chore(Table): 完善TableRowSelection接口类型

* chore(Table): 完善useRowSelection 文件的类型问题

* chore(useColumns): key赋值的类型问题

* chore(useDataSource): setTableData的类型问题

* chore:  替换rowKeys类型为 (string|number)[]

* fix(edit-cell): 修复edit table Popover 传参问题

* fix(Table):  handleItem函数进行绑定key dataIndex可能为数组，造成类型错误提示

.eslintrc.js

@@ -1,4 +1,7 @@
 module.exports = {
   root: true,
   extends: ['@vben'],
+  rules: {
+    'no-undef': 'off',
+  },
 };

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([]);

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 } : {}),
     },
     {

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, {

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<T = Recordable>(values: T[]) {
-    dataSourceRef.value = values;
+    dataSourceRef.value = values as Recordable[];
   }
 
   function getDataSource<T = Recordable>() {

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<BasicTableProps>,
   tableData: Ref<Recordable[]>,
   emit: EmitType,
 ) {
-  const selectedRowKeysRef = ref<string[]>([]);
+  const selectedRowKeysRef = ref<Key[]>([]);
   const selectedRowRef = ref<Recordable[]>([]);
 
   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);
     });

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<DynamicProps<BasicTableProps>>;
 
@@ -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: () => {

src/components/Table/src/hooks/useTableExpand.ts

@@ -8,7 +8,7 @@ export function useTableExpand(
   tableData: Ref<Recordable[]>,
   emit: EmitType,
 ) {
-  const expandedRowKeys = ref<string[]>([]);
+  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;

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 };
-}
+}

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<T = any> 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<T = any> extends ITableRowSelection {
    * Callback executed when row selection is inverted
    * @type Function
    */
-  onSelectInvert?: (selectedRows: string[] | number[]) => any;
+  onSelectInvert?: (selectedRows: Key[]) => any;
 }
 
 export interface TableCustomRecord<T> {
@@ -88,7 +91,7 @@ export interface TableActionType {
   getSelectRows: <T = Recordable>() => 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<BasicTableProps>) => void;
   redoHeight: () => void;
-  setSelectedRowKeys: (rowKeys: string[] | number[]) => void;
+  setSelectedRowKeys: (rowKeys: Key[]) => void;
   getPaginationRef: () => PaginationProps | boolean;
   getSize: () => SizeType;
   getRowSelection: () => TableRowSelection<Recordable>;

src/views/form-design/components/VFormDesign/components/CodeModal.vue

@@ -5,7 +5,7 @@
   <Modal
     title="代码"
     :footer="null"
-    :visible="visible"
+    :open="visible"
     @cancel="visible = false"
     wrapClassName="v-code-modal"
     style="top: 20px"

src/views/form-design/components/VFormDesign/components/ImportJsonModal.vue

@@ -4,7 +4,7 @@
 <template>
   <Modal
     title="JSON数据"
-    :visible="visible"
+    :open="visible"
     @ok="handleImportJson"
     @cancel="handleCancel"
     cancelText="关闭"

src/views/form-design/components/VFormDesign/components/JsonModal.vue

@@ -5,7 +5,7 @@
   <Modal
     title="JSON数据"
     :footer="null"
-    :visible="visible"
+    :open="visible"
     @cancel="handleCancel"
     :destroyOnClose="true"
     wrapClassName="v-code-modal"

src/views/form-design/components/VFormPreview/index.vue

@@ -4,7 +4,7 @@
 <template>
   <Modal
     title="预览(支持布局)"
-    :visible="visible"
+    :open="visible"
     @ok="handleGetData"
     @cancel="handleCancel"
     okText="获取数据"

src/views/form-design/components/VFormPreview/useForm.vue

@@ -4,7 +4,7 @@
 <template>
   <Modal
     title="预览(不支持布局)"
-    :visible="state.visible"
+    :open="state.visible"
     @ok="handleGetData"
     @cancel="handleCancel"
     okText="获取数据"