<script setup>
|
import { ref, onMounted, reactive, computed, watchEffect } from "vue";
|
|
import useElement from "@/hooks/useElement.js";
|
|
import {
|
getMapList,
|
activeMap,
|
} from '@/api/system.js';
|
|
const { $loading, $message, $confirm } = useElement();
|
import addChartMap from "./addChartMap";
|
import mapJson from "../../../public/mapJson/js/index.js";
|
|
const tableData = ref([]);
|
const addDialog = ref(false);
|
|
const mapList = mapJson.mapList();
|
|
function handleClick(data) {
|
//点击激活
|
if (data.status == 1) {
|
return;
|
}
|
$confirm("是否激活该地图?", () => {
|
//发送请求传送至后台
|
let loading = $loading();
|
activeMap(data.id)
|
.then(res => {
|
if (res.code == 1) {
|
$message.success("激活成功！");
|
tableData.value.map((item, index) => {
|
item.status = 0;
|
});
|
data.status = 1;
|
} else {
|
$message.error("激活失败！");
|
}
|
// 关闭加载框
|
loading.close();
|
})
|
.catch(err => {
|
console.log(err);
|
// 关闭加载框
|
loading.close();
|
});
|
}
|
);
|
}
|
function addMap() {
|
//添加地图
|
addDialog.value = true;
|
}
|
function searchData() {
|
//查询数据
|
let loading = $loading();
|
getMapList()
|
.then(res => {
|
if (res.code == 1) {
|
let data = res.data.map(item => {
|
let mapInfo = mapJson.getItemByValue(item.name, mapList);
|
item.mapName = mapInfo.label;
|
return item;
|
});
|
tableData.value = data;
|
}
|
// 关闭加载框
|
loading.close();
|
})
|
.catch(err => {
|
console.log(err);
|
// 关闭加载框
|
loading.close();
|
$message.error("查询失败！");
|
});
|
}
|
function addSuccess() {
|
//添加成功后查询数据
|
// 关闭弹出面板
|
addDialog.value = false;
|
// 从新查询数据
|
searchData();
|
}
|
|
onMounted(() => {
|
searchData();
|
});
|
</script>
|
|
<template>
|
<div class="page-wrapper">
|
<div class="page-header">
|
</div>
|
<div class="page-content">
|
<hdw-card is-full>
|
<div class="page-content-wrapper">
|
<div class="page-content-table">
|
<div class="pos-rel">
|
<div class="pos-abs">
|
<el-table stripe :data="tableData" border style="width: 100%; height: 100%">
|
<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 #default="scope">
|
<el-button @click="handleClick(scope.row)" :disabled="scope.row.status == 1"
|
:type="scope.row.status == 1 ? 'warning' : 'info'" >
|
{{ scope.row.status == 1 ? "已激活" : "未激活" }}
|
</el-button>
|
</template>
|
</el-table-column>
|
|
</el-table>
|
</div>
|
</div>
|
</div>
|
<div class="page-content-page">
|
<div class="page-tool"></div>
|
<el-button type="primary" round icon="Search" @click="searchData">查询</el-button>
|
<el-button type="primary" round icon="Plus" @click="addMap">新增关联地图</el-button>
|
<div class="page-tool"></div>
|
</div>
|
</div>
|
</hdw-card>
|
</div>
|
<div class="page-footer"></div>
|
<el-dialog title="新增关联地图" width="300px" v-model="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>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
.page-wrapper {
|
display: flex;
|
flex-direction: row;
|
padding: 8px;
|
height: 100%;
|
|
.page-content {
|
flex: 1;
|
}
|
}
|
|
.page-content-wrapper {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
|
.page-content-tools {
|
padding-bottom: 8px;
|
}
|
|
.page-content-table {
|
border-top: 1px solid var(--border-light-color);
|
box-sizing: border-box;
|
flex: 1;
|
margin-left: -8px;
|
margin-right: -8px;
|
}
|
|
.page-content-page {
|
padding: 8px 8px 0 8px;
|
text-align: center;
|
|
.el-page-container {
|
display: inline-block;
|
padding: 0 16px;
|
}
|
|
.page-tool {
|
display: inline-block;
|
}
|
}
|
}
|
|
.hdw-card-container {
|
width: 240px;
|
padding-right: 8px;
|
height: 100%;
|
}
|
|
.pos-rel {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
|
.pos-abs {
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.tools-filter {
|
display: inline-block;
|
font-size: 14px;
|
|
.tools-filter-item {
|
display: inline-block;
|
margin-right: 8px;
|
|
.filter-label {
|
display: inline-block;
|
}
|
|
.filter-content {
|
display: inline-block;
|
}
|
}
|
}
|
|
:deep(.el-button--warning.el-button--warning) {
|
background: #f69f40;
|
border: 0 none;
|
}
|
|
.form-footer {
|
text-align: right;
|
}
|
</style>
|
