@ebiz/designer-components 0.0.18-beta.37 → 0.0.18-beta.38
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 +1 -1
- package/src/components/Button.vue +80 -25
- package/src/components/EbizTreeSelector.vue +512 -509
- package/src/index.js +1 -4
- package/src/router/index.js +0 -12
- package/src/views/Button.vue +7 -3
- package/src/views/Home.vue +1 -3
- package/src/views/TreeSelectorDemo.vue +245 -245
- package/dist/designer-components.css +0 -1
- package/dist/favicon.ico +0 -0
- package/dist/index.mjs +0 -124200
- package/src/components/EbizTimePicker.vue +0 -144
- package/src/views/TimePickerDemo.vue +0 -147
package/src/index.js
CHANGED
@@ -54,7 +54,6 @@ import EbizTableSort from './components/EbizTableSort.vue';
|
|
54
54
|
import EbizDetailBlock from './components/EbizDetailBlock.vue';
|
55
55
|
import EbizTree from './components/EbizTree.vue';
|
56
56
|
import EbizTreeSelector from './components/EbizTreeSelector.vue';
|
57
|
-
import EbizTimePicker from './components/EbizTimePicker.vue';
|
58
57
|
import { MessagePlugin as EbizMessage } from 'tdesign-vue-next';
|
59
58
|
|
60
59
|
// 导入简洁数据服务
|
@@ -163,7 +162,5 @@ export {
|
|
163
162
|
EbizDetailBlock,
|
164
163
|
// 树组件
|
165
164
|
EbizTree,
|
166
|
-
EbizTreeSelector
|
167
|
-
// 时间选择器组件
|
168
|
-
EbizTimePicker
|
165
|
+
EbizTreeSelector
|
169
166
|
};
|
package/src/router/index.js
CHANGED
@@ -287,18 +287,6 @@ const routes = [
|
|
287
287
|
meta: {
|
288
288
|
title: '树形选择器'
|
289
289
|
}
|
290
|
-
},
|
291
|
-
{
|
292
|
-
path: '/tree-selector',
|
293
|
-
name: 'TreeSelector',
|
294
|
-
component: () => import('../views/TreeSelectorDemo.vue'),
|
295
|
-
meta: { title: '树选择器组件示例' }
|
296
|
-
},
|
297
|
-
{
|
298
|
-
path: '/time-picker',
|
299
|
-
name: 'TimePicker',
|
300
|
-
component: () => import('../views/TimePickerDemo.vue'),
|
301
|
-
meta: { title: '时间选择器组件示例' }
|
302
290
|
}
|
303
291
|
]
|
304
292
|
|
package/src/views/Button.vue
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
<template>
|
2
2
|
<div>
|
3
3
|
<ebiz-route-breadcrumb />
|
4
|
-
<ebiz-button />
|
4
|
+
<ebiz-button :text="测试" :apiConfig="{ apiId: 802, apiType: 5 }" @prepare="onPrepare" />
|
5
5
|
</div>
|
6
6
|
</template>
|
7
7
|
|
@@ -12,9 +12,13 @@ export default {
|
|
12
12
|
name: 'ButtonDemo',
|
13
13
|
components: {
|
14
14
|
EbizButton
|
15
|
+
},
|
16
|
+
methods: {
|
17
|
+
onPrepare() {
|
18
|
+
|
19
|
+
}
|
15
20
|
}
|
16
21
|
}
|
17
22
|
</script>
|
18
23
|
|
19
|
-
<style scoped>
|
20
|
-
</style>
|
24
|
+
<style scoped></style>
|
package/src/views/Home.vue
CHANGED
@@ -69,9 +69,7 @@ export default {
|
|
69
69
|
{ path: '/ebiz-detail-block', title: 'Ebiz详情块组件示例' },
|
70
70
|
{ path: '/table-column', title: 'Ebiz表格列组件示例' },
|
71
71
|
{ path: '/table-sort', title: 'Ebiz表格排序组件示例' },
|
72
|
-
{ path: '/tree', title: 'Ebiz树组件示例' }
|
73
|
-
{ path: '/tree-selector', title: 'Ebiz树选择器组件示例' },
|
74
|
-
{ path: '/time-picker', title: 'Ebiz时间选择器组件示例' }
|
72
|
+
{ path: '/tree', title: 'Ebiz树组件示例' }
|
75
73
|
]
|
76
74
|
|
77
75
|
return {
|
@@ -1,246 +1,246 @@
|
|
1
|
-
<template>
|
2
|
-
<div class="tree-selector-demo">
|
3
|
-
<h2>树选择器组件演示</h2>
|
4
|
-
|
5
|
-
<div class="demo-section">
|
6
|
-
<h3>基础用法</h3>
|
7
|
-
<t-button @click="showBasicSelector">打开基础树选择器</t-button>
|
8
|
-
<div class="selected-data">
|
9
|
-
已选择: {{ selectedBasicData.length }} 项
|
10
|
-
<t-tag v-for="item in selectedBasicData" :key="item.value" class="selected-tag" closable @close="removeItem(item, 'basic')">
|
11
|
-
{{ item.label }}
|
12
|
-
</t-tag>
|
13
|
-
</div>
|
14
|
-
</div>
|
15
|
-
|
16
|
-
<div class="demo-section">
|
17
|
-
<h3>预选中用法</h3>
|
18
|
-
<t-button @click="showPreselectedSelector">打开预选中树选择器</t-button>
|
19
|
-
<div class="selected-data">
|
20
|
-
已选择: {{ selectedPreData.length }} 项
|
21
|
-
<t-tag v-for="item in selectedPreData" :key="item.value" class="selected-tag" closable @close="removeItem(item, 'pre')">
|
22
|
-
{{ item.label }}
|
23
|
-
</t-tag>
|
24
|
-
</div>
|
25
|
-
</div>
|
26
|
-
|
27
|
-
<div class="demo-section">
|
28
|
-
<h3>自定义禁用规则</h3>
|
29
|
-
<t-button @click="showCustomDisabledSelector">打开禁用员工选择树选择器</t-button>
|
30
|
-
<div class="selected-data">
|
31
|
-
已选择: {{ selectedDisabledData.length }} 项
|
32
|
-
<t-tag v-for="item in selectedDisabledData" :key="item.value" class="selected-tag" closable @close="removeItem(item, 'disabled')">
|
33
|
-
{{ item.label }}
|
34
|
-
</t-tag>
|
35
|
-
</div>
|
36
|
-
</div>
|
37
|
-
|
38
|
-
<!-- 基础树选择器 -->
|
39
|
-
<EbizTreeSelector
|
40
|
-
v-model="selectedBasicData"
|
41
|
-
:data="treeData"
|
42
|
-
title="选择人员/部门"
|
43
|
-
@change="handleChange"
|
44
|
-
/>
|
45
|
-
|
46
|
-
<!-- 预选中树选择器 -->
|
47
|
-
<EbizTreeSelector
|
48
|
-
v-model="selectedPreData"
|
49
|
-
:data="treeData"
|
50
|
-
title="预选中的树选择器"
|
51
|
-
/>
|
52
|
-
|
53
|
-
<!-- 自定义禁用规则树选择器 -->
|
54
|
-
<EbizTreeSelector
|
55
|
-
v-model="selectedDisabledData"
|
56
|
-
:data="treeData"
|
57
|
-
title="仅选择部门和岗位"
|
58
|
-
:disable-check="disableEmployeeCheck"
|
59
|
-
/>
|
60
|
-
</div>
|
61
|
-
</template>
|
62
|
-
|
63
|
-
<script setup>
|
64
|
-
import { ref } from 'vue';
|
65
|
-
import { MessagePlugin } from 'tdesign-vue-next';
|
66
|
-
import EbizTreeSelector from '../components/EbizTreeSelector.vue';
|
67
|
-
|
68
|
-
// 树形数据
|
69
|
-
const treeData = {
|
70
|
-
organization: [
|
71
|
-
{
|
72
|
-
label: "强瑞科技",
|
73
|
-
value: "1",
|
74
|
-
children: [
|
75
|
-
{
|
76
|
-
label: "总经办",
|
77
|
-
value: "1.1",
|
78
|
-
type: "department"
|
79
|
-
},
|
80
|
-
{
|
81
|
-
label: "研发部",
|
82
|
-
value: "1.2",
|
83
|
-
type: "department",
|
84
|
-
children: [
|
85
|
-
{
|
86
|
-
label: "前端组",
|
87
|
-
value: "1.2.1",
|
88
|
-
type: "department"
|
89
|
-
},
|
90
|
-
{
|
91
|
-
label: "后端组",
|
92
|
-
value: "1.2.2",
|
93
|
-
type: "department"
|
94
|
-
}
|
95
|
-
]
|
96
|
-
}
|
97
|
-
]
|
98
|
-
}
|
99
|
-
],
|
100
|
-
department: [
|
101
|
-
{
|
102
|
-
label: "总经办",
|
103
|
-
value: "1.1",
|
104
|
-
type: "department"
|
105
|
-
},
|
106
|
-
{
|
107
|
-
label: "研发部",
|
108
|
-
value: "1.2",
|
109
|
-
type: "department",
|
110
|
-
children: [
|
111
|
-
{
|
112
|
-
label: "前端组",
|
113
|
-
value: "1.2.1",
|
114
|
-
type: "department"
|
115
|
-
},
|
116
|
-
{
|
117
|
-
label: "后端组",
|
118
|
-
value: "1.2.2",
|
119
|
-
type: "department"
|
120
|
-
}
|
121
|
-
]
|
122
|
-
},
|
123
|
-
{
|
124
|
-
label: "人事部",
|
125
|
-
value: "1.3",
|
126
|
-
type: "department"
|
127
|
-
}
|
128
|
-
],
|
129
|
-
position: [
|
130
|
-
{
|
131
|
-
label: "工程师",
|
132
|
-
value: "pos1",
|
133
|
-
type: "position",
|
134
|
-
children: [
|
135
|
-
{
|
136
|
-
label: "前端工程师",
|
137
|
-
value: "pos1.1",
|
138
|
-
type: "position"
|
139
|
-
},
|
140
|
-
{
|
141
|
-
label: "后端工程师",
|
142
|
-
value: "pos1.2",
|
143
|
-
type: "position"
|
144
|
-
}
|
145
|
-
]
|
146
|
-
},
|
147
|
-
{
|
148
|
-
label: "设计师",
|
149
|
-
value: "pos2",
|
150
|
-
type: "position"
|
151
|
-
}
|
152
|
-
],
|
153
|
-
employee: [
|
154
|
-
{
|
155
|
-
label: "张三",
|
156
|
-
value: "emp1",
|
157
|
-
type: "employee"
|
158
|
-
},
|
159
|
-
{
|
160
|
-
label: "李四",
|
161
|
-
value: "emp2",
|
162
|
-
type: "employee"
|
163
|
-
},
|
164
|
-
{
|
165
|
-
label: "王五",
|
166
|
-
value: "emp3",
|
167
|
-
type: "employee"
|
168
|
-
}
|
169
|
-
]
|
170
|
-
};
|
171
|
-
|
172
|
-
// 已选择数据
|
173
|
-
const selectedBasicData = ref([]);
|
174
|
-
const selectedPreData = ref([
|
175
|
-
{
|
176
|
-
label: "研发部",
|
177
|
-
value: "1.2",
|
178
|
-
type: "department"
|
179
|
-
},
|
180
|
-
{
|
181
|
-
label: "张三",
|
182
|
-
value: "emp1",
|
183
|
-
type: "employee"
|
184
|
-
}
|
185
|
-
]);
|
186
|
-
const selectedDisabledData = ref([]);
|
187
|
-
|
188
|
-
// 打开选择器
|
189
|
-
const showBasicSelector = () => {
|
190
|
-
document.querySelectorAll('.t-dialog')[0]?.classList.add('show-dialog');
|
191
|
-
};
|
192
|
-
|
193
|
-
const showPreselectedSelector = () => {
|
194
|
-
document.querySelectorAll('.t-dialog')[1]?.classList.add('show-dialog');
|
195
|
-
};
|
196
|
-
|
197
|
-
const showCustomDisabledSelector = () => {
|
198
|
-
document.querySelectorAll('.t-dialog')[2]?.classList.add('show-dialog');
|
199
|
-
};
|
200
|
-
|
201
|
-
// 自定义禁用检查(禁用员工选择)
|
202
|
-
const disableEmployeeCheck = (node) => {
|
203
|
-
return node.type === 'employee';
|
204
|
-
};
|
205
|
-
|
206
|
-
// 移除已选项
|
207
|
-
const removeItem = (item, type) => {
|
208
|
-
if (type === 'basic') {
|
209
|
-
selectedBasicData.value = selectedBasicData.value.filter(i => i.value !== item.value);
|
210
|
-
} else if (type === 'pre') {
|
211
|
-
selectedPreData.value = selectedPreData.value.filter(i => i.value !== item.value);
|
212
|
-
} else if (type === 'disabled') {
|
213
|
-
selectedDisabledData.value = selectedDisabledData.value.filter(i => i.value !== item.value);
|
214
|
-
}
|
215
|
-
};
|
216
|
-
|
217
|
-
// 监听变更
|
218
|
-
const handleChange = (value) => {
|
219
|
-
MessagePlugin.success(`选择变更,已选择 ${value.length} 项`);
|
220
|
-
};
|
221
|
-
</script>
|
222
|
-
|
223
|
-
<style scoped>
|
224
|
-
.tree-selector-demo {
|
225
|
-
padding: 20px;
|
226
|
-
}
|
227
|
-
|
228
|
-
.demo-section {
|
229
|
-
margin-bottom: 30px;
|
230
|
-
padding: 20px;
|
231
|
-
border: 1px solid #e0e0e0;
|
232
|
-
border-radius: 4px;
|
233
|
-
}
|
234
|
-
|
235
|
-
.selected-data {
|
236
|
-
margin-top: 16px;
|
237
|
-
padding: 10px;
|
238
|
-
background-color: #f5f5f5;
|
239
|
-
border-radius: 4px;
|
240
|
-
min-height: 40px;
|
241
|
-
}
|
242
|
-
|
243
|
-
.selected-tag {
|
244
|
-
margin: 4px;
|
245
|
-
}
|
1
|
+
<template>
|
2
|
+
<div class="tree-selector-demo">
|
3
|
+
<h2>树选择器组件演示</h2>
|
4
|
+
|
5
|
+
<div class="demo-section">
|
6
|
+
<h3>基础用法</h3>
|
7
|
+
<t-button @click="showBasicSelector">打开基础树选择器</t-button>
|
8
|
+
<div class="selected-data">
|
9
|
+
已选择: {{ selectedBasicData.length }} 项
|
10
|
+
<t-tag v-for="item in selectedBasicData" :key="item.value" class="selected-tag" closable @close="removeItem(item, 'basic')">
|
11
|
+
{{ item.label }}
|
12
|
+
</t-tag>
|
13
|
+
</div>
|
14
|
+
</div>
|
15
|
+
|
16
|
+
<div class="demo-section">
|
17
|
+
<h3>预选中用法</h3>
|
18
|
+
<t-button @click="showPreselectedSelector">打开预选中树选择器</t-button>
|
19
|
+
<div class="selected-data">
|
20
|
+
已选择: {{ selectedPreData.length }} 项
|
21
|
+
<t-tag v-for="item in selectedPreData" :key="item.value" class="selected-tag" closable @close="removeItem(item, 'pre')">
|
22
|
+
{{ item.label }}
|
23
|
+
</t-tag>
|
24
|
+
</div>
|
25
|
+
</div>
|
26
|
+
|
27
|
+
<div class="demo-section">
|
28
|
+
<h3>自定义禁用规则</h3>
|
29
|
+
<t-button @click="showCustomDisabledSelector">打开禁用员工选择树选择器</t-button>
|
30
|
+
<div class="selected-data">
|
31
|
+
已选择: {{ selectedDisabledData.length }} 项
|
32
|
+
<t-tag v-for="item in selectedDisabledData" :key="item.value" class="selected-tag" closable @close="removeItem(item, 'disabled')">
|
33
|
+
{{ item.label }}
|
34
|
+
</t-tag>
|
35
|
+
</div>
|
36
|
+
</div>
|
37
|
+
|
38
|
+
<!-- 基础树选择器 -->
|
39
|
+
<EbizTreeSelector
|
40
|
+
v-model="selectedBasicData"
|
41
|
+
:data="treeData"
|
42
|
+
title="选择人员/部门"
|
43
|
+
@change="handleChange"
|
44
|
+
/>
|
45
|
+
|
46
|
+
<!-- 预选中树选择器 -->
|
47
|
+
<EbizTreeSelector
|
48
|
+
v-model="selectedPreData"
|
49
|
+
:data="treeData"
|
50
|
+
title="预选中的树选择器"
|
51
|
+
/>
|
52
|
+
|
53
|
+
<!-- 自定义禁用规则树选择器 -->
|
54
|
+
<EbizTreeSelector
|
55
|
+
v-model="selectedDisabledData"
|
56
|
+
:data="treeData"
|
57
|
+
title="仅选择部门和岗位"
|
58
|
+
:disable-check="disableEmployeeCheck"
|
59
|
+
/>
|
60
|
+
</div>
|
61
|
+
</template>
|
62
|
+
|
63
|
+
<script setup>
|
64
|
+
import { ref } from 'vue';
|
65
|
+
import { MessagePlugin } from 'tdesign-vue-next';
|
66
|
+
import EbizTreeSelector from '../components/EbizTreeSelector.vue';
|
67
|
+
|
68
|
+
// 树形数据
|
69
|
+
const treeData = {
|
70
|
+
organization: [
|
71
|
+
{
|
72
|
+
label: "强瑞科技",
|
73
|
+
value: "1",
|
74
|
+
children: [
|
75
|
+
{
|
76
|
+
label: "总经办",
|
77
|
+
value: "1.1",
|
78
|
+
type: "department"
|
79
|
+
},
|
80
|
+
{
|
81
|
+
label: "研发部",
|
82
|
+
value: "1.2",
|
83
|
+
type: "department",
|
84
|
+
children: [
|
85
|
+
{
|
86
|
+
label: "前端组",
|
87
|
+
value: "1.2.1",
|
88
|
+
type: "department"
|
89
|
+
},
|
90
|
+
{
|
91
|
+
label: "后端组",
|
92
|
+
value: "1.2.2",
|
93
|
+
type: "department"
|
94
|
+
}
|
95
|
+
]
|
96
|
+
}
|
97
|
+
]
|
98
|
+
}
|
99
|
+
],
|
100
|
+
department: [
|
101
|
+
{
|
102
|
+
label: "总经办",
|
103
|
+
value: "1.1",
|
104
|
+
type: "department"
|
105
|
+
},
|
106
|
+
{
|
107
|
+
label: "研发部",
|
108
|
+
value: "1.2",
|
109
|
+
type: "department",
|
110
|
+
children: [
|
111
|
+
{
|
112
|
+
label: "前端组",
|
113
|
+
value: "1.2.1",
|
114
|
+
type: "department"
|
115
|
+
},
|
116
|
+
{
|
117
|
+
label: "后端组",
|
118
|
+
value: "1.2.2",
|
119
|
+
type: "department"
|
120
|
+
}
|
121
|
+
]
|
122
|
+
},
|
123
|
+
{
|
124
|
+
label: "人事部",
|
125
|
+
value: "1.3",
|
126
|
+
type: "department"
|
127
|
+
}
|
128
|
+
],
|
129
|
+
position: [
|
130
|
+
{
|
131
|
+
label: "工程师",
|
132
|
+
value: "pos1",
|
133
|
+
type: "position",
|
134
|
+
children: [
|
135
|
+
{
|
136
|
+
label: "前端工程师",
|
137
|
+
value: "pos1.1",
|
138
|
+
type: "position"
|
139
|
+
},
|
140
|
+
{
|
141
|
+
label: "后端工程师",
|
142
|
+
value: "pos1.2",
|
143
|
+
type: "position"
|
144
|
+
}
|
145
|
+
]
|
146
|
+
},
|
147
|
+
{
|
148
|
+
label: "设计师",
|
149
|
+
value: "pos2",
|
150
|
+
type: "position"
|
151
|
+
}
|
152
|
+
],
|
153
|
+
employee: [
|
154
|
+
{
|
155
|
+
label: "张三",
|
156
|
+
value: "emp1",
|
157
|
+
type: "employee"
|
158
|
+
},
|
159
|
+
{
|
160
|
+
label: "李四",
|
161
|
+
value: "emp2",
|
162
|
+
type: "employee"
|
163
|
+
},
|
164
|
+
{
|
165
|
+
label: "王五",
|
166
|
+
value: "emp3",
|
167
|
+
type: "employee"
|
168
|
+
}
|
169
|
+
]
|
170
|
+
};
|
171
|
+
|
172
|
+
// 已选择数据
|
173
|
+
const selectedBasicData = ref([]);
|
174
|
+
const selectedPreData = ref([
|
175
|
+
{
|
176
|
+
label: "研发部",
|
177
|
+
value: "1.2",
|
178
|
+
type: "department"
|
179
|
+
},
|
180
|
+
{
|
181
|
+
label: "张三",
|
182
|
+
value: "emp1",
|
183
|
+
type: "employee"
|
184
|
+
}
|
185
|
+
]);
|
186
|
+
const selectedDisabledData = ref([]);
|
187
|
+
|
188
|
+
// 打开选择器
|
189
|
+
const showBasicSelector = () => {
|
190
|
+
document.querySelectorAll('.t-dialog')[0]?.classList.add('show-dialog');
|
191
|
+
};
|
192
|
+
|
193
|
+
const showPreselectedSelector = () => {
|
194
|
+
document.querySelectorAll('.t-dialog')[1]?.classList.add('show-dialog');
|
195
|
+
};
|
196
|
+
|
197
|
+
const showCustomDisabledSelector = () => {
|
198
|
+
document.querySelectorAll('.t-dialog')[2]?.classList.add('show-dialog');
|
199
|
+
};
|
200
|
+
|
201
|
+
// 自定义禁用检查(禁用员工选择)
|
202
|
+
const disableEmployeeCheck = (node) => {
|
203
|
+
return node.type === 'employee';
|
204
|
+
};
|
205
|
+
|
206
|
+
// 移除已选项
|
207
|
+
const removeItem = (item, type) => {
|
208
|
+
if (type === 'basic') {
|
209
|
+
selectedBasicData.value = selectedBasicData.value.filter(i => i.value !== item.value);
|
210
|
+
} else if (type === 'pre') {
|
211
|
+
selectedPreData.value = selectedPreData.value.filter(i => i.value !== item.value);
|
212
|
+
} else if (type === 'disabled') {
|
213
|
+
selectedDisabledData.value = selectedDisabledData.value.filter(i => i.value !== item.value);
|
214
|
+
}
|
215
|
+
};
|
216
|
+
|
217
|
+
// 监听变更
|
218
|
+
const handleChange = (value) => {
|
219
|
+
MessagePlugin.success(`选择变更,已选择 ${value.length} 项`);
|
220
|
+
};
|
221
|
+
</script>
|
222
|
+
|
223
|
+
<style scoped>
|
224
|
+
.tree-selector-demo {
|
225
|
+
padding: 20px;
|
226
|
+
}
|
227
|
+
|
228
|
+
.demo-section {
|
229
|
+
margin-bottom: 30px;
|
230
|
+
padding: 20px;
|
231
|
+
border: 1px solid #e0e0e0;
|
232
|
+
border-radius: 4px;
|
233
|
+
}
|
234
|
+
|
235
|
+
.selected-data {
|
236
|
+
margin-top: 16px;
|
237
|
+
padding: 10px;
|
238
|
+
background-color: #f5f5f5;
|
239
|
+
border-radius: 4px;
|
240
|
+
min-height: 40px;
|
241
|
+
}
|
242
|
+
|
243
|
+
.selected-tag {
|
244
|
+
margin: 4px;
|
245
|
+
}
|
246
246
|
</style>
|