<template>
|
<div class="layerBox">
|
<div class="leftTree">
|
<el-card class="treeCard">
|
<div>
|
<el-input :placeholder="placeholderData" suffix-icon="el-icon-search" v-model="searchData">
|
</el-input>
|
</div>
|
<div class="treeBox">
|
<el-tree :data="treeData" node-key="id" :default-checked-keys="activeNodeId"
|
:default-expanded-keys="activeNodeId" :filter-node-method="filterNode" highlight-current
|
ref="tree" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
|
</div>
|
</el-card>
|
</div>
|
<div class="rightContent">
|
<el-card style="height: 100%;">
|
<div class="contentMenu">
|
<el-button icon="el-icon-plus" @click="setAddNode(true)">新增同级</el-button>
|
<el-button icon="el-icon-plusde" :disabled="activeNode && activeNode.type != '1'"
|
@click="setAddNode(false)">新增子级</el-button>
|
<el-button icon="el-icon-delete" @click="setDelNode">删除</el-button>
|
<el-button icon="el-icon-top" @click="setMoveUp">向上移动</el-button>
|
<el-button icon="el-icon-bottom" @click="setMoveDown">向下移动</el-button>
|
</div>
|
<el-divider />
|
<el-form ref="formInline" :model="formInline" label-width="80px">
|
<el-form-item label="图层名称 : ">
|
<el-input v-model="formInline.cnName"></el-input>
|
</el-form-item>
|
<el-form-item label="图层类型 : ">
|
<el-select v-model="formInline.type" style="width: 100%;">
|
<el-option v-for="item in layerOption" :key="item.value" :label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="服务类型 : " v-show="formInline.type == '2'">
|
<el-select v-model="formInline.serveType" style="width: 100%;">
|
<el-option v-for="item in sourceOption" :key="item.value" :label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="服务地址 : " v-show="formInline.type == '2'">
|
<el-input v-model="formInline.url"></el-input>
|
</el-form-item>
|
<el-form-item label="数据类型 : " v-show="formInline.type == '2'">
|
<el-select v-model="formInline.dataType" style="width: 100%;">
|
<el-option v-for="item in dataOption" :key="item.value" :label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="是否显示 : " v-show="formInline.type == '2'">
|
<el-radio v-model="formInline.isShow" label="0">否</el-radio>
|
<el-radio v-model="formInline.isShow" label="1">是</el-radio>
|
</el-form-item>
|
<el-form-item label="备注 : ">
|
<el-input v-model="formInline.bak"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="onSubEdit">修改</el-button>
|
<el-button @click="onCanelEdit">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
</div>
|
<el-dialog :title="appendTitle" :visible.sync="appendActive" width="30%">
|
<el-form ref="appendFrom" :model="appendFrom" label-width="80px">
|
<el-form-item label="图层名称 : ">
|
<el-input v-model="appendFrom.cnName"></el-input>
|
</el-form-item>
|
<el-form-item label="图层类型 : ">
|
<el-select v-model="appendFrom.type" style="width: 100%;">
|
<el-option v-for="item in layerOption" :key="item.value" :label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="服务类型 : " v-show="appendFrom.type == '2'">
|
<el-select v-model="appendFrom.serveType" style="width: 100%;">
|
<el-option v-for="item in sourceOption" :key="item.value" :label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="服务地址 : " v-show="appendFrom.type == '2'">
|
<el-input v-model="appendFrom.url"></el-input>
|
</el-form-item>
|
<el-form-item label="数据类型 : " v-show="appendFrom.type == '2'">
|
<el-select v-model="appendFrom.dataType" style="width: 100%;">
|
<el-option v-for="item in dataOption" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="是否显示 : " v-show="appendFrom.type == '2'">
|
<el-radio v-model="appendFrom.isShow" label="0">否</el-radio>
|
<el-radio v-model="appendFrom.isShow" label="1">是</el-radio>
|
</el-form-item>
|
<el-form-item label="备注 : ">
|
<el-input v-model="appendFrom.bak"></el-input>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="handleSubmitClose">取 消</el-button>
|
<el-button type="primary" @click="handleSubmit">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import mapData from '@/assets/js/mapSdk/mapData.js';
|
import { layer_selectAll, layer_insert, layer_delete, layer_updates, layer_update } from "@/api/mapView/map.js"
|
import configTools from '@/assets/js/configTools.js';
|
|
export default {
|
name: 'mapLayer',
|
components: {},
|
data() {
|
return {
|
searchData: '',
|
placeholderData: '请输入要查询的图层名称',
|
formInline: {},
|
layerOption: [],
|
sourceOption: [],
|
dataOption: [],
|
treeData: [],
|
defaultProps: {
|
children: 'children',
|
label: 'cnName'
|
},
|
activeNode: null,
|
activeNodeId: [],
|
formData: {},
|
appendData: {},
|
appendActive: false,
|
appendTitle: "",
|
appendFlag: null,
|
appendFrom: {},
|
insertData: {},
|
treeList: [],
|
};
|
},
|
created() {
|
this.setFormInlineStart();
|
},
|
watch: {
|
searchData(val) {
|
this.$refs.tree.filter(val);
|
},
|
},
|
mounted() {
|
this.setlayerStart();
|
},
|
methods: {
|
//图层模糊查询
|
filterNode(value, data) {
|
if (!value) return true;
|
return data.cnName.indexOf(value) !== -1;
|
},
|
// 数据初始化
|
setFormInlineStart() {
|
const layerData = mapData.layerData;
|
this.layerOption = layerData.layerOption;
|
this.sourceOption = layerData.sourceOption;
|
this.dataOption = layerData.dataOption;
|
this.formData = {
|
cnName: '',
|
type: this.layerOption[0].value,
|
serveType: this.sourceOption[0].value,
|
url: '',
|
dataType: this.dataOption[0].value,
|
isShow: '0',
|
bak: ''
|
}
|
this.formInline = { ... this.formData }
|
},
|
// 图层树获取数据
|
setlayerStart() {
|
layer_selectAll().then(response => {
|
if (response.data && response.data.result && response.data.result.length > 0) {
|
const val = response.data.result;
|
this.treeList = val;
|
this.treeData = configTools.getTreeData(val)
|
this.$nextTick(() => {
|
|
if (this.insertData && this.insertData.name) {
|
const obj = val.filter(item => {
|
if (item.pid == this.insertData.id && item.cnName == this.insertData.name) {
|
return item;
|
}
|
})
|
if (obj && obj.length > 0) {
|
this.handleNodeClick(obj[0])
|
|
this.insertData = {}
|
}
|
} else if (!this.activeNode) {
|
if (this.treeData.length > 0) {
|
this.handleNodeClick(this.treeData[0])
|
}
|
} else if (this.activeNode) {
|
this.handleNodeClick(this.activeNode)
|
}
|
})
|
}
|
})
|
},
|
setLayerFormInline(res) {
|
res.type = res.type.toString();
|
res.isShow = res.isShow.toString();
|
res.isProject = res.isProject.toString();
|
this.formInline = res
|
},
|
//修改提交
|
onSubEdit() {
|
layer_update(this.formInline).then(response => {
|
if (response.data.code != 200) {
|
return this.$message({
|
showClose: true,
|
message: '修改失败',
|
type: 'error'
|
});
|
}
|
this.$message({
|
showClose: true,
|
message: '修改成功',
|
type: 'success'
|
});
|
this.setlayerStart();
|
})
|
},
|
// 图层树点击
|
handleNodeClick(res) {
|
const lid = res.id;
|
this.activeNodeId = [lid];
|
this.$refs.tree.setCurrentKey(lid);
|
this.activeNode = this.$refs.tree.getNode(lid).data;
|
this.onCanelEdit();
|
},
|
// 重置
|
onCanelEdit() {
|
const val = { ... this.activeNode }
|
this.setLayerFormInline(val)
|
},
|
//添加节点
|
setAddNode(res) {
|
this.appendTitle = res ? '新增同级' : '新增子级'
|
this.appendActive = true;
|
this.appendFrom = { ... this.formData }
|
},
|
// 取消添加
|
handleSubmitClose() {
|
this.appendActive = false;
|
this.appendTitle = "";
|
this.appendFrom = {};
|
},
|
setDelNode() {
|
layer_delete({ id: this.formInline.id }).then(response => {
|
if (response.data.code == 200) {
|
this.activeNode = null;
|
this.activeNodeId = null;
|
this.setlayerStart();
|
this.$message({
|
showClose: true,
|
message: '删除成功',
|
type: 'success'
|
});
|
} else {
|
this.$message({
|
showClose: true,
|
message: '删除失败',
|
type: 'error'
|
});
|
}
|
})
|
},
|
getMaxOrderNum(res) {
|
var val = null;
|
for (var i in res) {
|
if (val) {
|
val = res[i].data.orderNum
|
} else {
|
if (res[i].data.orderNum > val) {
|
val = res[i].data.orderNum;
|
}
|
}
|
}
|
return val + 1;
|
},
|
//添加提交
|
async handleSubmit() {
|
const isAddParent = this.appendTitle == "新增同级" ? true : false;
|
const val = { ... this.appendFrom };
|
val.isShow = parseInt(val.isShow);
|
val.isProject = parseInt(val.isProject);
|
val.level = isAddParent ? this.activeNode.level : this.activeNode.level + 1;
|
val.pid = isAddParent ? this.activeNode.pid : this.activeNode.id;
|
const pchildNodes = isAddParent ? this.$refs.tree.getNode(this.activeNode.id).parent.childNodes : this.$refs.tree.getNode(this.activeNode.id).childNodes
|
val.orderNum = this.getMaxOrderNum(pchildNodes);
|
if (this.treeData.length <= 0) {
|
val.pid = 0;
|
val.orderNum = 1;
|
val.lever = 1;
|
}
|
this.insertData = {
|
name: val.cnName,
|
id: val.pid
|
}
|
const response = await layer_insert(val);
|
if (response.data.code == 200) {
|
this.$message({
|
showClose: true,
|
message: '添加成功',
|
type: 'success'
|
});
|
this.handleSubmitClose();
|
this.setlayerStart();
|
} else {
|
this.$message({
|
showClose: true,
|
message: '添加失败',
|
type: 'error'
|
});
|
}
|
},
|
// 向上移动
|
setMoveUp() {
|
let node = this.$refs.tree.getCurrentNode();
|
let pchildNodes = this.$refs.tree.getNode(node.id).parent.childNodes;
|
let currentId = null;
|
for (let i = 0; i < pchildNodes.length; i++) {
|
if (pchildNodes[i].data.id == node.id) {
|
currentId = i;
|
}
|
}
|
if (currentId == 0) {
|
return this.$message({
|
message: "处于顶端，不能继续上移",
|
type: "warning",
|
});
|
}
|
const tempChildrenNodex1 = pchildNodes[currentId - 1];
|
const tempChildrenNodex2 = pchildNodes[currentId];
|
var arr = [];
|
this.treeList.filter((res) => {
|
if (res.id == tempChildrenNodex2.data.id) {
|
arr.push(res);
|
} else if (res.id == tempChildrenNodex1.data.id) {
|
arr.push(res);
|
}
|
});
|
const orderNum = arr[1].orderNum
|
arr[1].orderNum = arr[0].orderNum
|
arr[0].orderNum = orderNum
|
this.sendChange(arr)
|
},
|
// 向下移动
|
setMoveDown() {
|
let node = this.$refs.tree.getCurrentNode();
|
let pchildNodes = this.$refs.tree.getNode(node.id).parent.childNodes;
|
let currentId = null;
|
for (let i = 0; i < pchildNodes.length; i++) {
|
if (pchildNodes[i].data.id == node.id) {
|
currentId = i;
|
}
|
}
|
if (currentId > pchildNodes.length - 1) {
|
return this.$message({
|
message: "处于底端，不能继续上移",
|
type: "warning",
|
});
|
}
|
const tempChildrenNodex1 = pchildNodes[currentId + 1];
|
const tempChildrenNodex2 = pchildNodes[currentId];
|
var arr = [];
|
this.treeList.filter((res) => {
|
if (res.id == tempChildrenNodex2.data.id) {
|
arr.push(res);
|
} else if (res.id == tempChildrenNodex1.data.id) {
|
arr.push(res);
|
}
|
});
|
const orderNum = arr[1].orderNum
|
arr[1].orderNum = arr[0].orderNum
|
arr[0].orderNum = orderNum;
|
this.sendChange(arr)
|
},
|
sendChange(res) {
|
layer_updates(res).then(response => {
|
if (response.data.code != 200) {
|
return this.$message({
|
showClose: true,
|
message: '移动失败',
|
type: 'error'
|
});
|
}
|
this.setlayerStart();
|
})
|
}
|
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.layerBox {
|
width: calc(100% - 20px);
|
height: calc(100% - 20px);
|
position: absolute;
|
margin: 10px;
|
border-radius: 5px;
|
display: flex;
|
|
.leftTree {
|
width: 20%;
|
height: 100%;
|
margin-right: 10px;
|
|
.treeCard {
|
height: 100%;
|
|
|
::v-deep.el-card__body {
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.treeBox {
|
margin-top: 10px;
|
flex: 1;
|
overflow: auto;
|
}
|
}
|
|
::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
color: #409EFF;
|
}
|
}
|
|
.rightContent {
|
flex: 1;
|
|
.contentMenu {
|
display: flex;
|
justify-content: flex-end;
|
}
|
|
::v-deep .el-divider--horizontal {
|
margin: 15px 0px;
|
}
|
}
|
}
|
</style>
|
|
|
</style>
|
