mes

需求：判断是否跨天，进行不同的计算工作时间。

思路：获取开始时间和结束时间，判断：如果不跨天，就结束时间减去开始时间。如果跨天，就24*60（开始时间加上结束时间）。

<a-row>
<a-col :xl="4" :lg="8" :md="24" :sm="24" :xs="24">
<a-form-item label="是否跨天" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group v-model="value" @change="onChange">
<a-radio :value="1">
是
</a-radio>
<a-radio :value="2">
否
</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
</a-row>


<a-row>
<a-col :xl="4" :lg="8" :md="24" :sm="24" :xs="24">
<a-form-item label="开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-time-picker
:default-open-value="moment('00:00:00', 'HH:mm:ss')"
use12-hours
format="HH:mm:ss"
:trigger-change="true"
style=" 100%"
v-decorator="[ 'startTime']"
@change="onChangeStartTime"
/>
</a-form-item>
</a-col>
<a-col :xl="4" :lg="8" :md="24" :sm="24" :xs="24">
<a-form-item label="结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-time-picker
:default-open-value="moment('00:00:00', 'HH:mm:ss')"
:trigger-change="true"
style=" 100%"
use12-hours
format="HH:mm:ss"
v-decorator="[ 'endTime']"

@change="onChangeEndTime"
/>
</a-form-item>
</a-col>
<a-col :xl="4" :lg="8" :md="24" :sm="24" :xs="24">
<a-form-item label="工作小时数" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-model="worktime" v-decorator="[ 'remarks', validatorRules.remarks]">
</a-input>
</a-form-item>
</a-col>
</a-row>

data() {
return {
value:1,
isnextday:1,
startTime:'',
endTime:'',
worktime:''}}

methods: {
//这是是否跨天的回调
onChange(e) {
this.isnextday=e.target.value;//组件自带的回调，能取到e.target.value值

console.log(this.isnextday);

console.log('radio checked', e.target.value);
},
moment,
//获取时间值：
onChangeStartTime(time, timeString) {//组件自带的回调
this.startTime = timeString;// 获取点击选择的开始的时间
console.log(`startTime:${this.startTime}`);
this.setRemarksTime();
},
onChangeEndTime(time, timeString) {
this.endTime = timeString;//获取点击选择的结束的时间
console.log(`startTime:${this.endTime}`);
this.setRemarksTime();
},
//计算
setRemarksTime(){
if(this.startTime=="" || this.endTime=="") {
this.form.setFieldsValue({
remarks: ``,
});
return;
}
// 计算之前统一转为秒，同一个单位
let time1 = this.startTime.split(':');
console.log(time1);
let allTime1 = Number(time1[0]) * 3600 + Number(time1[1]) * 60 + Number(time1[2]);
let time2 = this.endTime.split(':');
console.log(time2);
let allTime2 = Number(time2[0]) * 3600 + Number(time2[1]) * 60 + Number(time2[2]);
console.log(allTime1);
console.log(allTime2);
let allTime=0;
if(this.isnextday==1){//跨天
allTime=(24*3600-allTime1)+allTime2;
}else if(this.isnextday==2){//bu跨天
if(allTime2<allTime1){
alert('开始时间不能大于结束时间');
this.form.setFieldsValue({
remarks: ``,
});
return;
}else{
allTime = allTime2 - allTime1;
}
}
console.log(allTime);
// 把秒转为时分秒
let h = Math.floor(allTime / 3600);
let h2 = allTime % 3600;
let m = Math.floor(h2 / 60);
let m2 = h2 % 60;
console.log(time1);
//这是form的获值方法
this.form.setFieldsValue({//组件自带的回调

remarks: `${h < 10 ? ("0" + String(h)) : h}:${m < 10 ? ("0" + m) : m}:${m2 < 10 ? ("0" + m2) : m2}`,
});
},

需求2：当点击保存的时候，跳转到一个编辑页面，那个编辑页面要显示原来填进去的信息，现在没有信息。