@tmagic/table 1.2.0-beta.2 → 1.2.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,6 @@
1
- import { defineComponent, resolveComponent, openBlock, createBlock, withCtx, createElementBlock, Fragment, renderList, withDirectives, vShow, createVNode, createTextVNode, createCommentVNode, toDisplayString, createElementVNode, resolveDirective } from 'vue';
1
+ import { defineComponent, openBlock, createBlock, unref, withCtx, createElementBlock, Fragment, renderList, withDirectives, vShow, createVNode, createTextVNode, createCommentVNode, toDisplayString, resolveComponent, createElementVNode, ref, computed, resolveDirective } from 'vue';
2
2
  import { cloneDeep } from 'lodash-es';
3
- import { ElMessage, ElMessageBox } from 'element-plus';
3
+ import { TMagicTableColumn, TMagicButton, tMagicMessage, tMagicMessageBox, TMagicPopover, TMagicForm, TMagicTag, TMagicTable } from '@tmagic/design';
4
4
  import { MForm } from '@tmagic/form';
5
5
  import { datetimeFormatter } from '@tmagic/utils';
6
6
 
@@ -9,26 +9,10 @@ const _hoisted_2$1 = /* @__PURE__ */ createTextVNode("\u53D6\u6D88");
9
9
  const _sfc_main$4 = /* @__PURE__ */ defineComponent({
10
10
  __name: "ActionsColumn",
11
11
  props: {
12
- columns: {
13
- type: Array,
14
- require: true,
15
- default: () => []
16
- },
17
- config: {
18
- type: Object,
19
- require: true,
20
- default: () => {
21
- }
22
- },
23
- rowkeyName: {
24
- type: String,
25
- default: "c_id"
26
- },
27
- editState: {
28
- type: Object,
29
- default: () => {
30
- }
31
- }
12
+ columns: { default: () => [] },
13
+ config: { default: () => ({}) },
14
+ rowkeyName: { default: "c_id" },
15
+ editState: { default: () => [] }
32
16
  },
33
17
  emits: ["afterAction"],
34
18
  setup(__props, { emit }) {
@@ -40,12 +24,12 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
40
24
  return true;
41
25
  };
42
26
  const success = (msg, action, row) => {
43
- ElMessage.success(msg);
27
+ tMagicMessage.success(msg);
44
28
  action.after?.(row);
45
29
  };
46
- const error = (msg) => ElMessage.error(msg);
30
+ const error = (msg) => tMagicMessage.error(msg);
47
31
  const deleteAction = async (action, row) => {
48
- await ElMessageBox.confirm(`\u786E\u8BA4\u5220\u9664${row[action.name || "c_name"]}(${row[props.rowkeyName]})?`, "\u63D0\u793A", {
32
+ await tMagicMessageBox.confirm(`\u786E\u8BA4\u5220\u9664${row[action.name || "c_name"]}(${row[props.rowkeyName]})?`, "\u63D0\u793A", {
49
33
  confirmButtonText: "\u786E\u5B9A",
50
34
  cancelButtonText: "\u53D6\u6D88",
51
35
  type: "warning"
@@ -58,7 +42,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
58
42
  }
59
43
  };
60
44
  const copyHandler = async (action, row) => {
61
- await ElMessageBox.confirm(`\u786E\u5B9A\u590D\u5236${row[action.name || "c_name"]}(${row.c_id})?`, "\u63D0\u793A", {
45
+ await tMagicMessageBox.confirm(`\u786E\u5B9A\u590D\u5236${row[action.name || "c_name"]}(${row.c_id})?`, "\u63D0\u793A", {
62
46
  confirmButtonText: "\u786E\u5B9A",
63
47
  cancelButtonText: "\u53D6\u6D88",
64
48
  type: "warning"
@@ -101,16 +85,11 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
101
85
  });
102
86
  if (res) {
103
87
  if (res.ret === 0) {
104
- ElMessage.success("\u4FDD\u5B58\u6210\u529F");
88
+ tMagicMessage.success("\u4FDD\u5B58\u6210\u529F");
105
89
  props.editState[index] = void 0;
106
90
  emit("afterAction");
107
91
  } else {
108
- ElMessage.error({
109
- duration: 1e4,
110
- showClose: true,
111
- dangerouslyUseHTMLString: true,
112
- message: res.msg || "\u4FDD\u5B58\u5931\u8D25"
113
- });
92
+ tMagicMessage.error(res.msg || "\u4FDD\u5B58\u5931\u8D25");
114
93
  }
115
94
  } else {
116
95
  props.editState[index] = void 0;
@@ -118,16 +97,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
118
97
  }
119
98
  };
120
99
  return (_ctx, _cache) => {
121
- const _component_el_button = resolveComponent("el-button");
122
- const _component_el_table_column = resolveComponent("el-table-column");
123
- return openBlock(), createBlock(_component_el_table_column, {
100
+ return openBlock(), createBlock(unref(TMagicTableColumn), {
124
101
  label: __props.config.label,
125
102
  width: __props.config.width,
126
103
  fixed: __props.config.fixed
127
104
  }, {
128
105
  default: withCtx((scope) => [
129
106
  (openBlock(true), createElementBlock(Fragment, null, renderList(__props.config.actions, (action, actionIndex) => {
130
- return withDirectives((openBlock(), createBlock(_component_el_button, {
107
+ return withDirectives((openBlock(), createBlock(unref(TMagicButton), {
131
108
  innerHTML: action.text,
132
109
  class: "action-btn",
133
110
  text: "",
@@ -139,7 +116,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
139
116
  [vShow, display(action.display, scope.row) && !__props.editState[scope.$index]]
140
117
  ]);
141
118
  }), 128)),
142
- withDirectives(createVNode(_component_el_button, {
119
+ withDirectives(createVNode(unref(TMagicButton), {
143
120
  class: "action-btn",
144
121
  text: "",
145
122
  type: "primary",
@@ -153,7 +130,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
153
130
  }, 1032, ["onClick"]), [
154
131
  [vShow, __props.editState[scope.$index]]
155
132
  ]),
156
- withDirectives(createVNode(_component_el_button, {
133
+ withDirectives(createVNode(unref(TMagicButton), {
157
134
  class: "action-btn",
158
135
  text: "",
159
136
  type: "primary",
@@ -174,49 +151,36 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
174
151
  }
175
152
  });
176
153
 
177
- const _sfc_main$3 = defineComponent({
178
- components: { MForm },
154
+ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
155
+ __name: "ExpandColumn",
179
156
  props: {
180
- config: {
181
- type: Object,
182
- default: () => ({}),
183
- required: true
184
- }
157
+ config: { default: () => ({}) }
158
+ },
159
+ setup(__props) {
160
+ return (_ctx, _cache) => {
161
+ return openBlock(), createBlock(unref(TMagicTableColumn), { type: "expand" }, {
162
+ default: withCtx((scope) => [
163
+ __props.config.table ? (openBlock(), createBlock(_sfc_main, {
164
+ key: 0,
165
+ "show-header": false,
166
+ columns: __props.config.table,
167
+ data: __props.config.prop && scope.row[__props.config.prop] || []
168
+ }, null, 8, ["columns", "data"])) : createCommentVNode("", true),
169
+ __props.config.form ? (openBlock(), createBlock(unref(MForm), {
170
+ key: 1,
171
+ config: __props.config.form,
172
+ "init-values": __props.config.values || __props.config.prop && scope.row[__props.config.prop] || {}
173
+ }, null, 8, ["config", "init-values"])) : createCommentVNode("", true)
174
+ ]),
175
+ _: 1
176
+ });
177
+ };
185
178
  }
186
179
  });
187
180
 
188
- const _export_sfc = (sfc, props) => {
189
- const target = sfc.__vccOpts || sfc;
190
- for (const [key, val] of props) {
191
- target[key] = val;
192
- }
193
- return target;
194
- };
195
-
196
- function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
197
- const _component_m_table = resolveComponent("m-table");
198
- const _component_m_form = resolveComponent("m-form");
199
- const _component_el_table_column = resolveComponent("el-table-column");
200
- return openBlock(), createBlock(_component_el_table_column, { type: "expand" }, {
201
- default: withCtx((scope) => [
202
- _ctx.config.table ? (openBlock(), createBlock(_component_m_table, {
203
- key: 0,
204
- "show-header": false,
205
- columns: _ctx.config.table,
206
- data: scope.row[_ctx.config.prop]
207
- }, null, 8, ["columns", "data"])) : createCommentVNode("", true),
208
- _ctx.config.form ? (openBlock(), createBlock(_component_m_form, {
209
- key: 1,
210
- config: _ctx.config.form,
211
- "init-values": _ctx.config.values || scope.row[_ctx.config.prop] || {}
212
- }, null, 8, ["config", "init-values"])) : createCommentVNode("", true)
213
- ]),
214
- _: 1
215
- });
216
- }
217
- const ExpandColumn = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
218
-
219
181
  const formatter = (item, row) => {
182
+ if (!item.prop)
183
+ return "";
220
184
  if (item.formatter) {
221
185
  if (item.formatter === "datetime") {
222
186
  item.formatter = (value) => datetimeFormatter(value);
@@ -231,80 +195,49 @@ const formatter = (item, row) => {
231
195
  }
232
196
  };
233
197
 
234
- const _sfc_main$2 = defineComponent({
198
+ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
199
+ __name: "PopoverColumn",
235
200
  props: {
236
- config: {
237
- type: Object,
238
- default: () => ({}),
239
- required: true
240
- }
201
+ config: { default: () => ({}) }
241
202
  },
242
- setup() {
243
- return {
244
- formatter
245
- };
246
- }
247
- });
248
-
249
- function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
250
- const _component_m_table = resolveComponent("m-table");
251
- const _component_el_button = resolveComponent("el-button");
252
- const _component_el_popover = resolveComponent("el-popover");
253
- const _component_el_table_column = resolveComponent("el-table-column");
254
- return openBlock(), createBlock(_component_el_table_column, {
255
- label: _ctx.config.label,
256
- width: _ctx.config.width,
257
- fixed: _ctx.config.fixed
258
- }, {
259
- default: withCtx((scope) => [
260
- createVNode(_component_el_popover, {
261
- placement: _ctx.config.popover.placement,
262
- width: _ctx.config.popover.width,
263
- trigger: _ctx.config.popover.trigger
203
+ setup(__props) {
204
+ return (_ctx, _cache) => {
205
+ return openBlock(), createBlock(unref(TMagicTableColumn), {
206
+ label: __props.config.label,
207
+ width: __props.config.width,
208
+ fixed: __props.config.fixed
264
209
  }, {
265
- reference: withCtx(() => [
266
- createVNode(_component_el_button, {
267
- text: "",
268
- type: "primary"
210
+ default: withCtx((scope) => [
211
+ __props.config.popover ? (openBlock(), createBlock(unref(TMagicPopover), {
212
+ key: 0,
213
+ placement: __props.config.popover.placement,
214
+ width: __props.config.popover.width,
215
+ trigger: __props.config.popover.trigger
269
216
  }, {
217
+ reference: withCtx(() => [
218
+ createVNode(unref(TMagicButton), {
219
+ text: "",
220
+ type: "primary"
221
+ }, {
222
+ default: withCtx(() => [
223
+ createTextVNode(toDisplayString(__props.config.text || unref(formatter)(__props.config, scope.row)), 1)
224
+ ]),
225
+ _: 2
226
+ }, 1024)
227
+ ]),
270
228
  default: withCtx(() => [
271
- createTextVNode(toDisplayString(_ctx.config.text || _ctx.formatter(_ctx.config, scope.row)), 1)
229
+ __props.config.popover.tableEmbed ? (openBlock(), createBlock(_sfc_main, {
230
+ key: 0,
231
+ "show-header": __props.config.showHeader,
232
+ columns: __props.config.table,
233
+ data: __props.config.prop && scope.row[__props.config.prop] || []
234
+ }, null, 8, ["show-header", "columns", "data"])) : createCommentVNode("", true)
272
235
  ]),
273
236
  _: 2
274
- }, 1024)
237
+ }, 1032, ["placement", "width", "trigger"])) : createCommentVNode("", true)
275
238
  ]),
276
- default: withCtx(() => [
277
- _ctx.config.popover.tableEmbed ? (openBlock(), createBlock(_component_m_table, {
278
- key: 0,
279
- "show-header": _ctx.config.showHeader,
280
- columns: _ctx.config.table,
281
- data: scope.row[_ctx.config.prop]
282
- }, null, 8, ["show-header", "columns", "data"])) : createCommentVNode("", true)
283
- ]),
284
- _: 2
285
- }, 1032, ["placement", "width", "trigger"])
286
- ]),
287
- _: 1
288
- }, 8, ["label", "width", "fixed"]);
289
- }
290
- const PopoverColumn = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
291
-
292
- const _sfc_main$1 = defineComponent({
293
- props: {
294
- config: {
295
- type: Object,
296
- default: () => ({}),
297
- required: true
298
- },
299
- editState: {
300
- type: Object,
301
- default: () => {
302
- }
303
- }
304
- },
305
- setup() {
306
- return {
307
- formatter
239
+ _: 1
240
+ }, 8, ["label", "width", "fixed"]);
308
241
  };
309
242
  }
310
243
  });
@@ -314,276 +247,238 @@ const _hoisted_2 = ["src"];
314
247
  const _hoisted_3 = ["href"];
315
248
  const _hoisted_4 = /* @__PURE__ */ createTextVNode("\u6269\u5C55\u914D\u7F6E");
316
249
  const _hoisted_5 = ["innerHTML"];
317
- function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
318
- const _component_m_form_container = resolveComponent("m-form-container");
319
- const _component_el_form = resolveComponent("el-form");
320
- const _component_el_button = resolveComponent("el-button");
321
- const _component_el_tooltip = resolveComponent("el-tooltip");
322
- const _component_el_tag = resolveComponent("el-tag");
323
- const _component_el_table_column = resolveComponent("el-table-column");
324
- return openBlock(), createBlock(_component_el_table_column, {
325
- "show-overflow-tooltip": "",
326
- label: _ctx.config.label,
327
- width: _ctx.config.width,
328
- fixed: _ctx.config.fixed,
329
- sortable: _ctx.config.sortable,
330
- prop: _ctx.config.prop
331
- }, {
332
- default: withCtx((scope) => [
333
- _ctx.config.type && _ctx.editState[scope.$index] ? (openBlock(), createBlock(_component_el_form, {
334
- key: 0,
335
- "label-width": "0",
336
- model: _ctx.editState[scope.$index]
337
- }, {
338
- default: withCtx(() => [
339
- createVNode(_component_m_form_container, {
340
- prop: _ctx.config.prop,
341
- rules: _ctx.config.rules,
342
- config: _ctx.config,
343
- name: _ctx.config.prop,
344
- model: _ctx.editState[scope.$index]
345
- }, null, 8, ["prop", "rules", "config", "name", "model"])
346
- ]),
347
- _: 2
348
- }, 1032, ["model"])) : _ctx.config.action === "actionLink" ? (openBlock(), createBlock(_component_el_button, {
349
- key: 1,
350
- text: "",
351
- type: "primary",
352
- onClick: ($event) => _ctx.config.handler(scope.row)
353
- }, {
354
- default: withCtx(() => [
355
- createTextVNode(toDisplayString(_ctx.formatter(_ctx.config, scope.row)), 1)
356
- ]),
357
- _: 2
358
- }, 1032, ["onClick"])) : _ctx.config.action === "img" ? (openBlock(), createElementBlock("a", {
359
- key: 2,
360
- target: "_blank",
361
- href: scope.row[_ctx.config.prop]
362
- }, [
363
- createElementVNode("img", {
364
- src: scope.row[_ctx.config.prop],
365
- height: "50"
366
- }, null, 8, _hoisted_2)
367
- ], 8, _hoisted_1)) : _ctx.config.action === "link" ? (openBlock(), createElementBlock("a", {
368
- key: 3,
369
- target: "_blank",
370
- href: scope.row[_ctx.config.prop],
371
- class: "keep-all"
372
- }, toDisplayString(scope.row[_ctx.config.prop]), 9, _hoisted_3)) : _ctx.config.action === "tip" ? (openBlock(), createBlock(_component_el_tooltip, {
373
- key: 4,
374
- placement: "left"
250
+ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
251
+ __name: "TextColumn",
252
+ props: {
253
+ config: { default: () => ({}) },
254
+ editState: { default: () => ({}) }
255
+ },
256
+ setup(__props) {
257
+ return (_ctx, _cache) => {
258
+ const _component_m_form_container = resolveComponent("m-form-container");
259
+ const _component_el_tooltip = resolveComponent("el-tooltip");
260
+ return openBlock(), createBlock(unref(TMagicTableColumn), {
261
+ "show-overflow-tooltip": "",
262
+ label: __props.config.label,
263
+ width: __props.config.width,
264
+ fixed: __props.config.fixed,
265
+ sortable: __props.config.sortable,
266
+ prop: __props.config.prop
375
267
  }, {
376
- content: withCtx(() => [
377
- createElementVNode("div", null, toDisplayString(_ctx.formatter(_ctx.config, scope.row)), 1)
378
- ]),
379
- default: withCtx(() => [
380
- createVNode(_component_el_button, {
268
+ default: withCtx((scope) => [
269
+ __props.config.type && __props.editState[scope.$index] ? (openBlock(), createBlock(unref(TMagicForm), {
270
+ key: 0,
271
+ "label-width": "0",
272
+ model: __props.editState[scope.$index]
273
+ }, {
274
+ default: withCtx(() => [
275
+ createVNode(_component_m_form_container, {
276
+ prop: __props.config.prop,
277
+ rules: __props.config.rules,
278
+ config: __props.config,
279
+ name: __props.config.prop,
280
+ model: __props.editState[scope.$index]
281
+ }, null, 8, ["prop", "rules", "config", "name", "model"])
282
+ ]),
283
+ _: 2
284
+ }, 1032, ["model"])) : __props.config.action === "actionLink" && __props.config.prop ? (openBlock(), createBlock(unref(TMagicButton), {
285
+ key: 1,
381
286
  text: "",
382
- type: "primary"
287
+ type: "primary",
288
+ onClick: ($event) => __props.config.handler?.(scope.row)
383
289
  }, {
384
290
  default: withCtx(() => [
385
- _hoisted_4
291
+ createTextVNode(toDisplayString(unref(formatter)(__props.config, scope.row)), 1)
386
292
  ]),
387
- _: 1
388
- })
389
- ]),
390
- _: 2
391
- }, 1024)) : _ctx.config.action === "tag" ? (openBlock(), createBlock(_component_el_tag, {
392
- key: 5,
393
- type: typeof _ctx.config.type === "function" ? _ctx.config.type(scope.row[_ctx.config.prop], scope.row) : _ctx.config.type,
394
- "close-transition": ""
395
- }, {
396
- default: withCtx(() => [
397
- createTextVNode(toDisplayString(_ctx.formatter(_ctx.config, scope.row)), 1)
293
+ _: 2
294
+ }, 1032, ["onClick"])) : __props.config.action === "img" && __props.config.prop ? (openBlock(), createElementBlock("a", {
295
+ key: 2,
296
+ target: "_blank",
297
+ href: scope.row[__props.config.prop]
298
+ }, [
299
+ createElementVNode("img", {
300
+ src: scope.row[__props.config.prop],
301
+ height: "50"
302
+ }, null, 8, _hoisted_2)
303
+ ], 8, _hoisted_1)) : __props.config.action === "link" && __props.config.prop ? (openBlock(), createElementBlock("a", {
304
+ key: 3,
305
+ target: "_blank",
306
+ href: scope.row[__props.config.prop],
307
+ class: "keep-all"
308
+ }, toDisplayString(scope.row[__props.config.prop]), 9, _hoisted_3)) : __props.config.action === "tip" ? (openBlock(), createBlock(_component_el_tooltip, {
309
+ key: 4,
310
+ placement: "left"
311
+ }, {
312
+ content: withCtx(() => [
313
+ createElementVNode("div", null, toDisplayString(unref(formatter)(__props.config, scope.row)), 1)
314
+ ]),
315
+ default: withCtx(() => [
316
+ createVNode(unref(TMagicButton), {
317
+ text: "",
318
+ type: "primary"
319
+ }, {
320
+ default: withCtx(() => [
321
+ _hoisted_4
322
+ ]),
323
+ _: 1
324
+ })
325
+ ]),
326
+ _: 2
327
+ }, 1024)) : __props.config.action === "tag" && __props.config.prop ? (openBlock(), createBlock(unref(TMagicTag), {
328
+ key: 5,
329
+ type: typeof __props.config.type === "function" ? __props.config.type(scope.row[__props.config.prop], scope.row) : __props.config.type,
330
+ "close-transition": ""
331
+ }, {
332
+ default: withCtx(() => [
333
+ createTextVNode(toDisplayString(unref(formatter)(__props.config, scope.row)), 1)
334
+ ]),
335
+ _: 2
336
+ }, 1032, ["type"])) : (openBlock(), createElementBlock("div", {
337
+ key: 6,
338
+ innerHTML: unref(formatter)(__props.config, scope.row)
339
+ }, null, 8, _hoisted_5))
398
340
  ]),
399
- _: 2
400
- }, 1032, ["type"])) : (openBlock(), createElementBlock("div", {
401
- key: 6,
402
- innerHTML: _ctx.formatter(_ctx.config, scope.row)
403
- }, null, 8, _hoisted_5))
404
- ]),
405
- _: 1
406
- }, 8, ["label", "width", "fixed", "sortable", "prop"]);
407
- }
408
- const TextColumn = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
341
+ _: 1
342
+ }, 8, ["label", "width", "fixed", "sortable", "prop"]);
343
+ };
344
+ }
345
+ });
409
346
 
410
- const _sfc_main = defineComponent({
411
- name: "m-table",
412
- components: { ExpandColumn, ActionsColumn: _sfc_main$4, PopoverColumn, TextColumn },
347
+ const _sfc_main = /* @__PURE__ */ defineComponent({
348
+ __name: "Table",
413
349
  props: {
414
- data: {
415
- type: Array,
416
- require: true
417
- },
418
- columns: {
419
- type: Array,
420
- require: true,
421
- default: () => []
422
- },
423
- spanMethod: {
424
- type: Function
425
- },
426
- loading: {
427
- type: Boolean,
428
- default: false
429
- },
430
- bodyHeight: {
431
- type: [String, Number]
432
- },
433
- showHeader: {
434
- type: Boolean,
435
- default: true
436
- },
437
- emptyText: {
438
- type: String
439
- },
440
- defaultExpandAll: {
441
- type: Boolean,
442
- default: false
443
- },
444
- rowkeyName: {
445
- type: String
446
- },
447
- border: {
448
- type: Boolean,
449
- default: false
450
- }
350
+ data: null,
351
+ columns: { default: () => [] },
352
+ spanMethod: null,
353
+ loading: { type: Boolean, default: false },
354
+ bodyHeight: null,
355
+ showHeader: { type: Boolean, default: true },
356
+ emptyText: null,
357
+ defaultExpandAll: { type: Boolean, default: false },
358
+ rowkeyName: null,
359
+ border: { type: Boolean, default: false }
451
360
  },
452
361
  emits: ["sort-change", "afterAction", "select", "select-all", "selection-change"],
453
- data() {
454
- return {
455
- editState: []
456
- };
457
- },
458
- computed: {
459
- tableData() {
460
- if (this.selectionColumn) {
461
- return this.data || [];
462
- }
463
- return cloneDeep(this.data) || [];
464
- },
465
- selectionColumn() {
466
- const column = this.columns.filter((item) => item.selection);
362
+ setup(__props, { expose, emit }) {
363
+ const props = __props;
364
+ const tMagicTable = ref();
365
+ const editState = ref([]);
366
+ const selectionColumn = computed(() => {
367
+ const column = props.columns.filter((item) => item.selection);
467
368
  return column.length ? column[0] : null;
468
- },
469
- hasBorder() {
470
- return typeof this.border !== "undefined" ? this.border : true;
471
- }
472
- },
473
- methods: {
474
- sortChange(data) {
475
- this.$emit("sort-change", data);
476
- },
477
- selectHandler(selection, row) {
478
- const column = this.selectionColumn;
369
+ });
370
+ const tableData = computed(() => {
371
+ if (selectionColumn.value) {
372
+ return props.data || [];
373
+ }
374
+ return cloneDeep(props.data) || [];
375
+ });
376
+ const hasBorder = computed(() => typeof props.border !== "undefined" ? props.border : true);
377
+ const sortChange = (data) => {
378
+ emit("sort-change", data);
379
+ };
380
+ const selectHandler = (selection, row) => {
381
+ const column = selectionColumn.value;
479
382
  if (!column) {
480
383
  return;
481
384
  }
482
385
  if (column.selection === "single") ;
483
- this.$emit("select", selection, row);
484
- },
485
- selectAllHandler(selection) {
486
- this.$emit("select-all", selection);
487
- },
488
- selectionChangeHandler(selection) {
489
- this.$emit("selection-change", selection);
490
- },
491
- toggleRowSelection(row, selected) {
492
- const table = this.$refs.table;
493
- table.toggleRowSelection.bind(table)(row, selected);
494
- },
495
- toggleRowExpansion(row, expanded) {
496
- const table = this.$refs.table;
497
- table.toggleRowExpansion.bind(table)(row, expanded);
498
- },
499
- clearSelection() {
500
- const table = this.$refs.table;
501
- table.clearSelection.bind(table)();
502
- },
503
- objectSpanMethod(data) {
504
- if (typeof this.spanMethod === "function") {
505
- return this.spanMethod(data);
386
+ emit("select", selection, row);
387
+ };
388
+ const selectAllHandler = (selection) => {
389
+ emit("select-all", selection);
390
+ };
391
+ const selectionChangeHandler = (selection) => {
392
+ emit("selection-change", selection);
393
+ };
394
+ const toggleRowSelection = (row, selected) => {
395
+ tMagicTable.value?.toggleRowSelection(row, selected);
396
+ };
397
+ const toggleRowExpansion = (row, expanded) => {
398
+ tMagicTable.value?.toggleRowExpansion(row, expanded);
399
+ };
400
+ const clearSelection = () => {
401
+ tMagicTable.value?.clearSelection();
402
+ };
403
+ const objectSpanMethod = (data) => {
404
+ if (typeof props.spanMethod === "function") {
405
+ return props.spanMethod(data);
506
406
  }
507
407
  return () => ({
508
408
  rowspan: 0,
509
409
  colspan: 0
510
410
  });
511
- }
411
+ };
412
+ expose({
413
+ toggleRowSelection,
414
+ toggleRowExpansion,
415
+ clearSelection
416
+ });
417
+ return (_ctx, _cache) => {
418
+ const _directive_loading = resolveDirective("loading");
419
+ return withDirectives((openBlock(), createBlock(unref(TMagicTable), {
420
+ "tooltip-effect": "dark",
421
+ class: "m-table",
422
+ ref_key: "tMagicTable",
423
+ ref: tMagicTable,
424
+ data: unref(tableData),
425
+ "show-header": __props.showHeader,
426
+ "max-height": __props.bodyHeight,
427
+ "default-expand-all": __props.defaultExpandAll,
428
+ border: unref(hasBorder),
429
+ "row-key": __props.rowkeyName || "c_id",
430
+ "tree-props": { children: "children" },
431
+ "empty-text": __props.emptyText || "\u6682\u65E0\u6570\u636E",
432
+ "span-method": objectSpanMethod,
433
+ onSortChange: sortChange,
434
+ onSelect: selectHandler,
435
+ onSelectAll: selectAllHandler,
436
+ onSelectionChange: selectionChangeHandler
437
+ }, {
438
+ default: withCtx(() => [
439
+ (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (item, columnIndex) => {
440
+ return openBlock(), createElementBlock(Fragment, null, [
441
+ item.type === "expand" ? (openBlock(), createBlock(_sfc_main$3, {
442
+ config: item,
443
+ key: columnIndex
444
+ }, null, 8, ["config"])) : item.selection ? (openBlock(), createBlock(unref(TMagicTableColumn), {
445
+ type: "selection",
446
+ key: columnIndex,
447
+ width: "40",
448
+ selectable: item.selectable
449
+ }, null, 8, ["selectable"])) : item.actions ? (openBlock(), createBlock(_sfc_main$4, {
450
+ columns: __props.columns,
451
+ config: item,
452
+ "rowkey-name": __props.rowkeyName,
453
+ "edit-state": editState.value,
454
+ key: columnIndex,
455
+ onAfterAction: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("afterAction"))
456
+ }, null, 8, ["columns", "config", "rowkey-name", "edit-state"])) : item.type === "popover" ? (openBlock(), createBlock(_sfc_main$2, {
457
+ key: columnIndex,
458
+ config: item
459
+ }, null, 8, ["config"])) : (openBlock(), createBlock(_sfc_main$1, {
460
+ key: columnIndex,
461
+ config: item,
462
+ "edit-state": editState.value
463
+ }, null, 8, ["config", "edit-state"]))
464
+ ], 64);
465
+ }), 256))
466
+ ]),
467
+ _: 1
468
+ }, 8, ["data", "show-header", "max-height", "default-expand-all", "border", "row-key", "empty-text"])), [
469
+ [_directive_loading, __props.loading]
470
+ ]);
471
+ };
512
472
  }
513
473
  });
514
474
 
515
475
  const Table_vue_vue_type_style_index_0_lang = '';
516
476
 
517
- function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
518
- const _component_expand_column = resolveComponent("expand-column");
519
- const _component_el_table_column = resolveComponent("el-table-column");
520
- const _component_actions_column = resolveComponent("actions-column");
521
- const _component_popover_column = resolveComponent("popover-column");
522
- const _component_text_column = resolveComponent("text-column");
523
- const _component_el_table = resolveComponent("el-table");
524
- const _directive_loading = resolveDirective("loading");
525
- return withDirectives((openBlock(), createBlock(_component_el_table, {
526
- "tooltip-effect": "dark",
527
- class: "m-table",
528
- ref: "table",
529
- data: _ctx.tableData,
530
- "show-header": _ctx.showHeader,
531
- "max-height": _ctx.bodyHeight,
532
- "default-expand-all": _ctx.defaultExpandAll,
533
- border: _ctx.hasBorder,
534
- "row-key": _ctx.rowkeyName || "c_id",
535
- "tree-props": { children: "children" },
536
- "empty-text": _ctx.emptyText || "\u6682\u65E0\u6570\u636E",
537
- "span-method": _ctx.objectSpanMethod,
538
- onSortChange: _ctx.sortChange,
539
- onSelect: _ctx.selectHandler,
540
- onSelectAll: _ctx.selectAllHandler,
541
- onSelectionChange: _ctx.selectionChangeHandler
542
- }, {
543
- default: withCtx(() => [
544
- (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, (item, columnIndex) => {
545
- return openBlock(), createElementBlock(Fragment, null, [
546
- item.type === "expand" ? (openBlock(), createBlock(_component_expand_column, {
547
- config: item,
548
- key: columnIndex
549
- }, null, 8, ["config"])) : item.selection ? (openBlock(), createBlock(_component_el_table_column, {
550
- type: "selection",
551
- key: columnIndex,
552
- width: "40",
553
- selectable: item.selectable
554
- }, null, 8, ["selectable"])) : item.actions ? (openBlock(), createBlock(_component_actions_column, {
555
- columns: _ctx.columns,
556
- config: item,
557
- "rowkey-name": _ctx.rowkeyName,
558
- "edit-state": _ctx.editState,
559
- key: columnIndex,
560
- onAfterAction: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("afterAction"))
561
- }, null, 8, ["columns", "config", "rowkey-name", "edit-state"])) : item.type === "popover" ? (openBlock(), createBlock(_component_popover_column, {
562
- key: columnIndex,
563
- config: item
564
- }, null, 8, ["config"])) : (openBlock(), createBlock(_component_text_column, {
565
- key: columnIndex,
566
- config: item,
567
- "edit-state": _ctx.editState
568
- }, null, 8, ["config", "edit-state"]))
569
- ], 64);
570
- }), 256))
571
- ]),
572
- _: 1
573
- }, 8, ["data", "show-header", "max-height", "default-expand-all", "border", "row-key", "empty-text", "span-method", "onSortChange", "onSelect", "onSelectAll", "onSelectionChange"])), [
574
- [_directive_loading, _ctx.loading]
575
- ]);
576
- }
577
- const Table = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
578
-
579
- const components = [Table];
580
477
  const index = {
581
478
  install(app) {
582
- components.forEach((component) => {
583
- app.component(component.name, component);
584
- });
479
+ app.component("m-table", _sfc_main);
585
480
  }
586
481
  };
587
482
 
588
- export { Table as MagicTable, index as default };
483
+ export { _sfc_main as MagicTable, index as default };
589
484
  //# sourceMappingURL=tmagic-table.mjs.map