iboss_wx_app/components/dkbase/dk-tree/dk-tree.js

const tranverse = (e,itemListKey) => {
  
    for (let i in e) {
        if (e[i][itemListKey]) {
            e[i].open = false;
            tranverse(e[i][itemListKey],itemListKey)
        }
        e[i].selected = false;
    }
}
Component({
    properties: {
        treeList: Object,
        depth: {
            type: Number,
            value: 0
        },
        itemListKey: {   //子list key名
            type: String,
            value: ""
        },
        parentIdKey: {  //父级的key名
            type: String,
            value: ""
        },
        idKey: {  // id 的key名
            type: String,
            value: ""
        },
        nameKey: {  //显示的名字的key
            type: String,
            value: ""
        },
        ischekboxFlag: {  //是否显示cheakbox
            type: Boolean,
            value: false
        },
        isNameImgFlag: {  //是否显示名字前图片
            type: Boolean,
            value: true
        },
    },
    data: {},
    ready() {
        // const {treeList}=this.properties; 
        const { treeList } = this.data;
        const { itemListKey } = this.data;
        const { parentIdKey } = this.data;
        for (let i in treeList) {
            if (treeList[i][itemListKey]) {
                if(treeList[i][parentIdKey]){
                    treeList[i].open = false;
                   }else{
                    treeList[i].open = true;
                   }   
                tranverse(treeList[i][itemListKey],itemListKey);
            }
            treeList[i].selected = false;
        }
         
        this.setData({
            tree: treeList
        })
    },
    methods: {
        //设置控件信息
        setDataFromPage(data) {
            const { itemListKey } = this.data;
            const { parentIdKey } = this.data;
            let treeList = data
            for (let i in treeList) {
                if (treeList[i][itemListKey]) {
                   if(treeList[i][parentIdKey]){
                    treeList[i].open = false;
                   }else{
                    treeList[i].open = true;
                   }   
                    tranverse(treeList[i][itemListKey],itemListKey);
                }
                treeList[i].selected = false;
            }
             
            this.setData({
                tree: treeList
            })
           
          },
        //修改折叠状态
        changeOpen(tree, id,itemListKey,idKey) {
            for (let i = 0; i < tree.length; i += 1) {
                if (tree[i][idKey] === id) {
                    tree[i].open = !tree[i].open;
                }
                if (tree[i].hasOwnProperty(itemListKey) && tree[i][itemListKey].length !== 0) {
                    this.changeOpen(tree[i][itemListKey], id, itemListKey);
                }
            }
            return;
        },
        onchange(e) {
            const { treeList } = this.data;
            const { itemListKey } = this.data;
            const { idKey } = this.data;
            const { id } = e.currentTarget.dataset;
            this.changeOpen(treeList, id, itemListKey,idKey);
            this.triggerEvent('change', id, { bubbles: true, composed: true });
            this.setData({
                tree: treeList
            })
        },
        change(e) {
            const id = e.detail;
            const { treeList } = this.data;
            const { itemListKey } = this.data;
            const { idKey } = this.data;
            this.changeOpen(treeList, id,itemListKey,idKey);
            this.setData({
                tree: treeList
            })
        },
        // 点击名字
        clickName(e){
            const { idKey } = this.data;
            const { nameKey } = this.data; 
     
           this.triggerEvent('clickName', {id:e.currentTarget.dataset.item[idKey],name:e.currentTarget.dataset.item[nameKey]} );
   
        },
        //点击控件里的控件 回调
        subclickName(e){             
            this.triggerEvent('clickName', {id:e.detail.id,name:e.detail.name} );
        },
        click(e) {
            const t = this.selectAllComponents('#treeSelect');
            t.forEach(item => {
                item.click(e);
            })
            const { idKey } = this.data;
            let id = '';
            if (e.detail) {
                id = e.detail[idKey];
            }
            const { treeList } = this.data;
            this.setStatus(treeList, id,idKey);
            this.setData({
                tree: treeList
            })
        },
        handleClick(e) {
            const t = this.selectAllComponents('#treeSelect');
            t.forEach(item => {
                item.click(e);
            })
            //   const {id}=e.currentTarget.dataset;
            const { id, value } = e.currentTarget.dataset;
            const { treeList } = this.data;
            const { idKey } = this.data;
            // const value = this.getData(treeList, id)
            this.setStatus(treeList, id,idKey);
            this.triggerEvent('onclick', { id, value, treeList }, { composed: true, bubbles: true });
            this.setData({
                tree: treeList
            })
        },
        //切换选中状态
        setStatus(tree, id,idKey) {
            for (let i = 0; i < tree.length; i += 1) {
                if (tree[i][idKey] == id) {
                    tree[i].selected = true;
                } else {
                    tree[i].selected = false;
                }
                if (tree[i][itemListKey]) {
                    this.setStatus(tree[i][itemListKey], id,idKey);
                }
            }
            return;
        },
        //获取选中项信息
        getData(tree, id,idKey) {
            for (let i = 0; i < tree.length; i += 1) {
                if (tree[i][idKey] === id) {
                    return tree[i].name;
                }
                if (tree[i][itemListKey]) {
                    this.getData(tree[i][itemListKey], id,idKey);
                }
            }
            return '';
        },
 
    }
})