You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
138 lines
3.9 KiB
138 lines
3.9 KiB
<template>
|
|
<view>
|
|
<view
|
|
v-for="(tree,index) in treesIN"
|
|
:key="index">
|
|
<view class="gui-flex gui-rows gui-nowrap gui-align-items-center gui-tree"
|
|
:data-havsons="tree.children"
|
|
:data-treeindexs="indexesIn"
|
|
:data-index="index"
|
|
:data-id="tree.id"
|
|
:data-treelevel="level"
|
|
:data-cancheck="(allCanCheck || !tree.children)"
|
|
:style="{paddingLeft:(indent*level)+'rpx'}"
|
|
@tap.stop="taped">
|
|
<view class="gui-tree-icons"
|
|
:data-id="tree.id"
|
|
@tap.stop="fold"
|
|
v-if="type == 'text' && isIcon">
|
|
<text class="gui-tree-icons-text gui-icons"
|
|
v-if="tree.children"></text>
|
|
</view>
|
|
<view class="gui-tree-icons"
|
|
v-if="type == 'radio' && (allCanCheck || !tree.children)">
|
|
<text class="gui-tree-icons-text gui-icons gui-tree-current gui-fade-in"
|
|
v-if="tree.id == checkedId"></text>
|
|
<text class="gui-tree-icons-text gui-icons"
|
|
v-else></text>
|
|
</view>
|
|
<view class="gui-tree-icons"
|
|
v-if="type == 'checkbox' && (allCanCheck || !tree.children)">
|
|
<text class="gui-tree-icons-text gui-icons gui-tree-current gui-fade-in"
|
|
v-if="isChecked(tree.id)"></text>
|
|
<text class="gui-tree-icons-text gui-icons icon-checkbox" v-else></text>
|
|
</view>
|
|
<text class="gui-block-text gui-tree-title gui-flex1">{{tree.label}}</text>
|
|
</view>
|
|
<view>
|
|
<gui-tree v-if="arrayIndexOf(notids, tree.id) == -1"
|
|
:trees="tree.children" :indent="indent"
|
|
:level="level+1" :allCanCheck="allCanCheck"
|
|
:isIcon="isIcon" :checkedId="checkedId"
|
|
:checkedIds="checkedIds"
|
|
:type="type" :indexes="[indexesIn,index]" @taped="tapbase"></gui-tree>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default{
|
|
name : "gui-tree",
|
|
props : {
|
|
trees : {type:Array, default:function () {return [];}},
|
|
indent : {type:Number, default:28},
|
|
level : {type:Number, default:0},
|
|
type : {type:String, default:'text'},
|
|
isIcon : {type:Boolean, default:true},
|
|
indexes : {type:Array, default:function () {return ['',0];}},
|
|
checkedId : {type:[String, Number], default:'-1'},
|
|
checkedIds : {type:Array, default:function () {return [];}},
|
|
allCanCheck : {type:Boolean, default:true},
|
|
isFold : {type:Boolean, default:true}
|
|
},
|
|
data() {
|
|
return {
|
|
treesIN : [],
|
|
indexesIn : [],
|
|
notids : []
|
|
}
|
|
},
|
|
created:function(){
|
|
this.treesIN = this.trees;
|
|
if(this.indexes[0] != ''){
|
|
var indexes = this.indexes[0].split(',');
|
|
}else{
|
|
var indexes = [];
|
|
}
|
|
indexes.push(this.indexes[1]);
|
|
this.indexesIn = indexes.join(',');
|
|
},
|
|
watch:{
|
|
type : function(){
|
|
this.notids = [];
|
|
}
|
|
},
|
|
methods:{
|
|
fold : function (e) {
|
|
var id = e.currentTarget.dataset.id;
|
|
if(this.isFold){
|
|
var res = this.arrayIndexOf(this.notids, id);
|
|
if(res == -1){
|
|
this.notids.push(id);
|
|
}else{
|
|
this.notids.splice(res,1);
|
|
}
|
|
}
|
|
e.stopPropagation();
|
|
return ;
|
|
},
|
|
taped : function(e){
|
|
var treeindexs = e.currentTarget.dataset.treeindexs;
|
|
treeindexs = treeindexs.split(',');
|
|
var index = e.currentTarget.dataset.index;
|
|
treeindexs.push(index);
|
|
treeindexs.shift();
|
|
if(this.type == 'text'){
|
|
this.tapbase(treeindexs);
|
|
}else{
|
|
var cancheck = e.currentTarget.dataset.cancheck;
|
|
if(cancheck){this.tapbase(treeindexs);}
|
|
}
|
|
e.stopPropagation();
|
|
},
|
|
tapbase : function(e){
|
|
this.$emit('taped', e);
|
|
},
|
|
setTrees : function (trees) {
|
|
this.treesIN = trees;
|
|
},
|
|
isChecked : function(checkedId){
|
|
for(let i = 0; i < this.checkedIds.length; i++){
|
|
if(this.checkedIds[i] == checkedId){
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
arrayIndexOf : function(arr, needFind){
|
|
var index = -1;
|
|
for(let i = 0; i < arr.length; i++){
|
|
if(arr[i] == needFind){index = i; return i;}
|
|
}
|
|
return index;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
</style>
|