Vue는 데이터를 동적으로 추가합니다. 새 데이터의 시간은 마지막 데이터의 시간에 따라 자동으로 채워집니다. 특정 시간의 전후 날짜, 일주일 또는 현재 시간의 몇 시간을 가져옵니다.

요구 사항 설명

추가 버튼을 클릭하여 새 회전 단계를 추가합니다.이것은 일반적인 배열 푸시 후 페이지를 렌더링하는 것입니다.문제가 없습니다.주된 이유는 첫 번째 회전 단계에서 회전 종료 시간을 채우면 회전 시작 시간이 새로 추가된 로테이션 단계의 로테이션 종료 시간은 자동으로 채워져야 합니다. 두 번째 시작 시간 등)

 문제 분석

주된 이유는 새 단계의 시작 시간이 이전 단계의 종료 시간과 일치하므로 일정 시간 획득 후의 날을 먼저 파악하고 여기에 내 js 코드를 붙여넣어야

// 获取某一时间的前一天 后一天 一周 或者是几个小时
    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
    },

옮기다

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))
 }

효과

구현

 시간을 캡슐화한 후 배열에 추가된 각 항목을 자동으로 채워야 하므로 순회를 해야 하므로 호출되며, 첫 번째 단계를 채울 시간이 없으면 나중에 추가되는 단계의 회전 시간을 자동으로 채워질 필요가 없습니다. 

// 添加轮转阶段
    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) // 第二阶段的结束时间是第二阶段的开始时间后一个月
      }
    },

첨부 참고 자료:

Vue는 현재 시간의 전날, 다음날, 주 또는 현재 시간의 시간을 얻습니다.