@vue-ui-kit/ant 1.5.0 → 1.7.0

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

@@ -17,6 +17,7 @@ declare const _default: <D = Recordable<any>, F = Recordable<any>>(__VLS_props:
             selectedKeys: Array<string | number>;
             records: D[];
         }) => any) | undefined;
+        readonly onResetQuery?: (() => any) | undefined;
     } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<{}> & Readonly<{
         onPick?: ((data: {
             row: D;
@@ -34,7 +35,8 @@ declare const _default: <D = Recordable<any>, F = Recordable<any>>(__VLS_props:
             selectedKeys: Array<string | number>;
             records: D[];
         }) => any) | undefined;
-    }>, never>, "onPick" | "onToolbarButtonClick" | "onToolbarToolClick"> & PGridProps<D, F>> & import('vue').PublicProps;
+        onResetQuery?: (() => any) | undefined;
+    }>, never>, "onPick" | "onToolbarButtonClick" | "onToolbarToolClick" | "onResetQuery"> & PGridProps<D, F>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{
         commitProxy: {
             query: import('lodash').DebouncedFunc<() => Promise<D[]>>;
@@ -48,6 +50,7 @@ declare const _default: <D = Recordable<any>, F = Recordable<any>>(__VLS_props:
         selectedRecords: import('vue').ComputedRef<D[]>;
         $form: import('vue').ComputedRef<any>;
         setLoadings: (value: boolean) => void;
+        resizeTable: () => void;
     }>): void;
     attrs: any;
     slots: ReturnType<() => {}>;
@@ -68,6 +71,7 @@ declare const _default: <D = Recordable<any>, F = Recordable<any>>(__VLS_props:
             row: D;
             field: string;
         }): void;
+        (event: "resetQuery"): void;
     } & {};
 }>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;

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.5.0",
+  "version": "1.7.0",
   "description": "Vue3 UI Kit based on Ant Design",
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -14,7 +14,10 @@
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "README.md",
+    "README.zh.md",
+    "tsconfig.json"
   ],
   "scripts": {
     "dev": "vue-tsc --noEmit --skipLibCheck & vite",

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;
@@ -139,7 +142,8 @@ export interface ToolbarButtonProps extends PButtonProps {
 
 export interface ToolbarConfig {
   buttons?: Array<ToolbarButtonProps>;
-  tools?: Array<{ code: string; icon: string; type?: ButtonType }>;
+  tools?: Array<{ code: string; icon: string; type?: ButtonType; disabled?: boolean }>;
+  disabled?: boolean;
 }
 
 export interface ResponsePathConfig<D = Recordable> {
@@ -255,10 +259,12 @@ 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;
   setBtnLoading: (code: string, status: boolean) => void;
+  resizeTable: () => void;
 }
 
 export interface PFormInstance {
@@ -268,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

@@ -1,6 +1,16 @@
 <script generic="D = Recordable, F = Recordable" lang="ts" name="PGrid" setup>
   import { ColumnProps, PFormItemProps, PGridProps, ResponsePathConfig } from '#/antProxy';
-  import { computed, useAttrs, ref, Ref, reactive, onMounted, watch, toRefs } from 'vue';
+  import {
+    computed,
+    useAttrs,
+    ref,
+    Ref,
+    reactive,
+    onMounted,
+    watch,
+    toRefs,
+    onBeforeUnmount,
+  } from 'vue';
   import { debounce, get, isArray, isFunction, isString, merge, omit, toNumber } from 'lodash-es';
   import { eachTree } from '@/utils/treeHelper';
   import { message as $message } from 'ant-design-vue';
@@ -44,6 +54,7 @@
   });
   const submitOnReset = true;
   const boxEl = ref<HTMLDivElement>();
+  const pFormWrapper = ref<HTMLDivElement>();
   const renderHeight = ref(500);
   const selectedRowKeys = ref<Array<string | number>>([]);
   const selectedCaches = ref<D[]>([]);
@@ -156,6 +167,7 @@
       data: { data: D[]; code: string; selectedKeys: Array<string | number>; records: D[] },
     ): void;
     (event: 'pick', data: { row: D; field: string }): void;
+    (event: 'resetQuery'): void;
   }>();
   // @ts-ignore
   const selectedRecords = computed<D[]>(() =>
@@ -205,6 +217,7 @@
         });
         queryFormData.value = obj;
       }
+      emit('resetQuery');
       refreshForm();
     }
 
@@ -377,6 +390,21 @@
     },
     { deep: true },
   );
+  const resizeTable = () => {
+    const pNode = boxEl.value?.parentElement;
+    const ph = pNode ? window.getComputedStyle(pNode).height : '0px';
+    const formHeight = pFormWrapper.value
+      ? toNumber(window.getComputedStyle(pFormWrapper.value).height.replace('px', ''))
+      : 0;
+
+    renderHeight.value =
+      props.renderY ??
+      toNumber(ph.replace('px', '')) -
+        (props.fitHeight ?? 170) -
+        (!!props.toolbarConfig ? 30 : 0) -
+        formHeight;
+    enoughSpacing.value = toNumber(ph.replace('px', '')) > 600;
+  };
   defineExpose({
     commitProxy: {
       query: debounceFetchData,
@@ -394,20 +422,16 @@
       loading.table = value;
       loading.toolbar = value;
     },
+    resizeTable,
   });
   onMounted(() => {
-    /*判断本组件所在容器DOM*/
-    const pNode = boxEl.value?.parentElement;
-    const ph = pNode ? window.getComputedStyle(pNode).height : '0px';
-    renderHeight.value =
-      props.renderY ??
-      toNumber(ph.replace('px', '')) -
-        (props.fitHeight ?? 170) -
-        (!!props.toolbarConfig ? 30 : 0) -
-        Math.ceil((props.formConfig?.items?.length ?? 0) / 4) * 35;
-    enoughSpacing.value = toNumber(ph.replace('px', '')) > 600;
+    resizeTable();
+    window.addEventListener('resize', resizeTable);
     resetQueryFormData(props.manualFetch);
   });
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', resizeTable);
+  });
 </script>
 <template>
   <div ref="boxEl" class="h-full p-wrapper flex flex-col gap-8px overflow-y-auto" v-bind="attrs">
@@ -416,6 +440,7 @@
       <div
         v-if="formConfig?.items?.some((s: PFormItemProps<F>) => s.field && s.itemRender)"
         class="p-pane p-form-wrapper"
+        ref="pFormWrapper"
       >
         <a-spin :spinning="loading.form">
           <a-form
@@ -504,7 +529,8 @@
                 </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])"
                 >
                   <Icon v-if="btn.icon" :icon="btn.icon" />
@@ -515,7 +541,8 @@
               <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)"
               >
@@ -532,7 +559,8 @@
               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>

package/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo",
+    "emitDeclarationOnly": true,
+    "noImplicitAny": false,
+    "types": [
+      "vite/client",
+      "node"
+    ],
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "paths": {
+      "@/*": [
+        "./src/packages/*"
+      ],
+      "#/*": [
+        "./src/declarations/*"
+      ]
+    },
+    "plugins": [
+      // Transform paths in output .js files
+      {
+        "transform": "typescript-transform-paths"
+      },
+      // Transform paths for declarations files
+      {
+        "transform": "typescript-transform-paths",
+        "afterDeclarations": true
+      }
+    ]
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}