z-crud-table 0.0.15 → 0.0.16

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", rowData?: any) => Promise<void>;
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;
@@ -290,9 +308,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
290
308
  paginationHideOnSinglePage: boolean;
291
309
  dialogFormConfig: any[];
292
310
  dialogFormRules: Record<string, any>;
293
- }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, Partial<Record<any, (_: {
294
- row: any;
295
- }) => any>> & {
311
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
296
312
  header?(_: {}): any;
297
313
  "query-conditions"?(_: {
298
314
  searchForm: {
@@ -310,9 +326,11 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
310
326
  actions?(_: {
311
327
  row: any;
312
328
  }): any;
313
- "dialog-form-content"?(_: {
314
- formData: Record<string, any>;
315
- mode: "add" | "edit";
329
+ "action-before-edit"?(_: {
330
+ row: any;
331
+ }): any;
332
+ "action-after-delete"?(_: {
333
+ row: any;
316
334
  }): any;
317
335
  }>;
318
336
  export default _default;
@@ -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}
@@ -1,121 +1,36 @@
1
- import { defineComponent as H, ref as A, resolveComponent as m, createBlock as f, openBlock as i, mergeProps as h, withCtx as u, createElementBlock as w, Fragment as j, renderList as q, createCommentVNode as c, createTextVNode as v, toDisplayString as re, computed as O, reactive as T, onMounted as ne, resolveDirective as ie, normalizeClass as se, renderSlot as b, createElementVNode as x, withDirectives as W, createVNode as _, createSlots as ue } from "vue";
2
- import { ElMessage as F } from "element-plus";
3
- import de from "axios";
4
- const pe = /* @__PURE__ */ H({
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 M, computed as _, reactive as O, ref as U, onMounted as H, resolveComponent as c, resolveDirective as G, createElementBlock as F, openBlock as p, normalizeClass as J, renderSlot as i, createCommentVNode as m, withDirectives as K, createVNode as h, createElementVNode as q, withCtx as s, createTextVNode as w, createBlock as b, mergeProps as X } from "vue";
2
+ import { ElMessage as S } from "element-plus";
3
+ import Y from "axios";
4
+ const f = Y.create({
90
5
  // VITE_APP_BASE_API 是在 .env 文件中定义的基础 URL
91
6
  // 您可以根据您的项目需求进行修改
92
7
  baseURL: "",
93
8
  timeout: 1e4
94
9
  // 请求超时时间
95
10
  });
96
- S.interceptors.request.use(
97
- (g) => {
11
+ f.interceptors.request.use(
12
+ (n) => {
98
13
  const D = localStorage.getItem("token");
99
- return D && (g.headers.Authorization = "Bearer " + D), g;
14
+ return D && (n.headers.Authorization = "Bearer " + D), n;
100
15
  },
101
- (g) => (console.log(g), Promise.reject(g))
16
+ (n) => (console.log(n), Promise.reject(n))
102
17
  );
103
- S.interceptors.response.use(
104
- (g) => g.data,
105
- (g) => (console.log("err" + g), F({
18
+ f.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(g))
25
+ }), Promise.reject(n))
111
26
  );
112
- const fe = { class: "flex flex-wrap items-center justify-between gap-4 mb-6" }, me = { class: "flex items-center gap-x-2" }, ge = { class: "flex items-center gap-x-3 action-buttons flex-shrink-0" }, ce = {
27
+ const Z = {
113
28
  key: 0,
114
- class: "flex items-center gap-x-2"
115
- }, ye = {
29
+ class: "flex flex-wrap items-center justify-between gap-4 mb-6"
30
+ }, ee = { class: "flex items-center gap-x-2" }, te = { class: "flex items-center gap-x-3 action-buttons flex-shrink-0" }, oe = {
116
31
  key: 0,
117
- class: "flex justify-end"
118
- }, be = { class: "dialog-footer" }, we = /* @__PURE__ */ H({
32
+ class: "flex items-center gap-x-2"
33
+ }, le = /* @__PURE__ */ M({
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(g, { expose: D, emit: z }) {
171
- const s = z, e = g, B = O(() => ["crud-table-wrapper", `theme-${e.theme}`, e.customClass]), Q = O(() => e.theme === "large-screen" ? "large-screen-dialog" : ""), C = (t, o) => t ? !0 : (F.error(`${o} prop is required.`), !1), $ = async (t, o) => {
89
+ setup(n, { expose: D, emit: j }) {
90
+ const v = j, t = n, z = _(() => ["crud-table-wrapper", `theme-${t.theme}`, t.customClass]);
91
+ _(() => t.theme === "large-screen" ? "large-screen-dialog" : "");
92
+ const g = (e, o) => e ? !0 : (S.error(`${o} prop is required.`), !1), Q = async (e, o) => {
172
93
  try {
173
- let r = { ...o };
174
- if (e.onBeforeSubmit && (r = await e.onBeforeSubmit(r)), l.submitting = !0, t === "add") {
175
- if (!C(e.apiUrlCreate, "apiUrlCreate")) return;
176
- await S.post(e.apiUrlCreate, r), F.success("新增成功");
94
+ let a = { ...o };
95
+ if (t.onBeforeSubmit && (a = await t.onBeforeSubmit(a)), r.submitting = !0, e === "add") {
96
+ if (!g(t.apiUrlCreate, "apiUrlCreate")) return;
97
+ await f.post(t.apiUrlCreate, a), S.success("新增成功");
177
98
  } else {
178
- if (!C(e.apiUrlUpdate, "apiUrlUpdate")) return;
179
- await S.put(e.apiUrlUpdate, r), F.success("更新成功");
99
+ if (!g(t.apiUrlUpdate, "apiUrlUpdate")) return;
100
+ await f.put(t.apiUrlUpdate, a), S.success("更新成功");
180
101
  }
181
- return e.onAfterSubmit && e.onAfterSubmit(t, r), s("submit", { mode: t, data: r }), l.visible && (l.visible = !1), V(), Promise.resolve();
182
- } catch (r) {
183
- return console.log("Submit error:", r), Promise.reject(r);
102
+ return t.onAfterSubmit && t.onAfterSubmit(e, a), v("submit", { mode: e, data: a }), r.visible && (r.visible = !1), y(), Promise.resolve();
103
+ } catch (a) {
104
+ return console.log("Submit error:", a), Promise.reject(a);
184
105
  } finally {
185
- l.submitting = !1;
106
+ r.submitting = !1;
186
107
  }
187
- }, p = T({ pageNum: 1, pageSize: 10, ...e.initialSearchForm }), k = A([]), U = A(0), a = A(!1), d = A([]), l = T({ visible: !1, loading: !1, submitting: !1, mode: "add", data: {}, formRef: null }), M = O(() => l.mode === "add" ? "新增" : "编辑"), G = O(() => {
188
- if (l.mode === "add") return e.dialogFormConfig.filter((o) => o.prop !== "id");
189
- const t = [...e.dialogFormConfig.filter((o) => o.prop !== "id")];
190
- return t.some((o) => o.prop === "id") || t.unshift({ type: "input-disabled", prop: "id", label: "用户ID" }), t;
191
- }), V = async () => {
192
- if (C(e.apiUrlQuery, "apiUrlQuery")) {
193
- a.value = !0;
108
+ }, u = O({ pageNum: 1, pageSize: 10, ...t.initialSearchForm }), B = U([]), $ = U(0), C = U(!1), x = U([]), r = O({ visible: !1, loading: !1, submitting: !1, mode: "add", data: {}, formRef: null });
109
+ _(() => r.mode === "add" ? "新增" : "编辑"), _(() => {
110
+ if (r.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 y = async () => {
115
+ if (g(t.apiUrlQuery, "apiUrlQuery")) {
116
+ C.value = !0;
194
117
  try {
195
- let t = { ...p };
196
- e.onBeforeQuery && (t = await e.onBeforeQuery(t));
197
- const o = await S.get(e.apiUrlQuery, { params: t });
118
+ let e = { ...u };
119
+ t.onBeforeQuery && (e = await t.onBeforeQuery(e));
120
+ const o = await f.get(t.apiUrlQuery, { params: e });
198
121
  if (o && Array.isArray(o.data) && typeof o.total == "number") {
199
- let r = o.data;
200
- e.onAfterQuery && (r = await e.onAfterQuery(r)), k.value = r, U.value = o.total;
122
+ let a = o.data;
123
+ t.onAfterQuery && (a = await t.onAfterQuery(a)), B.value = a, $.value = o.total;
201
124
  } else
202
- console.warn("API response is not in the expected { data: [], total: 0 } format."), k.value = [], U.value = 0;
203
- } catch (t) {
204
- console.error("Fetch data failed:", t);
125
+ console.warn("API response is not in the expected { data: [], total: 0 } format."), B.value = [], $.value = 0;
126
+ } catch (e) {
127
+ console.error("Fetch data failed:", e);
205
128
  } finally {
206
- a.value = !1;
129
+ C.value = !1;
207
130
  }
208
131
  }
132
+ }, A = () => {
133
+ u.pageNum = 1, y();
209
134
  }, P = () => {
210
- p.pageNum = 1, V();
211
- }, J = () => {
212
- const { pageNum: t, pageSize: o, ...r } = e.initialSearchForm;
213
- Object.keys(p).forEach((y) => {
214
- y !== "pageNum" && y !== "pageSize" && delete p[y];
215
- }), Object.assign(p, r), P();
216
- }, K = (t) => {
217
- d.value = t;
218
- }, R = async (t, o) => {
219
- let r = t === "add" ? { role: "user" } : { ...o };
220
- if (e.onBeforeOpenDialog) {
221
- const y = await e.onBeforeOpenDialog(t, r);
222
- y && (r = y);
135
+ const { pageNum: e, pageSize: o, ...a } = t.initialSearchForm;
136
+ Object.keys(u).forEach((l) => {
137
+ l !== "pageNum" && l !== "pageSize" && delete u[l];
138
+ }), Object.assign(u, a), A();
139
+ }, E = (e) => {
140
+ x.value = e;
141
+ }, k = async (e, o) => {
142
+ let a;
143
+ if (e === "add" ? a = o ? { ...o } : { role: "user" } : a = { ...o }, t.onBeforeOpenDialog) {
144
+ const l = await t.onBeforeOpenDialog(e, a);
145
+ l && (a = l);
223
146
  }
224
- if (l.mode = t, l.visible = !0, t === "edit") {
225
- if (!C(e.apiUrlDetail, "apiUrlDetail")) return;
226
- l.loading = !0;
147
+ if (r.mode = e, r.visible = !0, e === "edit") {
148
+ if (!g(t.apiUrlDetail, "apiUrlDetail")) return;
149
+ r.loading = !0;
227
150
  try {
228
- const y = await S.get(e.apiUrlDetail + "/" + r.id);
229
- l.data = y.data;
151
+ const l = await f.get(t.apiUrlDetail, { params: { id: a.id } });
152
+ r.data = l.data;
230
153
  } finally {
231
- l.loading = !1, e.onAfterOpenDialog && e.onAfterOpenDialog(t, l.data), s("open-dialog", { mode: t, data: l.data });
154
+ r.loading = !1, t.onAfterOpenDialog && t.onAfterOpenDialog(e, r.data), v("open-dialog", { mode: e, data: r.data });
232
155
  }
233
156
  } else
234
- l.data = r, e.onAfterOpenDialog && e.onAfterOpenDialog(t, l.data), s("open-dialog", { mode: t, data: l.data });
235
- }, X = async () => {
236
- try {
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
+ r.data = a, t.onAfterOpenDialog && t.onAfterOpenDialog(e, r.data), v("open-dialog", { mode: e, data: r.data });
158
+ }, N = async (e) => {
159
+ if (g(t.apiUrlDelete, "apiUrlDelete"))
243
160
  try {
244
- if (e.onBeforeDelete && await e.onBeforeDelete(t) === !1)
161
+ if (t.onBeforeDelete && await t.onBeforeDelete(e) === !1)
245
162
  return;
246
- const o = t.join(",");
247
- await S.delete(e.apiUrlDelete + "/" + o.toString()), F.success("删除成功"), e.onAfterDelete && e.onAfterDelete(t), s("delete", t), k.value.length === t.length && p.pageNum > 1 && p.pageNum--, V();
163
+ const o = e.join(",");
164
+ await f.delete(t.apiUrlDelete + "/" + o.toString()), S.success("删除成功"), t.onAfterDelete && t.onAfterDelete(e), v("delete", e), B.value.length === e.length && u.pageNum > 1 && u.pageNum--, y();
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 ne(V), D({
257
- refresh: V,
169
+ return H(y), D({
170
+ refresh: y,
258
171
  // 刷新表格
259
- search: P,
172
+ search: A,
260
173
  // 按当前条件搜索
261
- handleDelete: I,
174
+ handleDelete: N,
262
175
  // 手动触发删除
263
- openDialog: R,
176
+ openDialog: k,
264
177
  // 手动打开弹窗
265
- submit: $
178
+ submit: Q
266
179
  // 手动提交
267
- }), (t, o) => {
268
- const r = m("el-button"), y = m("el-form-item"), ee = m("el-form"), N = m("el-table-column"), te = m("el-popconfirm"), oe = m("el-table"), le = m("el-pagination"), ae = m("el-dialog"), L = ie("loading");
269
- return i(), w("div", {
270
- class: se(B.value)
180
+ }), (e, o) => {
181
+ const a = c("el-button"), l = c("el-form-item"), I = c("el-form"), V = c("el-popconfirm"), R = c("el-table-column"), T = c("el-table"), W = G("loading");
182
+ return p(), F("div", {
183
+ class: J(z.value)
271
184
  }, [
272
- b(t.$slots, "header"),
273
- x("div", fe, [
274
- _(ee, {
275
- model: p,
185
+ i(e.$slots, "header"),
186
+ t.showSearchSection ? (p(), F("div", Z, [
187
+ h(I, {
188
+ model: u,
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
- default: u(() => [
280
- b(t.$slots, "query-conditions", { searchForm: p }),
281
- _(y, { class: "!mr-0 flex-shrink-0" }, {
282
- default: u(() => [
283
- x("div", me, [
284
- b(t.$slots, "query-left"),
285
- _(r, {
286
- style: { "margin-left": "16px" },
192
+ default: s(() => [
193
+ i(e.$slots, "query-conditions", { searchForm: u }),
194
+ h(l, { class: "!mr-0 flex-shrink-0" }, {
195
+ default: s(() => [
196
+ q("div", ee, [
197
+ i(e.$slots, "query-left"),
198
+ h(a, {
287
199
  type: "primary",
288
- onClick: P,
289
- loading: a.value
200
+ onClick: A,
201
+ loading: C.value
290
202
  }, {
291
- default: u(() => o[6] || (o[6] = [
292
- v("搜索 ")
203
+ default: s(() => o[1] || (o[1] = [
204
+ w("搜索")
293
205
  ])),
294
206
  _: 1,
295
- __: [6]
207
+ __: [1]
296
208
  }, 8, ["loading"]),
297
- _(r, { onClick: J }, {
298
- default: u(() => o[7] || (o[7] = [
299
- v("清空")
209
+ h(a, { onClick: P }, {
210
+ default: s(() => o[2] || (o[2] = [
211
+ w("清空")
300
212
  ])),
301
213
  _: 1,
302
- __: [7]
214
+ __: [2]
303
215
  }),
304
- b(t.$slots, "query-right")
216
+ i(e.$slots, "query-right")
305
217
  ])
306
218
  ]),
307
219
  _: 3
@@ -309,188 +221,95 @@ const fe = { class: "flex flex-wrap items-center justify-between gap-4 mb-6" },
309
221
  ]),
310
222
  _: 3
311
223
  }, 8, ["model"]),
312
- x("div", ge, [
313
- b(t.$slots, "action-left", { selections: d.value }),
314
- b(t.$slots, "add-button-content", {}, () => [
315
- _(r, {
224
+ q("div", te, [
225
+ i(e.$slots, "action-left", { selections: x.value }),
226
+ i(e.$slots, "add-button-content", {}, () => [
227
+ t.showNewBtn ? (p(), b(a, {
228
+ key: 0,
316
229
  type: "success",
317
- onClick: o[0] || (o[0] = (n) => R("add"))
230
+ onClick: o[0] || (o[0] = (d) => k("add"))
318
231
  }, {
319
- default: u(() => o[8] || (o[8] = [
320
- v("新增")
232
+ default: s(() => o[3] || (o[3] = [
233
+ w("新增")
321
234
  ])),
322
235
  _: 1,
323
- __: [8]
324
- })
236
+ __: [3]
237
+ })) : m("", !0)
325
238
  ]),
326
- b(t.$slots, "action-right")
239
+ i(e.$slots, "action-right")
327
240
  ])
328
- ]),
329
- W((i(), f(oe, h({
330
- data: k.value,
331
- onSelectionChange: K
332
- }, t.$attrs, { style: { width: "100%", "margin-bottom": "1.5rem" } }), {
333
- default: u(() => [
334
- e.showSelectionColumn ? (i(), f(N, {
241
+ ])) : m("", !0),
242
+ K((p(), b(T, X({
243
+ data: B.value,
244
+ onSelectionChange: E
245
+ }, e.$attrs, { style: { width: "100%" } }), {
246
+ default: s(() => [
247
+ t.showActionsColumn ? (p(), b(R, {
335
248
  key: 0,
336
- type: "selection",
337
- width: "55",
338
- fixed: ""
339
- })) : c("", !0),
340
- e.showIndexColumn ? (i(), f(N, {
341
- key: 1,
342
- type: "index",
343
- label: "序号",
344
- width: "70",
345
- fixed: ""
346
- })) : c("", !0),
347
- (i(!0), w(j, null, q(e.columns, (n) => (i(), f(N, h({
348
- key: n.prop,
349
- prop: n.prop,
350
- label: n.label,
351
- width: n.width,
352
- sortable: n.sortable || !1
353
- }, { ref_for: !0 }, n.attrs), ue({ _: 2 }, [
354
- n.slot ? {
355
- name: "default",
356
- fn: u((E) => [
357
- b(t.$slots, n.slot, {
358
- row: E.row
359
- })
360
- ]),
361
- key: "0"
362
- } : void 0
363
- ]), 1040, ["prop", "label", "width", "sortable"]))), 128)),
364
- e.showActionsColumn ? (i(), f(N, {
365
- key: 2,
366
249
  label: "操作",
367
- width: g.actionsColumnWidth
250
+ width: n.actionsColumnWidth
368
251
  }, {
369
- default: u((n) => [
370
- n.row ? (i(), w("div", ce, [
371
- b(t.$slots, "actions", {
372
- row: n.row
252
+ default: s((d) => [
253
+ d.row ? (p(), F("div", oe, [
254
+ i(e.$slots, "actions", {
255
+ row: d.row
373
256
  }, () => [
374
- e.showEditButton ? (i(), f(r, {
257
+ i(e.$slots, "action-before-edit", {
258
+ row: d.row
259
+ }),
260
+ t.showEditButton ? (p(), b(a, {
375
261
  key: 0,
376
262
  size: "small",
377
263
  type: "primary",
378
264
  link: "",
379
- onClick: (E) => R("edit", n.row)
265
+ onClick: (L) => k("edit", d.row)
380
266
  }, {
381
- default: u(() => o[9] || (o[9] = [
382
- v("编辑 ")
267
+ default: s(() => o[4] || (o[4] = [
268
+ w("编辑 ")
383
269
  ])),
384
270
  _: 2,
385
- __: [9]
386
- }, 1032, ["onClick"])) : c("", !0),
387
- e.showDeleteButton ? (i(), f(te, {
271
+ __: [4]
272
+ }, 1032, ["onClick"])) : m("", !0),
273
+ t.showDeleteButton ? (p(), b(V, {
388
274
  key: 1,
389
275
  title: "确定要删除这条数据吗?",
390
- onConfirm: (E) => I([n.row.id]),
276
+ onConfirm: (L) => N([d.row.id]),
391
277
  "confirm-button-text": "确定",
392
278
  "cancel-button-text": "取消",
393
279
  width: "200"
394
280
  }, {
395
- reference: u(() => [
396
- _(r, {
281
+ reference: s(() => [
282
+ h(a, {
397
283
  size: "small",
398
284
  type: "danger",
399
285
  link: ""
400
286
  }, {
401
- default: u(() => o[10] || (o[10] = [
402
- v("删除")
287
+ default: s(() => o[5] || (o[5] = [
288
+ w("删除")
403
289
  ])),
404
290
  _: 1,
405
- __: [10]
291
+ __: [5]
406
292
  })
407
293
  ]),
408
294
  _: 2
409
- }, 1032, ["onConfirm"])) : c("", !0)
295
+ }, 1032, ["onConfirm"])) : m("", !0),
296
+ i(e.$slots, "action-after-delete", {
297
+ row: d.row
298
+ })
410
299
  ])
411
- ])) : c("", !0)
300
+ ])) : m("", !0)
412
301
  ]),
413
302
  _: 3
414
- }, 8, ["width"])) : c("", !0)
303
+ }, 8, ["width"])) : m("", !0)
415
304
  ]),
416
305
  _: 3
417
306
  }, 16, ["data"])), [
418
- [L, a.value]
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"])
307
+ [W, C.value]
308
+ ])
490
309
  ], 2);
491
310
  };
492
311
  }
493
312
  });
494
313
  export {
495
- we as CrudTable
314
+ le as CrudTable
496
315
  };
@@ -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(s,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):(s=typeof globalThis<"u"?globalThis:s||self,e(s.ZCrudTable={},s.Vue,s.ElementPlus,s.axios))})(this,function(s,e,f,k){"use strict";const c=k.create({baseURL:"",timeout:1e4});c.interceptors.request.use(l=>{const g=localStorage.getItem("token");return g&&(l.headers.Authorization="Bearer "+g),l},l=>(console.log(l),Promise.reject(l))),c.interceptors.response.use(l=>l.data,l=>(console.log("err"+l),f.ElMessage({message:"接口错误,请刷新接口",type:"error",duration:5*1e3}),Promise.reject(l)));const x={key:0,class:"flex flex-wrap items-center justify-between gap-4 mb-6"},_={class:"flex items-center gap-x-2"},N={class:"flex items-center gap-x-3 action-buttons flex-shrink-0"},U={key:0,class:"flex items-center gap-x-2"},A=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(l,{expose:g,emit:V}){const y=V,o=l,F=e.computed(()=>["crud-table-wrapper",`theme-${o.theme}`,o.customClass]);e.computed(()=>o.theme==="large-screen"?"large-screen-dialog":"");const u=(t,r)=>t?!0:(f.ElMessage.error(`${r} prop is required.`),!1),$=async(t,r)=>{try{let a={...r};if(o.onBeforeSubmit&&(a=await o.onBeforeSubmit(a)),n.submitting=!0,t==="add"){if(!u(o.apiUrlCreate,"apiUrlCreate"))return;await c.post(o.apiUrlCreate,a),f.ElMessage.success("新增成功")}else{if(!u(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),m(),Promise.resolve()}catch(a){return console.log("Submit error:",a),Promise.reject(a)}finally{n.submitting=!1}},d=e.reactive({pageNum:1,pageSize:10,...o.initialSearchForm}),h=e.ref([]),B=e.ref(0),w=e.ref(!1),b=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 m=async()=>{if(u(o.apiUrlQuery,"apiUrlQuery")){w.value=!0;try{let t={...d};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,B.value=r.total}else console.warn("API response is not in the expected { data: [], total: 0 } format."),h.value=[],B.value=0}catch(t){console.error("Fetch data failed:",t)}finally{w.value=!1}}},C=()=>{d.pageNum=1,m()},q=()=>{const{pageNum:t,pageSize:r,...a}=o.initialSearchForm;Object.keys(d).forEach(i=>{i!=="pageNum"&&i!=="pageSize"&&delete d[i]}),Object.assign(d,a),C()},E=t=>{b.value=t},S=async(t,r)=>{let a;if(t==="add"?a=r?{...r}:{role:"user"}:a={...r},o.onBeforeOpenDialog){const i=await o.onBeforeOpenDialog(t,a);i&&(a=i)}if(n.mode=t,n.visible=!0,t==="edit"){if(!u(o.apiUrlDetail,"apiUrlDetail"))return;n.loading=!0;try{const i=await c.get(o.apiUrlDetail,{params:{id:a.id}});n.data=i.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})},D=async t=>{if(u(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&&d.pageNum>1&&d.pageNum--,m()}catch(r){console.error("Delete failed",r)}};return e.onMounted(m),g({refresh:m,search:C,handleDelete:D,openDialog:S,submit:$}),(t,r)=>{const a=e.resolveComponent("el-button"),i=e.resolveComponent("el-form-item"),O=e.resolveComponent("el-form"),j=e.resolveComponent("el-popconfirm"),T=e.resolveComponent("el-table-column"),z=e.resolveComponent("el-table"),Q=e.resolveDirective("loading");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(F.value)},[e.renderSlot(t.$slots,"header"),o.showSearchSection?(e.openBlock(),e.createElementBlock("div",x,[e.createVNode(O,{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(i,{class:"!mr-0 flex-shrink-0"},{default:e.withCtx(()=>[e.createElementVNode("div",_,[e.renderSlot(t.$slots,"query-left"),e.createVNode(a,{type:"primary",onClick:C,loading:w.value},{default:e.withCtx(()=>r[1]||(r[1]=[e.createTextVNode("搜索")])),_:1,__:[1]},8,["loading"]),e.createVNode(a,{onClick:q},{default:e.withCtx(()=>r[2]||(r[2]=[e.createTextVNode("清空")])),_:1,__:[2]}),e.renderSlot(t.$slots,"query-right")])]),_:3})]),_:3},8,["model"]),e.createElementVNode("div",N,[e.renderSlot(t.$slots,"action-left",{selections:b.value}),e.renderSlot(t.$slots,"add-button-content",{},()=>[o.showNewBtn?(e.openBlock(),e.createBlock(a,{key:0,type:"success",onClick:r[0]||(r[0]=p=>S("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(z,e.mergeProps({data:h.value,onSelectionChange:E},t.$attrs,{style:{width:"100%"}}),{default:e.withCtx(()=>[o.showActionsColumn?(e.openBlock(),e.createBlock(T,{key:0,label:"操作",width:l.actionsColumnWidth},{default:e.withCtx(p=>[p.row?(e.openBlock(),e.createElementBlock("div",U,[e.renderSlot(t.$slots,"actions",{row:p.row},()=>[e.renderSlot(t.$slots,"action-before-edit",{row:p.row}),o.showEditButton?(e.openBlock(),e.createBlock(a,{key:0,size:"small",type:"primary",link:"",onClick:M=>S("edit",p.row)},{default:e.withCtx(()=>r[4]||(r[4]=[e.createTextVNode("编辑 ")])),_:2,__:[4]},1032,["onClick"])):e.createCommentVNode("",!0),o.showDeleteButton?(e.openBlock(),e.createBlock(j,{key:1,title:"确定要删除这条数据吗?",onConfirm:M=>D([p.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:p.row})])])):e.createCommentVNode("",!0)]),_:3},8,["width"])):e.createCommentVNode("",!0)]),_:3},16,["data"])),[[Q,w.value]])],2)}}});s.CrudTable=A,Object.defineProperty(s,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.15",
4
+ "version": "0.0.16",
5
5
  "type": "module",
6
6
  "description": "A powerful and flexible CRUD table component for Vue 3 and Element Plus.",
7
7
  "keywords": [
@@ -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
- };