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

<template>
    <div class="card-box">
        <el-steps class="steps" :active="display">
            <el-step :title="title" icon="el-icon-edit-outline"></el-step>
            <el-step title="" icon="el-icon-upload"></el-step>
        </el-steps>
        <el-card class="forms">
            <el-scrollbar wrapClass="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="选择地图:" 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-option>
                        </el-select>
                    </el-form-item>
                    <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>
            </el-scrollbar>
        </el-card>
        <div class="draft">
            <el-button-group>
                <el-button type="primary" v-if="isAdd" @click="create">创建</el-button>
                <el-button type="primary" @click="turnback">返回</el-button>
            </el-button-group>
        </div>
        <choose-template-plan ref="choose" @chooseConfirm="chooseConfirm"></choose-template-plan>
    </div>
</template>

<script>
    import WindowResizeHandler from '@/mixin/WindowResizeHandler';
    import { listPublishMap } from '@/api/jmap/map';
    import { createRunPlanCommon } from '@/api/runplan';
    import ChooseTemplatePlan from './chooseTemplatePlan';

    export default {
        name: 'CommonPlanDraft',
        mixins: [
            WindowResizeHandler
        ],
        components: {
            ChooseTemplatePlan
        },
        data() {
            return {
                height: '',
                display: 1,
                loading: false,
                mapList: [],
                model: {
                    mapId: '',
                    planId: '',
                    planName: '',
                }
            }
        },
        computed: {
            title() {
                return '创建通用运行图'
            },
            isAdd() {
                return this.$route.params.mode.toUpperCase() == 'add'.toUpperCase();
            },
            rules() {
                let rules = {
                    mapId: [
                        { required: true, message: '请选择地图', trigger: 'blur' }
                    ],
                    planId: [
                        { required: true, message: '请选择模板运行图', trigger: 'change' }
                    ]
                }

                return rules;
            }
        },
        mounted() {
            this.InitLoadPage();
        },
        methods: {
            resizeHandler: function () {
                this.height = this._clientHeight - 130;
            },
            InitLoadPage() {
                listPublishMap().then(resp => {
                    this.mapList = resp.data;
                })
            },
            handleChoose() {
                let model = {};
                let 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.$router.go(-1);
                        }).catch(error => {
                            this.$messageBox('创建通用运行图失败');
                        })
                    }
                });
            },
            turnback() {
                this.$router.go(-1)
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .card-box {}

    .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>