z-crud-table 0.0.40 → 0.0.42
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/dist/components/CrudTable.vue.d.ts +419 -0
- package/dist/components/TableHeaderWithTooltip.vue.d.ts +17 -0
- package/dist/favicon.ico +0 -0
- package/dist/index.d.ts +3 -0
- package/dist/utils/request.d.ts +2 -0
- package/dist/z-crud-table.js +548 -0
- package/dist/z-crud-table.umd.cjs +2 -0
- package/package.json +1 -1
|
@@ -0,0 +1,419 @@
|
|
|
1
|
+
import { PropType } from 'vue';
|
|
2
|
+
|
|
3
|
+
declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
4
|
+
/**
|
|
5
|
+
* @description 组件的主题风格
|
|
6
|
+
* @type {'default' | 'large-screen'}
|
|
7
|
+
*/
|
|
8
|
+
theme: {
|
|
9
|
+
type: PropType<"default" | "large-screen">;
|
|
10
|
+
default: string;
|
|
11
|
+
};
|
|
12
|
+
customClass: {
|
|
13
|
+
type: StringConstructor;
|
|
14
|
+
default: string;
|
|
15
|
+
};
|
|
16
|
+
apiUrlQuery: {
|
|
17
|
+
type: StringConstructor;
|
|
18
|
+
required: true;
|
|
19
|
+
};
|
|
20
|
+
apiUrlDetail: {
|
|
21
|
+
type: StringConstructor;
|
|
22
|
+
required: true;
|
|
23
|
+
};
|
|
24
|
+
apiUrlCreate: {
|
|
25
|
+
type: StringConstructor;
|
|
26
|
+
required: true;
|
|
27
|
+
};
|
|
28
|
+
apiUrlUpdate: {
|
|
29
|
+
type: StringConstructor;
|
|
30
|
+
required: true;
|
|
31
|
+
};
|
|
32
|
+
apiUrlDelete: {
|
|
33
|
+
type: StringConstructor;
|
|
34
|
+
required: true;
|
|
35
|
+
};
|
|
36
|
+
/**
|
|
37
|
+
* @description 加载数据时显示的提示文字
|
|
38
|
+
* @type {String}
|
|
39
|
+
*/
|
|
40
|
+
loadingText: {
|
|
41
|
+
type: StringConstructor;
|
|
42
|
+
default: string;
|
|
43
|
+
};
|
|
44
|
+
/**
|
|
45
|
+
* @description 遮罩层的背景色 (CSS color)
|
|
46
|
+
* @type {String}
|
|
47
|
+
*/
|
|
48
|
+
loadingBackground: {
|
|
49
|
+
type: StringConstructor;
|
|
50
|
+
default: string;
|
|
51
|
+
};
|
|
52
|
+
showSearchSection: {
|
|
53
|
+
type: BooleanConstructor;
|
|
54
|
+
default: boolean;
|
|
55
|
+
};
|
|
56
|
+
showSearchActionButtons: {
|
|
57
|
+
type: BooleanConstructor;
|
|
58
|
+
default: boolean;
|
|
59
|
+
};
|
|
60
|
+
showNewBtn: {
|
|
61
|
+
type: BooleanConstructor;
|
|
62
|
+
default: boolean;
|
|
63
|
+
};
|
|
64
|
+
columns: {
|
|
65
|
+
type: PropType<any[]>;
|
|
66
|
+
default: () => never[];
|
|
67
|
+
};
|
|
68
|
+
onBeforeQuery: {
|
|
69
|
+
type: PropType<(params: any) => any>;
|
|
70
|
+
};
|
|
71
|
+
onAfterQuery: {
|
|
72
|
+
type: PropType<(data: any[], params: any) => any[] | Promise<any[]>>;
|
|
73
|
+
};
|
|
74
|
+
onBeforeOpenDialog: {
|
|
75
|
+
type: PropType<(mode: string, data?: any) => any>;
|
|
76
|
+
};
|
|
77
|
+
onAfterOpenDialog: {
|
|
78
|
+
type: PropType<(mode: string, data: any) => void>;
|
|
79
|
+
};
|
|
80
|
+
onBeforeSubmit: {
|
|
81
|
+
type: PropType<(data: any, mode: "add" | "edit") => any>;
|
|
82
|
+
};
|
|
83
|
+
onAfterSubmit: {
|
|
84
|
+
type: PropType<(mode: string, data: any) => void>;
|
|
85
|
+
};
|
|
86
|
+
onBeforeDelete: {
|
|
87
|
+
type: PropType<(ids: number[], rows: any[]) => boolean | Promise<boolean>>;
|
|
88
|
+
};
|
|
89
|
+
onAfterDelete: {
|
|
90
|
+
type: PropType<(ids: number[], rows: any[]) => void>;
|
|
91
|
+
};
|
|
92
|
+
showSelectionColumn: {
|
|
93
|
+
type: BooleanConstructor;
|
|
94
|
+
default: boolean;
|
|
95
|
+
};
|
|
96
|
+
showIndexColumn: {
|
|
97
|
+
type: BooleanConstructor;
|
|
98
|
+
default: boolean;
|
|
99
|
+
};
|
|
100
|
+
showActionsColumn: {
|
|
101
|
+
type: BooleanConstructor;
|
|
102
|
+
default: boolean;
|
|
103
|
+
};
|
|
104
|
+
showEditButton: {
|
|
105
|
+
type: BooleanConstructor;
|
|
106
|
+
default: boolean;
|
|
107
|
+
};
|
|
108
|
+
showDeleteButton: {
|
|
109
|
+
type: BooleanConstructor;
|
|
110
|
+
default: boolean;
|
|
111
|
+
};
|
|
112
|
+
actionsColumnWidth: {
|
|
113
|
+
type: (StringConstructor | NumberConstructor)[];
|
|
114
|
+
default: number;
|
|
115
|
+
};
|
|
116
|
+
dialogWidth: {
|
|
117
|
+
type: StringConstructor;
|
|
118
|
+
default: string;
|
|
119
|
+
};
|
|
120
|
+
initialSearchForm: {
|
|
121
|
+
type: ObjectConstructor;
|
|
122
|
+
default: () => {
|
|
123
|
+
pageNum: number;
|
|
124
|
+
pageSize: number;
|
|
125
|
+
};
|
|
126
|
+
};
|
|
127
|
+
showPagination: {
|
|
128
|
+
type: BooleanConstructor;
|
|
129
|
+
default: boolean;
|
|
130
|
+
};
|
|
131
|
+
pageSizes: {
|
|
132
|
+
type: ArrayConstructor;
|
|
133
|
+
default: () => number[];
|
|
134
|
+
};
|
|
135
|
+
paginationLayout: {
|
|
136
|
+
type: StringConstructor;
|
|
137
|
+
default: string;
|
|
138
|
+
};
|
|
139
|
+
paginationBackground: {
|
|
140
|
+
type: BooleanConstructor;
|
|
141
|
+
default: boolean;
|
|
142
|
+
};
|
|
143
|
+
paginationSmall: {
|
|
144
|
+
type: BooleanConstructor;
|
|
145
|
+
default: boolean;
|
|
146
|
+
};
|
|
147
|
+
paginationHideOnSinglePage: {
|
|
148
|
+
type: BooleanConstructor;
|
|
149
|
+
default: boolean;
|
|
150
|
+
};
|
|
151
|
+
dialogFormConfig: {
|
|
152
|
+
type: () => any[];
|
|
153
|
+
default: () => never[];
|
|
154
|
+
};
|
|
155
|
+
dialogFormRules: {
|
|
156
|
+
type: ObjectConstructor;
|
|
157
|
+
default: () => {};
|
|
158
|
+
};
|
|
159
|
+
/**
|
|
160
|
+
* @description 是否以 multipart/form-data 格式提交表单。
|
|
161
|
+
* 适用于需要上传文件的场景。
|
|
162
|
+
* @type {Boolean}
|
|
163
|
+
*/
|
|
164
|
+
submitAsFormData: {
|
|
165
|
+
type: BooleanConstructor;
|
|
166
|
+
default: boolean;
|
|
167
|
+
};
|
|
168
|
+
}>, {
|
|
169
|
+
refresh: () => Promise<void>;
|
|
170
|
+
search: () => void;
|
|
171
|
+
handleDelete: (ids: number[]) => Promise<void>;
|
|
172
|
+
openDialog: (mode: "add" | "edit", dataPayload?: any) => Promise<void>;
|
|
173
|
+
submit: (mode: "add" | "edit", data: Record<string, any>) => Promise<void>;
|
|
174
|
+
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
175
|
+
submit: (...args: any[]) => void;
|
|
176
|
+
delete: (...args: any[]) => void;
|
|
177
|
+
"open-dialog": (...args: any[]) => void;
|
|
178
|
+
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
179
|
+
/**
|
|
180
|
+
* @description 组件的主题风格
|
|
181
|
+
* @type {'default' | 'large-screen'}
|
|
182
|
+
*/
|
|
183
|
+
theme: {
|
|
184
|
+
type: PropType<"default" | "large-screen">;
|
|
185
|
+
default: string;
|
|
186
|
+
};
|
|
187
|
+
customClass: {
|
|
188
|
+
type: StringConstructor;
|
|
189
|
+
default: string;
|
|
190
|
+
};
|
|
191
|
+
apiUrlQuery: {
|
|
192
|
+
type: StringConstructor;
|
|
193
|
+
required: true;
|
|
194
|
+
};
|
|
195
|
+
apiUrlDetail: {
|
|
196
|
+
type: StringConstructor;
|
|
197
|
+
required: true;
|
|
198
|
+
};
|
|
199
|
+
apiUrlCreate: {
|
|
200
|
+
type: StringConstructor;
|
|
201
|
+
required: true;
|
|
202
|
+
};
|
|
203
|
+
apiUrlUpdate: {
|
|
204
|
+
type: StringConstructor;
|
|
205
|
+
required: true;
|
|
206
|
+
};
|
|
207
|
+
apiUrlDelete: {
|
|
208
|
+
type: StringConstructor;
|
|
209
|
+
required: true;
|
|
210
|
+
};
|
|
211
|
+
/**
|
|
212
|
+
* @description 加载数据时显示的提示文字
|
|
213
|
+
* @type {String}
|
|
214
|
+
*/
|
|
215
|
+
loadingText: {
|
|
216
|
+
type: StringConstructor;
|
|
217
|
+
default: string;
|
|
218
|
+
};
|
|
219
|
+
/**
|
|
220
|
+
* @description 遮罩层的背景色 (CSS color)
|
|
221
|
+
* @type {String}
|
|
222
|
+
*/
|
|
223
|
+
loadingBackground: {
|
|
224
|
+
type: StringConstructor;
|
|
225
|
+
default: string;
|
|
226
|
+
};
|
|
227
|
+
showSearchSection: {
|
|
228
|
+
type: BooleanConstructor;
|
|
229
|
+
default: boolean;
|
|
230
|
+
};
|
|
231
|
+
showSearchActionButtons: {
|
|
232
|
+
type: BooleanConstructor;
|
|
233
|
+
default: boolean;
|
|
234
|
+
};
|
|
235
|
+
showNewBtn: {
|
|
236
|
+
type: BooleanConstructor;
|
|
237
|
+
default: boolean;
|
|
238
|
+
};
|
|
239
|
+
columns: {
|
|
240
|
+
type: PropType<any[]>;
|
|
241
|
+
default: () => never[];
|
|
242
|
+
};
|
|
243
|
+
onBeforeQuery: {
|
|
244
|
+
type: PropType<(params: any) => any>;
|
|
245
|
+
};
|
|
246
|
+
onAfterQuery: {
|
|
247
|
+
type: PropType<(data: any[], params: any) => any[] | Promise<any[]>>;
|
|
248
|
+
};
|
|
249
|
+
onBeforeOpenDialog: {
|
|
250
|
+
type: PropType<(mode: string, data?: any) => any>;
|
|
251
|
+
};
|
|
252
|
+
onAfterOpenDialog: {
|
|
253
|
+
type: PropType<(mode: string, data: any) => void>;
|
|
254
|
+
};
|
|
255
|
+
onBeforeSubmit: {
|
|
256
|
+
type: PropType<(data: any, mode: "add" | "edit") => any>;
|
|
257
|
+
};
|
|
258
|
+
onAfterSubmit: {
|
|
259
|
+
type: PropType<(mode: string, data: any) => void>;
|
|
260
|
+
};
|
|
261
|
+
onBeforeDelete: {
|
|
262
|
+
type: PropType<(ids: number[], rows: any[]) => boolean | Promise<boolean>>;
|
|
263
|
+
};
|
|
264
|
+
onAfterDelete: {
|
|
265
|
+
type: PropType<(ids: number[], rows: any[]) => void>;
|
|
266
|
+
};
|
|
267
|
+
showSelectionColumn: {
|
|
268
|
+
type: BooleanConstructor;
|
|
269
|
+
default: boolean;
|
|
270
|
+
};
|
|
271
|
+
showIndexColumn: {
|
|
272
|
+
type: BooleanConstructor;
|
|
273
|
+
default: boolean;
|
|
274
|
+
};
|
|
275
|
+
showActionsColumn: {
|
|
276
|
+
type: BooleanConstructor;
|
|
277
|
+
default: boolean;
|
|
278
|
+
};
|
|
279
|
+
showEditButton: {
|
|
280
|
+
type: BooleanConstructor;
|
|
281
|
+
default: boolean;
|
|
282
|
+
};
|
|
283
|
+
showDeleteButton: {
|
|
284
|
+
type: BooleanConstructor;
|
|
285
|
+
default: boolean;
|
|
286
|
+
};
|
|
287
|
+
actionsColumnWidth: {
|
|
288
|
+
type: (StringConstructor | NumberConstructor)[];
|
|
289
|
+
default: number;
|
|
290
|
+
};
|
|
291
|
+
dialogWidth: {
|
|
292
|
+
type: StringConstructor;
|
|
293
|
+
default: string;
|
|
294
|
+
};
|
|
295
|
+
initialSearchForm: {
|
|
296
|
+
type: ObjectConstructor;
|
|
297
|
+
default: () => {
|
|
298
|
+
pageNum: number;
|
|
299
|
+
pageSize: number;
|
|
300
|
+
};
|
|
301
|
+
};
|
|
302
|
+
showPagination: {
|
|
303
|
+
type: BooleanConstructor;
|
|
304
|
+
default: boolean;
|
|
305
|
+
};
|
|
306
|
+
pageSizes: {
|
|
307
|
+
type: ArrayConstructor;
|
|
308
|
+
default: () => number[];
|
|
309
|
+
};
|
|
310
|
+
paginationLayout: {
|
|
311
|
+
type: StringConstructor;
|
|
312
|
+
default: string;
|
|
313
|
+
};
|
|
314
|
+
paginationBackground: {
|
|
315
|
+
type: BooleanConstructor;
|
|
316
|
+
default: boolean;
|
|
317
|
+
};
|
|
318
|
+
paginationSmall: {
|
|
319
|
+
type: BooleanConstructor;
|
|
320
|
+
default: boolean;
|
|
321
|
+
};
|
|
322
|
+
paginationHideOnSinglePage: {
|
|
323
|
+
type: BooleanConstructor;
|
|
324
|
+
default: boolean;
|
|
325
|
+
};
|
|
326
|
+
dialogFormConfig: {
|
|
327
|
+
type: () => any[];
|
|
328
|
+
default: () => never[];
|
|
329
|
+
};
|
|
330
|
+
dialogFormRules: {
|
|
331
|
+
type: ObjectConstructor;
|
|
332
|
+
default: () => {};
|
|
333
|
+
};
|
|
334
|
+
/**
|
|
335
|
+
* @description 是否以 multipart/form-data 格式提交表单。
|
|
336
|
+
* 适用于需要上传文件的场景。
|
|
337
|
+
* @type {Boolean}
|
|
338
|
+
*/
|
|
339
|
+
submitAsFormData: {
|
|
340
|
+
type: BooleanConstructor;
|
|
341
|
+
default: boolean;
|
|
342
|
+
};
|
|
343
|
+
}>> & Readonly<{
|
|
344
|
+
onSubmit?: ((...args: any[]) => any) | undefined;
|
|
345
|
+
onDelete?: ((...args: any[]) => any) | undefined;
|
|
346
|
+
"onOpen-dialog"?: ((...args: any[]) => any) | undefined;
|
|
347
|
+
}>, {
|
|
348
|
+
customClass: string;
|
|
349
|
+
theme: "default" | "large-screen";
|
|
350
|
+
loadingText: string;
|
|
351
|
+
loadingBackground: string;
|
|
352
|
+
showSearchSection: boolean;
|
|
353
|
+
showSearchActionButtons: boolean;
|
|
354
|
+
showNewBtn: boolean;
|
|
355
|
+
columns: any[];
|
|
356
|
+
showSelectionColumn: boolean;
|
|
357
|
+
showIndexColumn: boolean;
|
|
358
|
+
showActionsColumn: boolean;
|
|
359
|
+
showEditButton: boolean;
|
|
360
|
+
showDeleteButton: boolean;
|
|
361
|
+
actionsColumnWidth: string | number;
|
|
362
|
+
dialogWidth: string;
|
|
363
|
+
initialSearchForm: Record<string, any>;
|
|
364
|
+
showPagination: boolean;
|
|
365
|
+
pageSizes: unknown[];
|
|
366
|
+
paginationLayout: string;
|
|
367
|
+
paginationBackground: boolean;
|
|
368
|
+
paginationSmall: boolean;
|
|
369
|
+
paginationHideOnSinglePage: boolean;
|
|
370
|
+
dialogFormConfig: any[];
|
|
371
|
+
dialogFormRules: Record<string, any>;
|
|
372
|
+
submitAsFormData: boolean;
|
|
373
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, Partial<Record<any, (_: {
|
|
374
|
+
row: any;
|
|
375
|
+
}) => any>> & {
|
|
376
|
+
header?(_: {}): any;
|
|
377
|
+
"query-conditions"?(_: {
|
|
378
|
+
searchForm: {
|
|
379
|
+
pageNum: number;
|
|
380
|
+
pageSize: number;
|
|
381
|
+
};
|
|
382
|
+
}): any;
|
|
383
|
+
"query-left"?(_: {
|
|
384
|
+
searchForm: {
|
|
385
|
+
pageNum: number;
|
|
386
|
+
pageSize: number;
|
|
387
|
+
};
|
|
388
|
+
}): any;
|
|
389
|
+
"query-right"?(_: {
|
|
390
|
+
searchForm: {
|
|
391
|
+
pageNum: number;
|
|
392
|
+
pageSize: number;
|
|
393
|
+
};
|
|
394
|
+
}): any;
|
|
395
|
+
"action-left"?(_: {
|
|
396
|
+
selections: any[];
|
|
397
|
+
}): any;
|
|
398
|
+
"add-button-content"?(_: {
|
|
399
|
+
selections: any[];
|
|
400
|
+
}): any;
|
|
401
|
+
"action-right"?(_: {
|
|
402
|
+
selections: any[];
|
|
403
|
+
}): any;
|
|
404
|
+
actions?(_: {
|
|
405
|
+
row: any;
|
|
406
|
+
}): any;
|
|
407
|
+
"action-before-edit"?(_: {
|
|
408
|
+
row: any;
|
|
409
|
+
}): any;
|
|
410
|
+
"action-after-delete"?(_: {
|
|
411
|
+
row: any;
|
|
412
|
+
}): any;
|
|
413
|
+
}>;
|
|
414
|
+
export default _default;
|
|
415
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
416
|
+
new (): {
|
|
417
|
+
$slots: S;
|
|
418
|
+
};
|
|
419
|
+
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
2
|
+
label: string;
|
|
3
|
+
placement: string;
|
|
4
|
+
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
5
|
+
label: string;
|
|
6
|
+
placement: string;
|
|
7
|
+
}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
8
|
+
export default _default;
|
|
9
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
10
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
11
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
12
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
13
|
+
} : {
|
|
14
|
+
type: import('vue').PropType<T[K]>;
|
|
15
|
+
required: true;
|
|
16
|
+
};
|
|
17
|
+
};
|
package/dist/favicon.ico
ADDED
|
Binary file
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,548 @@
|
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.header-cell-content[data-v-d23c8660]{display:inline-block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.crud-table-container[data-v-7f0655b1]{display:flex;flex-direction:column;height:100%;width:100%;min-width:0;min-height:0;overflow:hidden}.search-section-wrapper[data-v-7f0655b1]{flex-shrink:0}.table-content-wrapper[data-v-7f0655b1]{flex:1;min-height:0;overflow:hidden}.pagination-wrapper[data-v-7f0655b1]{flex-shrink:0;padding-top:1rem;display:flex;justify-content:flex-end}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.\\!mr-0{margin-right:0!important}.mt-2{margin-top:.5rem}.flex{display:flex}.hidden{display:none}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-4{gap:1rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}body{background-color:#f0f2f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;margin:0}#app{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50}.crud-container{transition:box-shadow .3s ease-in-out}.crud-container:hover{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.query-form .el-form-item{margin-bottom:0!important}.el-table__expanded-cell{padding:1rem 3.5rem!important;background-color:#f8fafc}.action-buttons>*+*{margin-left:.75rem}.el-dialog__header{border-bottom:none;padding:24px 24px 10px}.el-dialog__title{font-size:1.25rem;font-weight:600}.el-dialog__footer{border-top:none;padding:10px 24px 24px}.el-dialog__body{padding:10px 24px}:root{--large-screen-border-color: rgba(120, 153, 199, 1);--large-screen-text-color: rgba(227, 246, 255, 1);--large-screen-search-bg: rgba(210, 224, 243, .1);--large-screen-button-bg: rgba(38, 120, 255, 1);--large-screen-action-link-color: rgba(39, 233, 255, 1);--large-screen-dialog-bg: #1e293b;--large-screen-hover-bg: rgba(120, 153, 199, .15)}.theme-large-screen{color:var(--large-screen-text-color)}.theme-large-screen .crud-container{background-color:transparent!important;border:none}.theme-large-screen .el-table,.theme-large-screen .el-table__expanded-cell,.theme-large-screen .el-table th.el-table__cell,.theme-large-screen .el-table tr,.theme-large-screen .el-table .el-table__row{background-color:transparent!important;color:var(--large-screen-text-color)}.theme-large-screen .el-table th.el-table__cell{font-weight:600}.theme-large-screen .el-table td.el-table__cell,.theme-large-screen .el-table th.el-table__cell.is-leaf{border-bottom:1px solid var(--large-screen-border-color)}.theme-large-screen .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{background-color:var(--large-screen-hover-bg)!important}.theme-large-screen .el-table--border .el-table__inner-wrapper:after,.theme-large-screen .el-table--border:after,.theme-large-screen .el-table--border:before,.theme-large-screen .el-table__inner-wrapper:before{background-color:var(--large-screen-border-color)}.theme-large-screen .el-form-item__label{color:var(--large-screen-text-color)}.theme-large-screen .query-form .el-input__wrapper,.theme-large-screen .query-form .el-select__wrapper{background-color:var(--large-screen-search-bg);box-shadow:none!important;border:1px solid var(--large-screen-border-color)}.theme-large-screen .el-button--primary,.theme-large-screen .el-button--success{background-color:var(--large-screen-button-bg);border-color:var(--large-screen-button-bg);color:#fff}.theme-large-screen .el-button--primary:hover,.theme-large-screen .el-button--success:hover{filter:brightness(1.2);background-color:var(--large-screen-button-bg);border-color:var(--large-screen-button-bg)}.theme-large-screen .el-button--danger:not(.is-link){background-color:#f56c6c;border-color:#f56c6c;color:#fff}.theme-large-screen .el-table .el-button.is-link{color:var(--large-screen-action-link-color)}.theme-large-screen .el-table .el-button.is-link:hover{filter:brightness(1.2)}.theme-large-screen .el-pagination{--el-pagination-text-color: var(--large-screen-text-color);--el-pagination-bg-color: transparent;--el-pagination-button-disabled-bg-color: rgba(120, 153, 199, .2);--el-pagination-button-bg-color: rgba(120, 153, 199, .3)}.large-screen-dialog .el-dialog{background-color:var(--el-dialog-bg-color)!important;border-radius:8px}.large-screen-dialog .el-dialog__title,.large-screen-dialog .el-dialog__body{color:var(--large-screen-text-color)}.large-screen-dialog .el-form-item__label{color:var(--large-screen-text-color)!important}.large-screen-dialog .el-input__wrapper,.large-screen-dialog .el-select__wrapper{background-color:#7899c71a!important;border:1px solid var(--large-screen-border-color)!important;box-shadow:none!important}.large-screen-dialog .el-input__inner,.large-screen-dialog .el-radio__label{color:var(--large-screen-text-color)!important}.large-screen-dialog .el-button--primary{background-color:var(--large-screen-button-bg);border-color:var(--large-screen-button-bg);color:#fff}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
+
import { getCurrentScope as le, onScopeDispose as ie, computed as x, toValue as G, watch as se, shallowRef as ue, getCurrentInstance as de, onMounted as I, defineComponent as J, ref as z, resolveComponent as v, createElementBlock as b, createBlock as h, openBlock as s, toDisplayString as R, withCtx as f, createElementVNode as $, reactive as M, resolveDirective as pe, normalizeClass as ce, createCommentVNode as y, createVNode as D, renderSlot as g, Fragment as Q, createTextVNode as F, withDirectives as fe, mergeProps as H, renderList as ge, createSlots as me } from "vue";
|
|
3
|
+
import { ElMessage as O, ElMessageBox as ye } from "element-plus";
|
|
4
|
+
import he from "axios";
|
|
5
|
+
const B = he.create({
|
|
6
|
+
// VITE_APP_BASE_API 是在 .env 文件中定义的基础 URL
|
|
7
|
+
baseURL: "",
|
|
8
|
+
timeout: 1e4
|
|
9
|
+
// 请求超时时间
|
|
10
|
+
});
|
|
11
|
+
B.interceptors.request.use(
|
|
12
|
+
(r) => {
|
|
13
|
+
const n = localStorage.getItem("token");
|
|
14
|
+
return n && (r.headers.Authorization = "Bearer " + n), r;
|
|
15
|
+
},
|
|
16
|
+
(r) => (console.log(r), Promise.reject(r))
|
|
17
|
+
);
|
|
18
|
+
B.interceptors.response.use(
|
|
19
|
+
/**
|
|
20
|
+
* @description 如果您想直接获取诸如 headers 或 status 之类的信息,
|
|
21
|
+
* 请直接返回 response => response
|
|
22
|
+
*/
|
|
23
|
+
(r) => {
|
|
24
|
+
const n = r.data;
|
|
25
|
+
return n.code !== 200 ? (O({
|
|
26
|
+
message: n.msg || "Error",
|
|
27
|
+
// 使用后端返回的 `msg` 作为错误提示
|
|
28
|
+
type: "error",
|
|
29
|
+
duration: 5 * 1e3
|
|
30
|
+
}), (n.code === 401 || n.code === 403) && ye.confirm(
|
|
31
|
+
"您的登录状态已失效,请重新登录",
|
|
32
|
+
"确认登出",
|
|
33
|
+
{
|
|
34
|
+
confirmButtonText: "重新登录",
|
|
35
|
+
cancelButtonText: "取消",
|
|
36
|
+
type: "warning"
|
|
37
|
+
}
|
|
38
|
+
).then(() => {
|
|
39
|
+
localStorage.removeItem("token"), location.reload();
|
|
40
|
+
}), Promise.reject(new Error(n.msg || "Error"))) : n;
|
|
41
|
+
},
|
|
42
|
+
(r) => (console.log("HTTP Error: " + r), O({
|
|
43
|
+
message: "网络错误,请检查您的网络连接或联系管理员",
|
|
44
|
+
// 提供更友好的网络错误提示
|
|
45
|
+
type: "error",
|
|
46
|
+
duration: 5 * 1e3
|
|
47
|
+
}), Promise.reject(r))
|
|
48
|
+
);
|
|
49
|
+
function we(r) {
|
|
50
|
+
return le() ? (ie(r), !0) : !1;
|
|
51
|
+
}
|
|
52
|
+
const ve = typeof window < "u" && typeof document < "u";
|
|
53
|
+
typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
|
|
54
|
+
const be = ve ? window : void 0;
|
|
55
|
+
function L(r) {
|
|
56
|
+
var n;
|
|
57
|
+
const p = G(r);
|
|
58
|
+
return (n = p == null ? void 0 : p.$el) != null ? n : p;
|
|
59
|
+
}
|
|
60
|
+
// @__NO_SIDE_EFFECTS__
|
|
61
|
+
function Se() {
|
|
62
|
+
const r = ue(!1), n = de();
|
|
63
|
+
return n && I(() => {
|
|
64
|
+
r.value = !0;
|
|
65
|
+
}, n), r;
|
|
66
|
+
}
|
|
67
|
+
// @__NO_SIDE_EFFECTS__
|
|
68
|
+
function _e(r) {
|
|
69
|
+
const n = /* @__PURE__ */ Se();
|
|
70
|
+
return x(() => (n.value, !!r()));
|
|
71
|
+
}
|
|
72
|
+
function ke(r, n, p = {}) {
|
|
73
|
+
const { window: c = be, ...e } = p;
|
|
74
|
+
let S;
|
|
75
|
+
const U = /* @__PURE__ */ _e(() => c && "ResizeObserver" in c), _ = () => {
|
|
76
|
+
S && (S.disconnect(), S = void 0);
|
|
77
|
+
}, j = x(() => {
|
|
78
|
+
const m = G(r);
|
|
79
|
+
return Array.isArray(m) ? m.map((w) => L(w)) : [L(m)];
|
|
80
|
+
}), i = se(
|
|
81
|
+
j,
|
|
82
|
+
(m) => {
|
|
83
|
+
if (_(), U.value && c) {
|
|
84
|
+
S = new ResizeObserver(n);
|
|
85
|
+
for (const w of m)
|
|
86
|
+
w && S.observe(w, e);
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
{ immediate: !0, flush: "post" }
|
|
90
|
+
), k = () => {
|
|
91
|
+
_(), i();
|
|
92
|
+
};
|
|
93
|
+
return we(k), {
|
|
94
|
+
isSupported: U,
|
|
95
|
+
stop: k
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
const Ce = /* @__PURE__ */ J({
|
|
99
|
+
__name: "TableHeaderWithTooltip",
|
|
100
|
+
props: {
|
|
101
|
+
label: {},
|
|
102
|
+
placement: {}
|
|
103
|
+
},
|
|
104
|
+
setup(r) {
|
|
105
|
+
const n = z(null), p = z(!1), c = () => {
|
|
106
|
+
n.value && (p.value = n.value.scrollWidth > n.value.clientWidth);
|
|
107
|
+
};
|
|
108
|
+
return I(() => {
|
|
109
|
+
c();
|
|
110
|
+
}), ke(n, () => {
|
|
111
|
+
c();
|
|
112
|
+
}), (e, S) => {
|
|
113
|
+
const U = v("el-tooltip");
|
|
114
|
+
return p.value ? (s(), h(U, {
|
|
115
|
+
key: 1,
|
|
116
|
+
content: e.label,
|
|
117
|
+
placement: e.placement || "top"
|
|
118
|
+
}, {
|
|
119
|
+
default: f(() => [
|
|
120
|
+
$("span", {
|
|
121
|
+
ref_key: "textRef",
|
|
122
|
+
ref: n,
|
|
123
|
+
class: "header-cell-content"
|
|
124
|
+
}, R(e.label), 513)
|
|
125
|
+
]),
|
|
126
|
+
_: 1
|
|
127
|
+
}, 8, ["content", "placement"])) : (s(), b("span", {
|
|
128
|
+
key: 0,
|
|
129
|
+
ref_key: "textRef",
|
|
130
|
+
ref: n,
|
|
131
|
+
class: "header-cell-content"
|
|
132
|
+
}, R(e.label), 513));
|
|
133
|
+
};
|
|
134
|
+
}
|
|
135
|
+
}), K = (r, n) => {
|
|
136
|
+
const p = r.__vccOpts || r;
|
|
137
|
+
for (const [c, e] of n)
|
|
138
|
+
p[c] = e;
|
|
139
|
+
return p;
|
|
140
|
+
}, De = /* @__PURE__ */ K(Ce, [["__scopeId", "data-v-d23c8660"]]), Be = {
|
|
141
|
+
key: 0,
|
|
142
|
+
class: "search-section-wrapper"
|
|
143
|
+
}, Ue = { class: "flex flex-wrap items-center justify-between gap-4" }, Ae = { class: "flex items-center gap-x-2" }, xe = { class: "flex items-center gap-x-3 action-buttons flex-shrink-0" }, ze = { class: "table-content-wrapper" }, Oe = { key: 1 }, Fe = {
|
|
144
|
+
key: 0,
|
|
145
|
+
class: "flex items-center gap-x-2"
|
|
146
|
+
}, $e = {
|
|
147
|
+
key: 1,
|
|
148
|
+
class: "pagination-wrapper flex justify-end mt-2"
|
|
149
|
+
}, Te = /* @__PURE__ */ J({
|
|
150
|
+
__name: "CrudTable",
|
|
151
|
+
props: {
|
|
152
|
+
/**
|
|
153
|
+
* @description 组件的主题风格
|
|
154
|
+
* @type {'default' | 'large-screen'}
|
|
155
|
+
*/
|
|
156
|
+
theme: { type: String, default: "default" },
|
|
157
|
+
customClass: { type: String, default: "" },
|
|
158
|
+
// API 相关配置
|
|
159
|
+
apiUrlQuery: { type: String, required: !0 },
|
|
160
|
+
apiUrlDetail: { type: String, required: !0 },
|
|
161
|
+
apiUrlCreate: { type: String, required: !0 },
|
|
162
|
+
apiUrlUpdate: { type: String, required: !0 },
|
|
163
|
+
apiUrlDelete: { type: String, required: !0 },
|
|
164
|
+
// ✨ [新增] Loading 状态相关配置
|
|
165
|
+
/**
|
|
166
|
+
* @description 加载数据时显示的提示文字
|
|
167
|
+
* @type {String}
|
|
168
|
+
*/
|
|
169
|
+
loadingText: {
|
|
170
|
+
type: String,
|
|
171
|
+
default: "加载中…"
|
|
172
|
+
// 默认为‘加载中…’
|
|
173
|
+
},
|
|
174
|
+
/**
|
|
175
|
+
* @description 遮罩层的背景色 (CSS color)
|
|
176
|
+
* @type {String}
|
|
177
|
+
*/
|
|
178
|
+
loadingBackground: {
|
|
179
|
+
type: String,
|
|
180
|
+
default: "rgba(0, 0, 0, 0.3)"
|
|
181
|
+
// 默认为 rgba(0, 0, 0, 0.3)
|
|
182
|
+
},
|
|
183
|
+
showSearchSection: { type: Boolean, default: !0 },
|
|
184
|
+
// ✨ [新增] 控制搜索/清空按钮的显示
|
|
185
|
+
showSearchActionButtons: { type: Boolean, default: !0 },
|
|
186
|
+
// 控制新增按钮
|
|
187
|
+
showNewBtn: { type: Boolean, default: !0 },
|
|
188
|
+
// 表格列定义,通过配置数组动态渲染,比 slot 更灵活。
|
|
189
|
+
columns: {
|
|
190
|
+
type: Array,
|
|
191
|
+
default: () => []
|
|
192
|
+
},
|
|
193
|
+
// 生命周期钩子函数,允许在特定操作前后注入自定义逻辑。
|
|
194
|
+
onBeforeQuery: { type: Function },
|
|
195
|
+
onAfterQuery: {
|
|
196
|
+
type: Function
|
|
197
|
+
},
|
|
198
|
+
onBeforeOpenDialog: { type: Function },
|
|
199
|
+
onAfterOpenDialog: { type: Function },
|
|
200
|
+
onBeforeSubmit: {
|
|
201
|
+
type: Function
|
|
202
|
+
},
|
|
203
|
+
onAfterSubmit: { type: Function },
|
|
204
|
+
onBeforeDelete: {
|
|
205
|
+
type: Function
|
|
206
|
+
},
|
|
207
|
+
onAfterDelete: {
|
|
208
|
+
type: Function
|
|
209
|
+
},
|
|
210
|
+
// 功能开关,控制UI元素的显示/隐藏。
|
|
211
|
+
showSelectionColumn: { type: Boolean, default: !0 },
|
|
212
|
+
showIndexColumn: { type: Boolean, default: !0 },
|
|
213
|
+
showActionsColumn: { type: Boolean, default: !0 },
|
|
214
|
+
showEditButton: { type: Boolean, default: !0 },
|
|
215
|
+
showDeleteButton: { type: Boolean, default: !0 },
|
|
216
|
+
// UI 定制化配置
|
|
217
|
+
actionsColumnWidth: { type: [String, Number], default: 120 },
|
|
218
|
+
dialogWidth: { type: String, default: "50%" },
|
|
219
|
+
initialSearchForm: { type: Object, default: () => ({ pageNum: 1, pageSize: 10 }) },
|
|
220
|
+
// 分页相关配置
|
|
221
|
+
showPagination: { type: Boolean, default: !0 },
|
|
222
|
+
pageSizes: { type: Array, default: () => [10, 20, 50, 100] },
|
|
223
|
+
paginationLayout: { type: String, default: "total, sizes, prev, pager, next, jumper" },
|
|
224
|
+
paginationBackground: { type: Boolean, default: !0 },
|
|
225
|
+
paginationSmall: { type: Boolean, default: !1 },
|
|
226
|
+
paginationHideOnSinglePage: { type: Boolean, default: !1 },
|
|
227
|
+
// 弹窗表单配置
|
|
228
|
+
dialogFormConfig: { type: Array, default: () => [] },
|
|
229
|
+
dialogFormRules: { type: Object, default: () => ({}) },
|
|
230
|
+
/**
|
|
231
|
+
* @description 是否以 multipart/form-data 格式提交表单。
|
|
232
|
+
* 适用于需要上传文件的场景。
|
|
233
|
+
* @type {Boolean}
|
|
234
|
+
*/
|
|
235
|
+
submitAsFormData: { type: Boolean, default: !1 }
|
|
236
|
+
},
|
|
237
|
+
emits: ["open-dialog", "submit", "delete"],
|
|
238
|
+
setup(r, { expose: n, emit: p }) {
|
|
239
|
+
const c = p, e = r, S = x(() => ["crud-table-wrapper", `theme-${e.theme}`, e.customClass]), U = x(() => e.theme === "large-screen" ? "large-screen-dialog" : ""), _ = (t, o) => t ? !0 : (O.error(`${o} prop is required.`), !1), j = async (t, o) => {
|
|
240
|
+
try {
|
|
241
|
+
let a = { ...o };
|
|
242
|
+
e.onBeforeSubmit && (a = await e.onBeforeSubmit(a, t));
|
|
243
|
+
let d = a;
|
|
244
|
+
if (e.submitAsFormData) {
|
|
245
|
+
const E = new FormData();
|
|
246
|
+
for (const C in a)
|
|
247
|
+
if (Object.prototype.hasOwnProperty.call(a, C)) {
|
|
248
|
+
const W = a[C];
|
|
249
|
+
E.append(C, W ?? "");
|
|
250
|
+
}
|
|
251
|
+
d = E;
|
|
252
|
+
}
|
|
253
|
+
if (u.submitting = !0, t === "add") {
|
|
254
|
+
if (!_(e.apiUrlCreate, "apiUrlCreate")) throw new Error("apiUrlCreate is not configured.");
|
|
255
|
+
await B.post(e.apiUrlCreate, d), O.success("新增成功");
|
|
256
|
+
} else {
|
|
257
|
+
if (!_(e.apiUrlUpdate, "apiUrlUpdate")) throw new Error("apiUrlUpdate is not configured.");
|
|
258
|
+
await B.put(e.apiUrlUpdate, d), O.success("更新成功");
|
|
259
|
+
}
|
|
260
|
+
return e.onAfterSubmit && e.onAfterSubmit(t, a), c("submit", { mode: t, data: a }), u.visible && (u.visible = !1), A(), Promise.resolve();
|
|
261
|
+
} catch (a) {
|
|
262
|
+
return console.error("Submit failed:", a), Promise.reject(a);
|
|
263
|
+
} finally {
|
|
264
|
+
u.submitting = !1;
|
|
265
|
+
}
|
|
266
|
+
}, i = M({ pageNum: 1, pageSize: 10, ...e.initialSearchForm }), k = z([]), m = z(0), w = z(!1), T = z([]), u = M({ visible: !1, loading: !1, submitting: !1, mode: "add", data: {}, formRef: null }), X = x(() => u.mode === "add" ? "新增" : "编辑");
|
|
267
|
+
x(() => {
|
|
268
|
+
if (u.mode === "add") return e.dialogFormConfig.filter((o) => o.prop !== "id");
|
|
269
|
+
const t = [...e.dialogFormConfig.filter((o) => o.prop !== "id")];
|
|
270
|
+
return t.some((o) => o.prop === "id") || t.unshift({ type: "input-disabled", prop: "id", label: "用户ID" }), t;
|
|
271
|
+
});
|
|
272
|
+
const A = async () => {
|
|
273
|
+
if (_(e.apiUrlQuery, "apiUrlQuery")) {
|
|
274
|
+
w.value = !0;
|
|
275
|
+
try {
|
|
276
|
+
let t = { ...i };
|
|
277
|
+
e.onBeforeQuery && (t = await e.onBeforeQuery(t));
|
|
278
|
+
const o = await B.get(e.apiUrlQuery, { params: t });
|
|
279
|
+
if (o && o.data && Array.isArray(o.data.rows) && typeof o.data.total == "number") {
|
|
280
|
+
let a = o.data.rows;
|
|
281
|
+
e.onAfterQuery && (a = await e.onAfterQuery(a, t)), k.value = a, m.value = o.data.total;
|
|
282
|
+
} else
|
|
283
|
+
console.warn("API response is not in the expected { data: { rows: [], total: 0 } } format."), k.value = [], m.value = 0;
|
|
284
|
+
} catch (t) {
|
|
285
|
+
console.error("Fetch data failed:", t);
|
|
286
|
+
} finally {
|
|
287
|
+
w.value = !1;
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
}, N = () => {
|
|
291
|
+
i.pageNum = 1, A();
|
|
292
|
+
}, Y = () => {
|
|
293
|
+
const { pageNum: t, pageSize: o, ...a } = e.initialSearchForm;
|
|
294
|
+
Object.keys(i).forEach((d) => {
|
|
295
|
+
d !== "pageNum" && d !== "pageSize" && delete i[d];
|
|
296
|
+
}), Object.assign(i, a), N();
|
|
297
|
+
}, Z = (t) => {
|
|
298
|
+
T.value = t;
|
|
299
|
+
}, P = async (t, o) => {
|
|
300
|
+
let a;
|
|
301
|
+
if (t === "add" ? a = o ? { ...o } : { role: "user" } : a = { ...o }, e.onBeforeOpenDialog) {
|
|
302
|
+
const d = await e.onBeforeOpenDialog(t, a);
|
|
303
|
+
d && (a = d);
|
|
304
|
+
}
|
|
305
|
+
if (u.mode = t, u.visible = !0, t === "edit") {
|
|
306
|
+
if (!_(e.apiUrlDetail, "apiUrlDetail")) return;
|
|
307
|
+
u.loading = !0;
|
|
308
|
+
try {
|
|
309
|
+
const d = await B.get(e.apiUrlDetail + "/" + a.id.toString());
|
|
310
|
+
u.data = d.data.data;
|
|
311
|
+
} finally {
|
|
312
|
+
u.loading = !1, e.onAfterOpenDialog && e.onAfterOpenDialog(t, u.data), c("open-dialog", { mode: t, data: u.data });
|
|
313
|
+
}
|
|
314
|
+
} else
|
|
315
|
+
u.data = a, e.onAfterOpenDialog && e.onAfterOpenDialog(t, u.data), c("open-dialog", { mode: t, data: u.data });
|
|
316
|
+
}, V = async (t) => {
|
|
317
|
+
if (_(e.apiUrlDelete, "apiUrlDelete"))
|
|
318
|
+
try {
|
|
319
|
+
const o = k.value.filter((d) => t.includes(d.id));
|
|
320
|
+
if (e.onBeforeDelete && await e.onBeforeDelete(t, o) === !1)
|
|
321
|
+
return;
|
|
322
|
+
const a = t.join(",");
|
|
323
|
+
await B.delete(e.apiUrlDelete + "/" + a.toString()), O.success("删除成功"), e.onAfterDelete && e.onAfterDelete(t, o), c("delete", t), k.value.length === t.length && i.pageNum > 1 && i.pageNum--, A();
|
|
324
|
+
} catch (o) {
|
|
325
|
+
console.error("Delete failed", o);
|
|
326
|
+
}
|
|
327
|
+
}, ee = (t) => {
|
|
328
|
+
i.pageSize = t, N();
|
|
329
|
+
}, te = (t) => {
|
|
330
|
+
i.pageNum = t, A();
|
|
331
|
+
};
|
|
332
|
+
return I(A), n({
|
|
333
|
+
refresh: A,
|
|
334
|
+
// 刷新表格
|
|
335
|
+
search: N,
|
|
336
|
+
// 按当前条件搜索
|
|
337
|
+
handleDelete: V,
|
|
338
|
+
// 手动触发删除
|
|
339
|
+
openDialog: P,
|
|
340
|
+
// 手动打开弹窗
|
|
341
|
+
submit: j
|
|
342
|
+
// 手动提交
|
|
343
|
+
}), (t, o) => {
|
|
344
|
+
const a = v("el-button"), d = v("el-form-item"), E = v("el-form"), C = v("el-table-column"), W = v("el-popconfirm"), oe = v("el-table"), ae = v("el-pagination"), ne = v("el-dialog"), re = pe("loading");
|
|
345
|
+
return s(), b("div", {
|
|
346
|
+
class: ce([S.value, "crud-table-container"])
|
|
347
|
+
}, [
|
|
348
|
+
e.showSearchSection ? (s(), b("div", Be, [
|
|
349
|
+
g(t.$slots, "header", {}, void 0, !0),
|
|
350
|
+
$("div", Ue, [
|
|
351
|
+
D(E, {
|
|
352
|
+
model: i,
|
|
353
|
+
class: "query-form flex flex-nowrap items-center gap-x-4",
|
|
354
|
+
style: { "overflow-x": "auto", "padding-bottom": "8px" }
|
|
355
|
+
}, {
|
|
356
|
+
default: f(() => [
|
|
357
|
+
g(t.$slots, "query-conditions", { searchForm: i }, void 0, !0),
|
|
358
|
+
D(d, { class: "!mr-0 flex-shrink-0" }, {
|
|
359
|
+
default: f(() => [
|
|
360
|
+
$("div", Ae, [
|
|
361
|
+
g(t.$slots, "query-left", { searchForm: i }, void 0, !0),
|
|
362
|
+
e.showSearchActionButtons ? (s(), b(Q, { key: 0 }, [
|
|
363
|
+
D(a, {
|
|
364
|
+
type: "primary",
|
|
365
|
+
onClick: N,
|
|
366
|
+
loading: w.value
|
|
367
|
+
}, {
|
|
368
|
+
default: f(() => [...o[4] || (o[4] = [
|
|
369
|
+
F("搜索", -1)
|
|
370
|
+
])]),
|
|
371
|
+
_: 1
|
|
372
|
+
}, 8, ["loading"]),
|
|
373
|
+
D(a, { onClick: Y }, {
|
|
374
|
+
default: f(() => [...o[5] || (o[5] = [
|
|
375
|
+
F("清空", -1)
|
|
376
|
+
])]),
|
|
377
|
+
_: 1
|
|
378
|
+
})
|
|
379
|
+
], 64)) : y("", !0),
|
|
380
|
+
g(t.$slots, "query-right", { searchForm: i }, void 0, !0)
|
|
381
|
+
])
|
|
382
|
+
]),
|
|
383
|
+
_: 3
|
|
384
|
+
})
|
|
385
|
+
]),
|
|
386
|
+
_: 3
|
|
387
|
+
}, 8, ["model"]),
|
|
388
|
+
$("div", xe, [
|
|
389
|
+
g(t.$slots, "action-left", { selections: T.value }, void 0, !0),
|
|
390
|
+
g(t.$slots, "add-button-content", { selections: T.value }, () => [
|
|
391
|
+
e.showNewBtn ? (s(), h(a, {
|
|
392
|
+
key: 0,
|
|
393
|
+
type: "success",
|
|
394
|
+
onClick: o[0] || (o[0] = (l) => P("add"))
|
|
395
|
+
}, {
|
|
396
|
+
default: f(() => [...o[6] || (o[6] = [
|
|
397
|
+
F("新增", -1)
|
|
398
|
+
])]),
|
|
399
|
+
_: 1
|
|
400
|
+
})) : y("", !0)
|
|
401
|
+
], !0),
|
|
402
|
+
g(t.$slots, "action-right", { selections: T.value }, void 0, !0)
|
|
403
|
+
])
|
|
404
|
+
])
|
|
405
|
+
])) : y("", !0),
|
|
406
|
+
$("div", ze, [
|
|
407
|
+
fe((s(), h(oe, H({
|
|
408
|
+
data: k.value,
|
|
409
|
+
"element-loading-text": e.loadingText,
|
|
410
|
+
"element-loading-background": e.loadingBackground,
|
|
411
|
+
onSelectionChange: Z
|
|
412
|
+
}, t.$attrs, {
|
|
413
|
+
height: "100%",
|
|
414
|
+
style: { width: "100%" }
|
|
415
|
+
}), {
|
|
416
|
+
default: f(() => [
|
|
417
|
+
e.showSelectionColumn ? (s(), h(C, {
|
|
418
|
+
key: 0,
|
|
419
|
+
type: "selection",
|
|
420
|
+
width: "55",
|
|
421
|
+
fixed: ""
|
|
422
|
+
})) : y("", !0),
|
|
423
|
+
e.showIndexColumn ? (s(), h(C, {
|
|
424
|
+
key: 1,
|
|
425
|
+
type: "index",
|
|
426
|
+
label: "序号",
|
|
427
|
+
width: "70",
|
|
428
|
+
fixed: ""
|
|
429
|
+
})) : y("", !0),
|
|
430
|
+
(s(!0), b(Q, null, ge(e.columns, (l) => (s(), h(C, H({
|
|
431
|
+
key: l.prop,
|
|
432
|
+
prop: l.prop,
|
|
433
|
+
label: l.label,
|
|
434
|
+
width: l.width,
|
|
435
|
+
sortable: l.sortable || !1
|
|
436
|
+
}, { ref_for: !0 }, l.attrs), me({
|
|
437
|
+
header: f(() => [
|
|
438
|
+
l.headerTooltip ? (s(), h(De, {
|
|
439
|
+
key: 0,
|
|
440
|
+
label: l.label,
|
|
441
|
+
placement: l.placement
|
|
442
|
+
}, null, 8, ["label", "placement"])) : (s(), b("span", Oe, R(l.label), 1))
|
|
443
|
+
]),
|
|
444
|
+
_: 2
|
|
445
|
+
}, [
|
|
446
|
+
l.slot ? {
|
|
447
|
+
name: "default",
|
|
448
|
+
fn: f((q) => [
|
|
449
|
+
g(t.$slots, l.slot, {
|
|
450
|
+
row: q.row
|
|
451
|
+
}, void 0, !0)
|
|
452
|
+
]),
|
|
453
|
+
key: "0"
|
|
454
|
+
} : void 0
|
|
455
|
+
]), 1040, ["prop", "label", "width", "sortable"]))), 128)),
|
|
456
|
+
e.showActionsColumn ? (s(), h(C, {
|
|
457
|
+
key: 2,
|
|
458
|
+
label: "操作",
|
|
459
|
+
width: r.actionsColumnWidth
|
|
460
|
+
}, {
|
|
461
|
+
default: f((l) => [
|
|
462
|
+
l.row ? (s(), b("div", Fe, [
|
|
463
|
+
t.$slots.actions ? g(t.$slots, "actions", {
|
|
464
|
+
key: 0,
|
|
465
|
+
row: l.row
|
|
466
|
+
}, void 0, !0) : (s(), b(Q, { key: 1 }, [
|
|
467
|
+
g(t.$slots, "action-before-edit", {
|
|
468
|
+
row: l.row
|
|
469
|
+
}, void 0, !0),
|
|
470
|
+
e.showEditButton ? (s(), h(a, {
|
|
471
|
+
key: 0,
|
|
472
|
+
size: "small",
|
|
473
|
+
type: "primary",
|
|
474
|
+
link: "",
|
|
475
|
+
onClick: (q) => P("edit", l.row)
|
|
476
|
+
}, {
|
|
477
|
+
default: f(() => [...o[7] || (o[7] = [
|
|
478
|
+
F("编辑 ", -1)
|
|
479
|
+
])]),
|
|
480
|
+
_: 1
|
|
481
|
+
}, 8, ["onClick"])) : y("", !0),
|
|
482
|
+
e.showDeleteButton ? (s(), h(W, {
|
|
483
|
+
key: 1,
|
|
484
|
+
title: "确定要删除这条数据吗?",
|
|
485
|
+
onConfirm: (q) => V([l.row.id]),
|
|
486
|
+
"confirm-button-text": "确定",
|
|
487
|
+
"cancel-button-text": "取消",
|
|
488
|
+
width: "200"
|
|
489
|
+
}, {
|
|
490
|
+
reference: f(() => [
|
|
491
|
+
D(a, {
|
|
492
|
+
size: "small",
|
|
493
|
+
type: "danger",
|
|
494
|
+
link: ""
|
|
495
|
+
}, {
|
|
496
|
+
default: f(() => [...o[8] || (o[8] = [
|
|
497
|
+
F("删除", -1)
|
|
498
|
+
])]),
|
|
499
|
+
_: 1
|
|
500
|
+
})
|
|
501
|
+
]),
|
|
502
|
+
_: 1
|
|
503
|
+
}, 8, ["onConfirm"])) : y("", !0),
|
|
504
|
+
g(t.$slots, "action-after-delete", {
|
|
505
|
+
row: l.row
|
|
506
|
+
}, void 0, !0)
|
|
507
|
+
], 64))
|
|
508
|
+
])) : y("", !0)
|
|
509
|
+
]),
|
|
510
|
+
_: 3
|
|
511
|
+
}, 8, ["width"])) : y("", !0)
|
|
512
|
+
]),
|
|
513
|
+
_: 3
|
|
514
|
+
}, 16, ["data", "element-loading-text", "element-loading-background"])), [
|
|
515
|
+
[re, w.value]
|
|
516
|
+
])
|
|
517
|
+
]),
|
|
518
|
+
e.showPagination && m.value > 0 ? (s(), b("div", $e, [
|
|
519
|
+
D(ae, {
|
|
520
|
+
"current-page": i.pageNum,
|
|
521
|
+
"onUpdate:currentPage": o[1] || (o[1] = (l) => i.pageNum = l),
|
|
522
|
+
"page-size": i.pageSize,
|
|
523
|
+
"onUpdate:pageSize": o[2] || (o[2] = (l) => i.pageSize = l),
|
|
524
|
+
"page-sizes": e.pageSizes,
|
|
525
|
+
layout: e.paginationLayout,
|
|
526
|
+
total: m.value,
|
|
527
|
+
background: e.paginationBackground,
|
|
528
|
+
small: e.paginationSmall,
|
|
529
|
+
"hide-on-single-page": e.paginationHideOnSinglePage,
|
|
530
|
+
onSizeChange: ee,
|
|
531
|
+
onCurrentChange: te
|
|
532
|
+
}, null, 8, ["current-page", "page-size", "page-sizes", "layout", "total", "background", "small", "hide-on-single-page"])
|
|
533
|
+
])) : y("", !0),
|
|
534
|
+
D(ne, {
|
|
535
|
+
modelValue: u.visible,
|
|
536
|
+
"onUpdate:modelValue": o[3] || (o[3] = (l) => u.visible = l),
|
|
537
|
+
title: X.value,
|
|
538
|
+
width: e.dialogWidth,
|
|
539
|
+
"destroy-on-close": !0,
|
|
540
|
+
"custom-class": U.value
|
|
541
|
+
}, null, 8, ["modelValue", "title", "width", "custom-class"])
|
|
542
|
+
], 2);
|
|
543
|
+
};
|
|
544
|
+
}
|
|
545
|
+
}), Pe = /* @__PURE__ */ K(Te, [["__scopeId", "data-v-7f0655b1"]]);
|
|
546
|
+
export {
|
|
547
|
+
Pe as CrudTable
|
|
548
|
+
};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.header-cell-content[data-v-d23c8660]{display:inline-block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.crud-table-container[data-v-7f0655b1]{display:flex;flex-direction:column;height:100%;width:100%;min-width:0;min-height:0;overflow:hidden}.search-section-wrapper[data-v-7f0655b1]{flex-shrink:0}.table-content-wrapper[data-v-7f0655b1]{flex:1;min-height:0;overflow:hidden}.pagination-wrapper[data-v-7f0655b1]{flex-shrink:0;padding-top:1rem;display:flex;justify-content:flex-end}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.\\!mr-0{margin-right:0!important}.mt-2{margin-top:.5rem}.flex{display:flex}.hidden{display:none}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-4{gap:1rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}body{background-color:#f0f2f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;margin:0}#app{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50}.crud-container{transition:box-shadow .3s ease-in-out}.crud-container:hover{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.query-form .el-form-item{margin-bottom:0!important}.el-table__expanded-cell{padding:1rem 3.5rem!important;background-color:#f8fafc}.action-buttons>*+*{margin-left:.75rem}.el-dialog__header{border-bottom:none;padding:24px 24px 10px}.el-dialog__title{font-size:1.25rem;font-weight:600}.el-dialog__footer{border-top:none;padding:10px 24px 24px}.el-dialog__body{padding:10px 24px}:root{--large-screen-border-color: rgba(120, 153, 199, 1);--large-screen-text-color: rgba(227, 246, 255, 1);--large-screen-search-bg: rgba(210, 224, 243, .1);--large-screen-button-bg: rgba(38, 120, 255, 1);--large-screen-action-link-color: rgba(39, 233, 255, 1);--large-screen-dialog-bg: #1e293b;--large-screen-hover-bg: rgba(120, 153, 199, .15)}.theme-large-screen{color:var(--large-screen-text-color)}.theme-large-screen .crud-container{background-color:transparent!important;border:none}.theme-large-screen .el-table,.theme-large-screen .el-table__expanded-cell,.theme-large-screen .el-table th.el-table__cell,.theme-large-screen .el-table tr,.theme-large-screen .el-table .el-table__row{background-color:transparent!important;color:var(--large-screen-text-color)}.theme-large-screen .el-table th.el-table__cell{font-weight:600}.theme-large-screen .el-table td.el-table__cell,.theme-large-screen .el-table th.el-table__cell.is-leaf{border-bottom:1px solid var(--large-screen-border-color)}.theme-large-screen .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{background-color:var(--large-screen-hover-bg)!important}.theme-large-screen .el-table--border .el-table__inner-wrapper:after,.theme-large-screen .el-table--border:after,.theme-large-screen .el-table--border:before,.theme-large-screen .el-table__inner-wrapper:before{background-color:var(--large-screen-border-color)}.theme-large-screen .el-form-item__label{color:var(--large-screen-text-color)}.theme-large-screen .query-form .el-input__wrapper,.theme-large-screen .query-form .el-select__wrapper{background-color:var(--large-screen-search-bg);box-shadow:none!important;border:1px solid var(--large-screen-border-color)}.theme-large-screen .el-button--primary,.theme-large-screen .el-button--success{background-color:var(--large-screen-button-bg);border-color:var(--large-screen-button-bg);color:#fff}.theme-large-screen .el-button--primary:hover,.theme-large-screen .el-button--success:hover{filter:brightness(1.2);background-color:var(--large-screen-button-bg);border-color:var(--large-screen-button-bg)}.theme-large-screen .el-button--danger:not(.is-link){background-color:#f56c6c;border-color:#f56c6c;color:#fff}.theme-large-screen .el-table .el-button.is-link{color:var(--large-screen-action-link-color)}.theme-large-screen .el-table .el-button.is-link:hover{filter:brightness(1.2)}.theme-large-screen .el-pagination{--el-pagination-text-color: var(--large-screen-text-color);--el-pagination-bg-color: transparent;--el-pagination-button-disabled-bg-color: rgba(120, 153, 199, .2);--el-pagination-button-bg-color: rgba(120, 153, 199, .3)}.large-screen-dialog .el-dialog{background-color:var(--el-dialog-bg-color)!important;border-radius:8px}.large-screen-dialog .el-dialog__title,.large-screen-dialog .el-dialog__body{color:var(--large-screen-text-color)}.large-screen-dialog .el-form-item__label{color:var(--large-screen-text-color)!important}.large-screen-dialog .el-input__wrapper,.large-screen-dialog .el-select__wrapper{background-color:#7899c71a!important;border:1px solid var(--large-screen-border-color)!important;box-shadow:none!important}.large-screen-dialog .el-input__inner,.large-screen-dialog .el-radio__label{color:var(--large-screen-text-color)!important}.large-screen-dialog .el-button--primary{background-color:var(--large-screen-button-bg);border-color:var(--large-screen-button-bg);color:#fff}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
+
(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("element-plus"),require("axios")):typeof define=="function"&&define.amd?define(["exports","vue","element-plus","axios"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u.ZCrudTable={},u.Vue,u.ElementPlus,u.axios))})(this,(function(u,e,k,z){"use strict";const B=z.create({baseURL:"",timeout:1e4});B.interceptors.request.use(l=>{const r=localStorage.getItem("token");return r&&(l.headers.Authorization="Bearer "+r),l},l=>(console.log(l),Promise.reject(l))),B.interceptors.response.use(l=>{const r=l.data;return r.code!==200?(k.ElMessage({message:r.msg||"Error",type:"error",duration:5*1e3}),(r.code===401||r.code===403)&&k.ElMessageBox.confirm("您的登录状态已失效,请重新登录","确认登出",{confirmButtonText:"重新登录",cancelButtonText:"取消",type:"warning"}).then(()=>{localStorage.removeItem("token"),location.reload()}),Promise.reject(new Error(r.msg||"Error"))):r},l=>(console.log("HTTP Error: "+l),k.ElMessage({message:"网络错误,请检查您的网络连接或联系管理员",type:"error",duration:5*1e3}),Promise.reject(l)));function F(l){return e.getCurrentScope()?(e.onScopeDispose(l),!0):!1}const $=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const j=$?window:void 0;function A(l){var r;const p=e.toValue(l);return(r=p==null?void 0:p.$el)!=null?r:p}function q(){const l=e.shallowRef(!1),r=e.getCurrentInstance();return r&&e.onMounted(()=>{l.value=!0},r),l}function M(l){const r=q();return e.computed(()=>(r.value,!!l()))}function W(l,r,p={}){const{window:f=j,...t}=p;let y;const S=M(()=>f&&"ResizeObserver"in f),h=()=>{y&&(y.disconnect(),y=void 0)},N=e.computed(()=>{const m=e.toValue(l);return Array.isArray(m)?m.map(g=>A(g)):[A(m)]}),s=e.watch(N,m=>{if(h(),S.value&&f){y=new ResizeObserver(r);for(const g of m)g&&y.observe(g,t)}},{immediate:!0,flush:"post"}),w=()=>{h(),s()};return F(w),{isSupported:S,stop:w}}const P=e.defineComponent({__name:"TableHeaderWithTooltip",props:{label:{},placement:{}},setup(l){const r=e.ref(null),p=e.ref(!1),f=()=>{r.value&&(p.value=r.value.scrollWidth>r.value.clientWidth)};return e.onMounted(()=>{f()}),W(r,()=>{f()}),(t,y)=>{const S=e.resolveComponent("el-tooltip");return p.value?(e.openBlock(),e.createBlock(S,{key:1,content:t.label,placement:t.placement||"top"},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"textRef",ref:r,class:"header-cell-content"},e.toDisplayString(t.label),513)]),_:1},8,["content","placement"])):(e.openBlock(),e.createElementBlock("span",{key:0,ref_key:"textRef",ref:r,class:"header-cell-content"},e.toDisplayString(t.label),513))}}}),T=(l,r)=>{const p=l.__vccOpts||l;for(const[f,t]of r)p[f]=t;return p},Q=T(P,[["__scopeId","data-v-d23c8660"]]),R={key:0,class:"search-section-wrapper"},I={class:"flex flex-wrap items-center justify-between gap-4"},H={class:"flex items-center gap-x-2"},L={class:"flex items-center gap-x-3 action-buttons flex-shrink-0"},G={class:"table-content-wrapper"},Z={key:1},J={key:0,class:"flex items-center gap-x-2"},K={key:1,class:"pagination-wrapper flex justify-end mt-2"},X=T(e.defineComponent({__name:"CrudTable",props:{theme:{type:String,default:"default"},customClass:{type:String,default:""},apiUrlQuery:{type:String,required:!0},apiUrlDetail:{type:String,required:!0},apiUrlCreate:{type:String,required:!0},apiUrlUpdate:{type:String,required:!0},apiUrlDelete:{type:String,required:!0},loadingText:{type:String,default:"加载中…"},loadingBackground:{type:String,default:"rgba(0, 0, 0, 0.3)"},showSearchSection:{type:Boolean,default:!0},showSearchActionButtons:{type:Boolean,default:!0},showNewBtn:{type:Boolean,default:!0},columns:{type:Array,default:()=>[]},onBeforeQuery:{type:Function},onAfterQuery:{type:Function},onBeforeOpenDialog:{type:Function},onAfterOpenDialog:{type:Function},onBeforeSubmit:{type:Function},onAfterSubmit:{type:Function},onBeforeDelete:{type:Function},onAfterDelete:{type:Function},showSelectionColumn:{type:Boolean,default:!0},showIndexColumn:{type:Boolean,default:!0},showActionsColumn:{type:Boolean,default:!0},showEditButton:{type:Boolean,default:!0},showDeleteButton:{type:Boolean,default:!0},actionsColumnWidth:{type:[String,Number],default:120},dialogWidth:{type:String,default:"50%"},initialSearchForm:{type:Object,default:()=>({pageNum:1,pageSize:10})},showPagination:{type:Boolean,default:!0},pageSizes:{type:Array,default:()=>[10,20,50,100]},paginationLayout:{type:String,default:"total, sizes, prev, pager, next, jumper"},paginationBackground:{type:Boolean,default:!0},paginationSmall:{type:Boolean,default:!1},paginationHideOnSinglePage:{type:Boolean,default:!1},dialogFormConfig:{type:Array,default:()=>[]},dialogFormRules:{type:Object,default:()=>({})},submitAsFormData:{type:Boolean,default:!1}},emits:["open-dialog","submit","delete"],setup(l,{expose:r,emit:p}){const f=p,t=l,y=e.computed(()=>["crud-table-wrapper",`theme-${t.theme}`,t.customClass]),S=e.computed(()=>t.theme==="large-screen"?"large-screen-dialog":""),h=(o,n)=>o?!0:(k.ElMessage.error(`${n} prop is required.`),!1),N=async(o,n)=>{try{let a={...n};t.onBeforeSubmit&&(a=await t.onBeforeSubmit(a,o));let d=a;if(t.submitAsFormData){const x=new FormData;for(const b in a)if(Object.prototype.hasOwnProperty.call(a,b)){const E=a[b];x.append(b,E??"")}d=x}if(c.submitting=!0,o==="add"){if(!h(t.apiUrlCreate,"apiUrlCreate"))throw new Error("apiUrlCreate is not configured.");await B.post(t.apiUrlCreate,d),k.ElMessage.success("新增成功")}else{if(!h(t.apiUrlUpdate,"apiUrlUpdate"))throw new Error("apiUrlUpdate is not configured.");await B.put(t.apiUrlUpdate,d),k.ElMessage.success("更新成功")}return t.onAfterSubmit&&t.onAfterSubmit(o,a),f("submit",{mode:o,data:a}),c.visible&&(c.visible=!1),C(),Promise.resolve()}catch(a){return console.error("Submit failed:",a),Promise.reject(a)}finally{c.submitting=!1}},s=e.reactive({pageNum:1,pageSize:10,...t.initialSearchForm}),w=e.ref([]),m=e.ref(0),g=e.ref(!1),_=e.ref([]),c=e.reactive({visible:!1,loading:!1,submitting:!1,mode:"add",data:{},formRef:null}),Y=e.computed(()=>c.mode==="add"?"新增":"编辑");e.computed(()=>{if(c.mode==="add")return t.dialogFormConfig.filter(n=>n.prop!=="id");const o=[...t.dialogFormConfig.filter(n=>n.prop!=="id")];return o.some(n=>n.prop==="id")||o.unshift({type:"input-disabled",prop:"id",label:"用户ID"}),o});const C=async()=>{if(h(t.apiUrlQuery,"apiUrlQuery")){g.value=!0;try{let o={...s};t.onBeforeQuery&&(o=await t.onBeforeQuery(o));const n=await B.get(t.apiUrlQuery,{params:o});if(n&&n.data&&Array.isArray(n.data.rows)&&typeof n.data.total=="number"){let a=n.data.rows;t.onAfterQuery&&(a=await t.onAfterQuery(a,o)),w.value=a,m.value=n.data.total}else console.warn("API response is not in the expected { data: { rows: [], total: 0 } } format."),w.value=[],m.value=0}catch(o){console.error("Fetch data failed:",o)}finally{g.value=!1}}},D=()=>{s.pageNum=1,C()},v=()=>{const{pageNum:o,pageSize:n,...a}=t.initialSearchForm;Object.keys(s).forEach(d=>{d!=="pageNum"&&d!=="pageSize"&&delete s[d]}),Object.assign(s,a),D()},ee=o=>{_.value=o},V=async(o,n)=>{let a;if(o==="add"?a=n?{...n}:{role:"user"}:a={...n},t.onBeforeOpenDialog){const d=await t.onBeforeOpenDialog(o,a);d&&(a=d)}if(c.mode=o,c.visible=!0,o==="edit"){if(!h(t.apiUrlDetail,"apiUrlDetail"))return;c.loading=!0;try{const d=await B.get(t.apiUrlDetail+"/"+a.id.toString());c.data=d.data.data}finally{c.loading=!1,t.onAfterOpenDialog&&t.onAfterOpenDialog(o,c.data),f("open-dialog",{mode:o,data:c.data})}}else c.data=a,t.onAfterOpenDialog&&t.onAfterOpenDialog(o,c.data),f("open-dialog",{mode:o,data:c.data})},O=async o=>{if(h(t.apiUrlDelete,"apiUrlDelete"))try{const n=w.value.filter(d=>o.includes(d.id));if(t.onBeforeDelete&&await t.onBeforeDelete(o,n)===!1)return;const a=o.join(",");await B.delete(t.apiUrlDelete+"/"+a.toString()),k.ElMessage.success("删除成功"),t.onAfterDelete&&t.onAfterDelete(o,n),f("delete",o),w.value.length===o.length&&s.pageNum>1&&s.pageNum--,C()}catch(n){console.error("Delete failed",n)}},te=o=>{s.pageSize=o,D()},oe=o=>{s.pageNum=o,C()};return e.onMounted(C),r({refresh:C,search:D,handleDelete:O,openDialog:V,submit:N}),(o,n)=>{const a=e.resolveComponent("el-button"),d=e.resolveComponent("el-form-item"),x=e.resolveComponent("el-form"),b=e.resolveComponent("el-table-column"),E=e.resolveComponent("el-popconfirm"),ne=e.resolveComponent("el-table"),ae=e.resolveComponent("el-pagination"),re=e.resolveComponent("el-dialog"),le=e.resolveDirective("loading");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([y.value,"crud-table-container"])},[t.showSearchSection?(e.openBlock(),e.createElementBlock("div",R,[e.renderSlot(o.$slots,"header",{},void 0,!0),e.createElementVNode("div",I,[e.createVNode(x,{model:s,class:"query-form flex flex-nowrap items-center gap-x-4",style:{"overflow-x":"auto","padding-bottom":"8px"}},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"query-conditions",{searchForm:s},void 0,!0),e.createVNode(d,{class:"!mr-0 flex-shrink-0"},{default:e.withCtx(()=>[e.createElementVNode("div",H,[e.renderSlot(o.$slots,"query-left",{searchForm:s},void 0,!0),t.showSearchActionButtons?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createVNode(a,{type:"primary",onClick:D,loading:g.value},{default:e.withCtx(()=>[...n[4]||(n[4]=[e.createTextVNode("搜索",-1)])]),_:1},8,["loading"]),e.createVNode(a,{onClick:v},{default:e.withCtx(()=>[...n[5]||(n[5]=[e.createTextVNode("清空",-1)])]),_:1})],64)):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"query-right",{searchForm:s},void 0,!0)])]),_:3})]),_:3},8,["model"]),e.createElementVNode("div",L,[e.renderSlot(o.$slots,"action-left",{selections:_.value},void 0,!0),e.renderSlot(o.$slots,"add-button-content",{selections:_.value},()=>[t.showNewBtn?(e.openBlock(),e.createBlock(a,{key:0,type:"success",onClick:n[0]||(n[0]=i=>V("add"))},{default:e.withCtx(()=>[...n[6]||(n[6]=[e.createTextVNode("新增",-1)])]),_:1})):e.createCommentVNode("",!0)],!0),e.renderSlot(o.$slots,"action-right",{selections:_.value},void 0,!0)])])])):e.createCommentVNode("",!0),e.createElementVNode("div",G,[e.withDirectives((e.openBlock(),e.createBlock(ne,e.mergeProps({data:w.value,"element-loading-text":t.loadingText,"element-loading-background":t.loadingBackground,onSelectionChange:ee},o.$attrs,{height:"100%",style:{width:"100%"}}),{default:e.withCtx(()=>[t.showSelectionColumn?(e.openBlock(),e.createBlock(b,{key:0,type:"selection",width:"55",fixed:""})):e.createCommentVNode("",!0),t.showIndexColumn?(e.openBlock(),e.createBlock(b,{key:1,type:"index",label:"序号",width:"70",fixed:""})):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,i=>(e.openBlock(),e.createBlock(b,e.mergeProps({key:i.prop,prop:i.prop,label:i.label,width:i.width,sortable:i.sortable||!1},{ref_for:!0},i.attrs),e.createSlots({header:e.withCtx(()=>[i.headerTooltip?(e.openBlock(),e.createBlock(Q,{key:0,label:i.label,placement:i.placement},null,8,["label","placement"])):(e.openBlock(),e.createElementBlock("span",Z,e.toDisplayString(i.label),1))]),_:2},[i.slot?{name:"default",fn:e.withCtx(U=>[e.renderSlot(o.$slots,i.slot,{row:U.row},void 0,!0)]),key:"0"}:void 0]),1040,["prop","label","width","sortable"]))),128)),t.showActionsColumn?(e.openBlock(),e.createBlock(b,{key:2,label:"操作",width:l.actionsColumnWidth},{default:e.withCtx(i=>[i.row?(e.openBlock(),e.createElementBlock("div",J,[o.$slots.actions?e.renderSlot(o.$slots,"actions",{key:0,row:i.row},void 0,!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.renderSlot(o.$slots,"action-before-edit",{row:i.row},void 0,!0),t.showEditButton?(e.openBlock(),e.createBlock(a,{key:0,size:"small",type:"primary",link:"",onClick:U=>V("edit",i.row)},{default:e.withCtx(()=>[...n[7]||(n[7]=[e.createTextVNode("编辑 ",-1)])]),_:1},8,["onClick"])):e.createCommentVNode("",!0),t.showDeleteButton?(e.openBlock(),e.createBlock(E,{key:1,title:"确定要删除这条数据吗?",onConfirm:U=>O([i.row.id]),"confirm-button-text":"确定","cancel-button-text":"取消",width:"200"},{reference:e.withCtx(()=>[e.createVNode(a,{size:"small",type:"danger",link:""},{default:e.withCtx(()=>[...n[8]||(n[8]=[e.createTextVNode("删除",-1)])]),_:1})]),_:1},8,["onConfirm"])):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"action-after-delete",{row:i.row},void 0,!0)],64))])):e.createCommentVNode("",!0)]),_:3},8,["width"])):e.createCommentVNode("",!0)]),_:3},16,["data","element-loading-text","element-loading-background"])),[[le,g.value]])]),t.showPagination&&m.value>0?(e.openBlock(),e.createElementBlock("div",K,[e.createVNode(ae,{"current-page":s.pageNum,"onUpdate:currentPage":n[1]||(n[1]=i=>s.pageNum=i),"page-size":s.pageSize,"onUpdate:pageSize":n[2]||(n[2]=i=>s.pageSize=i),"page-sizes":t.pageSizes,layout:t.paginationLayout,total:m.value,background:t.paginationBackground,small:t.paginationSmall,"hide-on-single-page":t.paginationHideOnSinglePage,onSizeChange:te,onCurrentChange:oe},null,8,["current-page","page-size","page-sizes","layout","total","background","small","hide-on-single-page"])])):e.createCommentVNode("",!0),e.createVNode(re,{modelValue:c.visible,"onUpdate:modelValue":n[3]||(n[3]=i=>c.visible=i),title:Y.value,width:t.dialogWidth,"destroy-on-close":!0,"custom-class":S.value},null,8,["modelValue","title","width","custom-class"])],2)}}}),[["__scopeId","data-v-7f0655b1"]]);u.CrudTable=X,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})}));
|