rt-sim-training-client/src/views/scriptManage/home.vue

<template>
  <el-card :style="{height: height+'px'}">
    <div class="home-box">
      <el-card class="box-card">
        <div id="scriptTitle">创建剧本</div>
        <div id="sciptForm">
          <data-form ref="dataform" :form="form" :form-model="formModel" :rules="rules" />
        </div>
        <div id="btnList">
          <span slot="footer" class="btn-footer">
            <el-button type="primary" :loading="loading" @click="doCreate">确 定</el-button>
          </span>
        </div>
      </el-card>
    </div>
  </el-card>
</template>

<script>
import { UrlConfig } from '@/router/index';
import {listPublishMap} from '@/api/jmap/map';
import {createQuest} from '@/api/quest';

export default {
	name: 'ScriptDraft',
	data() {
		return {
			loading: false,
			mapList: [],
			taskStatusList: [],
			disabled: true,
			formModel: {
				name: '',
				mapId: '',
				description: ''
			},
			isShow: false
		};
	},
	computed: {
		form() {
			const form = {
				labelWidth: '100px',
				items: [
					{ prop: 'name', label: '剧本名称', type: 'text', required: true},
					{ prop: 'mapId', label: '所属地图', type: 'select', required: true, options: this.mapList, disabled: this.disabled},
					{ prop: 'description', label: '剧本描述', type: 'textarea', required: true}
				]
			};
			return form;
		},
		rules() {
			const crules = {
				name: [
					{ required: true, message: '请输入剧本名称', trigger: 'blur' },
					{ required: true, message: '请输入剧本名称', trigger: 'change' }
				],
				mapId: [
					{ required: true, message: '请选择所属地图', trigger: 'change' }
				],
				description: [
					{ required: true, message: '请输入剧本描述', trigger: 'blur' },
					{ required: true, message: '请输入剧本描述', trigger: 'change' }
				]
			};
			return crules;
		},
		height() {
			return this.$store.state.app.height - 50;
		}
	},
	watch: {
		'$store.state.scriptRecord.scriptId': function (val) {
			this.formModel.mapId=val;
		}
	},
	mounted() {
		this.loadInitData();
	},
	methods: {
		loadInitData() {
			this.mapList = [];
			listPublishMap().then(response => {
				this.mapList = response.data.map(elem => { return { value: elem.id, label: elem.name }; });
				this.formModel.mapId=this.$store.state.scriptRecord.scriptId|| this.mapList[0].value;
			});
		},
		doCreate() {
			const self = this;
			if (!this.loading) {
				this.$refs.dataform.validateForm(() => {
					this.loading=true;
					const data=this.formModel;
					createQuest(data).then(resp => {
						const data={mapId: self.formModel.mapId, scriptId: resp.data};
						this.$emit('refresh', data);
						this.$message.success('创建剧本成功');
						this.formModel={};
						this.loading=false;
						this.$router.push({ path: `${UrlConfig.script.detail}/${resp.data}` });
					}).catch(error => {
						this.loading=false;
						this.$messageBox(`创建剧本失败: ${error.message}`);
					});
				});
			}
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
    .home-box {
        padding: 20px 100px;
        float: left;
        width: 100%;
        font-family: 'Microsoft YaHei';
    }
    .box-card {
        width:800px;
        margin: 0 auto;
        margin-top: 20px;
        padding-bottom: 50px;
    }
    #scriptTitle{
        padding: 30px 40px;
    }
    #sciptForm{
        margin-top: 10px;
        padding: 0px 130px 0px 100px;
    }
    #btnList{
        margin: 0px 100px;
    }
    .btn-footer{
        margin-left: 100px;
        margin-top: 10px;
        display: inline-block;
    }
</style>