下拉框分两种筛选：同步和异步
This commit is contained in:
yaoyanan
@@ -140,9 +140,4 @@
|
||||
event: 'change'
|
||||
}
|
||||
}
|
||||
// let bodyO = document.querySelector()
|
||||
// bodyO.onclick = function (){
|
||||
// console.log(0)
|
||||
// }
|
||||
|
||||
</script>
|
||||
|
||||
@@ -1,21 +1,38 @@
|
||||
<template>
|
||||
<a-tree-select
|
||||
allowClear
|
||||
labelInValue
|
||||
tree-node-filter-prop="title"
|
||||
:getPopupContainer="(node) => node.parentNode"
|
||||
style="width: 100%"
|
||||
:disabled="disabled"
|
||||
:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
|
||||
:placeholder="placeholder"
|
||||
:loadData="asyncLoadTreeData"
|
||||
:value="treeValue"
|
||||
:treeData="treeData"
|
||||
:multiple="multiple"
|
||||
:show-search="!multiple"
|
||||
@change="onChange"
|
||||
@search="onSearch">
|
||||
</a-tree-select>
|
||||
<div>
|
||||
<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"
|
||||
:loadData="asyncLoadTreeData"
|
||||
:value="treeValue"
|
||||
:treeData="treeData"
|
||||
:multiple="multiple"
|
||||
:show-search="!multiple"
|
||||
@change="onChange">
|
||||
</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>
|
||||
<script>
|
||||
|
||||
@@ -28,6 +45,11 @@
|
||||
export default {
|
||||
name: 'JTreeSelect',
|
||||
props: {
|
||||
isAsync:{ // 是否采用异步方式初始化树
|
||||
type:Boolean,
|
||||
required:true,
|
||||
default:true
|
||||
},
|
||||
value:{
|
||||
type: String,
|
||||
required: false
|
||||
@@ -95,7 +117,7 @@
|
||||
},
|
||||
dict(){
|
||||
this.initDictInfo()
|
||||
this.loadRoot();
|
||||
this.loadRoot()
|
||||
}
|
||||
},
|
||||
created(){
|
||||
@@ -105,19 +127,23 @@
|
||||
this.loadItemByCode()
|
||||
})
|
||||
},
|
||||
mounted(){
|
||||
window.that = this
|
||||
},
|
||||
methods: {
|
||||
loadItemByCode(){
|
||||
if(!this.value || this.value=="0"){
|
||||
if( !this.value || this.value == "0" ){
|
||||
this.treeValue = null
|
||||
}else{
|
||||
getAction(`${this.view}${this.dict}`,{key:this.value}).then(res=>{
|
||||
if(res.success){
|
||||
let values = this.value.split(',')
|
||||
this.treeValue = res.result.map((item, index) => ({
|
||||
key: values[index],
|
||||
value: values[index],
|
||||
label: item
|
||||
}))
|
||||
this.treeValue = values // v-model接收的是string || string[]
|
||||
// let treeValue = res.result.map((item, index) => ({
|
||||
// key: values[index],
|
||||
// value: values[index],
|
||||
// label: item
|
||||
// }))
|
||||
this.onLoadTriggleChange(res.result[0]);
|
||||
}
|
||||
})
|
||||
@@ -135,6 +161,7 @@
|
||||
this.text = arr[1]
|
||||
this.code = arr[2]
|
||||
},
|
||||
//异步加载树节点
|
||||
asyncLoadTreeData (treeNode) {
|
||||
return new Promise((resolve) => {
|
||||
if (treeNode.$vnode.children) {
|
||||
@@ -151,10 +178,8 @@
|
||||
hasChildField:this.hasChildField,
|
||||
condition:this.condition
|
||||
}
|
||||
console.log(param)
|
||||
getAction(this.url,param).then(res=>{
|
||||
if(res.success){
|
||||
console.log(res)
|
||||
for(let i of res.result){
|
||||
i.value = i.key
|
||||
if(i.leaf==false){
|
||||
@@ -173,11 +198,11 @@
|
||||
addChildren(pid,children,treeArray){
|
||||
if(treeArray && treeArray.length>0){
|
||||
for(let item of treeArray){
|
||||
if(item.key == pid){
|
||||
if(item.key == pid){ //找到当前元素所在的父节点
|
||||
if(!children || children.length==0){
|
||||
item.isLeaf=true
|
||||
}else{
|
||||
item.children = children
|
||||
item.children = children // 搜索出来的children添加到原树子children
|
||||
}
|
||||
break
|
||||
}else{
|
||||
@@ -186,71 +211,60 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
loadRoot(){ // 初始化树
|
||||
let param = {
|
||||
pid:this.pidValue,
|
||||
tableName:this.tableName,
|
||||
text:this.text,
|
||||
code:this.code,
|
||||
pidField:this.pidField,
|
||||
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)
|
||||
loadRoot(){
|
||||
// 异步初始化树
|
||||
if (this.isAsync){
|
||||
let param = {
|
||||
pid:this.pidValue,
|
||||
tableName:this.tableName,
|
||||
text:this.text,
|
||||
code:this.code,
|
||||
pidField:this.pidField,
|
||||
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)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
onChange(value){
|
||||
if(!value){
|
||||
this.$emit('change', '');
|
||||
this.treeValue = null
|
||||
} else if (value instanceof Array) {
|
||||
this.$emit('change', value.map(item => item.value).join(','))
|
||||
} else if (value instanceof Array) { //多选的下拉框回显
|
||||
//修改第一次选中时，选中为空的情况
|
||||
this.$emit('change', value.join(',').toString())
|
||||
this.treeValue = value
|
||||
} else {
|
||||
this.$emit('change', value.value,value.label)
|
||||
} else { //单选下拉框的回显
|
||||
this.$emit('change', 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(){
|
||||
return this.treeData
|
||||
@@ -283,4 +297,19 @@
|
||||
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>
|
||||
|
||||
@@ -250,6 +250,7 @@
|
||||
dict="sys_permission,name,id"
|
||||
pidField="parent_id"
|
||||
pidValue=""
|
||||
:isAsync="true"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
@@ -266,12 +267,12 @@
|
||||
pidField="parent_id"
|
||||
pidValue=""
|
||||
multiple
|
||||
:isAsync="false"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">选中的值(v-model)：{{ formData.treeSelectMultiple }}</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 分类字典树 -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
@@ -585,8 +586,6 @@ sayHi('hello, world!')`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange() {
|
||||
},
|
||||
getDepartIdValue() {
|
||||
return this.form.getFieldValue('departId')
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user