<template>
|
<div class="authorityManagement_box">
|
<My-bread :list="[
|
`${$t('dataManage.dataManage')}`,
|
`${$t('dataManage.styleManage')}`,
|
]"></My-bread>
|
<el-divider />
|
<div class="searchComp subpage_Div" ref="container">
|
<el-form ref="ruleForm" :model="ruleForm" :inline="true">
|
<div class="flex_box">
|
<div style="margin-right: auto">
|
<el-form-item size="small" :label="$t('dataManage.vmobj.keyword')" prop="name">
|
<el-input v-model="ruleForm.name" :placeholder="$t('shuJuGuanLi.lable1')" style="width:200px"><i
|
slot="suffix" class="el-icon-search" @click="submitForm('ruleForm')"
|
style="padding-right: 8px"></i></el-input>
|
</el-form-item>
|
</div>
|
<div>
|
<el-form-item>
|
<el-button @click="setInsertDialog" icon="el-icon-edit" type="success" size="small">{{ $t('common.append')
|
}}
|
</el-button>
|
<el-button @click="setDelDialog" icon="el-icon-delete" type="danger" size="small">{{ $t('common.delete') }}
|
</el-button>
|
|
<el-button @click="setRestFrom" icon="el-icon-refresh" type="info" size="small">{{ $t('common.empty') }}
|
</el-button>
|
</el-form-item>
|
</div>
|
</div>
|
|
</el-form>
|
</div>
|
<div class="dividing-line"></div>
|
<div class="table_box" :style="styleVar">
|
<el-table :data="tableData" style="width: 100%" border height="calc(100% - 65px)"
|
@selection-change="handleSelectionChange">
|
<el-table-column type="selection" width="55" />
|
<el-table-column align="center" type="index" :label="$t('dataManage.styleObj.index')" width="70px" />
|
<el-table-column align="center" prop="id" v-if="false" />
|
<el-table-column align="center" prop="name" label="名称" />
|
|
<el-table-column align="center" prop="line" label="环线" />
|
<el-table-column align="center" prop="type" label="类型" />
|
<el-table-column align="center" prop="geom" label="位置" />
|
<el-table-column min-width="100" :label="$t('common.operate')">
|
<template slot-scope="scope">
|
<!-- <el-button @click="showDetail(scope.$index, scope.row)" type="primary" plain size="small">{{ $t('common.see')
|
}}
|
</el-button> -->
|
<el-button @click="handleEdit(scope.$index, scope.row)" type="warning" plain size="small">{{
|
$t('common.update') }}
|
</el-button>
|
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="pagination_box" style="margin-top: 15px">
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listData.page"
|
:page-sizes="[10, 50, 100, 200]" :page-size="listData.limit" layout="total, sizes, prev, pager, next, jumper"
|
:total="count">
|
</el-pagination>
|
</div>
|
</div>
|
|
<el-dialog width="30%" :title="dialogTitle" :before-close="outerClose" :visible.sync="outerVisible">
|
<el-form :model="editData">
|
<el-form-item label="名称" :label-width="formLabelWidth">
|
<el-input v-model="editData.name" style="width: 100%;" placeholder=""></el-input>
|
</el-form-item>
|
<el-form-item label="环线" :label-width="formLabelWidth">
|
<el-input v-model="editData.line" style="width: 100%;" placeholder=""></el-input>
|
</el-form-item>
|
<el-form-item label="类型" :label-width="formLabelWidth">
|
<el-select v-model="editData.type" style="width: 100%;" placeholder="">
|
<el-option v-for="item in siteOption" :key="item.value" :label="item.name" :value="item.val">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="位置" :label-width="formLabelWidth">
|
<div style="width: 100%; ">
|
<el-input v-model="editData.geom" style="width: 92%;" placeholder="" disabled=""></el-input>
|
<el-link style="float: right;" @click="setInnerDialog"><i class="el-icon-plus"></i></el-link>
|
</div>
|
</el-form-item>
|
</el-form>
|
<el-dialog width="50%" title="点位" :visible.sync="innerVisible" :before-close="innerClose" append-to-body>
|
|
<div style="height: 540px">
|
<project-ol v-if="innerVisible"></project-ol>
|
</div>
|
|
|
|
</el-dialog>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="outerClose">取 消</el-button>
|
<el-button @click="submitOuter" type="primary">确 认</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import $ from "jquery";
|
import moment from "moment";
|
import { getToken } from "../../utils/auth.js";
|
import MyBread from "../../components/MyBread.vue";
|
import { site_data } from "./js/layerManage";
|
|
import ProjectOl from '../../components/ProjectOl.vue'
|
import { zhangzitou_selectAll, zhangzitou_insertZhangzitouEntity, zhangzitou_deleteZhangzitouEntitys,zhangzitou_updateZhangzitouEntity } from "../../api/api";
|
|
export default {
|
name: "styleManage",
|
components: { MyBread, ProjectOl },
|
data() {
|
return {
|
upform: { status: '0' },
|
formLabelWidth: "130px",
|
ruleForm: {},
|
searchName: "",
|
multipleSelection: [],
|
count: 0,
|
listData: {
|
name: null,
|
page: 1,
|
limit: 10,
|
},
|
tableHeight: 0,
|
timer: 0,
|
styleVar: {
|
height: "calc(100% - 109px)",
|
},
|
status: 0,
|
outerVisible: false,
|
innerVisible: false,
|
dialogTitle: null,
|
editData: {
|
name: '',
|
geom: "",
|
type: '',
|
line: ''
|
},
|
formLabelWidth: '90px',
|
siteOption: [],
|
tableData: [],
|
|
};
|
},
|
created() {
|
|
},
|
beforeDestroy() {
|
this.timer && clearTimeout(this.timer);
|
window.removeEventListener("resize", this.onResize);
|
},
|
mounted() {
|
this.siteOption = site_data;
|
this.editData.type = this.siteOption[0].val;
|
window.addEventListener("resize", this.onResize);
|
this.calHeight();
|
this.getDataAll();
|
},
|
methods: {
|
onResize() {
|
this.timer && clearTimeout(this.timer);
|
this.timer = setTimeout(() => {
|
this.calHeight();
|
}, 500);
|
},
|
calHeight() {
|
this.$nextTick(() => {
|
const rect = this.$refs.container.getBoundingClientRect();
|
this.tableHeight = `${rect.height + 97}px`;
|
this.styleVar["height"] = `calc(100% - ${rect.height + 28}px)`;
|
});
|
},
|
handleSelectionChange(val) {
|
this.multipleSelection = val;
|
},
|
handleSizeChange(val) {
|
this.listData.limit = val;
|
this.getDataAll();
|
},
|
handleCurrentChange(val) {
|
this.listData.page = val;
|
this.getDataAll();
|
},
|
handleEdit(index, row) {
|
this.dialogTitle = '修改'
|
this.editData = JSON.parse(JSON.stringify(row));
|
this.outerVisible = true;
|
},
|
setInnerDialog() {
|
if (this.editData.geom) {
|
this.$store.state.projeOl = this.editData.geom;
|
}
|
this.innerVisible = true;
|
},
|
submitForm() {
|
this.listData.name = this.ruleForm.name;
|
this.getDataAll();
|
},
|
setRestFrom() {
|
this.listData = {
|
name: null,
|
page: 1,
|
limit: 10,
|
}
|
this.ruleForm = {}
|
this.getDataAll();
|
},
|
async getDataAll() {
|
const data = await zhangzitou_selectAll(this.listData)
|
if (data.code != 200) return
|
console.log(data)
|
this.tableData = data.result.pois;
|
this.count = data.result.total;
|
|
},
|
setInsertDialog() {
|
this.dialogTitle = '新增'
|
this.outerVisible = true;
|
},
|
async setDelDialog() {
|
console.log(this.multipleSelection)
|
if (this.multipleSelection.length <= 0) return;
|
var std = [];
|
for (var i in this.multipleSelection) {
|
std.push(this.multipleSelection[i].id)
|
}
|
const data = await zhangzitou_deleteZhangzitouEntitys({ ids: std.toString() })
|
console.log(data)
|
if (data.code != 200) return
|
|
this.setRestFrom();
|
},
|
innerClose() {
|
this.editData.geom = this.$store.state.projeOl;
|
this.innerVisible = false;
|
},
|
outerClose() {
|
this.editData = {
|
name: '',
|
geom: "",
|
type: this.siteOption[0].val,
|
line: ''
|
}
|
this.$store.state.projeOl = null;
|
this.outerVisible = false
|
},
|
|
submitOuter() {
|
if (this.dialogTitle == "新增") {
|
this.outerInsert();
|
} else if (this.dialogTitle == "修改") {
|
this.outerEdit();
|
}
|
},
|
async outerEdit() {
|
var obj = JSON.parse(JSON.stringify(this.editData));
|
this.outerClose();
|
const data = await zhangzitou_updateZhangzitouEntity(obj)
|
if (data.result != 200) {
|
|
}
|
this.getDataAll();
|
},
|
async outerInsert() {
|
var obj = JSON.parse(JSON.stringify(this.editData));
|
this.outerClose();
|
const data = await zhangzitou_insertZhangzitouEntity(obj)
|
if (data.result != 200) {
|
|
}
|
this.setRestFrom();
|
}
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.authorityManagement_box {
|
height: 98%;
|
width: 98%;
|
padding: 0.5%;
|
|
.el-input {
|
width: 730px;
|
}
|
|
.searchComp {
|
padding: 8px;
|
//margin-top: 20px;
|
|
border-radius: 5px;
|
|
//margin-bottom: 20px;
|
.el-form-item {
|
margin: 5px;
|
}
|
|
// .el-input {
|
// width: 467px;
|
// }
|
}
|
|
.leftTree {
|
position: absolute;
|
z-index: 10;
|
z-index: 9999;
|
top: 100px;
|
left: 800px;
|
width: 400px;
|
height: 600px;
|
|
.treeBox {
|
height: 550px;
|
overflow: auto;
|
}
|
|
.btnBox {
|
width: 160px;
|
margin: 10px auto 0;
|
}
|
}
|
|
.BoxFlex {
|
display: flex;
|
justify-content: space-around;
|
width: 85%;
|
|
.BoxFlexinput {
|
flex: 1;
|
}
|
}
|
}
|
</style>
|
