KH/kh-device-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【fix】分类字典功能，添加和编辑弹窗时，不回显父级节点信息

Browse Source
This commit is contained in:
mzc5649
2021-04-13 10:10:30 +08:00
parent 415e5239e8
commit 18f00318e3
1 changed files with 329 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files
jero-web/src/components/jero/JTreeSelect.vue
+329 -327
View File
@@ -1,327 +1,329 @@
<template>
<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"
v-bind="_attrs"
v-on="$listeners"
@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"
v-bind="_attrs"
v-on="$listeners"
@change="onChange">
</a-tree-select>
</div>
</template>
<script>
/*
* 异步树加载组件 通过传入表名 显示字段 存储字段 加载一个树控件
* <j-tree-select dict="aa_tree_test,aad,id" pid-field="pid" ></j-tree-select>
* */
import { getAction } from '@/api/manage'
export default {
name: 'JTreeSelect',
props: {
isAsync:{ // 是否采用异步方式初始化树
type:Boolean,
required:false,
default:true
},
value:{
// type: String,
required: false
},
placeholder:{
type: String,
default: '请选择',
required: false
},
dict:{
type: String,
default: '',
required: false
},
pidField:{
type: String,
default: 'pid',
required: false
},
pidValue:{
type: String,
default: '',
required: false
},
disabled:{
type:Boolean,
default:false,
required:false
},
hasChildField:{
type: String,
default: '',
required: false
},
condition:{
type:String,
default:'',
required:false
},
// 是否支持多选
multiple: {
type: Boolean,
default: false,
},
loadTriggleChange:{
type: Boolean,
default: false,
required:false
}
},
data () {
return {
treeValue: null, // 选中的数据
treeData:[],// 渲染树的数组
url:"/sys/dict/loadTreeData",
view:'/sys/dict/loadDictItem/',
tableName:"",
text:"",
code:"",
}
},
watch: {
value () {
this.loadItemByCode()
},
dict(){
this.initDictInfo()
this.loadRoot()
}
},
computed:{
_attrs() {
let attrs
attrs = { ...this.$attrs }
return attrs
}
},
created(){
this.validateProp().then(()=>{
this.initDictInfo()
this.loadRoot()
this.loadItemByCode()
})
},
mounted(){
window.that = this
},
methods: {
loadItemByCode(){
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 = values // v-model接收的是string || string[]
this.onLoadTriggleChange(res.result[0]);
}
})
}
},
onLoadTriggleChange(text){
//只有单选才会触发
if(!this.multiple && this.loadTriggleChange){
this.$emit('change', this.value,text)
}
},
initDictInfo(){ //取出父组件传过来的code，text，tableName
let arr = this.dict.split(",")
this.tableName = arr[0]
this.text = arr[1]
this.code = arr[2]
},
//异步加载树节点
asyncLoadTreeData (treeNode) {
return new Promise((resolve) => {
if (treeNode.$vnode.children) {
resolve()
return
}
let pid = treeNode.$vnode.key
let param = {
pid:pid,
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){
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.addChildren(pid,res.result,this.treeData)
this.treeData = [...this.treeData]
}
resolve()
})
})
},
addChildren(pid,children,treeArray){
if(treeArray && treeArray.length>0){
for(let item of treeArray){
if(item.key == pid){ //找到当前元素所在的父节点
if(!children || children.length==0){
item.isLeaf=true
}else{
item.children = children // 搜索出来的children添加到原树子children
}
break
}else{
this.addChildren(pid,children,item.children)
}
}
}
},
/**
* 初始化树
* isAsync：true===异步获取 false===同步获取数据 默认异步*/
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){
/*
* 使用$listeners向上暴露事件---和$emit一起使用出现的问题：change事件会执行两遍
* 解决办法：改变选中时提交的事件名*/
this.$emit('select-change', '');
this.treeValue = null
} else if (value instanceof Array) {
//多选
this.$emit('select-change', value.join(',').toString()) //修改第一次选中时，选中为空的情况
this.treeValue = value
} else {
//单选
this.$emit('select-change', value)
this.treeValue = value
}
},
getCurrTreeData(){
return this.treeData
},
validateProp(){
let myCondition = this.condition
return new Promise((resolve,reject)=>{
if(!myCondition){
resolve();
}else{
try {
let test=JSON.parse(myCondition);
if(typeof test == 'object' && test){
resolve()
}else{
this.$message.error("组件JTreeSelect-condition传值有误，需要一个json字符串!")
reject()
}
} catch(e) {
this.$message.error("组件JTreeSelect-condition传值有误，需要一个json字符串!")
reject()
}
}
})
}
},
//2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型
model: {
prop: 'value',
event: 'select-change'
}
}
//递归整个树，判断是否是叶子节点----同步获取数据时用到
function deepFor(source){
for(let i of source){
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>
<template>
<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"
v-bind="_attrs"
v-on="$listeners"
@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"
v-bind="_attrs"
v-on="$listeners"
@change="onChange">
</a-tree-select>
</div>
</template>
<script>
/*
* 异步树加载组件 通过传入表名 显示字段 存储字段 加载一个树控件
* <j-tree-select dict="aa_tree_test,aad,id" pid-field="pid" ></j-tree-select>
* */
import { getAction } from '@/api/manage'
export default {
name: 'JTreeSelect',
props: {
isAsync:{ // 是否采用异步方式初始化树
type:Boolean,
required:false,
default:true
},
value:{
// type: String,
required: false
},
placeholder:{
type: String,
default: '请选择',
required: false
},
dict:{
type: String,
default: '',
required: false
},
pidField:{
type: String,
default: 'pid',
required: false
},
pidValue:{
type: String,
default: '',
required: false
},
disabled:{
type:Boolean,
default:false,
required:false
},
hasChildField:{
type: String,
default: '',
required: false
},
condition:{
type:String,
default:'',
required:false
},
// 是否支持多选
multiple: {
type: Boolean,
default: false,
},
loadTriggleChange:{
type: Boolean,
default: false,
required:false
}
},
data () {
return {
treeValue: null, // 选中的数据
treeData:[],// 渲染树的数组
url:"/sys/dict/loadTreeData",
view:'/sys/dict/loadDictItem/',
tableName:"",
text:"",
code:"",
}
},
watch: {
value () {
this.loadItemByCode()
},
dict(){
this.initDictInfo()
this.loadRoot()
}
},
computed:{
_attrs() {
let attrs
attrs = { ...this.$attrs }
return attrs
}
},
created(){
this.validateProp().then(()=>{
this.initDictInfo()
this.loadRoot()
this.loadItemByCode()
})
},
mounted(){
window.that = this
},
methods: {
loadItemByCode(){
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 = values // v-model接收的是string || string[]
//将节点名称显示在选择框上
this.treeValue = res.result[0]
this.onLoadTriggleChange(res.result[0]);
}
})
}
},
onLoadTriggleChange(text){
//只有单选才会触发
if(!this.multiple && this.loadTriggleChange){
this.$emit('change', this.value,text)
}
},
initDictInfo(){ //取出父组件传过来的code，text，tableName
let arr = this.dict.split(",")
this.tableName = arr[0]
this.text = arr[1]
this.code = arr[2]
},
//异步加载树节点
asyncLoadTreeData (treeNode) {
return new Promise((resolve) => {
if (treeNode.$vnode.children) {
resolve()
return
}
let pid = treeNode.$vnode.key
let param = {
pid:pid,
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){
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.addChildren(pid,res.result,this.treeData)
this.treeData = [...this.treeData]
}
resolve()
})
})
},
addChildren(pid,children,treeArray){
if(treeArray && treeArray.length>0){
for(let item of treeArray){
if(item.key == pid){ //找到当前元素所在的父节点
if(!children || children.length==0){
item.isLeaf=true
}else{
item.children = children // 搜索出来的children添加到原树子children
}
break
}else{
this.addChildren(pid,children,item.children)
}
}
}
},
/**
* 初始化树
* isAsync：true===异步获取 false===同步获取数据 默认异步*/
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){
/*
* 使用$listeners向上暴露事件---和$emit一起使用出现的问题：change事件会执行两遍
* 解决办法：改变选中时提交的事件名*/
this.$emit('select-change', '');
this.treeValue = null
} else if (value instanceof Array) {
//多选
this.$emit('select-change', value.join(',').toString()) //修改第一次选中时，选中为空的情况
this.treeValue = value
} else {
//单选
this.$emit('select-change', value)
this.treeValue = value
}
},
getCurrTreeData(){
return this.treeData
},
validateProp(){
let myCondition = this.condition
return new Promise((resolve,reject)=>{
if(!myCondition){
resolve();
}else{
try {
let test=JSON.parse(myCondition);
if(typeof test == 'object' && test){
resolve()
}else{
this.$message.error("组件JTreeSelect-condition传值有误，需要一个json字符串!")
reject()
}
} catch(e) {
this.$message.error("组件JTreeSelect-condition传值有误，需要一个json字符串!")
reject()
}
}
})
}
},
//2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型
model: {
prop: 'value',
event: 'select-change'
}
}
//递归整个树，判断是否是叶子节点----同步获取数据时用到
function deepFor(source){
for(let i of source){
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>