vue 工具组件 时间范围提取成公共组件

<template>
    <div class="jDatePicker">
       /*:label 动态标题  :prop 父组件传给子组件的值*/
      <FormItem :label="label" :prop="beginProps" style="position: relative;">
      /*!important 深层改变样式，防止被页面新的样式给冲刷掉*/
        <DatePicker
          type="date"
          style="width: 47%;float: left;font-size: 12px!important;"
          v-focusNext
          :class="{ 'check-input': isBeginRed }"
          @on-change="getStartTime"
          v-model="beginValue"
          ref="elementFirst"
        ></DatePicker>
        /*两个事件选择框的间隔符*/
        <span class="jDatePickerdiv">-</span>
        /*正确或错误的图标  按照自己的系统来*/
        <jRuleIcon :rule="ruleValue"></jRuleIcon>
        /*显示错误信息*/
        <div class="showWarnMessage">
          <span v-show="isEndDateRed">结束日期不能小于开始日期</span>
          <span v-show="isBeginRed">开始日期不能大于结束日期</span>
          <span v-show="isSeachLimit">查询区间只能为三个月</span>
          <span v-show="isSeachOneLimit">查询区间只能为一个月</span>
        </div>
        /*间隔时间不需要结束时间的标题，但是需要from表单的验证属性字段*/
        <FormItem label="" :prop="endDateProps" >
  
        <DatePicker
          type="date"
          style="width: 47%;float: left;margin-left: 6%;"
          :class="{ 'check-input': isEndDateRed }"
          v-focusNext
          @on-change="getEndTime"
          v-model="endDateValue"
        ></DatePicker>
      </FormItem>
      </FormItem>   
    </div>
  </template>
  
  <script>
  /*dateFormat 格式化时间函数 getTime 获取时间函数 按照自己系统的设置路径引入 */
  import { dateFormat, getTime } from "@/util/common";
  export default {
    name: "jDatePicker", 
    props: {
      label: { type: String, default: "日期" }, //label名称
      startDate: { type: String }, //开始日期
      endDate: { type: String }, //结束日期
      ifCurrentDate: { type: Boolean, default: true }, //是否显示当前日期 默认是
      beginProps: { type: String }, // 起始日期校验非空的字段名
      endDateProps: { type: String }, // 结束日期校验非空的字段名
      ifWeek: { type: Boolean, default: true }, //是否默认差值一周 默认是
      ifDateLimit: { type: Boolean, default: false }, //是否期间限制 默认否
      dateLimit: { type: Number }, // 起始日期校验非空的字段名
      rule: { type: Number, default: 0 }, // 必填校验图标显示
    },
    data() {
      return {
        beginValue: this.startDate, // 传入的开始时间
        endDateValue: this.endDate, // 传入的结束时间
        ruleValue: this.rule, // 默认值是0
        isBeginRed: false,
        isEndDateRed: false,
        isSeachLimit: false,
        isSeachOneLimit: false,
      };
    },
    mounted() {
      //是否默认显示系统日期
      if (this.ifCurrentDate) {
      // 获取当日时间
        this.getDate();
      }
    },
    watch: {
      // 监听事件
      rule: function(v) {
        if (v) {
          this.ruleValue = v;
        }
      },
      endDate: function(v) {
        //有的页面只有结束日期有默认值
        if (v) {
          this.endDateValue = v;
        }
      },
    },
    methods: {
      getDate() {
        if (this.ifWeek) {
          this.weekDate();
        } else {
          this.currentDate();
        }
      },
      currentDate() {
        this.systemTime().then((res) => {
  
          this.beginValue = res;
          this.endDateValue = res;
          /*发消息通知引入的页面值被改变*/
          this.$emit("on-change", this.beginValue, this.endDateValue);
        });
      },
      weekDate() {
        this.systemTime()
          .then((res) => {
            this.beginValue = res;
            this.endDateValue = res;
          })
          .then(() => {
            this.beginValue = getTime(
              -7,
              this.beginValue,
              this.endDateValue
            );
            this.beginValue = dateFormat(
              new Date(this.beginValue),
              "yyyy-MM-dd"
            );
            this.endDateValue = dateFormat(
              new Date(this.endDateValue),
              "yyyy-MM-dd"
            );
            /*发消息通知引入的页面值被改变*/
            this.$emit("on-change", this.beginValue, this.endDateValue);
          });
      },
      DateDiff(sDate1, sDate2) {
        //sDate1和sDate2是2019-3-12格式
        var aDate, oDate1, oDate2, iDays;
        aDate = sDate1.split("-");
        oDate1 = new Date(aDate[1] + "-" + aDate[2] + "-" + aDate[0]); //转换为9-25-2017格式
        aDate = sDate2.split("-");
        oDate2 = new Date(aDate[1] + "-" + aDate[2] + "-" + aDate[0]);
        iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数
        return iDays;
      },
      /*获取开始时间*/
      getStartTime(v) {
        this.beginValue = v;
        if (this.endDateValue.length != 0) {
          this.endDateValue = dateFormat(
            new Date(this.endDateValue),
            "yyyy-MM-dd"
          );
        }
  
        var start = Number(v.replace(/[-]/g, ""));
        var end = Number(this.endDateValue.replace(/[-]/g, ""));
        if (this.ifDateLimit) {
          //期间限制
          let sum = this.DateDiff(this.beginValue, this.endDateValue);
          if (start > end && start !== 0) {
            this.isSeachLimit = false;
            this.isbeginRed = true;
            this.beginValue = "";
          } else {
            if (this.dateLimit == 1 ) {
              //区间一个月
              if (sum > 31) {
                this.isSeachOneLimit = true;
                this.beginValue = "";
              } else {
                this.isSeachOneLimit = false;
              }
            } else {
              //区间三个月
              if (sum > 93) {
                this.isSeachLimit = true;
                this.beginValue = "";
              } else {
                this.isSeachLimit = false;
              }
            }
  
            this.isBeginRed = false;
          }
        } else {
          //无期间限制 开始时间不能大于结束时间
          if (start > end && end !== 0) {
            this.isBeginRed = true;
            this.beginValue = "";
          } else {
            this.isBeginRed = false;
          }
        }
  
        if (start == 0) {
          this.isBeginRed = false;
        }
        this.$emit("on-change", this.beginValue, this.endDateValue);
      },
      /*选择结束时间函数*/
      getEndTime(v) {
        this.endDateValue = v;
        if (this.beginValue.length != 0) {
          this.beginValue = dateFormat(
            new Date(this.beginValue),
            "yyyy-MM-dd"
          );
        }
        var start = Number(this.beginValue.replace(/[-]/g, ""));
        var end = Number(v.replace(/[-]/g, ""));
        if (this.ifDateLimit) {
          //期间限制
          let sum = this.DateDiff(this.beginValue, this.endDateValue);
          // 判断结束时间大于开始时间
          if (start > end && end !== 0) {
            this.isSeachLimit = false;
            this.isEndDateRed = true;
            this.endDateValue = "";
          } else {
            if (this.dateLimit == 1) {
              if (sum > 31) {
                this.isSeachOneLimit = true;
                this.endDateValue = "";
              } else {
                this.isSeachOneLimit = false;
              }
            } else {
              if (sum > 93) {
                this.isSeachLimit = true;
                this.endDateValue = "";
              } else {
                this.isSeachLimit = false;
              }
            }
  
            this.isEndDateRed = false;
          }
        } else {
          //无期间限制
          if (start > end && end !== 0) {
            this.isEndDateRed = true;
            this.endDateValue = "";
          } else {
            this.isEndDateRed = false;
          }
        }
  
        this.$emit("on-change", this.beginValue, this.endDateValue);
      },
      // 重置
      reset() {
        if (this.ifCurrentDate) {
          this.getDate();
        } else {
          this.beginValue = "";
          this.endDateValue = "";
  
          this.$emit("on-change", this.beginValue, this.endDateValue);
        }
        this.isBeginRed = false;
        this.isEndDateRed = false;
        this.isSeachLimit = false;
        this.ruleValue = 0;
      },
      focus() {
        //外部调用客户号聚焦统一命名
        this.$refs.elementFirst.focus();
      },
    },
  };
  </script>
  
  <style lang="less" scoped>
  /*样式 根据系统决定*/
  .jDatePicker {
    height: XXpx;
  }
  .showWarnMessage {
    position: absolute;
    left: 0;
    top: xxpx;
    color: #ed4014;
  }
  /* 日期分割线 */
.jDatePickerdiv{
    position: absolute;left:49%;top:1px
  }

  </style>
  

全局应用：
需要在main.js 文件引入
import jDatePicker from ‘地址路径’;
Vue.component(jDatePicker.name, jDatePicker); // 注册组件

 <!-- 页面使用，Form 标签要存在的，组件FormItem是Form子元素 -->
	<Form
	   ref="queryForm"
	   :model="queryForm"
	   :label-width="110"
	 >
	   <Row>
          <Col span="8">
            <jDatePicker
              ref="jDatePicker"
              :label="'xx日期'"
              :startDate="queryForm.xxStat"
              :endDate="queryForm.xxEnd"
              :ifCurrentDate="false"
              @on-change="getDatePicker"
            >
            </jDatePicker>   
           </Col> 
          <Col span="8">
           <jDatePicker
                    ref="jDatePicker"
                    :label="'xx日期'"
                    :startDate="queryForm.xxStat"
                    :endDate="queryForm.xxEnd"
                    :ifCurrentDate="true"
                    @on-change="getDatePicker"
                    :ifWeek = "false"
                    :startDateProps="'startTime'"
                    :endDateProps="'endTime'"
            ></jDatePicker>
         </Col>   
	</Form>   
	<!-- startDateProps 传入要检验的字段-->   
	<!-- label 传值要有单引号-->   
	<!-- 对应子组件的消息传递，把值赋予指定的queryForm的值 -->   
	getDatePicker(startDate, endDate) {
      this.queryForm.xxStat = startDate;
      this.queryForm.xxEnd = endDate;
    },