Sfoglia il codice sorgente

update: 修改属性组件使用问题

liuyang 2 anni fa
parent
commit
c453de15bf
1 ha cambiato i file con 25 aggiunte e 10 eliminazioni
  1. 25 10
      src/views/_components/drag/DragComments.vue

+ 25 - 10
src/views/_components/drag/DragComments.vue

@ -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
    }