rt-sim-training-client/src/views/display/demon/setTime.vue

<template>
  <el-dialog :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="系统时间" prop="initTime">
        <el-time-picker
          v-model="formModel.initTime"
          :picker-options="pickerOptions"
          placeholder="任意时间点"
          @change="handleChange"
        />
      </el-form-item>
      <el-form-item v-if="hasNumber" label="加载列车数" prop="loadNum">
        <el-input-number v-model="formModel.loadNum" :min="1" :max="maxNumber" label="请选择可加载列车个数" />
        <span> {{ `（可加载的最大车辆个数：${maxNumber}）` }} </span>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="show = false">取 消</el-button>
      <el-button type="primary" :loading="status" @click="handleSure">确 定</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 '设置仿真系统时间';
		},
		hasNumber() {
			return this.$route.params.mode == 'demon' && this.$route.query.prdType == '04';
		},
		group() {
			return this.$route.query.group;
		},
		rules() {
			return {
				initTime: [
					{ required: true, message: '请选择系统时间', trigger: 'change' },
					{
						validator(rule, value, callback) {
							if (this.maxNumber == 0) {
								callback(new Error('请选择有效的开始时间'));
							} else {
								callback();
							}
						},
						trigger: 'change',
						maxNumber: this.maxNumber
					}
				],
				loadNum: [
					{ required: true, message: '请选择车辆个数', 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>