rt-sim-training-client/src/views/bigTrainRunplanManage/directionInformation.vue

<template>
  <el-dialog
    v-dialogDrag
    class="datie-02__systerm"
    :title="title"
    :visible.sync="show"
    width="380px"
    :before-close="doClose"
    :z-index="2000"
    :modal="false"
    :close-on-click-modal="false"
  >
    <div class="DirectionInformation">
      <el-form ref="form" :model="model" label-width="125px">
        <el-form-item label="出入口名称:" prop="ioName">
          <el-input v-model="model.ioName" style="width:185px" disabled />
        </el-form-item>
        <el-form-item label="出入口方向:" prop="ioDirection">
          <el-select v-model="model.ioDirection" placeholder="" style="width:145px" disabled>
            <el-option
              v-for="item in ioDirectionList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="允许超限列车:" prop="allowOverrun">
          <el-select v-model="model.allowOverrun" placeholder="" style="width:145px">
            <el-option
              v-for="item in selectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="允许旅客列车:" prop="travelTrain">
          <el-select v-model="model.travelTrain" placeholder="" style="width:145px">
            <el-option
              v-for="item in selectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="允许货物列车:" prop="goodsTrain">
          <el-select v-model="model.goodsTrain" placeholder="" style="width:145px">
            <el-option
              v-for="item in selectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div style="text-align:right;display:inline-block;width:100%;">
      <div class="directionBtn">
        <el-button :id="domIdCancel" @click="cancel">取消</el-button>
      </div>
      <div class="directionBtn">
        <el-button :id="domIdConfirm " type="primary" :loading="loading" @click="commit">确定 </el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler';
import {menuOperate, commitOperate} from '@/jmapNew/theme/components/utils/menuOperate';
export default {
    name: 'DirectionInformation',
    data() {
        return {
            dialogShow: false,
            loading: false,
            stationCode:'', // 车站code
            ioDirectionList:[
                {label:'下行进站', value:'DOWN _IN_STATION'},
                {label:'上行进站', value:'UP_IN_STATION'},
                {label:'下行出站', value:'DOWN_OUT_STATION'},
                {label:'上行出站', value:'UP_OUT_STATION'},
                {label:'双向', value:'BOTH_WAY_STATION'}
            ],
            selectList:[
                {label:'是', value:true},
                {label:'否', value:false}
            ],
            model:{
                code:'', // code
                ioName:'', // 出入口名称
                allowOverrun:false, // 允许超限
                travelTrain:false, // 允许客车
                goodsTrain:false, // 允许火车
                ioDirection:'' // 出入口方向
            }
        };
    },
    computed: {
        show() {
            return this.dialogShow && !this.$store.state.menuOperation.break;
        },
        domIdCancel() {
            return this.dialogShow ? OperationEvent.Command.cancel.menu.domId : '';
        },
        domIdConfirm() {
            return this.dialogShow ? OperationEvent.CTCCommand.modifyStationDirection.menu.domId : '';
        },
        title() {
            return '出入口信息';
        }
    },
    methods:{
        doShow({row, stationCode}) {
            this.model = Object.assign({}, row);
            this.stationCode = stationCode;
            this.dialogShow = true;
            this.$nextTick(function () {
                this.$store.dispatch('training/emitTipFresh');
            });
        },
        doClose() {
            this.loading = false;
            this.dialogShow = false;
        },
        commit() {
            this.loading = true;
            const param = Object.assign({stationCode:this.stationCode}, this.model);
            delete param.ioName;
            delete param.ioDirection;
            commitOperate(menuOperate.CTC.modifyStationDirection, param, 3).then(({valid})=>{
                if (valid) {
                    this.$message.success('更新成功！');
                    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" scoped>
.directionBtn{display:inline-block;margin-right: 10px;}
.DirectionInformation .el-form-item{
    display:inline-block;
    margin-bottom:20px;
}
.DirectionInformation{margin-bottom: 15px;}
</style>
<style lang="scss">
.DirectionInformation .el-form-item__content {
    line-height: 30px;
}
</style>