rt-sim-training-client/src/views/newMap/displayNew/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 { getLoadTrainNumber } 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) {
                getLoadTrainNumber({ time: 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>