|
@ -131,6 +131,15 @@ const tagList = ref<any>([
|
131
|
131
|
{ label: '学生', name: 'student', type: 'object', id: 14 },
|
132
|
132
|
{ label: '员工', name: 'staff', type: 'object', id: 15 }
|
133
|
133
|
]
|
|
134
|
},
|
|
135
|
{
|
|
136
|
label: '数组',
|
|
137
|
type: 'array',
|
|
138
|
id: 16,
|
|
139
|
tags: [
|
|
140
|
{ label: '兴趣', name: 'likes', type: 'array', id: 17 },
|
|
141
|
{ label: '作品', name: 'works', type: 'array', id: 18 }
|
|
142
|
]
|
134
|
143
|
}
|
135
|
144
|
]);
|
136
|
145
|
const treeData = ref<any>([]);
|
|
@ -186,7 +195,6 @@ function getCurrentNode(node: any) {
|
186
|
195
|
|
187
|
196
|
// 标签点击,添加至左边树
|
188
|
197
|
function handleClickTag(tag: any) {
|
189
|
|
console.log(tag);
|
190
|
198
|
const newChild = {
|
191
|
199
|
label: tag.label,
|
192
|
200
|
name: tag.name,
|
|
@ -200,8 +208,12 @@ function handleClickTag(tag: any) {
|
200
|
208
|
currentNode.value?.type === 'object' ||
|
201
|
209
|
currentNode.value?.type === 'array'
|
202
|
210
|
) {
|
203
|
|
currentNode.value.children.push(newChild);
|
204
|
|
treeData.value = [...treeData.value];
|
|
211
|
if (!currentNode.value.children.some((el) => el.name === newChild.name)) {
|
|
212
|
currentNode.value.children.push(newChild);
|
|
213
|
treeData.value = [...treeData.value];
|
|
214
|
} else {
|
|
215
|
proxy.$message.error(`${currentNode.value?.label}中已存在改属性!`);
|
|
216
|
}
|
205
|
217
|
} else {
|
206
|
218
|
proxy.$message.error(`${currentNode.value?.type}类型不能有子类!`);
|
207
|
219
|
}
|
|
@ -269,23 +281,26 @@ function assignment(type: any) {
|
269
|
281
|
}
|
270
|
282
|
|
271
|
283
|
// 数据处理
|
272
|
|
function tree2json(data: any) {
|
273
|
|
const obj = {};
|
274
|
|
data.forEach((item: any) => {
|
275
|
|
if (item.children?.length) {
|
276
|
|
obj[item.name] = tree2json(item.children);
|
|
284
|
function tree2json(data: any[], type: 'array' | 'object'): any {
|
|
285
|
const obj: any = {};
|
|
286
|
data.forEach((item) => {
|
|
287
|
const { children } = item;
|
|
288
|
if (children && children.length) {
|
|
289
|
const childType = item.type;
|
|
290
|
obj[item.name] = tree2json(children, childType as 'array' | 'object');
|
277
|
291
|
} else {
|
278
|
292
|
obj[item.name] = assignment(item.type);
|
279
|
293
|
}
|
280
|
294
|
});
|
281
|
|
return obj;
|
|
295
|
return type === 'array' ? [obj] : obj;
|
282
|
296
|
}
|
|
297
|
|
283
|
298
|
function validate() {}
|
284
|
299
|
watch(
|
285
|
300
|
treeData.value,
|
286
|
301
|
() => {
|
287
|
302
|
if (treeData.value?.length) {
|
288
|
|
jsonData.value = tree2json(treeData.value);
|
|
303
|
jsonData.value = tree2json(treeData.value, 'object');
|
289
|
304
|
} else {
|
290
|
305
|
currentNode.value = {};
|
291
|
306
|
}
|