slw 1.0.0-beta.5.1 → 1.0.0-beta.8

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,1099 +0,0 @@
1
- import { pushScopeId as P, popScopeId as V, createElementVNode as h, resolveComponent as g, openBlock as o, createElementBlock as p, createBlock as f, normalizeClass as T, normalizeStyle as A, withModifiers as R, withCtx as r, renderSlot as q, createCommentVNode as _, Fragment as B, createVNode as s, mergeProps as k, renderList as j, toDisplayString as E, normalizeProps as K, guardReactiveProps as Q, resolveDynamicComponent as Z, defineAsyncComponent as $, computed as F, unref as D, withDirectives as ee, vShow as te } from "vue";
2
- import { _ as x, d as S, a as L, u as N } from "./index-5d505e74.js";
3
- import "vue-router";
4
- const I = {
5
- computed: {},
6
- methods: {
7
- // 选中组件
8
- selectField(e) {
9
- e.itemRender && e.itemRender.children || e.buttonRender && e.buttonRender.name == "toolBarTitle" || this.designer.setSelected(e);
10
- },
11
- // 选中容器
12
- selectWidget(e) {
13
- this.designer.setSelected(e);
14
- },
15
- // 选中父组件
16
- selectParentWidget() {
17
- this.designer.setSelected(this.designer.selectedWidgetParent);
18
- },
19
- // 删除
20
- removeFieldWidget() {
21
- const e = this.designer.selectedWidget.id;
22
- this.$nextTick(() => {
23
- let t = this.parentWidget.findIndex((i) => i.id === e);
24
- t >= 0 && (this.parentWidget.splice(t, 1), this.designer.selectedConfigType ? delete this.designer.designerConfig[this.rootWidgetId][this.designer.selectedConfigType][e] : (delete this.designer.designerConfig[e], delete this.designer.designerConfig[e + "LAYOUT"]), this.designer.clearSelected());
25
- });
26
- },
27
- // 匹配新加组件类型,生成对应类型配置
28
- switchFieldType(e, t) {
29
- switch (e.type) {
30
- case "ElSelect":
31
- t.itemRender.attrs.style = "min-width: 120px;max-width:100%", t.itemRender.props.filterable = !0, e.options.multiple && (t.itemRender.props.multiple = !0, t.itemRender.props["collapse-tags"] = !0, t.itemRender.props["collapse-tags-tooltip"] = !0), e.options && e.options.optionItems && (t.itemRender.options = e.options.optionItems.map((i) => Object.assign(
32
- {
33
- value: i.value,
34
- label: i.label
35
- },
36
- i
37
- )));
38
- break;
39
- case "ElSwitch":
40
- break;
41
- case "ElInputNumber":
42
- t.itemRender.props.type = "number";
43
- break;
44
- case "ElDatePicker":
45
- t.itemRender.attrs.style = "width: 100%;", e.options.type == "date" ? t.itemRender.props = {
46
- ...t.itemRender.props,
47
- type: "date",
48
- valueFormat: "YYYY-MM-DD"
49
- } : t.itemRender.props = {
50
- ...t.itemRender.props,
51
- type: "daterange",
52
- valueFormat: "YYYY-MM-DD",
53
- isRange: !0
54
- };
55
- break;
56
- case "ElTimePicker":
57
- t.itemRender.attrs.style = "width: 100%;", e.options.type == "time" ? t.itemRender.props = {
58
- ...t.itemRender.props,
59
- type: "datetime",
60
- valueFormat: "YYYY-MM-DD HH:mm:ss"
61
- } : t.itemRender.props = {
62
- ...t.itemRender.props,
63
- type: "datetimerange",
64
- valueFormat: "YYYY-MM-DD HH:mm:ss",
65
- isRange: !0
66
- };
67
- break;
68
- case "ElInput":
69
- t.itemRender.props.type = e.options.type;
70
- break;
71
- }
72
- return t;
73
- },
74
- // 表格工具栏新增组件事件
75
- onDragToolbarAdd(e) {
76
- let t = e.item._underlying_vm_;
77
- if (t.type != "ElButton" || t.code) {
78
- for (let n in this.designer.designerConfig)
79
- this.designer.designerConfig[n].btnConfig && this.designer.designerConfig[n].btnConfig[t.id] && n != this.widget.id && (this.designer.designerConfig[this.widget.id].btnConfig[t.id] = deepClone(
80
- this.designer.designerConfig[n].btnConfig[t.id]
81
- ), delete this.designer.designerConfig[n].btnConfig[t.id]);
82
- this.designer.emitHistoryChange();
83
- return;
84
- }
85
- let i;
86
- this.toolbarConfig.forEach((n, d) => {
87
- n.id == t.id && (i = d);
88
- });
89
- let l = {
90
- type: "NEW",
91
- code: "NEW",
92
- name: "新增",
93
- iconComponent: "Add",
94
- viewType: "primary",
95
- visible: !0,
96
- icon: null,
97
- id: t.id,
98
- _button_id: null,
99
- _region_id: null,
100
- clickFunction: null,
101
- displayLogic: null,
102
- showInGrid: null,
103
- requestPath: null,
104
- windowId: null,
105
- css: "",
106
- openWidth: null,
107
- openHeight: null,
108
- loading: !1,
109
- btnLoad: {},
110
- // 在表格中的按钮是否显示加载状态的双向绑定对象
111
- btnShowInGrid: {},
112
- // 在表格中的按钮是否显示的双向绑定对象
113
- btnShow: {},
114
- // 按钮在工具栏的显示状态
115
- isNew: !0
116
- // 所有新加组件都新增一个isNew字段,用来与原有组件作区分,判断是否为新增组件
117
- };
118
- this.toolbarConfig.splice(i, 1, l), this.designer.newWidgetInitConfig(this.widget.gridData.id, "btnConfig", l), this.designer.emitHistoryChange();
119
- },
120
- // 新增表单项配置
121
- addFormItemConfig(e) {
122
- return {
123
- field: e.field,
124
- // 新增组件时如果未进行配置选择引用字段
125
- folding: !1,
126
- // 默认收起
127
- id: e.id,
128
- itemRender: {
129
- name: e.type,
130
- props: {
131
- placeholder: "请输入",
132
- size: "default",
133
- clearable: !0,
134
- filterable: !0
135
- },
136
- defaultValue: "",
137
- events: {
138
- "on-change": function() {
139
- },
140
- change: function() {
141
- }
142
- },
143
- attrs: {}
144
- },
145
- name: e.name,
146
- title: e.name,
147
- visible: !0,
148
- displayForm: !0,
149
- // 新增到表单的基础组件都添加 displayForm 属性 用来与表格里的表单组件作区分
150
- isNew: !0
151
- // 所有新加组件都新增一个isNew字段,用来与原有组件作区分,判断是否为新增组件
152
- };
153
- }
154
- }
155
- };
156
- const ie = {
157
- name: "container-wrapper",
158
- mixins: [I],
159
- components: {},
160
- props: {
161
- widget: Object,
162
- designer: Object,
163
- parentWidget: Array,
164
- // 删除函数调用
165
- height: [String, Number]
166
- },
167
- computed: {
168
- // 点击选中组件
169
- selected() {
170
- return (e) => e.mode != null && e.gridData ? e.id + "LAYOUT" === this.designer.selectedId : e.id === this.designer.selectedId;
171
- },
172
- // 如果是表格或表单,则隐藏删除与拖拽按钮 只允许通过其外层的布局组件删除和拖拽
173
- isHide() {
174
- return (e, t) => {
175
- if (t == "back" && e.mode == null)
176
- return !0;
177
- if (t == "delete" || t == "drag")
178
- return e.mode != null;
179
- };
180
- }
181
- }
182
- }, M = (e) => (P("data-v-a5ec9eee"), e = e(), V(), e), ne = { class: "container-wrapper" }, de = {
183
- key: 0,
184
- class: "container-action"
185
- }, re = /* @__PURE__ */ M(() => /* @__PURE__ */ h("i", { class: "iconfont icon-back" }, null, -1)), oe = [
186
- re
187
- ], se = /* @__PURE__ */ M(() => /* @__PURE__ */ h("i", { class: "iconfont icon-delete" }, null, -1)), ae = [
188
- se
189
- ], le = {
190
- key: 1,
191
- class: "drag-handler"
192
- }, ge = /* @__PURE__ */ M(() => /* @__PURE__ */ h("i", { title: "拖拽手柄" }, [
193
- /* @__PURE__ */ h("i", { class: "iconfont icon-drag" })
194
- ], -1)), ce = [
195
- ge
196
- ];
197
- function ue(e, t, i, l, n, d) {
198
- const c = g("el-row");
199
- return o(), p("div", ne, [
200
- (o(), f(c, {
201
- key: i.widget.id,
202
- class: T(["vxe-grid-container", [d.selected(i.widget) ? "selected" : ""]]),
203
- style: A({ height: i.height + "px", overflow: "auto" }),
204
- onClick: t[0] || (t[0] = R((v) => e.selectWidget(i.widget), ["stop"]))
205
- }, {
206
- default: r(() => [
207
- q(e.$slots, "default", {}, void 0, !0)
208
- ]),
209
- _: 3
210
- }, 8, ["class", "style"])),
211
- d.selected(i.widget) ? (o(), p("div", de, [
212
- d.isHide(i.widget, "back") ? (o(), p("i", {
213
- key: 0,
214
- title: "选中布局",
215
- onClick: t[1] || (t[1] = R((v) => e.selectParentWidget(i.widget), ["stop"]))
216
- }, oe)) : _("", !0),
217
- d.isHide(i.widget, "delete") ? (o(), p("i", {
218
- key: 1,
219
- title: "移除组件",
220
- onClick: t[2] || (t[2] = R((...v) => e.removeFieldWidget && e.removeFieldWidget(...v), ["stop"]))
221
- }, ae)) : _("", !0)
222
- ])) : _("", !0),
223
- d.selected(i.widget) && d.isHide(i.widget, "drag") ? (o(), p("div", le, ce)) : _("", !0)
224
- ]);
225
- }
226
- const O = /* @__PURE__ */ x(ie, [["render", ue], ["__scopeId", "data-v-a5ec9eee"]]);
227
- const pe = {
228
- name: "static-content-wrapper",
229
- mixins: [I],
230
- components: {},
231
- props: {
232
- field: Object,
233
- designer: Object,
234
- parentWidget: Array,
235
- // 删除函数调用
236
- rootWidgetId: String,
237
- // 删除函数调用
238
- width: {
239
- type: String
240
- }
241
- },
242
- computed: {
243
- selected() {
244
- return !!this.designer && this.field.id === this.designer.selectedId;
245
- },
246
- isHide() {
247
- return () => this.field.displayForm == null ? !this.field.visible : !this.field.displayForm;
248
- }
249
- },
250
- watch: {
251
- field: {
252
- deep: !0,
253
- immediate: !0,
254
- handler(e) {
255
- }
256
- }
257
- },
258
- methods: {}
259
- }, H = (e) => (P("data-v-6617c757"), e = e(), V(), e), me = {
260
- key: 0,
261
- class: "field-action"
262
- }, fe = /* @__PURE__ */ H(() => /* @__PURE__ */ h("i", { class: "iconfont icon-delete" }, null, -1)), he = [
263
- fe
264
- ], _e = {
265
- key: 1,
266
- class: "drag-handler background-opacity"
267
- }, we = /* @__PURE__ */ H(() => /* @__PURE__ */ h("i", { title: "拖拽手柄" }, [
268
- /* @__PURE__ */ h("i", { class: "iconfont icon-drag" })
269
- ], -1)), ve = {
270
- key: 0,
271
- title: "隐藏"
272
- }, ye = /* @__PURE__ */ H(() => /* @__PURE__ */ h("i", { class: "iconfont icon-hide" }, null, -1)), Ce = [
273
- ye
274
- ];
275
- function be(e, t, i, l, n, d) {
276
- return o(), p("div", {
277
- class: "field-wrapper",
278
- style: A({ "flex-basis": i.width })
279
- }, [
280
- h("div", {
281
- class: T(["static-content-item", [d.selected ? "selected" : ""]]),
282
- onClick: t[0] || (t[0] = R((c) => e.selectField(i.field), ["stop"]))
283
- }, [
284
- q(e.$slots, "default", {}, void 0, !0)
285
- ], 2),
286
- this.designer ? (o(), p(B, { key: 0 }, [
287
- i.designer.selectedId === i.field.id ? (o(), p("div", me, [
288
- h("i", {
289
- title: "移除组件",
290
- onClick: t[1] || (t[1] = R((...c) => e.removeFieldWidget && e.removeFieldWidget(...c), ["stop"]))
291
- }, he)
292
- ])) : _("", !0),
293
- i.designer.selectedId === i.field.id ? (o(), p("div", _e, [
294
- we,
295
- d.isHide() ? (o(), p("i", ve, Ce)) : _("", !0)
296
- ])) : _("", !0)
297
- ], 64)) : _("", !0)
298
- ], 4);
299
- }
300
- const U = /* @__PURE__ */ x(pe, [["render", be], ["__scopeId", "data-v-6617c757"]]);
301
- const We = {
302
- name: "grid-widget",
303
- componentName: "ContainerWidget",
304
- mixins: [I],
305
- inject: [],
306
- components: {
307
- ContainerWrapper: O,
308
- StaticContentWrapper: U,
309
- draggable: S
310
- },
311
- props: {
312
- widget: Object,
313
- designer: Object,
314
- parentWidget: Array
315
- // 删除组件时调用
316
- },
317
- data() {
318
- return {
319
- formBtnConfig: [],
320
- toolbarConfig: [],
321
- showButtons: []
322
- };
323
- },
324
- computed: {
325
- // toolbar buttons按钮配置
326
- btnRender() {
327
- return (e) => ({
328
- name: "ElButton",
329
- props: {
330
- autoInsertSpace: !0,
331
- // 自动在两个中文字符之间插入空格
332
- content: e.name,
333
- icon: e.iconComponent,
334
- nativeType: "submit",
335
- size: "default",
336
- type: e.viewType
337
- }
338
- });
339
- },
340
- // 按钮绑定属性
341
- operationButton(e) {
342
- return (t) => ({
343
- size: "small",
344
- type: t.viewType,
345
- // style: { ...btnItem.css, marginLeft: "0px" }, // 如果btnItem.css有数据,则会报错,原因未知
346
- icon: null,
347
- // 使用自定义iconComponent,该属性就必须为null
348
- text: !0,
349
- iconComponent: t.iconComponent,
350
- round: t.shape === "round",
351
- circle: t.shape === "circle",
352
- loading: t.loading,
353
- shape: t.shape
354
- });
355
- },
356
- computeGridHeight() {
357
- let e = window.innerHeight - 40 - 50 - 42 - 20 - 64;
358
- return e < this.widget.height ? e : this.widget.height;
359
- }
360
- },
361
- watch: {
362
- "widget.gridData.toolbarConfig": {
363
- handler(e) {
364
- if (e.buttons.forEach((t) => {
365
- t.hasOwnProperty("buttonRender") || (t.buttonRender = {
366
- name: "ElButton",
367
- props: {
368
- size: "default",
369
- type: t.viewType,
370
- style: t.css,
371
- icon: t.icon,
372
- iconComponent: t.iconComponent,
373
- round: t.shape === "round",
374
- circle: t.shape === "circle",
375
- shape: t.shape
376
- },
377
- events: {}
378
- // click: toolBarButtonClick
379
- });
380
- }), this.showButtons = e.buttons.filter((t) => t.showInGrid == "Y" || t.showInGrid === !0), this.showButtons.length > 0) {
381
- this.widget.gridData.data = [];
382
- let t = {};
383
- this.widget.gridData.columns.forEach((i) => {
384
- i.type !== "seq" && i.type !== "checkbox" && i.fixed !== "left" && (t[i.field] = void 0);
385
- }), this.widget.gridData.data.push(t);
386
- }
387
- this.toolbarConfig = e.buttons;
388
- },
389
- deep: !0,
390
- immediate: !0
391
- },
392
- "widget.gridData.formConfig.items": {
393
- handler(e) {
394
- this.formBtnConfig = e;
395
- },
396
- deep: !0
397
- },
398
- "widget.gridData.columns": {
399
- handler(e) {
400
- this.$refs.curRegion && this.$refs.curRegion.loadColumn(e);
401
- },
402
- deep: !0
403
- },
404
- // 监听表格表单的数组长度,来 删除 / 新增 默认的查询与重置按钮
405
- formBtnConfig: {
406
- handler(e) {
407
- let t = this.widget.gridData.formConfig.items.findIndex((i) => i.align == "right");
408
- t < 0 && e.length > 0 ? this.widget.gridData.formConfig.items.push({
409
- align: "right",
410
- collapseNode: !1,
411
- itemRender: {
412
- name: "ElButtons",
413
- children: [
414
- {
415
- props: {
416
- "native-type": "submit",
417
- type: "primary",
418
- content: "查询",
419
- iconComponent: "Search",
420
- size: "default",
421
- autoInsertSpace: !0
422
- }
423
- },
424
- {
425
- props: {
426
- "native-type": "reset",
427
- content: "重置",
428
- iconComponent: "Refresh",
429
- size: "default",
430
- autoInsertSpace: !0
431
- }
432
- }
433
- ]
434
- },
435
- visible: !0
436
- }) : t >= 0 && e.length == 1 && this.widget.gridData.formConfig.items.splice(t, 1);
437
- },
438
- deep: !0
439
- }
440
- },
441
- created() {
442
- this.formBtnConfig = this.widget.gridData.formConfig.items, this.toolbarConfig = this.widget.gridData.toolbarConfig.buttons;
443
- },
444
- mounted() {
445
- },
446
- methods: {
447
- // 自定义控制那些元素可以拖拽或不允许拖拽
448
- checkFieldMove(e) {
449
- return this.designer.checkFieldMove(e);
450
- },
451
- // 表单新增组件事件
452
- onDragFormAdd(e) {
453
- let t = e.item._underlying_vm_;
454
- if (t.itemRender) {
455
- for (let n in this.designer.designerConfig)
456
- this.designer.designerConfig[n].queryConfig && this.designer.designerConfig[n].queryConfig[t.id] && n != this.widget.id && (this.designer.designerConfig[this.widget.id].queryConfig[t.id] = L(this.designer.designerConfig[n].queryConfig[t.id]), delete this.designer.designerConfig[n].queryConfig[t.id]);
457
- this.designer.emitHistoryChange();
458
- return;
459
- }
460
- let i;
461
- this.formBtnConfig.forEach((n, d) => {
462
- n.id == t.id && (i = d);
463
- });
464
- let l = this.addFormItemConfig(t);
465
- l = this.switchFieldType(t, l), this.formBtnConfig.splice(i, 1, l), this.designer.newWidgetInitConfig(this.widget.gridData.id, "queryConfig", l), this.designer.emitHistoryChange();
466
- }
467
- }
468
- };
469
- const De = {
470
- key: 0,
471
- class: "toolBar-title"
472
- }, ke = {
473
- key: 0,
474
- style: { verticalAlign: "middle" }
475
- };
476
- function Re(e, t, i, l, n, d) {
477
- const c = g("vxe-form-item"), v = g("vxe-form"), C = g("StaticContentWrapper"), b = g("draggable"), y = g("el-icon"), u = g("el-tooltip"), a = g("el-button"), m = g("vxe-grid"), G = g("el-col"), z = g("container-wrapper");
478
- return o(), f(z, {
479
- designer: i.designer,
480
- widget: i.widget,
481
- parentWidget: i.parentWidget
482
- }, {
483
- default: r(() => [
484
- s(G, { class: "grid-cell" }, {
485
- default: r(() => [
486
- s(z, {
487
- designer: i.designer,
488
- widget: i.widget.gridData
489
- }, {
490
- default: r(() => [
491
- s(G, { class: "grid-cell" }, {
492
- default: r(() => [
493
- s(m, k({
494
- ref: "curRegion",
495
- "keep-source": ""
496
- }, i.widget.gridData, { height: d.computeGridHeight }), {
497
- form: r(() => [
498
- s(b, k({
499
- list: n.formBtnConfig,
500
- "item-key": "id"
501
- }, {
502
- group: "dragGroup",
503
- ghostClass: "ghost",
504
- animation: 300
505
- }, {
506
- "component-data": {
507
- name: "fade",
508
- class: "transition-group field formBtnConfig"
509
- },
510
- handle: ".drag-handler",
511
- tag: "div",
512
- onAdd: d.onDragFormAdd,
513
- move: d.checkFieldMove
514
- }), {
515
- item: r(({ element: w }) => [
516
- s(C, {
517
- designer: i.designer,
518
- field: w,
519
- parentWidget: n.formBtnConfig,
520
- rootWidgetId: i.widget.id
521
- }, {
522
- default: r(() => [
523
- s(v, null, {
524
- default: r(() => [
525
- w.itemRender && w.itemRender.name == "ElButtons" ? (o(!0), p(B, { key: 0 }, j(w.itemRender.children, (Y) => (o(), f(c, {
526
- "item-render": {
527
- name: "ElButton",
528
- props: Y.props
529
- },
530
- visible: w.visible
531
- }, null, 8, ["item-render", "visible"]))), 256)) : (o(), f(c, {
532
- key: 1,
533
- field: w.field,
534
- title: w.title,
535
- "title-overflow": "tooltip",
536
- "item-render": w.itemRender
537
- }, null, 8, ["field", "title", "item-render"]))
538
- ]),
539
- _: 2
540
- }, 1024)
541
- ]),
542
- _: 2
543
- }, 1032, ["designer", "field", "parentWidget", "rootWidgetId"])
544
- ]),
545
- _: 1
546
- }, 16, ["list", "onAdd", "move"])
547
- ]),
548
- toolbar_buttons: r(() => [
549
- s(b, k({
550
- list: n.toolbarConfig,
551
- "item-key": "id"
552
- }, {
553
- group: "dragGroup",
554
- ghostClass: "ghost",
555
- animation: 300
556
- }, {
557
- "component-data": {
558
- name: "fade",
559
- class: "transition-group field toolbar"
560
- },
561
- handle: ".drag-handler",
562
- tag: "div",
563
- onAdd: e.onDragToolbarAdd,
564
- move: d.checkFieldMove
565
- }), {
566
- item: r(({ element: w }) => [
567
- s(C, {
568
- designer: i.designer,
569
- field: w,
570
- parentWidget: n.toolbarConfig,
571
- rootWidgetId: i.widget.id
572
- }, {
573
- default: r(() => [
574
- w.buttonRender && w.buttonRender.name == "toolBarTitle" ? (o(), p("span", De, E(w.name), 1)) : (o(), f(v, { key: 1 }, {
575
- default: r(() => [
576
- s(c, {
577
- "item-render": d.btnRender(w)
578
- }, null, 8, ["item-render"])
579
- ]),
580
- _: 2
581
- }, 1024))
582
- ]),
583
- _: 2
584
- }, 1032, ["designer", "field", "parentWidget", "rootWidgetId"])
585
- ]),
586
- _: 1
587
- }, 16, ["list", "onAdd", "move"])
588
- ]),
589
- operation: r(({ row: w, rowIndex: Y }) => [
590
- (o(!0), p(B, null, j(n.showButtons, (W) => (o(), f(a, k({
591
- key: W._button_id
592
- }, d.operationButton(W)), {
593
- icon: r(() => [
594
- s(u, {
595
- title: W.name,
596
- content: W.name,
597
- placement: "top"
598
- }, {
599
- default: r(() => [
600
- s(y, K(Q({ size: 15, style: { verticalAlign: "middle" } })), {
601
- default: r(() => [
602
- (o(), f(Z(W.iconComponent)))
603
- ]),
604
- _: 2
605
- }, 1040)
606
- ]),
607
- _: 2
608
- }, 1032, ["title", "content"])
609
- ]),
610
- default: r(() => [
611
- !W.iconComponent || typeof W.iconComponent > "u" ? (o(), p("span", ke, E(W.name), 1)) : _("", !0)
612
- ]),
613
- _: 2
614
- }, 1040))), 128))
615
- ]),
616
- _: 1
617
- }, 16, ["height"])
618
- ]),
619
- _: 1
620
- })
621
- ]),
622
- _: 1
623
- }, 8, ["designer", "widget"])
624
- ]),
625
- _: 1
626
- })
627
- ]),
628
- _: 1
629
- }, 8, ["designer", "widget", "parentWidget"]);
630
- }
631
- const X = /* @__PURE__ */ x(We, [["render", Re], ["__scopeId", "data-v-ee994d8d"]]);
632
- const xe = {
633
- name: "form-widget",
634
- componentName: "FromWidget",
635
- mixins: [I],
636
- inject: [],
637
- components: {
638
- ContainerWrapper: O,
639
- StaticContentWrapper: U,
640
- draggable: S
641
- },
642
- props: {
643
- widget: Object,
644
- designer: Object,
645
- parentWidget: Array
646
- // 删除组件时调用
647
- },
648
- data() {
649
- return {
650
- formColumns: [],
651
- editRules: []
652
- };
653
- },
654
- computed: {
655
- // toolbar buttons按钮配置
656
- btnRender() {
657
- return (e) => ({
658
- name: "ElButton",
659
- props: {
660
- autoInsertSpace: !0,
661
- // 自动在两个中文字符之间插入空格
662
- content: e.name,
663
- icon: e.iconComponent,
664
- nativeType: "submit",
665
- size: "default",
666
- type: e.viewType
667
- }
668
- });
669
- },
670
- computeSpan() {
671
- return (e) => e.dataType === "EDITOR" || e.dataType === "TEXT" ? 24 : e.fwidth ? Number(e.fwidth) > 24 ? 24 : Number(e.fwidth) : 12;
672
- },
673
- toolbarConfig() {
674
- return this.widget.gridData.type == "FORM" ? this.widget.gridData.toolbarConfig.buttons.filter(
675
- (e) => e.type != "DELETE" && e.type != "EDIT"
676
- ) : this.widget.gridData.toolbarConfig.buttons;
677
- }
678
- },
679
- watch: {
680
- "widget.gridData.columns": {
681
- handler(e) {
682
- this.formColumns = e;
683
- },
684
- deep: !0
685
- },
686
- "widget.gridData.toolbarConfig": {
687
- handler(e) {
688
- e.buttons.forEach((t) => {
689
- t.hasOwnProperty("buttonRender") || (t.buttonRender = {
690
- name: "ElButton",
691
- props: {
692
- size: "default",
693
- type: t.viewType,
694
- style: t.css,
695
- icon: t.icon,
696
- iconComponent: t.iconComponent,
697
- round: t.shape === "round",
698
- circle: t.shape === "circle",
699
- shape: t.shape
700
- },
701
- events: {}
702
- // click: toolBarButtonClick
703
- });
704
- });
705
- },
706
- deep: !0,
707
- immediate: !0
708
- }
709
- },
710
- created() {
711
- this.formColumns = this.widget.gridData.columns, this.editRules = this.widget.gridData.editRules, this.widget.gridData.toolbarConfig.buttons.forEach((e) => {
712
- e.hasOwnProperty("buttonRender") || (e.buttonRender = {
713
- name: "ElButton",
714
- props: {
715
- size: "default",
716
- type: e.viewType,
717
- style: e.css,
718
- icon: e.icon,
719
- iconComponent: e.iconComponent,
720
- round: e.shape === "round",
721
- circle: e.shape === "circle",
722
- shape: e.shape
723
- },
724
- events: {}
725
- // click: toolBarButtonClick
726
- });
727
- });
728
- },
729
- mounted() {
730
- },
731
- methods: {
732
- // 自定义控制那些元素可以拖拽或不允许拖拽
733
- checkFieldMove(e) {
734
- return this.designer.checkFieldMove(e);
735
- },
736
- // 表单新增组件事件
737
- onDragFormAdd(e) {
738
- let t = e.item._underlying_vm_;
739
- if (t.itemRender) {
740
- for (let n in this.designer.designerConfig)
741
- this.designer.designerConfig[n].fieldConfig && this.designer.designerConfig[n].fieldConfig[t.id] && n != this.widget.id && (this.designer.designerConfig[this.widget.id].fieldConfig[t.id] = L(
742
- this.designer.designerConfig[n].fieldConfig[t.id]
743
- ), delete this.designer.designerConfig[n].fieldConfig[t.id]);
744
- this.designer.emitHistoryChange();
745
- return;
746
- }
747
- let i;
748
- this.formColumns.forEach((n, d) => {
749
- n.id == t.id && (i = d);
750
- });
751
- let l = this.addFormItemConfig(t);
752
- l = this.switchFieldType(t, l), this.formColumns.splice(i, 1, l), this.designer.newWidgetInitConfig(
753
- this.widget.gridData.id,
754
- "fieldConfig",
755
- l
756
- ), this.designer.emitHistoryChange();
757
- }
758
- }
759
- };
760
- const Ie = { class: "toolBar-title" }, Te = {
761
- key: 1,
762
- class: "no-widget-hint"
763
- };
764
- function Ee(e, t, i, l, n, d) {
765
- const c = g("el-col"), v = g("vxe-form-item"), C = g("vxe-form"), b = g("StaticContentWrapper"), y = g("draggable"), u = g("container-wrapper");
766
- return o(), f(u, {
767
- designer: i.designer,
768
- widget: i.widget,
769
- parentWidget: i.parentWidget
770
- }, {
771
- default: r(() => [
772
- s(c, { class: "grid-cell" }, {
773
- default: r(() => [
774
- s(u, {
775
- designer: i.designer,
776
- widget: i.widget.gridData,
777
- height: i.widget.height
778
- }, {
779
- default: r(() => [
780
- d.toolbarConfig.length > 0 && d.toolbarConfig[0].buttonRender && d.toolbarConfig[0].buttonRender.name == "toolBarTitle" ? (o(), f(c, {
781
- key: 0,
782
- class: "grid-cell"
783
- }, {
784
- default: r(() => [
785
- h("span", Ie, E(d.toolbarConfig[0].name), 1)
786
- ]),
787
- _: 1
788
- })) : _("", !0),
789
- s(c, { class: "grid-cell" }, {
790
- default: r(() => [
791
- s(y, k({
792
- list: n.formColumns,
793
- "item-key": "id"
794
- }, { group: "dragGroup", ghostClass: "ghost", animation: 300 }, {
795
- "component-data": {
796
- name: "fade",
797
- class: "transition-group field formBtnConfig el-row"
798
- },
799
- handle: ".drag-handler",
800
- tag: "div",
801
- onAdd: d.onDragFormAdd,
802
- move: d.checkFieldMove
803
- }), {
804
- item: r(({ element: a }) => [
805
- a.type !== "seq" && a.type !== "checkbox" && a.fixed !== "left" && a.dataType !== "ID" && a.displayForm ? (o(), f(c, {
806
- key: 0,
807
- class: "grid-cell",
808
- span: d.computeSpan(a)
809
- }, {
810
- default: r(() => [
811
- s(b, {
812
- designer: i.designer,
813
- field: a,
814
- parentWidget: n.formColumns,
815
- rootWidgetId: i.widget.id
816
- }, {
817
- default: r(() => [
818
- s(C, {
819
- rules: n.editRules,
820
- "title-align": "right",
821
- "title-width": "120"
822
- }, {
823
- default: r(() => [
824
- s(v, {
825
- field: a.field,
826
- title: a.title,
827
- "title-overflow": "tooltip",
828
- "item-render": a.itemRender,
829
- "title-prefix": a.titlePrefix,
830
- style: A(a.style)
831
- }, null, 8, ["field", "title", "item-render", "title-prefix", "style"])
832
- ]),
833
- _: 2
834
- }, 1032, ["rules"])
835
- ]),
836
- _: 2
837
- }, 1032, ["designer", "field", "parentWidget", "rootWidgetId"])
838
- ]),
839
- _: 2
840
- }, 1032, ["span"])) : _("", !0)
841
- ]),
842
- _: 1
843
- }, 16, ["list", "onAdd", "move"])
844
- ]),
845
- _: 1
846
- }),
847
- s(c, { class: "grid-cell" }, {
848
- default: r(() => [
849
- s(y, k({
850
- list: d.toolbarConfig,
851
- "item-key": "id"
852
- }, { group: "dragGroup", ghostClass: "ghost", animation: 300 }, {
853
- "component-data": {
854
- name: "fade",
855
- class: "transition-group field toolbar"
856
- },
857
- handle: ".drag-handler",
858
- tag: "div",
859
- onAdd: e.onDragToolbarAdd,
860
- move: d.checkFieldMove
861
- }), {
862
- item: r(({ element: a }) => [
863
- !a.buttonRender || a.buttonRender && a.buttonRender.name != "toolBarTitle" ? (o(), f(b, {
864
- key: 0,
865
- designer: i.designer,
866
- field: a,
867
- parentWidget: d.toolbarConfig,
868
- rootWidgetId: i.widget.id
869
- }, {
870
- default: r(() => [
871
- s(C, null, {
872
- default: r(() => [
873
- s(v, {
874
- "item-render": d.btnRender(a),
875
- visible: a.code != null
876
- }, null, 8, ["item-render", "visible"])
877
- ]),
878
- _: 2
879
- }, 1024)
880
- ]),
881
- _: 2
882
- }, 1032, ["designer", "field", "parentWidget", "rootWidgetId"])) : _("", !0)
883
- ]),
884
- _: 1
885
- }, 16, ["list", "onAdd", "move"])
886
- ]),
887
- _: 1
888
- }),
889
- n.formColumns.length === 0 ? (o(), p("div", Te, " 请从左侧列表中选择基础字段, 然后用鼠标拖动组件放置于此处 ")) : _("", !0)
890
- ]),
891
- _: 1
892
- }, 8, ["designer", "widget", "height"])
893
- ]),
894
- _: 1
895
- })
896
- ]),
897
- _: 1
898
- }, 8, ["designer", "widget", "parentWidget"]);
899
- }
900
- const J = /* @__PURE__ */ x(xe, [["render", Ee], ["__scopeId", "data-v-02ba7b3e"]]);
901
- const Ae = {
902
- name: "grid-layout-wrapper",
903
- componentName: "GridLayouWrapper",
904
- mixins: [I],
905
- inject: {},
906
- components: {
907
- ContainerWrapper: O,
908
- VxeGridWidget: X,
909
- VxeFormWidget: J,
910
- draggable: S,
911
- WindowGrid: $(() => Promise.resolve().then(() => Pe))
912
- },
913
- props: {
914
- widget: Object,
915
- designer: Object
916
- },
917
- data() {
918
- return {};
919
- },
920
- computed: {},
921
- watch: {
922
- widget: {
923
- handler(e) {
924
- e.child.length > 0 && e.child.findIndex((i) => i.isActive) < 0 && (e.child[0].isActive = !0);
925
- },
926
- immediate: !0,
927
- deep: !0
928
- }
929
- },
930
- created() {
931
- },
932
- mounted() {
933
- },
934
- methods: {
935
- selectTabpane(e) {
936
- this.widget.child.forEach((t) => {
937
- delete t.isActive, t.id == e && (t.isActive = !0);
938
- });
939
- },
940
- // 在tabs中添加tabpane时触发
941
- onDragAdd(e) {
942
- let t = e.item._underlying_vm_;
943
- this.designer.newWidgetInitConfig(this.widget.id, "layout", t);
944
- },
945
- // 拖拽变换位置时触发的事件
946
- onDragUpdate() {
947
- },
948
- // 自定义控制那些元素可以拖拽或不允许拖拽并控制是否允许停靠
949
- onMove(e) {
950
- return this.designer.checkWidgetMove(e);
951
- }
952
- }
953
- };
954
- const Se = {
955
- key: 0,
956
- class: "no-widget-hint"
957
- }, Be = {
958
- key: 2,
959
- class: "el-tabs el-tabs--tops"
960
- }, Me = { class: "el-tabs__header" }, Oe = { class: "transition-group-el" }, He = ["onClick"], Ge = {
961
- key: 0,
962
- class: "el-tabs__content"
963
- };
964
- function ze(e, t, i, l, n, d) {
965
- const c = g("WindowGrid"), v = g("draggable"), C = g("el-col"), b = g("container-wrapper");
966
- return o(), f(b, {
967
- designer: i.designer,
968
- widget: i.widget
969
- }, {
970
- default: r(() => [
971
- s(C, { class: "grid-cell" }, {
972
- default: r(() => [
973
- i.widget.child.length === 0 && i.widget.gridData == null ? (o(), p("div", Se, "请从左侧列表中选择一个高级组件, 然后用鼠标拖动组件放置于此处")) : _("", !0),
974
- i.widget.mode == "horizontal" || i.widget.mode === "vertical" ? (o(), f(c, {
975
- key: 1,
976
- preViewData: i.widget,
977
- designer: i.designer
978
- }, null, 8, ["preViewData", "designer"])) : (o(), p("div", Be, [
979
- h("div", Me, [
980
- h("div", {
981
- class: T(["el-tabs__nav-wrap", { hideAfter: i.widget.child.length == 0 }])
982
- }, [
983
- s(v, {
984
- list: i.widget.child,
985
- "item-key": "id",
986
- "ghost-class": "ghost",
987
- group: "dragGroup",
988
- animation: "300",
989
- tag: "div",
990
- "component-data": {
991
- name: "fade",
992
- class: "transition-group container tabpane-label"
993
- },
994
- handle: ".drag-handler",
995
- onAdd: d.onDragAdd,
996
- move: d.onMove
997
- }, {
998
- item: r(({ element: y }) => [
999
- h("div", Oe, [
1000
- h("div", {
1001
- class: T(["el-tabs__item", { "is-active": y.isActive }]),
1002
- onClick: R((u) => d.selectTabpane(y.id), ["stop"])
1003
- }, E(y.name), 11, He)
1004
- ])
1005
- ]),
1006
- _: 1
1007
- }, 8, ["list", "onAdd", "move"])
1008
- ], 2)
1009
- ]),
1010
- i.widget.child.length > 0 ? (o(), p("div", Ge, [
1011
- s(c, {
1012
- preViewData: i.widget,
1013
- designer: i.designer
1014
- }, null, 8, ["preViewData", "designer"])
1015
- ])) : _("", !0)
1016
- ]))
1017
- ]),
1018
- _: 1
1019
- })
1020
- ]),
1021
- _: 1
1022
- }, 8, ["designer", "widget"]);
1023
- }
1024
- const Ye = /* @__PURE__ */ x(Ae, [["render", ze], ["__scopeId", "data-v-02273c28"]]);
1025
- const je = { class: "form-widget-list" }, Fe = {
1026
- __name: "index",
1027
- props: {
1028
- designer: Object,
1029
- preViewData: Object
1030
- },
1031
- emits: ["update:designer", "update:preViewData"],
1032
- setup(e, { emit: t }) {
1033
- const i = e;
1034
- let l = N(i, "designer", t), n = N(i, "preViewData", t);
1035
- const d = F(() => {
1036
- let u = "transition-group grid";
1037
- return n.value.mode === "horizontal" && n.value.child.length > 0 && (u += " horizontal"), {
1038
- name: "fade",
1039
- class: u
1040
- };
1041
- }), c = F(() => {
1042
- let u = {};
1043
- return n.value.mode === "horizontal" && n.value.child.length > 0 && (u = { width: parseInt(100 / n.value.child.length) - 0.5 + "%" }), u;
1044
- }), v = (u) => {
1045
- let a = u.item._underlying_vm_;
1046
- l.value.newWidgetInitConfig(n.value.id, "layout", a);
1047
- }, C = (u) => {
1048
- l.value.emitHistoryChange();
1049
- }, b = (u) => l.value.checkWidgetMove(u), y = (u) => n.value.mode == "tab" ? !!u.isActive : !0;
1050
- return (u, a) => (o(), p("div", je, [
1051
- s(D(S), {
1052
- list: D(n).child,
1053
- "item-key": "id",
1054
- "ghost-class": "ghost",
1055
- group: "dragGroup",
1056
- animation: "300",
1057
- tag: "div",
1058
- "component-data": d.value,
1059
- handle: ".drag-handler",
1060
- onAdd: v,
1061
- onUpdate: C,
1062
- move: b
1063
- }, {
1064
- item: r(({ element: m }) => [
1065
- ee(h("div", {
1066
- class: "transition-group-el",
1067
- style: A(c.value)
1068
- }, [
1069
- m.gridData && (m.gridData.type === "GRID" || m.gridData.type === "TREE" || m.gridData.type === "TREE_STRUCTURE" || m.gridData.type === "EDIT_GRID") ? (o(), f(X, {
1070
- key: 0,
1071
- designer: D(l),
1072
- widget: m,
1073
- parentWidget: D(n).child
1074
- }, null, 8, ["designer", "widget", "parentWidget"])) : m.gridData && m.gridData.type === "FORM" ? (o(), f(J, {
1075
- key: 1,
1076
- designer: D(l),
1077
- widget: m,
1078
- parentWidget: D(n).child
1079
- }, null, 8, ["designer", "widget", "parentWidget"])) : m.mode == "horizontal" || m.mode === "vertical" || m.mode == "tab" ? (o(), f(Ye, {
1080
- key: 2,
1081
- designer: D(l),
1082
- widget: m,
1083
- parentWidget: D(n).child
1084
- }, null, 8, ["designer", "widget", "parentWidget"])) : _("", !0)
1085
- ], 4), [
1086
- [te, y(m)]
1087
- ])
1088
- ]),
1089
- _: 1
1090
- }, 8, ["list", "component-data"])
1091
- ]));
1092
- }
1093
- }, Ne = /* @__PURE__ */ x(Fe, [["__scopeId", "data-v-5cc15e60"]]), Pe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
1094
- __proto__: null,
1095
- default: Ne
1096
- }, Symbol.toStringTag, { value: "Module" }));
1097
- export {
1098
- Ne as default
1099
- };