@vue-ui-kit/ant 1.1.1 → 1.2.0

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

@@ -10,6 +10,7 @@ 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[]>;
     }>): void;
     attrs: any;
     slots: ReturnType<() => {

package/dist/packages/store/renderStore.d.ts

@@ -29,6 +29,9 @@ declare const _default: {
             renderItemContent({ props, options }: RenderOptions, { data, field }: RenderFormParams): import("vue/jsx-runtime").JSX.Element | null;
             renderDefault({ props, options }: RenderOptions, { row, field }: RenderTableParams): import("vue/jsx-runtime").JSX.Element | null;
         };
+        $autoComplete: {
+            renderItemContent({ props, events }: RenderOptions, { data, field }: RenderFormParams): import("vue/jsx-runtime").JSX.Element | null;
+        };
         $switch: {
             renderItemContent({ props, events }: RenderOptions, { data, field }: RenderFormParams): import("vue/jsx-runtime").JSX.Element | null;
         };

package/package.json

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

package/src/declarations/antProxy.ts

@@ -46,6 +46,7 @@ export interface PFormItemProps<F = Recordable> {
   field?: string;
   title?: string;
   span?: number;
+  colon?: boolean
   align?: 'left' | 'right' | 'center';
   col?: ColProps;
   rule?: Rule[];
@@ -257,7 +258,12 @@ export interface PromisePickerInstance<D = Recordable> {
   pick: () => Promise<{ row: D; field?: string }>;
 }
 
+export interface PFormBlockInstance {
+  $form: Recordable
+}
+
 export interface PFormGroupInstance<F = Recordable> {
   activeKey: number;
   setActiveKey: (activeKey: number) => void;
+  validateAll: () => Promise<void>;
 }

package/src/packages/components/PForm.vue

@@ -1,103 +1,104 @@
 <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 } from 'lodash-es';
-  import { v4 as uuid_v4 } from 'uuid';
-  import RenderAntItem from '@/components/RenderAntItem';
-  import RenderItemSlots from '@/components/RenderItemSlots';
-  import { valued } from '@/utils/is';
-  import { eachTree } from '@/utils/treeHelper';
-  import { defaultItemResponsive } from '@/utils/core';
-  import { Form as AForm, Row as ARow, Col as ACol, FormItem as AFormItem } from 'ant-design-vue';
+import { PFormItemProps, PFormProps } from '#/antProxy'
+import { computed, onMounted, ref, toRefs, watch } from 'vue'
+import { debounce, omit } from 'lodash-es'
+import { v4 as uuid_v4 } from 'uuid'
+import RenderAntItem from '@/components/RenderAntItem'
+import RenderItemSlots from '@/components/RenderItemSlots'
+import { valued } from '@/utils/is'
+import { eachTree } from '@/utils/treeHelper'
+import { defaultItemResponsive } from '@/utils/core'
+import { Form as AForm, Row as ARow, Col as ACol, FormItem as AFormItem } from 'ant-design-vue'
 
-  const props = defineProps<PFormProps<F> & { data: F }>();
-  const emit = defineEmits(['apply', 'reset']);
-  const { items, data: formData } = toRefs(props);
+const props = defineProps<PFormProps<F> & { data: F }>()
+const emit = defineEmits(['apply', 'reset'])
+const { items, data: formData } = toRefs(props)
 
-  function handleSubmit() {
-    emit('apply', formData.value);
-  }
+function handleSubmit () {
+  emit('apply', formData.value)
+}
 
-  const formEl = ref();
-  const renderFormKey = ref(uuid_v4());
-  const resetForm = () => {
-    renderFormKey.value = uuid_v4();
-  };
-  const debounceResetForm = debounce(resetForm, 100);
-  watch(() => items.value, debounceResetForm, { deep: true });
-  const resetFormData = () => {
-    if (props.customReset) {
-      props.customReset();
-    } else {
-      const obj: Partial<F> = {};
-      eachTree(items.value, (item) => {
-        if (item.field && item.itemRender) {
-          if (valued(item.itemRender.defaultValue)) {
-            obj[item.field] = item.itemRender.defaultValue;
-          } else {
-            obj[item.field] = undefined;
-          }
+const formEl = ref()
+const renderFormKey = ref(uuid_v4())
+const resetForm = () => {
+  renderFormKey.value = uuid_v4()
+}
+const debounceResetForm = debounce(resetForm, 100)
+watch(() => items.value, debounceResetForm, { deep: true })
+const resetFormData = () => {
+  if (props.customReset) {
+    props.customReset()
+  } else {
+    const obj: Partial<F> = {}
+    eachTree(items.value, (item) => {
+      if (item.field && item.itemRender) {
+        if (valued(item.itemRender.defaultValue)) {
+          obj[item.field] = item.itemRender.defaultValue
+        } else {
+          obj[item.field] = undefined
         }
-      });
-      Object.assign(formData.value, obj);
-    }
-  };
-  // 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 },
-  }));
-  const validateField = (fields?: string | string[]) => {
-    if (fields) {
-      formEl.value?.validateFields(fields);
-    }
-  };
-  const handleTrigger = (cusFields?: string | string[]) => {
-    validateField(cusFields);
-  };
-  defineExpose({
-    reset: resetForm,
-    $form: computed(() => formEl.value),
-  });
-  onMounted(() => {
-    resetForm();
-  });
+      }
+    })
+    Object.assign(formData.value, obj)
+  }
+}
+// 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 },
+}))
+const validateField = (fields?: string | string[]) => {
+  if (fields) {
+    formEl.value?.validateFields(fields)
+  }
+}
+const handleTrigger = (cusFields?: string | string[]) => {
+  validateField(cusFields)
+}
+defineExpose({
+  reset: resetForm,
+  $form: computed(() => formEl.value),
+})
+onMounted(() => {
+  resetForm()
+})
 </script>
 <template>
   <div
-    v-if="items.some((s: PFormItemProps<F>) => s.field && s.itemRender)"
-    class="p-pane p-wrapper"
+      v-if="items.some((s: PFormItemProps<F>) => s.field && s.itemRender)"
+      class="p-pane p-wrapper"
   >
     <a-form :key="renderFormKey" ref="formEl" :model="formData" v-bind="fc" @submit="handleSubmit">
       <a-row :gutter="[6, 12]">
         <a-col
-          v-for="(item, idx) in items"
-          :key="'_col_' + idx"
-          v-bind="item.col ?? (item.span ? { span: item.span } : defaultItemResponsive)"
+            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'}`"
-            v-bind="omit(item, ['field', 'title', 'span', 'col', 'wrapperCol', 'itemRender'])"
+              :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'}`"
+              v-bind="omit(item, ['field', 'title', 'span', 'col', 'wrapperCol', 'itemRender'])"
           >
             <render-item-slots
-              v-if="item.slots?.default"
-              :form-data="formData"
-              :item="item"
-              :pass-trigger="handleTrigger"
+                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_' + idx"
-              :default-handler="{ reset: resetFormData }"
-              :item-render="item.itemRender"
-              @trigger="handleTrigger"
-              :render-form-params="{ data: formData, field: item.field }"
+                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>
           </a-form-item>

package/src/packages/components/PFormGroup.vue

@@ -1,55 +1,61 @@
 <script lang="ts" generic="F = Recordable" setup name="PFormGroup">
-  import { computed, PropType, ref } from 'vue';
-  import { PFormGroupProps } from '#/antProxy';
-  import { MoreOutlined } from '@ant-design/icons-vue';
-  import { cloneDeep, toString, isFunction, omit } from 'lodash-es';
-  import PGroupBlock from '@/components/PGroupBlock.vue';
-  import {
-    Card as ACard,
-    Tabs as ATabs,
-    TabPane as ATabPane,
-    Button as AButton,
-    Dropdown as ADropdown,
-    Menu as AMenu,
-    MenuItem as AMenuItem,
-  } from 'ant-design-vue';
+import { computed, PropType, ref } from 'vue'
+import { PFormGroupProps, PFormBlockInstance } from '#/antProxy'
+import { MoreOutlined } from '@ant-design/icons-vue'
+import { cloneDeep, toString, isFunction, omit } from 'lodash-es'
+import PGroupBlock from '@/components/PGroupBlock.vue'
+import {
+  Card as ACard,
+  Tabs as ATabs,
+  TabPane as ATabPane,
+  Button as AButton,
+  Dropdown as ADropdown,
+  Menu as AMenu,
+  MenuItem as AMenuItem,
+} from 'ant-design-vue'
 
-  const props = defineProps<PFormGroupProps<F>>();
-  const model = defineModel({
-    type: Array as PropType<Partial<F>[]>,
-    default: () => [],
-  });
-  const activeKey = ref(0);
-  const setActiveKey = (key: number) => {
-    activeKey.value = key;
-  };
-  const maxLen = props.max ?? Infinity;
-  const handleAddItem = (idx: number) => {
-    const creator = props.creatItem ?? (() => Promise.resolve({} as Partial<F>));
-    creator({ list: model.value }).then((item) => {
-      model.value = [...model.value, item];
-      activeKey.value = idx;
-    });
-  };
-  const itemMenus = props.itemMenus ?? [{ content: '删除', code: 'delete' }];
-  const handleMenu = (key: string, item: Partial<F>, idx: number) => {
-    if (props.menuHandler && isFunction(props.menuHandler)) {
-      props.menuHandler({ code: key, data: item, index: idx });
-    } else {
-      switch (key) {
-        case 'delete':
-          model.value = model.value.filter((_, i) => i !== idx);
-          break;
-        case 'copy':
-          model.value = [...model.value, cloneDeep(omit(item, ['id']))];
-          break;
-      }
+const props = defineProps<PFormGroupProps<F>>()
+const model = defineModel({
+  type: Array as PropType<Partial<F>[]>,
+  default: () => [],
+})
+const activeKey = ref(0)
+const blockInstance = ref<PFormBlockInstance[]>([])
+const setActiveKey = (key: number) => {
+  activeKey.value = key
+}
+const maxLen = props.max ?? Infinity
+const handleAddItem = (idx: number) => {
+  const creator = props.creatItem ?? (() => Promise.resolve({} as Partial<F>))
+  creator({ list: model.value }).then((item) => {
+    model.value = [...model.value, item]
+    activeKey.value = idx
+  })
+}
+const itemMenus = props.itemMenus ?? [{ content: '删除', code: 'delete' }]
+const handleMenu = (key: string, item: Partial<F>, idx: number) => {
+  if (props.menuHandler && isFunction(props.menuHandler)) {
+    props.menuHandler({ code: key, data: item, index: idx })
+  } else {
+    switch (key) {
+      case 'delete':
+        model.value = model.value.filter((_, i) => i !== idx)
+        break
+      case 'copy':
+        model.value = [...model.value, cloneDeep(omit(item, ['id']))]
+        break
     }
-  };
-  defineExpose({
-    activeKey: computed(() => activeKey.value),
-    setActiveKey,
-  });
+  }
+}
+defineExpose({
+  activeKey: computed(() => activeKey.value),
+  setActiveKey,
+  validateAll: () => {
+    return Promise.all(blockInstance.value.map((block) =>
+        block.$form?.validate() ?? Promise.resolve()
+    ))
+  },
+})
 </script>
 <template>
   <a-card :title="title" size="small">
@@ -57,25 +63,25 @@
       <template #rightExtra>
         <slot name="rightExtra">
           <a-button
-            type="link"
-            @click="handleAddItem(model.length)"
-            v-if="showAdd && model.length < maxLen"
+              type="link"
+              @click="handleAddItem(model.length)"
+              v-if="showAdd && model.length < maxLen"
           >
             + 新增
           </a-button>
         </slot>
       </template>
-      <a-tab-pane v-for="(item, idx) in model" :key="idx" :tab="`${tabLabel} ${idx + 1}`">
+      <a-tab-pane v-for="(item, idx) in model" :key="idx" :tab="`${tabLabel} ${idx + 1}`" force-render>
         <template #closeIcon>
           <a-dropdown v-if="editAble && itemMenus?.length">
-            <MoreOutlined />
+            <MoreOutlined/>
             <template #overlay>
               <a-menu @click="(e) => handleMenu(toString(e.key), item, idx)">
                 <a-menu-item
-                  v-for="menu in itemMenus.filter(
+                    v-for="menu in itemMenus.filter(
                     (f) => f.visibleMethod?.({ data: item, index: idx }) ?? true,
                   )"
-                  :key="menu.code"
+                    :key="menu.code"
                 >
                   <div>{{ menu.content }}</div>
                 </a-menu-item>
@@ -83,7 +89,14 @@
             </template>
           </a-dropdown>
         </template>
-        <p-group-block :key="idx" :source="item" :get-form-setting="getFormSetting" />
+        <!-- @vue-ignore -->
+        <p-group-block :ref="(i:PFormBlockInstance)=>{
+          if(i){
+            blockInstance[idx] = i
+          }else if(blockInstance){
+            blockInstance = blockInstance.filter((_,i)=>i!==idx)
+          }
+        }" :key="idx" :source="item" :get-form-setting="getFormSetting"/>
       </a-tab-pane>
     </a-tabs>
   </a-card>

package/src/packages/components/PGrid.vue

@@ -39,7 +39,7 @@ const loading = reactive({
   table: false,
   form: false,
 })
-const submitOnReset = false
+const submitOnReset = true
 const boxEl = ref<HTMLDivElement>()
 const renderHeight = ref(500)
 const selectedRowKeys = ref<string[] | number[]>([])
@@ -378,13 +378,14 @@ onMounted(() => {
                 >
                   <render-item-slots
                       v-if="item.slots?.default"
+                      :key="'_sl_'+(item.field??'_')+'_'+idx"
                       :form-data="queryFormData"
                       :item="item"
                       :pass-trigger="() => {}"
                   />
                   <render-ant-item
                       v-else-if="item.itemRender?.name"
-                      :key="'_re_' + idx"
+                      :key="'_re_'+(item.field??'_')+'_'+idx"
                       :default-handler="{
                       reset: () => {
                         resetQueryFormData(!submitOnReset);