z-crud-table 0.0.12 → 0.0.14

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.
@@ -1,6 +1,10 @@
1
1
  import { PropType } from 'vue';
2
2
 
3
3
  declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<{
4
+ /**
5
+ * @description 组件的主题风格
6
+ * @type {'default' | 'large-screen'}
7
+ */
4
8
  theme: {
5
9
  type: PropType<"default" | "large-screen">;
6
10
  default: string;
@@ -25,11 +29,15 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
25
29
  type: StringConstructor;
26
30
  required: true;
27
31
  };
32
+ columns: {
33
+ type: PropType<any[]>;
34
+ default: () => never[];
35
+ };
28
36
  onBeforeQuery: {
29
37
  type: PropType<(params: any) => any>;
30
38
  };
31
39
  onAfterQuery: {
32
- type: PropType<(data: T[]) => any[] | Promise<any[]>>;
40
+ type: PropType<(data: any[]) => any[] | Promise<any[]>>;
33
41
  };
34
42
  onBeforeOpenDialog: {
35
43
  type: PropType<(mode: string, data?: any) => any>;
@@ -70,7 +78,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
70
78
  default: boolean;
71
79
  };
72
80
  actionsColumnWidth: {
73
- type: NumberConstructor;
81
+ type: (StringConstructor | NumberConstructor)[];
74
82
  default: number;
75
83
  };
76
84
  dialogWidth: {
@@ -126,6 +134,10 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
126
134
  delete: (...args: any[]) => void;
127
135
  "open-dialog": (...args: any[]) => void;
128
136
  }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
137
+ /**
138
+ * @description 组件的主题风格
139
+ * @type {'default' | 'large-screen'}
140
+ */
129
141
  theme: {
130
142
  type: PropType<"default" | "large-screen">;
131
143
  default: string;
@@ -150,11 +162,15 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
150
162
  type: StringConstructor;
151
163
  required: true;
152
164
  };
165
+ columns: {
166
+ type: PropType<any[]>;
167
+ default: () => never[];
168
+ };
153
169
  onBeforeQuery: {
154
170
  type: PropType<(params: any) => any>;
155
171
  };
156
172
  onAfterQuery: {
157
- type: PropType<(data: T[]) => any[] | Promise<any[]>>;
173
+ type: PropType<(data: any[]) => any[] | Promise<any[]>>;
158
174
  };
159
175
  onBeforeOpenDialog: {
160
176
  type: PropType<(mode: string, data?: any) => any>;
@@ -195,7 +211,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
195
211
  default: boolean;
196
212
  };
197
213
  actionsColumnWidth: {
198
- type: NumberConstructor;
214
+ type: (StringConstructor | NumberConstructor)[];
199
215
  default: number;
200
216
  };
201
217
  dialogWidth: {
@@ -247,12 +263,13 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
247
263
  "onOpen-dialog"?: ((...args: any[]) => any) | undefined;
248
264
  }>, {
249
265
  theme: "default" | "large-screen";
266
+ columns: any[];
250
267
  showSelectionColumn: boolean;
251
268
  showIndexColumn: boolean;
252
269
  showActionsColumn: boolean;
253
270
  showEditButton: boolean;
254
271
  showDeleteButton: boolean;
255
- actionsColumnWidth: number;
272
+ actionsColumnWidth: string | number;
256
273
  dialogWidth: string;
257
274
  initialSearchForm: Record<string, any>;
258
275
  showPagination: boolean;
@@ -263,7 +280,9 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
263
280
  paginationHideOnSinglePage: boolean;
264
281
  dialogFormConfig: any[];
265
282
  dialogFormRules: Record<string, any>;
266
- }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
283
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, Partial<Record<any, (_: {
284
+ row: any;
285
+ }) => any>> & {
267
286
  header?(_: {}): any;
268
287
  "query-conditions"?(_: {
269
288
  searchForm: {
@@ -278,7 +297,6 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
278
297
  }): any;
279
298
  "add-button-content"?(_: {}): any;
280
299
  "action-right"?(_: {}): any;
281
- default?(_: {}): any;
282
300
  actions?(_: {
283
301
  row: any;
284
302
  }): any;
package/dist/index.d.ts CHANGED
@@ -1,8 +1,3 @@
1
- import { App } from 'vue';
2
1
  import { default as CrudTable } from './components/CrudTable.vue';
3
2
 
4
3
  export { CrudTable };
5
- declare const _default: {
6
- install: (app: App) => void;
7
- };
8
- export default _default;
@@ -0,0 +1 @@
1
+ *,: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}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.flex{display:flex}.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}.space-y-12>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(3rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(3rem * var(--tw-space-y-reverse))}.rounded-xl{border-radius:.75rem}.border-l-4{border-left-width:4px}.border-green-500{--tw-border-opacity: 1;border-color:rgb(34 197 94 / var(--tw-border-opacity, 1))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.p-4{padding:1rem}.p-6{padding:1.5rem}.pl-3{padding-left:.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.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;padding:1rem}@media (min-width: 768px){#app{padding:1.5rem}}.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-input__inner{color:var(--large-screen-text-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}
@@ -1,53 +1,53 @@
1
- import { defineComponent as L, ref as A, resolveComponent as m, createBlock as p, openBlock as n, mergeProps as h, withCtx as s, createElementBlock as k, Fragment as j, renderList as Q, createCommentVNode as g, createTextVNode as _, toDisplayString as ae, computed as N, reactive as I, onMounted as ne, resolveDirective as re, normalizeClass as ie, renderSlot as y, createElementVNode as F, withDirectives as T, createVNode as b } from "vue";
2
- import { ElMessage as z } from "element-plus";
3
- import se from "axios";
4
- const ue = /* @__PURE__ */ L({
1
+ import { defineComponent as W, ref as A, resolveComponent as f, createBlock as p, openBlock as n, mergeProps as v, withCtx as s, createElementBlock as h, Fragment as x, renderList as q, createCommentVNode as g, createTextVNode as _, toDisplayString as ae, computed as P, reactive as L, onMounted as re, resolveDirective as ne, normalizeClass as ie, renderSlot as y, createElementVNode as O, withDirectives as T, createVNode as b, createSlots as se } from "vue";
2
+ import { ElMessage as F } from "element-plus";
3
+ import ue from "axios";
4
+ const de = /* @__PURE__ */ W({
5
5
  __name: "DynamicForm",
6
6
  props: {
7
7
  modelValue: {},
8
8
  formConfig: {},
9
9
  rules: {}
10
10
  },
11
- setup(d, { expose: w }) {
12
- const $ = A(null);
13
- return w({
11
+ setup(m, { expose: C }) {
12
+ const z = A(null);
13
+ return C({
14
14
  validate: () => {
15
- var r;
16
- return (r = $.value) == null ? void 0 : r.validate();
15
+ var i;
16
+ return (i = z.value) == null ? void 0 : i.validate();
17
17
  }
18
- }), (r, t) => {
19
- const B = m("el-input"), P = m("el-option"), v = m("el-select"), u = m("el-radio"), S = m("el-radio-group"), D = m("el-form-item"), U = m("el-form");
20
- return n(), p(U, h({
21
- model: r.modelValue,
22
- rules: r.rules,
18
+ }), (i, t) => {
19
+ const B = f("el-input"), j = f("el-option"), w = f("el-select"), d = f("el-radio"), D = f("el-radio-group"), k = f("el-form-item"), U = f("el-form");
20
+ return n(), p(U, v({
21
+ model: i.modelValue,
22
+ rules: i.rules,
23
23
  ref_key: "formRef",
24
- ref: $
25
- }, r.$attrs), {
24
+ ref: z
25
+ }, i.$attrs), {
26
26
  default: s(() => [
27
- (n(!0), k(j, null, Q(r.formConfig, (a) => (n(), p(D, {
27
+ (n(!0), h(x, null, q(i.formConfig, (a) => (n(), p(k, {
28
28
  key: a.prop,
29
29
  label: a.label,
30
30
  prop: a.prop
31
31
  }, {
32
32
  default: s(() => [
33
- a.type === "input" ? (n(), p(B, h({
33
+ a.type === "input" ? (n(), p(B, v({
34
34
  key: 0,
35
- modelValue: r.modelValue[a.prop],
36
- "onUpdate:modelValue": (o) => r.modelValue[a.prop] = o
35
+ modelValue: i.modelValue[a.prop],
36
+ "onUpdate:modelValue": (o) => i.modelValue[a.prop] = o
37
37
  }, { ref_for: !0 }, a.componentProps), null, 16, ["modelValue", "onUpdate:modelValue"])) : g("", !0),
38
- a.type === "textarea" ? (n(), p(B, h({
38
+ a.type === "textarea" ? (n(), p(B, v({
39
39
  key: 1,
40
40
  type: "textarea",
41
- modelValue: r.modelValue[a.prop],
42
- "onUpdate:modelValue": (o) => r.modelValue[a.prop] = o
41
+ modelValue: i.modelValue[a.prop],
42
+ "onUpdate:modelValue": (o) => i.modelValue[a.prop] = o
43
43
  }, { ref_for: !0 }, a.componentProps), null, 16, ["modelValue", "onUpdate:modelValue"])) : g("", !0),
44
- a.type === "select" ? (n(), p(v, h({
44
+ a.type === "select" ? (n(), p(w, v({
45
45
  key: 2,
46
- modelValue: r.modelValue[a.prop],
47
- "onUpdate:modelValue": (o) => r.modelValue[a.prop] = o
46
+ modelValue: i.modelValue[a.prop],
47
+ "onUpdate:modelValue": (o) => i.modelValue[a.prop] = o
48
48
  }, { ref_for: !0 }, a.componentProps), {
49
49
  default: s(() => [
50
- (n(!0), k(j, null, Q(a.options, (o) => (n(), p(P, {
50
+ (n(!0), h(x, null, q(a.options, (o) => (n(), p(j, {
51
51
  key: o.value,
52
52
  label: o.label,
53
53
  value: o.value
@@ -55,13 +55,13 @@ const ue = /* @__PURE__ */ L({
55
55
  ]),
56
56
  _: 2
57
57
  }, 1040, ["modelValue", "onUpdate:modelValue"])) : g("", !0),
58
- a.type === "radio-group" ? (n(), p(S, h({
58
+ a.type === "radio-group" ? (n(), p(D, v({
59
59
  key: 3,
60
- modelValue: r.modelValue[a.prop],
61
- "onUpdate:modelValue": (o) => r.modelValue[a.prop] = o
60
+ modelValue: i.modelValue[a.prop],
61
+ "onUpdate:modelValue": (o) => i.modelValue[a.prop] = o
62
62
  }, { ref_for: !0 }, a.componentProps), {
63
63
  default: s(() => [
64
- (n(!0), k(j, null, Q(a.options, (o) => (n(), p(u, {
64
+ (n(!0), h(x, null, q(a.options, (o) => (n(), p(d, {
65
65
  key: o.value,
66
66
  label: o.value
67
67
  }, {
@@ -73,9 +73,9 @@ const ue = /* @__PURE__ */ L({
73
73
  ]),
74
74
  _: 2
75
75
  }, 1040, ["modelValue", "onUpdate:modelValue"])) : g("", !0),
76
- a.type === "input-disabled" ? (n(), p(B, h({
76
+ a.type === "input-disabled" ? (n(), p(B, v({
77
77
  key: 4,
78
- "model-value": r.modelValue[a.prop],
78
+ "model-value": i.modelValue[a.prop],
79
79
  disabled: ""
80
80
  }, { ref_for: !0 }, a.componentProps), null, 16, ["model-value"])) : g("", !0)
81
81
  ]),
@@ -86,41 +86,55 @@ const ue = /* @__PURE__ */ L({
86
86
  }, 16, ["model", "rules"]);
87
87
  };
88
88
  }
89
- }), C = se.create({
89
+ }), S = ue.create({
90
90
  // VITE_APP_BASE_API 是在 .env 文件中定义的基础 URL
91
91
  // 您可以根据您的项目需求进行修改
92
92
  baseURL: "",
93
93
  timeout: 1e4
94
94
  // 请求超时时间
95
95
  });
96
- C.interceptors.request.use(
97
- (d) => {
98
- const w = localStorage.getItem("token");
99
- return w && (d.headers.Authorization = "Bearer " + w), d;
96
+ S.interceptors.request.use(
97
+ (m) => {
98
+ const C = localStorage.getItem("token");
99
+ return C && (m.headers.Authorization = "Bearer " + C), m;
100
100
  },
101
- (d) => (console.log(d), Promise.reject(d))
101
+ (m) => (console.log(m), Promise.reject(m))
102
102
  );
103
- C.interceptors.response.use(
104
- (d) => d.data,
105
- (d) => (console.log("err" + d), z({
103
+ S.interceptors.response.use(
104
+ (m) => m.data,
105
+ (m) => (console.log("err" + m), F({
106
106
  message: "接口错误,请刷新接口",
107
107
  // 这里是您要求的统一错误提示
108
108
  type: "error",
109
109
  duration: 5 * 1e3
110
- }), Promise.reject(d))
110
+ }), Promise.reject(m))
111
111
  );
112
- const de = { class: "flex flex-wrap items-center justify-between gap-4 mb-6" }, pe = { class: "flex items-center gap-x-2" }, fe = { class: "flex items-center gap-x-3 action-buttons flex-shrink-0" }, me = { class: "flex items-center gap-x-2" }, ge = {
112
+ const pe = { class: "flex flex-wrap items-center justify-between gap-4 mb-6" }, fe = { class: "flex items-center gap-x-2" }, me = { class: "flex items-center gap-x-3 action-buttons flex-shrink-0" }, ge = {
113
113
  key: 0,
114
- class: "flex justify-end mt-[10px]"
115
- }, ce = { class: "dialog-footer" }, ye = /* @__PURE__ */ L({
114
+ class: "flex items-center gap-x-2"
115
+ }, ce = {
116
+ key: 0,
117
+ class: "flex justify-end"
118
+ }, ye = { class: "dialog-footer" }, he = /* @__PURE__ */ W({
116
119
  __name: "CrudTable",
117
120
  props: {
121
+ /**
122
+ * @description 组件的主题风格
123
+ * @type {'default' | 'large-screen'}
124
+ */
118
125
  theme: { type: String, default: "default" },
126
+ // API 相关配置
119
127
  apiUrlQuery: { type: String, required: !0 },
120
128
  apiUrlDetail: { type: String, required: !0 },
121
129
  apiUrlCreate: { type: String, required: !0 },
122
130
  apiUrlUpdate: { type: String, required: !0 },
123
131
  apiUrlDelete: { type: String, required: !0 },
132
+ // 表格列定义,通过配置数组动态渲染,比 slot 更灵活。
133
+ columns: {
134
+ type: Array,
135
+ default: () => []
136
+ },
137
+ // 生命周期钩子函数,允许在特定操作前后注入自定义逻辑。
124
138
  onBeforeQuery: { type: Function },
125
139
  onAfterQuery: { type: Function },
126
140
  onBeforeOpenDialog: { type: Function },
@@ -129,140 +143,149 @@ const de = { class: "flex flex-wrap items-center justify-between gap-4 mb-6" },
129
143
  onAfterSubmit: { type: Function },
130
144
  onBeforeDelete: { type: Function },
131
145
  onAfterDelete: { type: Function },
146
+ // 功能开关,控制UI元素的显示/隐藏。
132
147
  showSelectionColumn: { type: Boolean, default: !0 },
133
148
  showIndexColumn: { type: Boolean, default: !0 },
134
149
  showActionsColumn: { type: Boolean, default: !0 },
135
150
  showEditButton: { type: Boolean, default: !0 },
136
151
  showDeleteButton: { type: Boolean, default: !0 },
137
- actionsColumnWidth: { type: Number, default: 120 },
152
+ // UI 定制化配置
153
+ actionsColumnWidth: { type: [String, Number], default: 120 },
138
154
  dialogWidth: { type: String, default: "50%" },
139
155
  initialSearchForm: { type: Object, default: () => ({ pageNum: 1, pageSize: 10 }) },
156
+ // 分页相关配置
140
157
  showPagination: { type: Boolean, default: !0 },
141
158
  pageSizes: { type: Array, default: () => [10, 20, 50, 100] },
142
159
  paginationLayout: { type: String, default: "total, sizes, prev, pager, next, jumper" },
143
160
  paginationBackground: { type: Boolean, default: !0 },
144
161
  paginationSmall: { type: Boolean, default: !1 },
145
162
  paginationHideOnSinglePage: { type: Boolean, default: !1 },
163
+ // 弹窗表单配置
146
164
  dialogFormConfig: { type: Array, default: () => [] },
147
165
  dialogFormRules: { type: Object, default: () => ({}) }
148
166
  },
149
167
  emits: ["open-dialog", "submit", "delete"],
150
- setup(d, { expose: w, emit: $ }) {
151
- const r = $, t = d, B = N(() => ["crud-table-wrapper", `theme-${t.theme}`]), P = N(() => t.theme === "large-screen" ? "large-screen-dialog" : ""), v = (e, l) => e ? !0 : (z.error(`${l} prop is required.`), !1), u = I({ pageNum: 1, pageSize: 10, ...t.initialSearchForm }), S = A([]), D = A(0), U = A(!1), a = A([]), o = I({ visible: !1, loading: !1, submitting: !1, mode: "add", data: {}, formRef: null }), W = N(() => o.mode === "add" ? "新增" : "编辑"), H = N(() => {
168
+ setup(m, { expose: C, emit: z }) {
169
+ const i = z, t = m, B = P(() => ["crud-table-wrapper", `theme-${t.theme}`]), j = P(() => t.theme === "large-screen" ? "large-screen-dialog" : ""), w = (e, l) => e ? !0 : (F.error(`${l} prop is required.`), !1), d = L({ pageNum: 1, pageSize: 10, ...t.initialSearchForm }), D = A([]), k = A(0), U = A(!1), a = A([]), o = L({ visible: !1, loading: !1, submitting: !1, mode: "add", data: {}, formRef: null }), H = P(() => o.mode === "add" ? "新增" : "编辑"), M = P(() => {
152
170
  if (o.mode === "add") return t.dialogFormConfig.filter((l) => l.prop !== "id");
153
171
  const e = [...t.dialogFormConfig.filter((l) => l.prop !== "id")];
154
- return e.some((l) => l.prop === "id") || e.push({ type: "input-disabled", prop: "id", label: "用户ID" }), e;
172
+ return e.some((l) => l.prop === "id") || e.unshift({ type: "input-disabled", prop: "id", label: "用户ID" }), e;
155
173
  }), V = async () => {
156
- if (v(t.apiUrlQuery, "apiUrlQuery")) {
174
+ if (w(t.apiUrlQuery, "apiUrlQuery")) {
157
175
  U.value = !0;
158
176
  try {
159
- let e = { ...u };
177
+ let e = { ...d };
160
178
  t.onBeforeQuery && (e = await t.onBeforeQuery(e));
161
- const l = await C.get(t.apiUrlQuery, { params: e });
179
+ const l = await S.get(t.apiUrlQuery, { params: e });
162
180
  if (l && Array.isArray(l.data) && typeof l.total == "number") {
163
- let i = l.data;
164
- t.onAfterQuery && (i = await t.onAfterQuery(i)), S.value = i, D.value = l.total;
181
+ let u = l.data;
182
+ t.onAfterQuery && (u = await t.onAfterQuery(u)), D.value = u, k.value = l.total;
165
183
  } else
166
- console.warn("API response is not in the expected { data: [], total: 0 } format."), S.value = [], D.value = 0;
184
+ console.warn("API response is not in the expected { data: [], total: 0 } format."), D.value = [], k.value = 0;
167
185
  } catch (e) {
168
186
  console.error("Fetch data failed:", e);
169
187
  } finally {
170
188
  U.value = !1;
171
189
  }
172
190
  }
173
- }, x = () => {
174
- u.pageNum = 1, V();
175
- }, M = () => {
176
- const { pageNum: e, pageSize: l, ...i } = t.initialSearchForm;
177
- Object.keys(u).forEach((c) => {
178
- c !== "pageNum" && c !== "pageSize" && delete u[c];
179
- }), Object.assign(u, i), x();
180
- }, G = (e) => {
191
+ }, $ = () => {
192
+ d.pageNum = 1, V();
193
+ }, G = () => {
194
+ const { pageNum: e, pageSize: l, ...u } = t.initialSearchForm;
195
+ Object.keys(d).forEach((c) => {
196
+ c !== "pageNum" && c !== "pageSize" && delete d[c];
197
+ }), Object.assign(d, u), $();
198
+ }, J = (e) => {
181
199
  a.value = e;
182
- }, O = async (e, l) => {
183
- let i = e === "add" ? { role: "user" } : { ...l };
200
+ }, Q = async (e, l) => {
201
+ let u = e === "add" ? { role: "user" } : { ...l };
184
202
  if (t.onBeforeOpenDialog) {
185
- const c = await t.onBeforeOpenDialog(e, i);
186
- c && (i = c);
203
+ const c = await t.onBeforeOpenDialog(e, u);
204
+ c && (u = c);
187
205
  }
188
206
  if (o.mode = e, o.visible = !0, e === "edit") {
189
- if (!v(t.apiUrlDetail, "apiUrlDetail")) return;
207
+ if (!w(t.apiUrlDetail, "apiUrlDetail")) return;
190
208
  o.loading = !0;
191
209
  try {
192
- const c = await C.get(t.apiUrlDetail, { params: { id: i.id } });
210
+ const c = await S.get(t.apiUrlDetail + "/" + u.id);
193
211
  o.data = c.data;
194
212
  } finally {
195
- o.loading = !1, t.onAfterOpenDialog && t.onAfterOpenDialog(e, o.data), r("open-dialog", { mode: e, data: o.data });
213
+ o.loading = !1, t.onAfterOpenDialog && t.onAfterOpenDialog(e, o.data), i("open-dialog", { mode: e, data: o.data });
196
214
  }
197
215
  } else
198
- o.data = i, t.onAfterOpenDialog && t.onAfterOpenDialog(e, o.data), r("open-dialog", { mode: e, data: o.data });
199
- }, J = async () => {
216
+ o.data = u, t.onAfterOpenDialog && t.onAfterOpenDialog(e, o.data), i("open-dialog", { mode: e, data: o.data });
217
+ }, K = async () => {
200
218
  try {
201
219
  o.formRef && await o.formRef.validate();
202
220
  let e = { ...o.data };
203
221
  if (t.onBeforeSubmit && (e = await t.onBeforeSubmit(e)), o.submitting = !0, o.mode === "add") {
204
- if (!v(t.apiUrlCreate, "apiUrlCreate")) return;
205
- await C.post(t.apiUrlCreate, e), z.success("新增成功");
222
+ if (!w(t.apiUrlCreate, "apiUrlCreate")) return;
223
+ await S.post(t.apiUrlCreate, e), F.success("新增成功");
206
224
  } else {
207
- if (!v(t.apiUrlUpdate, "apiUrlUpdate")) return;
208
- await C.put(t.apiUrlUpdate, e), z.success("更新成功");
225
+ if (!w(t.apiUrlUpdate, "apiUrlUpdate")) return;
226
+ await S.put(t.apiUrlUpdate, e), F.success("更新成功");
209
227
  }
210
- t.onAfterSubmit && t.onAfterSubmit(o.mode, e), r("submit", { mode: o.mode, data: e }), o.visible = !1, V();
228
+ t.onAfterSubmit && t.onAfterSubmit(o.mode, e), i("submit", { mode: o.mode, data: e }), o.visible = !1, V();
211
229
  } catch (e) {
212
230
  console.log("Submit error or validation failed:", e);
213
231
  } finally {
214
232
  o.submitting = !1;
215
233
  }
216
- }, R = async (e) => {
217
- if (v(t.apiUrlDelete, "apiUrlDelete"))
234
+ }, E = async (e) => {
235
+ if (w(t.apiUrlDelete, "apiUrlDelete"))
218
236
  try {
219
237
  if (t.onBeforeDelete && await t.onBeforeDelete(e) === !1)
220
238
  return;
221
239
  const l = e.join(",");
222
- await C.delete(t.apiUrlDelete, { params: { ids: l } }), z.success("删除成功"), t.onAfterDelete && t.onAfterDelete(e), r("delete", e), S.value.length === e.length && u.pageNum > 1 && u.pageNum--, V();
240
+ await S.delete(t.apiUrlDelete + "/" + l.toString()), F.success("删除成功"), t.onAfterDelete && t.onAfterDelete(e), i("delete", e), D.value.length === e.length && d.pageNum > 1 && d.pageNum--, V();
223
241
  } catch (l) {
224
242
  console.error("Delete failed", l);
225
243
  }
226
- }, K = (e) => {
227
- u.pageSize = e, x();
228
244
  }, X = (e) => {
229
- u.pageNum = e, V();
245
+ d.pageSize = e, $();
246
+ }, Y = (e) => {
247
+ d.pageNum = e, V();
230
248
  };
231
- return ne(V), w({
249
+ return re(V), C({
232
250
  refresh: V,
233
- search: x,
234
- handleDelete: R,
235
- openDialog: O
251
+ // 刷新表格
252
+ search: $,
253
+ // 按当前条件搜索
254
+ handleDelete: E,
255
+ // 手动触发删除
256
+ openDialog: Q
257
+ // 手动打开弹窗
236
258
  }), (e, l) => {
237
- const i = m("el-button"), c = m("el-form-item"), Y = m("el-form"), q = m("el-table-column"), Z = m("el-popconfirm"), ee = m("el-table"), te = m("el-pagination"), oe = m("el-dialog"), E = re("loading");
238
- return n(), k("div", {
259
+ const u = f("el-button"), c = f("el-form-item"), Z = f("el-form"), N = f("el-table-column"), ee = f("el-popconfirm"), te = f("el-table"), oe = f("el-pagination"), le = f("el-dialog"), I = ne("loading");
260
+ return n(), h("div", {
239
261
  class: ie(B.value)
240
262
  }, [
241
263
  y(e.$slots, "header"),
242
- F("div", de, [
243
- b(Y, {
244
- model: u,
264
+ O("div", pe, [
265
+ b(Z, {
266
+ model: d,
245
267
  class: "query-form flex flex-nowrap items-center gap-x-4",
246
268
  style: { "overflow-x": "auto", "padding-bottom": "8px" }
247
269
  }, {
248
270
  default: s(() => [
249
- y(e.$slots, "query-conditions", { searchForm: u }),
271
+ y(e.$slots, "query-conditions", { searchForm: d }),
250
272
  b(c, { class: "!mr-0 flex-shrink-0" }, {
251
273
  default: s(() => [
252
- F("div", pe, [
274
+ O("div", fe, [
253
275
  y(e.$slots, "query-left"),
254
- b(i, {
276
+ b(u, {
277
+ style: { "margin-left": "16px" },
255
278
  type: "primary",
256
- onClick: x,
279
+ onClick: $,
257
280
  loading: U.value
258
281
  }, {
259
282
  default: s(() => l[6] || (l[6] = [
260
- _("搜索")
283
+ _("搜索 ")
261
284
  ])),
262
285
  _: 1,
263
286
  __: [6]
264
287
  }, 8, ["loading"]),
265
- b(i, { onClick: M }, {
288
+ b(u, { onClick: G }, {
266
289
  default: s(() => l[7] || (l[7] = [
267
290
  _("清空")
268
291
  ])),
@@ -277,12 +300,12 @@ const de = { class: "flex flex-wrap items-center justify-between gap-4 mb-6" },
277
300
  ]),
278
301
  _: 3
279
302
  }, 8, ["model"]),
280
- F("div", fe, [
303
+ O("div", me, [
281
304
  y(e.$slots, "action-left", { selections: a.value }),
282
305
  y(e.$slots, "add-button-content", {}, () => [
283
- b(i, {
306
+ b(u, {
284
307
  type: "success",
285
- onClick: l[0] || (l[0] = (f) => O("add"))
308
+ onClick: l[0] || (l[0] = (r) => Q("add"))
286
309
  }, {
287
310
  default: s(() => l[8] || (l[8] = [
288
311
  _("新增")
@@ -294,59 +317,74 @@ const de = { class: "flex flex-wrap items-center justify-between gap-4 mb-6" },
294
317
  y(e.$slots, "action-right")
295
318
  ])
296
319
  ]),
297
- T((n(), p(ee, h({
298
- data: S.value,
299
- onSelectionChange: G
300
- }, e.$attrs, { style: { width: "100%" } }), {
320
+ T((n(), p(te, v({
321
+ data: D.value,
322
+ onSelectionChange: J
323
+ }, e.$attrs, { style: { width: "100%", "margin-bottom": "1.5rem" } }), {
301
324
  default: s(() => [
302
- t.showSelectionColumn ? (n(), p(q, {
325
+ t.showSelectionColumn ? (n(), p(N, {
303
326
  key: 0,
304
327
  type: "selection",
305
328
  width: "55",
306
329
  fixed: ""
307
330
  })) : g("", !0),
308
- t.showIndexColumn ? (n(), p(q, {
331
+ t.showIndexColumn ? (n(), p(N, {
309
332
  key: 1,
310
333
  type: "index",
311
334
  label: "序号",
312
335
  width: "70",
313
336
  fixed: ""
314
337
  })) : g("", !0),
315
- y(e.$slots, "default"),
316
- t.showActionsColumn ? (n(), p(q, {
338
+ (n(!0), h(x, null, q(t.columns, (r) => (n(), p(N, v({
339
+ key: r.prop,
340
+ prop: r.prop,
341
+ label: r.label,
342
+ width: r.width,
343
+ sortable: r.sortable || !1
344
+ }, { ref_for: !0 }, r.attrs), se({ _: 2 }, [
345
+ r.slot ? {
346
+ name: "default",
347
+ fn: s((R) => [
348
+ y(e.$slots, r.slot, {
349
+ row: R.row
350
+ })
351
+ ]),
352
+ key: "0"
353
+ } : void 0
354
+ ]), 1040, ["prop", "label", "width", "sortable"]))), 128)),
355
+ t.showActionsColumn ? (n(), p(N, {
317
356
  key: 2,
318
357
  label: "操作",
319
- width: d.actionsColumnWidth,
320
- fixed: "right"
358
+ width: m.actionsColumnWidth
321
359
  }, {
322
- default: s((f) => [
323
- F("div", me, [
360
+ default: s((r) => [
361
+ r.row ? (n(), h("div", ge, [
324
362
  y(e.$slots, "actions", {
325
- row: f.row
363
+ row: r.row
326
364
  }, () => [
327
- t.showEditButton ? (n(), p(i, {
365
+ t.showEditButton ? (n(), p(u, {
328
366
  key: 0,
329
367
  size: "small",
330
368
  type: "primary",
331
369
  link: "",
332
- onClick: (le) => O("edit", f.row)
370
+ onClick: (R) => Q("edit", r.row)
333
371
  }, {
334
372
  default: s(() => l[9] || (l[9] = [
335
- _("编辑")
373
+ _("编辑 ")
336
374
  ])),
337
375
  _: 2,
338
376
  __: [9]
339
377
  }, 1032, ["onClick"])) : g("", !0),
340
- t.showDeleteButton ? (n(), p(Z, {
378
+ t.showDeleteButton ? (n(), p(ee, {
341
379
  key: 1,
342
380
  title: "确定要删除这条数据吗?",
343
- onConfirm: (le) => R([f.row.id]),
381
+ onConfirm: (R) => E([r.row.id]),
344
382
  "confirm-button-text": "确定",
345
383
  "cancel-button-text": "取消",
346
384
  width: "200"
347
385
  }, {
348
386
  reference: s(() => [
349
- b(i, {
387
+ b(u, {
350
388
  size: "small",
351
389
  type: "danger",
352
390
  link: ""
@@ -361,43 +399,43 @@ const de = { class: "flex flex-wrap items-center justify-between gap-4 mb-6" },
361
399
  _: 2
362
400
  }, 1032, ["onConfirm"])) : g("", !0)
363
401
  ])
364
- ])
402
+ ])) : g("", !0)
365
403
  ]),
366
404
  _: 3
367
405
  }, 8, ["width"])) : g("", !0)
368
406
  ]),
369
407
  _: 3
370
408
  }, 16, ["data"])), [
371
- [E, U.value]
409
+ [I, U.value]
372
410
  ]),
373
- t.showPagination && D.value > 0 ? (n(), k("div", ge, [
374
- b(te, {
375
- "current-page": u.pageNum,
376
- "onUpdate:currentPage": l[1] || (l[1] = (f) => u.pageNum = f),
377
- "page-size": u.pageSize,
378
- "onUpdate:pageSize": l[2] || (l[2] = (f) => u.pageSize = f),
411
+ t.showPagination && k.value > 0 ? (n(), h("div", ce, [
412
+ b(oe, {
413
+ "current-page": d.pageNum,
414
+ "onUpdate:currentPage": l[1] || (l[1] = (r) => d.pageNum = r),
415
+ "page-size": d.pageSize,
416
+ "onUpdate:pageSize": l[2] || (l[2] = (r) => d.pageSize = r),
379
417
  "page-sizes": t.pageSizes,
380
418
  layout: t.paginationLayout,
381
- total: D.value,
419
+ total: k.value,
382
420
  background: t.paginationBackground,
383
421
  small: t.paginationSmall,
384
422
  "hide-on-single-page": t.paginationHideOnSinglePage,
385
- onSizeChange: K,
386
- onCurrentChange: X
423
+ onSizeChange: X,
424
+ onCurrentChange: Y
387
425
  }, null, 8, ["current-page", "page-size", "page-sizes", "layout", "total", "background", "small", "hide-on-single-page"])
388
426
  ])) : g("", !0),
389
- b(oe, {
427
+ b(le, {
390
428
  modelValue: o.visible,
391
- "onUpdate:modelValue": l[5] || (l[5] = (f) => o.visible = f),
392
- title: W.value,
429
+ "onUpdate:modelValue": l[5] || (l[5] = (r) => o.visible = r),
430
+ title: H.value,
393
431
  width: t.dialogWidth,
394
432
  "destroy-on-close": !0,
395
- "custom-class": P.value
433
+ "custom-class": j.value
396
434
  }, {
397
435
  footer: s(() => [
398
- F("div", ce, [
399
- b(i, {
400
- onClick: l[4] || (l[4] = (f) => o.visible = !1)
436
+ O("div", ye, [
437
+ b(u, {
438
+ onClick: l[4] || (l[4] = (r) => o.visible = !1)
401
439
  }, {
402
440
  default: s(() => l[11] || (l[11] = [
403
441
  _("取消")
@@ -405,9 +443,9 @@ const de = { class: "flex flex-wrap items-center justify-between gap-4 mb-6" },
405
443
  _: 1,
406
444
  __: [11]
407
445
  }),
408
- b(i, {
446
+ b(u, {
409
447
  type: "primary",
410
- onClick: J,
448
+ onClick: K,
411
449
  loading: o.submitting
412
450
  }, {
413
451
  default: s(() => l[12] || (l[12] = [
@@ -419,23 +457,23 @@ const de = { class: "flex flex-wrap items-center justify-between gap-4 mb-6" },
419
457
  ])
420
458
  ]),
421
459
  default: s(() => [
422
- T((n(), k("div", null, [
460
+ T((n(), h("div", null, [
423
461
  y(e.$slots, "dialog-form-content", {
424
462
  formData: o.data,
425
463
  mode: o.mode
426
464
  }, () => [
427
- t.dialogFormConfig.length > 0 ? (n(), p(ue, {
465
+ t.dialogFormConfig.length > 0 ? (n(), p(de, {
428
466
  key: 0,
429
- "form-config": H.value,
467
+ "form-config": M.value,
430
468
  modelValue: o.data,
431
- "onUpdate:modelValue": l[3] || (l[3] = (f) => o.data = f),
432
- ref: (f) => o.formRef = f,
469
+ "onUpdate:modelValue": l[3] || (l[3] = (r) => o.data = r),
470
+ ref: (r) => o.formRef = r,
433
471
  rules: t.dialogFormRules,
434
472
  "label-width": "80px"
435
473
  }, null, 8, ["form-config", "modelValue", "rules"])) : g("", !0)
436
474
  ])
437
475
  ])), [
438
- [E, o.loading]
476
+ [I, o.loading]
439
477
  ])
440
478
  ]),
441
479
  _: 3
@@ -443,12 +481,7 @@ const de = { class: "flex flex-wrap items-center justify-between gap-4 mb-6" },
443
481
  ], 2);
444
482
  };
445
483
  }
446
- }), he = {
447
- install: (d) => {
448
- d.component("CrudTable", ye);
449
- }
450
- };
484
+ });
451
485
  export {
452
- ye as CrudTable,
453
- he as default
486
+ he as CrudTable
454
487
  };
@@ -1,2 +1 @@
1
- (function(p,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):(p=typeof globalThis<"u"?globalThis:p||self,e(p.ZCrudTable={},p.Vue,p.ElementPlus,p.axios))})(this,function(p,e,x,F){"use strict";var z=document.createElement("style");z.textContent=`*,: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}.fixed{position:fixed}.mx-auto{margin-left:auto;margin-right:auto}.\\!mr-0{margin-right:0!important}.mb-10{margin-bottom:2.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mt-3{margin-top:.75rem}.mt-\\[10px\\]{margin-top:10px}.flex{display:flex}.max-w-7xl{max-width:80rem}.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}.space-y-12>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(3rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(3rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.rounded-xl{border-radius:.75rem}.border-l-4{border-left-width:4px}.border-blue-500{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.border-teal-500{--tw-border-opacity: 1;border-color:rgb(20 184 166 / var(--tw-border-opacity, 1))}.bg-black{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.p-4{padding:1rem}.pl-3{padding-left:.75rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-slate-600{--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity, 1))}.text-slate-800{--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity, 1))}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-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;padding:1rem}@media (min-width: 768px){#app{padding:1.5rem}}.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-input__inner{color:var(--large-screen-text-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{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}@media (min-width: 640px){.sm\\:p-6{padding:1.5rem}.sm\\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width: 1024px){.lg\\:p-8{padding:2rem}}
2
- /*$vite$:1*/`,document.head.appendChild(z);const A=e.defineComponent({__name:"DynamicForm",props:{modelValue:{},formConfig:{},rules:{}},setup(d,{expose:b}){const _=e.ref(null);return b({validate:()=>{var l;return(l=_.value)==null?void 0:l.validate()}}),(l,o)=>{const k=e.resolveComponent("el-input"),B=e.resolveComponent("el-option"),f=e.resolveComponent("el-select"),s=e.resolveComponent("el-radio"),u=e.resolveComponent("el-radio-group"),w=e.resolveComponent("el-form-item"),h=e.resolveComponent("el-form");return e.openBlock(),e.createBlock(h,e.mergeProps({model:l.modelValue,rules:l.rules,ref_key:"formRef",ref:_},l.$attrs),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.formConfig,n=>(e.openBlock(),e.createBlock(w,{key:n.prop,label:n.label,prop:n.prop},{default:e.withCtx(()=>[n.type==="input"?(e.openBlock(),e.createBlock(k,e.mergeProps({key:0,modelValue:l.modelValue[n.prop],"onUpdate:modelValue":r=>l.modelValue[n.prop]=r},{ref_for:!0},n.componentProps),null,16,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),n.type==="textarea"?(e.openBlock(),e.createBlock(k,e.mergeProps({key:1,type:"textarea",modelValue:l.modelValue[n.prop],"onUpdate:modelValue":r=>l.modelValue[n.prop]=r},{ref_for:!0},n.componentProps),null,16,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),n.type==="select"?(e.openBlock(),e.createBlock(f,e.mergeProps({key:2,modelValue:l.modelValue[n.prop],"onUpdate:modelValue":r=>l.modelValue[n.prop]=r},{ref_for:!0},n.componentProps),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.options,r=>(e.openBlock(),e.createBlock(B,{key:r.value,label:r.label,value:r.value},null,8,["label","value"]))),128))]),_:2},1040,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),n.type==="radio-group"?(e.openBlock(),e.createBlock(u,e.mergeProps({key:3,modelValue:l.modelValue[n.prop],"onUpdate:modelValue":r=>l.modelValue[n.prop]=r},{ref_for:!0},n.componentProps),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.options,r=>(e.openBlock(),e.createBlock(s,{key:r.value,label:r.value},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.label),1)]),_:2},1032,["label"]))),128))]),_:2},1040,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),n.type==="input-disabled"?(e.openBlock(),e.createBlock(k,e.mergeProps({key:4,"model-value":l.modelValue[n.prop],disabled:""},{ref_for:!0},n.componentProps),null,16,["model-value"])):e.createCommentVNode("",!0)]),_:2},1032,["label","prop"]))),128))]),_:1},16,["model","rules"])}}}),m=F.create({baseURL:"",timeout:1e4});m.interceptors.request.use(d=>{const b=localStorage.getItem("token");return b&&(d.headers.Authorization="Bearer "+b),d},d=>(console.log(d),Promise.reject(d))),m.interceptors.response.use(d=>d.data,d=>(console.log("err"+d),x.ElMessage({message:"接口错误,请刷新接口",type:"error",duration:5*1e3}),Promise.reject(d)));const E={class:"flex flex-wrap items-center justify-between gap-4 mb-6"},j={class:"flex items-center gap-x-2"},$={class:"flex items-center gap-x-3 action-buttons flex-shrink-0"},P={class:"flex items-center gap-x-2"},q={key:0,class:"flex justify-end mt-[10px]"},T={class:"dialog-footer"},N=e.defineComponent({__name:"CrudTable",props:{theme:{type:String,default:"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},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: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:()=>({})}},emits:["open-dialog","submit","delete"],setup(d,{expose:b,emit:_}){const l=_,o=d,k=e.computed(()=>["crud-table-wrapper",`theme-${o.theme}`]),B=e.computed(()=>o.theme==="large-screen"?"large-screen-dialog":""),f=(t,a)=>t?!0:(x.ElMessage.error(`${a} prop is required.`),!1),s=e.reactive({pageNum:1,pageSize:10,...o.initialSearchForm}),u=e.ref([]),w=e.ref(0),h=e.ref(!1),n=e.ref([]),r=e.reactive({visible:!1,loading:!1,submitting:!1,mode:"add",data:{},formRef:null}),M=e.computed(()=>r.mode==="add"?"新增":"编辑"),R=e.computed(()=>{if(r.mode==="add")return o.dialogFormConfig.filter(a=>a.prop!=="id");const t=[...o.dialogFormConfig.filter(a=>a.prop!=="id")];return t.some(a=>a.prop==="id")||t.push({type:"input-disabled",prop:"id",label:"用户ID"}),t}),y=async()=>{if(f(o.apiUrlQuery,"apiUrlQuery")){h.value=!0;try{let t={...s};o.onBeforeQuery&&(t=await o.onBeforeQuery(t));const a=await m.get(o.apiUrlQuery,{params:t});if(a&&Array.isArray(a.data)&&typeof a.total=="number"){let i=a.data;o.onAfterQuery&&(i=await o.onAfterQuery(i)),u.value=i,w.value=a.total}else console.warn("API response is not in the expected { data: [], total: 0 } format."),u.value=[],w.value=0}catch(t){console.error("Fetch data failed:",t)}finally{h.value=!1}}},C=()=>{s.pageNum=1,y()},v=()=>{const{pageNum:t,pageSize:a,...i}=o.initialSearchForm;Object.keys(s).forEach(g=>{g!=="pageNum"&&g!=="pageSize"&&delete s[g]}),Object.assign(s,i),C()},Q=t=>{n.value=t},V=async(t,a)=>{let i=t==="add"?{role:"user"}:{...a};if(o.onBeforeOpenDialog){const g=await o.onBeforeOpenDialog(t,i);g&&(i=g)}if(r.mode=t,r.visible=!0,t==="edit"){if(!f(o.apiUrlDetail,"apiUrlDetail"))return;r.loading=!0;try{const g=await m.get(o.apiUrlDetail,{params:{id:i.id}});r.data=g.data}finally{r.loading=!1,o.onAfterOpenDialog&&o.onAfterOpenDialog(t,r.data),l("open-dialog",{mode:t,data:r.data})}}else r.data=i,o.onAfterOpenDialog&&o.onAfterOpenDialog(t,r.data),l("open-dialog",{mode:t,data:r.data})},I=async()=>{try{r.formRef&&await r.formRef.validate();let t={...r.data};if(o.onBeforeSubmit&&(t=await o.onBeforeSubmit(t)),r.submitting=!0,r.mode==="add"){if(!f(o.apiUrlCreate,"apiUrlCreate"))return;await m.post(o.apiUrlCreate,t),x.ElMessage.success("新增成功")}else{if(!f(o.apiUrlUpdate,"apiUrlUpdate"))return;await m.put(o.apiUrlUpdate,t),x.ElMessage.success("更新成功")}o.onAfterSubmit&&o.onAfterSubmit(r.mode,t),l("submit",{mode:r.mode,data:t}),r.visible=!1,y()}catch(t){console.log("Submit error or validation failed:",t)}finally{r.submitting=!1}},D=async t=>{if(f(o.apiUrlDelete,"apiUrlDelete"))try{if(o.onBeforeDelete&&await o.onBeforeDelete(t)===!1)return;const a=t.join(",");await m.delete(o.apiUrlDelete,{params:{ids:a}}),x.ElMessage.success("删除成功"),o.onAfterDelete&&o.onAfterDelete(t),l("delete",t),u.value.length===t.length&&s.pageNum>1&&s.pageNum--,y()}catch(a){console.error("Delete failed",a)}},L=t=>{s.pageSize=t,C()},W=t=>{s.pageNum=t,y()};return e.onMounted(y),b({refresh:y,search:C,handleDelete:D,openDialog:V}),(t,a)=>{const i=e.resolveComponent("el-button"),g=e.resolveComponent("el-form-item"),H=e.resolveComponent("el-form"),S=e.resolveComponent("el-table-column"),Z=e.resolveComponent("el-popconfirm"),G=e.resolveComponent("el-table"),J=e.resolveComponent("el-pagination"),K=e.resolveComponent("el-dialog"),U=e.resolveDirective("loading");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(k.value)},[e.renderSlot(t.$slots,"header"),e.createElementVNode("div",E,[e.createVNode(H,{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(t.$slots,"query-conditions",{searchForm:s}),e.createVNode(g,{class:"!mr-0 flex-shrink-0"},{default:e.withCtx(()=>[e.createElementVNode("div",j,[e.renderSlot(t.$slots,"query-left"),e.createVNode(i,{type:"primary",onClick:C,loading:h.value},{default:e.withCtx(()=>a[6]||(a[6]=[e.createTextVNode("搜索")])),_:1,__:[6]},8,["loading"]),e.createVNode(i,{onClick:v},{default:e.withCtx(()=>a[7]||(a[7]=[e.createTextVNode("清空")])),_:1,__:[7]}),e.renderSlot(t.$slots,"query-right")])]),_:3})]),_:3},8,["model"]),e.createElementVNode("div",$,[e.renderSlot(t.$slots,"action-left",{selections:n.value}),e.renderSlot(t.$slots,"add-button-content",{},()=>[e.createVNode(i,{type:"success",onClick:a[0]||(a[0]=c=>V("add"))},{default:e.withCtx(()=>a[8]||(a[8]=[e.createTextVNode("新增")])),_:1,__:[8]})]),e.renderSlot(t.$slots,"action-right")])]),e.withDirectives((e.openBlock(),e.createBlock(G,e.mergeProps({data:u.value,onSelectionChange:Q},t.$attrs,{style:{width:"100%"}}),{default:e.withCtx(()=>[o.showSelectionColumn?(e.openBlock(),e.createBlock(S,{key:0,type:"selection",width:"55",fixed:""})):e.createCommentVNode("",!0),o.showIndexColumn?(e.openBlock(),e.createBlock(S,{key:1,type:"index",label:"序号",width:"70",fixed:""})):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"default"),o.showActionsColumn?(e.openBlock(),e.createBlock(S,{key:2,label:"操作",width:d.actionsColumnWidth,fixed:"right"},{default:e.withCtx(c=>[e.createElementVNode("div",P,[e.renderSlot(t.$slots,"actions",{row:c.row},()=>[o.showEditButton?(e.openBlock(),e.createBlock(i,{key:0,size:"small",type:"primary",link:"",onClick:X=>V("edit",c.row)},{default:e.withCtx(()=>a[9]||(a[9]=[e.createTextVNode("编辑")])),_:2,__:[9]},1032,["onClick"])):e.createCommentVNode("",!0),o.showDeleteButton?(e.openBlock(),e.createBlock(Z,{key:1,title:"确定要删除这条数据吗?",onConfirm:X=>D([c.row.id]),"confirm-button-text":"确定","cancel-button-text":"取消",width:"200"},{reference:e.withCtx(()=>[e.createVNode(i,{size:"small",type:"danger",link:""},{default:e.withCtx(()=>a[10]||(a[10]=[e.createTextVNode("删除")])),_:1,__:[10]})]),_:2},1032,["onConfirm"])):e.createCommentVNode("",!0)])])]),_:3},8,["width"])):e.createCommentVNode("",!0)]),_:3},16,["data"])),[[U,h.value]]),o.showPagination&&w.value>0?(e.openBlock(),e.createElementBlock("div",q,[e.createVNode(J,{"current-page":s.pageNum,"onUpdate:currentPage":a[1]||(a[1]=c=>s.pageNum=c),"page-size":s.pageSize,"onUpdate:pageSize":a[2]||(a[2]=c=>s.pageSize=c),"page-sizes":o.pageSizes,layout:o.paginationLayout,total:w.value,background:o.paginationBackground,small:o.paginationSmall,"hide-on-single-page":o.paginationHideOnSinglePage,onSizeChange:L,onCurrentChange:W},null,8,["current-page","page-size","page-sizes","layout","total","background","small","hide-on-single-page"])])):e.createCommentVNode("",!0),e.createVNode(K,{modelValue:r.visible,"onUpdate:modelValue":a[5]||(a[5]=c=>r.visible=c),title:M.value,width:o.dialogWidth,"destroy-on-close":!0,"custom-class":B.value},{footer:e.withCtx(()=>[e.createElementVNode("div",T,[e.createVNode(i,{onClick:a[4]||(a[4]=c=>r.visible=!1)},{default:e.withCtx(()=>a[11]||(a[11]=[e.createTextVNode("取消")])),_:1,__:[11]}),e.createVNode(i,{type:"primary",onClick:I,loading:r.submitting},{default:e.withCtx(()=>a[12]||(a[12]=[e.createTextVNode("确定")])),_:1,__:[12]},8,["loading"])])]),default:e.withCtx(()=>[e.withDirectives((e.openBlock(),e.createElementBlock("div",null,[e.renderSlot(t.$slots,"dialog-form-content",{formData:r.data,mode:r.mode},()=>[o.dialogFormConfig.length>0?(e.openBlock(),e.createBlock(A,{key:0,"form-config":R.value,modelValue:r.data,"onUpdate:modelValue":a[3]||(a[3]=c=>r.data=c),ref:c=>r.formRef=c,rules:o.dialogFormRules,"label-width":"80px"},null,8,["form-config","modelValue","rules"])):e.createCommentVNode("",!0)])])),[[U,r.loading]])]),_:3},8,["modelValue","title","width","custom-class"])],2)}}}),O={install:d=>{d.component("CrudTable",N)}};p.CrudTable=N,p.default=O,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
1
+ (function(m,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):(m=typeof globalThis<"u"?globalThis:m||self,e(m.ZCrudTable={},m.Vue,m.ElementPlus,m.axios))})(this,function(m,e,B,F){"use strict";const A=e.defineComponent({__name:"DynamicForm",props:{modelValue:{},formConfig:{},rules:{}},setup(p,{expose:u}){const b=e.ref(null);return u({validate:()=>{var i;return(i=b.value)==null?void 0:i.validate()}}),(i,o)=>{const w=e.resolveComponent("el-input"),S=e.resolveComponent("el-option"),g=e.resolveComponent("el-select"),d=e.resolveComponent("el-radio"),y=e.resolveComponent("el-radio-group"),C=e.resolveComponent("el-form-item"),k=e.resolveComponent("el-form");return e.openBlock(),e.createBlock(k,e.mergeProps({model:i.modelValue,rules:i.rules,ref_key:"formRef",ref:b},i.$attrs),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.formConfig,r=>(e.openBlock(),e.createBlock(C,{key:r.prop,label:r.label,prop:r.prop},{default:e.withCtx(()=>[r.type==="input"?(e.openBlock(),e.createBlock(w,e.mergeProps({key:0,modelValue:i.modelValue[r.prop],"onUpdate:modelValue":l=>i.modelValue[r.prop]=l},{ref_for:!0},r.componentProps),null,16,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),r.type==="textarea"?(e.openBlock(),e.createBlock(w,e.mergeProps({key:1,type:"textarea",modelValue:i.modelValue[r.prop],"onUpdate:modelValue":l=>i.modelValue[r.prop]=l},{ref_for:!0},r.componentProps),null,16,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),r.type==="select"?(e.openBlock(),e.createBlock(g,e.mergeProps({key:2,modelValue:i.modelValue[r.prop],"onUpdate:modelValue":l=>i.modelValue[r.prop]=l},{ref_for:!0},r.componentProps),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.options,l=>(e.openBlock(),e.createBlock(S,{key:l.value,label:l.label,value:l.value},null,8,["label","value"]))),128))]),_:2},1040,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),r.type==="radio-group"?(e.openBlock(),e.createBlock(y,e.mergeProps({key:3,modelValue:i.modelValue[r.prop],"onUpdate:modelValue":l=>i.modelValue[r.prop]=l},{ref_for:!0},r.componentProps),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.options,l=>(e.openBlock(),e.createBlock(d,{key:l.value,label:l.value},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.label),1)]),_:2},1032,["label"]))),128))]),_:2},1040,["modelValue","onUpdate:modelValue"])):e.createCommentVNode("",!0),r.type==="input-disabled"?(e.openBlock(),e.createBlock(w,e.mergeProps({key:4,"model-value":i.modelValue[r.prop],disabled:""},{ref_for:!0},r.componentProps),null,16,["model-value"])):e.createCommentVNode("",!0)]),_:2},1032,["label","prop"]))),128))]),_:1},16,["model","rules"])}}}),f=F.create({baseURL:"",timeout:1e4});f.interceptors.request.use(p=>{const u=localStorage.getItem("token");return u&&(p.headers.Authorization="Bearer "+u),p},p=>(console.log(p),Promise.reject(p))),f.interceptors.response.use(p=>p.data,p=>(console.log("err"+p),B.ElMessage({message:"接口错误,请刷新接口",type:"error",duration:5*1e3}),Promise.reject(p)));const z={class:"flex flex-wrap items-center justify-between gap-4 mb-6"},E={class:"flex items-center gap-x-2"},P={class:"flex items-center gap-x-3 action-buttons flex-shrink-0"},$={key:0,class:"flex items-center gap-x-2"},O={key:0,class:"flex justify-end"},T={class:"dialog-footer"},q=e.defineComponent({__name:"CrudTable",props:{theme:{type:String,default:"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},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:()=>({})}},emits:["open-dialog","submit","delete"],setup(p,{expose:u,emit:b}){const i=b,o=p,w=e.computed(()=>["crud-table-wrapper",`theme-${o.theme}`]),S=e.computed(()=>o.theme==="large-screen"?"large-screen-dialog":""),g=(t,a)=>t?!0:(B.ElMessage.error(`${a} prop is required.`),!1),d=e.reactive({pageNum:1,pageSize:10,...o.initialSearchForm}),y=e.ref([]),C=e.ref(0),k=e.ref(!1),r=e.ref([]),l=e.reactive({visible:!1,loading:!1,submitting:!1,mode:"add",data:{},formRef:null}),j=e.computed(()=>l.mode==="add"?"新增":"编辑"),Q=e.computed(()=>{if(l.mode==="add")return o.dialogFormConfig.filter(a=>a.prop!=="id");const t=[...o.dialogFormConfig.filter(a=>a.prop!=="id")];return t.some(a=>a.prop==="id")||t.unshift({type:"input-disabled",prop:"id",label:"用户ID"}),t}),h=async()=>{if(g(o.apiUrlQuery,"apiUrlQuery")){k.value=!0;try{let t={...d};o.onBeforeQuery&&(t=await o.onBeforeQuery(t));const a=await f.get(o.apiUrlQuery,{params:t});if(a&&Array.isArray(a.data)&&typeof a.total=="number"){let s=a.data;o.onAfterQuery&&(s=await o.onAfterQuery(s)),y.value=s,C.value=a.total}else console.warn("API response is not in the expected { data: [], total: 0 } format."),y.value=[],C.value=0}catch(t){console.error("Fetch data failed:",t)}finally{k.value=!1}}},V=()=>{d.pageNum=1,h()},R=()=>{const{pageNum:t,pageSize:a,...s}=o.initialSearchForm;Object.keys(d).forEach(c=>{c!=="pageNum"&&c!=="pageSize"&&delete d[c]}),Object.assign(d,s),V()},L=t=>{r.value=t},N=async(t,a)=>{let s=t==="add"?{role:"user"}:{...a};if(o.onBeforeOpenDialog){const c=await o.onBeforeOpenDialog(t,s);c&&(s=c)}if(l.mode=t,l.visible=!0,t==="edit"){if(!g(o.apiUrlDetail,"apiUrlDetail"))return;l.loading=!0;try{const c=await f.get(o.apiUrlDetail+"/"+s.id);l.data=c.data}finally{l.loading=!1,o.onAfterOpenDialog&&o.onAfterOpenDialog(t,l.data),i("open-dialog",{mode:t,data:l.data})}}else l.data=s,o.onAfterOpenDialog&&o.onAfterOpenDialog(t,l.data),i("open-dialog",{mode:t,data:l.data})},M=async()=>{try{l.formRef&&await l.formRef.validate();let t={...l.data};if(o.onBeforeSubmit&&(t=await o.onBeforeSubmit(t)),l.submitting=!0,l.mode==="add"){if(!g(o.apiUrlCreate,"apiUrlCreate"))return;await f.post(o.apiUrlCreate,t),B.ElMessage.success("新增成功")}else{if(!g(o.apiUrlUpdate,"apiUrlUpdate"))return;await f.put(o.apiUrlUpdate,t),B.ElMessage.success("更新成功")}o.onAfterSubmit&&o.onAfterSubmit(l.mode,t),i("submit",{mode:l.mode,data:t}),l.visible=!1,h()}catch(t){console.log("Submit error or validation failed:",t)}finally{l.submitting=!1}},x=async t=>{if(g(o.apiUrlDelete,"apiUrlDelete"))try{if(o.onBeforeDelete&&await o.onBeforeDelete(t)===!1)return;const a=t.join(",");await f.delete(o.apiUrlDelete+"/"+a.toString()),B.ElMessage.success("删除成功"),o.onAfterDelete&&o.onAfterDelete(t),i("delete",t),y.value.length===t.length&&d.pageNum>1&&d.pageNum--,h()}catch(a){console.error("Delete failed",a)}},I=t=>{d.pageSize=t,V()},W=t=>{d.pageNum=t,h()};return e.onMounted(h),u({refresh:h,search:V,handleDelete:x,openDialog:N}),(t,a)=>{const s=e.resolveComponent("el-button"),c=e.resolveComponent("el-form-item"),H=e.resolveComponent("el-form"),_=e.resolveComponent("el-table-column"),Z=e.resolveComponent("el-popconfirm"),G=e.resolveComponent("el-table"),J=e.resolveComponent("el-pagination"),K=e.resolveComponent("el-dialog"),U=e.resolveDirective("loading");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(w.value)},[e.renderSlot(t.$slots,"header"),e.createElementVNode("div",z,[e.createVNode(H,{model:d,class:"query-form flex flex-nowrap items-center gap-x-4",style:{"overflow-x":"auto","padding-bottom":"8px"}},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"query-conditions",{searchForm:d}),e.createVNode(c,{class:"!mr-0 flex-shrink-0"},{default:e.withCtx(()=>[e.createElementVNode("div",E,[e.renderSlot(t.$slots,"query-left"),e.createVNode(s,{style:{"margin-left":"16px"},type:"primary",onClick:V,loading:k.value},{default:e.withCtx(()=>a[6]||(a[6]=[e.createTextVNode("搜索 ")])),_:1,__:[6]},8,["loading"]),e.createVNode(s,{onClick:R},{default:e.withCtx(()=>a[7]||(a[7]=[e.createTextVNode("清空")])),_:1,__:[7]}),e.renderSlot(t.$slots,"query-right")])]),_:3})]),_:3},8,["model"]),e.createElementVNode("div",P,[e.renderSlot(t.$slots,"action-left",{selections:r.value}),e.renderSlot(t.$slots,"add-button-content",{},()=>[e.createVNode(s,{type:"success",onClick:a[0]||(a[0]=n=>N("add"))},{default:e.withCtx(()=>a[8]||(a[8]=[e.createTextVNode("新增")])),_:1,__:[8]})]),e.renderSlot(t.$slots,"action-right")])]),e.withDirectives((e.openBlock(),e.createBlock(G,e.mergeProps({data:y.value,onSelectionChange:L},t.$attrs,{style:{width:"100%","margin-bottom":"1.5rem"}}),{default:e.withCtx(()=>[o.showSelectionColumn?(e.openBlock(),e.createBlock(_,{key:0,type:"selection",width:"55",fixed:""})):e.createCommentVNode("",!0),o.showIndexColumn?(e.openBlock(),e.createBlock(_,{key:1,type:"index",label:"序号",width:"70",fixed:""})):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.columns,n=>(e.openBlock(),e.createBlock(_,e.mergeProps({key:n.prop,prop:n.prop,label:n.label,width:n.width,sortable:n.sortable||!1},{ref_for:!0},n.attrs),e.createSlots({_:2},[n.slot?{name:"default",fn:e.withCtx(D=>[e.renderSlot(t.$slots,n.slot,{row:D.row})]),key:"0"}:void 0]),1040,["prop","label","width","sortable"]))),128)),o.showActionsColumn?(e.openBlock(),e.createBlock(_,{key:2,label:"操作",width:p.actionsColumnWidth},{default:e.withCtx(n=>[n.row?(e.openBlock(),e.createElementBlock("div",$,[e.renderSlot(t.$slots,"actions",{row:n.row},()=>[o.showEditButton?(e.openBlock(),e.createBlock(s,{key:0,size:"small",type:"primary",link:"",onClick:D=>N("edit",n.row)},{default:e.withCtx(()=>a[9]||(a[9]=[e.createTextVNode("编辑 ")])),_:2,__:[9]},1032,["onClick"])):e.createCommentVNode("",!0),o.showDeleteButton?(e.openBlock(),e.createBlock(Z,{key:1,title:"确定要删除这条数据吗?",onConfirm:D=>x([n.row.id]),"confirm-button-text":"确定","cancel-button-text":"取消",width:"200"},{reference:e.withCtx(()=>[e.createVNode(s,{size:"small",type:"danger",link:""},{default:e.withCtx(()=>a[10]||(a[10]=[e.createTextVNode("删除")])),_:1,__:[10]})]),_:2},1032,["onConfirm"])):e.createCommentVNode("",!0)])])):e.createCommentVNode("",!0)]),_:3},8,["width"])):e.createCommentVNode("",!0)]),_:3},16,["data"])),[[U,k.value]]),o.showPagination&&C.value>0?(e.openBlock(),e.createElementBlock("div",O,[e.createVNode(J,{"current-page":d.pageNum,"onUpdate:currentPage":a[1]||(a[1]=n=>d.pageNum=n),"page-size":d.pageSize,"onUpdate:pageSize":a[2]||(a[2]=n=>d.pageSize=n),"page-sizes":o.pageSizes,layout:o.paginationLayout,total:C.value,background:o.paginationBackground,small:o.paginationSmall,"hide-on-single-page":o.paginationHideOnSinglePage,onSizeChange:I,onCurrentChange:W},null,8,["current-page","page-size","page-sizes","layout","total","background","small","hide-on-single-page"])])):e.createCommentVNode("",!0),e.createVNode(K,{modelValue:l.visible,"onUpdate:modelValue":a[5]||(a[5]=n=>l.visible=n),title:j.value,width:o.dialogWidth,"destroy-on-close":!0,"custom-class":S.value},{footer:e.withCtx(()=>[e.createElementVNode("div",T,[e.createVNode(s,{onClick:a[4]||(a[4]=n=>l.visible=!1)},{default:e.withCtx(()=>a[11]||(a[11]=[e.createTextVNode("取消")])),_:1,__:[11]}),e.createVNode(s,{type:"primary",onClick:M,loading:l.submitting},{default:e.withCtx(()=>a[12]||(a[12]=[e.createTextVNode("确定")])),_:1,__:[12]},8,["loading"])])]),default:e.withCtx(()=>[e.withDirectives((e.openBlock(),e.createElementBlock("div",null,[e.renderSlot(t.$slots,"dialog-form-content",{formData:l.data,mode:l.mode},()=>[o.dialogFormConfig.length>0?(e.openBlock(),e.createBlock(A,{key:0,"form-config":Q.value,modelValue:l.data,"onUpdate:modelValue":a[3]||(a[3]=n=>l.data=n),ref:n=>l.formRef=n,rules:o.dialogFormRules,"label-width":"80px"},null,8,["form-config","modelValue","rules"])):e.createCommentVNode("",!0)])])),[[U,l.loading]])]),_:3},8,["modelValue","title","width","custom-class"])],2)}}});m.CrudTable=q,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "z-crud-table",
3
3
  "private": false,
4
- "version": "0.0.12",
4
+ "version": "0.0.14",
5
5
  "type": "module",
6
6
  "description": "A powerful and flexible CRUD table component for Vue 3 and Element Plus.",
7
7
  "keywords": [
@@ -54,7 +54,7 @@
54
54
  "postcss": "^8.4.38",
55
55
  "tailwindcss": "^3.4.4",
56
56
  "typescript": "~5.4.5",
57
- "vite": "^5.2.0",
57
+ "vite": "^6.2.4",
58
58
  "vite-plugin-dts": "^3.9.1",
59
59
  "vite-plugin-vue-devtools": "^7.7.2",
60
60
  "vue": "^3.5.13",
package/dist/index.css DELETED
@@ -1 +0,0 @@
1
- *,: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}.fixed{position:fixed}.mx-auto{margin-left:auto;margin-right:auto}.\!mr-0{margin-right:0!important}.mb-10{margin-bottom:2.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mt-3{margin-top:.75rem}.mt-\[10px\]{margin-top:10px}.flex{display:flex}.max-w-7xl{max-width:80rem}.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}.space-y-12>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(3rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(3rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.rounded-xl{border-radius:.75rem}.border-l-4{border-left-width:4px}.border-blue-500{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.border-teal-500{--tw-border-opacity: 1;border-color:rgb(20 184 166 / var(--tw-border-opacity, 1))}.bg-black{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.p-4{padding:1rem}.pl-3{padding-left:.75rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-slate-600{--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity, 1))}.text-slate-800{--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity, 1))}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-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;padding:1rem}@media (min-width: 768px){#app{padding:1.5rem}}.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-input__inner{color:var(--large-screen-text-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{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}@media (min-width: 640px){.sm\:p-6{padding:1.5rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width: 1024px){.lg\:p-8{padding:2rem}}