【修复】修复自建组件的问题

jero-web/src/components/jero/JCategorySelect.vue

@@ -9,7 +9,7 @@
     :loadData="asyncLoadTreeData"
     :value="treeValue"
     v-bind="_attrs"
-    v-on="$listeners"
+    v-on="childListeners"
     :treeData="treeData"
     :multiple="multiple"
     @change="onChange">
@@ -79,6 +79,22 @@
 
       }
     },
+    computed:{
+      _attrs() {
+        let attrs
+        attrs = { ...this.$attrs }
+        return attrs
+      },
+      //透传给下级组件的事件，需要排除本组件使用的change事件
+      childListeners() {
+        const vm = this;
+        let result = Object.assign({},
+          this.$listeners,
+        )
+        delete result.change;
+        return result;
+      }
+    },
     watch: {
       value () {
         this.loadItemByCode()
@@ -93,13 +109,6 @@
         this.loadItemByCode()
       })
     },
-    computed:{
-      _attrs() {
-        let attrs
-        attrs = { ...this.$attrs }
-        return attrs
-      }
-    },
     methods: {
       /**加载一级节点 */
       loadRoot(){
@@ -159,7 +168,7 @@
         /*
           * 使用$listeners向上暴露事件---和$emit一起使用出现的问题：change事件会执行两遍
           * 解决办法：改变选中时提交的事件名*/
-        this.$emit('select-change', value, obj)
+        this.$emit('change', value, obj)
       },
       asyncLoadTreeData (treeNode) {
         return new Promise((resolve) => {
@@ -211,7 +220,7 @@
           /*
           * 使用$listeners向上暴露事件---和$emit一起使用出现的问题：change事件会执行两遍
           * 解决办法：改变选中时提交的事件名*/
-          this.$emit('select-change', '');
+          this.$emit('change', '');
           this.treeValue = ''
         } else if (Array.isArray(value)) {
           let labels = []
@@ -254,7 +263,7 @@
     //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
     model: {
       prop: 'value',
-      event: 'select-change'
+      event: 'change'
     }
   }
 </script>

jero-web/src/components/jero/JDate.vue

@@ -11,7 +11,7 @@
       :showTime="true"
       :format="dateFormat"
       v-bind="$attrs"
-      v-on="$listeners"
+      v-on="childListeners"
       :getCalendarContainer="getCalendarContainer">
     </a-date-picker>
     <!--YYYY-MM-DD-->
@@ -25,7 +25,7 @@
       :showTime="false"
       :format="dateFormat"
       v-bind="$attrs"
-      v-on="$listeners"
+      v-on="childListeners"
       :getCalendarContainer="getCalendarContainer">
     </a-date-picker>
     <!--YYYY-MM-->
@@ -36,7 +36,7 @@
       :disabled="disabled || readOnly"
       :format="dateFormat"
       v-bind="$attrs"
-      v-on="$listeners"
+      v-on="childListeners"
       @change="handleMonthChange">
     </a-month-picker>
     <!--YYYY-->
@@ -49,7 +49,7 @@
       :disabled="disabled || readOnly"
       :open="yearShowOne"
       v-bind="$attrs"
-      v-on="$listeners"
+      v-on="childListeners"
       :getCalendarContainer="getCalendarContainer"
       @openChange="openChangeOne"
       @panelChange="panelChangeOne">
@@ -101,13 +101,26 @@
       return {
         yearShowOne:false, //控制年份模态框的显示与否
         year:'', // mode==“year” 专用
-        momVal:!dateStr?null:moment(dateStr,this.dateFormat),
+        momVal:!dateStr?null:moment(dateStr,this.dateFormat)
+      }
+    },
+    computed: {
+      //透传给下级组件的事件，需要排除本组件使用的change事件
+      childListeners() {
+        const vm = this;
+        let result = Object.assign({},
+          this.$listeners,
+        )
+        delete result.change;
+        return result;
       }
     },
     watch: {
       value (val) {
         let fm = this.dateFormat
-        moment.prototype.toJSON = function(){return moment(this).format(fm)}
+        moment.prototype.toJSON = function(){
+          return moment(this).format(fm)
+        }
         if(!val){
           this.momVal = null
         }else{
@@ -118,10 +131,10 @@
     methods: {
       moment,
       handleDateChange(mom,dateStr){
-        this.$emit('date-change', dateStr);
+        this.$emit('change', dateStr);
       },
       handleMonthChange(mom,dateStr){
-        this.$emit('date-change',dateStr)
+        this.$emit('change',dateStr)
       },
       /**
        * 弹出日历和关闭日历的回调
@@ -135,13 +148,13 @@
         this.yearShowOne = false
         let year = moment(value,this.dateFormat).year().toString() // 处理成字符串
         this.year = value //组件显示的
-        this.$emit('date-change',year)
+        this.$emit('change',year)
       }
     },
     //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型
     model: {
       prop: 'value',
-      event: 'date-change'
+      event: 'change'
     }
   }
 </script>

jero-web/src/components/jero/JImageUpload.vue

@@ -13,7 +13,7 @@
       :isMultiple="isMultiple"
       :showUploadList="isMultiple"
       v-bind="$attrs"
-      v-on="$listeners"
+      v-on="childListeners"
       @change="handleChange"
       @preview="handlePreview"
       :class="!isMultiple?'imgupload':''">
@@ -84,6 +84,17 @@
       }
       //update-end-author:wangshuai date:20201021 for:LOWCOD-969 新增number属性，用于判断上传数量
     },
+    computed: {
+      //透传给下级组件的事件，需要排除本组件使用的change事件
+      childListeners() {
+        const vm = this;
+        let result = Object.assign({},
+          this.$listeners,
+        )
+        delete result.change;
+        return result;
+      }
+    },
     watch:{
       value: {
         handler(val,oldValue) {
@@ -194,7 +205,7 @@
         if(arr.length>0){
           path = arr.join(",")
         }
-        this.$emit('image-change', path);
+        this.$emit('change', path);
       },
       handleDelete(file){
         //如有需要新增 删除逻辑
@@ -209,7 +220,7 @@
     },
     model: {
       prop: 'value',
-      event: 'image-change'
+      event: 'change'
     }
   }
 </script>

jero-web/src/components/jero/JInput.vue

@@ -3,7 +3,7 @@
            :value="inputVal"
            @input="backValue"
            v-bind="$props"
-           v-on="$listeners"
+           v-on="childListeners"
            ></a-input>
 </template>
 
@@ -40,6 +40,22 @@
         default: false
       },
     },
+    data(){
+      return {
+        inputVal:''
+      }
+    },
+    computed: {
+      //透传给下级组件的事件，需要排除本组件使用的change事件
+      childListeners() {
+        const vm = this;
+        let result = Object.assign({},
+          this.$listeners,
+        )
+        delete result.change;
+        return result;
+      }
+    },
     watch:{
       value:{
         immediate:true,
@@ -52,15 +68,6 @@
         this.backValue({ target: { value: this.inputVal } })
       },
     },
-    model: {
-      prop: 'value',
-      event: 'input_change'
-    },
-    data(){
-      return {
-        inputVal:''
-      }
-    },
     methods:{
       initVal(){
         if(!this.value){
@@ -108,8 +115,12 @@
             break;
           default:
         }
-        this.$emit('input_change', text);
+        this.$emit('change', text);
       }
+    },
+    model: {
+      prop: 'value',
+      event: 'change'
     }
   }
 </script>

jero-web/src/components/jero/JSelectMultiple.vue

@@ -5,8 +5,6 @@
     :value="arrayValue"
     @change="onChange"
     option-filter-prop="children"
-    v-bind="$attrs"
-    v-on="$listeners"
   >
     <a-select-option
       v-for="(item,index) in newOptions"

jero-web/src/components/jero/JSwitch.vue

@@ -4,8 +4,7 @@
       v-if="query"
       style="width: 100%"
       @change="handleSelectChange"
-      v-bind="$attrs"
+      >
-      v-on="$listeners">
       <a-select-option v-for="(item, index) in queryOption" :key="index" :value="item.value">
         {{ item.text }}
       </a-select-option>
@@ -16,7 +15,7 @@
       :disabled="disabled"
       @change="handleChange"
       v-bind="$attrs"
-      v-on="$listeners"/>
+      v-on="childListeners"/>
   </div>
 </template>
 <script>
@@ -49,6 +48,23 @@
         checkStatus: false
       }
     },
+    computed:{
+      queryOption(){
+        let arr = []
+        arr.push({value:this.options[0],text:'是'})
+        arr.push({value:this.options[1],text:'否'})
+        return arr;
+      },
+      //透传给下级组件的事件，需要排除本组件使用的change事件
+      childListeners() {
+        const vm = this;
+        let result = Object.assign({},
+          this.$listeners,
+        )
+        delete result.change;
+        return result;
+      }
+    },
     watch: {
       value:{
         immediate: true,
@@ -56,7 +72,7 @@
           if(!this.query){
             if(!val){
               this.checkStatus = false
-              this.$emit('check-change', this.options[1]);
+              this.$emit('change', this.options[1]);
             }else{
               if(this.options[0]==val){
                 this.checkStatus = true
@@ -69,26 +85,18 @@
         }
       }
     },
-    computed:{
-      queryOption(){
-        let arr = []
-        arr.push({value:this.options[0],text:'是'})
-        arr.push({value:this.options[1],text:'否'})
-        return arr;
-      }
-    },
     methods: {
       handleChange(checked){
         let flag = checked===false?this.options[1]:this.options[0];
-        this.$emit('check-change', flag);
+        this.$emit('change', flag);
       },
       handleSelectChange(value){
-        this.$emit('check-change', value);
+        this.$emit('change', value);
       }
     },
     model: {
       prop: 'value',
-      event: 'check-change'
+      event: 'change'
     }
   }
 </script>

jero-web/src/components/jero/JTable.vue

@@ -67,6 +67,10 @@
 <script>
 import get from 'lodash.get'
 
+const LEFT_FROZEN = 1; // 1为左侧冻结
+const RIGHT_FROZEN = 2; // 2为右侧冻结
+const NO_FROZEN = 3; // 3为不冻结或解冻
+
 export default {
   name: 'JTable',
   props: {
@@ -271,28 +275,23 @@ export default {
       })
     },
     fixedChange(e, dataIndex) {
-      // 冻结列头的参数
+      if (e.target.value === LEFT_FROZEN) {
-      // 1为左侧冻结
-      // 2为右侧冻结
-      // 3为不冻结或解冻
-
-      if (e.target.value === 1) {
         //左侧冻结
         this.curTableColumns.find((item) => {
           if (item.dataIndex === dataIndex) {
             item.fixed = 'left'
           }
         })
-        // 左侧冻结,先把冻结项删除,再unshift到数组首位
+        // // 左侧冻结,先把冻结项删除,再unshift到数组首位
-        let arr
+        // let arr
-        for (let i = 0; i < this.curTableColumns.length; i++) {
+        // for (let i = 0; i < this.curTableColumns.length; i++) {
-          if (this.curTableColumns[i].dataIndex === dataIndex) {
+        //   if (this.curTableColumns[i].dataIndex === dataIndex) {
-            arr = this.curTableColumns.splice(i, 1)
+        //     arr = this.curTableColumns.splice(i, 1)
-            break
+        //     break
-          }
+        //   }
-        }
+        // }
-        this.curTableColumns.unshift(arr[0])
+        // this.curTableColumns.unshift(arr[0])
-      } else if (e.target.value === 2) {
+      } else if (e.target.value === RIGHT_FROZEN) {
         //右侧冻结
         this.curTableColumns.find((item) => {
           if (item.dataIndex === dataIndex) {
@@ -300,14 +299,14 @@ export default {
           }
         })
         // 右侧冻结,先把冻结项删除,再push到数组末位
-        let arr
+        // let arr
-        for (let i = 0; i < this.curTableColumns.length; i++) {
+        // for (let i = 0; i < this.curTableColumns.length; i++) {
-          if (this.curTableColumns[i].dataIndex === dataIndex) {
+        //   if (this.curTableColumns[i].dataIndex === dataIndex) {
-            arr = this.curTableColumns.splice(i, 1)
+        //     arr = this.curTableColumns.splice(i, 1)
-            break
+        //     break
-          }
+        //   }
-        }
+        // }
-        this.curTableColumns.push(arr[0])
+        // this.curTableColumns.push(arr[0])
       } else {
         this.curTableColumns.find((item) => {
           //解冻
@@ -315,7 +314,7 @@ export default {
             item.fixed = false
           }
         })
-        this.diffColunms()
+        // this.diffColunms()
       }
     },
     // 列头重新排序
@@ -326,26 +325,20 @@ export default {
       this.curTableColumns.forEach((item) => {
         if (!item.fixed) {
           newColumnsList.push(item)
-        }
+        } else if (item.fixed === 'left') {
-      })
-      this.curTableColumns.forEach((item) => {
-        if (item.fixed === 'left') {
           newFixedLeftList.push(item)
-        }
+        } else if (item.fixed === 'right') {
-      })
-      this.curTableColumns.forEach((item) => {
-        if (item.fixed === 'right') {
           newFixedRightList.push(item)
         }
       })
-      // 冒泡排序,根据key重新排序
+      // TODO 冒泡排序,根据key重新排序
-      for (var i = 0; i < newColumnsList.length - 1; i++) {
+      // for (var i = 0; i < newColumnsList.length - 1; i++) {
-        for (var j = 0; j < newColumnsList.length - 1 - i; j++) {
+      //   for (var j = 0; j < newColumnsList.length - 1 - i; j++) {
-          if (newColumnsList[j].key > newColumnsList[j + 1].key) {
+      //     if (newColumnsList[j].key > newColumnsList[j + 1].key) {
-            ;[newColumnsList[j], newColumnsList[j + 1]] = [newColumnsList[j + 1], newColumnsList[j]]
+      //       [newColumnsList[j], newColumnsList[j + 1]] = [newColumnsList[j + 1], newColumnsList[j]]
-          }
+      //     }
-        }
+      //   }
-      }
+      // }
       // 解构赋值,重新定义列头List
       this.curTableColumns = [...[...newFixedLeftList, ...newColumnsList], ...newFixedRightList]
     },

jero-web/src/components/jero/JTime.vue

@@ -5,7 +5,7 @@
     :value="momVal"
     :format="dateFormat"
     v-bind="$attrs"
-    v-on="$listeners"
+    v-on="childListeners"
     :getCalendarContainer="getCalendarContainer"
     @change="handleTimeChange"/>
 </template>
@@ -51,6 +51,17 @@
         momVal:!timeStr?null:moment(timeStr,this.dateFormat)
       }
     },
+    computed: {
+      //透传给下级组件的事件，需要排除本组件使用的change事件
+      childListeners() {
+        const vm = this;
+        let result = Object.assign({},
+          this.$listeners,
+        )
+        delete result.change;
+        return result;
+      }
+    },
     watch: {
       value (val) {
         if(!val){
@@ -63,13 +74,13 @@
     methods: {
       moment,
       handleTimeChange(mom,timeStr){
-        this.$emit('time-change', timeStr);
+        this.$emit('change', timeStr);
       }
     },
     //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
     model: {
       prop: 'value',
-      event: 'time-change'
+      event: 'change'
     }
   }
 </script>

jero-web/src/components/jero/JTreeDict.vue

@@ -12,7 +12,7 @@
     @change="onChange"
     @search="onSearch"
     v-bind="_attrs"
-    v-on="$listeners">
+    v-on="childListeners">
   </a-tree-select>
 </template>
 
@@ -93,6 +93,15 @@
         let attrs
         attrs = { ...this.$attrs }
         return attrs
+      },
+      //透传给下级组件的事件，需要排除本组件使用的change事件
+      childListeners() {
+        const vm = this;
+        let result = Object.assign({},
+          this.$listeners,
+        )
+        delete result.change;
+        return result;
       }
     },
     created(){
@@ -101,7 +110,7 @@
     },
     model: {
       prop: 'value',
-      event: 'select-change'
+      event: 'change'
     },
     methods:{
       loadViewInfo(){
@@ -191,9 +200,9 @@
           /*
           * 使用$listeners向上暴露事件---和$emit一起使用出现的问题：change事件会执行两遍
           * 解决办法：改变选中时提交的事件名*/
-          this.$emit('select-change', '');
+          this.$emit('change', '');
         }else{
-          this.$emit('select-change', value.value);
+          this.$emit('change', value.value);
         }
         this.treeValue = value
       },

jero-web/src/components/jero/JTreeSelect.vue

@@ -15,7 +15,7 @@
       :multiple="multiple"
       :show-search="!multiple"
       v-bind="_attrs"
-      v-on="$listeners"
+      v-on="childListeners"
       @change="onChange">
     </a-tree-select>
     <a-tree-select
@@ -128,6 +128,15 @@
         let attrs
         attrs = { ...this.$attrs }
         return attrs
+      },
+      //透传给下级组件的事件，需要排除本组件使用的change事件
+      childListeners() {
+        const vm = this;
+        let result = Object.assign({},
+          this.$listeners,
+        )
+        delete result.change;
+        return result;
       }
     },
     created(){
@@ -267,15 +276,15 @@
           /*
           * 使用$listeners向上暴露事件---和$emit一起使用出现的问题：change事件会执行两遍
           * 解决办法：改变选中时提交的事件名*/
-          this.$emit('select-change', '');
+          this.$emit('change', '');
           this.treeValue = null
         } else if (value instanceof Array) {
           //多选
-          this.$emit('select-change', value.join(',').toString()) //修改第一次选中时，选中为空的情况
+          this.$emit('change', value.join(',').toString()) //修改第一次选中时，选中为空的情况
           this.treeValue = value
         } else {
           //单选
-          this.$emit('select-change', value)
+          this.$emit('change', value)
           this.treeValue = value
         }
       },
@@ -307,7 +316,7 @@
     //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型
     model: {
       prop: 'value',
-      event: 'select-change'
+      event: 'change'
     }
   }
   //递归整个树，判断是否是叶子节点----同步获取数据时用到

jero-web/src/components/jero/JUpload.vue

@@ -13,7 +13,7 @@
       :listType="complistType"
       @preview="handlePreview"
       v-bind="$attrs"
-      v-on="$listeners"
+      v-on="childListeners"
       :class="{'uploadty-disabled':disabled}">
       <template>
         <div v-if="isImageComp">
@@ -125,12 +125,21 @@
       }
     },
     computed:{
+      //透传给下级组件的事件，需要排除本组件使用的change事件
+      childListeners() {
+        const vm = this;
+        let result = Object.assign({},
+          this.$listeners,
+        )
+        delete result.change;
+        return result;
+      },
       isImageComp(){
         return this.fileType === FILE_TYPE_IMG
       },
       complistType(){
         return this.fileType === FILE_TYPE_IMG?'picture-card':'text'
-      }
+      },
     },
     created(){
       const token = Vue.ls.get(ACCESS_TOKEN);
@@ -139,7 +148,6 @@
       this.containerId = 'container-ty-'+new Date().getTime();
       //---------------------------- end 图片左右换位置 -------------------------------------
     },
-
     methods:{
       initFileListArr(val){
         if(!val || val.length==0){
@@ -188,7 +196,7 @@
         if(arr.length>0){
           path = arr.join(",")
         }
-        this.$emit('file-change', path);
+        this.$emit('change', path);
       },
       beforeUpload(file){
         this.uploadGoOn=true
@@ -249,7 +257,7 @@
               }
               // update-end-author:lvdandan date:20200603 for:【TESTA-514】【开源issue】多个文件同时上传时，控制台报错
             }
-            this.$emit('file-change', this.newFileList);
+            this.$emit('change', this.newFileList);
           }
         }
       },
@@ -268,7 +276,7 @@
     mounted(){},
     model: {
       prop: 'value',
-      event: 'file-change'
+      event: 'change'
     }
   }
 </script>