问题是因为后台接口返回来的一个label是null，所以选中的时候会报错
1.结构
<div class="clear" v-if="item.remindType==2&&showMoreRemind">
<el-form-item style="padding-left:15px;" prop="moreRemind" class="item-form-3 require-label">
<el-select v-model="remindForm.remindIntervalList" placeholder="请选择" multiple
@change="getRemindTime" :disabled="operationType === 'view'" >
<el-option v-for="option in item.dicts"
:key="option.dictName+index"
:label="option.dictName"
:value="option.label"
>
</el-option>
<el-option value="custom" label="自定义" v-if="isCustom===true"></el-option>
</el-select>
<span class="tip">周期内提醒：针对跨天日程，在开始时间每日的同一时间进行提醒</span>
</el-form-item>
<el-form-item prop="IntervalTimes" label="提前" class="item-form-4 mr-80"
v-if="customTimeFlag===true">
<div class="customTimeInput">
<el-input v-model.number="remindForm.customTimeD" type="IntervalTimes" maxlength="2"
style="padding:0; width: 80px;"></el-input>
天
<el-input v-model.number="remindForm.customTimeH" type="IntervalTimes" maxlength="2"
style="padding:0; width: 80px;"></el-input>
小时
<el-input v-model.numder="remindForm.customTimeM" type="IntervalTimes" maxlength="2"
style="padding:0; width: 80px;"></el-input>
分钟
</div>
</el-form-item>
</div>
``
2.思路是修改的时候，在详情返回的时候把null修改-3或其他的不是null，underfunded就行，然后再保存的时候再把-3修改成null提交给后台，因为之前给后台约定的是null，（记得以后千万别让后台返回什么null，underfunded这样的特殊，如果返回会把前端坑死不可）
searchDetails(obj) {
let params = {id: obj.id};
http.get('/task/taskDetail', params)
.then((res) => {
if (res.status === 0) {
this.attchList = res.data.fileList.length ? [{
name: res.data.fileList[0].fileName,
url: res.data.fileList[0].filePath
}] : [];
this.fileInfo = (res.data.fileList.length && res.data.fileList[0]) || {};
//回显自定义input值
let timeArr = [];
for (let i = 0; i < this.myRemindList.length; i++) {
for (let k = 0; k < this.myRemindList[i].dicts.length; k++) {
if (this.myRemindList[i].remindType == 2) {
timeArr.push(this.myRemindList[i].dicts[k].label)
}
}
}
//过滤出来只有自定义
let newTimeArr = [];
for (let n = 0; n < res.data.remindIntervalList.length; n++) {
if (timeArr.indexOf(res.data.remindIntervalList[n]) == -1&&res.data.remindIntervalList[n]!=null) {
newTimeArr.push(res.data.remindIntervalList[n])
break;
}
}
//计算自定义input框的值
var date = parseInt(newTimeArr[0] / (24 * 60));
var hours = parseInt((newTimeArr[0] % (24 * 60)) / 60);
var minutes = (newTimeArr[0] % (24 * 60)) % 60;
//自定义回显选中（添加一个'custom' 字段识辨是自定义）
if (newTimeArr.length > 0&&newTimeArr[0]!=null) {
res.data.remindIntervalList.push("custom")
}
// 回显自定义和周期内
let _remindIntervalList=res.data.remindIntervalList;
for(let h= 0; h < _remindIntervalList.length; h++){
//是自定义
if(_remindIntervalList[h] === newTimeArr[0]&&_remindIntervalList[h] != null){
_remindIntervalList.splice(h,1);
}
//是周期内
if(_remindIntervalList[h] === null){
_remindIntervalList[h]=-3
}
}
this.remindForm = {
...res.data,
remindTime: res.data.remindInterval,
fileList: res.data.fileList,
checked: res.data.isWholeDay === 1,
userId: '',
customTimeD: date,
customTimeH: hours,
customTimeM: minutes,
groupId: res.data.groupId,
remindIntervalList: _remindIntervalList,
remindType: Number(res.data.remindType), //回显必须number类型
repeatTimes: res.data.repeatTimes,
repeatType: res.data.repeatType,
remindInfos: res.data.remindInfos,
};
} else {
this.$message.error(res.message);
}
})
.catch((response) => {
console.log(response);
})
},
3.在保存的时候在修改回来，后台想要的数据
addRemind() {
//自定义时间监听的到值this.remindInterval替换数组中custom自定义添加给传给后台的数组中
if (this.remindForm.remindIntervalList) {
for (let i = 0; i < this.remindForm.remindIntervalList.length; i++) {
if (this.remindForm.remindIntervalList[i] === 'custom') {
this.remindForm.remindIntervalList.splice(i, 1, this.remindInterval);
}
}
}
//自定义验证
if (this.allDay === false) {
if (moment(startTime).valueOf() < Date.now()) {
return this.$message.error("所选时间不能早于当前时间，请重新选择")
}
}
//周期内过滤一下
for(let b=0; b<this.remindForm.remindIntervalList.length;b++){
if(this.remindForm.remindIntervalList[b]==-3){
this.remindForm.remindIntervalList[b]=null;
break
}
}
}
网友评论