Revert "下拉框分两种筛选:同步和异步"

This reverts commit 5f7eeec0
This commit is contained in:
yaoyanan
2021-03-23 15:49:49 +08:00
parent 0fdb513e55
commit 102e6e3705
2 changed files with 89 additions and 113 deletions
+5
View File
@@ -140,4 +140,9 @@
event: 'change' event: 'change'
} }
} }
// let bodyO = document.querySelector()
// bodyO.onclick = function (){
// console.log(0)
// }
</script> </script>
+84 -113
View File
@@ -1,38 +1,21 @@
<template> <template>
<div> <a-tree-select
<a-tree-select allowClear
v-if="isAsync" labelInValue
allowClear tree-node-filter-prop="title"
tree-node-filter-prop="title" :getPopupContainer="(node) => node.parentNode"
:getPopupContainer="(node) => node.parentNode" style="width: 100%"
style="width: 100%" :disabled="disabled"
:disabled="disabled" :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }" :placeholder="placeholder"
:placeholder="placeholder" :loadData="asyncLoadTreeData"
:loadData="asyncLoadTreeData" :value="treeValue"
:value="treeValue" :treeData="treeData"
:treeData="treeData" :multiple="multiple"
:multiple="multiple" :show-search="!multiple"
:show-search="!multiple" @change="onChange"
@change="onChange"> @search="onSearch">
</a-tree-select> </a-tree-select>
<a-tree-select
v-if="!isAsync"
allowClear
tree-node-filter-prop="title"
:getPopupContainer="(node) => node.parentNode"
style="width: 100%"
:disabled="disabled"
:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
:placeholder="placeholder"
:value="treeValue"
:treeData="treeData"
:multiple="multiple"
:show-search="!multiple"
@change="onChange">
</a-tree-select>
</div>
</template> </template>
<script> <script>
@@ -45,11 +28,6 @@
export default { export default {
name: 'JTreeSelect', name: 'JTreeSelect',
props: { props: {
isAsync:{ // 是否采用异步方式初始化树
type:Boolean,
required:true,
default:true
},
value:{ value:{
type: String, type: String,
required: false required: false
@@ -117,7 +95,7 @@
}, },
dict(){ dict(){
this.initDictInfo() this.initDictInfo()
this.loadRoot() this.loadRoot();
} }
}, },
created(){ created(){
@@ -127,23 +105,19 @@
this.loadItemByCode() this.loadItemByCode()
}) })
}, },
mounted(){
window.that = this
},
methods: { methods: {
loadItemByCode(){ loadItemByCode(){
if( !this.value || this.value == "0" ){ if(!this.value || this.value=="0"){
this.treeValue = null this.treeValue = null
}else{ }else{
getAction(`${this.view}${this.dict}`,{key:this.value}).then(res=>{ getAction(`${this.view}${this.dict}`,{key:this.value}).then(res=>{
if(res.success){ if(res.success){
let values = this.value.split(',') let values = this.value.split(',')
this.treeValue = values // v-model接收的是string || string[] this.treeValue = res.result.map((item, index) => ({
// let treeValue = res.result.map((item, index) => ({ key: values[index],
// key: values[index], value: values[index],
// value: values[index], label: item
// label: item }))
// }))
this.onLoadTriggleChange(res.result[0]); this.onLoadTriggleChange(res.result[0]);
} }
}) })
@@ -161,7 +135,6 @@
this.text = arr[1] this.text = arr[1]
this.code = arr[2] this.code = arr[2]
}, },
//异步加载树节点
asyncLoadTreeData (treeNode) { asyncLoadTreeData (treeNode) {
return new Promise((resolve) => { return new Promise((resolve) => {
if (treeNode.$vnode.children) { if (treeNode.$vnode.children) {
@@ -178,8 +151,10 @@
hasChildField:this.hasChildField, hasChildField:this.hasChildField,
condition:this.condition condition:this.condition
} }
console.log(param)
getAction(this.url,param).then(res=>{ getAction(this.url,param).then(res=>{
if(res.success){ if(res.success){
console.log(res)
for(let i of res.result){ for(let i of res.result){
i.value = i.key i.value = i.key
if(i.leaf==false){ if(i.leaf==false){
@@ -198,11 +173,11 @@
addChildren(pid,children,treeArray){ addChildren(pid,children,treeArray){
if(treeArray && treeArray.length>0){ if(treeArray && treeArray.length>0){
for(let item of treeArray){ for(let item of treeArray){
if(item.key == pid){ //找到当前元素所在的父节点 if(item.key == pid){
if(!children || children.length==0){ if(!children || children.length==0){
item.isLeaf=true item.isLeaf=true
}else{ }else{
item.children = children // 搜索出来的children添加到原树子children item.children = children
} }
break break
}else{ }else{
@@ -211,60 +186,71 @@
} }
} }
}, },
loadRoot(){ loadRoot(){ // 初始化树
// 异步初始化树 let param = {
if (this.isAsync){ pid:this.pidValue,
let param = { tableName:this.tableName,
pid:this.pidValue, text:this.text,
tableName:this.tableName, code:this.code,
text:this.text, pidField:this.pidField,
code:this.code, hasChildField:this.hasChildField,
pidField:this.pidField, condition:this.condition
hasChildField:this.hasChildField,
condition:this.condition
}
getAction(this.url,param).then(res=>{
if(res.success && res.result){
for(let i of res.result){
i.value = i.key
if(i.leaf==false){
i.isLeaf=false
}else if(i.leaf==true){
i.isLeaf=true
}
}
this.treeData = [...res.result]
}else{
console.log("数根节点查询结果-else",res)
}
})
}else{
// 数据小的情况下,采用同步获取数据方法
let param = {
code:this.code,
pidField:this.pidField,
tableName:this.tableName,
text:this.text
}
getAction('/sys/dict/queryAllTreeData',param).then((res)=>{
if (res.success){
this.treeData = deepFor(res.result)
}
})
} }
getAction(this.url,param).then(res=>{
if(res.success && res.result){
for(let i of res.result){
i.value = i.key
if(i.leaf==false){
i.isLeaf=false
}else if(i.leaf==true){
i.isLeaf=true
}
}
this.treeData = [...res.result]
}else{
console.log("数根节点查询结果-else",res)
}
})
}, },
onChange(value){ onChange(value){
if(!value){ if(!value){
this.$emit('change', ''); this.$emit('change', '');
this.treeValue = null this.treeValue = null
} else if (value instanceof Array) { //多选的下拉框回显 } else if (value instanceof Array) {
//修改第一次选中时,选中为空的情况 this.$emit('change', value.map(item => item.value).join(','))
this.$emit('change', value.join(',').toString())
this.treeValue = value this.treeValue = value
} else { //单选下拉框的回显 } else {
this.$emit('change', value) this.$emit('change', value.value,value.label)
this.treeValue = value this.treeValue = value
} }
},
onSearch(value){
let param = {
code:this.code,
keyword:value,
pidField:this.pidField,
tableName:this.tableName,
text:this.text
}
getAction('/sys/dict/queryTreeDataByKeyword',param).then((res)=>{
if (res.success){
//设置是否是叶子节点(是否能展开)
for(let i of res.result){
i.value = i.key
if(i.leaf==false){
i.isLeaf=false
}else if(i.leaf==true){
i.isLeaf=true
}
}
//赋值树的数据
this.treeData = []
this.treeData = [...res.result]
// this.treeData = fn(res.result)
// fn(res.result)
}
})
}, },
getCurrTreeData(){ getCurrTreeData(){
return this.treeData return this.treeData
@@ -297,19 +283,4 @@
event: 'change' event: 'change'
} }
} }
function deepFor(source){
for(let i of source){ // i是数组的每一项
i.value = i.key
//给每一节点判断是否是叶子节点
if(i.leaf==false){
i.isLeaf=false
}else if(i.leaf==true){
i.isLeaf=true
}
if (i.children && i.children.length > 0){
deepFor(i.children)
}
}
return source
}
</script> </script>