rt-sim-training-client/src/views/publish/runPlanCommon/draft.vue

174 lines
4.3 KiB
Vue

<template>
<div class="card-box">
<el-steps class="steps" :active="display">
<el-step :title="title" icon="el-icon-edit-outline" />
<el-step title="" icon="el-icon-upload" />
</el-steps>
<el-card class="forms">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{height:height -120 + 'px'}" style="padding-top: 40px">
<el-form ref="form" :model="model" :rules="rules" label-width="140px" size="small">
<el-form-item :label="`${$t('publish.selectMap')}:`" prop="mapId">
<el-select v-model="model.mapId" filterable>
<el-option v-for="item in mapList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item :label="`${$t('publish.runPlanName')}:`" prop="planId">
<el-row>
<el-col :span="19">
<el-input v-model="model.planName" :readonly="true" />
</el-col>
<el-col :span="4" :offset="1">
<el-button @click="handleChoose">{{ $t('global.select') }} </el-button>
</el-col>
</el-row>
</el-form-item>
</el-form>
</el-scrollbar>
</el-card>
<div class="draft">
<el-button-group>
<el-button v-if="isAdd" type="primary" @click="create">{{ $t('global.create') }}</el-button>
<el-button type="primary" @click="turnback">{{ $t('global.back') }}</el-button>
</el-button-group>
</div>
<choose-template-plan ref="choose" @chooseConfirm="chooseConfirm" />
</div>
</template>
<script>
import { listPublishMap } from '@/api/jmap/map';
import { createRunPlanCommon } from '@/api/runplan';
import ChooseTemplatePlan from './chooseTemplatePlan';
export default {
name: 'CommonPlanDraft',
components: {
ChooseTemplatePlan
},
data() {
return {
display: 1,
loading: false,
mapList: [],
model: {
mapId: '',
planId: '',
planName: ''
}
};
},
computed: {
title() {
return this.$t('publish.createCommonRunPlan');
},
isAdd() {
return this.$route.params.mode.toUpperCase() == 'add'.toUpperCase();
},
rules() {
const rules = {
mapId: [
{ required: true, message: this.$t('rules.mapInput'), trigger: 'blur' }
],
planId: [
{ required: true, message: this.$t('rules.inputTemplateRunPlan'), trigger: 'change' }
]
};
return rules;
},
height() {
return this.$store.state.app.height - 130;
}
},
mounted() {
this.initLoadPage();
},
methods: {
initLoadPage() {
listPublishMap().then(resp => {
this.mapList = resp.data;
});
},
handleChoose() {
let model = {};
const index = this.mapList.findIndex(elem => { return elem.id == this.model.mapId; });
if (index >= 0) {
model = this.mapList[index];
}
this.$refs.choose.doShow(model);
},
chooseConfirm(choose) {
if (choose) {
this.model.planId = choose.id;
this.model.planName = choose.name;
}
},
buildModel() {
return {
mapId: this.model.mapId,
templatePlanId: this.model.planId
};
},
create() {
this.$refs['form'].validate((valid) => {
if (valid) {
createRunPlanCommon(this.buildModel()).then(response => {
this.$message.success(this.$t('publish.createCommonSuccess'));
this.$router.go(-1);
}).catch(() => {
this.$messageBox(this.$t('error.createCommonRunPlanFailed'));
});
}
});
},
turnback() {
this.$router.go(-1);
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.steps {
width: 940px;
margin: 0 auto;
margin-top: 20px;
height: 100%;
/deep/ {
.el-step__icon.is-icon {
width: 95px;
}
}
}
.forms {
width: 800px;
margin: 0 auto;
margin-top: 20px;
/deep/ {
.el-select {
float: left;
width: calc(600px);
}
.el-form-item__content>.el-input>.el-input__inner {
float: left;
width: calc(600px);
}
.el-input-number {
float: left;
width: calc(250px);
}
}
}
.draft {
width: 400px;
text-align: center;
margin: 20px auto;
}
</style>