代码初始化

2021-12-31 11:35:09 +08:00
commit a527f38fd7
1907 changed files with 783789 additions and 0 deletions
@@ -0,0 +1,160 @@
+<template>
+  <span>
+    <!--YYYY-MM-DD HH:mm:ss-->
+    <a-date-picker
+      v-if="showType === 'time'"
+      dropdownClassName="j-date-picker"
+      :disabled="disabled || readOnly"
+      :placeholder="placeholder"
+      @change="handleDateChange"
+      :value="momVal"
+      :showTime="true"
+      :format="dateFormat"
+      v-bind="$attrs"
+      v-on="childListeners"
+      :getCalendarContainer="getCalendarContainer">
+    </a-date-picker>
+    <!--YYYY-MM-DD-->
+    <a-date-picker
+      v-if="showType === 'day'"
+      dropdownClassName="j-date-picker"
+      :disabled="disabled || readOnly"
+      :placeholder="placeholder"
+      @change="handleDateChange"
+      :value="momVal"
+      :showTime="false"
+      :format="dateFormat"
+      v-bind="$attrs"
+      v-on="childListeners"
+      :getCalendarContainer="getCalendarContainer">
+    </a-date-picker>
+    <!--YYYY-MM-->
+    <a-month-picker
+      v-if="showType === 'month'"
+      :placeholder="placeholder"
+      :value="momVal"
+      :disabled="disabled || readOnly"
+      :format="dateFormat"
+      v-bind="$attrs"
+      v-on="childListeners"
+      @change="handleMonthChange">
+    </a-month-picker>
+    <!--YYYY-->
+    <a-date-picker
+      v-if="showType === 'year'"
+      :placeholder="placeholder"
+      mode="year"
+      :format="dateFormat"
+      :value="year"
+      :disabled="disabled || readOnly"
+      :open="yearShowOne"
+      v-bind="$attrs"
+      v-on="childListeners"
+      :getCalendarContainer="getCalendarContainer"
+      @openChange="openChangeOne"
+      @panelChange="panelChangeOne">
+    </a-date-picker>
+  </span>
+</template>
+<script>
+  import moment from 'moment'
+  export default {
+    name: 'JDate',
+    props: {
+      placeholder:{
+        type: String,
+        default: '请选择',
+        required: false
+      },
+      value:{
+        type: String,
+        required: false
+      },
+      dateFormat:{
+        type: String,
+        default: 'YYYY-MM-DD',
+        required: false
+      },
+      readOnly:{
+        type: Boolean,
+        required: false,
+        default: false
+      },
+      disabled:{
+        type: Boolean,
+        required: false,
+        default: false
+      },
+      //控制选择时分秒
+      showType:{
+        type: String,
+        required: false,
+        default:'time'
+      },
+      getCalendarContainer: {
+        type: Function,
+        default: (node) => node.parentNode
+      }
+    },
+    data () {
+      let dateStr = this.value;
+      return {
+        yearShowOne:false, //控制年份模态框的显示与否
+        year:'', // mode==“year” 专用
+        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)
+        }
+        if(!val){
+          this.momVal = null
+        }else{
+          this.momVal = moment(val,this.dateFormat)
+        }
+      }
+    },
+    methods: {
+      moment,
+      handleDateChange(mom,dateStr){
+        this.$emit('change', dateStr);
+      },
+      handleMonthChange(mom,dateStr){
+        this.$emit('change',dateStr)
+      },
+      /**
+       * 弹出日历和关闭日历的回调
+       * status：打开或关闭的状态
+       * */
+      openChangeOne(status){
+        this.yearShowOne =  status
+      },
+      // 得到年份选择器的值
+      panelChangeOne(value){
+        this.yearShowOne = false
+        let year = moment(value,this.dateFormat).year().toString() // 处理成字符串
+        this.year = value //组件显示的
+        this.$emit('change',year)
+      }
+    },
+    //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型
+    model: {
+      prop: 'value',
+      event: 'change'
+    }
+  }
+</script>