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" :loading="loading">确 定</el-button>
                        <!-- <el-button @click="doClose">取 消</el-button> -->
                    </span>
                </div>
            </el-card>
        </div>
    </el-card>
</template>

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

    export default {
        name: 'ScriptDraft',
        mixins: [WindowResizeHandler],
        data() {
            return {
                loading:false,
                mapList: [],
                taskStatusList: [],
                disabled:true,
                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' },
                        { required: true, message: '请输入剧本名称', trigger: 'change' },
                    ],
                    mapId: [
                        { required: true, message: '请选择所属地图', trigger: 'change' },
                    ],
                    description:[
                        { required: true, message: '请输入剧本描述', trigger: 'blur' },
                        { required: true, message: '请输入剧本描述', trigger: 'change' },
                    ]
                }
                return crules
            },
            // title() {
            //     return '创建剧本'
            // }
        },
        watch:{
            '$store.state.scriptRecord.scriptId': function (val) {
                this.formModel.mapId=val;
            }
        },
        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 } });
                    this.formModel.mapId=this.$store.state.scriptRecord.scriptId|| this.mapList[0].value;
                })
            },
            doCreate() {
                let self = this
                if(!this.loading)
                {
                    this.$refs.dataform.validateForm(() => {
                        //self.$emit('create', Object.assign({}, this.formModel));
                        this.loading=true;
                        let data=this.formModel;
                        createQuest(data).then(resp => {
                            let 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>