美文网首页
element-ui el-date-picker 控制区间的选

element-ui el-date-picker 控制区间的选

作者: 疯泽清 | 来源:发表于2021-01-07 14:32 被阅读0次

    功能:

     1.选择小时,控制日期区间不可以超过2天

      2.选择天,控制日期区间不可以超过1个月 

      3.切换表格,不限制时间区间,都可查询

      4.添加时间的快捷项 小时:最近两天 、天:最近一周/最近一个月

    点击查询来进行控制:

     diolagSearch() {

          if (this.activeName === 'first') {   //曲线

            switch (this.HisType) {   //小时/天的控制字段

              case '小时':

                if (new Date(this.timeDate[1]).getTime() - new Date(this.timeDate[0]).getTime() > (2 * 1000 * 60 * 60 * 24)) {

                  this.$message({

                    message: '警告时间不可以超过两天',

                    type: 'warning'

                  })

                } else {

                  this.dialogParams.StartDate = this.timeDate[0]

                  this.dialogParams.EndDate = this.timeDate[1]

                  this.getDiolagHttp()

                }

                break

              case '天':

                if (new Date(this.timeDate[1]).getTime() - new Date(this.timeDate[0]).getTime() > (30 * 1000 * 60 * 60 * 24)) {

                  this.$message({

                    message: '警告时间不可以超过一个月',

                    type: 'warning'

                  })

                } else {

                  this.dialogParams.StartDate = this.timeDate[0]

                  this.dialogParams.EndDate = this.timeDate[1]

                  this.getDiolagHttp()

                }

                break

            }

          } else {

            this.dialogParams.StartDate = this.timeDate[0]

            this.dialogParams.EndDate = this.timeDate[1]

            this.getDiolagHttp()

          }

          this.stationShow = true   //弹框不可以关闭

        }

    控制时间的快捷项:

     watch: {

        HisType: function(val) {

          switch (val) {

            case '小时':

              this.pickerOptions = {

                shortcuts: [

                  {

                    text: '最近两天',

                    onClick(picker) {

                      const end = new Date()

                      const start = new Date()

                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)

                      picker.$emit('pick', [start, end])

                    }

                  }

                ]

              }

              this.timeFormat = 'yyyy-MM-dd HH:mm:ss'   //默认的时间格式

              this.dialogParams.HisType = 1   //请求参数字段的修改

              break

            case '天':

              console.log(2)

              this.pickerOptions = {

                shortcuts: [

                  {

                    text: '最近一周',

                    onClick(picker) {

                      const end = new Date()

                      const start = new Date()

                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)

                      picker.$emit('pick', [start, end])

                    }

                  },

                  {

                    text: '最近一个月',

                    onClick(picker) {

                      const end = new Date()

                      const start = new Date()

                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)

                      picker.$emit('pick', [start, end])

                    }

                  }

                ]

              }

              this.timeFormat = 'yyyy-MM-dd'

              this.dialogParams.HisType = 2

              break

          }

        }

      }

                                                           有待优化,记录如此

    相关文章

      网友评论

          本文标题:element-ui el-date-picker 控制区间的选

          本文链接:https://www.haomeiwen.com/subject/awjzoktx.html