145 lines
3.8 KiB
Vue
145 lines
3.8 KiB
Vue
<template>
|
|
<el-card :style="{height: height+'px'}">
|
|
<div class="home-box">
|
|
<el-card class="box-card">
|
|
<div id="scriptTitle">{{ $t('scriptRecord.createScript') }}</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">{{$t('scriptRecord.submit')}}</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: '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: this.disabled},
|
|
{ prop: 'description', label: this.$t('scriptRecord.scriptDescription'), type: 'textarea', required: true}
|
|
]
|
|
};
|
|
return form;
|
|
},
|
|
rules() {
|
|
const crules = {
|
|
name: [
|
|
{ required: true, message: this.$t('scriptRecord.scriptNameRule'), trigger: 'blur' },
|
|
{ required: true, message: this.$t('scriptRecord.scriptNameRule'), trigger: 'change' }
|
|
|
|
|
|
],
|
|
mapId: [
|
|
{ required: true, message: '请选择所属地图', trigger: 'change' }
|
|
],
|
|
description: [
|
|
{ required: true, message: this.$t('scriptRecord.scriptDescriptionRule'), trigger: 'blur' },
|
|
{ required: true, message: this.$t('scriptRecord.scriptDescriptionRule'), 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.$t('scriptRecord.createScriptSuccess'));
|
|
|
|
|
|
this.formModel={};
|
|
this.loading=false;
|
|
this.$router.push({ path: `${UrlConfig.script.detail}/${resp.data}` });
|
|
}).catch(error => {
|
|
this.loading=false;
|
|
this.$messageBox(`${this.$t('scriptRecord.createScriptFail')}${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>
|