@vue-ui-kit/ant 1.6.0 → 1.7.1

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

@@ -5,11 +5,13 @@ declare const _default: <D = Recordable<any>, F = Recordable<any>>(__VLS_props:
         title: string;
         width: string | number;
         bodyStyle: Record<string, any>;
+        multipleAllowEmpty: boolean;
     }> & Omit<{
         readonly title: string;
         readonly width: string | number;
         readonly bodyStyle: Record<string, any>;
         readonly gridSetting: PGridProps<D, F>;
+        readonly multipleAllowEmpty: boolean;
     } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{
         gridSetting: {
             type: PropType<PGridProps<D, F>>;
@@ -23,15 +25,23 @@ declare const _default: <D = Recordable<any>, F = Recordable<any>>(__VLS_props:
             type: PropType<string | number>;
             default: string;
         };
+        multipleAllowEmpty: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         bodyStyle: {
             type: ObjectConstructor;
             default: () => {};
         };
-    }>> & Readonly<{}>, "title" | "width" | "bodyStyle">, "gridSetting" | ("title" | "width" | "bodyStyle")> & {}> & import('vue').PublicProps;
+    }>> & Readonly<{}>, "title" | "width" | "bodyStyle" | "multipleAllowEmpty">, "gridSetting" | ("title" | "width" | "bodyStyle" | "multipleAllowEmpty")> & {}> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{
         pick: () => Promise<{
             row: D;
             field?: string;
+        } | D[]>;
+        pickMultiple: () => Promise<D[] | {
+            row: D;
+            field?: string;
         }>;
     }>): void;
     attrs: any;

package/package.json

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

package/src/declarations/antProxy.ts

@@ -4,6 +4,7 @@ import { ColProps } from 'ant-design-vue/lib/grid/Col';
 import { FormProps } from 'ant-design-vue/lib/form/Form';
 import { TableColumnType, TableProps, TooltipProps } from 'ant-design-vue';
 import { ButtonType } from 'ant-design-vue/lib/button/buttonTypes';
+import { ComputedRef } from 'vue';
 
 export interface CellFuncArg<D = Recordable> {
   row: D;
@@ -89,7 +90,7 @@ export type GroupMenuItemHandler<F = Recordable> = ({
 }: {
   index: number;
   code: string;
-  data: Partial<F>;
+  data: Partial<F & { __index: number }>;
 }) => void;
 
 export interface GroupMenuItem<F = Recordable> {
@@ -105,6 +106,8 @@ export interface PFormGroupProps<F = Recordable> {
   tabLabel?: string;
   editAble?: boolean;
   showAdd?: boolean;
+  /* 是否保持连续编号 */
+  keepSerial?: boolean;
   itemMenus?: Array<GroupMenuItem<F>>;
   creatItem?: ({ list }: { list?: Partial<F>[] }) => Promise<Partial<F>>;
   max?: number;
@@ -256,6 +259,7 @@ export interface PGridInstance<D = Recordable, F = Recordable> {
     passQuery: (query: Partial<F>, lazy?: boolean) => Promise<void | D[]>;
   };
   selectedRowKeys: string[] | number[];
+  selectedRecords: D[];
   $table: Recordable;
   $form: Recordable;
   setLoadings: (value: boolean) => void;
@@ -270,6 +274,7 @@ export interface PFormInstance {
 
 export interface PromisePickerInstance<D = Recordable> {
   pick: () => Promise<{ row: D; field?: string }>;
+  pickMultiple: () => Promise<D[]>;
 }
 
 export interface PFormBlockInstance {

package/src/packages/components/PFormGroup.vue

@@ -1,8 +1,8 @@
 <script lang="ts" generic="F = Recordable" setup name="PFormGroup">
-  import { computed, nextTick, PropType, ref } from 'vue';
+  import { computed, nextTick, PropType, ref, watchEffect } from 'vue';
   import { PFormGroupProps, PFormBlockInstance } from '#/antProxy';
   import { MoreOutlined } from '@ant-design/icons-vue';
-  import { cloneDeep, toString, isFunction, omit } from 'lodash-es';
+  import { cloneDeep, toString, isFunction, omit, maxBy, debounce } from 'lodash-es';
   import PGroupBlock from '@/components/PGroupBlock.vue';
   import {
     Card as ACard,
@@ -13,10 +13,12 @@
     Menu as AMenu,
     MenuItem as AMenuItem,
   } from 'ant-design-vue';
+  import { valued } from '@/utils/is';
+  import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 
   const props = defineProps<PFormGroupProps<F>>();
   const model = defineModel({
-    type: Array as PropType<Partial<F>[]>,
+    type: Array as PropType<Partial<F & { __index: number }>[]>,
     default: () => [],
   });
   const activeKey = ref(0);
@@ -24,18 +26,38 @@
   const setActiveKey = (key: number) => {
     activeKey.value = key;
   };
-  const maxLen = props.max ?? Infinity;
+  const maxLen = computed(() => 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];
+      model.value = [
+        ...model.value,
+        {
+          ...item,
+          __index: (maxBy(model.value, (m) => m.__index ?? -1)?.__index ?? -1) + 1,
+        } as Partial<F & { __index: number }>,
+      ];
       activeKey.value = idx;
     });
   };
-  const itemMenus = props.itemMenus ?? [{ content: '删除', code: 'delete' }];
-  const handleMenu = (key: string, item: Partial<F>, idx: number) => {
+  const itemMenus = props.itemMenus ?? [
+    { content: '复制', code: 'copy' },
+    { content: '删除', code: 'delete' },
+  ];
+  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;
+        });
+      }
+    }
+  });
+  const handleMenu = ({ key }: MenuInfo, item: Partial<F & { __index: number }>, idx: number) => {
     if (props.menuHandler && isFunction(props.menuHandler)) {
-      props.menuHandler({ code: key, data: item, index: idx });
+      props.menuHandler({ code: toString(key), data: item, index: idx });
     } else {
       switch (key) {
         case 'delete':
@@ -48,11 +70,25 @@
           });
           break;
         case 'copy':
-          model.value = [...model.value, cloneDeep(omit(item, ['id']))];
+          model.value = [
+            ...model.value,
+            cloneDeep({
+              ...omit(item, ['id', '__index']),
+              __index: (maxBy(model.value, (m) => m.__index ?? -1)?.__index ?? -1) + 1,
+            }),
+          ] as Partial<F & { __index: number }>[];
           break;
       }
     }
   };
+  const debounceHandleMenu = debounce(handleMenu, 100);
+  watchEffect(() => {
+    if (model.value.length === 0) {
+      activeKey.value = 0;
+    } else if (activeKey.value >= model.value.length) {
+      activeKey.value = model.value.length - 1;
+    }
+  });
   defineExpose({
     activeKey: computed(() => activeKey.value),
     setActiveKey,
@@ -69,9 +105,9 @@
       <template #rightExtra>
         <slot name="rightExtra">
           <a-button
+            v-if="showAdd && model.length < maxLen"
             type="link"
             @click="handleAddItem(model.length)"
-            v-if="showAdd && model.length < maxLen"
           >
             + 新增
           </a-button>
@@ -80,14 +116,14 @@
       <a-tab-pane
         v-for="(item, idx) in model"
         :key="idx"
-        :tab="`${tabLabel} ${idx + 1}`"
+        :tab="`${tabLabel} ${keepSerial ? idx + 1 : (item.__index ?? 0) + 1}`"
         force-render
       >
         <template #closeIcon>
           <a-dropdown v-if="editAble && itemMenus?.length">
             <MoreOutlined />
             <template #overlay>
-              <a-menu @click="(e) => handleMenu(toString(e.key), item, idx)">
+              <a-menu @click="(e) => debounceHandleMenu(e, item, idx)">
                 <a-menu-item
                   v-for="menu in itemMenus.filter(
                     (f) => f.visibleMethod?.({ data: item, index: idx }) ?? true,

package/src/packages/components/PGrid.vue

@@ -393,7 +393,10 @@
   const resizeTable = () => {
     const pNode = boxEl.value?.parentElement;
     const ph = pNode ? window.getComputedStyle(pNode).height : '0px';
-    const formHeight = pFormWrapper.value
+    const formOriginHeight = pFormWrapper.value
+      ? window.getComputedStyle(pFormWrapper.value).height
+      : '0px';
+    const formHeight = formOriginHeight.includes('px')
       ? toNumber(window.getComputedStyle(pFormWrapper.value).height.replace('px', ''))
       : 0;
 
@@ -424,13 +427,32 @@
     },
     resizeTable,
   });
+
+  let observer: MutationObserver;
   onMounted(() => {
     resizeTable();
     window.addEventListener('resize', resizeTable);
+    // 还需要在组件根节点由不可见转为可见时重新计算高度（display:none等样式控制时）
+    observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+          const el = mutation.target as HTMLElement;
+          const style = window.getComputedStyle(el);
+          if (style.display !== 'none') {
+            handlePageResize();
+          }
+        }
+      });
+    });
+
+    if (boxEl.value) {
+      observer.observe(boxEl.value, { attributes: true, attributeFilter: ['style'] });
+    }
     resetQueryFormData(props.manualFetch);
   });
   onBeforeUnmount(() => {
     window.removeEventListener('resize', resizeTable);
+    observer.disconnect();
   });
 </script>
 <template>
@@ -529,7 +551,7 @@
                 </template>
                 <a-button
                   :type="btn.type"
-                  :size="btn.size ?? 'small'"
+                  :size="btn.size ?? 'middle'"
                   :disabled="toolbarConfig.disabled || btn.disabled"
                   :loading="loading.toolbar || (!!btn.code && codeLoadings[btn.code])"
                 >
@@ -541,7 +563,7 @@
               <a-button
                 v-else-if="btn.code"
                 :type="btn.type"
-                :size="btn.size ?? 'small'"
+                :size="btn.size ?? 'middle'"
                 :disabled="toolbarConfig.disabled || btn.disabled"
                 :loading="loading.toolbar || (!!btn.code && codeLoadings[btn.code])"
                 @click="debounceToolBtnClick(btn.code)"
@@ -559,7 +581,7 @@
               v-for="(tool, idx) in toolbarConfig.tools"
               :key="idx"
               :type="tool.type"
-              size="small"
+              :size="btn.size ?? 'middle'"
               :disabled="toolbarConfig.disabled || tool.disabled"
               @click="debounceToolToolClick(tool.code)"
               :loading="loading.toolbar || (!!tool.code && codeLoadings[tool.code])"

package/src/packages/components/PromisePicker.vue

@@ -1,10 +1,12 @@
 <script lang="ts" setup name="PromisePicker" generic="D = Recordable, F = Recordable">
-  import { PropType, reactive, ref } from 'vue';
+  import { PropType, reactive, ref, computed } from 'vue';
   import { PGridInstance, PGridProps } from '#/antProxy';
   import PGrid from '@/components/PGrid.vue';
+  import { $warning } from '@/hooks/useMessage';
+  import { Button as AButton, Modal as AModal } from 'ant-design-vue';
 
   const gridEl = ref<PGridInstance<D>>();
-  defineProps({
+  const props = defineProps({
     gridSetting: {
       type: Object as PropType<PGridProps<D, F>>,
       required: true,
@@ -17,14 +19,20 @@
       type: [String, Number] as PropType<string | number>,
       default: '70%',
     },
+    multipleAllowEmpty: {
+      type: Boolean,
+      default: false,
+    },
     bodyStyle: {
       type: Object,
       default: () => ({}),
     },
   });
+  const isMultiple = computed(() => props.gridSetting.selectConfig?.multiple);
   let resolvePromise: (
     value: { row: D; field?: string } | PromiseLike<{ row: D; field?: string }>,
   ) => void;
+  let multipleResolver: (rows: D[]) => void;
   let rejectPromise: (reason?: any) => void;
   const visible = reactive({
     modal: false,
@@ -34,19 +42,42 @@
       rejectPromise();
     }
   };
+
+  const manualCancel = () => {
+    visible.modal = false;
+    if (rejectPromise) {
+      rejectPromise();
+    }
+  };
   const selectRow = ({ row, field }: { row: D; field?: string }) => {
-    if (resolvePromise) {
+    // 单选才关闭结束选择
+    if (resolvePromise && !isMultiple.value) {
       visible.modal = false;
       resolvePromise({ row, field });
     }
   };
+  const endMultiplePicker = () => {
+    const records = gridEl.value?.selectedRecords ?? [];
+    if (records.length === 0 && !props.multipleAllowEmpty) {
+      $warning('请选择数据');
+    } else {
+      visible.modal = false;
+      multipleResolver(records);
+    }
+  };
   defineExpose({
     pick: () =>
-      new Promise<{ row: D; field?: string }>((resolve, reject) => {
+      new Promise<{ row: D; field?: string } | D[]>((resolve, reject) => {
         resolvePromise = resolve;
         rejectPromise = reject;
         visible.modal = true;
       }),
+    pickMultiple: () =>
+      new Promise<{ row: D; field?: string } | D[]>((resolve, reject) => {
+        multipleResolver = resolve;
+        rejectPromise = reject;
+        visible.modal = true;
+      }),
   });
 </script>
 <template>
@@ -55,10 +86,18 @@
     destroy-on-close
     :title="title"
     :width="width"
-    :footer="null"
+    :footer="isMultiple ? undefined : null"
     @cancel="handleCancel"
     :body-style="bodyStyle"
   >
     <p-grid v-bind="gridSetting" ref="gridEl" @pick="selectRow" />
+    <template v-if="isMultiple" #footer>
+      <div class="w-full text-right p-2">
+        <span>
+          <a-button class="mr-4" @click="manualCancel"> 取消 </a-button>
+          <a-button type="primary" @click="endMultiplePicker"> 确定 </a-button>
+        </span>
+      </div>
+    </template>
   </a-modal>
 </template>