252 lines
8.6 KiB
Vue
252 lines
8.6 KiB
Vue
<template>
|
|
<el-dialog v-dialogDrag :title="$t('map.thenList')" :visible.sync="show" width="85%" :before-do-close="doClose">
|
|
<div>
|
|
<QueryListPage
|
|
ref="queryListPage"
|
|
:pager-config="pagerConfig"
|
|
:query-form="queryForm"
|
|
:query-list="queryList"
|
|
/>
|
|
</div>
|
|
<pre-view-field ref="previewField" :map-info="mapInfo" />
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex';
|
|
import { listMap } from '@/api/jmap/mapdraft';
|
|
import { listRouting, deleteRouting, getRouting } from '@/api/jmap/mapdraft';
|
|
import PreViewField from './preview';
|
|
|
|
export default {
|
|
name: 'RouteDetail',
|
|
components: {
|
|
PreViewField
|
|
},
|
|
props: {
|
|
mapInfo: {
|
|
type: Object,
|
|
default() {
|
|
return null;
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
show: false,
|
|
mapList: [],
|
|
pagerConfig: {
|
|
pageSize: 'pageSize',
|
|
pageIndex: 'pageNum'
|
|
},
|
|
queryForm: {
|
|
labelWidth: '120px',
|
|
queryObject: {
|
|
startStationCode: {
|
|
type: 'select',
|
|
label: this.$t('map.startStation'),
|
|
config: {
|
|
data: []
|
|
}
|
|
},
|
|
endStationCode: {
|
|
type: 'select',
|
|
label: this.$t('map.endStation'),
|
|
config: {
|
|
data: []
|
|
}
|
|
}
|
|
}
|
|
},
|
|
queryList: {
|
|
query: this.queryFunction,
|
|
afterQuery: this.afterQuery,
|
|
selectCheckShow: false,
|
|
indexShow: true,
|
|
columns: [
|
|
{
|
|
title: this.$t('map.routingCode'),
|
|
prop: 'code'
|
|
},
|
|
{
|
|
title: this.$t('map.startStation'),
|
|
prop: 'startStationCode'
|
|
|
|
},
|
|
{
|
|
title: this.$t('map.startStationCode'),
|
|
prop: 'startSectionCode'
|
|
},
|
|
{
|
|
title: this.$t('map.endStation'),
|
|
prop: 'endStationCode'
|
|
},
|
|
{
|
|
title: this.$t('map.endStationCode'),
|
|
prop: 'endSectionCode'
|
|
},
|
|
{
|
|
title: this.$t('map.routingDirection'),
|
|
prop: 'directionCode',
|
|
type: 'tag',
|
|
columnValue: (row) => { return this.$ConstSelect.translate(row.directionCode, 'DirectionCodeList'); },
|
|
tagType: (row) => { if (row.directionCode === '0') { return 'primary'; } else { return 'success'; } }
|
|
},
|
|
{
|
|
title: this.$t('map.destination'),
|
|
prop: 'destinationCode'
|
|
},
|
|
{
|
|
title: this.$t('map.remarks'),
|
|
prop: 'remarks'
|
|
},
|
|
{
|
|
type: 'button',
|
|
title: this.$t('map.sectionData'),
|
|
buttons: [
|
|
{
|
|
name: this.$t('map.preview'),
|
|
handleClick: this.sectionDetail
|
|
}
|
|
]
|
|
},
|
|
{
|
|
type: 'button',
|
|
title: this.$t('map.operation'),
|
|
width: '200',
|
|
buttons: [
|
|
{
|
|
name: this.$t('map.compile'),
|
|
handleClick: this.editObj
|
|
},
|
|
{
|
|
name: this.$t('map.deleteObj'),
|
|
handleClick: this.deleteObj,
|
|
type: 'danger'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters('map', [
|
|
'sectionList',
|
|
'stationList'
|
|
])
|
|
},
|
|
watch: {
|
|
stationList: function (val, old) {
|
|
const list = [];
|
|
if (val && val.length) {
|
|
val.forEach(elem => {
|
|
list.push({ label: this.formatName(elem.code), value: elem.code });
|
|
});
|
|
this.queryForm.queryObject.startStationCode.config.data = list;
|
|
this.queryForm.queryObject.endStationCode.config.data = list;
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.acquireMapList();
|
|
},
|
|
methods: {
|
|
doShow() {
|
|
this.show = true;
|
|
this.reloadTable();
|
|
},
|
|
doClose() {
|
|
this.show = false;
|
|
},
|
|
formatName(code) {
|
|
let name = '';
|
|
const device = this.$store.getters['map/getDeviceByCode'](code);
|
|
if (device) {
|
|
name = device.name;
|
|
}
|
|
|
|
return name;
|
|
},
|
|
queryFunction(params) {
|
|
if (this.mapInfo && this.mapInfo.id) {
|
|
return listRouting(this.mapInfo.id, params);
|
|
}
|
|
},
|
|
acquireMapList() {
|
|
// 地图名称列表
|
|
listMap({drawWay: true}).then(response => {
|
|
this.mapList = response.data;
|
|
});
|
|
},
|
|
afterQuery(data) {
|
|
if (data && data.list) {
|
|
const that = this;
|
|
const list = data.list;
|
|
if (list) {
|
|
list.map(elem => {
|
|
that.$convertSpecifiedField(elem, that.mapList, 'id', 'name', ['mapId']);
|
|
elem.startStationCode = that.formatName(elem.startStationCode);
|
|
elem.startSectionCode = that.formatName(elem.startSectionCode);
|
|
elem.endStationCode = that.formatName(elem.endStationCode);
|
|
elem.endSectionCode = that.formatName(elem.endSectionCode);
|
|
});
|
|
}
|
|
}
|
|
return data;
|
|
},
|
|
editObj(index, row) {
|
|
getRouting(row.id).then(response => {
|
|
const data = Object.assign({ code: response.data.id }, response.data);
|
|
this.$emit('routingSelected', data);
|
|
this.doClose();
|
|
});
|
|
},
|
|
deleteObj(index, row) {
|
|
if (this.mapInfo && this.mapInfo.id && row) {
|
|
// 删除
|
|
deleteRouting(row.id).then(response => {
|
|
this.$message.success(this.$t('map.successfullyDelete'));
|
|
this.reloadTable();
|
|
}).catch(() => {
|
|
this.$messageBox(this.$t('map.failDelete'));
|
|
});
|
|
}
|
|
},
|
|
sectionDetail(index, row) {
|
|
const sectionDict = {};
|
|
const stationDict = {};
|
|
|
|
this.sectionList.forEach(elem => { sectionDict[elem.code] = elem.name; });
|
|
this.stationList.forEach(elem => { stationDict[elem.code] = elem.name; });
|
|
|
|
const fieldList = {
|
|
id: row.id,
|
|
mapId: this.$route.params.mapId,
|
|
title: '区段列表',
|
|
name: row.name,
|
|
model: {
|
|
field: 'routingSectionList',
|
|
items: [
|
|
{ prop: 'stationCode', label: this.$t('map.stationCodeClomn'), type: 'text' },
|
|
{
|
|
prop: 'stationCode', label: this.$t('map.sectionName'), type: 'select', options: stationDict
|
|
},
|
|
{ prop: 'sectionCode', label: this.$t('map.blockCodingClomn'), type: 'text' },
|
|
{
|
|
prop: 'sectionCode', label: this.$t('map.sectionName'), type: 'select', options: sectionDict
|
|
}
|
|
]
|
|
}
|
|
};
|
|
this.$refs.previewField.doShow(fieldList, row.routingSectionList);
|
|
},
|
|
reloadTable() {
|
|
if (this.queryList && this.queryList.reload) {
|
|
this.queryList.reload();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|