|
@@ -5,12 +5,15 @@ import apiReportEn from '@/api/reportEn'
|
|
|
const props=defineProps({
|
|
|
defaultVal:null,
|
|
|
noReset:false,
|
|
|
+ rootClassifyDisabled:false,//顶级分类是否要判断禁用
|
|
|
firstClassifyDisabled:false,//一级分类是否要判断禁用
|
|
|
})
|
|
|
|
|
|
const emits=defineEmits(['close','confirm'])
|
|
|
|
|
|
const list=ref([])
|
|
|
+const activeTab=ref(0)
|
|
|
+
|
|
|
function getClassifyList(){
|
|
|
apiReportEn.getClassifyList({
|
|
|
CurrentIndex:1,
|
|
@@ -21,22 +24,33 @@ function getClassifyList(){
|
|
|
const arr=res.Data.List||[]
|
|
|
list.value=arr.map(item=>{
|
|
|
const child=item.Child?item.Child.map(e=>{
|
|
|
+ // console.log(e,'ee')
|
|
|
+ const groundChild = e.Child? e.Child.map(it =>{
|
|
|
+ return {
|
|
|
+ text:it.ClassifyName,
|
|
|
+ id:it.Id
|
|
|
+ }
|
|
|
+ }):[]
|
|
|
+
|
|
|
return {
|
|
|
text:e.ClassifyName,
|
|
|
- id:e.Id
|
|
|
+ id:e.Id,
|
|
|
+ children:groundChild,
|
|
|
+ disabled:props.firstClassifyDisabled&&groundChild.length===0?true:false,
|
|
|
}
|
|
|
}):[]
|
|
|
return {
|
|
|
text:item.ClassifyName,
|
|
|
id:item.Id,
|
|
|
children:child,
|
|
|
- disabled:props.firstClassifyDisabled&&child.length===0?true:false,
|
|
|
+ disabled:props.rootClassifyDisabled&&child.length===0?true:false,
|
|
|
}
|
|
|
})
|
|
|
- if(props.defaultVal&&props.defaultVal[1]){
|
|
|
- activeId.value=props.defaultVal[1].id
|
|
|
+
|
|
|
+ if(props.defaultVal&&props.defaultVal[2]){
|
|
|
+ activeId.value=props.defaultVal[2].id
|
|
|
list.value.forEach((item,index)=>{
|
|
|
- if(item.id===props.defaultVal[0].id){
|
|
|
+ if(item.id===props.defaultVal[1].id){
|
|
|
activeIndex.value=index
|
|
|
}
|
|
|
})
|
|
@@ -54,27 +68,57 @@ function handleCancle(){
|
|
|
}
|
|
|
|
|
|
function handleReset(){
|
|
|
+ activeTab.value=0
|
|
|
+ activeIndex.value=0
|
|
|
+ activeId.value=null
|
|
|
+ emits('confirm',{rootClassify:'',firstClassify:'',secondClassify:''})
|
|
|
+}
|
|
|
+
|
|
|
+function clearClassifyOptions(){
|
|
|
+ activeTab.value=0
|
|
|
+ activeIndex.value=0
|
|
|
+ activeId.value=null
|
|
|
+}
|
|
|
+
|
|
|
+function tabChange(value) {
|
|
|
activeIndex.value=0
|
|
|
activeId.value=null
|
|
|
- emits('confirm',{firstClassify:'',secondClassify:''})
|
|
|
}
|
|
|
|
|
|
function handleConfirm(){
|
|
|
- const firstClassify={
|
|
|
- text:list.value[activeIndex.value].text,
|
|
|
- id:list.value[activeIndex.value].id
|
|
|
+
|
|
|
+ let itemChild = list.value[activeTab.value]
|
|
|
+ const rootClassify={
|
|
|
+ text:itemChild.text,
|
|
|
+ id:itemChild.id
|
|
|
}
|
|
|
+ let firstClassify={text:'',id:''}
|
|
|
+ if(itemChild.children[activeIndex.value]){
|
|
|
+ firstClassify={
|
|
|
+ text:itemChild.children[activeIndex.value].text,
|
|
|
+ id:itemChild.children[activeIndex.value].id
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
let secondClassify={text:'',id:''}
|
|
|
if(activeId.value){
|
|
|
- list.value[activeIndex.value].children.forEach(e => {
|
|
|
+ // 找第三级id
|
|
|
+ itemChild.children[activeIndex.value].children.forEach(e => {
|
|
|
+ // console.log(e.id,"e.id",activeId.value);
|
|
|
if(e.id===activeId.value){
|
|
|
secondClassify.text=e.text
|
|
|
secondClassify.id=e.id
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
- emits('confirm',{firstClassify,secondClassify})
|
|
|
+ // console.log(rootClassify,firstClassify,secondClassify,'secondClassify');
|
|
|
+ emits('confirm',{rootClassify,firstClassify,secondClassify})
|
|
|
}
|
|
|
+
|
|
|
+defineExpose({
|
|
|
+ clearClassifyOptions
|
|
|
+})
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
@@ -85,12 +129,20 @@ function handleConfirm(){
|
|
|
<span style="font-size:18px;font-weight:bold">选择分类</span>
|
|
|
<span style="color:#0052D9" @click="handleConfirm">确定</span>
|
|
|
</div>
|
|
|
- <van-tree-select
|
|
|
- v-model:active-id="activeId"
|
|
|
- v-model:main-active-index="activeIndex"
|
|
|
- :items="list"
|
|
|
- @click-nav="activeId=null"
|
|
|
- />
|
|
|
+ <van-tabs v-model:active="activeTab" shrink @change="tabChange">
|
|
|
+ <van-tab v-for="tabOp in list" :key="tabOp.id"
|
|
|
+ :title="tabOp.text" :disabled="tabOp.disabled" >
|
|
|
+ <div class="content">
|
|
|
+ <van-tree-select
|
|
|
+ v-model:active-id="activeId"
|
|
|
+ v-model:main-active-index="activeIndex"
|
|
|
+ :items="tabOp.children"
|
|
|
+ @click-nav="activeId=null"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </van-tab>
|
|
|
+ </van-tabs>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|