@vue-ui-kit/ant 1.9.3 → 2.0.0

package/dist/style.scss

@@ -1,8 +1,4 @@
-// Variables inlined for npm distribution
-:root {
-  --p-theme-bg: #fff;
-}
-
+@use 'variables';
 
 .p-pane {
   background-color: var(--p-theme-bg);
@@ -104,9 +100,9 @@
     z-index: 4;
   }
   .p-error-hang-out {
-    .ant-input-affix-wrapper-status-error:not(
-        .ant-input-affix-wrapper-disabled
-      ):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper {
+    .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(
+        .ant-input-affix-wrapper-borderless
+      ).ant-input-affix-wrapper {
       border-color: #d9d9d9 !important;
 
       &:focus {
@@ -126,7 +122,9 @@
     transform: translateY(-10px);
     max-height: 0;
     overflow: hidden;
-    transition: opacity 0.3s ease-out 0.3s, transform 0.3s ease-out 0.3s,
+    transition:
+      opacity 0.3s ease-out 0.3s,
+      transform 0.3s ease-out 0.3s,
       max-height 0.3s ease-out 0.3s;
   }
   .ant-form-item-has-error .ant-form-item-explain-error {
@@ -238,25 +236,25 @@
     }
   }
 }
-.p-error-group-tab{
-  position:relative;
+.p-error-group-tab {
+  position: relative;
   overflow: visible;
-  color:#f5222d!important;
-  &:after{
-    content:'🏷️';
-    position:absolute;
-    top:-1em;
-    right:0;
-    width:1em;
-    height:1em;
-    font-size:0.8em;
+  color: #f5222d !important;
+  &:after {
+    content: '🏷️';
+    position: absolute;
+    top: -1em;
+    right: 0;
+    width: 1em;
+    height: 1em;
+    font-size: 0.8em;
     animation: heartbeat 2s infinite;
   }
 }
 .p-error-hang-out {
-  .ant-input-affix-wrapper-status-error:not(
-      .ant-input-affix-wrapper-disabled
-    ):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper {
+  .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(
+      .ant-input-affix-wrapper-borderless
+    ).ant-input-affix-wrapper {
     border-color: #d9d9d9 !important;
 
     &:focus {
@@ -276,6 +274,10 @@
 }
 //endregion
 
+/* #region EVirtTable */
+
+/* #endregion */
+
 @each $align in right center {
   /**/
   .p-content-align-#{$align}.ant-form-item .ant-form-item-control-input-content {
@@ -291,15 +293,37 @@
 }
 
 @keyframes heartbeat {
-  0%   { transform: scale(1); }
-  6%   { transform: scale(1.22); }
-  12%  { transform: scale(1); }
-  18%  { transform: scale(1.18); }
-  24%  { transform: scale(1); }
-  48%  { transform: scale(1); }   // 长停顿
-  54%  { transform: scale(1.22); }
-  60%  { transform: scale(1); }
-  66%  { transform: scale(1.18); }
-  72%  { transform: scale(1); }
-  100% { transform: scale(1); }   // 长停顿
-}
+  0% {
+    transform: scale(1);
+  }
+  6% {
+    transform: scale(1.22);
+  }
+  12% {
+    transform: scale(1);
+  }
+  18% {
+    transform: scale(1.18);
+  }
+  24% {
+    transform: scale(1);
+  }
+  48% {
+    transform: scale(1);
+  } // 长停顿
+  54% {
+    transform: scale(1.22);
+  }
+  60% {
+    transform: scale(1);
+  }
+  66% {
+    transform: scale(1.18);
+  }
+  72% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(1);
+  } // 长停顿
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-ui-kit/ant",
-  "version": "1.9.3",
+  "version": "2.0.0",
   "description": "Vue3 UI Kit based on Ant Design",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -48,6 +48,7 @@
     "email": "adoin@qq.com"
   },
   "dependencies": {
+    "e-virt-table": "^1.2.20",
     "uuid": "^10.0.0",
     "xe-utils": "^3.7.6"
   },

package/src/declarations/antProxy.ts

@@ -4,15 +4,17 @@ import { ColProps } from 'ant-design-vue/lib/grid/Col';
 import { FormProps } from 'ant-design-vue/lib/form/Form';
 import { TableColumnType, TableProps, TooltipProps } from 'ant-design-vue';
 import { ButtonType } from 'ant-design-vue/lib/button/buttonTypes';
+import type { ConfigType, Column as EVirtColumn } from 'e-virt-table';
 
-export interface CellFuncArg<D = Recordable> {
+export interface CellFuncArg<D extends Recordable = Recordable> {
   row: D;
-  column: ColumnProps<D>;
+  column?: ColumnProps<D>;
   rowIndex: number;
   cellValue: any;
 }
-
-export interface ItemFuncArg<F = Recordable> {
+export type FormatterFunc = (c: CellFuncArg, ...args: any[]) => any;
+export type PFormatter = Record<string, FormatterFunc>;
+export interface ItemFuncArg<F extends Recordable = Recordable> {
   data: F;
   field?: string;
 }
@@ -48,7 +50,7 @@ export interface TooltipConfig extends TooltipProps {
   title: TooltipProps['title'] | (() => any);
 }
 
-export interface PFormItemProps<F = Recordable> {
+export interface PFormItemProps<F extends Recordable = Recordable> {
   field?: string;
   title?: string;
   span?: number;
@@ -72,23 +74,29 @@ export interface PFormItemProps<F = Recordable> {
   };
 }
 
-export interface PFormProps<F = Recordable> extends FormProps {
+export interface PFormProps<F extends Recordable = Recordable> extends FormProps {
   items: PFormItemProps<F>[];
   customReset?: () => void;
 }
 
-export interface PBlockProps<F = Recordable> {
+export interface PBlockProps<F extends Recordable = Recordable> {
   getFormSetting: (data: Partial<F>) => PFormProps<Partial<F>>;
   source: Partial<F>;
 }
 
-export interface PromisePickerProps<D = Recordable, F = Recordable> {
+export interface PromisePickerProps<
+  D extends Recordable = Recordable,
+  F extends Recordable = Recordable,
+> {
   gridSetting: PGridProps<D, F>;
   title?: string;
   width?: string | number;
+  multipleAllowEmpty?: boolean;
+  bodyStyle?: Recordable;
+  beforePick?: (rowOrRows: D | Array<D>) => Promise<void>;
 }
 
-export type GroupMenuItemHandler<F = Recordable> = ({
+export type GroupMenuItemHandler<F extends Recordable = Recordable> = ({
   index,
   data,
   code,
@@ -98,14 +106,14 @@ export type GroupMenuItemHandler<F = Recordable> = ({
   data: Partial<F & { __index: number }>;
 }) => void;
 
-export interface GroupMenuItem<F = Recordable> {
+export interface GroupMenuItem<F extends Recordable = Recordable> {
   content: string;
   icon?: string;
   code: string;
   visibleMethod?: ({ data, index }: { data: Partial<F>; index: number }) => boolean;
 }
 
-export interface PFormGroupProps<F = Recordable> {
+export interface PFormGroupProps<F extends Recordable = Recordable> {
   getFormSetting: (data: Partial<F>) => PFormProps<Partial<F>>;
   title?: string;
   tabLabel?: string;
@@ -122,7 +130,8 @@ export interface PFormGroupProps<F = Recordable> {
   menuHandler?: GroupMenuItemHandler<F>;
 }
 
-export interface ColumnProps<D = Recordable> extends Omit<TableColumnType, 'slots'> {
+export interface ColumnProps<D extends Recordable = Recordable>
+  extends Omit<TableColumnType, 'slots'> {
   field?: string;
   children?: ColumnProps<D>[];
   formatter?:
@@ -160,7 +169,7 @@ export interface ToolbarConfig {
   disabled?: boolean;
 }
 
-export interface ResponsePathConfig<D = Recordable> {
+export interface ResponsePathConfig<D extends Recordable = Recordable> {
   /*非分页取值路径*/
   list?: string | ((res: Recordable) => D[]);
   /*分页取值路径*/
@@ -174,12 +183,12 @@ export interface ResponsePathConfig<D = Recordable> {
 
 export type HandlerMultiDel = (ids: Array<string | number>) => any;
 
-export interface AjaxConfig<F = Recordable> {
+export interface AjaxConfig<F extends Recordable = Recordable> {
   query: (Q: { page?: IPage; form: Partial<F> }) => Promise<Recordable>;
   multiDelete?: HandlerMultiDel;
 }
 
-export interface ProxyConfig<D = Recordable, F = Recordable> {
+export interface ProxyConfig<D extends Recordable = Recordable, F extends Recordable = Recordable> {
   // 结果集 取值路径
   response?: ResponsePathConfig<D>;
   ajax: AjaxConfig<F>;
@@ -188,15 +197,17 @@ export interface ProxyConfig<D = Recordable, F = Recordable> {
 export interface PageConfig {
   pageSizes?: number[];
   pageSize?: number;
+  showSizeChanger?: boolean;
+  showQuickJumper?: boolean;
 }
 
-export interface SelectConfig<D = Recordable> {
+export interface SelectConfig<D extends Recordable = Recordable> {
   multiple?: boolean;
   showCount?: boolean;
   getCheckboxProps?: (record: D) => { disabled?: boolean };
 }
 
-export type PGridProps<D = Recordable, F = Recordable> = {
+export type PGridProps<D extends Recordable = Recordable, F extends Recordable = Recordable> = {
   selectConfig?: SelectConfig<D>;
   rowKey?: string;
   manualFetch?: boolean;
@@ -262,20 +273,65 @@ export interface RenderOptions {
   handleDelayTrigger?: (cusFields?: string | string[], time?: number) => void;
 }
 
-export interface RenderFormParams<F = Recordable> {
+export interface RenderFormParams<F extends Recordable = Recordable> {
   data: F;
   field?: string;
 }
 
-export interface RenderTableParams<D = Recordable> {
+export interface RenderTableParams<D extends Recordable = Recordable> {
   data?: D[];
   row: D;
   rowIndex?: number;
   field?: string;
   title?: string;
 }
-
-export interface PGridInstance<D = Recordable, F = Recordable> {
+export interface CanvasColumnProps<T extends Recordable = Recordable>
+  extends Omit<EVirtColumn, 'children' | 'formatter' | 'key'> {
+  key?: string;
+  field?: string;
+  children?: CanvasColumnProps<T>[];
+  formatter?:
+    | string
+    | [string, ...Array<any>]
+    | ((arg: PartialByKeys<CellFuncArg<T>, 'cellValue'>) => any);
+  slots?: {
+    default?: ({
+      row,
+      column,
+      rowIndex,
+    }: {
+      row: T;
+      column: CanvasColumnProps<T>;
+      rowIndex: number;
+    }) => any;
+    edit?: ({
+      row,
+      column,
+      rowIndex,
+    }: {
+      row: T;
+      column: CanvasColumnProps<T>;
+      rowIndex: number;
+    }) => any;
+    title?: ({ column }: { column: CanvasColumnProps<T> }) => any;
+  };
+  cellRender?: CellRender;
+  editRender?: CellRender;
+}
+export interface CanvasTableProps<
+  T extends Recordable = Recordable,
+  B extends Recordable = Recordable,
+> {
+  columns: CanvasColumnProps<T>[];
+  data: T[];
+  config: ConfigType;
+  footerData?: B[];
+  loading?: boolean;
+}
+export interface PGridInstance<
+  D extends Recordable = Recordable,
+  F extends Recordable = Recordable,
+> {
   commitProxy: {
     query: () => Promise<D[]>;
     reload: () => Promise<D[]>;
@@ -297,7 +353,7 @@ export interface PFormInstance {
   $form: Recordable;
 }
 
-export interface PromisePickerInstance<D = Recordable> {
+export interface PromisePickerInstance<D extends Recordable = Recordable> {
   pick: () => Promise<{ row: D; field?: string }>;
   pickMultiple: () => Promise<D[]>;
   grid: PGridInstance<D>;

package/src/index.ts

@@ -1,6 +1,8 @@
 import { App } from 'vue';
 import PForm from '@/components/PForm.vue';
 import PGrid from '@/components/PGrid.vue';
+import PCanvasTable from '@/components/PCanvasTable.vue';
+import PCanvasGrid from '@/components/PCanvasGrid.vue';
 import PFormGroup from '@/components/PFormGroup.vue';
 import PGroupBlock from '@/components/PGroupBlock.vue';
 import PromisePicker from '@/components/PromisePicker.vue';
@@ -19,7 +21,8 @@ export default {
   install(app: App) {
     app.component('PForm', PForm);
     app.component('PGrid', PGrid);
-    // @ts-ignore
+    app.component('PCanvasTable', PCanvasTable);
+    app.component('PCanvasGrid', PCanvasGrid);
     app.component('PFormGroup', PFormGroup);
     app.component('PGroupBlock', PGroupBlock);
     app.component('PromisePicker', PromisePicker);
@@ -37,4 +40,14 @@ export * from '@/utils/core';
 export { setup, setUIKitConfig, getUIKitConfig, resetUIKitConfig, type UIKitConfig };
 
 // 直接导出组件，使用户可以直接导入使用
-export { PForm, PGrid, PFormGroup, PGroupBlock, PromisePicker, addFormatter, addRender };
+export {
+  PForm,
+  PGrid,
+  PCanvasTable,
+  PCanvasGrid,
+  PFormGroup,
+  PGroupBlock,
+  PromisePicker,
+  addFormatter,
+  addRender,
+};

package/src/packages/components/PCanvasGrid.vue

@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+  import PCanvasTable from './PCanvasTable.vue';
+</script>
+<template>
+  <div>todo</div>
+</template>

package/src/packages/components/PCanvasTable.vue

@@ -0,0 +1,286 @@
+<script
+  lang="ts"
+  setup
+  generic="T extends Recordable = Recordable, B extends Recordable = Recordable"
+>
+  import Cell from 'e-virt-table/dist/lib/Cell';
+  import type CellType from 'e-virt-table/dist/lib/Cell';
+  import EVirtTable from 'e-virt-table';
+  import type {
+    Column as EVirtColumn,
+    CellParams,
+    OverlayerContainer,
+    FormatterMethod,
+  } from 'e-virt-table';
+  import { ref, onMounted, computed, useAttrs, watch } from 'vue';
+  import { EventCallback } from 'e-virt-table/dist/lib/EventBus';
+  import { isArray, isEqual, isFunction, isString, omit } from 'xe-utils';
+  import renderStore from '@/store/renderStore';
+  import RenderEditCell from './RenderEditCell';
+  import type { CanvasColumnProps, CanvasTableProps, FormatterFunc, CellRender } from '#/antProxy';
+  import { v4 as uuidv4 } from 'uuid';
+  import { antFormatters } from '@/utils/AFormatters';
+
+  const emit = defineEmits<{
+    (e: 'change', value: any[]): void; // 需要默认实现change，不能动态绑定
+    (e: 'ready', value: EVirtTable): void;
+  }>();
+  const defaultConfig = {
+    DISABLED: true,
+  };
+  const props = defineProps<CanvasTableProps<T, B>>();
+  let eVirtTable: EVirtTable | null = null;
+  const attrs = useAttrs();
+  const eVirtTableRef = ref(null);
+  const eVirtTableEditorRef = ref(null);
+  const eVirtTableEmptyRef = ref(null);
+  const eVirtTableOverlayerRef = ref(null);
+  const editorCell = ref<Cell>();
+  const editorType = ref<string>('text');
+  const overlayerView = ref<OverlayerContainer>();
+  const cacheEditorSlotColumns: Record<string, CanvasColumnProps<T>> = {};
+  const cacheEditorRenders: Record<string, CellRender> = {};
+  // 编辑器样式
+  const editorStyle = computed(() => {
+    const cell = editorCell.value;
+    if (!cell) {
+      return {};
+    }
+    return {
+      width: `${cell.width}px`,
+      height: `${cell.height}px`,
+    };
+  });
+  const getFormatter = (name: string) => antFormatters[name] || (({ cellValue }) => cellValue);
+  const getCellRender = (name: string) => renderStore.renders[name]?.renderDefault;
+  const transferFormatter =
+    (formatter: FormatterFunc, ...restArgs: any[]): FormatterMethod =>
+    ({ row, rowIndex, value }) =>
+      formatter(
+        {
+          row,
+          rowIndex,
+          cellValue: value,
+        },
+        ...restArgs,
+      );
+  // 将复杂的三元运算符拆分成函数
+  const getRenderFunction = (column: CanvasColumnProps<T>) => {
+    if (column.slots?.default && isFunction(column.slots?.default)) {
+      return (cell: CellParams) =>
+        column.slots?.default?.({
+          row: cell.row,
+          column: column,
+          rowIndex: cell.rowIndex,
+        });
+    }
+
+    if (column.slots?.default && isString(column.slots?.default)) {
+      return `slot:${column.slots?.default}`;
+    }
+
+    if (column.cellRender && column.cellRender.name) {
+      return (cell: CellParams) =>
+        getCellRender(column.cellRender!.name)?.(
+          column.cellRender!,
+          {
+            data: props.data,
+            row: cell.row,
+            rowIndex: cell.rowIndex,
+            field: column.field || cell.column.key,
+            title: cell.column?.title ?? '',
+          },
+          {},
+        );
+    }
+
+    return undefined;
+  };
+  const parseToEVirtColumn = (column: CanvasColumnProps<T>): EVirtColumn => {
+    if (column.slots?.edit && (column.field || column.key) && isFunction(column.slots?.edit)) {
+      cacheEditorSlotColumns[`__slot:${column.field || column.key}`] = column;
+    } else if (column.editRender?.name && (column.field || column.key)) {
+      cacheEditorRenders[column.field! || column.key!] = column.editRender;
+    }
+    return {
+      ...omit(column, ['formatter']),
+      key: column.key || column.field || uuidv4(),
+      formatter: isString(column.formatter)
+        ? transferFormatter(getFormatter(column.formatter as string))
+        : isArray(column.formatter) && isString(column.formatter[0])
+          ? transferFormatter(getFormatter(column.formatter[0]), ...column.formatter.slice(1))
+          : isFunction(column.formatter)
+            ? transferFormatter(column.formatter as FormatterFunc)
+            : undefined,
+      editorType:
+        column.editorType ??
+        (column.slots?.edit && (column.field || column.key) && isFunction(column.slots?.edit)
+          ? `__slot:${column.field || column.key}`
+          : column.editRender?.name
+            ? column.editRender.name
+            : undefined),
+      render: getRenderFunction(column),
+      children: column.children?.map((child) => parseToEVirtColumn(child)),
+    };
+  };
+  onMounted(() => {
+    if (!eVirtTableRef.value) {
+      return;
+    }
+    eVirtTable = new EVirtTable(eVirtTableRef.value, {
+      config: {
+        ...defaultConfig,
+        ...props.config,
+      },
+      columns: props.columns.map((col) => parseToEVirtColumn(col)),
+      data: props.data,
+      emptyElement: eVirtTableEmptyRef.value || undefined,
+      overlayerElement: eVirtTableOverlayerRef.value || undefined,
+      editorElement: eVirtTableEditorRef.value || undefined,
+    });
+    // 动态绑定事件
+    Object.keys(attrs).forEach((key) => {
+      const func = attrs[key];
+      if (typeof func === 'function' && key.startsWith('on')) {
+        const _eventName = key.charAt(2).toLowerCase() + key.slice(3); // 去掉 'on' 前缀 只将 'on' 后第一个字母转换为小写
+        eVirtTable?.on(_eventName, func as EventCallback);
+      }
+    });
+    eVirtTable.on('change', (value) => {
+      emit('change', value);
+    });
+    eVirtTable.on('overlayerChange', (overlayer: OverlayerContainer) => {
+      overlayerView.value = overlayer;
+    });
+    eVirtTable.on('startEdit', (cell) => {
+      editorCell.value = cell;
+      editorType.value = cell.editorType;
+      // 内部已经处理了文本类型的编辑
+      if (editorType.value === 'text') {
+        return;
+      }
+    });
+    eVirtTable.on('doneEdit', () => {
+      editorType.value = 'text';
+    });
+    emit('ready', eVirtTable);
+  });
+  function saveCellValue(value) {
+    if (!eVirtTable || !editorCell.value) {
+      return;
+    }
+    const { rowKey, key } = editorCell.value;
+    eVirtTable?.setItemValueByEditor(rowKey, key, value);
+  }
+  watch(
+    props.data,
+    (newValue) => {
+      eVirtTable?.loadData(newValue);
+    },
+    { deep: true },
+  );
+  watch(
+    () => props.columns,
+    (newValue, oldValue) => {
+      if (!isEqual(newValue, oldValue)) {
+        eVirtTable?.loadColumns(newValue.map((col) => parseToEVirtColumn(col)));
+      }
+    },
+    { deep: true },
+  );
+  watch(
+    () => props.config,
+    (newValue) => {
+      eVirtTable?.loadConfig(newValue);
+    },
+    { deep: true },
+  );
+  watch(
+    () => props.footerData,
+    (newValue) => {
+      eVirtTable?.loadFooterData(newValue || []);
+    },
+    { deep: true },
+  );
+  const getPopupContainer = () => {
+    return document.body;
+  };
+</script>
+<template>
+  <a-spin :spinning="loading">
+    <div ref="eVirtTableRef">
+      <div ref="eVirtTableEditorRef">
+        <!-- 插槽编辑器 -->
+        <component
+          v-if="editorType.startsWith('__slot:')"
+          :is="
+            cacheEditorSlotColumns[editorType]!.slots!.edit!({
+              row: editorCell!.row,
+              column: cacheEditorSlotColumns[editorType],
+              rowIndex: editorCell!.rowIndex,
+            })
+          "
+          :bordered="false"
+          :style="editorStyle"
+          class="ev-editor-wrapper"
+          :get-popup-container="getPopupContainer"
+          v-model:value="editorCell!.value"
+          :cell="editorCell"
+          @blur="saveCellValue"
+        >
+        </component>
+        <!-- 自定义编辑器 -->
+        <render-edit-cell
+          v-else-if="renderStore.renders[editorType]?.renderEdit"
+          :cell-render="cacheEditorRenders[editorCell!.key]"
+          class="ev-editor-wrapper"
+          :style="editorStyle"
+          :render-table-params="{
+            data: props.data,
+            row: editorCell?.row,
+            rowIndex: editorCell?.rowIndex ?? -1,
+            field: editorCell?.key ?? '',
+            title: editorCell?.column?.title ?? '',
+          }"
+          :bordered="false"
+          :get-popup-container="getPopupContainer"
+          @blur="saveCellValue"
+        />
+      </div>
+      <div ref="eVirtTableEmptyRef">
+        <slot name="empty">
+          <!-- 自定义空数据 -->
+          <a-empty description="空数据" />
+        </slot>
+      </div>
+      <div ref="eVirtTableOverlayerRef">
+        <!-- 自定覆盖层 -->
+        <div
+          :class="wrapper.class"
+          v-for="wrapper in overlayerView?.views || []"
+          :style="wrapper.style"
+          :key="wrapper.type"
+        >
+          <div :style="view.style" v-for="view in wrapper.views" :key="view.key">
+            <div
+              class="cell"
+              v-for="cell in view.cells"
+              :key="`${cell.rowKey}_${cell.key}`"
+              :style="cell.style"
+            >
+              <component
+                v-if="typeof cell.render === 'function'"
+                :is="cell.render(cell)"
+              ></component>
+              <template
+                v-else-if="typeof cell.render === 'string' && cell.render.startsWith('slot:')"
+              >
+                <slot :name="cell.render.replace('slot:', '')" v-bind="cell" :cell="cell"></slot>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </a-spin>
+</template>