<template>
|
<flex-layout>
|
<div class="flex-page-content">
|
<el-table stripe size="mini" header-row-class-name="header-primary" height="100%" :data="tableData">
|
<el-table-column prop="province" label="省" min-width="120" :resizable="false" align="center">
|
</el-table-column>
|
<el-table-column prop="city" label="市" min-width="120" :resizable="false" align="center">
|
</el-table-column>
|
<el-table-column prop="distinct" label="区县" min-width="120" :resizable="false" align="center">
|
</el-table-column>
|
<el-table-column prop="mapName" label="地图名称" min-width="280" :resizable="false" align="center">
|
</el-table-column>
|
<el-table-column label="操作" width="125" align="center">
|
<template slot-scope="scope">
|
<el-button @click="handleClick(scope.row)" :disabled="scope.row.status==1"
|
:type="scope.row.status==1?'primary':'info'" size="mini">
|
{{ scope.row.status == 1 ? '已激活' : '未激活' }}
|
</el-button>
|
<!-- <el-button type="success" size="mini" @click="editMap(scope.row)">编辑</el-button>-->
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="flex-page-footer" slot="footer">
|
<div class="el-pagination-btns">
|
<el-button type="primary" round size="mini" icon="el-icon-search" @click="searchData">查询</el-button>
|
</div>
|
<div class="el-pagination-btns">
|
<el-button type="primary" round size="mini" icon="el-icon-plus" @click="addMap">新增关联地图</el-button>
|
</div>
|
</div>
|
<el-dialog title="新增关联地图" width="300px" :visible.sync="addDialog" :close-on-click-modal="false" top="0"
|
class="dialog-center" :modal-append-to-body="false">
|
<add-chart-map :list="tableData" @success="addSuccess" v-if="addDialog"></add-chart-map>
|
</el-dialog>
|
<el-dialog title="编辑关联地图" width="600px" :visible.sync="editDialog" :close-on-click-modal="false" top="0"
|
class="dialog-center" :modal-append-to-body="false">
|
<edit-chart-map :mapjson="mapjson" @success="editSuccess" v-if="editDialog"></edit-chart-map>
|
</el-dialog>
|
</flex-layout>
|
</template>
|
|
<script>
|
import {
|
getAllMapOutlineAction,
|
activeMapOutlineAction
|
} from '../../assets/js/api.js';
|
import addChartMap from '@/components/chartMapSetting/addChartMap';
|
import editChartMap from '@/components/chartMapSetting/editChartMap';
|
import mapJson from "../../../public/mapJson/js";
|
|
export default {
|
components: {
|
addChartMap,
|
editChartMap
|
},
|
data() {
|
return {
|
tableData: [],
|
addDialog: false,
|
editDialog: false,
|
mapjson: {},
|
mapList: mapJson.mapList()
|
}
|
},
|
methods: {
|
handleClick(data) { //点击激活
|
if (data.status == 1) {
|
return
|
}
|
this.$confirm('是否激活该地图?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
//发送请求传送至后台
|
let loading = this.$layer.loading(1);
|
let Id = {
|
'id': data.id
|
};
|
activeMapOutlineAction(Id).then((res) => {
|
let rs = JSON.parse(res.data.result);
|
if (rs.code == 1) {
|
this.$layer.msg('激活成功！');
|
this.tableData.map((item, index) => {
|
item.status = 0
|
});
|
data.status = 1
|
} else {
|
this.$layer.msg('激活失败！');
|
}
|
// 关闭加载框
|
this.$layer.close(loading);
|
}).catch((err) => {
|
console.log(err);
|
// 关闭加载框
|
this.$layer.close(loading);
|
});
|
});
|
},
|
addMap() { //添加地图
|
this.addDialog = true;
|
},
|
editMap(data) { //编辑地图
|
this.mapjson = data;
|
this.editDialog = true;
|
},
|
searchData() { //查询数据
|
let loading = this.$layer.loading(1);
|
getAllMapOutlineAction().then((res) => {
|
let rs = JSON.parse(res.data.result);
|
if (rs.code == 1) {
|
let data = rs.data.map(item=>{
|
let mapInfo = mapJson.getItemByValue(item.name, this.mapList);
|
item.mapName = mapInfo.label;
|
return item;
|
});
|
this.tableData = data;
|
}
|
// 关闭加载框
|
this.$layer.close(loading);
|
}).catch((err) => {
|
console.log(err);
|
// 关闭加载框
|
this.$layer.close(loading);
|
this.$layer.msg('查询失败！')
|
});
|
},
|
addSuccess() { //添加成功后查询数据
|
// 关闭弹出面板
|
this.addDialog = false
|
// 从新查询数据
|
this.searchData();
|
},
|
editSuccess() { //编辑成功后查询数据
|
// 关闭弹出面板
|
this.editDialog = false
|
// 从新查询数据
|
this.searchData();
|
}
|
},
|
mounted() {
|
this.searchData()
|
},
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
