119 lines
4.2 KiB
Vue
119 lines
4.2 KiB
Vue
<template>
|
||
<el-dialog v-dialogDrag :title="title" :visible.sync="show" width="550px" :before-close="doClose">
|
||
<el-form ref="form" label-width="120px" :model="formModel" :rules="rules">
|
||
<el-form-item :label="$t('display.setTime.systemTime')" prop="initTime">
|
||
<el-time-picker
|
||
v-model="formModel.initTime"
|
||
:picker-options="pickerOptions"
|
||
:placeholder="$t('display.setTime.anyTime')"
|
||
@change="handleChange"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item v-if="hasNumber" :label="$t('display.setTime.loadTrainNum')" prop="loadNum">
|
||
<el-input-number v-model="formModel.loadNum" :min="1" :max="maxNumber" :label="$t('display.setTime.selectLoadTrainNum')" />
|
||
<span> {{ ` (${$t('display.setTime.maxTrainNum')} ：${maxNumber}) ` }} </span>
|
||
</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="show = false">{{ $t('global.cancel') }}</el-button>
|
||
<el-button type="primary" :loading="status" @click="handleSure">{{ $t('global.confirm') }}</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script>
|
||
import { prefixIntrger } from '@/utils/date';
|
||
import { getDesignatedTimeTrainNum } from '@/api/simulation';
|
||
|
||
// 计划行车时间选择
|
||
export default {
|
||
data() {
|
||
return {
|
||
show: false,
|
||
formModel: {
|
||
initTime: new Date(),
|
||
loadNum: 1
|
||
},
|
||
maxNumber: 1,
|
||
pickerOptions: { selectableRange: '00:00:00 - 23:59:59' },
|
||
status: false
|
||
};
|
||
},
|
||
computed: {
|
||
title() {
|
||
return this.$t('display.setTime.setSimulationSystemTime');
|
||
},
|
||
hasNumber() {
|
||
return this.$route.params.mode == 'demon' && this.$route.query.prdType == '04';
|
||
},
|
||
group() {
|
||
return this.$route.query.group;
|
||
},
|
||
rules() {
|
||
return {
|
||
initTime: [
|
||
{ required: true, message: this.$t('display.setTime.selectSystemTime'), trigger: 'change' },
|
||
{
|
||
validator(rule, value, callback) {
|
||
if (this.maxNumber == 0) {
|
||
callback(new Error(this.$t('display.setTime.selectValidStartTime')));
|
||
} else {
|
||
callback();
|
||
}
|
||
},
|
||
trigger: 'change',
|
||
maxNumber: this.maxNumber
|
||
}
|
||
],
|
||
loadNum: [
|
||
{ required: true, message: this.$t('display.setTime.selectTrainNum'), trigger: 'change' }
|
||
|
||
]
|
||
};
|
||
}
|
||
},
|
||
methods: {
|
||
doShow() {
|
||
this.formModel.initTime = new Date(this.$store.state.training.initTime || null);
|
||
this.handleChange(this.formModel.initTime);
|
||
this.show = true;
|
||
},
|
||
doClose() {
|
||
this.status = false;
|
||
this.show = false;
|
||
},
|
||
handleChange(initTime) {
|
||
this.formModel.loadNum = 0;
|
||
if (this.hasNumber) {
|
||
getDesignatedTimeTrainNum({ initTime: this.formatTime(initTime) }, this.group).then(resp => {
|
||
this.maxNumber = parseInt(resp.data);
|
||
});
|
||
}
|
||
},
|
||
formatTime(initTime) {
|
||
const hh = prefixIntrger(initTime.getHours(), 2);
|
||
const mm = prefixIntrger(initTime.getMinutes(), 2);
|
||
const ss = prefixIntrger(initTime.getSeconds(), 2);
|
||
return `${hh}:${mm}:${ss}`;
|
||
},
|
||
handleSure() {
|
||
this.$refs.form.validate((valid) => {
|
||
if (valid) {
|
||
this.status = true;
|
||
const model = {
|
||
initTime: this.formatTime(this.formModel.initTime)
|
||
};
|
||
|
||
if (this.hasNumber) {
|
||
model['loadNum'] = this.formModel.loadNum;
|
||
}
|
||
|
||
this.$emit('ConfirmSelectBeginTime', model);
|
||
this.doClose();
|
||
}
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|