347 lines
13 KiB
Vue
347 lines
13 KiB
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>
|