rt-sim-training-client/src/views/display/demon/setTime.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>