问题:
表单中的某一个字段是根据表单中的另一个字段通过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 = thisif (!!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.applicationDateconst afterCurDate = scope.getDueDateAfterYear(curDate, 20)this.$set(scope.form, 'expireDate', afterCurDate)}//如果是实用新型专利:申请日+10年-1天else if (scope.form.type === '2') {const curDate = scope.form.applicationDateconst afterCurDate = scope.getDueDateAfterYear(curDate, 10)this.$set(scope.form, 'expireDate', afterCurDate)}//如果是外观设计专利:申请日+15年-1天else if (scope.form.type === '3') {const curDate = scope.form.applicationDateconst afterCurDate = scope.getDueDateAfterYear(curDate, 15)this.$set(scope.form, 'expireDate', afterCurDate)}//如果是软件著作权:申请日+50年的12月31日else if (scope.form.type === '4') {const curDateString = scope.form.applicationDateconst 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},