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