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

<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" :before-close="doClose" center>
        <data-form ref="dataform" :form="form" :formModel="formModel" :rules="rules"></data-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="doCreate">{{$t('global.confirm')}}</el-button>
            <el-button @click="doClose">{{$t('global.cancel')}}</el-button>
        </span>
    </el-dialog>
</template>

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

    export default {
        name: 'ScriptDraft',
        data() {
            return {
                dialogVisible: false,
                mapList: [],
                taskStatusList: [],
                formModel: {
                    name: '',
                    mapId: '',
                    description:''
                }
            }
        },
        props: {
            title: String,
        },
        computed: {
            form() {
                let form = {
                    labelWidth: '150px',
                    items: [
                        { prop: 'name', label: this.$t('scriptRecord.scriptName'), type: 'text', required: true},
                        { prop: 'mapId', label: this.$t('scriptRecord.map'), type: 'select', required: true, options: this.mapList,disabled:true},
                        { prop: 'description', label: this.$t('scriptRecord.scriptDescription'), type: 'textarea', required: true},
                    ]
                }
                return form
            },
            rules() {
                let crules = {
                    name: [
                        { required: true, message: this.$t('scriptRecord.inputScriptName'), trigger: 'blur' },
                        { required: true, message: this.$t('scriptRecord.inputScriptName'), trigger: 'change' },
                    ],
                    mapId: [
                        { required: true, message: this.$t('scriptRecord.selectMap'), trigger: 'change' },
                    ],
                    description:[
                        { required: true, message: this.$t('scriptRecord.inputScriptDescription'), trigger: 'blur' },
                        { required: true, message: this.$t('scriptRecord.inputScriptDescription'), trigger: 'change' },
                    ]
                }
                return crules
            },
        },
        mounted() {
            this.loadInitData();
        },
        methods: {
            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.dialogVisible = true
                    });
                }
                else
                {
                    this.formModel.mapId=this.$route.params.mapId;
                    this.dialogVisible = true
                }
                
            },
            doCreate() {
                let self = this
                this.$refs.dataform.validateForm(() => {
                    self.$emit('create', Object.assign({}, this.formModel));
                    self.doClose()
                })
            },
            doClose() {
                this.$refs.dataform.resetForm();
                this.dialogVisible = false
            }
        }
    }
</script>
<style lang="scss" scoped>
/deep/ .el-dialog--center .el-dialog__body{
    padding: 25px 65px 30px 10px;
}
</style>