z-crud-table 0.0.16 → 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.
- package/dist/components/CrudTable.vue.d.ts +3 -1
- package/dist/z-crud-table.js +152 -122
- package/dist/z-crud-table.umd.cjs +1 -1
- package/package.json +1 -1
|
@@ -308,7 +308,9 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
|
|
|
308
308
|
paginationHideOnSinglePage: boolean;
|
|
309
309
|
dialogFormConfig: any[];
|
|
310
310
|
dialogFormRules: Record<string, any>;
|
|
311
|
-
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
|
|
311
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, Partial<Record<any, (_: {
|
|
312
|
+
row: any;
|
|
313
|
+
}) => any>> & {
|
|
312
314
|
header?(_: {}): any;
|
|
313
315
|
"query-conditions"?(_: {
|
|
314
316
|
searchForm: {
|
package/dist/z-crud-table.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import { defineComponent as
|
|
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
2
|
import { ElMessage as S } from "element-plus";
|
|
3
|
-
import
|
|
4
|
-
const
|
|
3
|
+
import te from "axios";
|
|
4
|
+
const m = te.create({
|
|
5
5
|
// VITE_APP_BASE_API 是在 .env 文件中定义的基础 URL
|
|
6
6
|
// 您可以根据您的项目需求进行修改
|
|
7
7
|
baseURL: "",
|
|
8
8
|
timeout: 1e4
|
|
9
9
|
// 请求超时时间
|
|
10
10
|
});
|
|
11
|
-
|
|
11
|
+
m.interceptors.request.use(
|
|
12
12
|
(n) => {
|
|
13
13
|
const D = localStorage.getItem("token");
|
|
14
14
|
return D && (n.headers.Authorization = "Bearer " + D), n;
|
|
15
15
|
},
|
|
16
16
|
(n) => (console.log(n), Promise.reject(n))
|
|
17
17
|
);
|
|
18
|
-
|
|
18
|
+
m.interceptors.response.use(
|
|
19
19
|
(n) => n.data,
|
|
20
20
|
(n) => (console.log("err" + n), S({
|
|
21
21
|
message: "接口错误，请刷新接口",
|
|
@@ -24,13 +24,13 @@ f.interceptors.response.use(
|
|
|
24
24
|
duration: 5 * 1e3
|
|
25
25
|
}), Promise.reject(n))
|
|
26
26
|
);
|
|
27
|
-
const
|
|
27
|
+
const oe = {
|
|
28
28
|
key: 0,
|
|
29
29
|
class: "flex flex-wrap items-center justify-between gap-4 mb-6"
|
|
30
|
-
},
|
|
30
|
+
}, re = { class: "flex items-center gap-x-2" }, ae = { class: "flex items-center gap-x-3 action-buttons flex-shrink-0" }, le = {
|
|
31
31
|
key: 0,
|
|
32
32
|
class: "flex items-center gap-x-2"
|
|
33
|
-
},
|
|
33
|
+
}, ue = /* @__PURE__ */ H({
|
|
34
34
|
__name: "CrudTable",
|
|
35
35
|
props: {
|
|
36
36
|
/**
|
|
@@ -86,134 +86,134 @@ const Z = {
|
|
|
86
86
|
dialogFormRules: { type: Object, default: () => ({}) }
|
|
87
87
|
},
|
|
88
88
|
emits: ["open-dialog", "submit", "delete"],
|
|
89
|
-
setup(n, { expose: D, emit:
|
|
90
|
-
const v =
|
|
91
|
-
|
|
92
|
-
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) => {
|
|
93
93
|
try {
|
|
94
|
-
let
|
|
95
|
-
if (t.onBeforeSubmit && (
|
|
96
|
-
if (!
|
|
97
|
-
await
|
|
94
|
+
let r = { ...o };
|
|
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("新增成功");
|
|
98
98
|
} else {
|
|
99
|
-
if (!
|
|
100
|
-
await
|
|
99
|
+
if (!y(t.apiUrlUpdate, "apiUrlUpdate")) return;
|
|
100
|
+
await m.put(t.apiUrlUpdate, r), S.success("更新成功");
|
|
101
101
|
}
|
|
102
|
-
return t.onAfterSubmit && t.onAfterSubmit(e,
|
|
103
|
-
} catch (
|
|
104
|
-
return console.log("Submit error:",
|
|
102
|
+
return t.onAfterSubmit && t.onAfterSubmit(e, r), v("submit", { mode: e, data: r }), a.visible && (a.visible = !1), h(), Promise.resolve();
|
|
103
|
+
} catch (r) {
|
|
104
|
+
return console.log("Submit error:", r), Promise.reject(r);
|
|
105
105
|
} finally {
|
|
106
|
-
|
|
106
|
+
a.submitting = !1;
|
|
107
107
|
}
|
|
108
|
-
},
|
|
109
|
-
|
|
110
|
-
if (
|
|
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
111
|
const e = [...t.dialogFormConfig.filter((o) => o.prop !== "id")];
|
|
112
112
|
return e.some((o) => o.prop === "id") || e.unshift({ type: "input-disabled", prop: "id", label: "用户ID" }), e;
|
|
113
113
|
});
|
|
114
|
-
const
|
|
115
|
-
if (
|
|
114
|
+
const h = async () => {
|
|
115
|
+
if (y(t.apiUrlQuery, "apiUrlQuery")) {
|
|
116
116
|
C.value = !0;
|
|
117
117
|
try {
|
|
118
|
-
let e = { ...
|
|
118
|
+
let e = { ...p };
|
|
119
119
|
t.onBeforeQuery && (e = await t.onBeforeQuery(e));
|
|
120
|
-
const o = await
|
|
120
|
+
const o = await m.get(t.apiUrlQuery, { params: e });
|
|
121
121
|
if (o && Array.isArray(o.data) && typeof o.total == "number") {
|
|
122
|
-
let
|
|
123
|
-
t.onAfterQuery && (
|
|
122
|
+
let r = o.data;
|
|
123
|
+
t.onAfterQuery && (r = await t.onAfterQuery(r)), B.value = r, N.value = o.total;
|
|
124
124
|
} else
|
|
125
|
-
console.warn("API response is not in the expected { data: [], total: 0 } format."), B.value = [],
|
|
125
|
+
console.warn("API response is not in the expected { data: [], total: 0 } format."), B.value = [], N.value = 0;
|
|
126
126
|
} catch (e) {
|
|
127
127
|
console.error("Fetch data failed:", e);
|
|
128
128
|
} finally {
|
|
129
129
|
C.value = !1;
|
|
130
130
|
}
|
|
131
131
|
}
|
|
132
|
-
},
|
|
133
|
-
|
|
134
|
-
},
|
|
135
|
-
const { pageNum: e, pageSize: o, ...
|
|
136
|
-
Object.keys(
|
|
137
|
-
|
|
138
|
-
}), Object.assign(
|
|
139
|
-
},
|
|
140
|
-
|
|
141
|
-
},
|
|
142
|
-
let
|
|
143
|
-
if (e === "add" ?
|
|
144
|
-
const
|
|
145
|
-
|
|
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);
|
|
146
146
|
}
|
|
147
|
-
if (
|
|
148
|
-
if (!
|
|
149
|
-
|
|
147
|
+
if (a.mode = e, a.visible = !0, e === "edit") {
|
|
148
|
+
if (!y(t.apiUrlDetail, "apiUrlDetail")) return;
|
|
149
|
+
a.loading = !0;
|
|
150
150
|
try {
|
|
151
|
-
const
|
|
152
|
-
|
|
151
|
+
const d = await m.get(t.apiUrlDetail, { params: { id: r.id } });
|
|
152
|
+
a.data = d.data;
|
|
153
153
|
} finally {
|
|
154
|
-
|
|
154
|
+
a.loading = !1, t.onAfterOpenDialog && t.onAfterOpenDialog(e, a.data), v("open-dialog", { mode: e, data: a.data });
|
|
155
155
|
}
|
|
156
156
|
} else
|
|
157
|
-
|
|
158
|
-
},
|
|
159
|
-
if (
|
|
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"))
|
|
160
160
|
try {
|
|
161
161
|
if (t.onBeforeDelete && await t.onBeforeDelete(e) === !1)
|
|
162
162
|
return;
|
|
163
163
|
const o = e.join(",");
|
|
164
|
-
await
|
|
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();
|
|
165
165
|
} catch (o) {
|
|
166
166
|
console.error("Delete failed", o);
|
|
167
167
|
}
|
|
168
168
|
};
|
|
169
|
-
return
|
|
170
|
-
refresh:
|
|
169
|
+
return G(h), D({
|
|
170
|
+
refresh: h,
|
|
171
171
|
// 刷新表格
|
|
172
|
-
search:
|
|
172
|
+
search: F,
|
|
173
173
|
// 按当前条件搜索
|
|
174
|
-
handleDelete:
|
|
174
|
+
handleDelete: q,
|
|
175
175
|
// 手动触发删除
|
|
176
|
-
openDialog:
|
|
176
|
+
openDialog: x,
|
|
177
177
|
// 手动打开弹窗
|
|
178
|
-
submit:
|
|
178
|
+
submit: I
|
|
179
179
|
// 手动提交
|
|
180
180
|
}), (e, o) => {
|
|
181
|
-
const
|
|
182
|
-
return
|
|
183
|
-
class:
|
|
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)
|
|
184
184
|
}, [
|
|
185
|
-
|
|
186
|
-
t.showSearchSection ? (
|
|
187
|
-
|
|
188
|
-
model:
|
|
185
|
+
s(e.$slots, "header"),
|
|
186
|
+
t.showSearchSection ? (i(), A("div", oe, [
|
|
187
|
+
w(R, {
|
|
188
|
+
model: p,
|
|
189
189
|
class: "query-form flex flex-nowrap items-center gap-x-4",
|
|
190
190
|
style: { "overflow-x": "auto", "padding-bottom": "8px" }
|
|
191
191
|
}, {
|
|
192
|
-
default:
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
default:
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
192
|
+
default: u(() => [
|
|
193
|
+
s(e.$slots, "query-conditions", { searchForm: p }),
|
|
194
|
+
w(d, { class: "!mr-0 flex-shrink-0" }, {
|
|
195
|
+
default: u(() => [
|
|
196
|
+
z("div", re, [
|
|
197
|
+
s(e.$slots, "query-left"),
|
|
198
|
+
w(r, {
|
|
199
199
|
type: "primary",
|
|
200
|
-
onClick:
|
|
200
|
+
onClick: F,
|
|
201
201
|
loading: C.value
|
|
202
202
|
}, {
|
|
203
|
-
default:
|
|
204
|
-
|
|
203
|
+
default: u(() => o[1] || (o[1] = [
|
|
204
|
+
b("搜索")
|
|
205
205
|
])),
|
|
206
206
|
_: 1,
|
|
207
207
|
__: [1]
|
|
208
208
|
}, 8, ["loading"]),
|
|
209
|
-
|
|
210
|
-
default:
|
|
211
|
-
|
|
209
|
+
w(r, { onClick: V }, {
|
|
210
|
+
default: u(() => o[2] || (o[2] = [
|
|
211
|
+
b("清空")
|
|
212
212
|
])),
|
|
213
213
|
_: 1,
|
|
214
214
|
__: [2]
|
|
215
215
|
}),
|
|
216
|
-
|
|
216
|
+
s(e.$slots, "query-right")
|
|
217
217
|
])
|
|
218
218
|
]),
|
|
219
219
|
_: 3
|
|
@@ -221,95 +221,125 @@ const Z = {
|
|
|
221
221
|
]),
|
|
222
222
|
_: 3
|
|
223
223
|
}, 8, ["model"]),
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
t.showNewBtn ? (
|
|
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
228
|
key: 0,
|
|
229
229
|
type: "success",
|
|
230
|
-
onClick: o[0] || (o[0] = (
|
|
230
|
+
onClick: o[0] || (o[0] = (l) => x("add"))
|
|
231
231
|
}, {
|
|
232
|
-
default:
|
|
233
|
-
|
|
232
|
+
default: u(() => o[3] || (o[3] = [
|
|
233
|
+
b("新增")
|
|
234
234
|
])),
|
|
235
235
|
_: 1,
|
|
236
236
|
__: [3]
|
|
237
|
-
})) :
|
|
237
|
+
})) : f("", !0)
|
|
238
238
|
]),
|
|
239
|
-
|
|
239
|
+
s(e.$slots, "action-right")
|
|
240
240
|
])
|
|
241
|
-
])) :
|
|
242
|
-
|
|
241
|
+
])) : f("", !0),
|
|
242
|
+
X((i(), c(W, Q({
|
|
243
243
|
data: B.value,
|
|
244
|
-
onSelectionChange:
|
|
245
|
-
}, e.$attrs, { style: { width: "100%" } }), {
|
|
246
|
-
default:
|
|
247
|
-
t.
|
|
244
|
+
onSelectionChange: L
|
|
245
|
+
}, e.$attrs, { style: { width: "100%", "margin-bottom": "1.5rem" } }), {
|
|
246
|
+
default: u(() => [
|
|
247
|
+
t.showSelectionColumn ? (i(), c(_, {
|
|
248
248
|
key: 0,
|
|
249
|
+
type: "selection",
|
|
250
|
+
width: "55",
|
|
251
|
+
fixed: ""
|
|
252
|
+
})) : f("", !0),
|
|
253
|
+
t.showIndexColumn ? (i(), c(_, {
|
|
254
|
+
key: 1,
|
|
255
|
+
type: "index",
|
|
256
|
+
label: "序号",
|
|
257
|
+
width: "70",
|
|
258
|
+
fixed: ""
|
|
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 ? {
|
|
268
|
+
name: "default",
|
|
269
|
+
fn: u(($) => [
|
|
270
|
+
s(e.$slots, l.slot, {
|
|
271
|
+
row: $.row
|
|
272
|
+
})
|
|
273
|
+
]),
|
|
274
|
+
key: "0"
|
|
275
|
+
} : void 0
|
|
276
|
+
]), 1040, ["prop", "label", "width", "sortable"]))), 128)),
|
|
277
|
+
t.showActionsColumn ? (i(), c(_, {
|
|
278
|
+
key: 2,
|
|
249
279
|
label: "操作",
|
|
250
280
|
width: n.actionsColumnWidth
|
|
251
281
|
}, {
|
|
252
|
-
default:
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
row:
|
|
282
|
+
default: u((l) => [
|
|
283
|
+
l.row ? (i(), A("div", le, [
|
|
284
|
+
s(e.$slots, "actions", {
|
|
285
|
+
row: l.row
|
|
256
286
|
}, () => [
|
|
257
|
-
|
|
258
|
-
row:
|
|
287
|
+
s(e.$slots, "action-before-edit", {
|
|
288
|
+
row: l.row
|
|
259
289
|
}),
|
|
260
|
-
t.showEditButton ? (
|
|
290
|
+
t.showEditButton ? (i(), c(r, {
|
|
261
291
|
key: 0,
|
|
262
292
|
size: "small",
|
|
263
293
|
type: "primary",
|
|
264
294
|
link: "",
|
|
265
|
-
onClick: (
|
|
295
|
+
onClick: ($) => x("edit", l.row)
|
|
266
296
|
}, {
|
|
267
|
-
default:
|
|
268
|
-
|
|
297
|
+
default: u(() => o[4] || (o[4] = [
|
|
298
|
+
b("编辑 ")
|
|
269
299
|
])),
|
|
270
300
|
_: 2,
|
|
271
301
|
__: [4]
|
|
272
|
-
}, 1032, ["onClick"])) :
|
|
273
|
-
t.showDeleteButton ? (
|
|
302
|
+
}, 1032, ["onClick"])) : f("", !0),
|
|
303
|
+
t.showDeleteButton ? (i(), c(T, {
|
|
274
304
|
key: 1,
|
|
275
305
|
title: "确定要删除这条数据吗?",
|
|
276
|
-
onConfirm: (
|
|
306
|
+
onConfirm: ($) => q([l.row.id]),
|
|
277
307
|
"confirm-button-text": "确定",
|
|
278
308
|
"cancel-button-text": "取消",
|
|
279
309
|
width: "200"
|
|
280
310
|
}, {
|
|
281
|
-
reference:
|
|
282
|
-
|
|
311
|
+
reference: u(() => [
|
|
312
|
+
w(r, {
|
|
283
313
|
size: "small",
|
|
284
314
|
type: "danger",
|
|
285
315
|
link: ""
|
|
286
316
|
}, {
|
|
287
|
-
default:
|
|
288
|
-
|
|
317
|
+
default: u(() => o[5] || (o[5] = [
|
|
318
|
+
b("删除")
|
|
289
319
|
])),
|
|
290
320
|
_: 1,
|
|
291
321
|
__: [5]
|
|
292
322
|
})
|
|
293
323
|
]),
|
|
294
324
|
_: 2
|
|
295
|
-
}, 1032, ["onConfirm"])) :
|
|
296
|
-
|
|
297
|
-
row:
|
|
325
|
+
}, 1032, ["onConfirm"])) : f("", !0),
|
|
326
|
+
s(e.$slots, "action-after-delete", {
|
|
327
|
+
row: l.row
|
|
298
328
|
})
|
|
299
329
|
])
|
|
300
|
-
])) :
|
|
330
|
+
])) : f("", !0)
|
|
301
331
|
]),
|
|
302
332
|
_: 3
|
|
303
|
-
}, 8, ["width"])) :
|
|
333
|
+
}, 8, ["width"])) : f("", !0)
|
|
304
334
|
]),
|
|
305
335
|
_: 3
|
|
306
336
|
}, 16, ["data"])), [
|
|
307
|
-
[
|
|
337
|
+
[M, C.value]
|
|
308
338
|
])
|
|
309
339
|
], 2);
|
|
310
340
|
};
|
|
311
341
|
}
|
|
312
342
|
});
|
|
313
343
|
export {
|
|
314
|
-
|
|
344
|
+
ue as CrudTable
|
|
315
345
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
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"})});
|