rt-sim-training-client/src/jmap/theme/beijing_01/menusPlan/createWeekPlan.vue
2019-07-29 16:03:14 +08:00

127 lines
4.3 KiB
Vue

<template>
<el-dialog class="beijing-01__schedule create-week-plan" :title="title" :visible.sync="dialogShow" width="800px"
:before-close="doClose" :zIndex="2000" :modal="false" :close-on-click-modal="false" v-dialogDrag>
<el-row>
<el-form ref="form" :model="model" :rules="rules" label-width="140px" size="small">
<el-form-item label="运行图名称:" prop="planId">
<el-row>
<el-col :span="19">
<el-input v-model="model.planName" :readonly="true"></el-input>
</el-col>
<el-col :span="4" :offset="1">
<el-button @click="handleChoose">选择 </el-button>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="计划日期范围:" prop="dateList">
<el-row>
<el-date-picker type="dates" v-model="model.dateList" :clearable="false" placeholder="选择一个或多个日期"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-row>
</el-form-item>
</el-form>
</el-row>
<el-row type="flex" justify="center" class="button-group">
<el-button @click="create">确 定</el-button>
<el-button @click="doClose">取 消</el-button>
</el-row>
<choose-template-plan ref="choose" @chooseConfirm="chooseConfirm"></choose-template-plan>
</el-dialog>
</template>
<script>
import { createRunPlanLoad } from '@/api/runplan';
import ChooseTemplatePlan from './chooseTemplatePlan';
export default {
name: 'CreateWeekPlan',
components: {
ChooseTemplatePlan
},
data() {
return {
dialogShow: false,
loading: false,
model: {
planId: '',
planName: '',
dateList: [],
}
}
},
computed: {
title() {
return '创建一周计划'
},
rules() {
let rules = {
planId: [
{ required: true, message: '请选择模板运行图', trigger: 'blur' }
],
dateList: [
{ required: true, message: '请选择计划日期范围', trigger: 'change' }
]
}
return rules;
}
},
mounted() {
},
methods: {
doShow(params) {
this.dialogShow = true;
},
doClose() {
this.loading = false;
this.dialogShow = false;
},
handleChoose() {
this.$refs.choose.doShow();
},
chooseConfirm(choose) {
if (choose) {
this.model.planId = choose.id;
this.model.planName = choose.name;
}
},
buildModel() {
return this.model.dateList.map(date => {
return {
loadTime: date,
mapId: this.$route.query.mapId,
templatePlanId: this.model.planId
}
});
},
create() {
this.$refs['form'].validate((valid) => {
if (valid) {
createRunPlanLoad(this.buildModel()).then(response => {
this.$message.success('创建运行图计划成功');
this.$emit('reloadTable', { name: 'managePlanList' });
this.doClose();
}).catch(error => {
this.doClose();
this.$messageBox('创建运行图计划失败');
})
}
});
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.card-box {
padding-top: 10px;
}
/deep/ {
.el-row {
margin: 10px;
}
}
</style>