解决修改详情与监听数据冲突的问题

问题：

表单中的某一个字段是根据表单中的另一个字段通过watch函数监听出来的；

但是我们的详情和修改也会触发监听事件！

解决方案：

通过监听判断是不是走的修改和详情操作；如何处理呢？

通过添加条件判断：监听数据从undefined--->实际值

  watch: {
    'form.type': {
      handler(val, oval) {
        /*知识产权类型变更，判断是否需要计算到期日期*/
        //如果原来没有值，然后有新值并且存在表单的id说明是编辑或者详情；
        if(!oval && !!val && this.form.id){
          console.log('详情或修改操作')
        }
        else{
          if(!!val){
            this.getDueDate()
          }
        }
      },
    },
    'form.applicationDate': {
      handler(val, oval) {
        /*申请日期变更，判断是否需要计算到期日期*/
        //如果原来没有值，然后有新值并且存在表单的id说明是编辑或者详情；
        if(!oval && !!val && this.form.id){
          console.log('详情或修改操作')
        }else{
          if(!!val){
            this.getDueDate()
          }
        }
      },
    },
  },

走逻辑的方法：

    // 获取到期日期
    getDueDate() {
      const scope = this
      if (!!scope.form.status && !!scope.form.applicationDate && !!scope.form.type) {
        //如果状态为有效和已失效，需要显示到期日期
        if (scope.form.status === '2' || scope.form.status === '3') {
          //如果是发明专利：申请日+20年-1天
          if (scope.form.type === '1') {
            const curDate = scope.form.applicationDate
            const afterCurDate = scope.getDueDateAfterYear(curDate, 20)
            this.$set(scope.form, 'expireDate', afterCurDate)
          }
          //如果是实用新型专利：申请日+10年-1天
          else if (scope.form.type === '2') {
            const curDate = scope.form.applicationDate
            const afterCurDate = scope.getDueDateAfterYear(curDate, 10)
            this.$set(scope.form, 'expireDate', afterCurDate)
          }
          //如果是外观设计专利：申请日+15年-1天
          else if (scope.form.type === '3') {
            const curDate = scope.form.applicationDate
            const afterCurDate = scope.getDueDateAfterYear(curDate, 15)
            this.$set(scope.form, 'expireDate', afterCurDate)
          }
          //如果是软件著作权：申请日+50年的12月31日
          else if (scope.form.type === '4') {
            const curDateString = scope.form.applicationDate
            const curDate = new Date(curDateString);
            // 获取当前年份
            const currentYear = curDate.getFullYear();
            // 计算50年后的年份
            const afterYear = currentYear + 50;
            const afterCurDate = afterYear+'-12-31';
            this.$set(scope.form, 'expireDate', afterCurDate)
          }else{
            //修改详情展示数据，如果是变更的话单独去置空
            //this.$set(scope.form, 'expireDate', '')
          }
        }
      }
    },
    // 获取指定年份后的到期日期
    getDueDateAfterYear(curDateString,year){
      const curDate = new Date(curDateString);
      // 获取当前年份
      const currentYear = curDate.getFullYear();
      // 计算year年后的年份
      const yearAfter20Years = currentYear + year;
      // 创建一个新的日期对象，设置为year年后的同一天
      const dateAfter20Years = new Date(curDate);
      dateAfter20Years.setFullYear(yearAfter20Years);
      // 减去一天
      dateAfter20Years.setDate(dateAfter20Years.getDate() - 1);
      // 格式化输出日期
      const formattedDate = dateAfter20Years.toISOString().split('T')[0];
      return formattedDate
    },

原文地址：https://blog.csdn.net/qq_58738794/article/details/144347740

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！