340 lines
8.9 KiB
Vue
340 lines
8.9 KiB
Vue
<template>
|
|
<el-dialog
|
|
v-loading="loadingUpload"
|
|
title="新建地图"
|
|
:visible.sync="dialogShow"
|
|
width="30%"
|
|
:before-close="handleClose"
|
|
>
|
|
<div>
|
|
<el-tabs v-model="activeTab" type="card">
|
|
<el-tab-pane label="正常创建" name="first">
|
|
<el-form
|
|
ref="newForm"
|
|
label-position="right"
|
|
:model="newModel"
|
|
label-width="120px"
|
|
size="mini"
|
|
:rules="newRules"
|
|
@submit.native.prevent
|
|
>
|
|
<el-form-item label="地图名称:" prop="name">
|
|
<el-input v-model="newModel.name" />
|
|
</el-form-item>
|
|
<el-form-item label="皮肤风格:" prop="skinStyle">
|
|
<el-select v-model="newModel.skinStyle" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in skinStyleList"
|
|
:key="item.code"
|
|
:label="item.name"
|
|
:value="item.code"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="从发布地图创建" name="second">
|
|
<el-form
|
|
ref="pullForm"
|
|
label-position="right"
|
|
:model="pullModel"
|
|
:rules="pullRules"
|
|
label-width="120px"
|
|
size="mini"
|
|
>
|
|
<el-form-item label="地图名称:" prop="id">
|
|
<el-select v-model="pullModel.id" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in publishMapList"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="地图名称:" prop="name">
|
|
<el-input v-model="pullModel.name" />
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-tab-pane>
|
|
<!-- <el-tab-pane label="导入" name="third">
|
|
<div class="uploadDemo">
|
|
<div class="el-upload-dragger">
|
|
<i class="el-icon-upload"></i>
|
|
<div class="el-upload__text"><em>点击导入</em></div>
|
|
<input type="file" @change="importf" ref="files" class="file_box" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
|
|
</div>
|
|
<div class="el-upload__tip" style="text-align: center;">只能上传excel文件</div>
|
|
</div>
|
|
</el-tab-pane> -->
|
|
</el-tabs>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogShow = false">取 消</el-button>
|
|
<el-button type="primary" :loading="loading" @click="create">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { newMap, postBuildMapImport, newUsePublishMap } from '@/api/jmap/mapdraft';
|
|
import { listPublishMap } from '@/api/jmap/map';
|
|
import XLSX from 'xlsx';
|
|
import { translate, translateSheetTitle } from '@/scripts/translate';
|
|
import { sheet_to_json } from '@/utils/Export2Excel';
|
|
import { getSkinStyleList } from '@/api/management/mapskin';
|
|
|
|
export default {
|
|
name: 'MapCreate',
|
|
props: {
|
|
skinStyle: {
|
|
type: String,
|
|
default() {
|
|
return '';
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
dialogShow: false,
|
|
loading: false,
|
|
file: null,
|
|
rABS: false,
|
|
loadingUpload: false,
|
|
resultJSON: {},
|
|
activeTab: 'first',
|
|
skinStyleList: [],
|
|
publishMapList: [],
|
|
newModel: {
|
|
id: '',
|
|
name: '',
|
|
skinStyle: ''
|
|
},
|
|
pullModel: {
|
|
id: '',
|
|
name: ''
|
|
},
|
|
newRules: {
|
|
name: [
|
|
{ required: true, message: '请输入地图名称', trigger: 'blur' }
|
|
],
|
|
skinStyle: [
|
|
{ required: true, message: '请选择皮肤风格', trigger: 'change' }
|
|
]
|
|
},
|
|
pullRules: {
|
|
id: [
|
|
{ required: true, message: '请选择地图来源', trigger: 'change' }
|
|
],
|
|
name: [
|
|
{ required: true, message: '请输入地图名称', trigger: 'change' }
|
|
]
|
|
}
|
|
};
|
|
},
|
|
watch: {
|
|
skinStyle(val) {
|
|
this.newModel.skinStyle = val;
|
|
}
|
|
},
|
|
methods: {
|
|
show() {
|
|
this.dialogShow = true;
|
|
this.initLoadData();
|
|
},
|
|
close() {
|
|
if (this.$refs.newForm) {
|
|
this.$refs.newForm.resetFields();
|
|
}
|
|
if (this.$refs.pullForm) {
|
|
this.$refs.pullForm.resetFields();
|
|
}
|
|
this.dialogShow = false;
|
|
},
|
|
handleClose() {
|
|
this.close();
|
|
},
|
|
initLoadData() {
|
|
this.skinStyleList = [];
|
|
getSkinStyleList().then(response => {
|
|
this.skinStyleList = response.data;
|
|
});
|
|
|
|
listPublishMap().then(response => {
|
|
this.publishMapList = response.data;
|
|
}).catch(() => {
|
|
this.$messageBox('加载已发布地图列表失败');
|
|
});
|
|
},
|
|
isNormal() {
|
|
return this.activeTab === 'first';
|
|
},
|
|
isThird() {
|
|
return this.activeTab === 'third';
|
|
},
|
|
create() {
|
|
if (this.isThird()) {
|
|
this.close();
|
|
} else if (this.isNormal()) {
|
|
this.$refs['newForm'].validate((valid) => {
|
|
if (valid) {
|
|
this.loading = true;
|
|
newMap(this.newModel).then(response => {
|
|
this.loading = false;
|
|
this.$emit('refresh');
|
|
this.$message.success('创建成功！');
|
|
this.close();
|
|
}).catch(() => {
|
|
this.loading = false;
|
|
this.$messageBox('创建失败');
|
|
this.close();
|
|
});
|
|
}
|
|
});
|
|
} else {
|
|
this.$refs['pullForm'].validate((valid) => {
|
|
if (valid) {
|
|
this.loading = true;
|
|
newUsePublishMap(this.pullModel).then(response => {
|
|
this.loading = false;
|
|
this.$emit('refresh');
|
|
this.$message.success('创建成功！');
|
|
this.close();
|
|
}).catch(() => {
|
|
this.loading = false;
|
|
this.$messageBox('创建失败');
|
|
this.close();
|
|
});
|
|
}
|
|
});
|
|
}
|
|
},
|
|
importf() { // 导入
|
|
const obj = this.$refs.files;
|
|
let wb;
|
|
if (!obj.files) return;
|
|
const f = obj.files[0];
|
|
this.loadingUpload = true;
|
|
const reader = new FileReader();
|
|
const that = this;
|
|
reader.onload = function (e) {
|
|
const data = e.target.result;
|
|
if (that.rABS) {
|
|
wb = XLSX.read(btoa(that.fixdata(data)), {// 手动转化
|
|
type: 'base64'
|
|
});
|
|
} else {
|
|
wb = XLSX.read(data, {
|
|
type: 'binary'
|
|
});
|
|
}
|
|
const resultJSONData = {};
|
|
for (const index in wb.Sheets) {
|
|
|
|
const titleNum = that.formatSheetTitle(index);
|
|
const key = translateSheetTitle.sheetName[titleNum];
|
|
|
|
const filterVal = that.handelData(key);
|
|
const jsonData = sheet_to_json(wb.Sheets[index]);
|
|
const data = that.formatJson(filterVal, jsonData, key);
|
|
if (key === 'base') {
|
|
for (const i in data[0]) {
|
|
resultJSONData[i] = data[0][i];
|
|
}
|
|
} else {
|
|
resultJSONData[key] = data;
|
|
}
|
|
}
|
|
that.resultJSON = resultJSONData;
|
|
if (that.resultJSON) {
|
|
postBuildMapImport(that.resultJSON).then(res => {
|
|
that.loadingUpload = false;
|
|
that.$message.success('导入成功！');
|
|
that.$emit('refresh');
|
|
that.close();
|
|
}).catch(error => {
|
|
that.loadingUpload = false;
|
|
that.$message.error('导入失败' + error.message);
|
|
});
|
|
}
|
|
obj.value = ''; // 清空上次导入文件
|
|
};
|
|
if (that.rABS) {
|
|
reader.readAsArrayBuffer(f);
|
|
} else {
|
|
reader.readAsBinaryString(f);
|
|
}
|
|
},
|
|
// 转换数据格式
|
|
handelData(key) {
|
|
const tHeader = [];
|
|
const tHeaderF = [];
|
|
if (translate[key]) {
|
|
translate[key].columns.forEach(item => {
|
|
tHeader.push(item.tHeader);
|
|
tHeaderF.push(item.key);
|
|
});
|
|
}
|
|
const filterVal = {
|
|
tHeader: tHeader,
|
|
tHeaderF: tHeaderF
|
|
};
|
|
return filterVal;
|
|
},
|
|
// 文件流转BinaryString
|
|
fixdata(data) {
|
|
var o = '';
|
|
var l = 0;
|
|
var w = 10240;
|
|
for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
|
|
o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
|
|
return o;
|
|
},
|
|
// 转换属性名称 格式
|
|
formatJson(filterVal, jsonData, key) {
|
|
jsonData.map((item, index) => {
|
|
const json = {};
|
|
filterVal.tHeader.map((j, o) => {
|
|
if (item[j] != undefined) {
|
|
json[filterVal.tHeaderF[o]] = translate[key].columns[o].formatter(item[j]);
|
|
}
|
|
});
|
|
jsonData.splice(index, 1, json);
|
|
});
|
|
return jsonData;
|
|
},
|
|
// 转换sheet名字
|
|
formatSheetTitle(title) {
|
|
let index;
|
|
translateSheetTitle.sheetTitle.forEach((v, i) => {
|
|
if (title == v) index = i;
|
|
});
|
|
return index;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped rel="stylesheet/scss" lang="scss">
|
|
.uploadDemo {
|
|
.el-upload-dragger {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.file_box {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
</style>
|
|
<style>
|
|
.el-loading-mask {
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
}
|
|
</style>
|