@@ -140,4 +140,9 @@
|
|||||||
event: 'change'
|
event: 'change'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// let bodyO = document.querySelector()
|
||||||
|
// bodyO.onclick = function (){
|
||||||
|
// console.log(0)
|
||||||
|
// }
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user