@vue-ui-kit/ant 1.3.0 → 1.4.0

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

@@ -20,11 +20,12 @@ declare const _default: <D = Recordable<any>, F = Recordable<any>>(__VLS_props:
             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[]>;
         $form: import('vue').ComputedRef<any>;
+        setLoadings: (value: boolean) => void;
     }>): void;
     attrs: any;
     slots: ReturnType<() => {}>;

package/package.json

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

package/src/declarations/antProxy.ts

@@ -132,6 +132,8 @@ export interface PButtonProps extends ButtonProps {
 
 export interface ToolbarButtonProps extends PButtonProps {
   code: string;
+  dropdowns?: ToolbarButtonProps[];
+  size?: 'small' | 'large' | 'middle';
 }
 
 export interface ToolbarConfig {
@@ -169,16 +171,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 +251,12 @@ 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;
 }
 
 export interface PFormInstance {

package/src/packages/components/PGrid.vue

@@ -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,6 +39,7 @@
   } = toRefs(props);
   const loading = reactive({
     table: false,
+    toolbar: false,
     form: false,
   });
   const submitOnReset = true;
@@ -56,6 +57,7 @@
               content: '确认删除选中的数据吗？',
             }).then(() => {
               loading.table = true;
+              loading.toolbar = true;
               ajax.multiDelete!(selectedRowKeys.value)
                 .then(() => {
                   $message.success('删除成功');
@@ -66,6 +68,7 @@
                 })
                 .finally(() => {
                   loading.table = false;
+                  loading.toolbar = false;
                 });
             });
           } else {
@@ -77,7 +80,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;
@@ -101,7 +104,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;
@@ -142,10 +145,13 @@
     });
     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 });
     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 });
@@ -266,10 +272,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'
@@ -304,6 +310,7 @@
               onChange: (selectedKeys: string[] | number[]) => {
                 selectedRowKeys.value = selectedKeys;
               },
+              getCheckboxProps: selectConfig.value.getCheckboxProps,
             },
           }
         : {},
@@ -339,6 +346,11 @@
     $table: computed(() => tableEl.value),
     selectedRowKeys: computed(() => selectedRowKeys.value),
     $form: computed(() => formEl.value),
+    setLoadings: (value: boolean) => {
+      loading.form = value;
+      loading.table = value;
+      loading.toolbar = value;
+    },
   });
   onMounted(() => {
     /*判断本组件所在容器DOM*/
@@ -438,16 +450,33 @@
       >
         <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">
+                  <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"
+                @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 +486,8 @@
               :key="idx"
               :type="tool.type"
               size="small"
-              @click="toolToolClick(tool.code)"
+              @click="debounceToolToolClick(tool.code)"
+              :loading="loading.toolbar"
             >
               <Icon :icon="tool.icon" />
             </a-button>
@@ -469,7 +499,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"