vue2-client 1.8.244 → 1.8.246
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/package.json
CHANGED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div id="XTreeOne">
|
|
3
|
+
<component-layout-one :siderProps="{width: leftWidth,collapsible: collapsible,collapsedWidth: collapsedWidth,theme: 'light'}">
|
|
4
|
+
<template slot="left">
|
|
5
|
+
<div class="bg-white pd-20" :style="{height: treeHeight}">
|
|
6
|
+
<a-input-search style="margin-bottom: 8px" placeholder="Search" allow-clear @change="onChange" />
|
|
7
|
+
<a-tree
|
|
8
|
+
:tree-data="searchData"
|
|
9
|
+
@select="onSelect">
|
|
10
|
+
<template #title="{ title }">
|
|
11
|
+
<span v-if="title.indexOf(searchValue) > -1">
|
|
12
|
+
{{ title.substr(0, title.indexOf(searchValue)) }}
|
|
13
|
+
<span style="color: #f50">{{ searchValue }}</span>
|
|
14
|
+
{{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
|
|
15
|
+
</span>
|
|
16
|
+
<span v-else>{{ title }}</span>
|
|
17
|
+
</template>
|
|
18
|
+
</a-tree>
|
|
19
|
+
</div>
|
|
20
|
+
</template>
|
|
21
|
+
<slot></slot>
|
|
22
|
+
</component-layout-one>
|
|
23
|
+
</div>
|
|
24
|
+
</template>
|
|
25
|
+
|
|
26
|
+
<script>
|
|
27
|
+
import ComponentLayoutOne from '@vue2-client/layouts/ComponentLayoutOne'
|
|
28
|
+
import lowcodeComponentMixin from '@vue2-client/utils/lowcode/lowcodeComponentMixin'
|
|
29
|
+
export default {
|
|
30
|
+
name: 'XTreeOne',
|
|
31
|
+
components: { ComponentLayoutOne },
|
|
32
|
+
mixins: [lowcodeComponentMixin],
|
|
33
|
+
props: {
|
|
34
|
+
// 左侧宽度
|
|
35
|
+
leftWidth: {
|
|
36
|
+
type: [Number, String],
|
|
37
|
+
default: () => {
|
|
38
|
+
return 200
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
// 左侧是否可收起
|
|
42
|
+
collapsible: {
|
|
43
|
+
type: Boolean,
|
|
44
|
+
default: true
|
|
45
|
+
},
|
|
46
|
+
// 左侧收起后宽度
|
|
47
|
+
collapsedWidth: {
|
|
48
|
+
type: Number,
|
|
49
|
+
default: 0
|
|
50
|
+
},
|
|
51
|
+
// Tree 树形控件数据
|
|
52
|
+
// array<{key, title, children, [disabled, selectable]}>
|
|
53
|
+
treeData: {
|
|
54
|
+
type: Array,
|
|
55
|
+
required: true
|
|
56
|
+
},
|
|
57
|
+
treeHeight: {
|
|
58
|
+
type: String,
|
|
59
|
+
default: '85vh'
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
data () {
|
|
63
|
+
return {
|
|
64
|
+
// 用于展示筛选出的数据
|
|
65
|
+
searchData: [],
|
|
66
|
+
// 查询值
|
|
67
|
+
searchValue: ''
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
created () {
|
|
71
|
+
this.init()
|
|
72
|
+
},
|
|
73
|
+
mounted () {
|
|
74
|
+
},
|
|
75
|
+
watch: {
|
|
76
|
+
'treeData' () {
|
|
77
|
+
this.init()
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
methods: {
|
|
81
|
+
init () {
|
|
82
|
+
// 添加title插槽
|
|
83
|
+
for (const index of this.treeData.keys()) {
|
|
84
|
+
this.treeData[index].scopedSlots = { title: 'title' }
|
|
85
|
+
}
|
|
86
|
+
this.searchData = Object.assign([], this.treeData)
|
|
87
|
+
},
|
|
88
|
+
onChange (e) {
|
|
89
|
+
const name = e.target.value
|
|
90
|
+
this.searchValue = name
|
|
91
|
+
this.searchData = []
|
|
92
|
+
for (const row of this.treeData) {
|
|
93
|
+
if (row.title.indexOf(name) > -1) {
|
|
94
|
+
this.searchData.push(row)
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
onSelect (selectedKeys, e) {
|
|
99
|
+
this.$emit('onSelect', selectedKeys, e)
|
|
100
|
+
this.$lowCodeEmit('onChange', selectedKeys[0])
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
</script>
|
|
105
|
+
|
|
106
|
+
<style lang="less" scoped>
|
|
107
|
+
.pd-20 {
|
|
108
|
+
padding: 20px;
|
|
109
|
+
}
|
|
110
|
+
/deep/ .ant-tree-switcher-icon svg{
|
|
111
|
+
width: 1.5em;
|
|
112
|
+
height: 1.5em;
|
|
113
|
+
}
|
|
114
|
+
</style>
|
|
@@ -20,6 +20,8 @@ import XStepView from './common/XStepView'
|
|
|
20
20
|
import Tree from './common/Tree'
|
|
21
21
|
import CreateQuery from './common/CreateQuery'
|
|
22
22
|
import CreateSimpleFormQuery from './common/CreateSimpleFormQuery'
|
|
23
|
+
import XFormGroup from './common/XFormGroup'
|
|
24
|
+
import XDescriptionsGroup from './common/XDescriptions/XDescriptionsGroup.vue'
|
|
23
25
|
|
|
24
26
|
export default {
|
|
25
27
|
XForm,
|
|
@@ -43,5 +45,7 @@ export default {
|
|
|
43
45
|
XFormTable,
|
|
44
46
|
PersonSetting,
|
|
45
47
|
Tree,
|
|
46
|
-
XStepView
|
|
48
|
+
XStepView,
|
|
49
|
+
XFormGroup,
|
|
50
|
+
XDescriptionsGroup
|
|
47
51
|
}
|