rt-sim-training-client/src/views/planMonitor/newEditTool/menus/populatingGenericData.vue

<template>
  <el-dialog
    v-dialogDrag
    class="planEdit__tool duplicate-train"
    :title="title"
    :visible.sync="dialogShow"
    width="500px"
    :before-close="doClose"
    :z-index="2000"
    :modal="false"
    :close-on-click-modal="false"
  >
    <data-form ref="dataform" :form="form" :form-model="formModel" :rules="rules" />
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="doClose">{{ $t('global.cancel') }}</el-button>
      <el-button type="primary" size="medium" :loading="loading" @click="handleCommit">{{ $t('global.confirm') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getStationList, populatingGenericData } from '@/api/runplan';

export default {
    props: {
        loadRunPlanId: {
            type: String,
            default() {
                return '';
            }
        }
    },
    data() {
        return {
            dialogShow: false,
            stationList: [],
            loading: false,
            formModel: {
                stationRunningTime: 60, // 站间运行时间
                right: 3, // 是否向右发车 不填未同时发车
                beginTime: '',
                overTime: '',
                departureTimeInterval: 180, // 发车间隔时间
                parkedTime: 30, // 停止时间
                reentryTime: 60, // 折返时间
                startStationCode: '',
                endStationCode: ''
            },

            rules: {
                beginTime: [
                    { required: true, message: '请填写开始时间', trigger: 'blur' }
                ],
                overTime: [
                    { required: true, message: '请填写结束时间', trigger: 'blur' }
                ],
                departureTimeInterval: [
                    { required: true, message: '请填写发车间隔', trigger: 'blur' }
                ],
                parkedTime: [
                    { required: true, message: '请填写停站时间', trigger: 'blur' }
                ],
                reentryTime: [
                    { required: true, message: '请填写折返时间', trigger: 'blur' }
                ],
                startStationCode: [
                    { required: true, message: '请选择起始站', trigger: 'change' }
                ],
                endStationCode: [
                    { required: true, message: '请选择终止站', trigger: 'change' }
                ]
            }
        };
    },
    computed: {
        title() {
            return '创建运行图';
        },
        form() {
            return {
                labelWidth: '100px',
                items: [
                    { prop: 'beginTime', label: '开始时间', type: 'timePicker', selectableRange:'02:00:00-23:59:59'},
                    { prop: 'overTime', label: '结束时间', type: 'timePicker', selectableRange:'02:00:00-23:59:59'},
                    { prop: 'departureTimeInterval', label: '发车间隔', type: 'number'},
                    { prop: 'parkedTime', label: '停站时间', type: 'number'},
                    { prop: 'reentryTime', label: '折返时间', type: 'number'},
                    { prop: 'right', label: '发车类型', type: 'checkBox', children: [
                        { name: '上行发车', value: 1 },
                        { name: '下次发车', value: 2 },
                        { name: '同时发车', value: 3 }
                    ] },
                    { prop: 'startStationCode', label: '起始站', type: 'select', options: this.stationList },
                    { prop: 'endStationCode', label: '终止站', type: 'select', options: this.stationList }

                ]
            };
        }
    },
    created() {
        const mapId = this.$route.query.mapId;
        if (mapId) {
            getStationList(mapId).then(response => {
                this.stationList = response.data.map(elem => { return { value: elem.code, label: elem.name }; });
            }).catch(() => {
                this.$messageBox(`获取车站列表失败`);
            });
        }
    },
    methods: {
        doShow(params) {
            this.loading = false;
            this.dialogShow = true;
        },
        doClose() {
            this.loading = false;
            this.$refs.dataform.resetForm();
            this.dialogShow = false;
        },
        handleCommit() {
            this.$refs.dataform.validateForm(() => {
                this.loading = true;
                if (this.formModel.right == 1) {
                    this.formModel.right = true;
                } else if (this.formModel.right == 2) {
                    this.formModel.right = false;
                } else {
                    this.formModel.right = null;
                }
                if (this.formModel.overTime > this.formModel.beginTime) {
                    populatingGenericData(this.$route.query.planId || this.loadRunPlanId, this.formModel).then(res => {
                        this.loading = false;
                        this.doClose();
                        this.$store.dispatch('runPlan/refresh');
                    }).catch(error => {
                        console.log(error);
                        this.doClose();
                    });
                } else {
                    this.$messageBox('结束时间必须大于开始时间');
                }
            });
        },
        // 转换时间格式
        formatDateTime(date) {
            console.log(date, 3333);
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let minute = date.getMinutes();
            let second = date.getSeconds();
            minute = minute < 10 ? ('0' + minute) : minute;
            second = second < 10 ? ('0' + second) : second;
            return h + ':' + minute + ':' + second;
        }

    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>