Vue dynamically adds data. The time of new data is automatically filled according to the time of the last piece of data; get the day before and after a certain time, a week or a few hours of the current time

Description of Requirement

Click the Add button to add a new rotation stage. This is the normal array push and then render the page. There is no problem. The main reason is that if the rotation end time is filled in the first rotation stage, the rotation start time and rotation end time of the newly added rotation stage will be It needs to be filled automatically (the rotation start time of the second one is one day after the end time of the first one; the end time of the second one is one month after the start time of the second one, and so on)

 problem analysis

The main reason is that the start time of the new stage corresponds to the end time of the previous stage, so you must first figure out the day after the acquisition of a certain time. Paste my js code here

// 获取某一时间的前一天 后一天 一周 或者是几个小时
    getDay (td, day, hours) { // td 相当于指定的某个时间 在我的需求里相当于是上一阶段的结束时间 这里根据自己的需求可自行变化
      var today = new Date(td)
      var targetday = today.getTime() + 1000 * 60 * 60 * 24 * day + hours
      today.setTime(targetday)
      var tYear = today.getFullYear()
      var tMonth = today.getMonth()
      var tDate = today.getDate()
      // var getHours = today.getHours()
      tMonth = this.doHandleMonth(tMonth + 1)
      tDate = this.doHandleMonth(tDate)
      return tYear + '-' + tMonth + '-' + tDate
    },
    doHandleMonth (month) {
      var m = month
      if (month.toString().length === 1) {
        m = '0' + month
      }
      return m
    },

transfer

mounted () {
    console.log('昨天：', this.getDay('2022-9-15', -1, 7200000))
    console.log('今天：', this.getDay('2022-9-15', 0, 3600000))
    console.log('明天：', this.getDay('2022-9-15', 1, 3600000))
    console.log('一周后：', this.getDay('2022-9-15', 7, 7200000))
 }

Effect

Implementation

 After the time is encapsulated, it is called because each item added to the array needs to be automatically filled, so it needs to be traversed. If there is no time to fill in the first stage, then the rotation time of the later added stages does not need to be automatically filled. 

// 添加轮转阶段
    handlePlus () {
      console.log(this.form)
      this.form.push({
        departValue: '', // 轮转科室
        tpStartTime: '', // 轮转开始时间
        tpEndTime: '', // 轮转结束时间
        bookItem: '', // 轮转教材
        intoTestNumber: 10, // 入科考试
        centerTestNumber: 10, // 中期考试
        outTestNumber: 10, // 出科考试
        makeupTestNumber: 10 // 补考考试
      })
      if (this.form[0].tpEndTime === '') {
        return
      }
      for (var i = 0; i < this.form.length; i++) {
        console.log(this.getDay(this.form[i].tpEndTime, 1, 3600000), '----')
        this.form[this.form.length - 1].tpStartTime = this.getDay(this.form[this.form.length - 2].tpEndTime, 1, 7200000) // 第二阶段的开始时间是第一阶段的结束时间后一天
        this.form[this.form.length - 1].tpEndTime = this.getDay(this.form[this.form.length - 1].tpStartTime, 30, 7200000) // 第二阶段的结束时间是第二阶段的开始时间后一个月
      }
    },

Attached reference materials:

Vue gets the day before the current time, the day after the day, the week or the hours of the current time