lw-cdp-ui 1.2.8 → 1.2.10
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/lwFormJson/JsonItem.vue +9 -7
- package/dist/components/lwFormJson/StatsConfig.vue +8 -3
- package/dist/components/lwFormJson/TreeItem.vue +149 -0
- package/dist/components/lwFormJson/index.vue +5 -5
- package/dist/components/lwFormMini/FormItem.vue +1 -1
- package/dist/lw-cdp-ui.esm.js +3956 -3805
- package/dist/lw-cdp-ui.umd.js +11 -11
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -10,18 +10,19 @@
|
|
|
10
10
|
<el-col :span="['list'].includes(item.component) ? 24 : item.span || 24"
|
|
11
11
|
:class="{ borderItem: hideBorder, cur: hideBorder && curIndex == (item.name || item?.options?.items[0]?.name) }"
|
|
12
12
|
v-if="!hideHandle(item)">
|
|
13
|
-
<!--
|
|
13
|
+
<!-- 组合 -->
|
|
14
14
|
<template v-if="['object'].includes(item.component)">
|
|
15
15
|
<el-form-item :label="item.label"
|
|
16
16
|
@click.capture="changeClick(item)">
|
|
17
17
|
<JsonItem :formItems="item.value"
|
|
18
18
|
:form="form[item.name]"
|
|
19
19
|
class="object-item"
|
|
20
|
+
:custom="custom"
|
|
20
21
|
:hideBorder="hideBorder"
|
|
21
22
|
@curClick="changeClick">
|
|
22
|
-
<template v-for="
|
|
23
|
-
v-slot:[
|
|
24
|
-
<slot :name="
|
|
23
|
+
<template v-for="c in custom"
|
|
24
|
+
v-slot:[c.component]="{ itemCur, formCur }">
|
|
25
|
+
<slot :name="c.component"
|
|
25
26
|
:itemCur="itemCur"
|
|
26
27
|
:formCur="formCur"></slot>
|
|
27
28
|
</template>
|
|
@@ -48,12 +49,13 @@
|
|
|
48
49
|
:class="{borderItem: hideBorder}">
|
|
49
50
|
<JsonItem v-if="form[item.name]"
|
|
50
51
|
:formItems="x"
|
|
52
|
+
:custom="custom"
|
|
51
53
|
:form="form[item.name][xIndex]"
|
|
52
54
|
:hideBorder="hideBorder"
|
|
53
55
|
@curClick="changeClick">
|
|
54
|
-
<template v-for="
|
|
55
|
-
v-slot:[
|
|
56
|
-
<slot :name="
|
|
56
|
+
<template v-for="c in custom"
|
|
57
|
+
v-slot:[c.component]="{ itemCur, formCur }">
|
|
58
|
+
<slot :name="c.component"
|
|
57
59
|
:itemCur="itemCur"
|
|
58
60
|
:formCur="formCur"></slot>
|
|
59
61
|
</template>
|
|
@@ -365,14 +365,19 @@
|
|
|
365
365
|
</el-select>
|
|
366
366
|
</el-form-item>
|
|
367
367
|
</div>
|
|
368
|
-
|
|
368
|
+
<div class="form-title">数据层级</div>
|
|
369
|
+
<TreeItem :formItems="config.formItems" />
|
|
369
370
|
</template>
|
|
370
371
|
</el-form>
|
|
371
372
|
</template>
|
|
372
373
|
|
|
373
374
|
<script>
|
|
375
|
+
import TreeItem from './TreeItem.vue'
|
|
374
376
|
export default {
|
|
375
377
|
name: 'StatsConfig',
|
|
378
|
+
components: {
|
|
379
|
+
TreeItem
|
|
380
|
+
},
|
|
376
381
|
data() {
|
|
377
382
|
return {
|
|
378
383
|
tagVisible: {},
|
|
@@ -409,10 +414,10 @@ export default {
|
|
|
409
414
|
watch: {
|
|
410
415
|
hideForm: {
|
|
411
416
|
handler(val) {
|
|
412
|
-
if (!val?.label || !val.filter || !val.value) {
|
|
417
|
+
if (!val?.label || !val.filter || !val.value) {
|
|
413
418
|
this.item.hideHandle = ''
|
|
414
419
|
return
|
|
415
|
-
|
|
420
|
+
}
|
|
416
421
|
this.item.hideHandle = `$.${val.label} ${val.filter} ${val.value}`
|
|
417
422
|
},
|
|
418
423
|
deep: true
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<draggable :list="formItems"
|
|
3
|
+
item-key="name"
|
|
4
|
+
group="people"
|
|
5
|
+
class="draggable-item"
|
|
6
|
+
ghost-class="draggable-ghost">
|
|
7
|
+
<template #item="{element: item, index}">
|
|
8
|
+
<div>
|
|
9
|
+
<!-- 组合 -->
|
|
10
|
+
<template v-if="['object'].includes(item.component)">
|
|
11
|
+
<div class="form-item">
|
|
12
|
+
{{item.label}}<span>「{{item.name || item.options?.items[0]?.name}}」</span>
|
|
13
|
+
<div class="tool-list">
|
|
14
|
+
<el-icon class="btn"
|
|
15
|
+
size="14"
|
|
16
|
+
@click="copyItem(item, index)"
|
|
17
|
+
title="复制"><el-icon-copy-document /></el-icon>
|
|
18
|
+
<el-icon class="btn"
|
|
19
|
+
size="14"
|
|
20
|
+
@click="deleteItem(index)"
|
|
21
|
+
title="删除"><el-icon-delete /></el-icon>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
<TreeItem :formItems="item.value"></TreeItem>
|
|
25
|
+
</template>
|
|
26
|
+
|
|
27
|
+
<!-- 列表 显示时 -->
|
|
28
|
+
<template v-else-if="['list'].includes(item.component)">
|
|
29
|
+
<div class="list-item">
|
|
30
|
+
<div class="form-item">
|
|
31
|
+
{{item.label}}<span>「{{item.name || item.options?.items[0]?.name}}」</span>
|
|
32
|
+
<div class="tool-list">
|
|
33
|
+
<el-icon class="btn"
|
|
34
|
+
size="14"
|
|
35
|
+
@click="copyItem(item, index)"
|
|
36
|
+
title="复制"><el-icon-copy-document /></el-icon>
|
|
37
|
+
<el-icon class="btn"
|
|
38
|
+
size="14"
|
|
39
|
+
@click="deleteItem(index)"
|
|
40
|
+
title="删除"><el-icon-delete /></el-icon>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
<TreeItem :formItems="x"
|
|
44
|
+
v-for="x in item.value"></TreeItem>
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
</template>
|
|
48
|
+
|
|
49
|
+
<div v-else
|
|
50
|
+
class="form-item">
|
|
51
|
+
{{item.label}}<span>「{{item.name || item.options?.items[0]?.name}}」</span>
|
|
52
|
+
<div class="tool-list">
|
|
53
|
+
<el-icon class="btn"
|
|
54
|
+
size="14"
|
|
55
|
+
@click="copyItem(item, index)"
|
|
56
|
+
title="复制"><el-icon-copy-document /></el-icon>
|
|
57
|
+
<el-icon class="btn"
|
|
58
|
+
size="14"
|
|
59
|
+
@click="deleteItem(index)"
|
|
60
|
+
title="删除"><el-icon-delete /></el-icon>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</template>
|
|
65
|
+
</draggable>
|
|
66
|
+
</template>
|
|
67
|
+
|
|
68
|
+
<script>
|
|
69
|
+
import draggable from 'vuedraggable'
|
|
70
|
+
export default {
|
|
71
|
+
name: 'TreeItem',
|
|
72
|
+
components: {
|
|
73
|
+
draggable
|
|
74
|
+
},
|
|
75
|
+
props: {
|
|
76
|
+
formItems: {
|
|
77
|
+
type: Object,
|
|
78
|
+
default: []
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
computed: {
|
|
82
|
+
curIndex() {
|
|
83
|
+
return this.$store.state?.curIndex || ''
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
emits: ['curClick'],
|
|
87
|
+
methods: {
|
|
88
|
+
// 删除
|
|
89
|
+
deleteItem(index) {
|
|
90
|
+
this.formItems.splice(index, 1)
|
|
91
|
+
},
|
|
92
|
+
// 复制
|
|
93
|
+
copyItem(item, index) {
|
|
94
|
+
let x = JSON.parse(JSON.stringify(item))
|
|
95
|
+
x.name = `${item.component}-${this.$tool.getUUID('', 2)}`
|
|
96
|
+
this.formItems.splice(index + 1, 0, x)
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
</script>
|
|
101
|
+
<style lang="scss" scoped>
|
|
102
|
+
.draggable-item {
|
|
103
|
+
// padding-left: 10px;
|
|
104
|
+
border-left: 10px solid rgba($color: #000, $alpha: 0.05);
|
|
105
|
+
background-color: rgba($color: #000, $alpha: 0.01);
|
|
106
|
+
backdrop-filter: blur(10px);
|
|
107
|
+
color: var(--el-text-color-regular);
|
|
108
|
+
cursor: move;
|
|
109
|
+
.list-item {
|
|
110
|
+
}
|
|
111
|
+
.form-item {
|
|
112
|
+
padding: 8px 0 8px 10px;
|
|
113
|
+
border-bottom: 1px solid rgba($color: #000, $alpha: 0.1);
|
|
114
|
+
position: relative;
|
|
115
|
+
span{
|
|
116
|
+
color: var(--el-color-primary-light-6);
|
|
117
|
+
}
|
|
118
|
+
.tool-list {
|
|
119
|
+
display: none;
|
|
120
|
+
}
|
|
121
|
+
&:hover {
|
|
122
|
+
// border: 1px dashed var(--el-color-primary) !important;
|
|
123
|
+
background-color: var(--el-color-primary-light-9);
|
|
124
|
+
.tool-list {
|
|
125
|
+
position: absolute;
|
|
126
|
+
bottom: 0;
|
|
127
|
+
right: 0;
|
|
128
|
+
display: block;
|
|
129
|
+
border-top-left-radius: 10px;
|
|
130
|
+
z-index: 8;
|
|
131
|
+
background-color: var(--el-color-primary);
|
|
132
|
+
color: #fff;
|
|
133
|
+
display: flex;
|
|
134
|
+
gap: 10px;
|
|
135
|
+
padding: 2px 10px;
|
|
136
|
+
.btn {
|
|
137
|
+
cursor: pointer;
|
|
138
|
+
width: 20px;
|
|
139
|
+
height: 20px;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
:deep(.draggable-ghost) {
|
|
145
|
+
background: var(--el-border-color-light);
|
|
146
|
+
width: 100%;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
</style>
|
|
@@ -145,7 +145,7 @@ export default {
|
|
|
145
145
|
},
|
|
146
146
|
config: {
|
|
147
147
|
handler(val) {
|
|
148
|
-
this.render()
|
|
148
|
+
this.render(val)
|
|
149
149
|
this.$emit("update:config", val)
|
|
150
150
|
},
|
|
151
151
|
immediate: true,
|
|
@@ -231,10 +231,10 @@ export default {
|
|
|
231
231
|
}
|
|
232
232
|
|
|
233
233
|
let form = parse(config.formItems, this.modelValue);
|
|
234
|
-
form = {
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
}
|
|
234
|
+
// form = {
|
|
235
|
+
// ...this.modelValue,
|
|
236
|
+
// ...form
|
|
237
|
+
// }
|
|
238
238
|
this.form = this.parseNestedObject(form)
|
|
239
239
|
this.$emit("update:modelValue", this.form);
|
|
240
240
|
},
|