@vue-ui-kit/ant 1.9.0 → 1.9.2

package/dist/packages/components/PFormGroup.vue.d.ts

@@ -12,6 +12,7 @@ declare const _default: <F = Recordable<any>>(__VLS_props: NonNullable<Awaited<t
         setActiveKey: (key: number) => void;
         validateAll: () => Promise<PromiseSettledResult<any>[]>;
         validate: (__index: number, ignoreTabError?: boolean) => Promise<void>;
+        validateFields: (__index: number, fields: string[], ignoreTabError?: boolean) => Promise<void>;
     }>): void;
     attrs: any;
     slots: ReturnType<() => {

package/package.json

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

package/src/declarations/antProxy.ts

@@ -312,5 +312,6 @@ export interface PFormGroupInstance {
   activeKey: number;
   setActiveKey: (activeKey: number) => void;
   validateAll: () => Promise<void>;
-  validate: (index: number) => Promise<void>;
+  validate: (index: number, ignoreTabError?: boolean) => Promise<void>;
+  validateFields: (index: number, fields: string[], ignoreTabError?: boolean) => Promise<void>;
 }

package/src/packages/components/PForm.vue

@@ -7,14 +7,11 @@
   import { eachTree } from '@/utils/treeHelper';
   import { getFormDefaults } from '@/utils/config';
   import PFormCol from '@/components/PFormCol.vue';
-  import {
-    Form as AForm,
-    Row as ARow,
-  } from 'ant-design-vue';
+  import { Form as AForm, Row as ARow } from 'ant-design-vue';
 
   const props = defineProps<PFormProps<F> & { data: F }>();
   const emit = defineEmits(['apply', 'reset']);
-  
+
   // 应用默认值
   const formDefaults = getFormDefaults();
   const propsWithDefaults = computed(() => ({
@@ -22,7 +19,7 @@
     labelCol: props.labelCol ?? formDefaults.labelCol ?? { span: 6 },
     wrapperCol: props.wrapperCol ?? formDefaults.wrapperCol ?? { span: 16 },
   }));
-  
+
   const { items, data: formData } = toRefs(props);
 
   function handleSubmit() {
@@ -46,12 +43,10 @@
           } else {
             obj[item.field] = undefined;
           }
-        }
-        else if (item.field && item.slots) {
+        } else if (item.field && item.slots) {
           if (isGoodValue(item.slots.defaultValue)) {
-            obj[item.field] = item.slots.defaultValue
-          }
-          else {
+            obj[item.field] = item.slots.defaultValue;
+          } else {
             obj[item.field] = undefined;
           }
         }
@@ -89,7 +84,7 @@
       <a-row :gutter="[6, 12]">
         <p-form-col
           v-for="(item, idx) in items"
-          :key="`_col_${idx}`"
+          :key="`_col_${item.field || idx}`"
           :form-data="formData"
           :item="item"
           @reset="resetFormData"

package/src/packages/components/PFormGroup.vue

@@ -2,8 +2,9 @@
   import { computed, nextTick, PropType, ref, watch, watchEffect } from 'vue';
   import { PFormGroupProps, PFormBlockInstance } from '#/antProxy';
   import { MoreOutlined } from '@ant-design/icons-vue';
-  import type { Tabs } from 'ant-design-vue'
-  import { Form } from 'ant-design-vue'
+  import type { Tabs } from 'ant-design-vue';
+  import type { Rule } from 'ant-design-vue/lib/form';
+  import { Form } from 'ant-design-vue';
   import { clone, toString, isFunction, omit, max, debounce } from 'xe-utils';
   import PGroupBlock from '@/components/PGroupBlock.vue';
   import {
@@ -18,17 +19,17 @@
   import { valued } from '@/utils/is';
   import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
   import { $warning } from '@/hooks/useMessage';
-  
-  const useForm = Form.useForm
-  const tabsRef = ref<InstanceType<typeof Tabs>>()
+
+  const useForm = Form.useForm;
+  const tabsRef = ref<InstanceType<typeof Tabs>>();
   const props = defineProps<PFormGroupProps<F>>();
-  const rootRef = ref<InstanceType<typeof ACard>>()
+  const rootRef = ref<InstanceType<typeof ACard>>();
   const model = defineModel({
     type: Array as PropType<Partial<F & { __index: number }>[]>,
     default: () => [],
   });
   const activeKey = ref(0);
-  const error_indexes = ref<number[]>([])
+  const error_indexes = ref<number[]>([]);
   const blockInstance = ref<PFormBlockInstance[]>([]);
   const setActiveKey = (key: number) => {
     activeKey.value = key;
@@ -51,34 +52,38 @@
     { content: '复制', code: 'copy' },
     { content: '删除', code: 'delete' },
   ];
-  const getPopupContainer = () => rootRef.value?.$el ?? document.body
+  const getPopupContainer = () => rootRef.value?.$el ?? document.body;
   // 实际是否强制渲染
   const fr = computed(() => {
-    return props.forceRender || model.value.length <= 5
-  })
+    return props.forceRender || model.value.length <= 5;
+  });
   const handleBlockFocus = (idx: number) => {
-    const target_index = model.value.find((f, index) => index === idx)?.__index
+    const target_index = model.value.find((f, index) => index === idx)?.__index;
     if (valued(target_index)) {
-      error_indexes.value = error_indexes.value.filter(f => f !== target_index)
+      error_indexes.value = error_indexes.value.filter((f) => f !== target_index);
     }
-  }
+  };
   const handleTabChange = () => {
     nextTick().then(() => {
-      handleBlockFocus(activeKey.value)
-      blockInstance.value[activeKey.value]?.$form?.validate()
-    })
-  }
-  watch(() => model.value, () => {
-  if (!props.keepSerial) {
-    const unSortItems = model.value.filter(f => !valued(f.__index))
-    if (unSortItems.length > 0) {
-      unSortItems.forEach((item) => {
-        // @ts-ignore
-        item.__index = (max(model.value, m => m.__index ?? -1)?.__index ?? -1) + 1
-      })
-    }
-  }
-}, { immediate: true })
+      handleBlockFocus(activeKey.value);
+      blockInstance.value[activeKey.value]?.$form?.validate();
+    });
+  };
+  watch(
+    () => model.value,
+    () => {
+      if (!props.keepSerial) {
+        const unSortItems = model.value.filter((f) => !valued(f.__index));
+        if (unSortItems.length > 0) {
+          unSortItems.forEach((item) => {
+            // @ts-ignore
+            item.__index = (max(model.value, (m) => m.__index ?? -1)?.__index ?? -1) + 1;
+          });
+        }
+      }
+    },
+    { immediate: true },
+  );
   const handleMenu = ({ key }: MenuInfo, item: Partial<F & { __index: number }>, idx: number) => {
     if (props.menuHandler && isFunction(props.menuHandler)) {
       props.menuHandler({ code: toString(key), data: item, index: idx });
@@ -95,8 +100,8 @@
           break;
         case 'copy':
           if (model.value.length >= maxLen.value) {
-            $warning('已达到最大数量')
-            return
+            $warning('已达到最大数量');
+            return;
           }
           model.value = [
             ...model.value,
@@ -118,73 +123,117 @@
     }
   });
 
-  const debounceHandleBlockFocus = debounce(handleBlockFocus, 50)
+  const debounceHandleBlockFocus = debounce(handleBlockFocus, 50);
   watchEffect(() => {
-  const errorKeys = model.value.map((m, idx) => error_indexes.value.includes(m.__index!) ? idx : undefined).filter(valued)
-  const rootDom = tabsRef.value?.$el
-  if (rootDom) {
-    const tabPanel = rootDom.querySelectorAll(':scope >.ant-tabs-nav>.ant-tabs-nav-wrap>.ant-tabs-nav-list>.ant-tabs-tab>.ant-tabs-tab-btn')
-    tabPanel.forEach((tab, idx) => {
-      if (errorKeys.includes(idx)) {
-        tab.classList.add('p-error-group-tab')
-      }
-      else {
-        tab.classList.remove('p-error-group-tab')
-      }
-    })
-  }
-})
+    const errorKeys = model.value
+      .map((m, idx) => (error_indexes.value.includes(m.__index!) ? idx : undefined))
+      .filter(valued);
+    const rootDom = tabsRef.value?.$el;
+    if (rootDom) {
+      const tabPanel = rootDom.querySelectorAll(
+        ':scope >.ant-tabs-nav>.ant-tabs-nav-wrap>.ant-tabs-nav-list>.ant-tabs-tab>.ant-tabs-tab-btn',
+      );
+      tabPanel.forEach((tab, idx) => {
+        if (errorKeys.includes(idx)) {
+          tab.classList.add('p-error-group-tab');
+        } else {
+          tab.classList.remove('p-error-group-tab');
+        }
+      });
+    }
+  });
   defineExpose({
     activeKey: computed(() => activeKey.value),
     setActiveKey,
     validateAll: () => {
-    const promiseList = fr.value
-      ? blockInstance.value.map(block => block.$form?.validate())
-      : model.value.map(m => useForm(m, props.getFormSetting(m).rules)?.validate() ?? Promise.resolve())
-    return Promise.allSettled(promiseList).then((results) => {
-      // 更新 error_indexes
-      error_indexes.value = results
-        .map((res, idx) => (res.status === 'rejected' && typeof model.value[idx]?.__index === 'number' ? model.value[idx].__index as number : undefined))
-        .filter((v): v is number => typeof v === 'number')
-      if (!props.lazyErrorMark && error_indexes.value.length) {
-        // 跳到第一个出错的tab
-        const firstErrorIndex = error_indexes.value[0]
-        const firstErrorTab = model.value.findIndex(f => f.__index === firstErrorIndex)
-        if (firstErrorTab !== -1) {
-          activeKey.value = firstErrorTab
+      const promiseList = fr.value
+        ? blockInstance.value.map((block) => block.$form?.validate())
+        : model.value.map(
+            (m) => useForm(m, props.getFormSetting(m).rules)?.validate() ?? Promise.resolve(),
+          );
+      return Promise.allSettled(promiseList).then((results) => {
+        // 更新 error_indexes
+        error_indexes.value = results
+          .map((res, idx) =>
+            res.status === 'rejected' && typeof model.value[idx]?.__index === 'number'
+              ? (model.value[idx].__index as number)
+              : undefined,
+          )
+          .filter((v): v is number => typeof v === 'number');
+        if (!props.lazyErrorMark && error_indexes.value.length) {
+          // 跳到第一个出错的tab
+          const firstErrorIndex = error_indexes.value[0];
+          const firstErrorTab = model.value.findIndex((f) => f.__index === firstErrorIndex);
+          if (firstErrorTab !== -1) {
+            activeKey.value = firstErrorTab;
+          }
         }
+        // 判断是否有错误
+        if (error_indexes.value.length) {
+          return Promise.reject({ error_indexes: error_indexes.value, results });
+        }
+        return Promise.resolve(results);
+      });
+    },
+    validate: async (__index: number, ignoreTabError?: boolean) => {
+      const index = model.value.findIndex((f) => f.__index === __index);
+      try {
+        await (fr.value
+          ? (blockInstance.value[index]?.$form?.validate() ?? Promise.resolve())
+          : (useForm(
+              model.value[index],
+              props.getFormSetting(model.value[index]).rules,
+            )?.validate() ?? Promise.resolve()));
+        // 校验通过，移除error_indexes中的__index
+        error_indexes.value = error_indexes.value.filter((f) => f !== __index);
+        return Promise.resolve();
+      } catch (e) {
+        // 校验失败，加入error_indexes
+        if (!error_indexes.value.includes(__index) && !ignoreTabError) {
+          error_indexes.value = [...error_indexes.value, __index];
+        }
+        return Promise.reject(e);
       }
-      // 判断是否有错误
-      if (error_indexes.value.length) {
-        return Promise.reject({ error_indexes: error_indexes.value, results })
-      }
-      return Promise.resolve(results)
-    })
-  },
-  validate: async (__index: number, ignoreTabError?: boolean) => {
-    const index = model.value.findIndex(f => f.__index === __index)
-    try {
-      await (fr.value
-        ? (blockInstance.value[index]?.$form?.validate() ?? Promise.resolve())
-        : (useForm(model.value[index], props.getFormSetting(model.value[index]).rules)?.validate() ?? Promise.resolve()))
-      // 校验通过，移除error_indexes中的__index
-      error_indexes.value = error_indexes.value.filter(f => f !== __index)
-      return Promise.resolve()
-    }
-    catch (e) {
-      // 校验失败，加入error_indexes
-      if (!error_indexes.value.includes(__index) && !ignoreTabError) {
-        error_indexes.value = [...error_indexes.value, __index]
+    },
+    validateFields: async (__index: number, fields: string[], ignoreTabError?: boolean) => {
+      const index = model.value.findIndex((f) => f.__index === __index);
+      const formSettings = props.getFormSetting(model.value[index]);
+      const rules = formSettings.rules as Record<string, Rule[]>;
+      const dataFormFactory = useForm(model.value[index], rules);
+      try {
+        await (fr.value
+          ? (blockInstance.value[index]?.$form?.validateFields(fields) ?? Promise.resolve())
+          : Promise.allSettled(
+              fields.map((m) =>
+                dataFormFactory.validateField(
+                  m,
+                  model.value[index][m],
+                  (rules[m] as Record<string, unknown>[]) ?? [],
+                ),
+              ),
+            ));
+        return Promise.resolve();
+      } catch (e) {
+        // 校验失败，加入error_indexes
+        if (!error_indexes.value.includes(__index) && !ignoreTabError) {
+          error_indexes.value = [...error_indexes.value, __index];
+        }
+        return Promise.reject(e);
       }
-      return Promise.reject(e)
-    }
-  },
+    },
   });
 </script>
 <template>
   <a-card ref="rootRef" :title="title" size="small">
     <a-spin v-if="loading" class="w-full" />
-    <a-tabs v-else ref="tabsRef" type="editable-card" v-model:activeKey="activeKey" hide-add @change="handleTabChange">
+    <a-tabs
+      v-else
+      ref="tabsRef"
+      type="editable-card"
+      v-model:activeKey="activeKey"
+      hide-add
+      @change="handleTabChange"
+    >
       <template #rightExtra>
         <slot name="rightExtra">
           <a-button
@@ -219,17 +268,8 @@
             </template>
           </a-dropdown>
         </template>
-        <!-- @vue-ignore -->
         <p-group-block
-          :ref="
-            (i: PFormBlockInstance) => {
-              if (i) {
-                blockInstance[idx] = i;
-              } else if (blockInstance) {
-                blockInstance = blockInstance.filter((_, i) => i !== idx);
-              }
-            }
-          "
+          ref="blockInstance"
           :key="idx"
           :source="item"
           :get-form-setting="getFormSetting"

package/src/packages/components/PGrid.vue

@@ -11,7 +11,18 @@
     toRefs,
     onBeforeUnmount,
   } from 'vue';
-  import { debounce, get, isArray, isBoolean, isFunction, isObject, isString, merge, omit, toNumber } from 'xe-utils';
+  import {
+    debounce,
+    get,
+    isArray,
+    isBoolean,
+    isFunction,
+    isObject,
+    isString,
+    merge,
+    omit,
+    toNumber,
+  } from 'xe-utils';
   import { eachTree } from '@/utils/treeHelper';
   import { message as $message } from 'ant-design-vue';
   import RenderTitleSlots from '@/components/RenderTitleSlots';
@@ -34,7 +45,7 @@
   import { DownOutlined } from '@ant-design/icons-vue';
 
   const props = defineProps<PGridProps<D, F>>();
-  
+
   // 应用默认值
   const gridDefaults = getGridDefaults();
   const propsWithDefaults = computed(() => ({
@@ -45,7 +56,7 @@
     lazyReset: props.lazyReset ?? gridDefaults.lazyReset ?? false,
     fitHeight: props.fitHeight ?? gridDefaults.fitHeight ?? 170,
   }));
-  
+
   const {
     formConfig,
     pageConfig,
@@ -61,12 +72,12 @@
     toolbar: false,
     form: false,
   });
-  const setLoadings = (value: boolean|Record<string, boolean>) => {
-    if(isObject(value)) {
-      Object.keys(value).forEach(key => {
+  const setLoadings = (value: boolean | Record<string, boolean>) => {
+    if (isObject(value)) {
+      Object.keys(value).forEach((key) => {
         loading[key] = value[key];
       });
-    } else if(isBoolean(value)) {
+    } else if (isBoolean(value)) {
       loading.form = value;
       loading.table = value;
       loading.toolbar = value;
@@ -126,7 +137,7 @@
   const tableEl = ref();
   const renderFormKey = ref(uuid_v4());
   const renderTableKey = ref(uuid_v4());
- 
+
   const codeLoadings = reactive<Record<string, boolean>>(
     [
       ...(props.toolbarConfig?.buttons?.map((m) => m.code) ?? []).filter((f) => f),
@@ -229,13 +240,11 @@
             } else {
               obj[item.field] = undefined;
             }
-          }
-          else if (item.field && item.slots) {
+          } else if (item.field && item.slots) {
             if (isGoodValue(item.slots.defaultValue)) {
-              obj[item.field] = item.slots.defaultValue
-            }
-            else {
-              obj[item.field] = undefined
+              obj[item.field] = item.slots.defaultValue;
+            } else {
+              obj[item.field] = undefined;
             }
           }
         });
@@ -278,8 +287,8 @@
         };
   const enoughSpacing = ref(true);
   const reload = () => {
-    selectedCaches.value = []
-    selectedRowKeys.value = []
+    selectedCaches.value = [];
+    selectedRowKeys.value = [];
     return resetQueryFormData();
   };
   const resetPage = () => {
@@ -417,10 +426,14 @@
     const formHeight = formOriginHeight.includes('px')
       ? toNumber(formOriginHeight.replace('px', ''))
       : 0;
-    const showCountHeight = selectConfig.value?.showCount ? 22 : 0
+    const showCountHeight = selectConfig.value?.showCount ? 22 : 0;
     renderHeight.value =
       props.renderY ??
-      toNumber(ph.replace('px', '')) -propsWithDefaults.value.fitHeight -(props.toolbarConfig ? 30 : 0) -formHeight- showCountHeight;
+      toNumber(ph.replace('px', '')) -
+        propsWithDefaults.value.fitHeight -
+        (props.toolbarConfig ? 30 : 0) -
+        formHeight -
+        showCountHeight;
     enoughSpacing.value = toNumber(ph.replace('px', '')) > 600;
   };
   defineExpose({
@@ -462,13 +475,17 @@
     }
     resetQueryFormData(props.manualFetch);
   });
-  const passFields = ['align']
-  const passDefaultColumnProps = (columns: ColumnProps<D>[]) => columns.map(c => ({
-    ...passFields.reduce((prev, cur) => ({
-      [cur]: propsWithDefaults.value[cur],
-    }), {} as ColumnProps<D>),
-    ...c,
-  }))
+  const passFields = ['align'];
+  const passDefaultColumnProps = (columns: ColumnProps<D>[]) =>
+    columns.map((c) => ({
+      ...passFields.reduce(
+        (prev, cur) => ({
+          [cur]: propsWithDefaults.value[cur],
+        }),
+        {} as ColumnProps<D>,
+      ),
+      ...c,
+    }));
   onBeforeUnmount(() => {
     window.removeEventListener('resize', resizeTable);
     observer.disconnect();
@@ -494,7 +511,7 @@
             <a-row :gutter="[6, 12]">
               <p-form-col
                 v-for="(item, idx) in formConfig!.items"
-                :key="`_col_${idx}`"
+                :key="`_col_${item.field || idx}`"
                 :form-data="queryFormData"
                 :item="item as PFormItemProps<Partial<F>>"
                 @reset="resetQueryFormData(propsWithDefaults.lazyReset)"
@@ -561,7 +578,10 @@
         </span>
       </div>
       <div :class="`p-pane flex-1 ${enoughSpacing ? 'h-0' : ''} p-${scrollMode ?? 'inner'}-scroll`">
-        <div v-if="selectConfig?.multiple && selectConfig.showCount" class="w-full text-slate-5 pl-4">
+        <div
+          v-if="selectConfig?.multiple && selectConfig.showCount"
+          class="w-full text-slate-5 pl-4"
+        >
           已选：{{ selectedRowKeys.length }}
         </div>
         <a-table

package/src/packages/components/PGroupBlock.vue

@@ -4,13 +4,13 @@
   import PForm from '@/components/PForm.vue';
 
   const props = defineProps<PBlockProps<F>>();
-  const formEl = ref<PFormInstance>()
+  const formEl = ref<PFormInstance>();
   const { source } = toRefs(props);
-  const $form = computed(() => formEl.value?.$form)
+  const $form = computed(() => formEl.value?.$form);
   const formSetting = computed<PFormProps<Partial<F>>>(() => props.getFormSetting(source.value));
   defineExpose({
     $form,
-  })
+  });
 </script>
 <template>
   <p-form ref="formEl" v-bind="formSetting" :data="source!" />

package/src/packages/components/RenderAntCell.tsx

@@ -1,10 +1,10 @@
 import { defineComponent } from 'vue';
-import { ItemRender, RenderTableParams } from '#/antProxy';
+import { CellRender, RenderTableParams } from '#/antProxy';
 import renderStore from '@/store/renderStore';
 
 export default defineComponent(
   <D = Recordable,>(props: {
-    cellRender: ItemRender;
+    cellRender: CellRender;
     renderTableParams: RenderTableParams<D>;
     defaultHandler?: {
       [key: string]: (...args: any[]) => any;