rt-sim-training-client/src/views/newMap/newMapdraft/dataRelation/turnedoperate/route.vue

<template>
  <div style="height: 100%;">
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-form ref="form" :model="addModel" :rules="rules" label-width="180px" size="mini">
        <div class="definition">
          <el-form-item label="折返名称:" prop="name">
            <el-input v-model="addModel.name" style="width: 178px" />
          </el-form-item>
          <el-form-item label="所属车站:" prop="stationCode">
            <el-select v-model="addModel.stationCode" filterable>
              <el-option
                v-for="item in stationList"
                :key="item.code"
                :label="item.name + ' (' + item.code+ ')'"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
          <el-card style="width: 400px;position: relative; left: 80px; padding-top: 10px; margin-bottom: 20px">
            <el-form-item label="折返进路:" prop="turnBackRouteName" label-width="100px">
              <el-input v-model="addModel.turnBackRouteName" :readonly="true" style="width: 178px" />
              <el-button type="primary" @click="selectedRoute('turnBackRoute')">选择</el-button>
            </el-form-item>
            <el-form-item label="基础进路:" prop="basicRouteName" label-width="100px">
              <el-input v-model="addModel.basicRouteName" :readonly="true" style="width: 178px" />
              <el-button type="primary" @click="selectedRoute('basicRoute')">选择</el-button>
            </el-form-item>
            <el-form-item label="折返区段:" prop="reentryTrackCode" label-width="100px">
              <el-select v-model="addModel.reentryTrackCode" filterable>
                <el-option
                  v-for="item in sectionList"
                  :key="item.code"
                  :label="item.name + ' (' + item.code+ ')'"
                  :value="item.code"
                />
              </el-select>
              <el-button
                :type=" field === 'reentryTrackCode' ? 'danger' : 'primary'"
                @click="hover('reentryTrackCode')"
              >{{ $t('map.activate') }}</el-button>
            </el-form-item>
            <el-button
              v-show="!showSecond"
              icon="el-icon-plus"
              style="position: absolute; right: 10px; bottom: 10px;"
              size="small"
              circle
              class="point-button"
              @click="setShowSecond(true)"
            />
          </el-card>
          <el-card v-show="showSecond" style="width: 400px;position: relative; left: 80px; padding-top: 10px; margin-bottom: 20px">
            <el-form-item label="折返进路2:" prop="turnBackRoute2Name" label-width="100px">
              <el-input v-model="addModel.turnBackRoute2Name" :readonly="true" style="width: 178px" />
              <el-button type="primary" @click="selectedRoute('turnBackRoute2')">选择</el-button>
            </el-form-item>
            <el-form-item label="基础进路2:" prop="basicRoute2Name" label-width="100px">
              <el-input v-model="addModel.basicRoute2Name" :readonly="true" style="width: 178px" />
              <el-button type="primary" @click="selectedRoute('basicRoute2')">选择</el-button>
            </el-form-item>
            <el-form-item label="折返区段2:" prop="reentryTrack2Code" label-width="100px">
              <el-select v-model="addModel.reentryTrack2Code" filterable>
                <el-option
                  v-for="item in sectionList"
                  :key="item.code"
                  :label="item.name + ' (' + item.code+ ')'"
                  :value="item.code"
                />
              </el-select>
              <el-button
                :type=" field === 'reentryTrack2Code' ? 'danger' : 'primary'"
                @click="hover('reentryTrack2Code')"
              >{{ $t('map.activate') }}</el-button>
            </el-form-item>
            <el-button
              icon="el-icon-minus"
              style="position: absolute; right: 10px; bottom: 10px;"
              size="small"
              circle
              class="point-button"
              @click="setShowSecond(false)"
            />
          </el-card>
          <el-form-item>
            <el-button-group>
              <el-button v-if="isSave" type="primary" size="small" :loading="loading" @click="save">{{ $t('map.save') }}
              </el-button>
              <el-button v-else type="warning" size="small" :loading="loading" @click="update">{{ $t('map.updata') }}
              </el-button>
            </el-button-group>
          </el-form-item>
        </div>
      </el-form>
    </el-scrollbar>
    <route-detail ref="routeDetail" :map-info="mapInfo" @setRouteCode="setRouteCode" />
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { setUID } from '@/jmapNew/utils/Uid';
import { postAutoReentry, putAutoReentry, getRouteNewList } from '@/api/jmap/mapdraft';
import { ViewMode } from '@/scripts/ConstDic';
import { formatName } from '@/utils/runPlan';
import RouteDetail from '../routeoperate/detail';
import { deepAssign } from '@/utils/index';

export default {
    name: 'RouteOperation',
    components: {
        RouteDetail
    },
    props: {
        selected: {
            type: Object,
            default() {
                return null;
            }
        },
        mapInfo: {
            type: Object,
            default() {
                return null;
            }
        },
        routeData: {
            type: Object,
            default() {
                return null;
            }
        }
    },
    data() {
        return {
            ViewMode: ViewMode,
            field: '',
            isSave: true,
            loading: false,
            showSecond: false,
            addModel: {
                id: '',
                code: '',
                mapId: '',
                name: '',
                stationCode: '',
                turnBackRouteName: '',
                basicRouteName:'',
                turnBackRouteCode: '',
                basicRouteCode:'',
                priority: 0,
                reentryTrackCode: '',
                turnBackRoute2Name: '',
                basicRoute2Name: '',
                reentryTrack2Code: null,
                turnBackRoute2Code: null,
                basicRoute2Code: null
            },
            editShow: false,
            rules: {
                name: [
                    { required: true, message: '请输入折返名称', trigger: 'blur' }
                ],
                stationCode: [
                    { required: true, message: '请选择所属车站', trigger: 'change'}
                ],
                turnBackRouteName: [
                    { required: true, message: '请选择折返进路', trigger: 'blur' }
                ],
                basicRouteName: [
                    { required: true, message: '请选择基础进路', trigger: 'blur'}
                ],
                reentryTrackCode: [
                    { required: true, message: '请选择折返区段', trigger: 'change'}
                ]
            }
        };
    },
    computed: {
        ...mapGetters('map', [
            'sectionList',
            'stationList'
        ])
    },
    watch: {
        mapInfo(val) {
            if (val) {
                this.addModel.mapId = val.id;
            }
        },
        routeData(val, old) {
            if (val) {
                this.handelRouteName(val);
                this.editShow = true;
            }
        }
    },
    mounted() {

    },
    methods: {
        hover(field) {
            this.field = field === this.field ? '' : field;
        },
        formatName(code) {
            return formatName(code);
        },
        selectedRoute(codeType) {
            this.$refs.routeDetail.doShow('select', codeType);
        },
        setSelected(selected) {
            if (selected) {
                if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'reentryTrackCode'.toUpperCase()) {
                    this.addModel.reentryTrackCode = selected.code;
                } else if (selected._type.toUpperCase() === 'Section'.toUpperCase() && this.field.toUpperCase() === 'reentryTrack2Code'.toUpperCase()) {
                    this.addModel.reentryTrack2Code = selected.code;
                }
            }
        },
        setShowSecond(flag) {
            this.showSecond = flag;
            if (flag) {
                this.rules.turnBackRoute2Name = [{ required: true, message: '请选择折返进路2', trigger: 'blur' }];
                this.rules.basicRoute2Name = [{ required: true, message: '请选择基础进路2', trigger: 'blur'}];
                this.rules.reentryTrack2Code = [{ required: true, message: '请选择折返区段2', trigger: 'change'}];
            } else {
                delete this.rules.turnBackRoute2Name;
                delete this.rules.basicRoute2Name;
                delete this.rules.reentryTrack2Code;
            }
        },
        buildModel(code) {
            const model = Object.assign({}, this.addModel);
            if (code) { model['code'] = code; }
            model['mapId'] = this.mapInfo.id;
            return model;
        },
        save() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    postAutoReentry(this.buildModel(setUID('TurnedAround'))).then(resp => {
                        this.$message.success('创建折返成功！');
                        this.loading = false;
                        this.clear();
                    }).catch(() => {
                        this.$messageBox('创建折返失败！');
                        this.loading = false;
                    });
                }
            });
        },
        update() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    putAutoReentry(this.buildModel()).then(resp => {
                        this.$message.success('更新折返成功！');
                        this.loading = false;
                        this.clear();
                    }).catch(() => {
                        this.$messageBox('更新折返失败！');
                        this.loading = false;
                    });
                }
            });
        },
        clear() {
            if (this.$refs && this.$refs.form && this.mapInfo) {
                delete this.addModel.id;
                this.addModel.basicRouteName = '';
                this.addModel.basicRouteCode = '';
                this.addModel.turnBackRouteName = '';
                this.addModel.turnBackRouteCode = '';
                this.addModel.turnBackRoute2Name = '';
                this.addModel.basicRoute2Name = '';
                this.addModel.reentryTrack2Code = null;
                this.addModel.turnBackRoute2Code = null;
                this.addModel.basicRoute2Code = null;
                this.addModel.stationCode = '';
                this.addModel.mapId = this.mapInfo.id;
                this.addModel.code = '';
                this.$refs.form.resetFields();
                this.isSave = true;
                this.showSecond = false;
            }
        },
        setRouteCode(data, type) {
            if (type === 'basicRoute') {
                this.addModel.basicRouteName = data.name;
                this.addModel.basicRouteCode = data.code;
            } else if (type === 'turnBackRoute') {
                this.addModel.turnBackRouteName = data.name;
                this.addModel.turnBackRouteCode = data.code;
            } else if (type === 'basicRoute2') {
                this.addModel.basicRoute2Name = data.name;
                this.addModel.basicRoute2Code = data.code;
            } else if (type === 'turnBackRoute2') {
                this.addModel.turnBackRoute2Name = data.name;
                this.addModel.turnBackRoute2Code = data.code;
            }
        },
        async handelRouteName(data) {
            const model = {
                reentryTrack2Code: null,
                turnBackRoute2Code: null,
                basicRoute2Code: null
            };
            const resp1 = await getRouteNewList(this.$route.params.mapId, {pageSize:9999, pageNum:1});
            if (resp1 && resp1.code == '200') {
                resp1.data.list.forEach(item => {
                    if (item.code === data.turnBackRouteCode) {
                        model.turnBackRouteName = item.name;
                    } else if (item.code === data.basicRouteCode) {
                        model.basicRouteName = item.name;
                    } else if (item.code === data.turnBackRoute2Code) {
                        model.turnBackRoute2Name = item.name;
                    } else if (item.code === data.basicRoute2Code) {
                        model.basicRoute2Name = item.name;
                    }
                });
            } else {
                this.$messageBox('获取进路列表失败！');
            }
            this.addModel = deepAssign(model, data);
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	/deep/ .el-radio {
		margin-right: 10px;
	}
    /deep/ {
        .el-select .el-tag {
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-right: 15px;
            box-sizing: border-box;
            white-space: normal;
        }
        .el-input__suffix{
            right: 2px;
        }
    }
</style>