八个组件的props透传，事件向上暴露

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

@@ -254,7 +254,7 @@
     //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
     model: {
       prop: 'value',
-      event: 'change'
+      event: 'select-change'
     }
   }
 </script>

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

@@ -10,6 +10,8 @@
       :value="momVal"
       :showTime="true"
       :format="dateFormat"
+      v-bind="$attrs"
+      v-on="$listeners"
       :getCalendarContainer="getCalendarContainer">
     </a-date-picker>
     <!--YYYY-MM-DD-->
@@ -22,6 +24,8 @@
       :value="momVal"
       :showTime="false"
       :format="dateFormat"
+      v-bind="$attrs"
+      v-on="$listeners"
       :getCalendarContainer="getCalendarContainer">
     </a-date-picker>
     <!--YYYY-MM-->
@@ -31,6 +35,8 @@
       :value="momVal"
       :disabled="disabled || readOnly"
       :format="dateFormat"
+      v-bind="$attrs"
+      v-on="$listeners"
       @change="handleMonthChange">
     </a-month-picker>
     <!--YYYY-->
@@ -42,6 +48,8 @@
       :value="year"
       :disabled="disabled || readOnly"
       :open="yearShowOne"
+      v-bind="$attrs"
+      v-on="$listeners"
       :getCalendarContainer="getCalendarContainer"
       @openChange="openChangeOne"
       @panelChange="panelChangeOne">
@@ -55,7 +63,7 @@
     props: {
       placeholder:{
         type: String,
-        default: '',
+        default: '请选择',
         required: false
       },
       value:{
@@ -108,10 +116,10 @@
     methods: {
       moment,
       handleDateChange(mom,dateStr){
-        this.$emit('change', dateStr);
+        this.$emit('date-change', dateStr);
       },
       handleMonthChange(mom,dateStr){
-        this.$emit('change',dateStr)
+        this.$emit('date-change',dateStr)
       },
       /**
        * 弹出日历和关闭日历的回调
@@ -125,13 +133,13 @@
         this.yearShowOne = false
         let year = moment(value,this.dateFormat).year().toString() // 处理成字符串
         this.year = value //组件显示的
-        this.$emit('change',year)
+        this.$emit('date-change',year)
       }
     },
     //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型
     model: {
       prop: 'value',
-      event: 'change'
+      event: 'date-change'
     }
   }
 </script>

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

@@ -1,5 +1,8 @@
 <template>
-  <a-tooltip placement="topLeft">
+  <a-tooltip
+    placement="topLeft"
+    v-bind="$attrs"
+    v-on="$listeners">
     <template slot="title">
       <span>{{value}}</span>
     </template>
@@ -20,6 +23,11 @@
         required: false,
         default: 25,
       }
+    },
+    //在定义组件时，指定父组件调用时候的传值属性（prop）和事件类型（event），事件名称要和$emit传的一致
+    model:{
+      prop:'value',
+      event:'change'
     }
   }
 </script>

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

@@ -12,6 +12,8 @@
       :disabled="disabled"
       :isMultiple="isMultiple"
       :showUploadList="isMultiple"
+      v-bind="$attrs"
+      v-on="$listeners"
       @change="handleChange"
       @preview="handlePreview"
       :class="!isMultiple?'imgupload':''">
@@ -48,7 +50,7 @@
     name: 'JImageUpload',
     data(){
       return {
-        uploadAction:window._CONFIG['domianURL']+"/sys/common/upload",
+        uploadAction:window._CONFIG['domianURL'] + '/sys/common/upload',
         uploadLoading:false,
         picUrl:false,
         headers:{},
@@ -108,6 +110,7 @@
       }
     },
     created(){
+      console.log(window._CONFIG['domianURL'] + '/sys/common/upload')
       const token = Vue.ls.get(ACCESS_TOKEN);
       this.headers = {"X-Access-Token":token}
     },
@@ -205,7 +208,7 @@
         if(arr.length>0){
           path = arr.join(",")
         }
-        this.$emit('change', path);
+        this.$emit('image-change', path);
       },
       handleDelete(file){
         //如有需要新增 删除逻辑
@@ -221,7 +224,7 @@
     },
     model: {
       prop: 'value',
-      event: 'change'
+      event: 'image-change'
     }
   }
 </script>

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

@@ -12,6 +12,8 @@
       accept=".xls,.xlsx"
       :fileList="fileList"
       :remove="handleRemove"
+      v-bind="$attrs"
+      v-on="$listeners"
       :beforeUpload="beforeUpload">
       <a-button>
         <a-icon type="upload" />
@@ -43,6 +45,11 @@
         default: '',
         required: false
       },
+      visible:{
+        type: Boolean,
+        default: '',
+        required: false
+      },
       biz:{
         type: String,
         default: '',
@@ -51,7 +58,6 @@
     },
     data(){
       return {
-        visible:false,
         uploading:false,
         fileList:[],
         uploadAction:'',
@@ -66,9 +72,9 @@
       }
     },
     created () {
+      console.log(this.$attrs)
       this.uploadAction = window._CONFIG['domianURL']+this.url
     },
-
     methods:{
       handleClose(){
         this.visible=false

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

@@ -5,6 +5,8 @@
     :value="arrayValue"
     @change="onChange"
     option-filter-prop="children"
+    v-bind="$attrs"
+    v-on="$listeners"
   >
     <a-select-option
       v-for="(item,index) in newOptions"
@@ -74,25 +76,6 @@
       this.newOptions = this.options
     },
     methods:{
-      // search(val){
-      //   let newArr = []
-      //   this.newOptions = this.options
-      //   if (this.options && this.options.length > 0){
-      //     this.options.forEach((item,index)=>{
-      //       if (item.text.indexOf(val) != -1){
-      //         newArr.push(item)
-      //       }
-      //     })
-      //     this.$nextTick(()=>{
-      //       this.newOptions = newArr
-      //     })
-      //   }else {
-      //     this.newOptions = this.options
-      //   }
-      // },
-      // blur(){
-      //   this.newOptions = this.options
-      // },
       onChange (selectedValue) {
         this.newOptions = this.options
         if(this.triggerChange){
@@ -109,6 +92,5 @@
         }
       }
     },
-
   }
 </script>

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

@@ -1,11 +1,22 @@
 <template>
   <div>
-    <a-select v-if="query" style="width: 100%" @change="handleSelectChange">
+    <a-select
+      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>
     </a-select>
-    <a-switch v-else v-model="checkStatus" :disabled="disabled" @change="handleChange"/>
+    <a-switch
+      v-else
+      v-model="checkStatus"
+      :disabled="disabled"
+      @change="handleChange"
+      v-bind="$attrs"
+      v-on="$listeners"/>
   </div>
 </template>
 <script>
@@ -69,15 +80,15 @@
     methods: {
       handleChange(checked){
         let flag = checked===false?this.options[1]:this.options[0];
-        this.$emit('change', flag);
+        this.$emit('check-change', flag);
       },
       handleSelectChange(value){
-        this.$emit('change', value);
+        this.$emit('check-change', value);
       }
     },
     model: {
       prop: 'value',
-      event: 'change'
+      event: 'check-change'
     }
   }
 </script>

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

@@ -4,6 +4,8 @@
     :placeholder="placeholder"
     :value="momVal"
     :format="dateFormat"
+    v-bind="$attrs"
+    v-on="$listeners"
     :getCalendarContainer="getCalendarContainer"
     @change="handleTimeChange"/>
 </template>
@@ -61,13 +63,13 @@
     methods: {
       moment,
       handleTimeChange(mom,timeStr){
-        this.$emit('change', timeStr);
+        this.$emit('time-change', timeStr);
       }
     },
     //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
     model: {
       prop: 'value',
-      event: 'change'
+      event: 'time-change'
     }
   }
 </script>

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

@@ -101,7 +101,7 @@
     },
     model: {
       prop: 'value',
-      event: 'change'
+      event: 'select-change'
     },
     methods:{
       loadViewInfo(){

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

@@ -281,13 +281,13 @@
         return this.treeData
       },
       validateProp(){
-        let mycondition = this.condition
+        let myCondition = this.condition
         return new Promise((resolve,reject)=>{
-          if(!mycondition){
+          if(!myCondition){
             resolve();
           }else{
             try {
-              let test=JSON.parse(mycondition);
+              let test=JSON.parse(myCondition);
               if(typeof test == 'object' && test){
                 resolve()
               }else{
@@ -305,7 +305,7 @@
     //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型
     model: {
       prop: 'value',
-      event: 'change'
+      event: 'select-change'
     }
   }
   //递归整个树，判断是否是叶子节点----同步获取数据时用到

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

@@ -12,7 +12,6 @@
 
     <a-upload
       name="file"
-      :multiple="true"
       :action="uploadAction"
       :headers="headers"
       :data="{'biz':bizPath}"
@@ -23,6 +22,8 @@
       :returnUrl="returnUrl"
       :listType="complistType"
       @preview="handlePreview"
+      v-bind="$attrs"
+      v-on="$listeners"
       :class="{'uploadty-disabled':disabled}">
       <template>
         <div v-if="isImageComp">
@@ -162,6 +163,7 @@
       }
     },
     created(){
+      console.log(this.$attrs)
       const token = Vue.ls.get(ACCESS_TOKEN);
       //---------------------------- begin 图片左右换位置 -------------------------------------
       this.headers = {"X-Access-Token":token};
@@ -236,7 +238,7 @@
         if(arr.length>0){
           path = arr.join(",")
         }
-        this.$emit('change', path);
+        this.$emit('file-change', path);
       },
       beforeUpload(file){
         this.uploadGoOn=true
@@ -298,7 +300,7 @@
               }
               // update-end-author:lvdandan date:20200603 for:【TESTA-514】【开源issue】多个文件同时上传时，控制台报错
             }
-            this.$emit('change', this.newFileList);
+            this.$emit('file-change', this.newFileList);
           }
         }
       },
@@ -339,7 +341,7 @@
             }
           }
           this.currentImg = last
-          this.$emit('change',arr.join(','))
+          this.$emit('file-change',arr.join(','))
         }
       },
       moveNext(){
@@ -360,7 +362,7 @@
             }
           }
           this.currentImg = next
-          this.$emit('change',arr.join(','))
+          this.$emit('file-change',arr.join(','))
         }
       },
       getIndexByUrl(){
@@ -420,7 +422,7 @@
     },
     model: {
       prop: 'value',
-      event: 'change'
+      event: 'file-change'
     }
   }
 </script>

jero-web/src/views/demo/SelectDemo.vue

@@ -158,7 +158,7 @@
         <a-row :gutter="24">
           <a-col :span="12">
             <a-form-item label="日期选择框">
-              <j-date v-model="jdate.value" :showType="'year'" dateFormat="YYYY"/>
+              <j-date v-model="jdate.value" :showType="'time'" dateFormat="YYYY-MM-DD HH:mm:ss"/>
             </a-form-item>
           </a-col>
           <a-col :span="12">日期选择框(v-model)：{{ jdate.value }}</a-col>
@@ -178,7 +178,7 @@
         <a-row :gutter="24">
           <a-col :span="12">
             <a-form-item label="过长剪切">
-              <j-ellipsis :value="jellipsis.value" :length="30"/>
+              <j-ellipsis :value="jellipsis.value" :length="20" @text-change="selectChange"/>
             </a-form-item>
           </a-col>
           <a-col :span="12">过长剪切：{{ jellipsis.value }}</a-col>
@@ -198,7 +198,7 @@
         <a-row :gutter="24">
           <a-col :span="12">
             <a-form-item label="多选下拉框">
-              <j-select-multiple v-model="jselectMultiple.value" :options="jselectMultiple.options"/>
+              <j-select-multiple v-model="jselectMultiple.value" :options="jselectMultiple.options" @change="selectChange"/>
             </a-form-item>
           </a-col>
           <a-col :span="12">多选下拉框(v-model)：{{ jselectMultiple.value }}</a-col>
@@ -328,11 +328,10 @@
             </a-form-item>
           </a-col>
         </a-row>
-
         <a-row :gutter="24">
           <a-col :span="12">
             <a-form-item label="图片上传">
-              <j-image-upload v-model="imgList"></j-image-upload>
+              <j-image-upload v-model="imgList" title="22"></j-image-upload>
             </a-form-item>
           </a-col>
           <a-col :span="12">选中的值(v-model)：{{ imgList }}</a-col>
@@ -340,7 +339,7 @@
         <a-row :gutter="24" style="margin-top: 65px;margin-bottom:50px;">
           <a-col :span="12">
             <a-form-item label="文件上传">
-              <j-upload v-model="fileList"></j-upload>
+              <j-upload v-model="fileList" title="ddd" :multiple="true"></j-upload>
             </a-form-item>
           </a-col>
           <a-col :span="12">
@@ -417,6 +416,23 @@
           <a-col :span="12">选择的值(v-model)：{{ formData.jPopup }}</a-col>
         </a-row>
 
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="JSwitch示例">
+              <j-switch v-model="formData.sw"></j-switch>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">选择的值(v-model)：{{ formData.sw }}</a-col>
+        </a-row>
+
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="JTime示例">
+              <j-time v-model="formData.mm"></j-time>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">选择的值(v-model)：{{ formData.mm }}</a-col>
+        </a-row>
       </a-form>
     </div>
 
@@ -449,6 +465,9 @@
   import JAreaLinkage from '@comp/jero/JAreaLinkage'
   import JMarkdownEditor from '@/components/jero/JMarkdownEditor/index'
   import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
+  import JSwitch from '@/components/jero/JSwitch.vue'
+  import JImportModal from '@/components/jero/JImportModal.vue'
+  import JTime from '@/components/jero/JTime.vue'
 
   export default {
     name: 'SelectDemo',
@@ -470,10 +489,14 @@
       JCodeEditor,
       JDate, JEditor, JEllipsis, JSlider, JSelectMultiple,
       JCron, JTreeSelect, JSuperQuery, JMultiSelectTag,
-      JSearchSelectTag
+      JSearchSelectTag,
+      JSwitch,
+      JImportModal,
+      JTime
     },
     data() {
       return {
+        ss:false,
         selectList: [],
         selectedDepUsers: '',
         formData: {
@@ -589,6 +612,12 @@ sayHi('hello, world!')`
       }
     },
     methods: {
+      as(){
+        this.ss = true
+      },
+      selectChange(){
+        console.log("ok")
+      },
       getDepartIdValue() {
         return this.form.getFieldValue('departId')
       },