vue-export-table 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +58 -0
- package/dist/DownloadTable.vue.d.ts +40 -0
- package/dist/index.d.ts +11 -0
- package/dist/types.d.ts +67 -0
- package/dist/useAutoRefresh.d.ts +7 -0
- package/dist/usePagination.d.ts +10 -0
- package/dist/useQuery.d.ts +7 -0
- package/dist/useTable.d.ts +29 -0
- package/dist/vue-export-table.cjs +1 -0
- package/dist/vue-export-table.css +1 -0
- package/dist/vue-export-table.js +385 -0
- package/dist/vue-export-table.umd.js +1 -0
- package/dist/vue-export-table.vue2.cjs +1 -0
- package/dist/vue-export-table.vue2.js +442 -0
- package/dist/vue-export-table.vue2.umd.js +1 -0
- package/package.json +63 -0
package/README.md
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
## 本地开发
|
|
2
|
+
|
|
3
|
+
如果你想本地运行项目查看效果:
|
|
4
|
+
|
|
5
|
+
```bash
|
|
6
|
+
# 1. 克隆项目
|
|
7
|
+
git clone <repository-url>
|
|
8
|
+
cd vue-export-table
|
|
9
|
+
|
|
10
|
+
# 2. 安装依赖
|
|
11
|
+
npm install
|
|
12
|
+
|
|
13
|
+
# 3. 初始化 vue-demi(Vue 3 环境)
|
|
14
|
+
npx vue-demi-switch 3
|
|
15
|
+
|
|
16
|
+
# 4. 启动开发服务器
|
|
17
|
+
npm run dev
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
启动后访问 `http://localhost:5173/` 即可查看 Vue 3 示例页面。
|
|
21
|
+
|
|
22
|
+
### 构建生产版本
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
# 构建 Vue 3 和 Vue 2 两个版本
|
|
26
|
+
npm run build
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
构建完成后,`dist` 目录会生成:
|
|
30
|
+
- `vue-export-table.js` - Vue 3 ESM 版本
|
|
31
|
+
- `vue-export-table.cjs` - Vue 3 CJS 版本
|
|
32
|
+
- `vue-export-table.vue2.js` - Vue 2 ESM 版本
|
|
33
|
+
- `vue-export-table.vue2.cjs` - Vue 2 CJS 版本
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
## 项目介绍
|
|
37
|
+
|
|
38
|
+
这是一个基于 Ant Design Vue 的表格组件库,使用 vue-demi 实现 Vue 2/Vue 3 双版本兼容,支持查询、分页、操作列下载和自动刷新功能。
|
|
39
|
+
|
|
40
|
+
### 目录结构
|
|
41
|
+
|
|
42
|
+
component-management-new/
|
|
43
|
+
├── src/
|
|
44
|
+
│ ├── index.ts # Vue 3 入口
|
|
45
|
+
│ ├── index.v2.ts # Vue 2 入口
|
|
46
|
+
│ ├── types.ts # 类型定义(6 个核心接口)
|
|
47
|
+
│ ├── DownloadTable.vue # Vue 3 组件(<script setup>)
|
|
48
|
+
│ ├── DownloadTable.v2.vue # Vue 2 组件(defineComponent)
|
|
49
|
+
│ ├── useTable.ts # 核心编排 composable
|
|
50
|
+
│ ├── useQuery.ts # 查询表单 composable
|
|
51
|
+
│ ├── usePagination.ts # 分页 composable
|
|
52
|
+
│ └── useAutoRefresh.ts # 自动刷新 composable
|
|
53
|
+
├── examples/
|
|
54
|
+
│ ├── vue3-demo/ # Vue 3 示例
|
|
55
|
+
│ └── vue2-demo/ # Vue 2 示例
|
|
56
|
+
├── vite.config.ts # Vite 构建配置(库模式)
|
|
57
|
+
├── tsconfig.json # TypeScript 配置
|
|
58
|
+
└── package.json
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import type { DownloadTableProps } from './types';
|
|
2
|
+
type __VLS_Props = DownloadTableProps;
|
|
3
|
+
declare var __VLS_1: {
|
|
4
|
+
filters: Record<string, any>;
|
|
5
|
+
handleSearch: () => void;
|
|
6
|
+
handleReset: () => void;
|
|
7
|
+
}, __VLS_55: {
|
|
8
|
+
loading: boolean;
|
|
9
|
+
refresh: () => Promise<void>;
|
|
10
|
+
}, __VLS_81: {
|
|
11
|
+
record: any;
|
|
12
|
+
index: any;
|
|
13
|
+
}, __VLS_84: any, __VLS_85: {
|
|
14
|
+
record: any;
|
|
15
|
+
index: any;
|
|
16
|
+
text: any;
|
|
17
|
+
};
|
|
18
|
+
type __VLS_Slots = {} & {
|
|
19
|
+
[K in NonNullable<typeof __VLS_84>]?: (props: typeof __VLS_85) => any;
|
|
20
|
+
} & {
|
|
21
|
+
'query-form'?: (props: typeof __VLS_1) => any;
|
|
22
|
+
} & {
|
|
23
|
+
toolbar?: (props: typeof __VLS_55) => any;
|
|
24
|
+
} & {
|
|
25
|
+
action?: (props: typeof __VLS_81) => any;
|
|
26
|
+
};
|
|
27
|
+
declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
28
|
+
pageSize: number;
|
|
29
|
+
download: import("./types").DownloadHandlerConfig<any>;
|
|
30
|
+
rowKey: string | ((record: any) => string | number);
|
|
31
|
+
bordered: boolean;
|
|
32
|
+
showIndex: boolean;
|
|
33
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
34
|
+
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
35
|
+
export default _default;
|
|
36
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
37
|
+
new (): {
|
|
38
|
+
$slots: S;
|
|
39
|
+
};
|
|
40
|
+
};
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import DownloadTable from './DownloadTable.vue';
|
|
2
|
+
export { DownloadTable };
|
|
3
|
+
export { useTable } from './useTable';
|
|
4
|
+
export { useQuery } from './useQuery';
|
|
5
|
+
export { usePagination } from './usePagination';
|
|
6
|
+
export { useAutoRefresh } from './useAutoRefresh';
|
|
7
|
+
export type { DownloadTableProps, DownloadTableColumn, QueryField, FetchParams, FetchResult, DownloadHandlerConfig, AutoRefreshConfig, } from './types';
|
|
8
|
+
export declare const VueExportTable: {
|
|
9
|
+
install(app: any): void;
|
|
10
|
+
};
|
|
11
|
+
export default VueExportTable;
|
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
export interface DownloadTableColumn {
|
|
2
|
+
title: string;
|
|
3
|
+
dataIndex: string;
|
|
4
|
+
key?: string;
|
|
5
|
+
width?: number | string;
|
|
6
|
+
align?: 'left' | 'center' | 'right';
|
|
7
|
+
fixed?: 'left' | 'right' | boolean;
|
|
8
|
+
ellipsis?: boolean;
|
|
9
|
+
sorter?: boolean | ((a: any, b: any) => number);
|
|
10
|
+
filters?: Array<{
|
|
11
|
+
text: string;
|
|
12
|
+
value: any;
|
|
13
|
+
}>;
|
|
14
|
+
onFilter?: (value: any, record: any) => boolean;
|
|
15
|
+
className?: string;
|
|
16
|
+
customRender?: (params: {
|
|
17
|
+
text: any;
|
|
18
|
+
record: any;
|
|
19
|
+
index: number;
|
|
20
|
+
}) => any;
|
|
21
|
+
scopedSlots?: Record<string, string>;
|
|
22
|
+
slots?: Record<string, string>;
|
|
23
|
+
}
|
|
24
|
+
export interface QueryField {
|
|
25
|
+
name: string;
|
|
26
|
+
label: string;
|
|
27
|
+
type: 'input' | 'select' | 'datePicker' | 'rangePicker' | 'number';
|
|
28
|
+
placeholder?: string;
|
|
29
|
+
options?: Array<{
|
|
30
|
+
label: string;
|
|
31
|
+
value: any;
|
|
32
|
+
}>;
|
|
33
|
+
defaultValue?: any;
|
|
34
|
+
props?: Record<string, any>;
|
|
35
|
+
}
|
|
36
|
+
export interface FetchParams {
|
|
37
|
+
page: number;
|
|
38
|
+
pageSize: number;
|
|
39
|
+
filters: Record<string, any>;
|
|
40
|
+
}
|
|
41
|
+
export interface FetchResult<T = any> {
|
|
42
|
+
list: T[];
|
|
43
|
+
total: number;
|
|
44
|
+
}
|
|
45
|
+
export interface DownloadHandlerConfig<T = any> {
|
|
46
|
+
/** 判断是否可以下载的函数,默认判断 record.status === 'completed' */
|
|
47
|
+
canDownload?: (record: T) => boolean;
|
|
48
|
+
/** 下载处理函数 */
|
|
49
|
+
handleDownload: (record: T) => void | Promise<void>;
|
|
50
|
+
}
|
|
51
|
+
export interface AutoRefreshConfig {
|
|
52
|
+
interval: number;
|
|
53
|
+
enabled?: boolean;
|
|
54
|
+
pauseOnHidden?: boolean;
|
|
55
|
+
}
|
|
56
|
+
export interface DownloadTableProps<T = any> {
|
|
57
|
+
columns: DownloadTableColumn[];
|
|
58
|
+
queryFields?: QueryField[];
|
|
59
|
+
fetchData: (params: FetchParams) => Promise<FetchResult<T>>;
|
|
60
|
+
download?: DownloadHandlerConfig<T>;
|
|
61
|
+
autoRefresh?: AutoRefreshConfig;
|
|
62
|
+
rowKey?: string | ((record: T) => string | number);
|
|
63
|
+
title?: string;
|
|
64
|
+
bordered?: boolean;
|
|
65
|
+
pageSize?: number;
|
|
66
|
+
showIndex?: boolean;
|
|
67
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { AutoRefreshConfig } from './types';
|
|
2
|
+
export declare function useAutoRefresh(config: AutoRefreshConfig, onRefresh: () => void): {
|
|
3
|
+
enabled: import("vue").Ref<boolean, boolean>;
|
|
4
|
+
countdown: import("vue").Ref<number, number>;
|
|
5
|
+
toggle: (val?: boolean) => void;
|
|
6
|
+
resetCountdown: () => void;
|
|
7
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export declare function usePagination(defaultPageSize?: number): {
|
|
2
|
+
currentPage: import("vue").Ref<number, number>;
|
|
3
|
+
pageSize: import("vue").Ref<number, number>;
|
|
4
|
+
pagination: import("vue").ComputedRef<{
|
|
5
|
+
current: number;
|
|
6
|
+
pageSize: number;
|
|
7
|
+
}>;
|
|
8
|
+
onPageChange: (page: number, size: number) => void;
|
|
9
|
+
resetPage: () => void;
|
|
10
|
+
};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import type { Ref } from 'vue-demi';
|
|
2
|
+
import type { FetchParams, FetchResult, AutoRefreshConfig, QueryField } from './types';
|
|
3
|
+
export interface UseTableOptions<T = any> {
|
|
4
|
+
fetchData: (params: FetchParams) => Promise<FetchResult<T>>;
|
|
5
|
+
queryFields?: QueryField[];
|
|
6
|
+
pageSize?: number;
|
|
7
|
+
autoRefresh?: AutoRefreshConfig;
|
|
8
|
+
immediate?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export declare function useTable<T = any>(options: UseTableOptions<T>): {
|
|
11
|
+
loading: Ref<boolean, boolean>;
|
|
12
|
+
data: Ref<T[], T[]>;
|
|
13
|
+
total: Ref<number, number>;
|
|
14
|
+
filters: Record<string, any>;
|
|
15
|
+
pagination: import("vue").ComputedRef<{
|
|
16
|
+
current: number;
|
|
17
|
+
pageSize: number;
|
|
18
|
+
}>;
|
|
19
|
+
currentPage: Ref<number, number>;
|
|
20
|
+
pageSize: Ref<number, number>;
|
|
21
|
+
handleSearch: () => void;
|
|
22
|
+
handleReset: () => void;
|
|
23
|
+
setFilter: (key: string, value: any) => void;
|
|
24
|
+
handlePageChange: (page: number, size: number) => void;
|
|
25
|
+
refresh: () => Promise<void>;
|
|
26
|
+
autoRefreshEnabled: Ref<boolean, boolean>;
|
|
27
|
+
countdown: Ref<number, number>;
|
|
28
|
+
toggleAutoRefresh: (val?: boolean) => void;
|
|
29
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),m=require("vue-demi");function z(t){const a=m.reactive({});function l(){t.forEach(o=>{o.defaultValue!==void 0?a[o.name]=o.defaultValue:a[o.name]=o.type==="rangePicker"?[]:void 0})}l();function u(){const o={};return Object.keys(a).forEach(s=>{const i=a[s];if(i!=null&&i!==""){if(Array.isArray(i)&&i.length===0)return;o[s]=i}}),o}function d(){l()}function h(o,s){a[o]=s}return{filters:a,onSearch:u,onReset:d,setFilter:h}}function T(t=10){const a=m.ref(1),l=m.ref(t),u=m.computed(()=>({current:a.value,pageSize:l.value}));function d(o,s){a.value=o,s!==l.value&&(l.value=s,a.value=1)}function h(){a.value=1}return{currentPage:a,pageSize:l,pagination:u,onPageChange:d,resetPage:h}}function U(t,a){const l=m.ref(t.enabled??t.interval>0),u=m.ref(t.interval);let d=null;function h(){o(),!(!l.value||t.interval<=0)&&(u.value=t.interval,d=setInterval(()=>{u.value-=1,u.value<=0&&(u.value=t.interval,a())},1e3))}function o(){d&&(clearInterval(d),d=null)}function s(g){l.value=g??!l.value,l.value?h():(o(),u.value=t.interval)}function i(){l.value&&(u.value=t.interval)}function f(){t.pauseOnHidden&&(document.hidden?o():l.value&&h())}return m.onMounted(()=>{l.value&&t.interval>0&&(h(),t.pauseOnHidden&&document.addEventListener("visibilitychange",f))}),m.onUnmounted(()=>{o(),document.removeEventListener("visibilitychange",f)}),{enabled:l,countdown:u,toggle:s,resetCountdown:i}}function q(t){const a=m.ref(!1),l=m.ref([]),u=m.ref(0),{filters:d,onSearch:h,onReset:o,setFilter:s}=z(t.queryFields??[]),{currentPage:i,pageSize:f,pagination:g,onPageChange:_,resetPage:C}=T(t.pageSize??10),k=t.autoRefresh??{interval:0,enabled:!1},{enabled:V,countdown:x,toggle:S,resetCountdown:B}=U(k,()=>{r()});async function r(){a.value=!0;try{const v={page:i.value,pageSize:f.value,filters:h()},y=await t.fetchData(v);l.value=y.list,u.value=y.total}catch(v){console.error("[VueExportTable] fetch error:",v)}finally{a.value=!1}}function c(){C(),r(),B()}function w(){o(),C(),r()}function b(v,y){_(v,y),r(),B()}return m.onMounted(()=>{t.immediate!==!1&&r()}),{loading:a,data:l,total:u,filters:d,pagination:g,currentPage:i,pageSize:f,handleSearch:c,handleReset:w,setFilter:s,handlePageChange:b,refresh:r,autoRefreshEnabled:V,countdown:x,toggleAutoRefresh:S}}const L={class:"download-table-wrapper"},j={key:0,class:"query-form-wrapper"},H={class:"toolbar-wrapper"},Q={class:"toolbar-left"},W={key:0,class:"table-title"},G={class:"toolbar-right"},J={key:1,class:"countdown-text"},X=["onClick"],Y={key:1,class:"pagination-wrapper"},Z=e.defineComponent({__name:"DownloadTable",props:{columns:{},queryFields:{},fetchData:{},download:{default:void 0},autoRefresh:{},rowKey:{type:[String,Function],default:"id"},title:{},bordered:{type:Boolean,default:!0},pageSize:{default:10},showIndex:{type:Boolean,default:!1}},setup(t){const a=t,l=r=>a.download?a.download.canDownload?a.download.canDownload(r):r.status==="completed":!1,{loading:u,data:d,total:h,filters:o,currentPage:s,pageSize:i,handleSearch:f,handleReset:g,handlePageChange:_,refresh:C,autoRefreshEnabled:k,countdown:V,toggleAutoRefresh:x}=q({fetchData:a.fetchData,queryFields:a.queryFields,pageSize:a.pageSize,autoRefresh:a.autoRefresh,immediate:!0}),S=m.computed(()=>{const r=[];return a.showIndex&&r.push({title:"序号",dataIndex:"index",key:"index",width:80,align:"center",customRender:({index:c})=>(s.value-1)*i.value+c+1}),[...r,...a.columns]}),B=m.computed(()=>{const r=S.value.reduce((c,w)=>{const b=typeof w.width=="number"?w.width:0;return c+b},0);return r>0?{x:r}:void 0});return(r,c)=>{const w=e.resolveComponent("a-input"),b=e.resolveComponent("a-input-number"),v=e.resolveComponent("a-select"),y=e.resolveComponent("a-date-picker"),I=e.resolveComponent("a-range-picker"),R=e.resolveComponent("a-form-item"),N=e.resolveComponent("a-button"),E=e.resolveComponent("a-space"),A=e.resolveComponent("a-form"),M=e.resolveComponent("a-switch"),O=e.resolveComponent("a-table"),K=e.resolveComponent("a-pagination");return e.openBlock(),e.createElementBlock("div",L,[t.queryFields&&t.queryFields.length>0?(e.openBlock(),e.createElementBlock("div",j,[e.renderSlot(r.$slots,"query-form",{filters:e.unref(o),handleSearch:e.unref(f),handleReset:e.unref(g)},()=>[e.createVNode(A,{layout:"inline",model:e.unref(o)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.queryFields,n=>(e.openBlock(),e.createBlock(R,{key:n.name,label:n.label},{default:e.withCtx(()=>[n.type==="input"?(e.openBlock(),e.createBlock(w,{key:0,value:e.unref(o)[n.name],"onUpdate:value":p=>e.unref(o)[n.name]=p,placeholder:n.placeholder||`请输入${n.label}`,"allow-clear":""},null,8,["value","onUpdate:value","placeholder"])):n.type==="number"?(e.openBlock(),e.createBlock(b,{key:1,value:e.unref(o)[n.name],"onUpdate:value":p=>e.unref(o)[n.name]=p,placeholder:n.placeholder||`请输入${n.label}`,style:{width:"180px"}},null,8,["value","onUpdate:value","placeholder"])):n.type==="select"?(e.openBlock(),e.createBlock(v,{key:2,value:e.unref(o)[n.name],"onUpdate:value":p=>e.unref(o)[n.name]=p,placeholder:n.placeholder||`请选择${n.label}`,options:n.options,"allow-clear":"",style:{"min-width":"150px"}},null,8,["value","onUpdate:value","placeholder","options"])):n.type==="datePicker"?(e.openBlock(),e.createBlock(y,{key:3,value:e.unref(o)[n.name],"onUpdate:value":p=>e.unref(o)[n.name]=p,placeholder:n.placeholder||`请选择${n.label}`,style:{width:"180px"}},null,8,["value","onUpdate:value","placeholder"])):n.type==="rangePicker"?(e.openBlock(),e.createBlock(I,{key:4,value:e.unref(o)[n.name],"onUpdate:value":p=>e.unref(o)[n.name]=p,placeholder:[n.placeholder||"开始日期",n.placeholder||"结束日期"],style:{width:"240px"}},null,8,["value","onUpdate:value","placeholder"])):e.createCommentVNode("",!0)]),_:2},1032,["label"]))),128)),e.createVNode(R,null,{default:e.withCtx(()=>[e.createVNode(E,null,{default:e.withCtx(()=>[e.createVNode(N,{type:"primary",onClick:e.unref(f)},{default:e.withCtx(()=>[...c[3]||(c[3]=[e.createTextVNode("查询",-1)])]),_:1},8,["onClick"]),e.createVNode(N,{onClick:e.unref(g)},{default:e.withCtx(()=>[...c[4]||(c[4]=[e.createTextVNode("重置",-1)])]),_:1},8,["onClick"])]),_:1})]),_:1})]),_:1},8,["model"])],!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",H,[e.renderSlot(r.$slots,"toolbar",{loading:e.unref(u),refresh:e.unref(C)},()=>[e.createElementVNode("div",Q,[t.title?(e.openBlock(),e.createElementBlock("span",W,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0)]),e.createElementVNode("div",G,[e.createVNode(E,null,{default:e.withCtx(()=>[e.createVNode(N,{loading:e.unref(u),onClick:e.unref(C)},{default:e.withCtx(()=>[...c[5]||(c[5]=[e.createElementVNode("svg",{class:"icon-svg",viewBox:"64 64 896 896",width:"1em",height:"1em",fill:"currentColor"},[e.createElementVNode("path",{d:"M909.1 209.3l-56.4 44.1C775.8 155.1 653.5 96 512 96 282.7 96 96 282.7 96 512s186.7 416 416 416c165.3 0 309.1-96.4 376-236.1 8.3-17.2-4.3-37.1-23.1-37.1H745.6c-9.2 0-17.2 5.8-20.3 14.3C680.5 773.5 600.5 832 512 832c-176.7 0-320-143.3-320-320s143.3-320 320-320c88.5 0 168.5 36.1 226.4 94.3L704 356.3c-4.7-4.7-1.3-12.7 5.3-13.1l193.7-12.5c6.6-.4 12.3 4.9 12.3 11.5v193.7c0 6.6-8 10-12.7 5.3z"})],-1),e.createTextVNode(" 刷新 ",-1)])]),_:1},8,["loading","onClick"]),t.autoRefresh?(e.openBlock(),e.createBlock(M,{key:0,checked:e.unref(k),"onUpdate:checked":c[0]||(c[0]=n=>e.isRef(k)?k.value=n:null),"checked-children":"自动刷新","un-checked-children":"自动刷新",onChange:e.unref(x)},null,8,["checked","onChange"])):e.createCommentVNode("",!0),t.autoRefresh&&e.unref(k)?(e.openBlock(),e.createElementBlock("span",J,e.toDisplayString(e.unref(V))+"s ",1)):e.createCommentVNode("",!0)]),_:1})])],!0)]),e.createVNode(O,e.mergeProps({dataSource:e.unref(d),columns:e.unref(S),loading:e.unref(u),pagination:!1,rowKey:t.rowKey,bordered:t.bordered,scroll:e.unref(B)},r.$attrs),{bodyCell:e.withCtx(({column:n,record:p,index:D,text:P})=>[n.dataIndex==="action"?e.renderSlot(r.$slots,"action",{key:0,record:p,index:D},()=>[t.download&&l(p)?(e.openBlock(),e.createElementBlock("a",{key:0,onClick:te=>t.download.handleDownload(p)},"下载",8,X)):e.createCommentVNode("",!0)],!0):e.renderSlot(r.$slots,n.dataIndex,{key:1,record:p,index:D,text:P},()=>[e.createTextVNode(e.toDisplayString(P),1)],!0)]),_:3},16,["dataSource","columns","loading","rowKey","bordered","scroll"]),e.unref(h)>0?(e.openBlock(),e.createElementBlock("div",Y,[e.createVNode(K,{current:e.unref(s),"onUpdate:current":c[1]||(c[1]=n=>e.isRef(s)?s.value=n:null),pageSize:e.unref(i),"onUpdate:pageSize":c[2]||(c[2]=n=>e.isRef(i)?i.value=n:null),total:e.unref(h),"show-size-changer":!0,"show-quick-jumper":!0,"show-total":n=>`共 ${n} 条`,onChange:e.unref(_),onShowSizeChange:e.unref(_)},null,8,["current","pageSize","total","show-total","onChange","onShowSizeChange"])])):e.createCommentVNode("",!0)])}}}),ee=(t,a)=>{const l=t.__vccOpts||t;for(const[u,d]of a)l[u]=d;return l},F=ee(Z,[["__scopeId","data-v-13092ac7"]]),$={install(t){t.component("DownloadTable",F)}};exports.DownloadTable=F;exports.VueExportTable=$;exports.default=$;exports.useAutoRefresh=U;exports.usePagination=T;exports.useQuery=z;exports.useTable=q;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.download-table-wrapper[data-v-c29396f5]{padding:16px;background:#fff}.query-form-wrapper[data-v-c29396f5]{margin-bottom:16px;padding:16px;background:#fafafa;border-radius:4px}.toolbar-wrapper[data-v-c29396f5]{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.toolbar-left[data-v-c29396f5]{display:flex;align-items:center}.table-title[data-v-c29396f5]{font-size:16px;font-weight:600;color:#333}.toolbar-right[data-v-c29396f5]{display:flex;align-items:center}.countdown-text[data-v-c29396f5]{color:#1890ff;font-size:14px;margin-left:8px}.pagination-wrapper[data-v-c29396f5]{margin-top:16px;text-align:right}.icon-refresh[data-v-c29396f5]{display:inline-block;width:1em;height:1em;margin-right:4px;vertical-align:-.125em}
|
|
@@ -0,0 +1,385 @@
|
|
|
1
|
+
import { defineComponent as Y, resolveComponent as m, openBlock as h, createElementBlock as b, renderSlot as E, unref as a, createVNode as f, withCtx as g, Fragment as Z, renderList as ee, createBlock as k, createCommentVNode as _, createTextVNode as T, createElementVNode as D, toDisplayString as A, isRef as K, mergeProps as te } from "vue";
|
|
2
|
+
import { reactive as ae, ref as C, computed as L, onMounted as M, onUnmounted as ne } from "vue-demi";
|
|
3
|
+
function oe(e) {
|
|
4
|
+
const o = ae({});
|
|
5
|
+
function l() {
|
|
6
|
+
e.forEach((n) => {
|
|
7
|
+
n.defaultValue !== void 0 ? o[n.name] = n.defaultValue : o[n.name] = n.type === "rangePicker" ? [] : void 0;
|
|
8
|
+
});
|
|
9
|
+
}
|
|
10
|
+
l();
|
|
11
|
+
function u() {
|
|
12
|
+
const n = {};
|
|
13
|
+
return Object.keys(o).forEach((c) => {
|
|
14
|
+
const i = o[c];
|
|
15
|
+
if (i != null && i !== "") {
|
|
16
|
+
if (Array.isArray(i) && i.length === 0) return;
|
|
17
|
+
n[c] = i;
|
|
18
|
+
}
|
|
19
|
+
}), n;
|
|
20
|
+
}
|
|
21
|
+
function d() {
|
|
22
|
+
l();
|
|
23
|
+
}
|
|
24
|
+
function v(n, c) {
|
|
25
|
+
o[n] = c;
|
|
26
|
+
}
|
|
27
|
+
return { filters: o, onSearch: u, onReset: d, setFilter: v };
|
|
28
|
+
}
|
|
29
|
+
function le(e = 10) {
|
|
30
|
+
const o = C(1), l = C(e), u = L(() => ({
|
|
31
|
+
current: o.value,
|
|
32
|
+
pageSize: l.value
|
|
33
|
+
}));
|
|
34
|
+
function d(n, c) {
|
|
35
|
+
o.value = n, c !== l.value && (l.value = c, o.value = 1);
|
|
36
|
+
}
|
|
37
|
+
function v() {
|
|
38
|
+
o.value = 1;
|
|
39
|
+
}
|
|
40
|
+
return { currentPage: o, pageSize: l, pagination: u, onPageChange: d, resetPage: v };
|
|
41
|
+
}
|
|
42
|
+
function re(e, o) {
|
|
43
|
+
const l = C(e.enabled ?? e.interval > 0), u = C(e.interval);
|
|
44
|
+
let d = null;
|
|
45
|
+
function v() {
|
|
46
|
+
n(), !(!l.value || e.interval <= 0) && (u.value = e.interval, d = setInterval(() => {
|
|
47
|
+
u.value -= 1, u.value <= 0 && (u.value = e.interval, o());
|
|
48
|
+
}, 1e3));
|
|
49
|
+
}
|
|
50
|
+
function n() {
|
|
51
|
+
d && (clearInterval(d), d = null);
|
|
52
|
+
}
|
|
53
|
+
function c(S) {
|
|
54
|
+
l.value = S ?? !l.value, l.value ? v() : (n(), u.value = e.interval);
|
|
55
|
+
}
|
|
56
|
+
function i() {
|
|
57
|
+
l.value && (u.value = e.interval);
|
|
58
|
+
}
|
|
59
|
+
function y() {
|
|
60
|
+
e.pauseOnHidden && (document.hidden ? n() : l.value && v());
|
|
61
|
+
}
|
|
62
|
+
return M(() => {
|
|
63
|
+
l.value && e.interval > 0 && (v(), e.pauseOnHidden && document.addEventListener("visibilitychange", y));
|
|
64
|
+
}), ne(() => {
|
|
65
|
+
n(), document.removeEventListener("visibilitychange", y);
|
|
66
|
+
}), { enabled: l, countdown: u, toggle: c, resetCountdown: i };
|
|
67
|
+
}
|
|
68
|
+
function ue(e) {
|
|
69
|
+
const o = C(!1), l = C([]), u = C(0), { filters: d, onSearch: v, onReset: n, setFilter: c } = oe(e.queryFields ?? []), { currentPage: i, pageSize: y, pagination: S, onPageChange: F, resetPage: x } = le(e.pageSize ?? 10), R = e.autoRefresh ?? {
|
|
70
|
+
interval: 0,
|
|
71
|
+
enabled: !1
|
|
72
|
+
}, { enabled: V, countdown: I, toggle: $, resetCountdown: q } = re(
|
|
73
|
+
R,
|
|
74
|
+
() => {
|
|
75
|
+
r();
|
|
76
|
+
}
|
|
77
|
+
);
|
|
78
|
+
async function r() {
|
|
79
|
+
o.value = !0;
|
|
80
|
+
try {
|
|
81
|
+
const w = {
|
|
82
|
+
page: i.value,
|
|
83
|
+
pageSize: y.value,
|
|
84
|
+
filters: v()
|
|
85
|
+
}, P = await e.fetchData(w);
|
|
86
|
+
l.value = P.list, u.value = P.total;
|
|
87
|
+
} catch (w) {
|
|
88
|
+
console.error("[VueExportTable] fetch error:", w);
|
|
89
|
+
} finally {
|
|
90
|
+
o.value = !1;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
function s() {
|
|
94
|
+
x(), r(), q();
|
|
95
|
+
}
|
|
96
|
+
function z() {
|
|
97
|
+
n(), x(), r();
|
|
98
|
+
}
|
|
99
|
+
function U(w, P) {
|
|
100
|
+
F(w, P), r(), q();
|
|
101
|
+
}
|
|
102
|
+
return M(() => {
|
|
103
|
+
e.immediate !== !1 && r();
|
|
104
|
+
}), {
|
|
105
|
+
// 状态
|
|
106
|
+
loading: o,
|
|
107
|
+
data: l,
|
|
108
|
+
total: u,
|
|
109
|
+
filters: d,
|
|
110
|
+
pagination: S,
|
|
111
|
+
currentPage: i,
|
|
112
|
+
pageSize: y,
|
|
113
|
+
// 查询
|
|
114
|
+
handleSearch: s,
|
|
115
|
+
handleReset: z,
|
|
116
|
+
setFilter: c,
|
|
117
|
+
// 分页
|
|
118
|
+
handlePageChange: U,
|
|
119
|
+
// 刷新
|
|
120
|
+
refresh: r,
|
|
121
|
+
// 自动刷新
|
|
122
|
+
autoRefreshEnabled: V,
|
|
123
|
+
countdown: I,
|
|
124
|
+
toggleAutoRefresh: $
|
|
125
|
+
};
|
|
126
|
+
}
|
|
127
|
+
const se = { class: "download-table-wrapper" }, ce = {
|
|
128
|
+
key: 0,
|
|
129
|
+
class: "query-form-wrapper"
|
|
130
|
+
}, ie = { class: "toolbar-wrapper" }, de = { class: "toolbar-left" }, pe = {
|
|
131
|
+
key: 0,
|
|
132
|
+
class: "table-title"
|
|
133
|
+
}, he = { class: "toolbar-right" }, ve = {
|
|
134
|
+
key: 1,
|
|
135
|
+
class: "countdown-text"
|
|
136
|
+
}, me = ["onClick"], fe = {
|
|
137
|
+
key: 1,
|
|
138
|
+
class: "pagination-wrapper"
|
|
139
|
+
}, ge = /* @__PURE__ */ Y({
|
|
140
|
+
__name: "DownloadTable",
|
|
141
|
+
props: {
|
|
142
|
+
columns: {},
|
|
143
|
+
queryFields: {},
|
|
144
|
+
fetchData: {},
|
|
145
|
+
download: { default: void 0 },
|
|
146
|
+
autoRefresh: {},
|
|
147
|
+
rowKey: { type: [String, Function], default: "id" },
|
|
148
|
+
title: {},
|
|
149
|
+
bordered: { type: Boolean, default: !0 },
|
|
150
|
+
pageSize: { default: 10 },
|
|
151
|
+
showIndex: { type: Boolean, default: !1 }
|
|
152
|
+
},
|
|
153
|
+
setup(e) {
|
|
154
|
+
const o = e, l = (r) => o.download ? o.download.canDownload ? o.download.canDownload(r) : r.status === "completed" : !1, {
|
|
155
|
+
loading: u,
|
|
156
|
+
data: d,
|
|
157
|
+
total: v,
|
|
158
|
+
filters: n,
|
|
159
|
+
currentPage: c,
|
|
160
|
+
pageSize: i,
|
|
161
|
+
handleSearch: y,
|
|
162
|
+
handleReset: S,
|
|
163
|
+
handlePageChange: F,
|
|
164
|
+
refresh: x,
|
|
165
|
+
autoRefreshEnabled: R,
|
|
166
|
+
countdown: V,
|
|
167
|
+
toggleAutoRefresh: I
|
|
168
|
+
} = ue({
|
|
169
|
+
fetchData: o.fetchData,
|
|
170
|
+
queryFields: o.queryFields,
|
|
171
|
+
pageSize: o.pageSize,
|
|
172
|
+
autoRefresh: o.autoRefresh,
|
|
173
|
+
immediate: !0
|
|
174
|
+
}), $ = L(() => {
|
|
175
|
+
const r = [];
|
|
176
|
+
return o.showIndex && r.push({
|
|
177
|
+
title: "序号",
|
|
178
|
+
dataIndex: "index",
|
|
179
|
+
key: "index",
|
|
180
|
+
width: 80,
|
|
181
|
+
align: "center",
|
|
182
|
+
customRender: ({ index: s }) => (c.value - 1) * i.value + s + 1
|
|
183
|
+
}), [...r, ...o.columns];
|
|
184
|
+
}), q = L(() => {
|
|
185
|
+
const r = $.value.reduce((s, z) => {
|
|
186
|
+
const U = typeof z.width == "number" ? z.width : 0;
|
|
187
|
+
return s + U;
|
|
188
|
+
}, 0);
|
|
189
|
+
return r > 0 ? { x: r } : void 0;
|
|
190
|
+
});
|
|
191
|
+
return (r, s) => {
|
|
192
|
+
const z = m("a-input"), U = m("a-input-number"), w = m("a-select"), P = m("a-date-picker"), Q = m("a-range-picker"), N = m("a-form-item"), B = m("a-button"), O = m("a-space"), W = m("a-form"), G = m("a-switch"), J = m("a-table"), X = m("a-pagination");
|
|
193
|
+
return h(), b("div", se, [
|
|
194
|
+
e.queryFields && e.queryFields.length > 0 ? (h(), b("div", ce, [
|
|
195
|
+
E(r.$slots, "query-form", {
|
|
196
|
+
filters: a(n),
|
|
197
|
+
handleSearch: a(y),
|
|
198
|
+
handleReset: a(S)
|
|
199
|
+
}, () => [
|
|
200
|
+
f(W, {
|
|
201
|
+
layout: "inline",
|
|
202
|
+
model: a(n)
|
|
203
|
+
}, {
|
|
204
|
+
default: g(() => [
|
|
205
|
+
(h(!0), b(Z, null, ee(e.queryFields, (t) => (h(), k(N, {
|
|
206
|
+
key: t.name,
|
|
207
|
+
label: t.label
|
|
208
|
+
}, {
|
|
209
|
+
default: g(() => [
|
|
210
|
+
t.type === "input" ? (h(), k(z, {
|
|
211
|
+
key: 0,
|
|
212
|
+
value: a(n)[t.name],
|
|
213
|
+
"onUpdate:value": (p) => a(n)[t.name] = p,
|
|
214
|
+
placeholder: t.placeholder || `请输入${t.label}`,
|
|
215
|
+
"allow-clear": ""
|
|
216
|
+
}, null, 8, ["value", "onUpdate:value", "placeholder"])) : t.type === "number" ? (h(), k(U, {
|
|
217
|
+
key: 1,
|
|
218
|
+
value: a(n)[t.name],
|
|
219
|
+
"onUpdate:value": (p) => a(n)[t.name] = p,
|
|
220
|
+
placeholder: t.placeholder || `请输入${t.label}`,
|
|
221
|
+
style: { width: "180px" }
|
|
222
|
+
}, null, 8, ["value", "onUpdate:value", "placeholder"])) : t.type === "select" ? (h(), k(w, {
|
|
223
|
+
key: 2,
|
|
224
|
+
value: a(n)[t.name],
|
|
225
|
+
"onUpdate:value": (p) => a(n)[t.name] = p,
|
|
226
|
+
placeholder: t.placeholder || `请选择${t.label}`,
|
|
227
|
+
options: t.options,
|
|
228
|
+
"allow-clear": "",
|
|
229
|
+
style: { "min-width": "150px" }
|
|
230
|
+
}, null, 8, ["value", "onUpdate:value", "placeholder", "options"])) : t.type === "datePicker" ? (h(), k(P, {
|
|
231
|
+
key: 3,
|
|
232
|
+
value: a(n)[t.name],
|
|
233
|
+
"onUpdate:value": (p) => a(n)[t.name] = p,
|
|
234
|
+
placeholder: t.placeholder || `请选择${t.label}`,
|
|
235
|
+
style: { width: "180px" }
|
|
236
|
+
}, null, 8, ["value", "onUpdate:value", "placeholder"])) : t.type === "rangePicker" ? (h(), k(Q, {
|
|
237
|
+
key: 4,
|
|
238
|
+
value: a(n)[t.name],
|
|
239
|
+
"onUpdate:value": (p) => a(n)[t.name] = p,
|
|
240
|
+
placeholder: [t.placeholder || "开始日期", t.placeholder || "结束日期"],
|
|
241
|
+
style: { width: "240px" }
|
|
242
|
+
}, null, 8, ["value", "onUpdate:value", "placeholder"])) : _("", !0)
|
|
243
|
+
]),
|
|
244
|
+
_: 2
|
|
245
|
+
}, 1032, ["label"]))), 128)),
|
|
246
|
+
f(N, null, {
|
|
247
|
+
default: g(() => [
|
|
248
|
+
f(O, null, {
|
|
249
|
+
default: g(() => [
|
|
250
|
+
f(B, {
|
|
251
|
+
type: "primary",
|
|
252
|
+
onClick: a(y)
|
|
253
|
+
}, {
|
|
254
|
+
default: g(() => [...s[3] || (s[3] = [
|
|
255
|
+
T("查询", -1)
|
|
256
|
+
])]),
|
|
257
|
+
_: 1
|
|
258
|
+
}, 8, ["onClick"]),
|
|
259
|
+
f(B, { onClick: a(S) }, {
|
|
260
|
+
default: g(() => [...s[4] || (s[4] = [
|
|
261
|
+
T("重置", -1)
|
|
262
|
+
])]),
|
|
263
|
+
_: 1
|
|
264
|
+
}, 8, ["onClick"])
|
|
265
|
+
]),
|
|
266
|
+
_: 1
|
|
267
|
+
})
|
|
268
|
+
]),
|
|
269
|
+
_: 1
|
|
270
|
+
})
|
|
271
|
+
]),
|
|
272
|
+
_: 1
|
|
273
|
+
}, 8, ["model"])
|
|
274
|
+
], !0)
|
|
275
|
+
])) : _("", !0),
|
|
276
|
+
D("div", ie, [
|
|
277
|
+
E(r.$slots, "toolbar", {
|
|
278
|
+
loading: a(u),
|
|
279
|
+
refresh: a(x)
|
|
280
|
+
}, () => [
|
|
281
|
+
D("div", de, [
|
|
282
|
+
e.title ? (h(), b("span", pe, A(e.title), 1)) : _("", !0)
|
|
283
|
+
]),
|
|
284
|
+
D("div", he, [
|
|
285
|
+
f(O, null, {
|
|
286
|
+
default: g(() => [
|
|
287
|
+
f(B, {
|
|
288
|
+
loading: a(u),
|
|
289
|
+
onClick: a(x)
|
|
290
|
+
}, {
|
|
291
|
+
default: g(() => [...s[5] || (s[5] = [
|
|
292
|
+
D("svg", {
|
|
293
|
+
class: "icon-svg",
|
|
294
|
+
viewBox: "64 64 896 896",
|
|
295
|
+
width: "1em",
|
|
296
|
+
height: "1em",
|
|
297
|
+
fill: "currentColor"
|
|
298
|
+
}, [
|
|
299
|
+
D("path", { d: "M909.1 209.3l-56.4 44.1C775.8 155.1 653.5 96 512 96 282.7 96 96 282.7 96 512s186.7 416 416 416c165.3 0 309.1-96.4 376-236.1 8.3-17.2-4.3-37.1-23.1-37.1H745.6c-9.2 0-17.2 5.8-20.3 14.3C680.5 773.5 600.5 832 512 832c-176.7 0-320-143.3-320-320s143.3-320 320-320c88.5 0 168.5 36.1 226.4 94.3L704 356.3c-4.7-4.7-1.3-12.7 5.3-13.1l193.7-12.5c6.6-.4 12.3 4.9 12.3 11.5v193.7c0 6.6-8 10-12.7 5.3z" })
|
|
300
|
+
], -1),
|
|
301
|
+
T(" 刷新 ", -1)
|
|
302
|
+
])]),
|
|
303
|
+
_: 1
|
|
304
|
+
}, 8, ["loading", "onClick"]),
|
|
305
|
+
e.autoRefresh ? (h(), k(G, {
|
|
306
|
+
key: 0,
|
|
307
|
+
checked: a(R),
|
|
308
|
+
"onUpdate:checked": s[0] || (s[0] = (t) => K(R) ? R.value = t : null),
|
|
309
|
+
"checked-children": "自动刷新",
|
|
310
|
+
"un-checked-children": "自动刷新",
|
|
311
|
+
onChange: a(I)
|
|
312
|
+
}, null, 8, ["checked", "onChange"])) : _("", !0),
|
|
313
|
+
e.autoRefresh && a(R) ? (h(), b("span", ve, A(a(V)) + "s ", 1)) : _("", !0)
|
|
314
|
+
]),
|
|
315
|
+
_: 1
|
|
316
|
+
})
|
|
317
|
+
])
|
|
318
|
+
], !0)
|
|
319
|
+
]),
|
|
320
|
+
f(J, te({
|
|
321
|
+
dataSource: a(d),
|
|
322
|
+
columns: a($),
|
|
323
|
+
loading: a(u),
|
|
324
|
+
pagination: !1,
|
|
325
|
+
rowKey: e.rowKey,
|
|
326
|
+
bordered: e.bordered,
|
|
327
|
+
scroll: a(q)
|
|
328
|
+
}, r.$attrs), {
|
|
329
|
+
bodyCell: g(({ column: t, record: p, index: H, text: j }) => [
|
|
330
|
+
t.dataIndex === "action" ? E(r.$slots, "action", {
|
|
331
|
+
key: 0,
|
|
332
|
+
record: p,
|
|
333
|
+
index: H
|
|
334
|
+
}, () => [
|
|
335
|
+
e.download && l(p) ? (h(), b("a", {
|
|
336
|
+
key: 0,
|
|
337
|
+
onClick: (be) => e.download.handleDownload(p)
|
|
338
|
+
}, "下载", 8, me)) : _("", !0)
|
|
339
|
+
], !0) : E(r.$slots, t.dataIndex, {
|
|
340
|
+
key: 1,
|
|
341
|
+
record: p,
|
|
342
|
+
index: H,
|
|
343
|
+
text: j
|
|
344
|
+
}, () => [
|
|
345
|
+
T(A(j), 1)
|
|
346
|
+
], !0)
|
|
347
|
+
]),
|
|
348
|
+
_: 3
|
|
349
|
+
}, 16, ["dataSource", "columns", "loading", "rowKey", "bordered", "scroll"]),
|
|
350
|
+
a(v) > 0 ? (h(), b("div", fe, [
|
|
351
|
+
f(X, {
|
|
352
|
+
current: a(c),
|
|
353
|
+
"onUpdate:current": s[1] || (s[1] = (t) => K(c) ? c.value = t : null),
|
|
354
|
+
pageSize: a(i),
|
|
355
|
+
"onUpdate:pageSize": s[2] || (s[2] = (t) => K(i) ? i.value = t : null),
|
|
356
|
+
total: a(v),
|
|
357
|
+
"show-size-changer": !0,
|
|
358
|
+
"show-quick-jumper": !0,
|
|
359
|
+
"show-total": (t) => `共 ${t} 条`,
|
|
360
|
+
onChange: a(F),
|
|
361
|
+
onShowSizeChange: a(F)
|
|
362
|
+
}, null, 8, ["current", "pageSize", "total", "show-total", "onChange", "onShowSizeChange"])
|
|
363
|
+
])) : _("", !0)
|
|
364
|
+
]);
|
|
365
|
+
};
|
|
366
|
+
}
|
|
367
|
+
}), ye = (e, o) => {
|
|
368
|
+
const l = e.__vccOpts || e;
|
|
369
|
+
for (const [u, d] of o)
|
|
370
|
+
l[u] = d;
|
|
371
|
+
return l;
|
|
372
|
+
}, we = /* @__PURE__ */ ye(ge, [["__scopeId", "data-v-13092ac7"]]), Ce = {
|
|
373
|
+
install(e) {
|
|
374
|
+
e.component("DownloadTable", we);
|
|
375
|
+
}
|
|
376
|
+
};
|
|
377
|
+
export {
|
|
378
|
+
we as DownloadTable,
|
|
379
|
+
Ce as VueExportTable,
|
|
380
|
+
Ce as default,
|
|
381
|
+
re as useAutoRefresh,
|
|
382
|
+
le as usePagination,
|
|
383
|
+
oe as useQuery,
|
|
384
|
+
ue as useTable
|
|
385
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vue-demi")):typeof define=="function"&&define.amd?define(["exports","vue","vue-demi"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u.VueExportTable={},u.Vue,u.VueDemi))})(this,(function(u,e,p){"use strict";function T(t){const a=p.reactive({});function l(){t.forEach(o=>{o.defaultValue!==void 0?a[o.name]=o.defaultValue:a[o.name]=o.type==="rangePicker"?[]:void 0})}l();function c(){const o={};return Object.keys(a).forEach(d=>{const i=a[d];if(i!=null&&i!==""){if(Array.isArray(i)&&i.length===0)return;o[d]=i}}),o}function f(){l()}function m(o,d){a[o]=d}return{filters:a,onSearch:c,onReset:f,setFilter:m}}function P(t=10){const a=p.ref(1),l=p.ref(t),c=p.computed(()=>({current:a.value,pageSize:l.value}));function f(o,d){a.value=o,d!==l.value&&(l.value=d,a.value=1)}function m(){a.value=1}return{currentPage:a,pageSize:l,pagination:c,onPageChange:f,resetPage:m}}function z(t,a){const l=p.ref(t.enabled??t.interval>0),c=p.ref(t.interval);let f=null;function m(){o(),!(!l.value||t.interval<=0)&&(c.value=t.interval,f=setInterval(()=>{c.value-=1,c.value<=0&&(c.value=t.interval,a())},1e3))}function o(){f&&(clearInterval(f),f=null)}function d(y){l.value=y??!l.value,l.value?m():(o(),c.value=t.interval)}function i(){l.value&&(c.value=t.interval)}function g(){t.pauseOnHidden&&(document.hidden?o():l.value&&m())}return p.onMounted(()=>{l.value&&t.interval>0&&(m(),t.pauseOnHidden&&document.addEventListener("visibilitychange",g))}),p.onUnmounted(()=>{o(),document.removeEventListener("visibilitychange",g)}),{enabled:l,countdown:c,toggle:d,resetCountdown:i}}function U(t){const a=p.ref(!1),l=p.ref([]),c=p.ref(0),{filters:f,onSearch:m,onReset:o,setFilter:d}=T(t.queryFields??[]),{currentPage:i,pageSize:g,pagination:y,onPageChange:V,resetPage:_}=P(t.pageSize??10),w=t.autoRefresh??{interval:0,enabled:!1},{enabled:x,countdown:E,toggle:B,resetCountdown:N}=z(w,()=>{r()});async function r(){a.value=!0;try{const k={page:i.value,pageSize:g.value,filters:m()},b=await t.fetchData(k);l.value=b.list,c.value=b.total}catch(k){console.error("[VueExportTable] fetch error:",k)}finally{a.value=!1}}function s(){_(),r(),N()}function C(){o(),_(),r()}function S(k,b){V(k,b),r(),N()}return p.onMounted(()=>{t.immediate!==!1&&r()}),{loading:a,data:l,total:c,filters:f,pagination:y,currentPage:i,pageSize:g,handleSearch:s,handleReset:C,setFilter:d,handlePageChange:S,refresh:r,autoRefreshEnabled:x,countdown:E,toggleAutoRefresh:B}}const O={class:"download-table-wrapper"},j={key:0,class:"query-form-wrapper"},D={class:"toolbar-wrapper"},K={class:"toolbar-left"},L={key:0,class:"table-title"},H={class:"toolbar-right"},Q={key:1,class:"countdown-text"},W=["onClick"],G={key:1,class:"pagination-wrapper"},q=((t,a)=>{const l=t.__vccOpts||t;for(const[c,f]of a)l[c]=f;return l})(e.defineComponent({__name:"DownloadTable",props:{columns:{},queryFields:{},fetchData:{},download:{default:void 0},autoRefresh:{},rowKey:{type:[String,Function],default:"id"},title:{},bordered:{type:Boolean,default:!0},pageSize:{default:10},showIndex:{type:Boolean,default:!1}},setup(t){const a=t,l=r=>a.download?a.download.canDownload?a.download.canDownload(r):r.status==="completed":!1,{loading:c,data:f,total:m,filters:o,currentPage:d,pageSize:i,handleSearch:g,handleReset:y,handlePageChange:V,refresh:_,autoRefreshEnabled:w,countdown:x,toggleAutoRefresh:E}=U({fetchData:a.fetchData,queryFields:a.queryFields,pageSize:a.pageSize,autoRefresh:a.autoRefresh,immediate:!0}),B=p.computed(()=>{const r=[];return a.showIndex&&r.push({title:"序号",dataIndex:"index",key:"index",width:80,align:"center",customRender:({index:s})=>(d.value-1)*i.value+s+1}),[...r,...a.columns]}),N=p.computed(()=>{const r=B.value.reduce((s,C)=>{const S=typeof C.width=="number"?C.width:0;return s+S},0);return r>0?{x:r}:void 0});return(r,s)=>{const C=e.resolveComponent("a-input"),S=e.resolveComponent("a-input-number"),k=e.resolveComponent("a-select"),b=e.resolveComponent("a-date-picker"),J=e.resolveComponent("a-range-picker"),$=e.resolveComponent("a-form-item"),R=e.resolveComponent("a-button"),I=e.resolveComponent("a-space"),X=e.resolveComponent("a-form"),Y=e.resolveComponent("a-switch"),Z=e.resolveComponent("a-table"),v=e.resolveComponent("a-pagination");return e.openBlock(),e.createElementBlock("div",O,[t.queryFields&&t.queryFields.length>0?(e.openBlock(),e.createElementBlock("div",j,[e.renderSlot(r.$slots,"query-form",{filters:e.unref(o),handleSearch:e.unref(g),handleReset:e.unref(y)},()=>[e.createVNode(X,{layout:"inline",model:e.unref(o)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.queryFields,n=>(e.openBlock(),e.createBlock($,{key:n.name,label:n.label},{default:e.withCtx(()=>[n.type==="input"?(e.openBlock(),e.createBlock(C,{key:0,value:e.unref(o)[n.name],"onUpdate:value":h=>e.unref(o)[n.name]=h,placeholder:n.placeholder||`请输入${n.label}`,"allow-clear":""},null,8,["value","onUpdate:value","placeholder"])):n.type==="number"?(e.openBlock(),e.createBlock(S,{key:1,value:e.unref(o)[n.name],"onUpdate:value":h=>e.unref(o)[n.name]=h,placeholder:n.placeholder||`请输入${n.label}`,style:{width:"180px"}},null,8,["value","onUpdate:value","placeholder"])):n.type==="select"?(e.openBlock(),e.createBlock(k,{key:2,value:e.unref(o)[n.name],"onUpdate:value":h=>e.unref(o)[n.name]=h,placeholder:n.placeholder||`请选择${n.label}`,options:n.options,"allow-clear":"",style:{"min-width":"150px"}},null,8,["value","onUpdate:value","placeholder","options"])):n.type==="datePicker"?(e.openBlock(),e.createBlock(b,{key:3,value:e.unref(o)[n.name],"onUpdate:value":h=>e.unref(o)[n.name]=h,placeholder:n.placeholder||`请选择${n.label}`,style:{width:"180px"}},null,8,["value","onUpdate:value","placeholder"])):n.type==="rangePicker"?(e.openBlock(),e.createBlock(J,{key:4,value:e.unref(o)[n.name],"onUpdate:value":h=>e.unref(o)[n.name]=h,placeholder:[n.placeholder||"开始日期",n.placeholder||"结束日期"],style:{width:"240px"}},null,8,["value","onUpdate:value","placeholder"])):e.createCommentVNode("",!0)]),_:2},1032,["label"]))),128)),e.createVNode($,null,{default:e.withCtx(()=>[e.createVNode(I,null,{default:e.withCtx(()=>[e.createVNode(R,{type:"primary",onClick:e.unref(g)},{default:e.withCtx(()=>[...s[3]||(s[3]=[e.createTextVNode("查询",-1)])]),_:1},8,["onClick"]),e.createVNode(R,{onClick:e.unref(y)},{default:e.withCtx(()=>[...s[4]||(s[4]=[e.createTextVNode("重置",-1)])]),_:1},8,["onClick"])]),_:1})]),_:1})]),_:1},8,["model"])],!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",D,[e.renderSlot(r.$slots,"toolbar",{loading:e.unref(c),refresh:e.unref(_)},()=>[e.createElementVNode("div",K,[t.title?(e.openBlock(),e.createElementBlock("span",L,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0)]),e.createElementVNode("div",H,[e.createVNode(I,null,{default:e.withCtx(()=>[e.createVNode(R,{loading:e.unref(c),onClick:e.unref(_)},{default:e.withCtx(()=>[...s[5]||(s[5]=[e.createElementVNode("svg",{class:"icon-svg",viewBox:"64 64 896 896",width:"1em",height:"1em",fill:"currentColor"},[e.createElementVNode("path",{d:"M909.1 209.3l-56.4 44.1C775.8 155.1 653.5 96 512 96 282.7 96 96 282.7 96 512s186.7 416 416 416c165.3 0 309.1-96.4 376-236.1 8.3-17.2-4.3-37.1-23.1-37.1H745.6c-9.2 0-17.2 5.8-20.3 14.3C680.5 773.5 600.5 832 512 832c-176.7 0-320-143.3-320-320s143.3-320 320-320c88.5 0 168.5 36.1 226.4 94.3L704 356.3c-4.7-4.7-1.3-12.7 5.3-13.1l193.7-12.5c6.6-.4 12.3 4.9 12.3 11.5v193.7c0 6.6-8 10-12.7 5.3z"})],-1),e.createTextVNode(" 刷新 ",-1)])]),_:1},8,["loading","onClick"]),t.autoRefresh?(e.openBlock(),e.createBlock(Y,{key:0,checked:e.unref(w),"onUpdate:checked":s[0]||(s[0]=n=>e.isRef(w)?w.value=n:null),"checked-children":"自动刷新","un-checked-children":"自动刷新",onChange:e.unref(E)},null,8,["checked","onChange"])):e.createCommentVNode("",!0),t.autoRefresh&&e.unref(w)?(e.openBlock(),e.createElementBlock("span",Q,e.toDisplayString(e.unref(x))+"s ",1)):e.createCommentVNode("",!0)]),_:1})])],!0)]),e.createVNode(Z,e.mergeProps({dataSource:e.unref(f),columns:e.unref(B),loading:e.unref(c),pagination:!1,rowKey:t.rowKey,bordered:t.bordered,scroll:e.unref(N)},r.$attrs),{bodyCell:e.withCtx(({column:n,record:h,index:A,text:M})=>[n.dataIndex==="action"?e.renderSlot(r.$slots,"action",{key:0,record:h,index:A},()=>[t.download&&l(h)?(e.openBlock(),e.createElementBlock("a",{key:0,onClick:ne=>t.download.handleDownload(h)},"下载",8,W)):e.createCommentVNode("",!0)],!0):e.renderSlot(r.$slots,n.dataIndex,{key:1,record:h,index:A,text:M},()=>[e.createTextVNode(e.toDisplayString(M),1)],!0)]),_:3},16,["dataSource","columns","loading","rowKey","bordered","scroll"]),e.unref(m)>0?(e.openBlock(),e.createElementBlock("div",G,[e.createVNode(v,{current:e.unref(d),"onUpdate:current":s[1]||(s[1]=n=>e.isRef(d)?d.value=n:null),pageSize:e.unref(i),"onUpdate:pageSize":s[2]||(s[2]=n=>e.isRef(i)?i.value=n:null),total:e.unref(m),"show-size-changer":!0,"show-quick-jumper":!0,"show-total":n=>`共 ${n} 条`,onChange:e.unref(V),onShowSizeChange:e.unref(V)},null,8,["current","pageSize","total","show-total","onChange","onShowSizeChange"])])):e.createCommentVNode("",!0)])}}}),[["__scopeId","data-v-13092ac7"]]),F={install(t){t.component("DownloadTable",q)}};u.DownloadTable=q,u.VueExportTable=F,u.default=F,u.useAutoRefresh=z,u.usePagination=P,u.useQuery=T,u.useTable=U,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("vue-demi"),t=require("vue");function D(e){const a=u.reactive({});function n(){e.forEach(l=>{l.defaultValue!==void 0?a[l.name]=l.defaultValue:a[l.name]=l.type==="rangePicker"?[]:void 0})}n();function s(){const l={};return Object.keys(a).forEach(d=>{const i=a[d];if(i!=null&&i!==""){if(Array.isArray(i)&&i.length===0)return;l[d]=i}}),l}function c(){n()}function m(l,d){a[l]=d}return{filters:a,onSearch:s,onReset:c,setFilter:m}}function E(e=10){const a=u.ref(1),n=u.ref(e),s=u.computed(()=>({current:a.value,pageSize:n.value}));function c(l,d){a.value=l,d!==n.value&&(n.value=d,a.value=1)}function m(){a.value=1}return{currentPage:a,pageSize:n,pagination:s,onPageChange:c,resetPage:m}}function N(e,a){const n=u.ref(e.enabled??e.interval>0),s=u.ref(e.interval);let c=null;function m(){l(),!(!n.value||e.interval<=0)&&(s.value=e.interval,c=setInterval(()=>{s.value-=1,s.value<=0&&(s.value=e.interval,a())},1e3))}function l(){c&&(clearInterval(c),c=null)}function d(g){n.value=g??!n.value,n.value?m():(l(),s.value=e.interval)}function i(){n.value&&(s.value=e.interval)}function p(){e.pauseOnHidden&&(document.hidden?l():n.value&&m())}return u.onMounted(()=>{n.value&&e.interval>0&&(m(),e.pauseOnHidden&&document.addEventListener("visibilitychange",p))}),u.onUnmounted(()=>{l(),document.removeEventListener("visibilitychange",p)}),{enabled:n,countdown:s,toggle:d,resetCountdown:i}}function R(e){const a=u.ref(!1),n=u.ref([]),s=u.ref(0),{filters:c,onSearch:m,onReset:l,setFilter:d}=D(e.queryFields??[]),{currentPage:i,pageSize:p,pagination:g,onPageChange:v,resetPage:h}=E(e.pageSize??10),y=e.autoRefresh??{interval:0,enabled:!1},{enabled:C,countdown:k,toggle:b,resetCountdown:w}=N(y,()=>{o()});async function o(){a.value=!0;try{const V={page:i.value,pageSize:p.value,filters:m()},B=await e.fetchData(V);n.value=B.list,s.value=B.total}catch(V){console.error("[VueExportTable] fetch error:",V)}finally{a.value=!1}}function r(){h(),o(),w()}function f(){l(),h(),o()}function S(V,B){v(V,B),o(),w()}return u.onMounted(()=>{e.immediate!==!1&&o()}),{loading:a,data:n,total:s,filters:c,pagination:g,currentPage:i,pageSize:p,handleSearch:r,handleReset:f,setFilter:d,handlePageChange:S,refresh:o,autoRefreshEnabled:C,countdown:k,toggleAutoRefresh:b}}const $=u.defineComponent({name:"DownloadTable",props:{columns:{type:Array,required:!0},queryFields:{type:Array,default:()=>[]},fetchData:{type:Function,required:!0},download:{type:Object,default:void 0},autoRefresh:{type:Object,default:void 0},rowKey:{type:[String,Function],default:"id"},title:{type:String,default:""},bordered:{type:Boolean,default:!0},pageSize:{type:Number,default:10},showIndex:{type:Boolean,default:!1},immediate:{type:Boolean,default:!0}},setup(e,{slots:a}){const{loading:n,data:s,total:c,filters:m,currentPage:l,pageSize:d,handleSearch:i,handleReset:p,handlePageChange:g,refresh:v,autoRefreshEnabled:h,countdown:y,toggleAutoRefresh:C}=R({fetchData:e.fetchData,queryFields:e.queryFields,pageSize:e.pageSize,autoRefresh:e.autoRefresh,immediate:e.immediate}),k=u.computed(()=>{const o=[];return e.showIndex&&o.push({title:"序号",dataIndex:"index",key:"index",width:80,align:"center",customRender:({index:r})=>(l.value-1)*d.value+r+1}),[...o,...e.columns]}),b=u.computed(()=>{const o=k.value.reduce((r,f)=>{const S=typeof f.width=="number"?f.width:0;return r+S},0);return o>0?{x:o}:void 0}),w=u.computed(()=>{const o=["query-form","toolbar"],r={};return Object.keys(a).forEach(f=>{o.includes(f)||(r[f]=!0)}),r});return{loading:n,data:s,total:c,filters:m,currentPage:l,pageSize:d,handleSearch:i,handleReset:p,handlePageChange:g,refresh:v,download:u.computed(()=>e.download),canDownload:o=>e.download?e.download.canDownload?e.download.canDownload(o):o&&o.status==="completed":!1,autoRefreshEnabled:h,countdown:y,toggleAutoRefresh:C,computedColumns:k,scroll:b,filteredSlots:w}}}),q=(e,a)=>{const n=e.__vccOpts||e;for(const[s,c]of a)n[s]=c;return n},z={class:"download-table-wrapper"},F={key:0,class:"query-form-wrapper"},U={class:"toolbar-wrapper"},_={class:"toolbar-left"},A={key:0,class:"table-title"},O={class:"toolbar-right"},j={key:1,class:"countdown-text"},I={key:1,class:"pagination-wrapper"};function L(e,a,n,s,c,m){const l=t.resolveComponent("a-input"),d=t.resolveComponent("a-input-number"),i=t.resolveComponent("a-select"),p=t.resolveComponent("a-date-picker"),g=t.resolveComponent("a-range-picker"),v=t.resolveComponent("a-form-item"),h=t.resolveComponent("a-button"),y=t.resolveComponent("a-space"),C=t.resolveComponent("a-form"),k=t.resolveComponent("a-switch"),b=t.resolveComponent("a-table"),w=t.resolveComponent("a-pagination");return t.openBlock(),t.createElementBlock("div",z,[e.queryFields&&e.queryFields.length>0?(t.openBlock(),t.createElementBlock("div",F,[t.renderSlot(e.$slots,"query-form",{filters:e.filters,handleSearch:e.handleSearch,handleReset:e.handleReset},()=>[t.createVNode(C,{layout:"inline",model:e.filters},{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.queryFields,o=>(t.openBlock(),t.createBlock(v,{key:o.name,label:o.label},{default:t.withCtx(()=>[o.type==="input"?(t.openBlock(),t.createBlock(l,{key:0,modelValue:e.filters[o.name],"onUpdate:modelValue":r=>e.filters[o.name]=r,placeholder:o.placeholder||`请输入${o.label}`,"allow-clear":""},null,8,["modelValue","onUpdate:modelValue","placeholder"])):o.type==="number"?(t.openBlock(),t.createBlock(d,{key:1,modelValue:e.filters[o.name],"onUpdate:modelValue":r=>e.filters[o.name]=r,placeholder:o.placeholder||`请输入${o.label}`,style:{width:"180px"}},null,8,["modelValue","onUpdate:modelValue","placeholder"])):o.type==="select"?(t.openBlock(),t.createBlock(i,{key:2,modelValue:e.filters[o.name],"onUpdate:modelValue":r=>e.filters[o.name]=r,placeholder:o.placeholder||`请选择${o.label}`,options:o.options,"allow-clear":"",style:{"min-width":"150px"}},null,8,["modelValue","onUpdate:modelValue","placeholder","options"])):o.type==="datePicker"?(t.openBlock(),t.createBlock(p,{key:3,modelValue:e.filters[o.name],"onUpdate:modelValue":r=>e.filters[o.name]=r,placeholder:o.placeholder||`请选择${o.label}`,style:{width:"180px"}},null,8,["modelValue","onUpdate:modelValue","placeholder"])):o.type==="rangePicker"?(t.openBlock(),t.createBlock(g,{key:4,modelValue:e.filters[o.name],"onUpdate:modelValue":r=>e.filters[o.name]=r,placeholder:[o.placeholder||"开始日期",o.placeholder||"结束日期"],style:{width:"240px"}},null,8,["modelValue","onUpdate:modelValue","placeholder"])):t.createCommentVNode("",!0)]),_:2},1032,["label"]))),128)),t.createVNode(v,null,{default:t.withCtx(()=>[t.createVNode(y,null,{default:t.withCtx(()=>[t.createVNode(h,{type:"primary",onClick:e.handleSearch},{default:t.withCtx(()=>[...a[1]||(a[1]=[t.createTextVNode("查询",-1)])]),_:1},8,["onClick"]),t.createVNode(h,{onClick:e.handleReset},{default:t.withCtx(()=>[...a[2]||(a[2]=[t.createTextVNode("重置",-1)])]),_:1},8,["onClick"])]),_:1})]),_:1})]),_:1},8,["model"])],!0)])):t.createCommentVNode("",!0),t.createElementVNode("div",U,[t.renderSlot(e.$slots,"toolbar",{loading:e.loading,refresh:e.refresh},()=>[t.createElementVNode("div",_,[e.title?(t.openBlock(),t.createElementBlock("span",A,t.toDisplayString(e.title),1)):t.createCommentVNode("",!0)]),t.createElementVNode("div",O,[t.createVNode(y,null,{default:t.withCtx(()=>[t.createVNode(h,{loading:e.loading,onClick:e.refresh},{default:t.withCtx(()=>[...a[3]||(a[3]=[t.createElementVNode("svg",{class:"icon-refresh",viewBox:"64 64 896 896",width:"1em",height:"1em",fill:"currentColor"},[t.createElementVNode("path",{d:"M909.1 209.3l-56.4 44.1C775.8 155.1 653.5 96 512 96 282.7 96 96 282.7 96 512s186.7 416 416 416c165.3 0 309.1-96.4 376-236.1 8.3-17.2-4.3-37.1-23.1-37.1H745.6c-9.2 0-17.2 5.8-20.3 14.3C680.5 773.5 600.5 832 512 832c-176.7 0-320-143.3-320-320s143.3-320 320-320c88.5 0 168.5 36.1 226.4 94.3L704 356.3c-4.7-4.7-1.3-12.7 5.3-13.1l193.7-12.5c6.6-.4 12.3 4.9 12.3 11.5v193.7c0 6.6-8 10-12.7 5.3z"})],-1),t.createTextVNode(" 刷新 ",-1)])]),_:1},8,["loading","onClick"]),e.autoRefresh?(t.openBlock(),t.createBlock(k,{key:0,checked:e.autoRefreshEnabled,"checked-children":"自动刷新","un-checked-children":"自动刷新",onChange:e.toggleAutoRefresh},null,8,["checked","onChange"])):t.createCommentVNode("",!0),e.autoRefresh&&e.autoRefreshEnabled?(t.openBlock(),t.createElementBlock("span",j,t.toDisplayString(e.countdown)+"s ",1)):t.createCommentVNode("",!0)]),_:1})])],!0)]),t.createVNode(b,t.mergeProps({"data-source":e.data,columns:e.computedColumns,loading:e.loading,pagination:!1,"row-key":e.rowKey,bordered:e.bordered,scroll:e.scroll},e.$attrs,t.toHandlers(e.$listeners)),{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.filteredSlots,(o,r)=>(t.openBlock(),t.createElementBlock(t.Fragment,null,[r==="action"?t.renderSlot(e.$slots,"action",{key:0,record:e.slotData&&e.slotData.record,index:e.slotData&&e.slotData.index},()=>[e.download&&e.canDownload(e.slotData&&e.slotData.record)?(t.openBlock(),t.createElementBlock("a",{key:0,onClick:a[0]||(a[0]=f=>e.download.handleDownload(e.slotData.record))},"下载")):t.createCommentVNode("",!0)],!0):t.renderSlot(e.$slots,r,t.mergeProps({key:1,ref_for:!0},e.slotData||{}),()=>[t.createTextVNode(t.toDisplayString(e.slotData?e.slotData.text:""),1)],!0)],64))),256))]),_:3},16,["data-source","columns","loading","row-key","bordered","scroll"]),e.total>0?(t.openBlock(),t.createElementBlock("div",I,[t.createVNode(w,{current:e.currentPage,"page-size":e.pageSize,total:e.total,"show-size-changer":!0,"show-quick-jumper":!0,"show-total":o=>`共 ${o} 条`,onChange:e.handlePageChange,onShowSizeChange:e.handlePageChange},null,8,["current","page-size","total","show-total","onChange","onShowSizeChange"])])):t.createCommentVNode("",!0)])}const P=q($,[["render",L],["__scopeId","data-v-c29396f5"]]),T={install(e){e.component("DownloadTable",P)}};exports.DownloadTable=P;exports.VueExportTable=T;exports.default=T;exports.useAutoRefresh=N;exports.usePagination=E;exports.useQuery=D;exports.useTable=R;
|
|
@@ -0,0 +1,442 @@
|
|
|
1
|
+
import { reactive as N, ref as C, computed as E, onMounted as j, onUnmounted as H, defineComponent as L } from "vue-demi";
|
|
2
|
+
import { resolveComponent as h, openBlock as s, createElementBlock as m, renderSlot as U, createVNode as f, withCtx as g, Fragment as _, renderList as O, createBlock as b, createCommentVNode as k, createTextVNode as T, createElementVNode as q, toDisplayString as B, mergeProps as I, toHandlers as K } from "vue";
|
|
3
|
+
function M(e) {
|
|
4
|
+
const t = N({});
|
|
5
|
+
function n() {
|
|
6
|
+
e.forEach((o) => {
|
|
7
|
+
o.defaultValue !== void 0 ? t[o.name] = o.defaultValue : t[o.name] = o.type === "rangePicker" ? [] : void 0;
|
|
8
|
+
});
|
|
9
|
+
}
|
|
10
|
+
n();
|
|
11
|
+
function r() {
|
|
12
|
+
const o = {};
|
|
13
|
+
return Object.keys(t).forEach((u) => {
|
|
14
|
+
const i = t[u];
|
|
15
|
+
if (i != null && i !== "") {
|
|
16
|
+
if (Array.isArray(i) && i.length === 0) return;
|
|
17
|
+
o[u] = i;
|
|
18
|
+
}
|
|
19
|
+
}), o;
|
|
20
|
+
}
|
|
21
|
+
function d() {
|
|
22
|
+
n();
|
|
23
|
+
}
|
|
24
|
+
function c(o, u) {
|
|
25
|
+
t[o] = u;
|
|
26
|
+
}
|
|
27
|
+
return { filters: t, onSearch: r, onReset: d, setFilter: c };
|
|
28
|
+
}
|
|
29
|
+
function Q(e = 10) {
|
|
30
|
+
const t = C(1), n = C(e), r = E(() => ({
|
|
31
|
+
current: t.value,
|
|
32
|
+
pageSize: n.value
|
|
33
|
+
}));
|
|
34
|
+
function d(o, u) {
|
|
35
|
+
t.value = o, u !== n.value && (n.value = u, t.value = 1);
|
|
36
|
+
}
|
|
37
|
+
function c() {
|
|
38
|
+
t.value = 1;
|
|
39
|
+
}
|
|
40
|
+
return { currentPage: t, pageSize: n, pagination: r, onPageChange: d, resetPage: c };
|
|
41
|
+
}
|
|
42
|
+
function W(e, t) {
|
|
43
|
+
const n = C(e.enabled ?? e.interval > 0), r = C(e.interval);
|
|
44
|
+
let d = null;
|
|
45
|
+
function c() {
|
|
46
|
+
o(), !(!n.value || e.interval <= 0) && (r.value = e.interval, d = setInterval(() => {
|
|
47
|
+
r.value -= 1, r.value <= 0 && (r.value = e.interval, t());
|
|
48
|
+
}, 1e3));
|
|
49
|
+
}
|
|
50
|
+
function o() {
|
|
51
|
+
d && (clearInterval(d), d = null);
|
|
52
|
+
}
|
|
53
|
+
function u(w) {
|
|
54
|
+
n.value = w ?? !n.value, n.value ? c() : (o(), r.value = e.interval);
|
|
55
|
+
}
|
|
56
|
+
function i() {
|
|
57
|
+
n.value && (r.value = e.interval);
|
|
58
|
+
}
|
|
59
|
+
function p() {
|
|
60
|
+
e.pauseOnHidden && (document.hidden ? o() : n.value && c());
|
|
61
|
+
}
|
|
62
|
+
return j(() => {
|
|
63
|
+
n.value && e.interval > 0 && (c(), e.pauseOnHidden && document.addEventListener("visibilitychange", p));
|
|
64
|
+
}), H(() => {
|
|
65
|
+
o(), document.removeEventListener("visibilitychange", p);
|
|
66
|
+
}), { enabled: n, countdown: r, toggle: u, resetCountdown: i };
|
|
67
|
+
}
|
|
68
|
+
function G(e) {
|
|
69
|
+
const t = C(!1), n = C([]), r = C(0), { filters: d, onSearch: c, onReset: o, setFilter: u } = M(e.queryFields ?? []), { currentPage: i, pageSize: p, pagination: w, onPageChange: V, resetPage: v } = Q(e.pageSize ?? 10), S = e.autoRefresh ?? {
|
|
70
|
+
interval: 0,
|
|
71
|
+
enabled: !1
|
|
72
|
+
}, { enabled: P, countdown: D, toggle: $, resetCountdown: R } = W(
|
|
73
|
+
S,
|
|
74
|
+
() => {
|
|
75
|
+
a();
|
|
76
|
+
}
|
|
77
|
+
);
|
|
78
|
+
async function a() {
|
|
79
|
+
t.value = !0;
|
|
80
|
+
try {
|
|
81
|
+
const z = {
|
|
82
|
+
page: i.value,
|
|
83
|
+
pageSize: p.value,
|
|
84
|
+
filters: c()
|
|
85
|
+
}, F = await e.fetchData(z);
|
|
86
|
+
n.value = F.list, r.value = F.total;
|
|
87
|
+
} catch (z) {
|
|
88
|
+
console.error("[VueExportTable] fetch error:", z);
|
|
89
|
+
} finally {
|
|
90
|
+
t.value = !1;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
function l() {
|
|
94
|
+
v(), a(), R();
|
|
95
|
+
}
|
|
96
|
+
function y() {
|
|
97
|
+
o(), v(), a();
|
|
98
|
+
}
|
|
99
|
+
function A(z, F) {
|
|
100
|
+
V(z, F), a(), R();
|
|
101
|
+
}
|
|
102
|
+
return j(() => {
|
|
103
|
+
e.immediate !== !1 && a();
|
|
104
|
+
}), {
|
|
105
|
+
// 状态
|
|
106
|
+
loading: t,
|
|
107
|
+
data: n,
|
|
108
|
+
total: r,
|
|
109
|
+
filters: d,
|
|
110
|
+
pagination: w,
|
|
111
|
+
currentPage: i,
|
|
112
|
+
pageSize: p,
|
|
113
|
+
// 查询
|
|
114
|
+
handleSearch: l,
|
|
115
|
+
handleReset: y,
|
|
116
|
+
setFilter: u,
|
|
117
|
+
// 分页
|
|
118
|
+
handlePageChange: A,
|
|
119
|
+
// 刷新
|
|
120
|
+
refresh: a,
|
|
121
|
+
// 自动刷新
|
|
122
|
+
autoRefreshEnabled: P,
|
|
123
|
+
countdown: D,
|
|
124
|
+
toggleAutoRefresh: $
|
|
125
|
+
};
|
|
126
|
+
}
|
|
127
|
+
const J = L({
|
|
128
|
+
name: "DownloadTable",
|
|
129
|
+
props: {
|
|
130
|
+
columns: {
|
|
131
|
+
type: Array,
|
|
132
|
+
required: !0
|
|
133
|
+
},
|
|
134
|
+
queryFields: {
|
|
135
|
+
type: Array,
|
|
136
|
+
default: () => []
|
|
137
|
+
},
|
|
138
|
+
fetchData: {
|
|
139
|
+
type: Function,
|
|
140
|
+
required: !0
|
|
141
|
+
},
|
|
142
|
+
download: {
|
|
143
|
+
type: Object,
|
|
144
|
+
default: void 0
|
|
145
|
+
},
|
|
146
|
+
autoRefresh: {
|
|
147
|
+
type: Object,
|
|
148
|
+
default: void 0
|
|
149
|
+
},
|
|
150
|
+
rowKey: {
|
|
151
|
+
type: [String, Function],
|
|
152
|
+
default: "id"
|
|
153
|
+
},
|
|
154
|
+
title: {
|
|
155
|
+
type: String,
|
|
156
|
+
default: ""
|
|
157
|
+
},
|
|
158
|
+
bordered: {
|
|
159
|
+
type: Boolean,
|
|
160
|
+
default: !0
|
|
161
|
+
},
|
|
162
|
+
pageSize: {
|
|
163
|
+
type: Number,
|
|
164
|
+
default: 10
|
|
165
|
+
},
|
|
166
|
+
showIndex: {
|
|
167
|
+
type: Boolean,
|
|
168
|
+
default: !1
|
|
169
|
+
},
|
|
170
|
+
immediate: {
|
|
171
|
+
type: Boolean,
|
|
172
|
+
default: !0
|
|
173
|
+
}
|
|
174
|
+
},
|
|
175
|
+
setup(e, { slots: t }) {
|
|
176
|
+
const {
|
|
177
|
+
loading: n,
|
|
178
|
+
data: r,
|
|
179
|
+
total: d,
|
|
180
|
+
filters: c,
|
|
181
|
+
currentPage: o,
|
|
182
|
+
pageSize: u,
|
|
183
|
+
handleSearch: i,
|
|
184
|
+
handleReset: p,
|
|
185
|
+
handlePageChange: w,
|
|
186
|
+
refresh: V,
|
|
187
|
+
autoRefreshEnabled: v,
|
|
188
|
+
countdown: S,
|
|
189
|
+
toggleAutoRefresh: P
|
|
190
|
+
} = G({
|
|
191
|
+
fetchData: e.fetchData,
|
|
192
|
+
queryFields: e.queryFields,
|
|
193
|
+
pageSize: e.pageSize,
|
|
194
|
+
autoRefresh: e.autoRefresh,
|
|
195
|
+
immediate: e.immediate
|
|
196
|
+
}), D = E(() => {
|
|
197
|
+
const a = [];
|
|
198
|
+
return e.showIndex && a.push({
|
|
199
|
+
title: "序号",
|
|
200
|
+
dataIndex: "index",
|
|
201
|
+
key: "index",
|
|
202
|
+
width: 80,
|
|
203
|
+
align: "center",
|
|
204
|
+
customRender: ({ index: l }) => (o.value - 1) * u.value + l + 1
|
|
205
|
+
}), [...a, ...e.columns];
|
|
206
|
+
}), $ = E(() => {
|
|
207
|
+
const a = D.value.reduce((l, y) => {
|
|
208
|
+
const A = typeof y.width == "number" ? y.width : 0;
|
|
209
|
+
return l + A;
|
|
210
|
+
}, 0);
|
|
211
|
+
return a > 0 ? { x: a } : void 0;
|
|
212
|
+
}), R = E(() => {
|
|
213
|
+
const a = ["query-form", "toolbar"], l = {};
|
|
214
|
+
return Object.keys(t).forEach((y) => {
|
|
215
|
+
a.includes(y) || (l[y] = !0);
|
|
216
|
+
}), l;
|
|
217
|
+
});
|
|
218
|
+
return {
|
|
219
|
+
loading: n,
|
|
220
|
+
data: r,
|
|
221
|
+
total: d,
|
|
222
|
+
filters: c,
|
|
223
|
+
currentPage: o,
|
|
224
|
+
pageSize: u,
|
|
225
|
+
handleSearch: i,
|
|
226
|
+
handleReset: p,
|
|
227
|
+
handlePageChange: w,
|
|
228
|
+
refresh: V,
|
|
229
|
+
download: E(() => e.download),
|
|
230
|
+
canDownload: (a) => e.download ? e.download.canDownload ? e.download.canDownload(a) : a && a.status === "completed" : !1,
|
|
231
|
+
autoRefreshEnabled: v,
|
|
232
|
+
countdown: S,
|
|
233
|
+
toggleAutoRefresh: P,
|
|
234
|
+
computedColumns: D,
|
|
235
|
+
scroll: $,
|
|
236
|
+
filteredSlots: R
|
|
237
|
+
};
|
|
238
|
+
}
|
|
239
|
+
}), X = (e, t) => {
|
|
240
|
+
const n = e.__vccOpts || e;
|
|
241
|
+
for (const [r, d] of t)
|
|
242
|
+
n[r] = d;
|
|
243
|
+
return n;
|
|
244
|
+
}, Y = { class: "download-table-wrapper" }, Z = {
|
|
245
|
+
key: 0,
|
|
246
|
+
class: "query-form-wrapper"
|
|
247
|
+
}, x = { class: "toolbar-wrapper" }, ee = { class: "toolbar-left" }, ae = {
|
|
248
|
+
key: 0,
|
|
249
|
+
class: "table-title"
|
|
250
|
+
}, te = { class: "toolbar-right" }, ne = {
|
|
251
|
+
key: 1,
|
|
252
|
+
class: "countdown-text"
|
|
253
|
+
}, oe = {
|
|
254
|
+
key: 1,
|
|
255
|
+
class: "pagination-wrapper"
|
|
256
|
+
};
|
|
257
|
+
function le(e, t, n, r, d, c) {
|
|
258
|
+
const o = h("a-input"), u = h("a-input-number"), i = h("a-select"), p = h("a-date-picker"), w = h("a-range-picker"), V = h("a-form-item"), v = h("a-button"), S = h("a-space"), P = h("a-form"), D = h("a-switch"), $ = h("a-table"), R = h("a-pagination");
|
|
259
|
+
return s(), m("div", Y, [
|
|
260
|
+
e.queryFields && e.queryFields.length > 0 ? (s(), m("div", Z, [
|
|
261
|
+
U(e.$slots, "query-form", {
|
|
262
|
+
filters: e.filters,
|
|
263
|
+
handleSearch: e.handleSearch,
|
|
264
|
+
handleReset: e.handleReset
|
|
265
|
+
}, () => [
|
|
266
|
+
f(P, {
|
|
267
|
+
layout: "inline",
|
|
268
|
+
model: e.filters
|
|
269
|
+
}, {
|
|
270
|
+
default: g(() => [
|
|
271
|
+
(s(!0), m(_, null, O(e.queryFields, (a) => (s(), b(V, {
|
|
272
|
+
key: a.name,
|
|
273
|
+
label: a.label
|
|
274
|
+
}, {
|
|
275
|
+
default: g(() => [
|
|
276
|
+
a.type === "input" ? (s(), b(o, {
|
|
277
|
+
key: 0,
|
|
278
|
+
modelValue: e.filters[a.name],
|
|
279
|
+
"onUpdate:modelValue": (l) => e.filters[a.name] = l,
|
|
280
|
+
placeholder: a.placeholder || `请输入${a.label}`,
|
|
281
|
+
"allow-clear": ""
|
|
282
|
+
}, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder"])) : a.type === "number" ? (s(), b(u, {
|
|
283
|
+
key: 1,
|
|
284
|
+
modelValue: e.filters[a.name],
|
|
285
|
+
"onUpdate:modelValue": (l) => e.filters[a.name] = l,
|
|
286
|
+
placeholder: a.placeholder || `请输入${a.label}`,
|
|
287
|
+
style: { width: "180px" }
|
|
288
|
+
}, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder"])) : a.type === "select" ? (s(), b(i, {
|
|
289
|
+
key: 2,
|
|
290
|
+
modelValue: e.filters[a.name],
|
|
291
|
+
"onUpdate:modelValue": (l) => e.filters[a.name] = l,
|
|
292
|
+
placeholder: a.placeholder || `请选择${a.label}`,
|
|
293
|
+
options: a.options,
|
|
294
|
+
"allow-clear": "",
|
|
295
|
+
style: { "min-width": "150px" }
|
|
296
|
+
}, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder", "options"])) : a.type === "datePicker" ? (s(), b(p, {
|
|
297
|
+
key: 3,
|
|
298
|
+
modelValue: e.filters[a.name],
|
|
299
|
+
"onUpdate:modelValue": (l) => e.filters[a.name] = l,
|
|
300
|
+
placeholder: a.placeholder || `请选择${a.label}`,
|
|
301
|
+
style: { width: "180px" }
|
|
302
|
+
}, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder"])) : a.type === "rangePicker" ? (s(), b(w, {
|
|
303
|
+
key: 4,
|
|
304
|
+
modelValue: e.filters[a.name],
|
|
305
|
+
"onUpdate:modelValue": (l) => e.filters[a.name] = l,
|
|
306
|
+
placeholder: [a.placeholder || "开始日期", a.placeholder || "结束日期"],
|
|
307
|
+
style: { width: "240px" }
|
|
308
|
+
}, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder"])) : k("", !0)
|
|
309
|
+
]),
|
|
310
|
+
_: 2
|
|
311
|
+
}, 1032, ["label"]))), 128)),
|
|
312
|
+
f(V, null, {
|
|
313
|
+
default: g(() => [
|
|
314
|
+
f(S, null, {
|
|
315
|
+
default: g(() => [
|
|
316
|
+
f(v, {
|
|
317
|
+
type: "primary",
|
|
318
|
+
onClick: e.handleSearch
|
|
319
|
+
}, {
|
|
320
|
+
default: g(() => [...t[1] || (t[1] = [
|
|
321
|
+
T("查询", -1)
|
|
322
|
+
])]),
|
|
323
|
+
_: 1
|
|
324
|
+
}, 8, ["onClick"]),
|
|
325
|
+
f(v, { onClick: e.handleReset }, {
|
|
326
|
+
default: g(() => [...t[2] || (t[2] = [
|
|
327
|
+
T("重置", -1)
|
|
328
|
+
])]),
|
|
329
|
+
_: 1
|
|
330
|
+
}, 8, ["onClick"])
|
|
331
|
+
]),
|
|
332
|
+
_: 1
|
|
333
|
+
})
|
|
334
|
+
]),
|
|
335
|
+
_: 1
|
|
336
|
+
})
|
|
337
|
+
]),
|
|
338
|
+
_: 1
|
|
339
|
+
}, 8, ["model"])
|
|
340
|
+
], !0)
|
|
341
|
+
])) : k("", !0),
|
|
342
|
+
q("div", x, [
|
|
343
|
+
U(e.$slots, "toolbar", {
|
|
344
|
+
loading: e.loading,
|
|
345
|
+
refresh: e.refresh
|
|
346
|
+
}, () => [
|
|
347
|
+
q("div", ee, [
|
|
348
|
+
e.title ? (s(), m("span", ae, B(e.title), 1)) : k("", !0)
|
|
349
|
+
]),
|
|
350
|
+
q("div", te, [
|
|
351
|
+
f(S, null, {
|
|
352
|
+
default: g(() => [
|
|
353
|
+
f(v, {
|
|
354
|
+
loading: e.loading,
|
|
355
|
+
onClick: e.refresh
|
|
356
|
+
}, {
|
|
357
|
+
default: g(() => [...t[3] || (t[3] = [
|
|
358
|
+
q("svg", {
|
|
359
|
+
class: "icon-refresh",
|
|
360
|
+
viewBox: "64 64 896 896",
|
|
361
|
+
width: "1em",
|
|
362
|
+
height: "1em",
|
|
363
|
+
fill: "currentColor"
|
|
364
|
+
}, [
|
|
365
|
+
q("path", { d: "M909.1 209.3l-56.4 44.1C775.8 155.1 653.5 96 512 96 282.7 96 96 282.7 96 512s186.7 416 416 416c165.3 0 309.1-96.4 376-236.1 8.3-17.2-4.3-37.1-23.1-37.1H745.6c-9.2 0-17.2 5.8-20.3 14.3C680.5 773.5 600.5 832 512 832c-176.7 0-320-143.3-320-320s143.3-320 320-320c88.5 0 168.5 36.1 226.4 94.3L704 356.3c-4.7-4.7-1.3-12.7 5.3-13.1l193.7-12.5c6.6-.4 12.3 4.9 12.3 11.5v193.7c0 6.6-8 10-12.7 5.3z" })
|
|
366
|
+
], -1),
|
|
367
|
+
T(" 刷新 ", -1)
|
|
368
|
+
])]),
|
|
369
|
+
_: 1
|
|
370
|
+
}, 8, ["loading", "onClick"]),
|
|
371
|
+
e.autoRefresh ? (s(), b(D, {
|
|
372
|
+
key: 0,
|
|
373
|
+
checked: e.autoRefreshEnabled,
|
|
374
|
+
"checked-children": "自动刷新",
|
|
375
|
+
"un-checked-children": "自动刷新",
|
|
376
|
+
onChange: e.toggleAutoRefresh
|
|
377
|
+
}, null, 8, ["checked", "onChange"])) : k("", !0),
|
|
378
|
+
e.autoRefresh && e.autoRefreshEnabled ? (s(), m("span", ne, B(e.countdown) + "s ", 1)) : k("", !0)
|
|
379
|
+
]),
|
|
380
|
+
_: 1
|
|
381
|
+
})
|
|
382
|
+
])
|
|
383
|
+
], !0)
|
|
384
|
+
]),
|
|
385
|
+
f($, I({
|
|
386
|
+
"data-source": e.data,
|
|
387
|
+
columns: e.computedColumns,
|
|
388
|
+
loading: e.loading,
|
|
389
|
+
pagination: !1,
|
|
390
|
+
"row-key": e.rowKey,
|
|
391
|
+
bordered: e.bordered,
|
|
392
|
+
scroll: e.scroll
|
|
393
|
+
}, e.$attrs, K(e.$listeners)), {
|
|
394
|
+
default: g(() => [
|
|
395
|
+
(s(!0), m(_, null, O(e.filteredSlots, (a, l) => (s(), m(_, null, [
|
|
396
|
+
l === "action" ? U(e.$slots, "action", {
|
|
397
|
+
key: 0,
|
|
398
|
+
record: e.slotData && e.slotData.record,
|
|
399
|
+
index: e.slotData && e.slotData.index
|
|
400
|
+
}, () => [
|
|
401
|
+
e.download && e.canDownload(e.slotData && e.slotData.record) ? (s(), m("a", {
|
|
402
|
+
key: 0,
|
|
403
|
+
onClick: t[0] || (t[0] = (y) => e.download.handleDownload(e.slotData.record))
|
|
404
|
+
}, "下载")) : k("", !0)
|
|
405
|
+
], !0) : U(e.$slots, l, I({
|
|
406
|
+
key: 1,
|
|
407
|
+
ref_for: !0
|
|
408
|
+
}, e.slotData || {}), () => [
|
|
409
|
+
T(B(e.slotData ? e.slotData.text : ""), 1)
|
|
410
|
+
], !0)
|
|
411
|
+
], 64))), 256))
|
|
412
|
+
]),
|
|
413
|
+
_: 3
|
|
414
|
+
}, 16, ["data-source", "columns", "loading", "row-key", "bordered", "scroll"]),
|
|
415
|
+
e.total > 0 ? (s(), m("div", oe, [
|
|
416
|
+
f(R, {
|
|
417
|
+
current: e.currentPage,
|
|
418
|
+
"page-size": e.pageSize,
|
|
419
|
+
total: e.total,
|
|
420
|
+
"show-size-changer": !0,
|
|
421
|
+
"show-quick-jumper": !0,
|
|
422
|
+
"show-total": (a) => `共 ${a} 条`,
|
|
423
|
+
onChange: e.handlePageChange,
|
|
424
|
+
onShowSizeChange: e.handlePageChange
|
|
425
|
+
}, null, 8, ["current", "page-size", "total", "show-total", "onChange", "onShowSizeChange"])
|
|
426
|
+
])) : k("", !0)
|
|
427
|
+
]);
|
|
428
|
+
}
|
|
429
|
+
const re = /* @__PURE__ */ X(J, [["render", le], ["__scopeId", "data-v-c29396f5"]]), de = {
|
|
430
|
+
install(e) {
|
|
431
|
+
e.component("DownloadTable", re);
|
|
432
|
+
}
|
|
433
|
+
};
|
|
434
|
+
export {
|
|
435
|
+
re as DownloadTable,
|
|
436
|
+
de as VueExportTable,
|
|
437
|
+
de as default,
|
|
438
|
+
W as useAutoRefresh,
|
|
439
|
+
Q as usePagination,
|
|
440
|
+
M as useQuery,
|
|
441
|
+
G as useTable
|
|
442
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(p,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("vue-demi"),require("vue")):typeof define=="function"&&define.amd?define(["exports","vue-demi","vue"],r):(p=typeof globalThis<"u"?globalThis:p||self,r(p.VueExportTable={},p.VueDemi,p.Vue))})(this,(function(p,r,t){"use strict";function R(e){const n=r.reactive({});function a(){e.forEach(l=>{l.defaultValue!==void 0?n[l.name]=l.defaultValue:n[l.name]=l.type==="rangePicker"?[]:void 0})}a();function d(){const l={};return Object.keys(n).forEach(c=>{const u=n[c];if(u!=null&&u!==""){if(Array.isArray(u)&&u.length===0)return;l[c]=u}}),l}function i(){a()}function m(l,c){n[l]=c}return{filters:n,onSearch:d,onReset:i,setFilter:m}}function P(e=10){const n=r.ref(1),a=r.ref(e),d=r.computed(()=>({current:n.value,pageSize:a.value}));function i(l,c){n.value=l,c!==a.value&&(a.value=c,n.value=1)}function m(){n.value=1}return{currentPage:n,pageSize:a,pagination:d,onPageChange:i,resetPage:m}}function T(e,n){const a=r.ref(e.enabled??e.interval>0),d=r.ref(e.interval);let i=null;function m(){l(),!(!a.value||e.interval<=0)&&(d.value=e.interval,i=setInterval(()=>{d.value-=1,d.value<=0&&(d.value=e.interval,n())},1e3))}function l(){i&&(clearInterval(i),i=null)}function c(y){a.value=y??!a.value,a.value?m():(l(),d.value=e.interval)}function u(){a.value&&(d.value=e.interval)}function h(){e.pauseOnHidden&&(document.hidden?l():a.value&&m())}return r.onMounted(()=>{a.value&&e.interval>0&&(m(),e.pauseOnHidden&&document.addEventListener("visibilitychange",h))}),r.onUnmounted(()=>{l(),document.removeEventListener("visibilitychange",h)}),{enabled:a,countdown:d,toggle:c,resetCountdown:u}}function $(e){const n=r.ref(!1),a=r.ref([]),d=r.ref(0),{filters:i,onSearch:m,onReset:l,setFilter:c}=R(e.queryFields??[]),{currentPage:u,pageSize:h,pagination:y,onPageChange:k,resetPage:f}=P(e.pageSize??10),w=e.autoRefresh??{interval:0,enabled:!1},{enabled:b,countdown:C,toggle:B,resetCountdown:V}=T(w,()=>{o()});async function o(){n.value=!0;try{const S={page:u.value,pageSize:h.value,filters:m()},E=await e.fetchData(S);a.value=E.list,d.value=E.total}catch(S){console.error("[VueExportTable] fetch error:",S)}finally{n.value=!1}}function s(){f(),o(),V()}function g(){l(),f(),o()}function N(S,E){k(S,E),o(),V()}return r.onMounted(()=>{e.immediate!==!1&&o()}),{loading:n,data:a,total:d,filters:i,pagination:y,currentPage:u,pageSize:h,handleSearch:s,handleReset:g,setFilter:c,handlePageChange:N,refresh:o,autoRefreshEnabled:b,countdown:C,toggleAutoRefresh:B}}const F=r.defineComponent({name:"DownloadTable",props:{columns:{type:Array,required:!0},queryFields:{type:Array,default:()=>[]},fetchData:{type:Function,required:!0},download:{type:Object,default:void 0},autoRefresh:{type:Object,default:void 0},rowKey:{type:[String,Function],default:"id"},title:{type:String,default:""},bordered:{type:Boolean,default:!0},pageSize:{type:Number,default:10},showIndex:{type:Boolean,default:!1},immediate:{type:Boolean,default:!0}},setup(e,{slots:n}){const{loading:a,data:d,total:i,filters:m,currentPage:l,pageSize:c,handleSearch:u,handleReset:h,handlePageChange:y,refresh:k,autoRefreshEnabled:f,countdown:w,toggleAutoRefresh:b}=$({fetchData:e.fetchData,queryFields:e.queryFields,pageSize:e.pageSize,autoRefresh:e.autoRefresh,immediate:e.immediate}),C=r.computed(()=>{const o=[];return e.showIndex&&o.push({title:"序号",dataIndex:"index",key:"index",width:80,align:"center",customRender:({index:s})=>(l.value-1)*c.value+s+1}),[...o,...e.columns]}),B=r.computed(()=>{const o=C.value.reduce((s,g)=>{const N=typeof g.width=="number"?g.width:0;return s+N},0);return o>0?{x:o}:void 0}),V=r.computed(()=>{const o=["query-form","toolbar"],s={};return Object.keys(n).forEach(g=>{o.includes(g)||(s[g]=!0)}),s});return{loading:a,data:d,total:i,filters:m,currentPage:l,pageSize:c,handleSearch:u,handleReset:h,handlePageChange:y,refresh:k,download:r.computed(()=>e.download),canDownload:o=>e.download?e.download.canDownload?e.download.canDownload(o):o&&o.status==="completed":!1,autoRefreshEnabled:f,countdown:w,toggleAutoRefresh:b,computedColumns:C,scroll:B,filteredSlots:V}}}),D=(e,n)=>{const a=e.__vccOpts||e;for(const[d,i]of n)a[d]=i;return a},U={class:"download-table-wrapper"},_={key:0,class:"query-form-wrapper"},A={class:"toolbar-wrapper"},O={class:"toolbar-left"},j={key:0,class:"table-title"},I={class:"toolbar-right"},L={key:1,class:"countdown-text"},M={key:1,class:"pagination-wrapper"};function H(e,n,a,d,i,m){const l=t.resolveComponent("a-input"),c=t.resolveComponent("a-input-number"),u=t.resolveComponent("a-select"),h=t.resolveComponent("a-date-picker"),y=t.resolveComponent("a-range-picker"),k=t.resolveComponent("a-form-item"),f=t.resolveComponent("a-button"),w=t.resolveComponent("a-space"),b=t.resolveComponent("a-form"),C=t.resolveComponent("a-switch"),B=t.resolveComponent("a-table"),V=t.resolveComponent("a-pagination");return t.openBlock(),t.createElementBlock("div",U,[e.queryFields&&e.queryFields.length>0?(t.openBlock(),t.createElementBlock("div",_,[t.renderSlot(e.$slots,"query-form",{filters:e.filters,handleSearch:e.handleSearch,handleReset:e.handleReset},()=>[t.createVNode(b,{layout:"inline",model:e.filters},{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.queryFields,o=>(t.openBlock(),t.createBlock(k,{key:o.name,label:o.label},{default:t.withCtx(()=>[o.type==="input"?(t.openBlock(),t.createBlock(l,{key:0,modelValue:e.filters[o.name],"onUpdate:modelValue":s=>e.filters[o.name]=s,placeholder:o.placeholder||`请输入${o.label}`,"allow-clear":""},null,8,["modelValue","onUpdate:modelValue","placeholder"])):o.type==="number"?(t.openBlock(),t.createBlock(c,{key:1,modelValue:e.filters[o.name],"onUpdate:modelValue":s=>e.filters[o.name]=s,placeholder:o.placeholder||`请输入${o.label}`,style:{width:"180px"}},null,8,["modelValue","onUpdate:modelValue","placeholder"])):o.type==="select"?(t.openBlock(),t.createBlock(u,{key:2,modelValue:e.filters[o.name],"onUpdate:modelValue":s=>e.filters[o.name]=s,placeholder:o.placeholder||`请选择${o.label}`,options:o.options,"allow-clear":"",style:{"min-width":"150px"}},null,8,["modelValue","onUpdate:modelValue","placeholder","options"])):o.type==="datePicker"?(t.openBlock(),t.createBlock(h,{key:3,modelValue:e.filters[o.name],"onUpdate:modelValue":s=>e.filters[o.name]=s,placeholder:o.placeholder||`请选择${o.label}`,style:{width:"180px"}},null,8,["modelValue","onUpdate:modelValue","placeholder"])):o.type==="rangePicker"?(t.openBlock(),t.createBlock(y,{key:4,modelValue:e.filters[o.name],"onUpdate:modelValue":s=>e.filters[o.name]=s,placeholder:[o.placeholder||"开始日期",o.placeholder||"结束日期"],style:{width:"240px"}},null,8,["modelValue","onUpdate:modelValue","placeholder"])):t.createCommentVNode("",!0)]),_:2},1032,["label"]))),128)),t.createVNode(k,null,{default:t.withCtx(()=>[t.createVNode(w,null,{default:t.withCtx(()=>[t.createVNode(f,{type:"primary",onClick:e.handleSearch},{default:t.withCtx(()=>[...n[1]||(n[1]=[t.createTextVNode("查询",-1)])]),_:1},8,["onClick"]),t.createVNode(f,{onClick:e.handleReset},{default:t.withCtx(()=>[...n[2]||(n[2]=[t.createTextVNode("重置",-1)])]),_:1},8,["onClick"])]),_:1})]),_:1})]),_:1},8,["model"])],!0)])):t.createCommentVNode("",!0),t.createElementVNode("div",A,[t.renderSlot(e.$slots,"toolbar",{loading:e.loading,refresh:e.refresh},()=>[t.createElementVNode("div",O,[e.title?(t.openBlock(),t.createElementBlock("span",j,t.toDisplayString(e.title),1)):t.createCommentVNode("",!0)]),t.createElementVNode("div",I,[t.createVNode(w,null,{default:t.withCtx(()=>[t.createVNode(f,{loading:e.loading,onClick:e.refresh},{default:t.withCtx(()=>[...n[3]||(n[3]=[t.createElementVNode("svg",{class:"icon-refresh",viewBox:"64 64 896 896",width:"1em",height:"1em",fill:"currentColor"},[t.createElementVNode("path",{d:"M909.1 209.3l-56.4 44.1C775.8 155.1 653.5 96 512 96 282.7 96 96 282.7 96 512s186.7 416 416 416c165.3 0 309.1-96.4 376-236.1 8.3-17.2-4.3-37.1-23.1-37.1H745.6c-9.2 0-17.2 5.8-20.3 14.3C680.5 773.5 600.5 832 512 832c-176.7 0-320-143.3-320-320s143.3-320 320-320c88.5 0 168.5 36.1 226.4 94.3L704 356.3c-4.7-4.7-1.3-12.7 5.3-13.1l193.7-12.5c6.6-.4 12.3 4.9 12.3 11.5v193.7c0 6.6-8 10-12.7 5.3z"})],-1),t.createTextVNode(" 刷新 ",-1)])]),_:1},8,["loading","onClick"]),e.autoRefresh?(t.openBlock(),t.createBlock(C,{key:0,checked:e.autoRefreshEnabled,"checked-children":"自动刷新","un-checked-children":"自动刷新",onChange:e.toggleAutoRefresh},null,8,["checked","onChange"])):t.createCommentVNode("",!0),e.autoRefresh&&e.autoRefreshEnabled?(t.openBlock(),t.createElementBlock("span",L,t.toDisplayString(e.countdown)+"s ",1)):t.createCommentVNode("",!0)]),_:1})])],!0)]),t.createVNode(B,t.mergeProps({"data-source":e.data,columns:e.computedColumns,loading:e.loading,pagination:!1,"row-key":e.rowKey,bordered:e.bordered,scroll:e.scroll},e.$attrs,t.toHandlers(e.$listeners)),{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.filteredSlots,(o,s)=>(t.openBlock(),t.createElementBlock(t.Fragment,null,[s==="action"?t.renderSlot(e.$slots,"action",{key:0,record:e.slotData&&e.slotData.record,index:e.slotData&&e.slotData.index},()=>[e.download&&e.canDownload(e.slotData&&e.slotData.record)?(t.openBlock(),t.createElementBlock("a",{key:0,onClick:n[0]||(n[0]=g=>e.download.handleDownload(e.slotData.record))},"下载")):t.createCommentVNode("",!0)],!0):t.renderSlot(e.$slots,s,t.mergeProps({key:1,ref_for:!0},e.slotData||{}),()=>[t.createTextVNode(t.toDisplayString(e.slotData?e.slotData.text:""),1)],!0)],64))),256))]),_:3},16,["data-source","columns","loading","row-key","bordered","scroll"]),e.total>0?(t.openBlock(),t.createElementBlock("div",M,[t.createVNode(V,{current:e.currentPage,"page-size":e.pageSize,total:e.total,"show-size-changer":!0,"show-quick-jumper":!0,"show-total":o=>`共 ${o} 条`,onChange:e.handlePageChange,onShowSizeChange:e.handlePageChange},null,8,["current","page-size","total","show-total","onChange","onShowSizeChange"])])):t.createCommentVNode("",!0)])}const q=D(F,[["render",H],["__scopeId","data-v-c29396f5"]]),z={install(e){e.component("DownloadTable",q)}};p.DownloadTable=q,p.VueExportTable=z,p.default=z,p.useAutoRefresh=T,p.usePagination=P,p.useQuery=R,p.useTable=$,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|
package/package.json
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "vue-export-table",
|
|
3
|
+
"version": "1.1.0",
|
|
4
|
+
"description": "A Vue table plugin with query, pagination, download and auto-refresh, compatible with Vue 2 and Vue 3",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/vue-export-table.cjs",
|
|
7
|
+
"module": "./dist/vue-export-table.js",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"import": "./dist/vue-export-table.js",
|
|
12
|
+
"require": "./dist/vue-export-table.cjs",
|
|
13
|
+
"types": "./dist/index.d.ts"
|
|
14
|
+
},
|
|
15
|
+
"./vue2": {
|
|
16
|
+
"import": "./dist/vue-export-table.vue2.js",
|
|
17
|
+
"require": "./dist/vue-export-table.vue2.cjs",
|
|
18
|
+
"types": "./dist/index.d.ts"
|
|
19
|
+
},
|
|
20
|
+
"./style.css": "./dist/style.css"
|
|
21
|
+
},
|
|
22
|
+
"files": [
|
|
23
|
+
"dist"
|
|
24
|
+
],
|
|
25
|
+
"scripts": {
|
|
26
|
+
"dev": "vite",
|
|
27
|
+
"build": "vite build --mode vue3 && vite build --mode vue2 && vue-tsc --emitDeclarationOnly -p tsconfig.build.json",
|
|
28
|
+
"preview": "vite preview",
|
|
29
|
+
"type-check": "vue-tsc --noEmit"
|
|
30
|
+
},
|
|
31
|
+
"peerDependencies": {
|
|
32
|
+
"vue": "^2.7.0 || ^3.0.0",
|
|
33
|
+
"vue-demi": "^0.14.0",
|
|
34
|
+
"ant-design-vue": "^1.7.0 || ^4.0.0"
|
|
35
|
+
},
|
|
36
|
+
"peerDependenciesMeta": {
|
|
37
|
+
"vue-demi": {
|
|
38
|
+
"optional": true
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
"devDependencies": {
|
|
42
|
+
"@vitejs/plugin-vue": "^5.2.0",
|
|
43
|
+
"ant-design-vue": "^4.2.6",
|
|
44
|
+
"typescript": "^5.7.0",
|
|
45
|
+
"vite": "^6.3.0",
|
|
46
|
+
"vue": "^3.5.0",
|
|
47
|
+
"vue-demi": "^0.14.10",
|
|
48
|
+
"vue-router": "^4.5.0",
|
|
49
|
+
"vue-tsc": "^2.2.0"
|
|
50
|
+
},
|
|
51
|
+
"keywords": [
|
|
52
|
+
"vue",
|
|
53
|
+
"vue2",
|
|
54
|
+
"vue3",
|
|
55
|
+
"table",
|
|
56
|
+
"pagination",
|
|
57
|
+
"download",
|
|
58
|
+
"auto-refresh",
|
|
59
|
+
"ant-design-vue",
|
|
60
|
+
"plugin"
|
|
61
|
+
],
|
|
62
|
+
"license": "MIT"
|
|
63
|
+
}
|