108 lines
3.0 KiB
Vue
108 lines
3.0 KiB
Vue
<template>
|
|
<el-dialog class="nodeDialog" title="导入" :visible.sync="dialogVisible" width="500">
|
|
<el-upload ref="upload" action="x" :file-list="fileList" :auto-upload="false" :multiple="false" :on-change="onChange" :limit="1" :on-exceed="onExceed">
|
|
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
|
|
<div slot="tip" class="el-upload__tip">只能上传.smm文件</div>
|
|
</el-upload>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="cancel">取 消</el-button>
|
|
<el-button type="primary" @click="confirm">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
/**
|
|
* @Author: 王林
|
|
* @Date: 2021-06-24 22:53:54
|
|
* @Desc: 导入
|
|
*/
|
|
export default {
|
|
name: "Import",
|
|
data() {
|
|
return {
|
|
dialogVisible: false,
|
|
fileList: [],
|
|
};
|
|
},
|
|
watch: {
|
|
dialogVisible(val, oldVal) {
|
|
if (!val && oldVal) {
|
|
this.fileList = [];
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
this.$bus.$on("showImport", () => {
|
|
this.dialogVisible = true;
|
|
});
|
|
},
|
|
methods: {
|
|
/**
|
|
* @Author: 王林
|
|
* @Date: 2021-08-03 22:48:42
|
|
* @Desc: 文件选择
|
|
*/
|
|
onChange(file) {
|
|
let reg = /\.smm$/;
|
|
if (!reg.test(file.name)) {
|
|
this.$message.error("请选择.smm文件");
|
|
this.fileList = [];
|
|
} else {
|
|
this.fileList.push(file)
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @Author: 王林
|
|
* @Date: 2021-08-03 22:48:47
|
|
* @Desc: 数量超出限制
|
|
*/
|
|
onExceed() {
|
|
this.$message.error("最多只能选择一个文件");
|
|
},
|
|
|
|
/**
|
|
* @Author: 王林
|
|
* @Date: 2021-06-22 22:08:11
|
|
* @Desc: 取消
|
|
*/
|
|
cancel() {
|
|
this.dialogVisible = false;
|
|
},
|
|
|
|
/**
|
|
* @Author: 王林
|
|
* @Date: 2021-06-06 22:28:20
|
|
* @Desc: 确定
|
|
*/
|
|
confirm() {
|
|
if (this.fileList.length <= 0) {
|
|
return this.$message.error("请选择要导入的文件");
|
|
}
|
|
let file = this.fileList[0];
|
|
let fileReader = new FileReader()
|
|
fileReader.readAsText(file.raw)
|
|
fileReader.onload = (evt) => {
|
|
try {
|
|
let data = JSON.parse(evt.target.result)
|
|
if (typeof data !== 'object') {
|
|
throw new Error('文件内容有误')
|
|
}
|
|
this.$bus.$emit('setData', data)
|
|
this.$message.success("导入成功");
|
|
} catch (error) {
|
|
console.log(error)
|
|
this.$message.error("文件解析失败");
|
|
}
|
|
}
|
|
this.cancel();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.nodeDialog {}
|
|
</style>
|