@vue-ui-kit/ant 1.3.0 → 1.5.0

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

@@ -1,34 +1,74 @@
 import { PGridProps } from '../../declarations/antProxy';
 declare const _default: <D = Recordable<any>, F = 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 onReset?: ((...args: any[]) => any) | undefined;
-        readonly onPick?: ((...args: any[]) => any) | undefined;
-        readonly onQuery?: ((...args: any[]) => any) | undefined;
-        readonly "onUpdate:tableData"?: ((...args: any[]) => any) | undefined;
-        readonly onToolbarButtonClick?: ((...args: any[]) => any) | undefined;
-        readonly onToolbarToolClick?: ((...args: any[]) => any) | undefined;
+        readonly onPick?: ((data: {
+            row: D;
+            field: string;
+        }) => any) | undefined;
+        readonly onToolbarButtonClick?: ((data: {
+            data: D[];
+            code: string;
+            selectedKeys: Array<string | number>;
+            records: D[];
+        }) => any) | undefined;
+        readonly onToolbarToolClick?: ((data: {
+            data: D[];
+            code: string;
+            selectedKeys: Array<string | number>;
+            records: D[];
+        }) => any) | undefined;
     } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<{}> & Readonly<{
-        onReset?: ((...args: any[]) => any) | undefined;
-        onPick?: ((...args: any[]) => any) | undefined;
-        onQuery?: ((...args: any[]) => any) | undefined;
-        "onUpdate:tableData"?: ((...args: any[]) => any) | undefined;
-        onToolbarButtonClick?: ((...args: any[]) => any) | undefined;
-        onToolbarToolClick?: ((...args: any[]) => any) | undefined;
-    }>, never>, "onReset" | "onPick" | "onQuery" | "onUpdate:tableData" | "onToolbarButtonClick" | "onToolbarToolClick"> & PGridProps<D, F>> & import('vue').PublicProps;
+        onPick?: ((data: {
+            row: D;
+            field: string;
+        }) => any) | undefined;
+        onToolbarButtonClick?: ((data: {
+            data: D[];
+            code: string;
+            selectedKeys: Array<string | number>;
+            records: D[];
+        }) => any) | undefined;
+        onToolbarToolClick?: ((data: {
+            data: D[];
+            code: string;
+            selectedKeys: Array<string | number>;
+            records: D[];
+        }) => any) | undefined;
+    }>, never>, "onPick" | "onToolbarButtonClick" | "onToolbarToolClick"> & PGridProps<D, F>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{
         commitProxy: {
             query: import('lodash').DebouncedFunc<() => Promise<D[]>>;
             reload: () => void;
             reloadPage: () => Promise<D[]>;
-            passQuery: (params: Partial<F>) => Promise<D[]> | undefined;
+            passQuery: (params: Partial<F>, lazy?: boolean) => Promise<void> | Promise<D[]> | undefined;
         };
         $table: import('vue').ComputedRef<any>;
-        selectedRowKeys: import('vue').ComputedRef<string[] | number[]>;
+        selectedRowKeys: import('vue').ComputedRef<(string | number)[]>;
+        setBtnLoading: (code: string, value: boolean) => void;
+        selectedRecords: import('vue').ComputedRef<D[]>;
         $form: import('vue').ComputedRef<any>;
+        setLoadings: (value: boolean) => void;
     }>): void;
     attrs: any;
     slots: ReturnType<() => {}>;
-    emit: ((event: "reset" | "pick" | "query" | "update:tableData" | "toolbarButtonClick" | "toolbarToolClick", ...args: any[]) => void) & {};
+    emit: {
+        (event: "toolbarButtonClick", data: {
+            data: D[];
+            code: string;
+            selectedKeys: Array<string | number>;
+            records: D[];
+        }): void;
+        (event: "toolbarToolClick", data: {
+            data: D[];
+            code: string;
+            selectedKeys: Array<string | number>;
+            records: D[];
+        }): void;
+        (event: "pick", data: {
+            row: D;
+            field: string;
+        }): void;
+    } & {};
 }>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }> & {

package/dist/packages/utils/is.d.ts

@@ -1,2 +1,4 @@
 export declare const noValue: (val: any) => boolean;
 export declare const valued: (val: any) => boolean;
+export declare const isBadValue: (val: any) => boolean;
+export declare const isGoodValue: (val: any) => boolean;

package/package.json

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

package/src/declarations/antProxy.ts

@@ -58,6 +58,7 @@ export interface PFormItemProps<F = Recordable> {
   itemRender?: ItemRender;
   tooltipConfig?: TooltipConfig;
   slots?: {
+    title?: () => any;
     default?: (
       { data, field }: ItemFuncArg<F>,
       passTrigger?: (cusFields?: string | string[]) => void,
@@ -132,6 +133,8 @@ export interface PButtonProps extends ButtonProps {
 
 export interface ToolbarButtonProps extends PButtonProps {
   code: string;
+  dropdowns?: ToolbarButtonProps[];
+  size?: 'small' | 'large' | 'middle';
 }
 
 export interface ToolbarConfig {
@@ -151,7 +154,7 @@ export interface ResponsePathConfig<D = Recordable> {
     | ((res: Recordable) => string | { status: string; content: string; icon?: string });
 }
 
-declare type HandlerMulti = (ids: string[] | number[]) => any;
+declare type HandlerMulti = (ids: Array<string | number>) => any;
 
 export interface AjaxConfig<F = Recordable> {
   query: (Q: { page?: IPage; form: Partial<F> }) => Promise<Recordable>;
@@ -169,16 +172,17 @@ export interface PageConfig {
   pageSize?: number;
 }
 
-export interface SelectConfig {
+export interface SelectConfig<D = Recordable> {
   multiple?: boolean;
+  getCheckboxProps?: (record: D) => { disabled?: boolean };
 }
 
 export type PGridProps<D = Recordable, F = Recordable> = {
-  selectConfig?: SelectConfig;
+  selectConfig?: SelectConfig<D>;
   rowKey?: string;
   manualFetch?: boolean;
   formConfig?: PFormProps<F>;
-  columns: ColumnProps<D>[];
+  columns?: ColumnProps<D>[];
   toolbarConfig?: ToolbarConfig;
   pageConfig?: PageConfig;
   proxyConfig?: ProxyConfig<D, F>;
@@ -248,11 +252,13 @@ export interface PGridInstance<D = Recordable, F = Recordable> {
     query: () => Promise<D[]>;
     reload: () => Promise<D[]>;
     reloadPage: () => Promise<D[]>;
-    passQuery: (query: Partial<F>) => Promise<D[]>;
+    passQuery: (query: Partial<F>, lazy?: boolean) => Promise<void | D[]>;
   };
   selectedRowKeys: string[] | number[];
   $table: Recordable;
   $form: Recordable;
+  setLoadings: (value: boolean) => void;
+  setBtnLoading: (code: string, status: boolean) => void;
 }
 
 export interface PFormInstance {

package/src/packages/components/PForm.vue

@@ -5,7 +5,7 @@
   import { v4 as uuid_v4 } from 'uuid';
   import RenderAntItem from '@/components/RenderAntItem';
   import RenderItemSlots from '@/components/RenderItemSlots';
-  import { valued } from '@/utils/is';
+  import { isGoodValue, valued } from '@/utils/is';
   import { eachTree } from '@/utils/treeHelper';
   import { defaultItemResponsive } from '@/utils/core';
   import {
@@ -39,7 +39,7 @@
       const obj: Partial<F> = {};
       eachTree(items.value, (item) => {
         if (item.field && item.itemRender) {
-          if (valued(item.itemRender.defaultValue)) {
+          if (isGoodValue(item.itemRender.defaultValue)) {
             obj[item.field] = item.itemRender.defaultValue;
           } else {
             obj[item.field] = undefined;
@@ -103,6 +103,9 @@
               ])
             "
           >
+            <template v-if="item.slots?.title" #label>
+              <component :is="item.slots.title" />
+            </template>
             <render-item-slots
               v-if="item.slots?.default"
               :form-data="formData"

package/src/packages/components/PGrid.vue

@@ -8,7 +8,7 @@
   import RenderTitleSlots from '@/components/RenderTitleSlots';
   import RenderDefaultSlots from '@/components/RenderDefaultSlots';
   import { v4 as uuid_v4 } from 'uuid';
-  import { valued } from '@/utils/is';
+  import { isGoodValue, valued } from '@/utils/is';
   import RenderItemSlots from '@/components/RenderItemSlots';
   import { cleanCol, defaultItemResponsive, defaultLabelCol } from '@/utils/core';
   import Icon from '@/renders/Icon';
@@ -24,7 +24,7 @@
     Tooltip as ATooltip,
   } from 'ant-design-vue';
   import { TablePaginationConfig } from 'ant-design-vue/es/table/interface';
-  import { InfoCircleOutlined } from '@ant-design/icons-vue';
+  import { InfoCircleOutlined, DownOutlined } from '@ant-design/icons-vue';
 
   const props = defineProps<PGridProps<D, F>>();
   const {
@@ -39,12 +39,14 @@
   } = toRefs(props);
   const loading = reactive({
     table: false,
+    toolbar: false,
     form: false,
   });
   const submitOnReset = true;
   const boxEl = ref<HTMLDivElement>();
   const renderHeight = ref(500);
-  const selectedRowKeys = ref<string[] | number[]>([]);
+  const selectedRowKeys = ref<Array<string | number>>([]);
+  const selectedCaches = ref<D[]>([]);
   const innerToolbarHandler = (code: string) => {
     const { ajax } = proxyConfig.value!;
     switch (code) {
@@ -56,6 +58,7 @@
               content: '确认删除选中的数据吗？',
             }).then(() => {
               loading.table = true;
+              loading.toolbar = true;
               ajax.multiDelete!(selectedRowKeys.value)
                 .then(() => {
                   $message.success('删除成功');
@@ -66,6 +69,8 @@
                 })
                 .finally(() => {
                   loading.table = false;
+                  loading.toolbar = false;
+                  codeLoadings.multiDelete = false;
                 });
             });
           } else {
@@ -77,7 +82,7 @@
   };
   const slotTitleColumns = computed(() => {
     const cols: ColumnProps<D>[] = [];
-    eachTree(columns.value, (col) => {
+    eachTree(columns.value ?? [], (col) => {
       if (col.slots && col.slots.title) {
         if (!col.field) {
           col.field = '__holder__' + cols.length;
@@ -94,6 +99,21 @@
   const refreshForm = () => {
     renderFormKey.value = uuid_v4();
   };
+  const codeLoadings = reactive<Record<string, boolean>>(
+    [
+      ...(props.toolbarConfig?.buttons?.map((m) => m.code) ?? []).filter((f) => f),
+      ...(props.toolbarConfig?.tools?.map((m) => m.code) ?? []).filter((f) => f),
+    ].reduce(
+      (acc, cur) => {
+        acc[cur!] = false;
+        return acc;
+      },
+      {} as Record<string, boolean>,
+    ),
+  );
+  const setBtnLoading = (code: string, value: boolean) => {
+    codeLoadings[code] = value;
+  };
   const refreshTable = () => {
     renderTableKey.value = uuid_v4();
   };
@@ -101,7 +121,7 @@
   const debounceRefreshTable = debounce(refreshTable, 100);
   const slotDefaultColumns = computed(() => {
     const cols: ColumnProps<D>[] = [];
-    eachTree(columns.value, (col) => {
+    eachTree(columns.value ?? [], (col) => {
       if ((col.slots && col.slots.default) || col.formatter || col.cellRender) {
         if (!col.field) {
           col.field = '__holder__' + cols.length;
@@ -126,26 +146,44 @@
       : 'bad',
   );
   const attrs = useAttrs();
-  const emit = defineEmits([
-    'query',
-    'reset',
-    'update:tableData',
-    'toolbarButtonClick',
-    'toolbarToolClick',
-    'pick',
-  ]);
+  const emit = defineEmits<{
+    (
+      event: 'toolbarButtonClick',
+      data: { data: D[]; code: string; selectedKeys: Array<string | number>; records: D[] },
+    ): void;
+    (
+      event: 'toolbarToolClick',
+      data: { data: D[]; code: string; selectedKeys: Array<string | number>; records: D[] },
+    ): void;
+    (event: 'pick', data: { row: D; field: string }): void;
+  }>();
+  // @ts-ignore
+  const selectedRecords = computed<D[]>(() =>
+    selectedCaches.value.filter((f) =>
+      selectedRowKeys.value.includes(f[props.rowKey ?? 'id'] as string | number),
+    ),
+  );
   const toolBtnClick = (code: string) => {
     emit('toolbarButtonClick', {
       data: tableData.value,
       code,
       selectedKeys: selectedRowKeys.value,
+      records: selectedRecords.value,
     });
     innerToolbarHandler(code);
   };
+  const debounceToolBtnClick = debounce(toolBtnClick, 100);
+  const toolBtnMenuClick = ({ key }) => debounceToolBtnClick(key);
   const toolToolClick = (code: string) => {
-    emit('toolbarToolClick', { data: tableData.value, code, selectedKeys: selectedRowKeys.value });
+    emit('toolbarToolClick', {
+      data: tableData.value,
+      code,
+      selectedKeys: selectedRowKeys.value,
+      records: selectedRecords.value,
+    });
     innerToolbarHandler(code);
   };
+  const debounceToolToolClick = debounce(toolToolClick, 100);
   const queryFormData = ref<Partial<F>>({}) as Ref<Partial<F>>;
   const pickRow = ({ row, field }: { row: D; field: string }) => {
     emit('pick', { row, field });
@@ -158,7 +196,7 @@
         const obj: Partial<F> = {};
         eachTree(formConfig.value.items, (item) => {
           if (item.field && item.itemRender) {
-            if (valued(item.itemRender.defaultValue)) {
+            if (isGoodValue(item.itemRender.defaultValue)) {
               obj[item.field] = item.itemRender.defaultValue;
             } else {
               obj[item.field] = undefined;
@@ -208,6 +246,7 @@
   };
   const resetPage = () => {
     pagination.page = 1;
+    selectedCaches.value = [];
     selectedRowKeys.value = [];
     return fetchData();
   };
@@ -266,10 +305,10 @@
       }
     });
   const debounceFetchData = debounce(fetchData, 160);
-  const passQuery = (params: Partial<F>) => {
+  const passQuery = (params: Partial<F>, lazy?: boolean) => {
     Object.assign(queryFormData.value, params);
     pagination.page = 1;
-    return debounceFetchData();
+    return lazy ? Promise.resolve() : debounceFetchData();
   };
   const pg = computed(() =>
     mode.value === 'pagination'
@@ -303,7 +342,16 @@
               selectedRowKeys: selectedRowKeys.value,
               onChange: (selectedKeys: string[] | number[]) => {
                 selectedRowKeys.value = selectedKeys;
+                const primaryKey = props.rowKey ?? 'id';
+                const cachedKeys = selectedCaches.value.map((m) => m[primaryKey]);
+                const newKeys = selectedKeys.filter((f) => !cachedKeys.includes(f));
+                const newRecords: D[] = newKeys
+                  .map((m) => tableData.value.find((f) => f[primaryKey] === m))
+                  .filter((f) => !!f) as D[];
+                // @ts-ignore
+                selectedCaches.value = [...selectedCaches.value, ...newRecords];
               },
+              getCheckboxProps: selectConfig.value.getCheckboxProps,
             },
           }
         : {},
@@ -338,7 +386,14 @@
     },
     $table: computed(() => tableEl.value),
     selectedRowKeys: computed(() => selectedRowKeys.value),
+    setBtnLoading,
+    selectedRecords,
     $form: computed(() => formEl.value),
+    setLoadings: (value: boolean) => {
+      loading.form = value;
+      loading.table = value;
+      loading.toolbar = value;
+    },
   });
   onMounted(() => {
     /*判断本组件所在容器DOM*/
@@ -438,16 +493,37 @@
       >
         <div class="flex items-center flex-1 gap-4px">
           <template v-if="toolbarConfig.buttons && toolbarConfig.buttons.length > 0">
-            <a-button
-              v-for="(btn, idx) in toolbarConfig.buttons"
-              :key="idx"
-              :type="btn.type"
-              size="small"
-              @click="toolBtnClick(btn.code)"
-            >
-              <Icon v-if="btn.icon" :icon="btn.icon" />
-              {{ btn.content }}
-            </a-button>
+            <template v-for="(btn, idx) in toolbarConfig.buttons" :key="idx">
+              <a-dropdown v-if="btn.dropdowns && btn.dropdowns.length">
+                <template #overlay>
+                  <a-menu @click="toolBtnMenuClick">
+                    <a-menu-item v-for="sub in btn.dropdowns" :key="sub.code"
+                      >{{ sub.content }}
+                    </a-menu-item>
+                  </a-menu>
+                </template>
+                <a-button
+                  :type="btn.type"
+                  :size="btn.size ?? 'small'"
+                  :loading="loading.toolbar || (!!btn.code && codeLoadings[btn.code])"
+                >
+                  <Icon v-if="btn.icon" :icon="btn.icon" />
+                  {{ btn.content }}
+                  <DownOutlined />
+                </a-button>
+              </a-dropdown>
+              <a-button
+                v-else-if="btn.code"
+                :type="btn.type"
+                :size="btn.size ?? 'small'"
+                :loading="loading.toolbar || (!!btn.code && codeLoadings[btn.code])"
+                @click="debounceToolBtnClick(btn.code)"
+              >
+                <Icon v-if="btn.icon" :icon="btn.icon" />
+                {{ btn.content }}
+              </a-button>
+              <div v-else></div>
+            </template>
           </template>
         </div>
         <span class="flex items-center gap-4px">
@@ -457,7 +533,8 @@
               :key="idx"
               :type="tool.type"
               size="small"
-              @click="toolToolClick(tool.code)"
+              @click="debounceToolToolClick(tool.code)"
+              :loading="loading.toolbar || (!!tool.code && codeLoadings[tool.code])"
             >
               <Icon :icon="tool.icon" />
             </a-button>
@@ -469,7 +546,7 @@
           :key="renderTableKey + '_table'"
           :row-key="rowKey ?? 'id'"
           ref="tableEl"
-          :columns="columns.map((c) => cleanCol(c as Recordable))"
+          :columns="(columns ?? []).map((c) => cleanCol(c as Recordable))"
           :data-source="tableData"
           :loading="loading.table"
           :pagination="pg"

package/src/packages/store/renderStore.tsx

@@ -23,7 +23,7 @@ import {
 } from 'ant-design-vue';
 import { set, isFunction, merge, omit } from 'lodash-es';
 import { ButtonProps } from 'ant-design-vue/lib/button';
-import { noValue, valued } from '@/utils/is';
+import { isBadValue, isGoodValue, noValue, valued } from '@/utils/is';
 import TableInput from '@/renders/TableInput.vue';
 import Icon from '@/renders/Icon';
 import { computed } from 'vue';
@@ -130,7 +130,7 @@ const renderBasic = (name: string) => {
       { props = {}, attrs = {}, events = {}, defaultValue }: RenderOptions,
       { data, field }: RenderFormParams,
     ) {
-      if (valued(defaultValue) && valued(field) && noValue(data[field!])) {
+      if (isGoodValue(defaultValue) && valued(field) && isBadValue(data[field!])) {
         data[field!] = defaultValue;
       }
       return field ? (
@@ -151,7 +151,7 @@ const renderBasic = (name: string) => {
       { props = antDefaultProps[name] ?? {}, attrs = {}, events = {}, defaultValue }: RenderOptions,
       { data, row, field }: RenderTableParams,
     ) {
-      if (valued(defaultValue) && valued(field) && noValue(row[field!])) {
+      if (isGoodValue(defaultValue) && valued(field) && isBadValue(row[field!])) {
         row[field!] = defaultValue;
       }
       return field ? (

package/src/packages/utils/is.ts

@@ -1,2 +1,4 @@
 export const noValue = (val: any) => val === null || val === undefined || val === '';
 export const valued = (val: any) => !noValue(val);
+export const isBadValue = (val: any) => val === null || val === undefined;
+export const isGoodValue = (val: any) => !isBadValue(val);