@vue-ui-kit/ant 1.7.3 → 1.8.0

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

@@ -0,0 +1,31 @@
+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;
+        readonly onDelayTrigger?: ((cusFields?: string | string[] | undefined, time?: number | undefined) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<{}> & Readonly<{
+        onTrigger?: ((cusFields?: string | string[] | undefined) => any) | undefined;
+        onReset?: (() => any) | undefined;
+        onDelayTrigger?: ((cusFields?: string | string[] | undefined, time?: number | undefined) => any) | undefined;
+    }>, never>, "onReset" | "onTrigger" | "onDelayTrigger"> & {
+        item: PFormItemProps<T>;
+        formData: T;
+    }> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: ReturnType<() => {}>;
+    emit: {
+        (e: "delayTrigger", cusFields?: string | string[], time?: number): void;
+        (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/components/RenderAntItem.d.ts

@@ -5,7 +5,7 @@ declare const _default: import('vue').DefineSetupFnComponent<{
     defaultHandler: {
         [key: string]: (...args: any[]) => any;
     };
-}, "trigger"[], {}, {
+}, ("trigger" | "delayTrigger")[], {}, {
     itemRender: ItemRender;
     renderFormParams: RenderFormParams<Recordable<any>>;
     defaultHandler: {
@@ -13,5 +13,6 @@ declare const _default: import('vue').DefineSetupFnComponent<{
     };
 } & {
     onTrigger?: ((...args: any[]) => any) | undefined;
+    onDelayTrigger?: ((...args: any[]) => any) | undefined;
 }, import('vue').PublicProps>;
 export default _default;

package/dist/packages/components/RenderItemSlots.d.ts

@@ -2,9 +2,11 @@ declare const _default: import('vue').DefineSetupFnComponent<{
     formData: any;
     item: any;
     passTrigger: any;
+    passDelayTrigger: any;
 }, {}, {}, {
     formData: any;
     item: any;
     passTrigger: any;
+    passDelayTrigger: any;
 } & {}, import('vue').PublicProps>;
 export default _default;

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-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-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.3",
+  "version": "1.8.0",
   "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;
@@ -65,7 +67,9 @@ export interface PFormItemProps<F = Recordable> {
     default?: (
       { data, field }: ItemFuncArg<F>,
       passTrigger?: (cusFields?: string | string[]) => void,
+      passDelayTrigger?: (cusFields?: string | string[], time?: number) => void
     ) => any;
+    defaultValue?: any
   };
 }
 
@@ -108,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>;
 }
@@ -242,6 +247,12 @@ export interface RenderOptions {
    * @param cusFields field或者field数组
    */
   handleTrigger?: (cusFields?: string | string[]) => void;
+  /**
+   * 延迟校验触发器
+   * @param cusFields field或者field数组
+   * @param time 延迟时间
+   */
+  handleDelayTrigger?: (cusFields?: string | string[], time?: number) => void;
 }
 
 export interface RenderFormParams<F = Recordable> {
@@ -268,6 +279,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/packages/components/PForm.vue

@@ -1,21 +1,15 @@
 <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 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']);
@@ -30,8 +24,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,9 +37,18 @@
             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(() => ({
@@ -63,13 +64,16 @@
   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
@@ -78,66 +82,15 @@
   >
     <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"
-            />
-            <render-ant-item
-              v-else-if="item.itemRender?.name"
-              :key="'_re_' + (item.field ?? '_') + '_' + idx"
-              :default-handler="{ reset: resetFormData }"
-              :item-render="item.itemRender"
-              @trigger="handleTrigger"
-              :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"
+          @delay-trigger="handleDelayTrigger"
+          @reset="resetFormData"
+          @trigger="handleTrigger"
+        />
       </a-row>
     </a-form>
   </div>

package/src/packages/components/PFormCol.vue

@@ -0,0 +1,89 @@
+<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: 'delayTrigger', cusFields?: string | string[], time?: number): void
+  (e: 'trigger', cusFields?: string | string[]): void
+  (e: 'reset'): void
+}>()
+const renderFormKey = ref(uuid_v4())
+const handleDelayTrigger = (cusFields?: string | string[], time?: number) => {
+  emit('delayTrigger', cusFields, time)
+}
+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' : ''}`"
+      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>

package/src/packages/components/PFormGroup.vue

@@ -1,9 +1,10 @@
 <script lang="ts" generic="F = Recordable" setup name="PFormGroup">
-  import { computed, nextTick, PropType, ref, watchEffect } from 'vue';
+  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 { cloneDeep, toString, isFunction, omit, maxBy, debounce } from 'lodash-es';
+  import { clone, toString, isFunction, omit, max, debounce } from 'xe-utils';
   import PGroupBlock from '@/components/PGroupBlock.vue';
   import {
     Card as ACard,
@@ -19,25 +20,28 @@
   import { $warning } from '@/hooks/useMessage';
   
   const useForm = Form.useForm
+  const tabsRef = ref<InstanceType<typeof Tabs>>()
   const props = defineProps<PFormGroupProps<F>>();
+  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 blockInstance = ref<PFormBlockInstance[]>([]);
   const setActiveKey = (key: number) => {
     activeKey.value = key;
   };
   const maxLen = computed(() => props.max ?? Infinity);
   const handleAddItem = (idx: number) => {
-    const creator = props.creatItem ?? (() => Promise.resolve({} as Partial<F>));
+    const creator = props.createItem ?? (() => Promise.resolve({} as Partial<F>));
     creator({ list: model.value }).then((item) => {
       model.value = [
         ...model.value,
         {
           ...item,
-          __index: (maxBy(model.value, (m) => m.__index ?? -1)?.__index ?? -1) + 1,
+          __index: (max(model.value, (m) => m.__index ?? -1)?.__index ?? -1) + 1,
         } as Partial<F & { __index: number }>,
       ];
       activeKey.value = idx;
@@ -47,26 +51,34 @@
     { content: '复制', code: 'copy' },
     { content: '删除', code: 'delete' },
   ];
+  const getPopupContainer = () => rootRef.value?.$el ?? document.body
   // 实际是否强制渲染
   const fr = computed(() => {
     return props.forceRender || model.value.length <= 5
   })
+  const handleBlockFocus = (idx: number) => {
+    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)
+    }
+  }
   const handleTabChange = () => {
     nextTick().then(() => {
+      handleBlockFocus(activeKey.value)
       blockInstance.value[activeKey.value]?.$form?.validate()
     })
   }
-  watchEffect(() => {
-    if (!props.keepSerial) {
-      const unSortItems = model.value.filter((f) => !valued(f.__index));
-      if (unSortItems.length > 0) {
-        unSortItems.forEach((item) => {
-          // @ts-ignore
-          item.__index = (maxBy(model.value, (m) => m.__index ?? -1)?.__index ?? -1) + 1;
-        });
-      }
+  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 });
@@ -88,9 +100,9 @@
           }
           model.value = [
             ...model.value,
-            cloneDeep({
+            clone({
               ...omit(item, ['id', '__index']),
-              __index: (maxBy(model.value, (m) => m.__index ?? -1)?.__index ?? -1) + 1,
+              __index: (max(model.value, (m) => m.__index ?? -1)?.__index ?? -1) + 1,
             }),
           ] as Partial<F & { __index: number }>[];
           break;
@@ -105,26 +117,74 @@
       activeKey.value = model.value.length - 1;
     }
   });
+
+  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')
+      }
+    })
+  }
+})
   defineExpose({
     activeKey: computed(() => activeKey.value),
     setActiveKey,
     validateAll: () => {
-      return Promise.all(blockInstance.value.map((block, idx) =>
-        fr.value ? (block.$form?.validate() ?? Promise.resolve()) : (useForm(model.value[idx], props.getFormSetting(model.value[idx]).rules)?.validate() ?? Promise.resolve()),
-      ))
-    },
-    validate: (__index: number) => {
-      const index = model.value.findIndex(f => f.__index === __index)
-      return fr.value
+    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) => {
+    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())
-    },
+        : (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)) {
+        error_indexes.value = [...error_indexes.value, __index]
+      }
+      return Promise.reject(e)
+    }
+  },
   });
 </script>
 <template>
-  <a-card :title="title" size="small">
+  <a-card ref="rootRef" :title="title" size="small">
     <a-spin v-if="loading" class="w-full" />
-    <a-tabs v-else 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
@@ -143,7 +203,7 @@
         :force-render="fr"
       >
         <template #closeIcon>
-          <a-dropdown v-if="editAble && itemMenus?.length">
+          <a-dropdown v-if="editAble && itemMenus?.length" :get-popup-container="getPopupContainer">
             <MoreOutlined />
             <template #overlay>
               <a-menu @click="(e) => debounceHandleMenu(e, item, idx)">
@@ -173,6 +233,8 @@
           :key="idx"
           :source="item"
           :get-form-setting="getFormSetting"
+          @focus.capture="debounceHandleBlockFocus(idx)"
+          @click.capture="debounceHandleBlockFocus(idx)"
         />
       </a-tab-pane>
     </a-tabs>