From e85017474c2fbed9abbc41c978ef1bdc05f3bc64 Mon Sep 17 00:00:00 2001
From: yaoyanan <794433246@qq.com>
Date: Wed, 24 Mar 2021 14:18:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E8=A7=84=E8=8C=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jero-web/src/components/jero/JDate.vue       |  38 ++--
 jero-web/src/components/jero/JTreeSelect.vue | 197 +++++++++++--------
 2 files changed, 126 insertions(+), 109 deletions(-)

diff --git a/jero-web/src/components/jero/JDate.vue b/jero-web/src/components/jero/JDate.vue
index e2593ef6..e75f98de 100644
--- a/jero-web/src/components/jero/JDate.vue
+++ b/jero-web/src/components/jero/JDate.vue
@@ -10,7 +10,8 @@
       :value="momVal"
       :showTime="true"
       :format="dateFormat"
-      :getCalendarContainer="getCalendarContainer"></a-date-picker>
+      :getCalendarContainer="getCalendarContainer">
+    </a-date-picker>
     <!--YYYY-MM-DD-->
     <a-date-picker
       v-if="showType === 'day'"
@@ -21,7 +22,8 @@
       :value="momVal"
       :showTime="false"
       :format="dateFormat"
-      :getCalendarContainer="getCalendarContainer"></a-date-picker>
+      :getCalendarContainer="getCalendarContainer">
+    </a-date-picker>
     <!--YYYY-MM-->
     <a-month-picker
       v-if="showType === 'month'"
@@ -29,7 +31,8 @@
       :value="momVal"
       :disabled="disabled || readOnly"
       :format="dateFormat"
-      @change="handleMonthChange"></a-month-picker>
+      @change="handleMonthChange">
+    </a-month-picker>
     <!--YYYY-->
     <a-date-picker
       v-if="showType === 'year'"
@@ -37,12 +40,12 @@
       mode="year"
       :format="dateFormat"
       :value="year"
-      @disabledDate="disabledDate"
       :disabled="disabled || readOnly"
       :open="yearShowOne"
       :getCalendarContainer="getCalendarContainer"
       @openChange="openChangeOne"
-      @panelChange="panelChangeOne"></a-date-picker>
+      @panelChange="panelChangeOne">
+    </a-date-picker>
   </div>
 </template>
 <script>
@@ -64,12 +67,6 @@
         default: 'YYYY-MM-DD',
         required: false
       },
-      //此属性可以被废弃了
-      triggerChange:{
-        type: Boolean,
-        required: false,
-        default: false
-      },
       readOnly:{
         type: Boolean,
         required: false,
@@ -95,8 +92,7 @@
       let dateStr = this.value;
       return {
         yearShowOne:false, //控制年份模态框的显示与否
-        year:'',
-        decorator:"",
+        year:'', // mode==“year” 专用
         momVal:!dateStr?null:moment(dateStr,this.dateFormat),
       }
     },
@@ -110,9 +106,6 @@
       }
     },
     methods: {
-      disabledDate(current){
-        return new Date(current._d).setFullYear((new Date(current._d).getFullYear())) < new Date(moment()._d).setFullYear((new Date(moment()._d).getFullYear() - 1))
-      },
       moment,
       handleDateChange(mom,dateStr){
         this.$emit('change', dateStr);
@@ -120,9 +113,11 @@
       handleMonthChange(mom,dateStr){
         this.$emit('change',dateStr)
       },
-      // 弹出日历和关闭日历的回调
+      /**
+       * 弹出日历和关闭日历的回调
+       * status：打开或关闭的状态
+       * */
       openChangeOne(status){
-        //status是打开或关闭的状态
         this.yearShowOne =  status
       },
       // 得到年份选择器的值
@@ -133,15 +128,10 @@
         this.$emit('change',year)
       }
     },
-    //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
+    //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型
     model: {
       prop: 'value',
       event: 'change'
     }
   }
-  // let bodyO = document.querySelector()
-  // bodyO.onclick = function (){
-  //   console.log(0)
-  // }
-
 </script>
diff --git a/jero-web/src/components/jero/JTreeSelect.vue b/jero-web/src/components/jero/JTreeSelect.vue
index 1e14935a..77807490 100644
--- a/jero-web/src/components/jero/JTreeSelect.vue
+++ b/jero-web/src/components/jero/JTreeSelect.vue
@@ -1,21 +1,37 @@
 <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 +44,11 @@
   export default {
     name: 'JTreeSelect',
     props: {
+      isAsync:{ // 是否采用异步方式初始化树
+        type:Boolean,
+        required:true,
+        default:true
+      },
       value:{
         type: String,
         required: false
@@ -80,8 +101,8 @@
     },
     data () {
       return {
-        treeValue: null,
-        treeData:[],
+        treeValue: null, // 选中的数据
+        treeData:[],// 渲染树的数组
         url:"/sys/dict/loadTreeData",
         view:'/sys/dict/loadDictItem/',
         tableName:"",
@@ -95,7 +116,7 @@
       },
       dict(){
         this.initDictInfo()
-        this.loadRoot();
+        this.loadRoot()
       }
     },
     created(){
@@ -105,19 +126,18 @@
         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[]
               this.onLoadTriggleChange(res.result[0]);
             }
           })
@@ -135,6 +155,7 @@
         this.text = arr[1]
         this.code = arr[2]
       },
+      //异步加载树节点
       asyncLoadTreeData (treeNode) {
         return new Promise((resolve) => {
           if (treeNode.$vnode.children) {
@@ -151,10 +172,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 +192,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 +205,63 @@
           }
         }
       },
-      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)
+      /**
+       * 初始化树
+       * 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){
           this.$emit('change', '');
           this.treeValue = null
         } else if (value instanceof Array) {
-          this.$emit('change', value.map(item => item.value).join(','))
+          //多选
+          this.$emit('change', value.join(',').toString()) //修改第一次选中时，选中为空的情况
           this.treeValue = value
         } else {
-          this.$emit('change', value.value,value.label)
+          //单选
+          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
@@ -277,10 +288,26 @@
         })
       }
     },
-    //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
+    //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型
     model: {
       prop: 'value',
       event: '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>