rt-sim-training-client/src/views/dispatcherLoger/addDispatcherLogerRunplan.vue

<template>
  <el-dialog
    v-dialogDrag
    class="chengdou-03__systerm train-set-plan"
    :title="title"
    :visible.sync="show"
    width="670px"
    :before-close="doClose"
    :z-index="2000"
    :modal="false"
    :close-on-click-modal="false"
  >
    <el-form id="AddDispatcherForm" ref="form" :model="model" label-width="80px" :rules="rules">
      <el-form-item label="车站:" prop="stationCode" style="width: 100%;">
        <el-select v-model="model.stationCode" placeholder="" style="width:180px" @change="changeStation">
          <el-option
            v-for="item in stationList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="列车类型:" prop="trainType">
        <el-select v-model="model.trainType" placeholder="" style="width:180px">
          <el-option
            v-for="item in trainTypeList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="运行类型:" prop="runType" style="margin-left: 45px;">
        <el-select v-model="model.runType" placeholder="" style="width:180px">
          <el-option
            v-for="item in runTypeList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="到达车次:" prop="arriveTripNumber">
        <el-input v-model="model.arriveTripNumber" style="width:160px" :disabled="model.startRunPlan" />
      </el-form-item>
      <el-form-item label="出发车次:" prop="departTripNumber" style="margin-left: 66px;">
        <el-input v-model="model.departTripNumber" style="width:160px" :disabled="model.endRunPlan" />
      </el-form-item>
      <el-form-item label="接车口:" prop="arriveDirectionCode">
        <el-select v-model="model.arriveDirectionCode" placeholder="" style="width:180px" :disabled="model.startRunPlan">
          <el-option
            v-for="item in filterArrMapStationDirectionList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="发车口:" prop="departDirectionCode" style="margin-left:45px;">
        <el-select v-model="model.departDirectionCode" placeholder="" style="width:180px" :disabled="model.endRunPlan">
          <el-option
            v-for="item in filterDepMapStationDirectionList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="接车股道:" prop="arriveSectionCode">
        <el-select v-model="model.arriveSectionCode" placeholder="" style="width:160px" :disabled="model.startRunPlan">
          <el-option
            v-for="item in filterArrSectionList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="发车股道:" prop="departSectionCode" style="margin-left: 67px;">
        <el-select v-model="model.departSectionCode" placeholder="" style="width:160px" :disabled="model.endRunPlan">
          <el-option
            v-for="item in filterDepSectionList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="到达时间:" prop="arrivePlanTime">
        <el-date-picker v-model="model.arrivePlanTime" type="datetime" :disabled="model.startRunPlan" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" style="width:160px" />
      </el-form-item>
      <el-form-item label="" prop="startRunPlan" class="noMargin" style="margin-left:10px;">
        <el-checkbox v-model="model.startRunPlan">始发</el-checkbox>
      </el-form-item>
      <el-form-item label="出发时间:" prop="departPlanTime" style="margin-left:10px;">
        <el-date-picker v-model="model.departPlanTime" type="datetime" :disabled="model.endRunPlan" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" style="width:160px" />
      </el-form-item>
      <el-form-item label="" prop="endRunPlan" class="noMargin" style="margin-left:10px;">
        <el-checkbox v-model="model.endRunPlan">终到</el-checkbox>
      </el-form-item>
      <el-form-item label="" prop="electrical" class="noMargin" style="margin-left:80px;">
        <el-checkbox v-model="model.electrical">电力</el-checkbox>
      </el-form-item>
      <el-form-item label="" prop="passenger" class="noMargin" style="margin-left:10px;">
        <el-checkbox v-model="model.passenger">办理客运</el-checkbox>
      </el-form-item>
      <el-form-item label="" prop="transfinite" style="margin-left:20px;" class="noMargin">
        <el-select v-model="model.transfinite" placeholder="" style="width:110px">
          <el-option
            v-for="item in transfiniteList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <br>
      <el-form-item label="" prop="trackDiscordant" style="margin-left:80px;width: 220px;" class="noMargin">
        <el-checkbox v-model="model.trackDiscordant">运行股道与基本径路不一致</el-checkbox>
      </el-form-item>
      <el-form-item label="" prop="entryOutDiscordant" style="margin-left:90px;width: 220px;" class="noMargin">
        <el-checkbox v-model="model.entryOutDiscordant">出入口与基本径路不一致</el-checkbox>
      </el-form-item>
      <!-- trackDiscordant -->
      <!-- 运行股道与基本径路不一致 -->
      <!-- entryOutDiscordant -->
      <!-- 出入口与基本径路不一致 -->
      <!-- keyTrains
      重点列车 -->
    </el-form>
    <el-row justify="center" style="margin-top:10px">
      <el-col :span="7" :offset="5">
        <el-button :id="domIdConfirm" type="primary" :loading="loading" @click="commit">确定</el-button>
      </el-col>
      <el-col :span="7" :offset="2">
        <el-button :id="domIdCancel" @click="cancel">取 消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler';
import {menuOperate, commitOperate} from '@/jmapNew/theme/components/utils/menuOperate';
import { mapGetters } from 'vuex';
export default {
    name: 'AddDispatcherLogerRunplan',
    data() {
        var validateTripNumber = (rule, value, callback) => {
            if (value) {
                const judge = /^[a-zA-Z0-9]*[\d]$/.test(value);
                if (judge) {
                    if (value.toString().length > 6 || value.toString().length < 2) {
                        callback('车次长度2-6位');
                    } else {
                        callback();
                    }
                } else {
                    callback('字母+数字,最后一位数字');
                }
            } else {
                // callback('请输入车次');
                callback();
            }
        };
        return {
            dialogShow: false,
            loading: false,
            mapStationDirectionList:[],
            filterArrMapStationDirectionList:[],
            filterDepMapStationDirectionList:[],
            filterArrSectionList:[],
            filterDepSectionList:[],
            filterSectionList:[],
            trainTypeList:[
                // 管内列车
                {name:'管内特快旅客列车', code:'LOCAL_EXPRESS_PASSENGER_TRAIN' },
                {name:'管内快速旅客列车', code:'LOCAL_FAST_PASSENGER_TRAIN' },
                {name:'管内普通旅客快车', code:'LOCAL_PASSENGER_TRAIN' },
                {name:'管内普通旅客慢车', code:'LOCAL_SLOW_PASSENGER_TRAIN' },
                {name:'管内临时旅客列车', code:'LOCAL_TEMPORARY_PASSENGER_TRAIN' },
                {name:'管内临时旅游列车', code:'LOCAL_TEMPORARY_TOURIST_TRAIN' },
                // 跨局列车
                {name:'跨局快速旅客列车', code:'FAST_PASSENGER_TRAIN' },
                {name:'跨局临时旅游列车', code:'TEMPORARY_TOURIST_TRAIN' },
                {name:'跨两局普通旅客快车', code:'TWO_PASSENGER_TRAIN' },
                {name:'跨两局普通旅客慢车', code:'TWO_SLOW_PASSENGER_TRAIN' },
                {name:'跨两局临时旅客列车', code:'TWO_TEMPORARY_PASSENGER_TRAIN' },
                {name:'跨三局及其以上普通旅客快车', code:'MORE_PASSENGER_TRAIN' },
                // 其他列车
                {name:'回送出入厂客车底列车', code:'BACK_FACTORY_PASSENGER_TRAIN' },
                {name:'因故折返旅客列车', code:'FAULT_TRUE_BACK_PASSENGER_TRAIN' }
            ],
            runTypeList:[
                {name:'快速旅客列车', code:'FAST_PASSENGER_TRAIN' }
            ],
            transfiniteList:[
                {name:'不超限', code:'NO' },
                {name:'超级超限', code:'TRANSFINITE_SUPER' },
                {name:'一级超限', code:'TRANSFINITE_ONE_LEVEL' },
                {name:'二级超限', code:'TRANSFINITE_TWO_LEVEL' }
            ],
            model:{
                // runPlanCode:'', // 新增没有
                trainType:'LOCAL_EXPRESS_PASSENGER_TRAIN', // 列车类型
                runType:'FAST_PASSENGER_TRAIN', // 运行类型
                stationCode:'', // 车站编码
                // groupNumber:'', // 班别:目前没有
                arriveSectionCode:'', // 到达股道
                arrivePlanTime:'', // 到达计划时间
                arriveTripNumber:'', // 到达车次
                arriveStationCode:'', // 到达车站
                arriveDirectionCode:'', // 到达方向编码（到达口）

                departSectionCode:'', // 发车股道
                departPlanTime:'', // 发车计划时间
                departTripNumber:'', // 发车车次
                departStationCode:'', // 发车车站
                departDirectionCode:'', // 发向方向编码（发车口）

                startRunPlan:false, // 始发计划  true,false
                endRunPlan:false, // 终到计划   true,false

                electrical:false, // 电力   true,false
                passenger:false, // 客运    true,false
                // keyTrains:false, // 重点列车   true,false
                // military:false, // 是否军用    true,false

                trackDiscordant:false, // 运行股道与基本径路不一致
                entryOutDiscordant:false, // 出入口与基本径路不一致

                transfinite:'NO' // 超限等级   NO：不超限   TRANSFINITE_SUPER：超级超限   TRANSFINITE_ONE_LEVEL：一级超限  TRANSFINITE_TWO_LEVEL：二级超限

            },
            rules: {
                stationCode:[
                    { required: true, message: '请选择车站', trigger: 'blur' },
                    { required: true, message: '请选择车站', trigger: 'change' }
                ],
                arriveTripNumber:[
                    { required: true, validator: validateTripNumber, trigger: 'blur' }
                ],
                departTripNumber:[
                    { required: true, validator: validateTripNumber, trigger: 'blur' }
                ]
            }
        };
    },
    computed: {
        ...mapGetters('map', [
            'stationList'
        ]),
        show() {
            return this.dialogShow && !this.$store.state.menuOperation.break;
        },
        domIdCancel() {
            return this.dialogShow ? OperationEvent.Command.cancel.menu.domId : '';
        },
        domIdConfirm() {
            return this.dialogShow ? OperationEvent.CTCCommand.addDispatcherLogerRp.menu.domId : '';
        },
        title() {
            return '增加阶段计划车次';
        }
    },
    methods: {
        doShow({filterSectionList, mapStationDirectionList}) {
            this.mapStationDirectionList = mapStationDirectionList;
            this.filterSectionList = filterSectionList;
            this.dialogShow = true;
            this.$nextTick(function () {
                this.$store.dispatch('training/emitTipFresh');
            });
        },
        changeStation(stationCode) {
            this.filterArrMapStationDirectionList = this.mapStationDirectionList.filter(each=>{ return each.stationCode == stationCode; });
            this.filterDepMapStationDirectionList = this.mapStationDirectionList.filter(each=>{ return each.stationCode == stationCode; });
            this.filterArrSectionList = this.filterSectionList.filter(each=>{ return each.stationCode == stationCode; });
            this.filterDepSectionList = this.filterSectionList.filter(each=>{ return each.stationCode == stationCode; });
        },
        doClose() {
            this.loading = false;
            this.dialogShow = false;
            this.model = {
                trainType:'LOCAL_EXPRESS_PASSENGER_TRAIN', // 列车类型
                runType:'FAST_PASSENGER_TRAIN', // 运行类型
                stationCode:'', // 车站编码
                arriveSectionCode:'', // 到达股道
                arrivePlanTime:'', // 到达计划时间
                arriveTripNumber:'', // 到达车次
                arriveStationCode:'', // 到达车站
                arriveDirectionCode:'', // 到达方向编码（到达口）
                departSectionCode:'', // 发车股道
                departPlanTime:'', // 发车计划时间
                departTripNumber:'', // 发车车次
                departStationCode:'', // 发车车站
                departDirectionCode:'', // 发向方向编码（发车口)

                startRunPlan:false, // 始发计划  true,false
                endRunPlan:false, // 终到计划   true,false

                electrical:false, // 电力   true,false
                passenger:false, // 客运    true,false
                trackDiscordant:false, // 运行股道与基本径路不一致
                entryOutDiscordant:false, // 出入口与基本径路不一致

                transfinite:'NO' // 超限等级   NO：不超限   TRANSFINITE_SUPER：超级超限   TRANSFINITE_ONE_LEVEL：一级超限  TRANSFINITE_TWO_LEVEL：二级超限
            };
            this.filterArrMapStationDirectionList = [];
            this.filterDepMapStationDirectionList = [];
            this.$store.dispatch('training/emitTipFresh');
        },
        commit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    commitOperate(menuOperate.CTC.addDispatcherLogerRp, {planParam:this.model}, 3).then(({valid, response})=>{
                        if (valid) {
                            this.$emit('addDisLoger', response.data);
                            this.doClose();
                        }
                    }).catch(() => {
                        this.doClose();
                        this.$emit('noticeInfo');
                    });
                }
            });
        },
        cancel() {
            const operate = {
                operation: OperationEvent.Command.cancel.menu.operation
            };
            this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
                if (valid) {
                    this.doClose();
                }
            }).catch(() => { this.doClose(); });
        }

    }
};
</script>
<style lang="scss">
.chengdou-03__systerm .el-dialog #AddDispatcherForm .el-form-item label{
  padding-right:5px;
  line-height:30px;
}
.chengdou-03__systerm .el-dialog #AddDispatcherForm .el-form-item{
    margin-bottom:20px;
}
#AddDispatcherForm .el-form-item__content{
    line-height:30px;
}
#AddDispatcherForm{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
#AddDispatcherForm .el-input__inner {
    height: 22px !important;
    line-height: 22px !important;
}
#AddDispatcherForm span.el-input__suffix .el-input__icon{
    height:22px;
    line-height:22px;
}
#AddDispatcherForm span.el-input__prefix .el-input__icon{
    line-height:22px;
    display:none;
}
#AddDispatcherForm .el-form-item.noMargin .el-form-item__content{
  margin-left:0px !important;
}
#AddDispatcherForm .el-form-item.noMargin .el-checkbox__label{
  padding-left: 5px;
  vertical-align: top;
  line-height: 30px;
}

#AddDispatcherForm .el-input--prefix .el-input__inner{
  padding-left:10px;
  padding-right: 26px;
}
</style>