From 18f00318e3a75dbea4ff1486f55375fc6b46628b Mon Sep 17 00:00:00 2001
From: mzc5649 <13027087095@163.com>
Date: Tue, 13 Apr 2021 10:10:30 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90fix=E3=80=91=E5=88=86=E7=B1=BB?=
 =?UTF-8?q?=E5=AD=97=E5=85=B8=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=92=8C=E7=BC=96=E8=BE=91=E5=BC=B9=E7=AA=97=E6=97=B6=EF=BC=8C?=
 =?UTF-8?q?=E4=B8=8D=E5=9B=9E=E6=98=BE=E7=88=B6=E7=BA=A7=E8=8A=82=E7=82=B9?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jero-web/src/components/jero/JTreeSelect.vue | 656 ++++++++++---------
 1 file changed, 329 insertions(+), 327 deletions(-)

diff --git a/jero-web/src/components/jero/JTreeSelect.vue b/jero-web/src/components/jero/JTreeSelect.vue
index e57b9d76..2682c350 100644
--- a/jero-web/src/components/jero/JTreeSelect.vue
+++ b/jero-web/src/components/jero/JTreeSelect.vue
@@ -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>