@vue-ui-kit/ant 1.7.4 → 1.8.2

package/dist/index.d.ts

@@ -1,12 +1,16 @@
 import { App } from 'vue';
+import { setUIKitConfig, getUIKitConfig, resetUIKitConfig, UIKitConfig } from './packages/utils/config';
+declare function setup(config?: Partial<UIKitConfig>): void;
 declare const _default: {
     install(app: App): void;
-    addFormatter: (formatter: Record<string, (a: import('./declarations/antProxy').CellFuncArg, ...args: any[]) => any>) => void;
+    addFormatter: (formatter: Record<string, (a: import('./Declarations/antProxy').CellFuncArg, ...args: any[]) => any>) => void;
     addRender: (name: string, { renderItemContent, renderDefault, }: {
         renderItemContent?: (options: import('./declarations/antProxy').RenderOptions, params: import('./declarations/antProxy').RenderFormParams, defaultHandler: Recordable) => any;
         renderDefault?: (options: import('./declarations/antProxy').RenderOptions, params: import('./declarations/antProxy').RenderTableParams, defaultHandler: Recordable) => any;
     }) => void;
+    setup: typeof setup;
 };
 export default _default;
 export * from './declarations/antProxy';
 export * from './packages/utils/core';
+export { setup, setUIKitConfig, getUIKitConfig, resetUIKitConfig, type UIKitConfig };

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

@@ -0,0 +1,28 @@
+import { PFormItemProps } from '../../declarations/antProxy';
+declare const _default: <T extends Recordable = Recordable<any>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_Prettify<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_Prettify<Pick<Partial<{}> & Omit<{
+        readonly onTrigger?: ((cusFields?: string | string[] | undefined) => any) | undefined;
+        readonly onReset?: (() => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<{}> & Readonly<{
+        onTrigger?: ((cusFields?: string | string[] | undefined) => any) | undefined;
+        onReset?: (() => any) | undefined;
+    }>, never>, "onReset" | "onTrigger"> & {
+        item: PFormItemProps<T>;
+        formData: T;
+    }> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: ReturnType<() => {}>;
+    emit: {
+        (e: "trigger", cusFields?: string | string[]): void;
+        (e: "reset"): void;
+    } & {};
+}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -10,8 +10,8 @@ declare const _default: <F = Recordable<any>>(__VLS_props: NonNullable<Awaited<t
     expose(exposed: import('vue').ShallowUnwrapRef<{
         activeKey: import('vue').ComputedRef<number>;
         setActiveKey: (key: number) => void;
-        validateAll: () => Promise<any[]>;
-        validate: (__index: number) => any;
+        validateAll: () => Promise<PromiseSettledResult<any>[]>;
+        validate: (__index: number) => Promise<void>;
     }>): void;
     attrs: any;
     slots: ReturnType<() => {

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

@@ -39,16 +39,17 @@ declare const _default: <D = Recordable<any>, F = Recordable<any>>(__VLS_props:
     }>, never>, "onPick" | "onToolbarButtonClick" | "onToolbarToolClick" | "onResetQuery"> & PGridProps<D, F>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{
         commitProxy: {
-            query: import('lodash').DebouncedFunc<() => Promise<D[]>>;
+            query: (this: any, ...args: any[]) => any;
             reload: () => void;
             reloadPage: () => Promise<D[]>;
-            passQuery: (params: Partial<F>, lazy?: boolean) => Promise<void> | Promise<D[]> | undefined;
+            passQuery: (params: Partial<F>, lazy?: boolean) => any;
         };
         $table: import('vue').ComputedRef<any>;
         selectedRowKeys: import('vue').ComputedRef<(string | number)[]>;
         setBtnLoading: (code: string, value: boolean) => void;
         selectedRecords: import('vue').ComputedRef<D[]>;
         $form: import('vue').ComputedRef<any>;
+        getFormData: () => Partial<F>;
         setLoadings: (value: boolean | Record<string, boolean>) => void;
         resizeTable: () => void;
     }>): void;

package/dist/packages/renders/TableInput.vue.d.ts

@@ -3,12 +3,12 @@ import { TableProps } from 'ant-design-vue';
 import { ColumnProps } from '../../declarations/antProxy';
 declare const _default: <D = Recordable<any>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_Prettify<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_Prettify<Pick<Partial<{
-        modelValue: D[];
         tableConfig: TableProps<any>;
+        modelValue: D[];
         editColumns: ColumnProps<Recordable<any>>[];
     }> & Omit<{
-        readonly modelValue: D[];
         readonly tableConfig: TableProps<any>;
+        readonly modelValue: D[];
         readonly editColumns: ColumnProps<Recordable<any>>[];
         readonly onTrigger?: ((...args: any[]) => any) | undefined;
         readonly "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -28,7 +28,7 @@ declare const _default: <D = Recordable<any>>(__VLS_props: NonNullable<Awaited<t
     }>> & Readonly<{
         onTrigger?: ((...args: any[]) => any) | undefined;
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    }>, "modelValue" | "tableConfig" | "editColumns">, "onTrigger" | "onUpdate:modelValue" | ("modelValue" | "tableConfig" | "editColumns")> & {}> & import('vue').PublicProps;
+    }>, "tableConfig" | "modelValue" | "editColumns">, "onTrigger" | "onUpdate:modelValue" | ("tableConfig" | "modelValue" | "editColumns")> & {}> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: ReturnType<() => {}>;

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

@@ -0,0 +1,17 @@
+import { PFormProps, PGridProps } from '../../declarations/antProxy';
+export interface UIKitConfig {
+    form?: {
+        labelCol?: any;
+        wrapperCol?: any;
+    };
+    grid?: {
+        align?: 'left' | 'right' | 'center';
+        lazyReset?: boolean;
+        fitHeight?: number;
+    };
+}
+export declare function setUIKitConfig(config: Partial<UIKitConfig>): void;
+export declare function getUIKitConfig(): UIKitConfig;
+export declare function getFormDefaults(): Partial<PFormProps>;
+export declare function getGridDefaults(): Partial<PGridProps>;
+export declare function resetUIKitConfig(): void;

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

@@ -5,4 +5,4 @@ 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[]) => import('lodash').Dictionary<number>;
+export declare const getButtonResponsive: (itemResponsive: number | Responsive[]) => any;

package/dist/style.css

@@ -1 +1 @@
-@charset "UTF-8";:root{--p-theme-bg: #fff}.p-pane{background-color:var(--p-theme-bg);padding:16px;border-radius:4px}.w-full{width:100%}.cursor-pointer{cursor:pointer}.py-4x{padding-top:4px;padding-bottom:4px}.px-2x{padding-left:2px;padding-right:2px}.pl-4x{padding-left:1em}.pl-8{padding-left:2em}.h-0{height:0}.h-full{height:100%}.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-4px{gap:4px}.gap-8px{gap:8px}.pt-8px{padding-top:8px}.px-16px{padding-left:16px;padding-right:16px}.mt-4px{margin-top:4px}.text-right{text-align:right}.overflow-y-auto{overflow-y:auto}.p-theme-bg{background-color:var(--p-theme-bg)}.p-wrapper .p-form-wrapper{z-index:4}.p-wrapper .p-toolbar-wrapper{box-shadow:0 8px #fff;border-radius:.5em .5em 0 0;margin-bottom:-.5em}.p-wrapper .ant-form .ant-form-item{margin-bottom:0}.p-wrapper .ant-form .ant-form-item.p-required .ant-form-item-label>label:before{display:inline-block;margin-inline-end:4px;color:#ff4d4f;font-size:14px;font-family:SimSun,sans-serif;line-height:1;content:"*"}.p-wrapper .ant-form .ant-form-item .ant-form-item-label{display:flex;align-items:start;justify-content:flex-end}.p-wrapper .ant-form .ant-form-item .ant-form-item-label>label{white-space:break-spaces;align-items:flex-start;height:fit-content;padding-top:.36em}.p-wrapper .ant-form .ant-form-item .ant-form-item-label>label:after{padding-left:4px;margin-inline-start:unset}.p-wrapper .ant-form.ant-form-vertical .ant-form-item .ant-form-item-label{justify-content:flex-start;font-weight:600}.p-wrapper .ant-table-sticky-scroll{visibility:hidden}.p-wrapper .ant-table-header.ant-table-sticky-holder:before{content:"";width:100%;position:absolute;height:22px;display:block;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);top:-16px}.p-wrapper .ant-table-wrapper .ant-table-pagination.ant-pagination{margin:unset;padding:16px 0}.p-wrapper .p-inner-scroll>.ant-table-wrapper{height:100%}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading{height:100%}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container{height:100%;display:flex;flex-direction:column}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container>.ant-table{border-radius:unset}.p-wrapper .ant-pagination-options .ant-select{width:100px}.p-content-align-right.ant-form-item .ant-form-item-control-input-content{display:flex;justify-content:flex-end;align-items:center;text-align:right}.p-content-align-center.ant-form-item .ant-form-item-control-input-content{display:flex;justify-content:center;align-items:center;text-align:center}
+@charset "UTF-8";:root{--p-theme-bg: #fff}.p-pane{background-color:var(--p-theme-bg);padding:16px;border-radius:4px}.w-full{width:100%}.cursor-pointer{cursor:pointer}.py-4x{padding-top:4px;padding-bottom:4px}.px-2x{padding-left:2px;padding-right:2px}.pl-4x{padding-left:1em}.pl-8{padding-left:2em}.h-0{height:0}.h-full{height:100%}.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-4px{gap:4px}.gap-8px{gap:8px}.pt-8px{padding-top:8px}.px-16px{padding-left:16px;padding-right:16px}.mt-4px{margin-top:4px}.text-right{text-align:right}.overflow-y-auto{overflow-y:auto}.p-theme-bg{background-color:var(--p-theme-bg)}.p-wrapper .p-form-wrapper{z-index:4}.p-wrapper .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{border-color:#d9d9d9!important}.p-wrapper .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:focus{border-color:#4096ff!important}.p-wrapper .p-error-hang-out .ant-form-item-explain-error{opacity:0!important;transform:translateY(-10px)!important;max-height:0!important;overflow:hidden!important;transition:none!important}.p-wrapper .ant-form-item-explain-error{opacity:0;transform:translateY(-10px);max-height:0;overflow:hidden;transition:opacity .3s ease-out .3s,transform .3s ease-out .3s,max-height .3s ease-out .3s}.p-wrapper .ant-form-item-has-error .ant-form-item-explain-error{opacity:1;transform:translateY(0);max-height:100px}.p-wrapper .p-toolbar-wrapper{box-shadow:0 8px #fff;border-radius:.5em .5em 0 0;margin-bottom:-.5em}.p-wrapper .ant-form .ant-form-item{margin-bottom:0}.p-wrapper .ant-form .ant-form-item.p-required .ant-form-item-label>label:before{display:inline-block;margin-inline-end:4px;color:#ff4d4f;font-size:14px;font-family:SimSun,sans-serif;line-height:1;content:"*"}.p-wrapper .ant-form .ant-form-item .ant-form-item-label{display:flex;align-items:start;justify-content:flex-end}.p-wrapper .ant-form .ant-form-item .ant-form-item-label>label{white-space:break-spaces;align-items:flex-start;height:fit-content;padding-top:.36em}.p-wrapper .ant-form .ant-form-item .ant-form-item-label>label:after{padding-left:4px;margin-inline-start:unset}.p-wrapper .ant-form.ant-form-vertical .ant-form-item .ant-form-item-label{justify-content:flex-start;font-weight:600}.p-wrapper .ant-table-sticky-scroll{visibility:hidden}.p-wrapper .ant-table-header.ant-table-sticky-holder:before{content:"";width:100%;position:absolute;height:22px;display:block;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);top:-16px}.p-wrapper .ant-table-wrapper .ant-table-pagination.ant-pagination{margin:unset;padding:16px 0}.p-wrapper .p-inner-scroll>.ant-table-wrapper{height:100%}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading{height:100%}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container{height:100%;display:flex;flex-direction:column}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container>.ant-table{border-radius:unset}.p-wrapper .ant-pagination-options .ant-select{width:100px}.p-error-group-tab{position:relative;overflow:visible;color:#f5222d!important}.p-error-group-tab:after{content:"🏷️";position:absolute;top:-1em;right:0;width:1em;height:1em;font-size:.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{border-color:#d9d9d9!important}.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:focus{border-color:#4096ff!important}.p-error-hang-out .ant-form-item-explain-error{display:none}.no-error-border{border-color:#d9d9d9!important}.no-error-border:focus{border-color:#4096ff!important}.p-content-align-right.ant-form-item .ant-form-item-control-input-content{display:flex;justify-content:flex-end;align-items:center;text-align:right}.p-content-align-center.ant-form-item .ant-form-item-control-input-content{display:flex;justify-content:center;align-items:center;text-align:center}@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)}to{transform:scale(1)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-ui-kit/ant",
-  "version": "1.7.4",
+  "version": "1.8.2",
   "description": "Vue3 UI Kit based on Ant Design",
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -39,8 +39,8 @@
     "email": "adoin@qq.com"
   },
   "dependencies": {
-    "lodash-es": "^4.17.21",
-    "uuid": "^10.0.0"
+    "uuid": "^10.0.0",
+    "xe-utils": "^3.7.6"
   },
   "peerDependencies": {
     "@ant-design/icons-vue": ">=7.0.0",
@@ -55,7 +55,6 @@
     "@ant-design/icons-vue": ">=7.0.0",
     "@commitlint/cli": "^19.4.1",
     "@commitlint/config-conventional": "^19.4.1",
-    "@types/lodash-es": "^4.17.12",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-vue": "^5.1.2",
     "@vitejs/plugin-vue-jsx": "^4.0.1",

package/src/declarations/antProxy.ts

@@ -54,6 +54,8 @@ export interface PFormItemProps<F = Recordable> {
   title?: string;
   span?: number;
   colon?: boolean;
+  labelCol?: ColProps
+  wrapperCol?: ColProps
   forceRequired?: boolean; // 在页面需要必填标示，但field不需要必填校验时使用
   align?: 'left' | 'right' | 'center';
   col?: ColProps;
@@ -67,6 +69,7 @@ export interface PFormItemProps<F = Recordable> {
       passTrigger?: (cusFields?: string | string[]) => void,
       passDelayTrigger?: (cusFields?: string | string[], time?: number) => void
     ) => any;
+    defaultValue?: any
   };
 }
 
@@ -109,12 +112,13 @@ export interface PFormGroupProps<F = Recordable> {
   tabLabel?: string;
   editAble?: boolean;
   showAdd?: boolean;
+  lazyErrorMark?: boolean;
   forceRender?: boolean;
   /* 是否保持连续编号 */
   keepSerial?: boolean;
   loading?: boolean;
   itemMenus?: Array<GroupMenuItem<F>>;
-  creatItem?: ({ list }: { list?: Partial<F>[] }) => Promise<Partial<F>>;
+  createItem?: ({ list }: { list?: Partial<F>[] }) => Promise<Partial<F>>;
   max?: number;
   menuHandler?: GroupMenuItemHandler<F>;
 }
@@ -199,6 +203,8 @@ export type PGridProps<D = Recordable, F = Recordable> = {
   proxyConfig?: ProxyConfig<D, F>;
   tableConfig?: TableProps<D>;
   scrollMode?: 'outer' | 'inner';
+  // 重置后不自动提交
+  lazyReset?: boolean;
   /**
    * 适应展示区到页面顶部的高度，通常和容器最上的y值有关（正比）
    */
@@ -275,6 +281,7 @@ export interface PGridInstance<D = Recordable, F = Recordable> {
   selectedRecords: D[];
   $table: Recordable;
   $form: Recordable;
+  getFormData: () => Partial<F>;
   setLoadings: (value: boolean) => void;
   setBtnLoading: (code: string, status: boolean) => void;
   resizeTable: () => void;

package/src/index.ts

@@ -6,8 +6,16 @@ import PGroupBlock from '@/components/PGroupBlock.vue';
 import PromisePicker from '@/components/PromisePicker.vue';
 import { addFormatter } from '@/utils/AFormatters';
 import { addRender } from '@/store/renderStore';
+import { setUIKitConfig, getUIKitConfig, resetUIKitConfig, UIKitConfig } from '@/utils/config';
 import * as utils from '@/utils/core';
 
+// 创建setup方法
+function setup(config?: Partial<UIKitConfig>) {
+  if (config) {
+    setUIKitConfig(config);
+  }
+}
+
 export default {
   install(app: App) {
     app.component('PForm', PForm);
@@ -19,7 +27,15 @@ export default {
   },
   addFormatter,
   addRender,
+  setup,
 };
 
 export * from '#/antProxy';
 export * from '@/utils/core';
+export { 
+  setup, 
+  setUIKitConfig, 
+  getUIKitConfig, 
+  resetUIKitConfig,
+  type UIKitConfig 
+};

package/src/packages/components/PForm.vue

@@ -1,24 +1,28 @@
 <script generic="F = Recordable" lang="ts" name="PForm" setup>
   import { PFormItemProps, PFormProps } from '#/antProxy';
-  import { computed, onMounted, ref, toRefs, watch } from 'vue';
-  import { debounce, omit, isFunction } from 'lodash-es';
+  import { computed, ref, toRefs } from 'vue';
+  import { omit } from 'xe-utils';
   import { v4 as uuid_v4 } from 'uuid';
-  import RenderAntItem from '@/components/RenderAntItem';
-  import RenderItemSlots from '@/components/RenderItemSlots';
-  import { isGoodValue, valued } from '@/utils/is';
+  import { isGoodValue } from '@/utils/is';
   import { eachTree } from '@/utils/treeHelper';
-  import { defaultItemResponsive } from '@/utils/core';
+  import { getFormDefaults } from '@/utils/config';
+  import PFormCol from '@/components/PFormCol.vue';
   import {
     Form as AForm,
     Row as ARow,
-    Col as ACol,
-    FormItem as AFormItem,
-    Tooltip as ATooltip,
   } from 'ant-design-vue';
-  import { InfoCircleOutlined } from '@ant-design/icons-vue';
 
   const props = defineProps<PFormProps<F> & { data: F }>();
   const emit = defineEmits(['apply', 'reset']);
+  
+  // 应用默认值
+  const formDefaults = getFormDefaults();
+  const propsWithDefaults = computed(() => ({
+    ...props,
+    labelCol: props.labelCol ?? formDefaults.labelCol ?? { span: 6 },
+    wrapperCol: props.wrapperCol ?? formDefaults.wrapperCol ?? { span: 16 },
+  }));
+  
   const { items, data: formData } = toRefs(props);
 
   function handleSubmit() {
@@ -30,8 +34,6 @@
   const resetForm = () => {
     renderFormKey.value = uuid_v4();
   };
-  const debounceResetForm = debounce(resetForm, 100);
-  watch(() => items.value, debounceResetForm, { deep: true });
   const resetFormData = () => {
     if (props.customReset) {
       props.customReset();
@@ -45,15 +47,24 @@
             obj[item.field] = undefined;
           }
         }
+        else if (item.field && item.slots) {
+          if (isGoodValue(item.slots.defaultValue)) {
+            obj[item.field] = item.slots.defaultValue
+          }
+          else {
+            obj[item.field] = undefined;
+          }
+        }
       });
       Object.assign(formData.value, obj);
     }
+    emit('reset');
   };
   // omit({labelCol:defaultLabelCol,...props},['items','data','model'])
   const fc = computed(() => ({
-    ...omit(props, ['items', 'data', 'model', 'labelCol', 'wrapperCol']),
-    labelCol: props.labelCol ?? { span: 6 },
-    wrapperCol: props.wrapperCol ?? { span: 16 },
+    ...omit(propsWithDefaults.value, ['items', 'data', 'model', 'labelCol', 'wrapperCol']),
+    labelCol: propsWithDefaults.value.labelCol,
+    wrapperCol: propsWithDefaults.value.wrapperCol,
   }));
   const validateField = (fields?: string | string[]) => {
     if (fields) {
@@ -63,19 +74,11 @@
   const handleTrigger = (cusFields?: string | string[]) => {
     validateField(cusFields);
   };
-  const handleDelayTrigger = (cusFields?: string | string[], time?: number) => {
-    const delayTime = time ?? 222;
-    setTimeout(() => {
-      validateField(cusFields);
-    }, delayTime);
-  };
+
   defineExpose({
     reset: resetForm,
     $form: computed(() => formEl.value),
   });
-  onMounted(() => {
-    resetForm();
-  });
 </script>
 <template>
   <div
@@ -84,68 +87,14 @@
   >
     <a-form :key="renderFormKey" ref="formEl" :model="formData" v-bind="fc" @submit="handleSubmit">
       <a-row :gutter="[6, 12]">
-        <a-col
+        <p-form-col
           v-for="(item, idx) in items"
-          :key="'_col_' + idx"
-          v-bind="item.col ?? (item.span ? { span: item.span } : defaultItemResponsive)"
-        >
-          <a-form-item
-            :key="'_item_' + idx"
-            :label="item.title"
-            :name="item.field"
-            :wrapper-col="item.wrapperCol ?? (item.title ? undefined : { span: 24 })"
-            colon
-            :class="`p-content-align-${item.align ?? 'left'} ${item.forceRequired ? 'p-required' : ''}`"
-            v-bind="
-              omit(item, [
-                'field',
-                'title',
-                'span',
-                'col',
-                'wrapperCol',
-                'itemRender',
-                'forceRequired',
-                'tooltip',
-              ])
-            "
-          >
-            <template v-if="item.slots?.title" #label>
-              <component :is="item.slots.title" />
-            </template>
-            <render-item-slots
-              v-if="item.slots?.default"
-              :form-data="formData"
-              :item="item"
-              :key="'_sl_' + (item.field ?? '_') + '_' + idx"
-              :pass-trigger="handleTrigger"
-              :pass-delay-trigger="handleDelayTrigger"
-            />
-            <render-ant-item
-              v-else-if="item.itemRender?.name"
-              :key="'_re_' + (item.field ?? '_') + '_' + idx"
-              :default-handler="{ reset: resetFormData }"
-              :item-render="item.itemRender"
-              @trigger="handleTrigger"
-              @delay-trigger="handleDelayTrigger"
-              :render-form-params="{ data: formData, field: item.field }"
-            />
-            <span v-else></span>
-            <template #tooltip v-if="item.tooltipConfig">
-              <a-tooltip
-                v-if="isFunction(item.tooltipConfig.title)"
-                v-bind="omit(item.tooltipConfig, ['title'])"
-              >
-                <InfoCircleOutlined class="cursor-pointer py-4x px-2x" />
-                <template #title>
-                  <div v-html="item.tooltipConfig.title()"></div>
-                </template>
-              </a-tooltip>
-              <a-tooltip v-else v-bind="item.tooltipConfig">
-                <InfoCircleOutlined class="cursor-pointer py-4x px-2x" />
-              </a-tooltip>
-            </template>
-          </a-form-item>
-        </a-col>
+          :key="`_col_${idx}`"
+          :form-data="formData"
+          :item="item"
+          @reset="resetFormData"
+          @trigger="handleTrigger"
+        />
       </a-row>
     </a-form>
   </div>

package/src/packages/components/PFormCol.vue

@@ -0,0 +1,97 @@
+<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'
+
+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 })
+</script>
+
+<template>
+  <a-col
+    :key="`_col_${renderFormKey}`"
+    v-bind="item.col ?? (item.span ? { span: item.span } : defaultItemResponsive)"
+  >
+    <a-form-item
+      :key="`_item_${renderFormKey}`"
+      :class="[
+        `p-content-align-${item.align ?? 'left'} ${item.forceRequired ? 'p-required' : ''}`,
+        { 'p-error-hang-out': hangOut },
+      ]"
+      colon
+      :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'])"
+    >
+      <template v-if="item.slots?.title" #label>
+        <component :is="item.slots.title" />
+      </template>
+      <render-item-slots
+        v-if="item.slots?.default"
+        :key="`_sl_${item.field ?? '_'}_${renderFormKey}`"
+        :form-data="formData"
+        :item="item"
+        :pass-delay-trigger="handleDelayTrigger"
+        :pass-trigger="handleTrigger"
+      />
+      <render-ant-item
+        v-else-if="item.itemRender?.name"
+        :key="`_re_${item.field ?? '_'}_${renderFormKey}`"
+        :default-handler="{ reset: resetFormData }"
+        :item-render="item.itemRender"
+        :render-form-params="{ data: formData as Recordable, field: item.field }"
+        @delay-trigger="handleDelayTrigger"
+        @trigger="handleTrigger"
+      />
+      <span v-else />
+      <template v-if="item.tooltipConfig" #tooltip>
+        <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()" />
+          </template>
+        </a-tooltip>
+        <a-tooltip v-else v-bind="item.tooltipConfig">
+          <info-circle-outlined class="cursor-pointer py-4 px-2" />
+        </a-tooltip>
+      </template>
+    </a-form-item>
+  </a-col>
+</template>