2021年10月29日

    参与项目 fsp-lowcode
    协助解决人 齐继超
    整体耗时 2天

    业务场景-图示
    image.pngimage.png
    工作重点
    1.业务场景是省市区三层数据和省市两层数据的级联批量编辑和显示；
    2.以‘-’分割字符，对相同名字的层级进行去重，渲染到对应的输入框；编辑时按照层级显示；

    遇到的问题和解决思路
    遇到的问题

    1. 数据回显，需要判断是两层数据，还是三层数据；即通过数组里面的children来判断是否还有下一层级的数据；

    解决思路

    1. 将传入的数据拼接成结构需要的格式；数据编辑和回显触发同样的事件，需要将重复的层级数据拼接成完整的数据，按照以“-”分割的形式显示到页面上；
    2. 对数据进行去重处理，当第一层和第二层数据出现重复的时候，只将不重复的层级显示在页面上；

    解决方案

    1.     cascadeBatchEdit() {
    2.       this.batchEditData = '';
    3.       this.alloptions = []; 
    4.       this.cascadeEditDialog = true;
    5.       let secValue = '';   // 第二层数据存放
    6.       let firValue = '';    // 第三层数据存放
    7.       this.dragForm.options.forEach(item => {
    8.         if(item.children.length == 0){
    9.           this.alloptions.push(item.value); 
    10.           console.log("this.alloptions 一级",this.alloptions)
    11.           return;
    12.         }
    13.         item.children.forEach(items => {
    14.            if(items.children.length == 0){
    15.             secValue = items.value;
    16.             this.alloptions.push(item.value + '-' + secValue);
    17.            console.log("this.alloptions 二级",this.alloptions)
    18.             return;
    19.           }
    20.           secValue = items.value;
    21.           items.children.forEach(itemsFir => {
    22.             firValue = itemsFir.value;
    23.             this.alloptions.push(item.value + '-' + secValue + '-' + firValue);
    24.           });
    25.         });
    26.       });
    27.       this.batchEditData = this.alloptions.join('\n');
    28.     },
    1. 处理三层数据结构并去重，调取这个函数，拿到数据可以直接渲染
    2. 处理的数据格式：var data = ["河南省-郑州市-中原区", "河南省-郑州市-二七区", "河南省-郑州市-金水区", "上海市-静安区"],
    3. posh(list, id) {
    4.       var _pos = -1;
    5.       list.map(function(d, i) {
    6.         if (d.id == id) {
    7.           _pos = i;
    8.         }
    9.       });
    10.       return _pos;
    11.     },
    13.     dataFormat(data, result = []) {
    14.       let self = this;
    15.       data.map(function(d) {
    16.         var child = d.split('-'),
    17.           temp = result;
    18.         child.map(function(d2, i) {
    19.           var _pos = self.posh(temp, d2);
    20.           if (_pos != -1) {
    21.             //已经有了
    22.             console.log(temp[_pos]['children']);
    23.             temp = temp[_pos]['children'];
    24.           } else {
    25.             //新增
    26.             temp.push({
    27.               value: d2,
    28.               label: d2,
    29.               id: d2,
    30.               children: [],
    31.             });
    32.             temp = temp[temp.length - 1]['children'];
    33.             console.log(result);
    34.           }
    35.         });
    36.       });
    37.       return result;
    38.     },

    **

    1. 首先要理解需求，将需要的数据类型打印出来对比；
    2. 循环使用return终止！