rt-sim-training-client/src/views/drts/scene/importScene.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-item label="请选择剧本" prop="scriptId">
          <el-select v-model="editModel.scriptId">
            <el-option v-for="item in scriptList" :key="item.code" :label="item.label" :value="item.value" />
          </el-select>
        </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 { postSceneImport } from '@/api/competition';
export default {
    name:'ImportScene',
    props: {
        scriptList:{
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            formDisplay:false,
            dialogShow: false,
            loading: false,
            jsonData:null,
            validateText:'',
            editModel: {
                scriptId: '',
                name: ''
            },
            editRules: {
                name: [
                    { required: true, message: '请输入场景名称', trigger: 'blur' }
                ],
                scriptId:[
                    { required: true, message: '请选择剧本', trigger: 'change' }
                ]
            }
        };
    },
    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;
            postSceneImport(that.editModel.scriptId, 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>