2018年1月

清缓存！！！！！！

1.4

• AntV (Tree) (eCharts) 使用过程出现的问题
  1. 更新数据时，会再次出现一个画布进行渲染，此时需要使用 this.tree.destroy() 销毁上一次的画布;
  2. 初始化树状图时，发现不符合代码的渲染逻辑，此时可以检查 版本号是否一致
  3. 树状图 渲染时可以指定 固定ID，也可以指定一个 container 容器
  
  { me.container = container; }} >
  
  4. 树状图的数据 需要一个根元素节点
  let data = { 'name': 'All' , 'chidlren': '这个地方放数据' }

---

1.5

• fulFillConfigs 项目 （时间片规则展示）
  1. 用户在进行搜索时，注意判断用户输入值以后有两种情况，第一是更改了显示的内容 ， 第二是用户输入文字以后再删除了所有的文字，此时需要回到初始状态
  2. push 前记得commit ， commit前记得看看是不是所在分支。
  3. 封装tree的通用函数转换时，会报错说每个元素需要有唯一的key，此时需要去看封装的方法中对象的key是什么，后端传过来的数据可能会有重复的id或者那么字段之类的。

---

1.8

• fulFillConfigs 项目 （时间片规则展示）
  1. tree 里面的数据，每个节点的key必须不一样，否则会出现点击任意一个节点展开时，对应的相同的key的别的节点也会自动展开。
  2. eval 方法可以使用在canvas画布设置大小
  eval( window.innerHeight - 100 )

---

1.9

• fulFillConfigs 项目 （时间片规则展示）
  1. 当key不同，name相同时，可以遍历数组若有重复，将字符串加一个空格即可；
  2. 代码注释要写好，如果是通用方法，可以写成组件形式

• 总结
  1. 用面向对象思想去考虑问题，从更大的格局去考虑整体的代码书写逻辑，书写的时候会麻烦一些，但是出现问题时，可以更快速的定位问题，具体到细节方面：
  代码注释不要怕麻烦，要写清楚 但是一些很简单的可以不写 注释太多也会造成阅读不方便
如果是通用方法，可以尝试写一个组件，也可以在已有组件中查找一些已经写好的组件
查找问题时，可以多用 debugger 模式
可以把 actions 里面的一些方法 写得更小 分的更细致 这样也可以更快的定位问题

---

1.10

• 使用搜索框时，显示结果只显示和关键字相关的数据，两种方法
  1. 从叶子节点开始遍历，判断是否满足，不满足用splice删去，满足留下

setSearchTree(data, value) {
    let temp = data.concat();
    for (let i=temp.length-1 ; i>=0 ; i--) {
        let item = temp[i];
        if(item.children && item.children.length > 0) {
            let res = this.setSearchTree(item.children, value);
            if(res.length == 0 && item.key.indexOf(value.trim()) == -1) {
                temp.splice(i, 1);
            }else {
                item.children = res;
            }
        }else {
            if(item.key.indexOf(value.trim()) == -1) {
                temp.splice(i, 1);
            }
        }
    }
    return temp;
  }

2. 给叶子节点添加标示(level : 0_0_0_1)（递归），目的是看到某个叶子节点，就可以找到他的任意祖先节点，此时将所有叶子节点归到一起与关键词进行判断，返回的结果重新包装。

3. 首先给每个节点加一个标识字段（isShow），这个字段代表每个节点自描述自身是否显示，接下来递归进行循环，此时运用算法，从叶子结点开始向上递归，判断某个节点和他兄弟节点的isShow，这是会有三种情况，所有的都是true，所有的都是false，有true、也有false，再判断此时这些节点的父节点（只有一个），父节点会有两种情况，集合起来，会有三种情况需要进行改变，而改变只有两种方式，一种是父节点是true，字节点都是false，此时需要进行向下递归，将下面的所有节点都变为true，另外两种情况是子节点都是true和有true和false并且父元素是false，此时都是改变父元素为true，递归遍历结束后，再递归将所有的false的节点删除掉。

* @func  setTreeAddLevelAndIsShow
* @desc  递归函数 给数据加上 level 和 isShow 字段
* @param {Arr} data -- 原始数组
* @param {Str} level -- 格式：level ：0_0_1_2
* @param {Str} value -- 搜索的关键字
* @return {Arr} TreeAddLevelAndIsShow 返回带level和isShow的数组
**/
setTreeAddLevelAndIsShow(datal, value) {
    // let temp = 0;
    let treeAddLevelAndIsShow = deepClone(data);
    treeAddLevelAndIsShow.map(item => {
        // item.level = `${level}${level ? '_' : ''}${temp++}`;
        let flag = item.key.indexOf(value.trim()) > -1 ||
        ( item.dataName ? (item.dataName.indexOf(value.trim()) > -1) : '' )
        if(flag) {
            item.isShow = true;
        }else {
            item.isShow = false;
        }
        if(item.children && item.children.length > 0) {
            item.children = this.setTreeAddLevelAndIsShow(item.children, value);
        }
    })
    return treeAddLevelAndIsShow;
}

/**
* @func  judgeTreeNodeShow
* @desc  通过isShow判断每个节点是否需要显示
* @param {Arr} data -- 原始数组
* @return {Arr} newData -- 返回的新数组
**/
judgeTreeNodeShow(data) {
    let newData = deepClone(data);
    newData.map(item => {
        if(item.children && item.children.length > 0) {
            item.children = this.judgeTreeNodeShow(item.children);
            if(item.isShow) {
                switch(this.judgeChildrenType(item.children)) {
                    case 0 :
                        item.children = this.repeatChangeIsShow(item.children);
                    break;
                    case 1 :
                        // do nothing
                    break;
                    case 2 :
                        // do nothing
                    break;
                }
            }else {
                switch(this.judgeChildrenType(item.children)) {
                    case 0 :
                        // do nothing
                    break;
                    case 1 :
                    case 2 :
                        item.isShow = true;
                    break;
                }
            }
        }
    });
    return newData;
}

/**
* @func  judgeChildrenType
* @desc  判断传入数据的children的类型种类
* @param  {arr} data
* @return  {Num} 0-都是false  1-都是true  2-true和false都有
**/
judgeChildrenType(data) {
    let newData = deepClone(data);
    let showFlag = newData.some(item => {
        return item.isShow==true
    })
    let deleteFlag = newData.some(item => {
        return item.isShow==false
    })
    if(showFlag && deleteFlag) {
        return 2;
    }else if(showFlag && !deleteFlag) {
        return 1;
    }else {
        return 0;
    }
}

/**
* @func  repeatChangeIsShow
* @desc  递归从根到下改变每个节点的isShow为true
* @param  {Arr} data
* @return  {Arr} newData
**/
repeatChangeIsShow(data) {
    let newData = deepClone(data);
    newData.map(item => {
        item.isShow = true;
        if(item.children && item.children.length > 0) {
            this.repeatChangeIsShow(item.children)
        }
    })
    return newData;
},

/**
* @func  recoverTreeData
* @desc  恢复 tree 的结构
* @param {Arr} data -- 原始数组
* @return {Arr} newData -- 新数据
**/
deleteUselessTreeNode(data) {
    let newData = deepClone(data);
    for(let i=newData.length-1 ; i>=0 ; i--) {
        let item = newData[i];
        if(item.isShow == false) {
            newData.splice(i, 1);
        }else {
            if(item.children && item.children.length>0) {
                item.children = this.deleteUselessTreeNode(item.children);
            }
        }
    }
    return newData;
}

---

1.22

• 履约 时间片规则展示 tree 后端返回数据结构更改，其中需要显示的字段relateName要传递一个包含id的数组到后端，多次异步ajax请求数据，此时出现两个问题：
  1. 如果每次请求回来的数据都cursor.set，会造成只有最后一次的ajax请求的数据储存成功。 解决：使用全局变量，每次数据回来时，都改变的是同一个全局变量。
  2. 按照第一种方案进行处理，出现第二个问题，如果ajax数据回来，都修改的是同一个全局变量，此时会出现ajax接口调用成功，数据返回正常，但是ajax不走then，走catch，暂时认为是因为ajax每次都修改的都是同一个变量，会出现冲突。解决： 运用promise.all方法进行处理，等待所有的异步操作完成后，一次性给tree赋值。

---

1.23

1. 完成 PageDialog 组件的编写，启发的地方是，当考虑一个组件编写的时候，应该多加考虑复用性以及兼容性，但如果兼容性太过于复杂，可以拆分成更小的组件来减少耦合。
2. 在编写的最开始，可以先设计好，应该传入哪些参数，并写好注释。

---

1.24

1. 在写一个单独的css样式时，注意尽量不要直接使用标签的名字，这样后面写相同标签时，会出现bug。

---

1.25

1. 页面初始化时，多次dispatch发送请求，多次ajax，多次cursor.set赋值，会出现冲突，前几次的赋值会被后几次覆盖，导致赋值失败，其他地方取值为none，解决办法为，第一次dispatch结束，赋值结束，再进行第二次赋值，以此循环。

---

1.30

1. 后端需要字段需要带（\n）字符串，此时可以使用Input自带属性多行属性，此时传给后台，需要使用JSON.stringify()来将回车转换成 (\n) 。