<template>
|
<flex-layout>
|
<div class="flex-page-content">
|
<el-table
|
stripe
|
size="mini"
|
header-row-class-name="header-primary"
|
height="100%" :data="table.data">
|
<el-table-column
|
v-for="header in table.headers" :key="header.prop"
|
:prop="header.prop"
|
:label="header.label"
|
:min-width="header.minWidth"
|
align="center"
|
:resizable="false"></el-table-column>
|
<el-table-column
|
fixed="right"
|
label="操作"
|
width="160"
|
align="center">
|
<template slot-scope="scope">
|
<el-button @click="handleClick(scope.row)" type="primary" size="mini">编辑</el-button>
|
<el-button @click="delMapHome(scope.row)" type="danger" size="mini" >删除</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" @click="searchMap" round size="mini" icon="el-icon-search">查询</el-button>
|
<el-button type="primary" @click="addDialog = true" round size="mini">添加机房</el-button>
|
</div>
|
</div>
|
<!-- 添加机房面板 -->
|
<el-dialog
|
title="添加机房"
|
width="auto"
|
:visible.sync="addDialog"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center"
|
:modal-append-to-body="false">
|
<add-home-info v-if="addDialog" @handleEvent="handleAddInfo"></add-home-info>
|
</el-dialog>
|
<!-- 编辑机房面板 -->
|
<el-dialog
|
title="编辑机房"
|
width="auto"
|
:visible.sync="editDialog"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center"
|
:modal-append-to-body="false">
|
<edit-home-info :batt="batt" v-if="editDialog" @handleEvent="handleEditInfo"></edit-home-info>
|
</el-dialog>
|
</flex-layout>
|
</template>
|
|
<script>
|
import AddHomeInfo from "@/pages/dataMager/dialog/AddHomeInfo";
|
import EditHomeInfo from "@/pages/dataMager/dialog/EditHomeInfo";
|
import {
|
delMapHome,
|
searchMap,
|
} from '@/assets/js/api'
|
export default {
|
name: "homeAddressInfoManage",
|
components: {
|
AddHomeInfo,
|
EditHomeInfo,
|
},
|
data() {
|
return {
|
batt: {},
|
addDialog: false,
|
editDialog: false,
|
table: {
|
headers: [
|
{
|
prop:"StationName",
|
label: "机房名称",
|
minWidth: 360
|
},
|
{
|
prop:"longitude",
|
label: "经度",
|
minWidth: 180
|
},
|
{
|
prop:"latitude",
|
label: "纬度",
|
minWidth: 180
|
},
|
{
|
prop:"Address",
|
label: "地址",
|
minWidth: 360
|
},
|
],
|
data: []
|
}
|
}
|
},
|
methods: {
|
// 查询机房的位置信息
|
searchMap() {
|
// 开启等待框
|
let loading = this.$layer.loading();
|
// 查询后台
|
searchMap().then(res=>{
|
let rs = JSON.parse(res.data.result);
|
// 设置表格的值
|
this.table.data = rs;
|
// 关闭等待框
|
this.$layer.close(loading);
|
}).catch(error=>{
|
console.log(error);
|
// 关闭等待框
|
this.$layer.close(loading);
|
});
|
},
|
handleAddInfo() {
|
// 查询机房
|
this.searchMap();
|
// 关闭添加框
|
this.addDialog = false;
|
},
|
handleEditInfo() {
|
// 查询机房
|
this.searchMap();
|
// 关闭添加框
|
this.editDialog = false;
|
},
|
handleClick(row) {
|
this.batt = row;
|
this.editDialog = true;
|
},
|
delMapHome(row) {
|
// 添加确认框
|
this.$layer.confirm('确认删除' + row.StationName+"定位信息", {
|
icon: 3,
|
title: '系统提示'
|
}, (index) => {
|
// 关闭确认框
|
this.$layer.close(index);
|
// 执行删除操作
|
delMapHome(row).then(res => {
|
let rs = JSON.parse(res.data.result);
|
if (rs.code == 1) {
|
this.$layer.msg('删除成功');
|
} else {
|
this.$layer.msg('删除失败');
|
}
|
// 查询信息
|
this.searchMap();
|
}).catch(error => {
|
console.log(error);
|
});
|
});
|
},
|
},
|
mounted() {
|
// 查询地图上的机房的定位
|
this.searchMap();
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
