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