数组添加键值对

• 给数组里面的每个object元素添加新的key值，

export function addKeysToData(arr, newKeys, froms) {
    if (Array.isArray(arr)) {
        arr.map((ele) => {
            for (let i = 0; i < newKeys.length; i++) {
                Vue.set(ele, newKeys[i], ele[froms[i]])
            }
            return ele
        })
    }
    return arr
}

功能概述

接收参数:

• arr: 需要修改的数据数组。

• newKeys: 要添加的新键名数组。

• froms: 原数据中对应值的键名数组。

功能描述:

1. 遍历数组: 遍历arr中的每个对象。

2. 添加新键值对: 对于每个对象，根据newKeys和froms数组中的对应索引，从对象中获取值并添加新的键值对。

3. 使用Vue.set方法: 使用Vue的Vue.set方法动态添加新键值对，确保响应式更新。

示例:

• 原始数组:

  • [{"id":1,"name":"张三"},{"id":2,"name":"李四"}]

     

• 调用函数:

  • addKeysToData(arr, ["userId","userName"], ["id","name"])

     

• 返回结果:

  • 结果将是：

    javascript[
      {"id":1,"name":"张三","userId":1,"userName":"张三"},
      {"id":2,"name":"李四","userId":2,"userName":"李四"}
    ]

     

注意事项:

• 使用Vue.set方法是为了确保Vue能够检测到新添加的属性，从而触发视图更新。

• 如果不需要Vue的响应式特性，可以使用Object.defineProperty方法替代Vue.set。

返回值:

• 返回修改后的数组arr。

 

数组转换为树结构

将数组根据key值转换为有层级的树结构数组，必须有id属性

export function arrayToTree(arr, key = 'parent_id', needSort = true, type = 'id') {
    let tree = [] //最后生成的树列表
​
​
    当为公司列表数据时，对本部数据进行处理,因为id有重复，则将带有本部的数据id加上'-1'
    for (let i = 0; i < arr.length; i++) {
        if (arr[i].name && (arr[i].name.indexOf("(本部)") != -1 || arr[i].name.indexOf("（本部）") != -1)) {
            arr[i].id += "-1";
        }
    }
    //查找一级节点
    let deleteIndexArr = []
    for (let i = 0; i < arr.length; i++) {
        let ele = arr[i]
        //如果是一节节点，直接插入tree列表
        if (!ele[key]) {
            tree.push(ele)
            deleteIndexArr.push(i)
        } else {
            let parentExist = false
            for (let j = 0; j < arr.length; j++) {
                if (ele[key] == arr[j].id) {
​
                    parentExist = true
                    break
                }
            }
            //如果在数组中不存在父节点,则在当前树中为1及节点
            if (!parentExist) {
                tree.push(ele)
                deleteIndexArr.push(i)
            }
        }
    }
    //在列表中删除一级节点
    for (let i = deleteIndexArr.length - 1; i >= 0; i--) {
        let index = deleteIndexArr[i]
        arr.splice(index, 1)
    }
    //使用完后，设置为空
    deleteIndexArr = null
​
    //循环遍历建树，直接数组为空，为防止数据错误导致死循环，暂时循环10次后退出
    let times = 0
    while (arr.length > 0 && times < 10) {
        times++
        let len = arr.length
        for (let i = 0; i < len; i++) {
            let ele = arr[i]
​
            let parentItem = findParent(tree, ele, key)
            //如果找到其父节点
            if (parentItem) {
                //如父节点已有子列表，则将当前节点插入父节点的childrenlist中
                if (parentItem.childrenList) {
                    parentItem.childrenList.push(ele)
                }
                //如果还没有子列表，创建childrenList,并将元素插入其中
                else {
                    if (!parentItem.children) {
                        Vue.set(parentItem, "children", 1);
                    }
​
                    Vue.set(parentItem, "childrenList", []);
                    parentItem.childrenList.push(ele);
                }
                arr.splice(i, 1)
                len--
                i--
            }
​
        }
    }
​
    //将找不到父节点的数据直接加入一级节点
    if (arr.length > 0) {
        tree.push(...arr)
    }
​
    function sort(eles){
        eles.sort((a, b) => a[type] < b[type] ? -1 : 1)
        eles.forEach(val => {
            if(val.childrenList && val.childrenList.length > 0){
                sort(val.childrenList)
            }
        })
    }
​
    if (needSort) {
        sort(tree)
    }
​
    return tree
}

功能概述

接收参数:

• arr: 需要转换为树形结构的原始数组。

• key: 指定作为父节点ID的属性名，默认为"parent_id"。

• needSort: 是否需要对树进行排序，默认为true。

• type: 排序依据的属性名，默认为"id"。

功能描述:

1. 处理特殊数据: 如果数组中的某个元素的name属性包含"(本部)"或"（本部）"，则在其id属性后加上"-1"。

2. 查找一级节点: 找出没有父节点的元素，即一级节点，并将它们添加到树形结构中。

3. 构建树形结构: 循环遍历数组，为每个元素找到其父节点，并将其添加到父节点的子节点列表中。

4. 处理剩余元素: 如果循环结束后仍有元素未被添加到树中，则将这些元素视为一级节点添加到树中。

5. 排序树形结构: 如果needSort为true，则对整个树形结构进行排序。

示例:

• 原始数组:

  • [{"id":1,"name":"部门A"},{"id":2,"name":"部门B","parent_id":1},{"id":3,"name":"小组X","parent_id":2},{"id":4,"name":"小组Y","parent_id":1}]

     

• 调用函数:

  • arrayToTree(arr)

     

• 返回结果:

  • 结果将是一个树形结构，类似于：

    javascript[
      {"id":1,"name":"部门A","childrenList":[{"id":2,"name":"部门B"},{"id":4,"name":"小组Y"}]},
      {"id":2,"name":"部门B","childrenList":[{"id":3,"name":"小组X"}]}
    ]

     

注意事项:

• 函数假设输入的数组中的元素具有正确的parent_id信息，以构建出正确的树形结构。

• 如果needSort为true，则会对树形结构进行排序，排序依据为type属性。

返回值:

• 返回一个树形结构的数组，其中包含了原始数组中的所有数据，并且按照层级关系组织。

 

合并两数组转树形结构

将两个数组合并成一个数组，并根据key值转换为有层级的树结构数组，必须有id属性,两个数组分别来自不同数据源，因此ID可能有重复，第二个数组仅只能包含最末级子节点

export function twoArrayToTree(arr1, arr2, key = "parent_id") {
    //先处理第二个数据，给id加上唯一标识
    for (let i = 0; i < arr2.length; i++) {
        arr2[i].id = 'c' + arr2[i].id
    }
    let arr = []; //临时数组，合并arr1和arr2
    arr.push(...arr1);
    //对父节点进行排序
    arr.sort((a, b) => {
        return a.id < b.id ? 1 : -1
    });
    //子节点不排序并反序后插入，目的是为了最终的树按照原先的顺序返回，
    arr.push(...arr2.reverse());
    let tree = arrayToTree(arr, key, false); //最后生成的树列表
​
    //去除掉第二个数组id前的标识
    for (let i = 0; i < arr2.length; i++) {
        arr2[i].id = arr2[i].id.substring(1)
    }
    return tree;
}

功能概述

接收参数:

• arr1: 第一个数据数组，通常包含根节点或顶级节点。

• arr2: 第二个数据数组，通常包含子节点或其他层级的节点。

• key: 指定作为父节点ID的属性名，默认为"parent_id"。

功能描述:

1. 处理第二个数组: 给arr2中的每个对象的id属性前加上"c"作为唯一标识。

2. 合并数组: 将arr1与arr2合并到一个新的数组arr中。

3. 排序父节点: 对合并后的数组arr中的父节点按id进行降序排序。

4. 插入子节点: 将arr2反向排序后插入到arr中。这样可以确保子节点按照原始顺序被正确地插入到父节点下。

5. 转换为树结构: 使用arrayToTree函数将合并后的数组转换成树形结构。

6. 移除标识: 最后移除arr2中每个对象id前的"c"标识。

示例:

• 原始数组:

  • arr1:

    [{"id":1,"name":"部门A"},{"id":2,"name":"部门B"}]

     

  • arr2:

    [{"id":3,"name":"小组X","parent_id":1},{"id":4,"name":"小组Y","parent_id":2}]

     

• 调用函数:

  • twoArrayToTree(arr1, arr2)

     

• 返回结果:

  • 结果将是一个树形结构，类似于：

    javascript[
      {"id":1,"name":"部门A","children":[{"id":"c3","name":"小组X"}]},
      {"id":2,"name":"部门B","children":[{"id":"c4","name":"小组Y"}]}
    ]

     

注意事项:

• 函数假设输入的数组已经包含了正确的parent_id信息，以构建出正确的树形结构。

• arrayToTree函数未在提供的代码片段中给出，需要确保它能够正确地将数组转换成树形结构。

返回值:

• 返回一个树形结构的数组，其中包含了arr1和arr2中的所有数据，并且按照层级关系组织。

 

数组列值组合字符串

获取数组对应列合并后的字符串，字符串用splitStr分割

export function getArrayColStrs(arr, colKey = 'id', splitStr = ',') {
    if (!arr || arr.length == 0) return '';
​
    return arr.map(e => e[colKey]).join(splitStr)
}

功能概述

接收参数:

• arr: 需要处理的数组。

• colKey: 指定从数组元素中提取的键名，默认为"id"。

• splitStr: 用于连接提取的值的分隔符，默认为,。

功能描述:

1. 检查数组: 如果arr为空或长度为0，则返回空字符串。

2. 提取键值: 从数组中的每个元素中提取指定键colKey对应的值。

3. 拼接字符串: 使用splitStr将提取的值连接成一个字符串。

示例:

• 原始数组:

  • [{"id":1,"name":"张三"},{"id":2,"name":"李四"}]

     

• 调用函数:

  • getArrayColStrs(arr, "id", ",")

     

• 返回结果:

  • 结果将是：

    plaintext
    ​
    "1,2"

     

注意事项:

• 如果数组中的元素缺少指定的键colKey，则相应的值将为undefined。

返回值:

• 返回一个字符串，其中包含了数组中所有元素的指定键值，使用splitStr分隔。

 

树形结构查找节点

在list数组中，根据id查找对应的节点

export function getNode(list, id) {
    let node = null;
    for (let i = 0; i < list.length; i++) {
        if (list[i].id == id) {
            node = list[i];
            break;
        }
        if (list[i].childrenList && list[i].childrenList.length > 0) {
            let item = getNode(list[i].childrenList, id);
            if (item != null) {
                node = item;
                break;
            }
        }
    }
    return node;
}

功能概述

接收参数:

• list: 需要搜索的树形结构数组。

• id: 需要查找的节点的ID。

功能描述:

1. 遍历树: 从list开始，递归地遍历树形结构。

2. 查找节点: 查找具有指定id的节点。

3. 返回节点: 如果找到匹配的节点，则返回该节点；否则返回null。

示例:

• 树形结构:

  • javascript[
      {"id":1,"name":"部门A","childrenList":[{"id":2,"name":"部门B"},{"id":4,"name":"小组Y"}]},
      {"id":2,"name":"部门B","childrenList":[{"id":3,"name":"小组X"}]}
    ]

     

• 调用函数:

  • getNode(tree, 3)

     

• 返回结果:

  • 结果将是：

    javascript
    ​
    {"id":3,"name":"小组X"}

     

注意事项:

• 函数假设输入的树形结构是有效的，即每个节点都有唯一的id。

• 如果树形结构中存在多个相同的id，函数只会返回第一个找到的匹配项。

返回值:

• 返回一个对象，表示找到的节点；如果没有找到，则返回null。

 

单条数据权限验证

判断选的数据是否仅有一条,且有权限

export function isOneData(selected, dataRight = null, msg) {
    if (selected.length > 1) {
        AnMsgbox.msgbox({ message: "一次仅能操作一条数据" });
        return false;
    }
    if (selected.length == 0) {
        AnMsgbox.msgbox({ message: "请选择需要操作的数据" });
        return false;
    }
    if (dataRight) {
        if (!selected[0].dataRight[dataRight] ||
            (selected[0].dataRight[dataRight] != "1" && selected[0].dataRight[dataRight] != "2")
        ) {
            AnMsgbox.msgbox({
                message: msg ?? "当前选择的数据无权限",
            });
            return false;
        }
    }
​
    return true;
}

功能概述

接收参数:

• selected: 已选中的数据项数组。

• dataRight: 可选参数，表示需要检查的数据权限键名。

• msg: 可选参数，自定义消息文本。

功能描述:

1. 检查数量: 确保selected数组中只有一条数据。

2. 提示信息: 如果selected数组为空或超过一条数据，则显示提示信息并返回false。

3. 权限检查: 如果指定了dataRight，则检查第一条数据是否具有相应的权限。

4. 返回结果: 如果通过所有检查，则返回true；否则返回false。

示例:

• 已选中数据:

  • javascript[
      {"id":1,"name":"张三","dataRight":{"edit":"1"}},
      {"id":2,"name":"李四","dataRight":{"edit":"0"}}
    ]

     

• 调用函数:

  • isOneData([selected[0]], "edit")

     

• 返回结果:

  • 结果将是：

    javascript
    ​
    true

     

注意事项:

• 如果selected数组为空或超过一条数据，函数会显示提示信息。

• 如果指定了dataRight且第一条数据不具有相应的权限，函数也会显示提示信息。

返回值:

• 返回一个布尔值，表示是否满足条件。

 

树转列表

将tree转化为list，数据扁平化

export function treeToList(tree) {
    let res = []; // 用于存储递归结果（扁平数据）
    // 递归函数
    let fn = (source) => {
        source.forEach((el) => {
            res.push(el);
            el.children && el.children > 0 ? fn(el.childrenList) : ""; // 子级递归
        });
    };
    fn(tree);
    return res;
}

功能概述

接收参数:

• tree: 需要转换的树形结构数组。

功能描述:

1. 初始化结果数组: 创建一个空数组res用于存储扁平化的数据。

2. 递归函数: 定义一个递归函数fn，用于遍历树形结构并将每个节点添加到结果数组中。

3. 遍历树: 使用fn函数遍历整个树形结构。

4. 返回结果: 返回扁平化后的数组res。

示例:

• 树形结构:

  • javascript[
      {"id":1,"name":"部门A","childrenList":[{"id":2,"name":"部门B"},{"id":4,"name":"小组Y"}]},
      {"id":2,"name":"部门B","childrenList":[{"id":3,"name":"小组X"}]}
    ]

     

• 调用函数:

  • treeToList(tree)

     

• 返回结果:

  • 结果将是：

    javascript[
      {"id":1,"name":"部门A"},
      {"id":2,"name":"部门B"},
      {"id":4,"name":"小组Y"},
      {"id":3,"name":"小组X"}
    ]

     

注意事项:

• 函数假设输入的树形结构是有效的，即每个节点都有唯一的id。

• 如果树形结构中存在多个相同的id，函数不会处理这种情况。

• 函数假设每个节点的子节点列表键名为childrenList。

返回值:

• 返回一个扁平化的数组，包含了原树形结构中的所有节点。

 

深拷贝对象|数组

深拷贝 传入数组或对象

export function deepClone(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }

    if (Array.isArray(obj)) {
        const arrCopy = [];
        for (let i = 0; i < obj.length; i++) {
            arrCopy[i] = deepClone(obj[i]);
        }
        return arrCopy;
    }

    const objCopy = {};
    for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
            objCopy[key] = deepClone(obj[key]);
        }
    }

    return objCopy;
}

功能概述

接收参数:

• obj: 需要深拷贝的对象。

功能描述:

1. 基础类型处理: 如果obj不是对象或已经是null，则直接返回obj。

2. 数组处理: 如果obj是数组，则创建一个新的数组并递归地深拷贝每个元素。

3. 对象处理: 如果obj是对象，则创建一个新的对象并递归地深拷贝每个属性。

4. 返回结果: 返回深拷贝后的对象或数组。

示例:

• 原始对象:

  • javascript{
      a: 1,
      b: [1, 2, 3],
      c: { x: 10, y: 20 },
      d: null,
      e: undefined,
      f: function() { console.log("Hello"); }
    }

     

• 调用函数:

  • deepClone(originalObj)

     

• 返回结果:

  • 结果将是：

    javascript{
      a: 1,
      b: [1, 2, 3],
      c: { x: 10, y: 20 },
      d: null,
      e: undefined,
      f: [Function: f]
    }

     

注意事项:

• 函数支持基本类型、数组和对象的深拷贝。

• 函数不支持循环引用的对象。

• 函数不深拷贝函数类型的属性。

返回值:

• 返回一个深拷贝后的对象或数组。

总结

1. 数组添加键值对 (addKeysToData):

   • 为数组中的每个对象添加新的键值对。

   • 使用 Vue.set 方法确保 Vue 的响应式更新。

2. 数组转换为树结构 (arrayToTree):

   • 将一维数组转换为树形结构。

   • 支持对树形结构进行排序。

3. 合并两数组转树形结构 (twoArrayToTree):

   • 将两个数组合并，并转换为树形结构。

   • 处理 ID 重复问题，适用于两个不同的数据源。

4. 数组列值组合字符串 (getArrayColStrs):

   • 获取数组中特定键的所有值，并用指定分隔符连接成字符串。

5. 树形结构查找节点 (getNode):

   • 在树形结构中根据 ID 查找指定节点。

6. 单条数据权限验证 (isOneData):

   • 验证用户选择的数据是否仅有一条，并且用户对该数据有操作权限。

7. 树转列表 (treeToList):

   • 将树形结构转换为扁平化的列表。

8. 深拷贝对象或数组 (deepClone):

   • 实现对象或数组的深拷贝功能。