163 lines
4.9 KiB
Vue
163 lines
4.9 KiB
Vue
<template>
|
|
<el-dialog v-dialogDrag title="剧本导入" :visible.sync="dialogShow" width="360px" :before-close="handleClose" custom-class="importClass">
|
|
<div>
|
|
<div v-show="!formDisplay" class="eachButton uploadDemo">
|
|
<i class="el-icon-plus avatar-uploader-icon el-icon-other" />
|
|
<input ref="files" type="file" class="file_box" accept=".json, application/json" @change="importf">
|
|
</div>
|
|
<el-form v-show="formDisplay" ref="form" label-position="right" :rules="editRules" :model="editModel" label-width="100px" size="mini" @submit.native.prevent>
|
|
<el-form-item label="剧本名称" prop="name">
|
|
<el-input v-model="editModel.name" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<div style="margin-left:18px;color:red;font-size:13px;">{{ validateText }}</div>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="handleClose">{{ $t('map.cancel') }}</el-button>
|
|
<el-button type="primary" :loading="loading" @click="importScene">{{ $t('map.confirm') }}</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</template>
|
|
<script>
|
|
import { postScriptImport } from '@/api/script';
|
|
export default {
|
|
name:'ImportScene',
|
|
props: {
|
|
scriptList:{
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
formDisplay:false,
|
|
dialogShow: false,
|
|
loading: false,
|
|
jsonData:null,
|
|
validateText:'',
|
|
editModel: {
|
|
name: ''
|
|
},
|
|
editRules: {
|
|
name: [
|
|
{ required: true, message: '请输入剧本名称', trigger: 'blur' }
|
|
]
|
|
}
|
|
};
|
|
},
|
|
methods:{
|
|
close() {
|
|
this.$refs.form.resetFields();
|
|
this.formDisplay = false;
|
|
this.editModel.scriptId = '';
|
|
this.jsonData = null;
|
|
this.dialogShow = false;
|
|
this.validateText = '';
|
|
},
|
|
handleClose() {
|
|
this.close();
|
|
},
|
|
doShow() {
|
|
this.validateText = '';
|
|
this.dialogShow = true;
|
|
},
|
|
importf() {
|
|
const that = this;
|
|
setTimeout(() => {
|
|
const obj = this.$refs.files;
|
|
if (!obj.files) return;
|
|
const f = obj.files[0];
|
|
if (f.type != 'application/json') {
|
|
this.$message.error('请上传json格式的文件');
|
|
return;
|
|
}
|
|
const reader = new FileReader();
|
|
reader.readAsText(f, 'utf-8');
|
|
reader.onload = function(e) {
|
|
const data = e.target.result;
|
|
that.formDisplay = true;
|
|
const json = JSON.parse(data);
|
|
that.jsonData = json;
|
|
that.editModel.name = json.name;
|
|
obj.value = '';
|
|
that.validateText = '';
|
|
};
|
|
});
|
|
},
|
|
importScene() {
|
|
if (!this.jsonData) {
|
|
this.validateText = '请选择文件';
|
|
return false;
|
|
}
|
|
this.$refs['form'].validate((valid) => {
|
|
if (valid) {
|
|
this.submitData();
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
submitData() {
|
|
const loading = this.$loading({
|
|
lock: true,
|
|
text: '正在导入中...',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
});
|
|
this.loading = true;
|
|
this.dialogShow = false;
|
|
this.validateText = '';
|
|
const that = this;
|
|
postScriptImport(that.$route.params.mapId, that.editModel.name, that.jsonData).then(res => {
|
|
loading.close();
|
|
that.loading = false;
|
|
that.$message.success('导入成功！');
|
|
this.$emit('refresh');
|
|
// loading.close();
|
|
this.close();
|
|
}).catch(error => {
|
|
loading.close();
|
|
that.loading = false;
|
|
this.close();
|
|
that.$message.error('导入失败' + error.message);
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.eachButton{
|
|
margin-left:10px;
|
|
width:100px;
|
|
height:100px;
|
|
border:1px #ccc dashed;
|
|
margin-bottom: 10px;
|
|
}
|
|
.el-icon-other{
|
|
width: 100%;
|
|
text-align: center;
|
|
height: 100%;
|
|
line-height: 72px;
|
|
font-size: 16px;
|
|
}
|
|
.uploadDemo {
|
|
position: relative;
|
|
overflow: hidden;
|
|
// float: right;
|
|
padding: 9px 15px;
|
|
margin-right: 3px;
|
|
cursor: pointer;
|
|
input {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
</style>
|