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" :formModel="formModel" :rules="rules"></data-form>
                </div>
                <div id="btnList">
                    <span slot="footer" class="btn-footer">
                        <el-button type="primary" @click="doCreate">确 定</el-button>
                        <!-- <el-button @click="doClose">取 消</el-button> -->
                    </span>
                </div>
            </el-card>
        </div>
    </el-card>
</template>

<script>
    import {listPublishMap} from '@/api/jmap/map'
    import WindowResizeHandler from '@/mixin/WindowResizeHandler';
    import {createQuest} from '@/api/quest';

    export default {
        name: 'ScriptDraft',
        mixins: [WindowResizeHandler],
        data() {
            return {
                mapList: [],
                taskStatusList: [],
                disabled:null,
                formModel: {
                    name: '',
                    mapId: '',
                    description:''
                },
                isShow: false,
                height: 0,
            }
        },
        props: {
            title: String,
        },
        computed: {
            form() {
                let isAdd = this.type === 'ADD'
                let 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() {
                let crules = {
                    name: [
                        { required: true, message: '请输入剧本', trigger: 'blur' },
                    ],
                    mapId: [
                        { required: true, message: '请选择地图', trigger: 'change' },
                    ],
                    description:[
                        { required: true, message: '请输入剧本描述', trigger: 'blur' },
                    ]
                }
                return crules
            },
            // title() {
            //     return '创建剧本'
            // }
        },
        mounted() {
            this.loadInitData();
        },
        methods: {
            resizeHandler() {
              this.height = this._clientHeight - 50;
            },
            loadInitData() {
                this.mapList = [];
                listPublishMap().then(response => {
                    this.mapList = response.data.map(elem => { return { value: elem.id, label: elem.name } });
                })
            },
            // doShow(questid) {
            //     if(questid)
            //     {
            //         getQuestById(questid).then(resp=>{
            //             let data={'name':resp.data.name,'description':resp.data.description,'mapId':resp.data.mapId};
            //             this.formModel=data;
            //             this.formModel.id=questid;
            //             this.disabled="disabled";
            //             this.dialogVisible = true
            //         });
            //     }
            //     else
            //     {
            //         this.disabled=null;
            //         this.dialogVisible = true
            //     }
            // },
            doCreate() {
                let self = this
                this.$refs.dataform.validateForm(() => {
                    //self.$emit('create', Object.assign({}, this.formModel));
                    let data=this.formModel;
                    createQuest(data).then(resp => {
                        this.$emit('refresh');
                        this.formModel={};
                        this.$message.success('创建剧本成功');
                    }).catch(error => {
                        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>