424 lines
10 KiB
Vue
424 lines
10 KiB
Vue
|
<template>
|
||
|
|
<view ref="node"
|
||
|
|
name="LyTreeNode"
|
||
|
|
v-show="node.visible"
|
||
|
|
class="ly-tree-node"
|
||
|
|
:class="{
|
||
|
|
'is-expanded': expanded,
|
||
|
|
'is-hidden': !node.visible,
|
||
|
|
'is-checked': !node.disabled && node.checked
|
||
|
|
}"
|
||
|
|
role="treeitem"
|
||
|
|
@tap.stop="handleClick" >
|
||
|
|
<view class="ly-tree-node__content"
|
||
|
|
:class="{
|
||
|
|
'is-current': node.isCurrent && highlightCurrent
|
||
|
|
}"
|
||
|
|
:style="{
|
||
|
|
'padding-left': (node.level - 1) * indent + 'px'
|
||
|
|
}">
|
||
|
|
<text
|
||
|
|
@tap.stop="handleExpandIconClick"
|
||
|
|
:class="[
|
||
|
|
{
|
||
|
|
'is-leaf': node.isLeaf,
|
||
|
|
expanded: !node.isLeaf && node.expanded
|
||
|
|
},
|
||
|
|
'ly-tree-node__expand-icon',
|
||
|
|
iconClass ? iconClass : 'ly-iconfont ly-icon-caret-right'
|
||
|
|
]">
|
||
|
|
</text>
|
||
|
|
|
||
|
|
<ly-checkbox v-if="checkboxVisible || radioVisible"
|
||
|
|
:type="checkboxVisible ? 'checkbox' : 'radio'"
|
||
|
|
:checked="node.checked"
|
||
|
|
:indeterminate="node.indeterminate"
|
||
|
|
:disabled="!!node.disabled"
|
||
|
|
@check="handleCheckChange(!node.checked)"/>
|
||
|
|
|
||
|
|
<text v-if="node.loading"
|
||
|
|
class="ly-tree-node__loading-icon ly-iconfont ly-icon-loading">
|
||
|
|
</text>
|
||
|
|
|
||
|
|
<template v-if="node.icon && node.icon.length > 0">
|
||
|
|
<image
|
||
|
|
v-if="node.icon.indexOf('/') !== -1"
|
||
|
|
class="ly-tree-node__icon"
|
||
|
|
mode="widthFix"
|
||
|
|
:src="node.icon"
|
||
|
|
@error="handleImageError"
|
||
|
|
>
|
||
|
|
</image>
|
||
|
|
<text v-else
|
||
|
|
class="ly-tree-node__icon"
|
||
|
|
:class="node.icon">
|
||
|
|
</text>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<text class="ly-tree-node__label">{{node.label}}</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view v-if="!renderAfterExpand || childNodeRendered"
|
||
|
|
v-show="expanded"
|
||
|
|
class="ly-tree-node__children"
|
||
|
|
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';
|
||
|
|
|
||
|
|
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
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
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() {
|
||
|
|
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);
|
||
|
|
},
|
||
|
|
|
||
|
|
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.');
|
||
|
|
}
|
||
|
|
|
||
|
|
this.node = this.tree.store.nodesMap[this.nodeId];
|
||
|
|
this.highlightCurrent = this.tree.highlightCurrent;
|
||
|
|
|
||
|
|
if (this.node.expanded) {
|
||
|
|
this.expanded = true;
|
||
|
|
this.childNodeRendered = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
const props = this.tree.props || {};
|
||
|
|
const childrenKey = props['children'] || 'children';
|
||
|
|
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 {
|
||
|
|
white-space: nowrap;
|
||
|
|
outline: 0
|
||
|
|
}
|
||
|
|
|
||
|
|
.ly-tree-node__content {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
height: 70rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ly-tree-node__content.is-current {
|
||
|
|
background-color: #F5F7FA;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ly-tree-node__content>.ly-tree-node__expand-icon {
|
||
|
|
padding: 12rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ly-tree-node__checkbox {
|
||
|
|
display: flex;
|
||
|
|
margin-right: 16rpx;
|
||
|
|
width: 40rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ly-tree-node__checkbox>image {
|
||
|
|
width: 40rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ly-tree-node__expand-icon {
|
||
|
|
color: #C0C4CC;
|
||
|
|
font-size: 28rpx;
|
||
|
|
-webkit-transform: rotate(0);
|
||
|
|
transform: rotate(0);
|
||
|
|
-webkit-transition: -webkit-transform .3s ease-in-out;
|
||
|
|
transition: -webkit-transform .3s ease-in-out;
|
||
|
|
transition: transform .3s ease-in-out;
|
||
|
|
transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out
|
||
|
|
}
|
||
|
|
|
||
|
|
.ly-tree-node__expand-icon.expanded {
|
||
|
|
-webkit-transform: rotate(90deg);
|
||
|
|
transform: rotate(90deg)
|
||
|
|
}
|
||
|
|
|
||
|
|
.ly-tree-node__expand-icon.is-leaf {
|
||
|
|
color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ly-tree-node__icon {
|
||
|
|
width: 34rpx;
|
||
|
|
height: 34rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
margin-right: 16rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ly-tree-node__label {
|
||
|
|
font-size: 28rpx
|
||
|
|
}
|
||
|
|
|
||
|
|
.ly-tree-node__loading-icon {
|
||
|
|
margin-right: 16rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #C0C4CC;
|
||
|
|
-webkit-animation: rotating 2s linear infinite;
|
||
|
|
animation: rotating 2s linear infinite
|
||
|
|
}
|
||
|
|
|
||
|
|
.ly-tree-node>.ly-tree-node__children {
|
||
|
|
overflow: hidden;
|
||
|
|
background-color: transparent
|
||
|
|
}
|
||
|
|
|
||
|
|
.ly-tree-node>.ly-tree-node__children.collapse-transition {
|
||
|
|
transition: height .3s ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ly-tree-node.is-expanded>.ly-tree-node__children {
|
||
|
|
display: block
|
||
|
|
}
|
||
|
|
|
||
|
|
.ly-tree-node_collapse {
|
||
|
|
overflow: hidden;
|
||
|
|
padding-top: 0;
|
||
|
|
padding-bottom: 0;
|
||
|
|
}
|
||
|
|
/* lyTree-end */
|
||
|
|
|
||
|
|
/* iconfont-start */
|
||
|
|
@font-face {
|
||
|
|
font-family: "ly-iconfont";
|
||
|
|
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPsAAsAAAAACKwAAAOeAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqFDIQPATYCJAMMCwgABCAFhG0HQBtfB8gekiSCdAwUAKgCFMA5Hj7H0PeTlABUr57PVyGqugqzSWJnNwWoWJjx/9rUr4TPL1ZSQpU2mycqwoRwIN3p+MkqMqyEW+OtMBLPSUBb8v//XtWMKTavxYIUsT/Wy1qbQzkBDOYEKGB7dVpPyVqgCnJNwvMvhZl10nMCtQbFoPVhY8ZDncJfF4grbqpQ13AqE52hWqgcOFrEQ6hWnW5VfMCD7Pfjn4WoI6nI/K0bl0MNGPBz0qcflVqYnvCA4vNDPUXGPFCIw8HgtsqiOK9SrW2smm6sVITElWlpISMdVBn8wyMJopLfXg+myZ48KCrSkvj9g37U1ItbXYke4APwXxK3N4TuehyBfmM0I3zbNdt7uk3VnjPtzX0rnIl7z7bZvb/thHohsu9QuykKo+Cws4nL7LsPmI3n2qN9B9upZEIKd4hu0NCKi0rt7fNtdl+I1N25hOJMDQK6odS123tROR7Pg8toEhDaF+kR0TYjxW6M58F5+ZNQOxmZHtE2g+IYjxjlNy/yIRQpCmrgq5R4/3jx8PvT8Ha8d3/xiLnt4EGyaDnznzRv8vpyZ+9TFHf/ntX9e59A+b6+fPHd5+dy0wYHVvHOroWbnWe879O9DnL53bN/gUHuwm28b/n8i/V3ry4E3IoXNqS6Rvs0LhJxeNVjoUkM3LKosU+0a6rh45FVvLt+2oz7Zd53b4QOy7/9snDXHbqVu+A+f8r7PnM2H8kXrWm5c8/vLu7LqRee7HW637mz3kHc5U/RCXf25d7G8tkdgEfwIpzpkknGpaMw3ww55q9Mn9OQNyua/wB/49OOWydn4eL/6roCfjx6FMmcxfJStYRKfd3UwoHiML4rF4uMSK+SvYTuNxMHrpl8yd3Q6v32cAeo/KFaowBJlQHIqo3zi3geKtRZhErVlqDWnOGn67QRKkWpwaw1AkKza5A0egFZszf8In4HFTp9h0rNUQm1NqP1lXUmgyuDBVUlNYi2gHA98FnokUreOZaac1xV1JlMMZGKEs+QdCLVrgynPhUcO0pzzYyUjDAReGSYeBl13YCEIrCpLhOWlGE+mWRD35TQAw8UawRKJVEGQrMAwekCPpaMlpTOz49FmeZwqcREX1t3Ikoo4dMTaQmpBfzhRn9R30uZXTKXKUOSmLSKEQIeYhjqKZcrcIzhMLLRrJMSrA35UF4yGMaWGhPHm733dwJq+Z/NkSJHUXemCirjgpuWrHMD1eC+mQUAAAA=') format('woff2');
|
||
|
|
}
|
||
|
|
|
||
|
|
.ly-iconfont {
|
||
|
|
font-family: "ly-iconfont" !important;
|
||
|
|
font-size: 30rpx;
|
||
|
|
font-style: normal;
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
-moz-osx-font-smoothing: grayscale;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ly-icon-caret-right:before {
|
||
|
|
content: "\e8ee";
|
||
|
|
}
|
||
|
|
|
||
|
|
.ly-icon-loading:before {
|
||
|
|
content: "\e657";
|
||
|
|
}
|
||
|
|
/* iconfont-end */
|
||
|
|
|
||
|
|
/* animate-start */
|
||
|
|
@keyframes rotating {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: rotateZ(0);
|
||
|
|
transform: rotateZ(0)
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotateZ(360deg);
|
||
|
|
transform: rotateZ(360deg)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/* animate-end */
|
||
|
|
</style>
|