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