rt-sim-training-client/src/views/display/demon/scheduling.vue
2019-08-30 15:46:08 +08:00

316 lines
7.5 KiB
Vue

<template>
<div>
<el-dialog
:title="title"
:visible.sync="show"
top="50px"
width="95%"
:before-do-close="doClose"
:close-on-click-modal="false"
:z-index="2000"
>
<div class="scheduling">
<el-card class="scheduling_header">
<el-form>
<el-row>
<el-col :span="6">
<el-form-item label="派班选择:">
<el-date-picker
v-model="formModel.planDate"
size="small"
type="date"
value-format="yyyy-MM-dd"
@change="handleQuery"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="运行图名称:">
<el-select v-model="formModel.runPlanName" size="small" style="display: inline-block">
<el-option
v-for="item in runPlanList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="派班模式:">
<div>{{ formModel.mode }}</div>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item style="text-align: right">
<el-button-group>
<el-button size="small" type="warning" @click="handleCheck">检查</el-button>
<el-button size="small" type="primary" @click="handleSave">保存</el-button>
</el-button-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
<div class="scheduling_body">
<div class="scheduling_body-table">
<edit-table ref="table" border stripe :table-data="tableData" :table-form="tableForm" />
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import { querySecheduling, generateScheduling, getSchedulingAllTrains, checkScheduling, saveScheduling } from '@/api/scheduling';
import EditTable from '@/views/components/editTable/index';
export default {
name: 'AddQuest',
components: {
EditTable
},
props: {
group: {
type: String,
required: true
}
},
data() {
return {
show: false,
runPlanList: [],
groupNumberList: [],
formModel: {
mode: '',
planDate: '',
runPlanName: ''
},
tableForm: {
index: true,
columns: [
{
title: '司机号',
prop: 'driverCode',
type: 'text'
},
{
title: '车组号',
prop: 'groupNumber',
type: 'select',
width: '150',
options: () => { return this.groupNumberList; },
editable: true,
editing: true
},
{
title: '回库段',
prop: 'inDepot',
type: 'text'
},
{
title: '回库状态',
prop: 'inStatus',
type: 'tag',
columnValue: (row) => { return this.$ConstSelect.translate(row.inStatus, 'Whether'); },
tagType: (row) => {
switch (row.inStatus) {
case true: return 'success';
case false: return 'danger';
}
}
},
{
title: '下线方向码',
prop: 'offlineDirectionCode',
type: 'text'
},
{
title: '下线轨',
prop: 'offlineSection',
type: 'text'
},
{
title: '下线服务号',
prop: 'offlineServerNumber',
type: 'text'
},
{
title: '下线目的地',
prop: 'offlineTargetNumber',
type: 'text'
},
{
title: '下线时间',
prop: 'offlineTime',
type: 'text'
},
{
title: '下线车次号',
prop: 'offlineTripNumber',
type: 'text'
},
{
title: '上线方向码',
prop: 'onlineDirectionCode',
type: 'text'
},
{
title: '上线轨',
prop: 'onlineSection',
type: 'text'
},
{
title: '上线服务号',
prop: 'onlineServerNumber',
type: 'text'
},
{
title: '上线目的地',
prop: 'onlineTargetNumber',
type: 'text'
},
{
title: '上线时间',
prop: 'onlineTime',
type: 'text'
},
{
title: '上线车次号',
prop: 'onlineTripNumber',
type: 'text'
},
{
title: '出库段',
prop: 'outDepot',
type: 'text'
},
{
title: '出库状态',
prop: 'outStatus',
type: 'tag',
columnValue: (row) => { return this.$ConstSelect.translate(row.outStatus, 'Whether'); },
tagType: (row) => {
switch (row.outStatus) {
case true: return 'success';
case false: return 'danger';
}
}
},
{
title: '列车编码',
prop: 'trainCode',
type: 'text'
}
]
},
tableData: []
};
},
computed: {
title() {
return '排班计划';
}
},
created() {
this.loadInitData();
},
methods: {
doShow() {
this.formModel.day = '';
this.show = true;
},
doClose() {
this.show = false;
},
loadInitData() {
this.groupNumberList = [];
getSchedulingAllTrains(this.group).then(resp => {
this.groupNumberList = resp.data.map(elem => { return {value: elem.code, label: elem.groupNumber}; });
});
},
handleQuery(day) {
if (day) {
querySecheduling(this.group, {day}).then(resp => {
if (!resp.data) {
this.$confirm('无派班计划,是否创建?', this.$t('global.tips'), {
confirmButtonText: this.$t('global.confirm'),
cancelButtonText: this.$t('global.cancel'),
type: 'warning'
}).then(() => {
this.handleGenerate(day);
}).catch(() => { this.clearData(); });
} else {
this.tableData = resp.data.planList || [];
this.formModel.planDate = resp.data.planDate;
this.formModel.runPlanName = resp.data.runPlanName;
}
}).catch(() => { this.clearData(); });
}
},
handleGenerate(day) {
generateScheduling(this.group, {day}).then(resp => {
this.tableData = resp.data.planList || [];
this.formModel.planDate = resp.data.planDate;
this.formModel.runPlanName = resp.data.runPlanName;
this.$message.success('创建派班计划成功');
}).catch(error => {
this.clearData();
this.$messageBox(`${error.message}`);
});
},
handleCheck() {
if (this.formModel.planDate) {
checkScheduling(this.group).then(resp => {
this.$message.success('检查成功');
}).catch(() => {
this.$messageBox('检查派班计划失败');
});
} else {
this.$messageBox('清先选择派班计划');
}
},
handleSave() {
if (this.formModel.planDate) {
saveScheduling(this.group, this.tableData).then(resp => {
this.$message.success('保存派班计划成功');
}).catch(() => {
this.$messageBox('保存派班失败');
});
} else {
this.$messageBox('清先选择派班计划');
}
},
clearData() {
this.formModel.planDate = '';
this.tableData = [];
}
}
};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
.scheduling {
&_header {
background: #fff;
padding: 30px 30px 0;
}
&_body {
margin-top: 30px;
background: #ffff;
border: 1px solid #F1F1F1;
width: 100%;
overflow: auto;
}
}
/deep/ .el-dialog__body {
background: #fafafa;
}
/deep/ label {
font-weight: 0;
}
</style>