<template>
|
<div class="bs-container">
|
<div class="inner-container">
|
<el-form
|
:inline="true"
|
class="filter-container"
|
>
|
<el-form-item class="filter-input filter-item">
|
<el-input
|
v-model="searchForm.searchKey"
|
class="bs-el-input"
|
clearable
|
maxlength="200"
|
@clear="getDataList"
|
placeholder="请输入地图名称或标识"
|
/>
|
</el-form-item>
|
<el-form-item class="filter-item">
|
<el-select
|
v-model="searchForm.level"
|
class="bs-el-select"
|
clearable
|
placeholder="请选择地图级别"
|
popper-class="bs-el-select"
|
@change="getDataList"
|
>
|
<el-option
|
v-for="level in levelList"
|
:key="level.value"
|
:label="level.label"
|
:value="level.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item class="filter-item">
|
<el-button
|
:loading="searchLoading"
|
icon="el-icon-search"
|
type="primary"
|
@click="getDataList"
|
>
|
查询
|
</el-button>
|
</el-form-item>
|
<el-form-item class="filter-item">
|
<el-button
|
class="bs-el-button-default"
|
@click="addMap"
|
>
|
新增
|
</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="bs-table-box">
|
<el-table
|
v-loading="searchLoading"
|
ref="table"
|
v-table
|
:data="mapList"
|
:element-loading-text="loadingText"
|
:load="load"
|
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
class="bs-el-table bs-scrollbar"
|
height="0"
|
lazy
|
row-key="id"
|
>
|
<el-empty slot="empty"/>
|
<el-table-column
|
align="left"
|
label="地图名称"
|
prop="name"
|
show-overflow-tooltip
|
/>
|
<el-table-column
|
align="center"
|
label="地图标识"
|
prop="mapCode"
|
show-overflow-tooltip
|
/>
|
<el-table-column
|
align="center"
|
label="地图级别"
|
prop="level"
|
show-overflow-tooltip
|
>
|
<template slot-scope="scope">
|
<span v-if="scope.row.level === 0">世界</span>
|
<span v-else-if="scope.row.level === 1">国家</span>
|
<span v-else-if="scope.row.level === 2">省份</span>
|
<span v-else-if="scope.row.level === 3">城市</span>
|
<span v-else-if="scope.row.level === 4">区县</span>
|
<span v-else>{{ getMoreLevel(scope.row.level) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
label="已上传配置JSON"
|
prop="uploadedGeoJson"
|
show-overflow-tooltip
|
>
|
<template slot-scope="scope">
|
<span v-if="scope.row.uploadedGeoJson === 1">是</span>
|
<span v-else>否</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
label="操作"
|
width="200"
|
>
|
<template slot-scope="scope">
|
<el-button
|
class="bs-el-button-default"
|
@click="editMap(scope.row)"
|
>
|
编辑
|
</el-button>
|
<el-button
|
class="bs-el-button-default"
|
@click="deleteMap(scope.row)"
|
>
|
删除
|
</el-button>
|
<el-button
|
v-if="scope.row.uploadedGeoJson === 1"
|
class="bs-el-button-default"
|
@click="addChild(scope.row)"
|
>
|
添加下级
|
</el-button>
|
<el-button
|
v-if="scope.row.uploadedGeoJson === 0"
|
class="bs-el-button-default"
|
@click="uploadGeoJson(scope.row)"
|
>
|
上传配置
|
</el-button>
|
</template>
|
</el-table-column>
|
|
</el-table>
|
</div>
|
</div>
|
<add-form
|
ref="addForm"
|
@refresh="refreshData"
|
/>
|
<edit-form
|
ref="editForm"
|
@refresh="refreshData"
|
/>
|
<el-dialog
|
:close-on-click-modal="false"
|
:visible.sync="geoJsonVisible"
|
append-to-body
|
class="bs-dialog-wrap bs-el-dialog"
|
height="1000px"
|
title="geoJson数据"
|
width="1000px"
|
>
|
<vue-json-viewer
|
v-model="currentMapGeoJSon"
|
theme="dark"
|
:show-btns="false"
|
mode="code"
|
/>
|
<el-button
|
class="bs-el-button-default"
|
@click="upload()"
|
>
|
<i class="el-icon-upload2"></i>
|
上传
|
</el-button>
|
<span
|
slot="footer"
|
class="dialog-footer"
|
>
|
<el-button
|
class="bs-el-button-default"
|
@click="submitUpload"
|
>提交</el-button>
|
</span>
|
</el-dialog>
|
<input
|
ref="geoJsonFileUpload"
|
accept=".json"
|
name="file"
|
style="display: none"
|
type="file"
|
@change="handleBatchUpload"
|
>
|
</div>
|
</template>
|
|
<script>
|
import table from 'data-room-ui/js/utils/table.js'
|
import {mapList, mapDelete, uploadGeoJson, mapCascadeDelete, mapInfo} from 'data-room-ui/js/utils/mapDataService'
|
import AddForm from "./AddForm"
|
import EditForm from "./EditForm"
|
import vueJsonViewer from 'vue-json-viewer'
|
|
export default {
|
name: "MapManagement",
|
directives: {
|
table // 注册自定义指令
|
},
|
components: {
|
AddForm,
|
EditForm,
|
vueJsonViewer
|
},
|
data() {
|
return {
|
currentMap: {}, // 当前操作的地图
|
currentMapGeoJSon: {}, // 当前操作的地图geoJson
|
loadingText: '',
|
searchLoading: false,
|
geoJsonVisible: false,
|
lazyResolveIds: [],
|
lazyResolveMap: new Map(),
|
searchForm: {
|
searchKey: '',
|
level: null,
|
uploadedGeoJson: null,
|
parentId: '0'
|
},
|
levelList: [
|
{
|
label: '世界',
|
value: 0
|
},
|
{
|
label: '国家',
|
value: 1
|
},
|
{
|
label: '省份',
|
value: 2
|
},
|
{
|
label: '城市',
|
value: 3
|
},
|
{
|
label: '区县',
|
value: 4
|
}
|
],
|
mapList: [],
|
// 提示过了
|
tipped: false
|
|
}
|
},
|
mounted() {
|
this.init()
|
},
|
methods: {
|
init() {
|
this.searchLoading = true
|
this.loadingText = '正在加载地图数据...'
|
mapList(this.searchForm).then(res => {
|
this.mapList = res
|
this.searchLoading = false
|
if (!this.tipped && this.mapList.length === 0) {
|
this.tip()
|
}
|
}).catch(err => {
|
this.searchLoading = false
|
})
|
},
|
getDataList() {
|
this.lazyResolveMap.clear()
|
this.$nextTick(() => {
|
this.mapList = []
|
})
|
this.$nextTick(() => {
|
this.searchLoading = true
|
this.loadingText = '正在加载地图数据...'
|
mapList(this.searchForm).then(res => {
|
this.mapList = res
|
this.searchLoading = false
|
}).catch(err => {
|
this.searchLoading = false
|
})
|
// 清除展开状态
|
for (let i = 0; i < this.lazyResolveIds.length; i++) {
|
this.$refs.table.store.states.treeData[this.lazyResolveIds[i]].loaded = false;
|
this.$refs.table.store.states.treeData[this.lazyResolveIds[i]].expanded = false
|
}
|
})
|
},
|
/**
|
* 新增、删除、修改等操作成功后刷新数据,不改变展开状态
|
* @param cbObj
|
*/
|
refreshData(cbObj) {
|
let parentId = cbObj.parentId
|
if (this.lazyResolveMap.get(parentId)) {
|
// 刷新父节点
|
const { data, treeNode, resolve } = this.lazyResolveMap.get(parentId)
|
this.$set(this.$refs.table.store.states.lazyTreeNodeMap, parentId, [])
|
this.load(data, treeNode, resolve)
|
return
|
}
|
if (parentId === '0' || parentId === 0) {
|
// 刷新根节点
|
this.getDataList()
|
return
|
}
|
mapInfo(parentId).then((res) => {
|
parentId = res.parentId
|
if (this.lazyResolveMap.get(parentId)) {
|
// 刷新父节点的父节点
|
const { data, treeNode, resolve } = this.lazyResolveMap.get(parentId)
|
this.$set(this.$refs.table.store.states.lazyTreeNodeMap, parentId, [])
|
this.load(data, treeNode, resolve)
|
// 展开该父节点
|
this.$refs.table.toggleRowExpansion(parentId, true);
|
} else {
|
// 刷新根节点
|
this.getDataList()
|
}
|
})
|
},
|
getMoreLevel(level) {
|
return '级别' + (level + 1)
|
},
|
addMap() {
|
this.$refs.addForm.mapFormVisible = true
|
this.$refs.addForm.init()
|
},
|
load(data, treeNode, resolve) {
|
this.lazyResolveMap.set(data.id, { data, treeNode, resolve })
|
this.lazyResolveIds.push(data.id)
|
mapList({
|
parentId: data.id
|
}).then(childList => {
|
// 解决同一页中同一条数据同时出现，如果懒加载中存在，那么将之前查询出来的数据删除
|
let deleteIdList = []
|
childList.forEach((child) => {
|
this.mapList.forEach((mapInfo) => {
|
if (mapInfo.id === child.id) {
|
deleteIdList.push(mapInfo.id)
|
}
|
})
|
})
|
this.mapList = this.mapList.filter((map) => {
|
return deleteIdList.indexOf(map.id) === -1
|
})
|
resolve(childList)
|
}).catch(err => {
|
resolve([])
|
})
|
},
|
deleteMap(map) {
|
this.$confirm('确定删除该地图？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
customClass: 'bs-el-message-box'
|
}).then(async () => {
|
mapDelete(map.id).then((deleteSuccess) => {
|
if (deleteSuccess) {
|
this.$message({
|
type: 'success',
|
message: '删除成功'
|
})
|
this.refreshData({
|
id: map.id,
|
parentId: map.parentId
|
})
|
} else {
|
this.deleteMapCascade(map)
|
}
|
}).catch(() => {
|
this.$message({
|
type: 'error',
|
message: '删除失败'
|
})
|
})
|
}).catch(() => {
|
})
|
},
|
tip() {
|
// 超链接跳转至
|
const htmlStr = `<span>大屏设计器提供了全国省市区县的地图数据，<a href="https://www.yuque.com/chuinixiongkou/bigscreen/kdrm8g3c8zfgaaq6#xjE8w" style="color: #00a0e9" target="_blank">点击查看</a></span>`
|
this.$notify({
|
title: '推荐',
|
dangerouslyUseHTMLString: true,
|
message: htmlStr,
|
customClass: 'ds-el-notify',
|
type: 'warning',
|
duration: 5000
|
})
|
},
|
deleteMapCascade(map) {
|
this.$confirm('该地图存在子级，是否直接删除该地图以及其所有子级？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
customClass: 'bs-el-message-box'
|
}).then(async () => {
|
mapCascadeDelete(map.id).then(() => {
|
this.$message({
|
type: 'success',
|
message: '删除成功'
|
})
|
this.refreshData({
|
id: map.id,
|
parentId: map.parentId
|
})
|
}).catch(() => {
|
})
|
}).catch(() => {
|
})
|
},
|
addChild(map) {
|
this.$refs.addForm.mapFormVisible = true
|
this.$refs.addForm.init(map)
|
},
|
editMap(map) {
|
this.$refs.editForm.mapFormVisible = true
|
this.$refs.editForm.init(map)
|
},
|
uploadGeoJson(map) {
|
this.currentMap = map
|
this.currentMapGeoJSon = {}
|
this.geoJsonVisible = true
|
},
|
upload() {
|
this.$refs.geoJsonFileUpload.click()
|
},
|
handleBatchUpload(source) {
|
this.uploadLoading = true
|
const file = source.target.files
|
const reader = new FileReader() // 新建一个FileReader
|
reader.readAsText(file[0], 'UTF-8') // 读取文件
|
|
reader.onload = (event) => {
|
let jsonStr = event.target.result
|
// 读取文件内容
|
try {
|
this.currentMapGeoJSon = JSON.parse(jsonStr)
|
} catch (e) {
|
this.uploadLoading = false
|
this.$message.error('JSON文件格式错误')
|
return false
|
}
|
this.uploadLoading = false
|
// input通过onchange事件来触发js代码的，由于两次文件是重复的，所以这个时候onchange事件是没有触发到的，所以需要手动清空input的值
|
source.target.value = ''
|
}
|
},
|
submitUpload() {
|
// 先检查JSON是否合法
|
if (typeof this.currentMapGeoJSon === 'string') {
|
this.$message.error('JSON文件格式错误')
|
return false
|
}
|
if (this.currentMapGeoJSon === {}) {
|
this.$message.error('JSON数据不能为空')
|
return false
|
}
|
// 调接口保存
|
uploadGeoJson({
|
id: this.currentMap.id,
|
geoJson: JSON.stringify(this.currentMapGeoJSon)
|
}).then(res => {
|
this.$message({
|
type: 'success',
|
message: '上传成功'
|
})
|
this.geoJsonVisible = false
|
// 刷新
|
this.refreshData({
|
id: this.currentMap.id,
|
parentId: this.currentMap.parentId
|
})
|
}).catch(err => {
|
this.$message({
|
type: 'error',
|
message: '上传失败'
|
})
|
})
|
this.geoJsonVisible = false
|
},
|
isWhitespace(str) {
|
// 如果是null、undefined，返回true
|
if (str == null) {
|
return true
|
}
|
return /^\s*$/.test(str);
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../../assets/style/bsTheme.scss';
|
.jv-container.dark {
|
color: aliceblue;
|
background: #161A26;
|
height: 150px;
|
}
|
</style>
|
<style lang="scss">
|
//修改notify的样式
|
.ds-el-notify {
|
background-color: var(--bs-el-background-1)!important;
|
border: var(--bs-el-border)!important;
|
.el-notification__title{
|
color: #fff!important;
|
}
|
.el-notification__content{
|
color: #fff!important;
|
}
|
.el-notification__closeBtn{
|
color: #fff!important;
|
}
|
}
|
</style>
|
