376 lines
18 KiB
Vue
376 lines
18 KiB
Vue
|
<template>
|
||
|
|
<view v-if="node.visible"
|
||
|
|
class="ly-tree-node"
|
||
|
|
name="LyTreeNode"
|
||
|
|
ref="node">
|
||
|
|
<view class="ly-tree-node__content"
|
||
|
|
:class="{
|
||
|
|
'ly-tree-node__content-current': node.isCurrent && highlightCurrent
|
||
|
|
}"
|
||
|
|
:style="{
|
||
|
|
'padding-left': (node.level - 1) * indent + 'px'
|
||
|
|
}">
|
||
|
|
<text v-if="node.isLeaf"
|
||
|
|
class="ly-tree-node__expand-icon-holder">
|
||
|
|
</text>
|
||
|
|
<text v-else
|
||
|
|
class="ly-tree-node__expand-icon"
|
||
|
|
@click.stop="handleExpandIconClick">
|
||
|
|
{{node.expanded ? iconExpand : iconCollapse}}
|
||
|
|
</text>
|
||
|
|
|
||
|
|
<ly-checkbox v-if="checkboxVisible || radioVisible"
|
||
|
|
:type="checkboxVisible ? 'checkbox' : 'radio'"
|
||
|
|
:checked="node.checked"
|
||
|
|
:indeterminate="node.indeterminate"
|
||
|
|
:disabled="!!node.disabled"
|
||
|
|
@check="handleCheckChange(!node.checked)" />
|
||
|
|
|
||
|
|
<image v-if="node.loading"
|
||
|
|
class="ly-tree-node__loading-icon"
|
||
|
|
mode="widthFix"
|
||
|
|
src="data:image/gif;base64,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
|
||
|
|
</image>
|
||
|
|
|
||
|
|
<template v-if="node.icon && node.icon.length > 0">
|
||
|
|
<image v-if="node.icon.indexOf('/') !== -1"
|
||
|
|
class="ly-tree-node__icon"
|
||
|
|
:src="node.icon"
|
||
|
|
mode="widthFix"
|
||
|
|
@error="handleImageError">
|
||
|
|
</image>
|
||
|
|
<text v-else
|
||
|
|
class="ly-tree-node__icon"
|
||
|
|
:class="node.icon">
|
||
|
|
</text>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<text class="ly-tree-node__label"
|
||
|
|
@click.stop="handleClick">
|
||
|
|
{{node.label}}
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view v-if="(!renderAfterExpand || childNodeRendered)"
|
||
|
|
class="ly-tree-node__children"
|
||
|
|
:class="{'ly-tree-node__children-hide': !expanded}"
|
||
|
|
role="group">
|
||
|
|
<ly-tree-node v-for="cNodeId in node.childNodesId"
|
||
|
|
:nodeId="cNodeId"
|
||
|
|
:render-after-expand="renderAfterExpand"
|
||
|
|
:show-checkbox="showCheckbox"
|
||
|
|
:show-radio="showRadio"
|
||
|
|
:check-only-leaf="checkOnlyLeaf"
|
||
|
|
:key="getNodeKey(cNodeId)"
|
||
|
|
:indent="indent"
|
||
|
|
:icon-class="iconClass">
|
||
|
|
</ly-tree-node>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
getNodeKey
|
||
|
|
} from './tool/util.js';
|
||
|
|
import lyCheckbox from './components/ly-checkbox.vue';
|
||
|
|
|
||
|
|
// #ifdef APP-NVUE
|
||
|
|
var domModule = weex.requireModule('dom');
|
||
|
|
domModule.addRule('fontFace', {
|
||
|
|
'fontFamily': "lyExpandIcons",
|
||
|
|
'src': "url('data:font/truetype;charset=utf-8;base64,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')"
|
||
|
|
});
|
||
|
|
// #endif
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'LyTreeNode',
|
||
|
|
|
||
|
|
componentName: 'LyTreeNode',
|
||
|
|
|
||
|
|
components: {
|
||
|
|
lyCheckbox
|
||
|
|
},
|
||
|
|
|
||
|
|
props: {
|
||
|
|
nodeId: [Number, String],
|
||
|
|
renderAfterExpand: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
checkOnlyLeaf: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
showCheckbox: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
showRadio: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
indent: Number,
|
||
|
|
iconClass: String
|
||
|
|
},
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
node: {
|
||
|
|
indeterminate: false,
|
||
|
|
checked: false,
|
||
|
|
expanded: false
|
||
|
|
},
|
||
|
|
expanded: false,
|
||
|
|
childNodeRendered: false,
|
||
|
|
oldChecked: null,
|
||
|
|
oldIndeterminate: null,
|
||
|
|
highlightCurrent: false,
|
||
|
|
iconExpand: '\ue8ec',
|
||
|
|
iconCollapse: '\ue8ed'
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
inject: ['tree'],
|
||
|
|
|
||
|
|
computed: {
|
||
|
|
checkboxVisible() {
|
||
|
|
if (this.checkOnlyLeaf) {
|
||
|
|
return this.showCheckbox && this.node.isLeaf;
|
||
|
|
}
|
||
|
|
|
||
|
|
return this.showCheckbox;
|
||
|
|
},
|
||
|
|
radioVisible() {
|
||
|
|
if (this.checkOnlyLeaf) {
|
||
|
|
return this.showRadio && this.node.isLeaf;
|
||
|
|
}
|
||
|
|
|
||
|
|
return this.showRadio;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
watch: {
|
||
|
|
'node.indeterminate'(val) {
|
||
|
|
this.handleSelectChange(this.node.checked, val);
|
||
|
|
},
|
||
|
|
'node.checked'(val) {
|
||
|
|
this.handleSelectChange(val, this.node.indeterminate);
|
||
|
|
},
|
||
|
|
'node.expanded'(val) {
|
||
|
|
this.$nextTick(() => this.expanded = val);
|
||
|
|
if (val) {
|
||
|
|
this.childNodeRendered = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
getNodeKey(nodeId) {
|
||
|
|
let node = this.tree.store.root.getChildNodes([nodeId])[0];
|
||
|
|
return getNodeKey(this.tree.nodeKey, node.data);
|
||
|
|
},
|
||
|
|
|
||
|
|
handleSelectChange(checked, indeterminate) {
|
||
|
|
if (this.oldChecked !== checked && this.oldIndeterminate !== indeterminate) {
|
||
|
|
|
||
|
|
if (this.checkOnlyLeaf && !this.node.isLeaf) return;
|
||
|
|
|
||
|
|
if (this.checkboxVisible) {
|
||
|
|
const allNodes = this.tree.store._getAllNodes();
|
||
|
|
this.tree.$emit('check-change', {
|
||
|
|
checked,
|
||
|
|
indeterminate,
|
||
|
|
node: this.node,
|
||
|
|
data: this.node.data,
|
||
|
|
checkedall: allNodes.every(item => item.checked)
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
this.tree.$emit('radio-change', {
|
||
|
|
checked,
|
||
|
|
node: this.node,
|
||
|
|
data: this.node.data,
|
||
|
|
checkedall: false
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!this.expanded && this.tree.expandOnCheckNode && checked) {
|
||
|
|
this.handleExpandIconClick();
|
||
|
|
}
|
||
|
|
|
||
|
|
this.oldChecked = checked;
|
||
|
|
this.indeterminate = indeterminate;
|
||
|
|
},
|
||
|
|
|
||
|
|
handleClick(e) {
|
||
|
|
this.tree.store.setCurrentNode(this.node);
|
||
|
|
this.tree.$emit('current-change', {
|
||
|
|
node: this.node,
|
||
|
|
data: this.tree.store.currentNode ? this.tree.store.currentNode.data : null,
|
||
|
|
currentNode: this.tree.store.currentNode
|
||
|
|
});
|
||
|
|
this.tree.currentNode = this.node;
|
||
|
|
|
||
|
|
if (this.tree.expandOnClickNode) {
|
||
|
|
this.handleExpandIconClick();
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.tree.checkOnClickNode && !this.node.disabled) {
|
||
|
|
(this.checkboxVisible || this.radioVisible) && this.handleCheckChange(!this.node.checked);
|
||
|
|
}
|
||
|
|
|
||
|
|
this.tree.$emit('node-click', this.node);
|
||
|
|
|
||
|
|
// #ifdef APP-NVUE
|
||
|
|
e.stopPropagation()
|
||
|
|
// #endif
|
||
|
|
},
|
||
|
|
|
||
|
|
handleExpandIconClick() {
|
||
|
|
if (this.node.isLeaf) return;
|
||
|
|
|
||
|
|
if (this.expanded) {
|
||
|
|
this.tree.$emit('node-collapse', this.node);
|
||
|
|
this.node.collapse();
|
||
|
|
} else {
|
||
|
|
this.node.expand();
|
||
|
|
this.tree.$emit('node-expand', this.node);
|
||
|
|
|
||
|
|
if (this.tree.accordion) {
|
||
|
|
uni.$emit(`${this.tree.elId}-tree-node-expand`, this.node);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
handleCheckChange(checked) {
|
||
|
|
if (this.node.disabled) return;
|
||
|
|
|
||
|
|
if (this.checkboxVisible) {
|
||
|
|
this.node.setChecked(checked, !(this.tree.checkStrictly || this.checkOnlyLeaf));
|
||
|
|
} else {
|
||
|
|
this.node.setRadioChecked(checked);
|
||
|
|
}
|
||
|
|
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.tree.$emit('check', {
|
||
|
|
node: this.node,
|
||
|
|
data: this.node.data,
|
||
|
|
checkedNodes: this.tree.store.getCheckedNodes(),
|
||
|
|
checkedKeys: this.tree.store.getCheckedKeys(),
|
||
|
|
halfCheckedNodes: this.tree.store.getHalfCheckedNodes(),
|
||
|
|
halfCheckedKeys: this.tree.store.getHalfCheckedKeys()
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
handleImageError() {
|
||
|
|
this.node.icon = this.tree.defaultNodeIcon;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
created() {
|
||
|
|
if (!this.tree) {
|
||
|
|
throw new Error('Can not find node\'s tree.');
|
||
|
|
}
|
||
|
|
|
||
|
|
const props = this.tree.props || {};
|
||
|
|
const childrenKey = props['children'] || 'children';
|
||
|
|
|
||
|
|
this.node = this.tree.store.nodesMap[this.nodeId];
|
||
|
|
this.highlightCurrent = this.tree.highlightCurrent;
|
||
|
|
|
||
|
|
if (this.node.expanded) {
|
||
|
|
this.expanded = true;
|
||
|
|
this.childNodeRendered = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.$watch(`node.data.${childrenKey}`, () => {
|
||
|
|
this.node.updateChildren();
|
||
|
|
});
|
||
|
|
|
||
|
|
if (this.tree.accordion) {
|
||
|
|
uni.$on(`${this.tree.elId}-tree-node-expand`, node => {
|
||
|
|
if (this.node.id !== node.id && this.node.level === node.level) {
|
||
|
|
this.node.collapse();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
beforeDestroy() {
|
||
|
|
this.$parent = null;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.ly-tree-node__content {
|
||
|
|
/* #ifndef APP-NVUE */
|
||
|
|
display: flex;
|
||
|
|
/* #endif */
|
||
|
|
flex-direction: row;
|
||
|
|
align-items: center;
|
||
|
|
height: 70rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ly-tree-node__expand-icon-holder {
|
||
|
|
width: 50rpx;
|
||
|
|
height: 36rpx;
|
||
|
|
padding-right: 16rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ly-tree-node__icon {
|
||
|
|
width: 40rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
margin-right: 16rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ly-tree-node__loading-icon {
|
||
|
|
margin-right: 16rpx;
|
||
|
|
width: 30rpx;
|
||
|
|
height: 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ly-tree-node__label {
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #606266;
|
||
|
|
width: 750rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ly-tree-node__children {
|
||
|
|
overflow: hidden;
|
||
|
|
background-color: transparent
|
||
|
|
}
|
||
|
|
|
||
|
|
.ly-tree-node__children-hide {
|
||
|
|
height: 0px;
|
||
|
|
line-height: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ly-tree-node__content-current {
|
||
|
|
background-color: #F5F7FA
|
||
|
|
}
|
||
|
|
|
||
|
|
/* icon-start */
|
||
|
|
/* #ifndef APP-NVUE */
|
||
|
|
@font-face {
|
||
|
|
font-family: "lyExpandIcons";
|
||
|
|
src: url('data:font/truetype;charset=utf-8;base64,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') format('truetype');
|
||
|
|
}
|
||
|
|
/* #endif */
|
||
|
|
|
||
|
|
.ly-tree-node__expand-icon {
|
||
|
|
font-family: lyExpandIcons;
|
||
|
|
font-size: 36rpx;
|
||
|
|
font-style: normal;
|
||
|
|
text-decoration: none;
|
||
|
|
text-align: center;
|
||
|
|
color: #DCDFE6;
|
||
|
|
font-weight: 500;
|
||
|
|
padding-right: 16rpx
|
||
|
|
}
|
||
|
|
/* icon-end */
|
||
|
|
</style>
|