|
|
<template>
|
|
|
<view class="tm-treeSelect fulled-height">
|
|
|
<view class="tm-treeSelect-slide ">
|
|
|
<scroll-view scroll-y
|
|
|
:style="{
|
|
|
height:activeHeight+'px'
|
|
|
}"
|
|
|
>
|
|
|
<tm-listitem :disabled="item['disabled']?true:false"
|
|
|
:black="black_tmeme" @click="activeIndex=index"
|
|
|
:disabled-color="bgColor"
|
|
|
v-for="(item,index) in formaData" :key='index'
|
|
|
:color="activeIndex==index?(text?' text ' + color:'white'):bgColor"
|
|
|
:show-right-icon="false"
|
|
|
:margin="[0,0]"
|
|
|
fontSize="26"
|
|
|
:class-style="activeIndex==index?`border-${color_tmeme}-l-2`:'border-grey-lighten-5-l-2'"
|
|
|
round="0" shadow="0"
|
|
|
>
|
|
|
<tm-badges color='red' :fllowTheme="false" :offset="[12,-10]" v-if="item.dot>0&&dot" :dot="false" :label="item.dot"></tm-badges>
|
|
|
<view class="mr-10">
|
|
|
<text :class="[`text-${activeIndex==index?color_tmeme:fontColor}`,item['disabled']?'opacity-3':'']">{{item[rangKey]}}</text>
|
|
|
</view>
|
|
|
</tm-listitem>
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
<view class="tm-treeSelect-slideitem" >
|
|
|
<scroll-view scroll-y
|
|
|
:style="{
|
|
|
height:activeHeight+'px'
|
|
|
}"
|
|
|
>
|
|
|
<tm-groupcheckbox v-if="formaData[activeIndex]" :max="max" @change="changeOk">
|
|
|
<block v-for="(item,index) in formaData[activeIndex].children" :key='index'>
|
|
|
<tm-checkbox dense
|
|
|
:disabled="item['disabled']||formaData[activeIndex]['disabled']?true:false"
|
|
|
:color="color_tmeme" round="2" @change="itemChange"
|
|
|
:name="item"
|
|
|
v-model="item.checked">
|
|
|
<tm-listitem fontSize="28" :black="black_tmeme" :padding="[24,24]" :margin="[0,0]" :border-bottom="true" round="0" shadow="0"
|
|
|
:title="item[rangKey]" >
|
|
|
<template #default>
|
|
|
<text :class="[item.checked?'text-'+color_tmeme:'']">{{item[rangKey]}}</text>
|
|
|
</template>
|
|
|
<template v-slot:rightIcon>
|
|
|
<view style="line-height: 0;vertical-align: middle;min-width: 40rpx;" class="fulled">
|
|
|
<view v-if="item.checked" class="rounded flex-center" :class="[color_tmeme,`shadow-${color_tmeme}-4`]" style="width: 34rpx;height: 34rpx;">
|
|
|
<text class="iconfont icon-check text-size-xs"></text>
|
|
|
</view>
|
|
|
<!-- <tm-icons dense v-if="item.checked" name="icon-check-circle"></tm-icons> -->
|
|
|
<!-- <tm-button v-if="item.checked" icon="icon-check" fab size="xs"></tm-button> -->
|
|
|
</view>
|
|
|
</template>
|
|
|
</tm-listitem>
|
|
|
</tm-checkbox>
|
|
|
</block>
|
|
|
|
|
|
</tm-groupcheckbox>
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
/**
|
|
|
* 分类选择
|
|
|
* @property {Number|String} height = [] 默认0，单位upx,自动使用父组件的高度。
|
|
|
* @property {Array} default-selected = [] 默认[]，可以是id索引也可以是对象数组,可以混着来。[1]
|
|
|
* @property {Array} list = [] 默认[]，数据结构对象，必须需要含有唯一标识符id即可。[{title:'苏州',id:1}],每一个类目和子类可以含有disabled值，用来禁用类目或者选项。
|
|
|
* @property {String} rang-key = [] 默认'title'，数据结构对象中，需要展示标签的key
|
|
|
* @property {Number} max = [] 默认999，每一项目最大选择数量，1可以实现单选。
|
|
|
* @property {String} color = [] 默认 primary，主题色名
|
|
|
* @property {String} bg-color = [] 默认 grey-lighten-5，主题色名未选择时的背景色。
|
|
|
* @property {String} font-color = [] 默认 grey，未选中时的文字颜色
|
|
|
* @property {Boolean} text = [] 默认 false，使用主题文本色为高亮色。
|
|
|
* @property {Boolean} black = [] 默认 false，是否暗黑模式。
|
|
|
* @property {Boolean} dot = [] 默认 false，是否显示角标数字,当前选中的数量。
|
|
|
* @property {Function} children-change 选中单个选项时触发。返回选中的数据。
|
|
|
* @property {Function} change 每次选择变化都会触发全局change,返回当前类目和所有类目选中的数据。
|
|
|
* @example <tm-treeSelect color="green" ></tm-treeSelect>
|
|
|
*/
|
|
|
import tmListitem from "@/tm-vuetify/components/tm-listitem/tm-listitem.vue"
|
|
|
import tmGrouplist from "@/tm-vuetify/components/tm-grouplist/tm-grouplist.vue"
|
|
|
import tmBadges from "@/tm-vuetify/components/tm-badges/tm-badges.vue"
|
|
|
import tmGroupcheckbox from "@/tm-vuetify/components/tm-groupcheckbox/tm-groupcheckbox.vue"
|
|
|
import tmCheckbox from "@/tm-vuetify/components/tm-checkbox/tm-checkbox.vue"
|
|
|
export default {
|
|
|
components:{tmListitem,tmGrouplist,tmBadges,tmGroupcheckbox,tmCheckbox},
|
|
|
name:"tm-treeSelect",
|
|
|
props:{
|
|
|
// 高度，默认为0时，自动使用父组件的高度.
|
|
|
height: {
|
|
|
type: String | Number,
|
|
|
default: 0
|
|
|
},
|
|
|
// 可以是id索引也可以是对象数组,可以混着来。
|
|
|
defaultSelected:{
|
|
|
type:Array,
|
|
|
default:()=>{
|
|
|
return []
|
|
|
}
|
|
|
},
|
|
|
// 对象数组
|
|
|
list:{
|
|
|
type:Array,
|
|
|
default:()=>{
|
|
|
return [];
|
|
|
}
|
|
|
},
|
|
|
// 显示标签的key.
|
|
|
rangKey:{
|
|
|
type:String,
|
|
|
default:'title'
|
|
|
},
|
|
|
// 每一项目最大选择数量，1可以实现单选。
|
|
|
max:{
|
|
|
type:Number,
|
|
|
default:999
|
|
|
},
|
|
|
// 主题色名
|
|
|
color:{
|
|
|
type:String,
|
|
|
default:'primary'
|
|
|
},
|
|
|
// 未选择时的背景色。
|
|
|
bgColor:{
|
|
|
type:String,
|
|
|
default:'grey-lighten-5'
|
|
|
},
|
|
|
//未选择时的文字色。
|
|
|
fontColor:{
|
|
|
type:String,
|
|
|
default:'grey-darken-1'
|
|
|
},
|
|
|
// 使用主题文本色为高亮色。
|
|
|
text:{
|
|
|
type:Boolean,
|
|
|
default:false
|
|
|
},
|
|
|
black:{
|
|
|
type:Boolean,
|
|
|
default:null
|
|
|
},
|
|
|
// 是否显示角标数字当前选中的数量。
|
|
|
dot:{
|
|
|
type:Boolean,
|
|
|
default:false
|
|
|
},
|
|
|
// 跟随主题色的改变而改变。
|
|
|
fllowTheme:{
|
|
|
type:Boolean|String,
|
|
|
default:true
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
activeHeight: 0,
|
|
|
activeIndex:0,
|
|
|
formaData:[]
|
|
|
};
|
|
|
},
|
|
|
watch:{
|
|
|
list:{
|
|
|
deep:true,
|
|
|
handler:function(){
|
|
|
this.formaData = [...this.dataList];
|
|
|
}
|
|
|
},
|
|
|
defaultSelected:{
|
|
|
deep:true,
|
|
|
handler:function(){
|
|
|
this.clear()
|
|
|
this.formaData = [...this.clear()]
|
|
|
this.formaData = [...this.dataList];
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
computed:{
|
|
|
black_tmeme: function() {
|
|
|
if (this.black !== null) return this.black;
|
|
|
return this.$tm.vx.state().tmVuetify.black;
|
|
|
},
|
|
|
color_tmeme:function(){
|
|
|
if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
|
|
|
return this.$tm.vx.state().tmVuetify.color;
|
|
|
}
|
|
|
return this.color;
|
|
|
},
|
|
|
dataList(){
|
|
|
let t = this;
|
|
|
let p = this.$tm.deepClone(this.list)
|
|
|
for(let j=0;j<p.length;j++){
|
|
|
p[j]['dot'] = 0;
|
|
|
if(p[j].children){
|
|
|
let ic = p[j].children;
|
|
|
for(let k=0;k<ic.length;k++){
|
|
|
if(!ic[k].hasOwnProperty('checked')){
|
|
|
ic[k]['checked'] = false;
|
|
|
}
|
|
|
|
|
|
for(let i=0 ;i < t.defaultSelected.length;i++){
|
|
|
let lsitem = t.defaultSelected[i];
|
|
|
if(typeof lsitem === 'object'){
|
|
|
if(lsitem['id'] == ic[k]['id']){
|
|
|
ic[k]['checked'] = true;
|
|
|
}
|
|
|
}else{
|
|
|
if(lsitem == ic[k]['id']){
|
|
|
ic[k]['checked'] = true;
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
if(ic[k]['checked']===true){
|
|
|
p[j]['dot'] +=1
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
return p;
|
|
|
},
|
|
|
},
|
|
|
mounted() {
|
|
|
|
|
|
let t = this;
|
|
|
this.$nextTick(async function() {
|
|
|
this.activeHeight = uni.upx2px(this.height);
|
|
|
if (!this.activeHeight) {
|
|
|
let wsz = await this.$Querey(".tm-treeSelect",this).catch(e=>{})
|
|
|
this.activeHeight = wsz[0].height||250;
|
|
|
}
|
|
|
this.formaData = [...this.dataList];
|
|
|
});
|
|
|
},
|
|
|
methods: {
|
|
|
clear(){
|
|
|
let t = this;
|
|
|
let p = this.$tm.deepClone(this.list)
|
|
|
for(let j=0;j<p.length;j++){
|
|
|
p[j]['dot'] = 0;
|
|
|
if(p[j].children){
|
|
|
let ic = p[j].children;
|
|
|
for(let k=0;k<ic.length;k++){
|
|
|
if(!ic[k].hasOwnProperty('checked')){
|
|
|
ic[k]['checked'] = false;
|
|
|
}else{
|
|
|
ic[k]['checked'] = false;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
return p;
|
|
|
},
|
|
|
// 所有选项。
|
|
|
changeOk(e) {
|
|
|
|
|
|
let p = [];
|
|
|
function ts(obj){
|
|
|
if(Array.isArray(obj)){
|
|
|
obj.forEach(item=>{
|
|
|
if(item.children){
|
|
|
ts(item.children);
|
|
|
}else{
|
|
|
if(item.checked===true){
|
|
|
p.push(item)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
})
|
|
|
}
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
ts(this.dataList);
|
|
|
this.$emit('change',{
|
|
|
all:p,//所有选择项
|
|
|
index:this.activeIndex,//当前数目索引
|
|
|
children:e//当前类目的选中的选择项
|
|
|
});
|
|
|
if(this.formaData.length>0){
|
|
|
this.$set(this.formaData[this.activeIndex],'dot',e.length)
|
|
|
}
|
|
|
|
|
|
},
|
|
|
// 单个数组点击切换产生的选项。
|
|
|
itemChange(e){
|
|
|
let t = this;
|
|
|
//返回的格式： {"index":4,"checked":true,"value":推荐的数据}
|
|
|
this.$emit('children-change',e)
|
|
|
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.tm-treeSelect{
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
.tm-treeSelect-slide{
|
|
|
width: 190upx;
|
|
|
}
|
|
|
.tm-treeSelect-slideitem{
|
|
|
width: calc(100% - 190upx);
|
|
|
}
|
|
|
}
|
|
|
</style>
|