@vue-ui-kit/ant 1.7.2 → 1.7.4

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

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

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

@@ -44,6 +44,7 @@ declare const _default: <D = Recordable<any>, F = Recordable<any>>(__VLS_props:
             field?: string;
         }>;
         grid: import('vue').Ref<PGridInstance<D, Recordable<any>> | undefined, PGridInstance<D, Recordable<any>> | undefined>;
+        hide: () => void;
     }>): void;
     attrs: any;
     slots: ReturnType<() => {}>;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-ui-kit/ant",
-  "version": "1.7.2",
+  "version": "1.7.4",
   "description": "Vue3 UI Kit based on Ant Design",
   "type": "module",
   "types": "./dist/index.d.ts",

package/src/declarations/antProxy.ts

@@ -65,6 +65,7 @@ export interface PFormItemProps<F = Recordable> {
     default?: (
       { data, field }: ItemFuncArg<F>,
       passTrigger?: (cusFields?: string | string[]) => void,
+      passDelayTrigger?: (cusFields?: string | string[], time?: number) => void
     ) => any;
   };
 }
@@ -108,8 +109,10 @@ export interface PFormGroupProps<F = Recordable> {
   tabLabel?: string;
   editAble?: boolean;
   showAdd?: boolean;
+  forceRender?: boolean;
   /* 是否保持连续编号 */
   keepSerial?: boolean;
+  loading?: boolean;
   itemMenus?: Array<GroupMenuItem<F>>;
   creatItem?: ({ list }: { list?: Partial<F>[] }) => Promise<Partial<F>>;
   max?: number;
@@ -144,7 +147,7 @@ export interface ToolbarButtonProps extends PButtonProps {
 
 export interface ToolbarConfig {
   buttons?: Array<ToolbarButtonProps>;
-  tools?: Array<{ code: string; icon: string; type?: ButtonType; disabled?: boolean }>;
+  tools?: Array<{ code: string; icon: string; type?: ButtonType; disabled?: boolean; size?: 'small' | 'large' | 'middle' }>;
   disabled?: boolean;
 }
 
@@ -240,6 +243,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> {
@@ -279,7 +288,8 @@ export interface PFormInstance {
 export interface PromisePickerInstance<D = Recordable> {
   pick: () => Promise<{ row: D; field?: string }>;
   pickMultiple: () => Promise<D[]>;
-  grid: PGridInstance<D>
+  grid: PGridInstance<D>;
+  hide: () => void;
 }
 
 export interface PFormBlockInstance {

package/src/packages/components/PForm.vue

@@ -63,6 +63,12 @@
   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),
@@ -112,6 +118,7 @@
               :item="item"
               :key="'_sl_' + (item.field ?? '_') + '_' + idx"
               :pass-trigger="handleTrigger"
+              :pass-delay-trigger="handleDelayTrigger"
             />
             <render-ant-item
               v-else-if="item.itemRender?.name"
@@ -119,6 +126,7 @@
               :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>

package/src/packages/components/PFormGroup.vue

@@ -2,6 +2,7 @@
   import { computed, nextTick, PropType, ref, watchEffect } from 'vue';
   import { PFormGroupProps, PFormBlockInstance } from '#/antProxy';
   import { MoreOutlined } from '@ant-design/icons-vue';
+  import { Form } from 'ant-design-vue'
   import { cloneDeep, toString, isFunction, omit, maxBy, debounce } from 'lodash-es';
   import PGroupBlock from '@/components/PGroupBlock.vue';
   import {
@@ -15,7 +16,9 @@
   } from 'ant-design-vue';
   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 props = defineProps<PFormGroupProps<F>>();
   const model = defineModel({
     type: Array as PropType<Partial<F & { __index: number }>[]>,
@@ -44,6 +47,15 @@
     { content: '复制', code: 'copy' },
     { content: '删除', code: 'delete' },
   ];
+  // 实际是否强制渲染
+  const fr = computed(() => {
+    return props.forceRender || model.value.length <= 5
+  })
+  const handleTabChange = () => {
+    nextTick().then(() => {
+      blockInstance.value[activeKey.value]?.$form?.validate()
+    })
+  }
   watchEffect(() => {
     if (!props.keepSerial) {
       const unSortItems = model.value.filter((f) => !valued(f.__index));
@@ -70,6 +82,10 @@
           });
           break;
         case 'copy':
+          if (model.value.length >= maxLen.value) {
+            $warning('已达到最大数量')
+            return
+          }
           model.value = [
             ...model.value,
             cloneDeep({
@@ -93,18 +109,22 @@
     activeKey: computed(() => activeKey.value),
     setActiveKey,
     validateAll: () => {
-      return Promise.all(
-        blockInstance.value.map((block) => block.$form?.validate() ?? Promise.resolve()),
-      );
+      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) => {
-      return blockInstance.value[index]?.$form?.validate()
+    validate: (__index: number) => {
+      const index = model.value.findIndex(f => f.__index === __index)
+      return fr.value
+        ? (blockInstance.value[index]?.$form?.validate() ?? Promise.resolve())
+        : (useForm(model.value[index], props.getFormSetting(model.value[index]).rules)?.validate() ?? Promise.resolve())
     },
   });
 </script>
 <template>
   <a-card :title="title" size="small">
-    <a-tabs type="editable-card" v-model:activeKey="activeKey" hide-add>
+    <a-spin v-if="loading" class="w-full" />
+    <a-tabs v-else type="editable-card" v-model:activeKey="activeKey" hide-add @change="handleTabChange">
       <template #rightExtra>
         <slot name="rightExtra">
           <a-button
@@ -120,7 +140,7 @@
         v-for="(item, idx) in model"
         :key="idx"
         :tab="`${tabLabel} ${keepSerial ? idx + 1 : (item.__index ?? 0) + 1}`"
-        force-render
+        :force-render="fr"
       >
         <template #closeIcon>
           <a-dropdown v-if="editAble && itemMenus?.length">

package/src/packages/components/PGrid.vue

@@ -512,6 +512,7 @@
                     :form-data="queryFormData"
                     :item="item"
                     :pass-trigger="() => {}"
+                    :pass-delay-trigger="() => {}"
                   />
                   <render-ant-item
                     v-else-if="item.itemRender?.name"
@@ -592,7 +593,7 @@
               v-for="(tool, idx) in toolbarConfig.tools"
               :key="idx"
               :type="tool.type"
-              :size="btn.size ?? 'middle'"
+              :size="tool.size ?? 'middle'"
               :disabled="toolbarConfig.disabled || tool.disabled"
               @click="debounceToolToolClick(tool.code)"
               :loading="loading.toolbar || (!!tool.code && codeLoadings[tool.code])"
@@ -603,7 +604,7 @@
         </span>
       </div>
       <div :class="`p-pane flex-1 ${enoughSpacing ? 'h-0' : ''} p-${scrollMode ?? 'inner'}-scroll`">
-        <div v-if="selectConfig?.multiple && selectConfig.showCount" class="w-100p 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/PromisePicker.vue

@@ -78,7 +78,10 @@
         rejectPromise = reject;
         visible.modal = true;
       }),
-  grid: gridEl,
+    grid: gridEl,
+    hide: () => {
+      visible.modal = false;
+    }
   });
 </script>
 <template>

package/src/packages/components/RenderAntItem.tsx

@@ -18,12 +18,16 @@ export default defineComponent(
     const passTrigger = (cusFields?: string | string[]) => {
       emit('trigger', cusFields);
     };
+    const passDelayTrigger = (cusFields?: string | string[], time?: number) => {
+      emit('delayTrigger', cusFields, time);
+    };
     return () => {
       return (
         renderStore.renders[itemRender!.name]?.renderItemContent?.(
           {
             ...itemRender!,
             handleTrigger: passTrigger,
+            handleDelayTrigger: passDelayTrigger,
           },
           renderFormParams.value,
           defaultHandler,
@@ -49,6 +53,6 @@ export default defineComponent(
         required: false,
       },
     },
-    emits: ['trigger'],
+    emits: ['trigger', 'delayTrigger'],
   },
 );

package/src/packages/components/RenderItemSlots.tsx

@@ -6,6 +6,7 @@ export default defineComponent(
     formData: F;
     item: PFormItemProps<F>;
     passTrigger: (cusFields?: string | string[]) => void;
+    passDelayTrigger: (cusFields?: string | string[], time?: number) => void;
   }) => {
     const { formData } = toRefs(props);
     return () => {
@@ -13,12 +14,13 @@ export default defineComponent(
         props.item.slots?.default?.(
           { data: formData.value, field: props.item.field },
           props.passTrigger,
+          props.passDelayTrigger,
         ) ?? null
       );
     };
   },
   {
     name: 'RenderItemSlots',
-    props: ['formData', 'item', 'passTrigger'],
+    props: ['formData', 'item', 'passTrigger', 'passDelayTrigger'],
   },
 );

package/src/packages/store/renderStore.tsx

@@ -34,6 +34,7 @@ interface BtnOptions extends ButtonProps {
   dynamicClassName?: (p: RenderTableParams) => string;
   dropdowns?: BtnOptions[];
   clickEvt?: (p: RenderTableParams) => any;
+  hiddenIf?: (p: RenderTableParams) => boolean;
 }
 
 const antDefaultProps = {
@@ -236,8 +237,8 @@ const renders = {
             events.click?.({ data, field })
             if (props.htmlType === 'reset' && defaultHandler?.reset) {
               if (props.beforeClick && isFunction(props.beforeClick)) {
-                props.beforeClick({ data, field }).then(() => {
-                  defaultHandler.reset({ data, field })
+                props.beforeClick({ data, field }).then((res: void | Recordable) => {
+                  defaultHandler.reset(res ? { data: res, field } : { data, field })
                 })
               }
               else {
@@ -268,8 +269,8 @@ const renders = {
             if (props.htmlType === 'reset' && defaultHandler?.reset) {
               if (props.beforeClick && isFunction(props.beforeClick)) {
                 defaultHandler?.setLoadings?.(true)
-                props.beforeClick({ row, field }).then(() => {
-                  defaultHandler.reset({ row, field })
+                props.beforeClick({ row, field }).then((res: void | Recordable) => {
+                  defaultHandler.reset(res ? { row: res, field } : { row, field })
                 }).finally(() => {
                   defaultHandler?.setLoadings?.(false)
                 })
@@ -281,8 +282,8 @@ const renders = {
             if (props.htmlType === 'pick' && defaultHandler?.pick) {
               if (props.beforeClick && isFunction(props.beforeClick)) {
                 defaultHandler?.setLoadings?.(true)
-                props.beforeClick({ row, field }).then(() => {
-                  defaultHandler.pick({ row, field })
+                props.beforeClick({ row, field }).then((res: void | Recordable) => {
+                  defaultHandler.pick(res ? { row: res, field } : { row, field })
                 }).finally(() => {
                   defaultHandler?.setLoadings?.(false)
                 })
@@ -318,8 +319,8 @@ const renders = {
                     m.events?.click?.({ data, field })
                     if (m.props.htmlType === 'reset' && defaultHandler?.reset) {
                       if (props.beforeClick && isFunction(props.beforeClick)) {
-                        props.beforeClick({ data, field }).then(() => {
-                          defaultHandler.reset({ data, field })
+                        props.beforeClick({ data, field }).then((res: void | Recordable) => {
+                          defaultHandler.reset(res ? { data: res, field } : { data, field })
                         })
                       }
                       else {
@@ -328,8 +329,8 @@ const renders = {
                     }
                     if (m.props.htmlType === 'pick' && defaultHandler?.pick) {
                       if (props.beforeClick && isFunction(props.beforeClick)) {
-                        props.beforeClick({ data, field }).then(() => {
-                          defaultHandler.pick({ data, field })
+                        props.beforeClick({ data, field }).then((res: void | Recordable) => {
+                          defaultHandler.pick(res ? { data: res, field } : { data, field })
                         })
                       }
                       else {
@@ -369,8 +370,8 @@ const renders = {
                   if (m.props.htmlType === 'reset' && defaultHandler?.reset) {
                     if (props.beforeClick && isFunction(props.beforeClick)) {
                       defaultHandler?.setLoadings?.(true)
-                      props.beforeClick({ row, field }).then(() => {
-                        defaultHandler.reset({ row, field })
+                      props.beforeClick({ row, field }).then((res: void | Recordable) => {
+                        defaultHandler.reset(res ? { row: res, field } : { row, field })
                       }).finally(() => {
                         defaultHandler?.setLoadings?.(false)
                       })
@@ -382,8 +383,8 @@ const renders = {
                   if (m.props.htmlType === 'pick' && defaultHandler?.pick) {
                     if (props.beforeClick && isFunction(props.beforeClick)) {
                       defaultHandler?.setLoadings?.(true)
-                      props.beforeClick({ row, field }).then(() => {
-                        defaultHandler.pick({ row, field })
+                      props.beforeClick({ row, field }).then((res: void | Recordable) => {
+                        defaultHandler.pick(res ? { row: res, field } : { row, field })
                       }).finally(() => {
                         defaultHandler?.setLoadings?.(false)
                       })