227 lines
7.6 KiB
JavaScript
227 lines
7.6 KiB
JavaScript
Component({
|
|
/**
|
|
* 组件的属性列表
|
|
*/
|
|
properties: {
|
|
dataTree: {
|
|
type: Array,
|
|
value: []
|
|
},
|
|
treeListIndex: { // 当期树形列表的索引
|
|
type: Number,
|
|
value: 1
|
|
},
|
|
isOpenAll: { // 是否展开全部节点
|
|
type: Boolean,
|
|
value: false
|
|
},
|
|
showCheckBox: { // 是否显示选择框
|
|
type: Boolean,
|
|
value: true
|
|
}
|
|
},
|
|
observers: {
|
|
'dataTree': function (params) {
|
|
this.setData({
|
|
tree: this._initSourceData(params)
|
|
})
|
|
}
|
|
},
|
|
/**
|
|
* 组件的初始数据
|
|
*/
|
|
data: {
|
|
tree: [],
|
|
allChoiceIdList: [] // 所有选中的id数组
|
|
},
|
|
/**
|
|
* 组件的方法列表
|
|
*/
|
|
methods: {
|
|
isOpen(e) {
|
|
const open = 'tree[' + e.currentTarget.dataset.index + '].open'
|
|
this.setData({
|
|
[open]: !this.data.tree[e.currentTarget.dataset.index].open
|
|
})
|
|
},
|
|
_initSourceData(nodes) {
|
|
nodes.forEach(element => {
|
|
if (element.checked === undefined) element.checked = 0
|
|
element.open = this.properties.isOpenAll // 是否展开
|
|
if (element.children && element.children.length > 0) element.children = this._initSourceData(element.children)
|
|
})
|
|
return nodes
|
|
},
|
|
/**
|
|
* 选择节点
|
|
* @param {*} e
|
|
*/
|
|
select(e) {
|
|
this._initSourceData(this.data.tree);
|
|
let item = e.currentTarget.dataset.item
|
|
if(item.children && item.children.length>0){
|
|
wx.showToast({
|
|
title: "请选择进度计划任务！",
|
|
icon: 'none',
|
|
duration: 600,
|
|
mask: true
|
|
});
|
|
return false;
|
|
}
|
|
item = this._handleClickItem(item)
|
|
this.data.tree = this._updateTree(this.data.tree, item)
|
|
this.setData({
|
|
tree: this.data.tree
|
|
})
|
|
this.data.allChoiceIdList = this.getAllChoiceId(this.data.tree)
|
|
this.triggerEvent('select', {
|
|
item: item,
|
|
idList: this.data.allChoiceIdList
|
|
}, {
|
|
bubbles: true,
|
|
composed: true
|
|
})
|
|
this.triggerEvent('clickItem', {
|
|
item: item
|
|
}, {
|
|
bubbles: true,
|
|
composed: true
|
|
})
|
|
},
|
|
// 选择冒泡事件
|
|
handleSelect(e) {
|
|
let parent = e.currentTarget.dataset.parent
|
|
let currentTap = e.detail.item
|
|
console.log('parent节点:', parent)
|
|
console.log('currentTap节点:', currentTap)
|
|
// 修正它的父节点
|
|
parent.children = this._updateTree(parent.children, currentTap)
|
|
const {
|
|
half,
|
|
all,
|
|
none
|
|
} = this.getChildState(parent.children)
|
|
// console.log(`half:${half},all:${all},none:${none}`)
|
|
if (half) parent.checked = -1
|
|
if (all) parent.checked = 1
|
|
if (none) parent.checked = 0
|
|
// 修正整个tree
|
|
this.data.tree = this._updateTree(this.data.tree, parent)
|
|
this.setData({
|
|
tree: this.data.tree
|
|
})
|
|
this.data.allChoiceIdList = this.getAllChoiceId(this.data.tree)
|
|
this.triggerEvent('select', {
|
|
item: parent,
|
|
idList: this.data.allChoiceIdList
|
|
}, {
|
|
bubbles: true,
|
|
composed: true
|
|
})
|
|
},
|
|
/**
|
|
* @method 处理点击选择
|
|
* @param {Object} node 节点对象
|
|
* @returns {Object} node 处理完毕的节点
|
|
* @description 有子节点则全选中或全取消，当前为最底层单节点则选中或单取消
|
|
*/
|
|
_handleClickItem(node) {
|
|
switch (node.checked) {
|
|
case 0:
|
|
node.checked = 1
|
|
if (node.children && node.children.length > 0) node.children = this._allChoice(node.children)
|
|
break;
|
|
case 1:
|
|
node.checked = 0
|
|
if (node.children && node.children.length > 0) node.children = this._allCancel(node.children)
|
|
break;
|
|
default:
|
|
node.checked = 1
|
|
if (node.children && node.children.length > 0) node.children = this._allChoice(node.children)
|
|
break;
|
|
}
|
|
return node
|
|
},
|
|
/**
|
|
* @method 全选
|
|
* @param {Array} nodes 节点数组
|
|
* @returns {Array} nodes 处理完毕的节点数组
|
|
*/
|
|
_allChoice(nodes) {
|
|
if (nodes.length <= 0) return
|
|
for (let i = 0; i < nodes.length; i++) {
|
|
nodes[i].checked = 1
|
|
if (nodes[i].children && nodes[i].children.length > 0) nodes[i].children = this._allChoice(nodes[i].children)
|
|
}
|
|
return nodes
|
|
},
|
|
/**
|
|
* @method 全取消
|
|
* @param {Array} nodes 节点数组
|
|
* @returns {Array} nodes 处理完毕的节点数组
|
|
*/
|
|
_allCancel(nodes) {
|
|
if (nodes.length <= 0) return
|
|
for (let i = 0; i < nodes.length; i++) {
|
|
nodes[i].checked = 0
|
|
if (nodes[i].children && nodes[i].children.length > 0) nodes[i].children = this._allCancel(nodes[i].children)
|
|
}
|
|
return nodes
|
|
},
|
|
/**
|
|
* @method 更新tree
|
|
* @param {Array} tree 节点树
|
|
* @param {Object} newItem 需要替换新节点
|
|
* @description 找到tree中目标进行替换
|
|
*/
|
|
_updateTree(tree, newItem) {
|
|
if (!tree || tree.length <= 0) return
|
|
for (let i = 0; i < tree.length; i++) {
|
|
if (tree[i].id === newItem.id) {
|
|
tree[i] = newItem
|
|
break
|
|
} else {
|
|
if (tree[i].children && tree[i].children.length > 0) {
|
|
tree[i].children = this._updateTree(tree[i].children, newItem)
|
|
}
|
|
}
|
|
}
|
|
return tree
|
|
},
|
|
/**
|
|
* @method 获取子节点的状态
|
|
* @param {Array} node 节点数组
|
|
*/
|
|
getChildState(node) {
|
|
let all = true;
|
|
let none = true;
|
|
for (let i = 0, j = node.length; i < j; i++) {
|
|
const n = node[i];
|
|
if (n.checked === 1 || n.checked === -1) {
|
|
none = none && false;
|
|
}
|
|
if (n.checked === 0 || n.checked === -1) {
|
|
all = all && false
|
|
}
|
|
}
|
|
return {
|
|
all,
|
|
none,
|
|
half: !all && !none
|
|
};
|
|
},
|
|
// 获取所有选中的节点id
|
|
getAllChoiceId(nodes, res = []) {
|
|
for (let i = 0; i < nodes.length; i++) {
|
|
if (nodes[i].checked === 1) {
|
|
var obj = {}
|
|
obj.planId = nodes[i].id
|
|
obj.planName = nodes[i].taskName
|
|
res.push(obj)
|
|
}
|
|
if (nodes[i].children && nodes[i].children.length > 0) this.getAllChoiceId(nodes[i].children, res)
|
|
}
|
|
return res
|
|
}
|
|
}
|
|
}) |