@vue-ui-kit/ant 2.0.5 → 2.0.7

package/dist/packages/utils/core.d.ts

@@ -1,8 +1,10 @@
 import { ColumnProps, Responsive } from '../../declarations/antProxy';
 import { TableColumnGroupType, TableColumnType } from 'ant-design-vue';
+import { WatchOptions, WatchSource } from 'vue';
 export declare const cleanCol: (col: ColumnProps) => TableColumnType | TableColumnGroupType<Recordable>;
 export declare const defaultItemResponsive: Responsive;
 export declare const defaultLabelCol: Responsive;
 export declare const labelColDict: Record<number, Responsive>;
 export declare const get24rest: (exist: number[]) => number;
 export declare const getButtonResponsive: (itemResponsive: number | Responsive[]) => any;
+export declare function watchPreviousDeep<T extends object>(source: WatchSource<T>, cb: (value: T, oldValue: T, onCleanup: () => void) => void, options?: WatchOptions): import('vue').WatchHandle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-ui-kit/ant",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "description": "Vue3 UI Kit based on Ant Design",
   "type": "module",
   "main": "./dist/cjs/index.js",

package/src/declarations/antProxy.ts

@@ -338,7 +338,11 @@ export interface PCanvasGridProps<
   D extends Recordable = Recordable,
   F extends Recordable = Recordable,
 > {
-  selectConfig?: SelectConfig<D>;
+  staticConfig?: {
+    selectable?: boolean;
+    showCount?: boolean;
+    tree?: boolean;
+  };
   manualFetch?: boolean;
   formConfig?: PFormProps<F>;
   columns: CanvasColumnProps<D>[];

package/src/packages/components/PCanvasGrid.vue

@@ -65,7 +65,7 @@
     (event: 'resetQuery'): void;
   }>();
 
-  const { formConfig, pageConfig, columns, toolbarConfig, proxyConfig, config, selectConfig } =
+  const { formConfig, pageConfig, columns, toolbarConfig, proxyConfig, config, staticConfig } =
     toRefs(props);
   const gridDefaults = getGridDefaults();
   const canvasTableDefaults = getCanvasTableDefaults();
@@ -307,19 +307,40 @@
         break;
     }
   };
-  const finalColumns = computed<CanvasColumnProps<D>[]>(() =>
-    selectConfig.value?.multiple
-      ? [
-          {
-            type: 'selection',
+  const finalColumns = computed<CanvasColumnProps<D>[]>(() => {
+    if (!staticConfig.value || (!staticConfig.value.selectable && !staticConfig.value.tree)) {
+      return columns.value;
+    }
+    const firstColumn: CanvasColumnProps<D> =
+      staticConfig.value.selectable && staticConfig.value.tree
+        ? {
+            type: 'tree-selection',
             width: 40,
             widthFillDisable: true,
             title: '',
-          },
-          ...columns.value,
-        ]
-      : columns.value,
-  );
+          }
+        : staticConfig.value.selectable
+          ? {
+              type: 'selection',
+              width: 40,
+              widthFillDisable: true,
+              title: '',
+            }
+          : staticConfig.value.tree
+            ? {
+                type: 'tree',
+                width: 40,
+                widthFillDisable: true,
+                title: '',
+              }
+            : {
+                type: 'index',
+                width: 40,
+                widthFillDisable: true,
+                title: '',
+              };
+    return [firstColumn, ...columns.value];
+  });
   const resetQueryFormData = (lazy?: boolean) => {
     if (formConfig.value && formConfig.value.items.length > 0) {
       if (formConfig.value.customReset) {
@@ -364,7 +385,7 @@
     const formHeight = formOriginHeight.includes('px')
       ? toNumber(formOriginHeight.replace('px', ''))
       : 0;
-    const showCountHeight = selectConfig.value?.showCount ? 22 : 0;
+    const showCountHeight = staticConfig.value?.showCount ? 22 : 0;
     renderHeight.value =
       toNumber(ph.replace('px', '')) -
       propsWithDefaults.value.fitCanvasHeight -
@@ -502,7 +523,7 @@
       </div>
       <div :class="`p-pane flex-1 h-0 p-inner-scroll`">
         <div
-          v-if="selectConfig?.multiple && selectConfig.showCount"
+          v-if="staticConfig?.selectable && staticConfig.showCount"
           class="w-full text-slate-5 pl-4"
         >
           已选：{{ selectedRowKeys.length }}

package/src/packages/components/PCanvasTable.vue

@@ -21,6 +21,7 @@
   import { v4 as uuidv4 } from 'uuid';
   import { antFormatters } from '@/utils/AFormatters';
   import { getCanvasTableDefaults } from '@/utils/config';
+  import { watchPreviousDeep } from '@/utils/core';
 
   const emit = defineEmits<{
     (e: 'change', value: any[]): void; // 需要默认实现change，不能动态绑定
@@ -197,7 +198,7 @@
     },
     { deep: true },
   );
-  watch(
+  watchPreviousDeep(
     () => props.columns,
     (newValue, oldValue) => {
       if (!isEqual(newValue, oldValue)) {

package/src/packages/components/PFormCol.vue

@@ -1,46 +1,50 @@
 <script setup lang="ts" generic="T extends Recordable = Recordable">
-import type { PFormItemProps } from '#/antProxy'
-import { defaultItemResponsive } from '@/utils/core';
-import RenderAntItem from '@/components/RenderAntItem';
-import RenderItemSlots from '@/components/RenderItemSlots';
-import { InfoCircleOutlined } from '@ant-design/icons-vue'
-import { v4 as uuid_v4 } from 'uuid'
-import { ref, watch } from 'vue'
-import { isEqual,debounce, isFunction, omit } from 'xe-utils'
+  import type { PFormItemProps } from '#/antProxy';
+  import { defaultItemResponsive, watchPreviousDeep } from '@/utils/core';
+  import RenderAntItem from '@/components/RenderAntItem';
+  import RenderItemSlots from '@/components/RenderItemSlots';
+  import { InfoCircleOutlined } from '@ant-design/icons-vue';
+  import { v4 as uuid_v4 } from 'uuid';
+  import { ref } from 'vue';
+  import { isEqual, debounce, isFunction, omit } from 'xe-utils';
 
-const props = defineProps<{
-  item: PFormItemProps<T>
-  formData: T
-}>()
-const emit = defineEmits<{
-  (e: 'trigger', cusFields?: string | string[]): void
-  (e: 'reset'): void
-}>()
-const hangOut = ref(false)
-const renderFormKey = ref(uuid_v4())
-const handleDelayTrigger = (cusFields?: string | string[], time?: number) => {
-  const delayTime = time ?? 222
-  hangOut.value = true
-  setTimeout(() => {
-    hangOut.value = false
-    emit('trigger', cusFields)
-  }, delayTime)
-}
-const handleTrigger = (cusFields?: string | string[]) => {
-  emit('trigger', cusFields)
-}
-const resetFormData = () => {
-  emit('reset')
-}
-const refreshCol = () => {
-  renderFormKey.value = uuid_v4()
-}
-const debounceRefreshCol = debounce(refreshCol, 100)
-watch(() => props.item, (cur, old) => {
-  if (!isEqual(cur, old)) {
-    debounceRefreshCol()
-  }
-}, { deep: true })
+  const props = defineProps<{
+    item: PFormItemProps<T>;
+    formData: T;
+  }>();
+  const emit = defineEmits<{
+    (e: 'trigger', cusFields?: string | string[]): void;
+    (e: 'reset'): void;
+  }>();
+  const hangOut = ref(false);
+  const renderFormKey = ref(uuid_v4());
+  const handleDelayTrigger = (cusFields?: string | string[], time?: number) => {
+    const delayTime = time ?? 222;
+    hangOut.value = true;
+    setTimeout(() => {
+      hangOut.value = false;
+      emit('trigger', cusFields);
+    }, delayTime);
+  };
+  const handleTrigger = (cusFields?: string | string[]) => {
+    emit('trigger', cusFields);
+  };
+  const resetFormData = () => {
+    emit('reset');
+  };
+  const refreshCol = () => {
+    renderFormKey.value = uuid_v4();
+  };
+  const debounceRefreshCol = debounce(refreshCol, 100);
+  watchPreviousDeep(
+    () => props.item,
+    (cur, old) => {
+      if (!isEqual(cur, old)) {
+        debounceRefreshCol();
+      }
+    },
+    { deep: true },
+  );
 </script>
 
 <template>
@@ -58,7 +62,18 @@ watch(() => props.item, (cur, old) => {
       :label="item.title"
       :name="item.field"
       :wrapper-col="item.wrapperCol ?? (item.title ? undefined : { span: 24 })"
-      v-bind="omit(item, ['field', 'title', 'span', 'col', 'wrapperCol', 'itemRender', 'forceRequired', 'tooltip'])"
+      v-bind="
+        omit(item, [
+          'field',
+          'title',
+          'span',
+          'col',
+          'wrapperCol',
+          'itemRender',
+          'forceRequired',
+          'tooltip',
+        ])
+      "
     >
       <template v-if="item.slots?.title" #label>
         <component :is="item.slots.title" />
@@ -82,7 +97,10 @@ watch(() => props.item, (cur, old) => {
       />
       <span v-else />
       <template v-if="item.tooltipConfig" #tooltip>
-        <a-tooltip v-if="isFunction(item.tooltipConfig.title)" v-bind="omit(item.tooltipConfig, ['title'])">
+        <a-tooltip
+          v-if="isFunction(item.tooltipConfig.title)"
+          v-bind="omit(item.tooltipConfig, ['title'])"
+        >
           <info-circle-outlined class="cursor-pointer py-4 px-2" />
           <template #title>
             <div v-html="item.tooltipConfig.title()" />

package/src/packages/components/PFormGroup.vue

@@ -52,7 +52,10 @@
     { content: '复制', code: 'copy' },
     { content: '删除', code: 'delete' },
   ];
-  const getPopupContainer = () => rootRef.value?.$el ?? document.body;
+  const getPopupContainer = (el: HTMLElement) =>
+    el?.parentElement?.parentElement?.parentElement?.parentElement?.parentElement?.parentElement ??
+    rootRef.value?.$el ??
+    document.body;
   // 实际是否强制渲染
   const fr = computed(() => {
     return props.forceRender || model.value.length <= 5;

package/src/packages/utils/core.ts

@@ -1,7 +1,8 @@
 import { ColumnProps, Responsive } from '#/antProxy';
 import { TableColumnGroupType, TableColumnType } from 'ant-design-vue';
-import { isArray, isNumber, omit, zipObject } from 'xe-utils';
+import { clone, isArray, isNumber, omit, zipObject } from 'xe-utils';
 import { valued } from '@/utils/is';
+import { toValue, watch, WatchCallback, WatchOptions, WatchSource } from 'vue';
 
 export const cleanCol = (col: ColumnProps): TableColumnType | TableColumnGroupType<Recordable> => {
   return {
@@ -50,3 +51,23 @@ export const getButtonResponsive = (itemResponsive: number | Responsive[]) => {
     ),
   );
 };
+
+export function watchPreviousDeep<T extends object>(
+  source: WatchSource<T>,
+  cb: (value: T, oldValue: T, onCleanup: () => void) => void,
+  options?: WatchOptions,
+) {
+  const val = toValue(source);
+  if (typeof val !== 'object' || val === null) {
+    return watch(source, cb as WatchCallback<T>, options);
+  }
+  let previousValue = clone(val) as T;
+  return watch(
+    source,
+    (crtValue, _, onCleanup) => {
+      cb(crtValue as T, previousValue, onCleanup as () => void);
+      previousValue = clone(crtValue) as T;
+    },
+    options,
+  );
+}