From fd73e99196e00c82885c83ee2f1253c2fc343756 Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期二, 19 十二月 2023 09:32:59 +0800
Subject: [PATCH] 页面修改
---
src/views/datamanage/layerManagement.vue | 436 ++++++++++++++++--------------------------------------
1 files changed, 129 insertions(+), 307 deletions(-)
diff --git a/src/views/datamanage/layerManagement.vue b/src/views/datamanage/layerManagement.vue
index 9caeb2c..5099e9e 100644
--- a/src/views/datamanage/layerManagement.vue
+++ b/src/views/datamanage/layerManagement.vue
@@ -1,97 +1,60 @@
<template>
<div class="subpage_Box">
<My-bread :list="[
- `${$t('dataManage.dataManage')}`,
- `${$t('dataManage.layerManage')}`,
- ]"></My-bread>
+ `${$t('dataManage.dataManage')}`,
+ `${$t('dataManage.layerManage')}`,
+ ]"></My-bread>
<el-divider />
<div class="mainBox">
- <div
- class="cataLogContent leftTree subpage_Div"
- style="border: 1px solid #dcdfe6;"
- >
+ <div class="cataLogContent leftTree subpage_Div" style="border: 1px solid #dcdfe6;">
<div>
- <el-input
- v-model="filterText"
- :placeholder="$t('dataManage.layerObj.prompt1')"
- suffix-icon="el-icon-search"
- ></el-input>
+ <el-input v-model="filterText" :placeholder="$t('dataManage.layerObj.prompt1')"
+ suffix-icon="el-icon-search"></el-input>
- <el-tree
- ref="tree"
- :props="defaultProps"
- node-key="id"
- accordion
- :data="treeData"
- :default-expanded-keys="expandData"
- @node-click="handleNodeClick"
- :filter-node-method="filterNode"
- >
+ <el-tree ref="tree" :props="defaultProps" node-key="id" accordion :data="treeData"
+ :default-expanded-keys="expandData" @node-click="handleNodeClick" :filter-node-method="filterNode">
</el-tree>
</div>
</div>
<div class="cataLog_rightContent right subpage_Div">
- <div
- class="inquire"
- style="
+ <div class="inquire" style="
align-items: center;
display: flex;
justify-content: space-between;
- "
- >
+ ">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">{{
-
- }}</el-breadcrumb-item>
+
+}}</el-breadcrumb-item>
</el-breadcrumb>
<div style="margin-right: -5px">
<div class="menuTop">
<el-form :inline="true">
<el-form-item v-show="menuStatus.insert">
<!-- 鍚岀骇鑺傜偣娣诲姞 -->
- <el-button
- type="success"
- size="small"
- icon="el-icon-plus"
- @click="insertLayerData(1)"
- >{{ $t("shuJuGuanLi.butten.NewPeer") }}</el-button>
+ <el-button type="success" size="small" icon="el-icon-plus" @click="insertLayerData(1)">{{
+ $t("shuJuGuanLi.butten.NewPeer") }}</el-button>
</el-form-item>
<!-- 瀛愮骇鑺傜偣娣诲姞 -->
- <el-form-item v-show="menuStatus.insert">
- <el-button
- type="success"
- size="small"
- icon="el-icon-plus"
- @click="insertLayerData(2)"
- >{{ $t("shuJuGuanLi.butten.AddChild") }}</el-button>
+ <el-form-item v-show="menuStatus.insert" v-if="treeData.length > 0">
+ <el-button type="success" size="small" icon="el-icon-plus" @click="insertLayerData(2)">{{
+ $t("shuJuGuanLi.butten.AddChild") }}</el-button>
</el-form-item>
<!-- 鍒犻櫎 -->
<el-form-item v-show="menuStatus.delete">
- <el-button
- icon="el-icon-delete"
- type="danger"
- size="small"
- @click="setDeleteNode( )"
- >{{ $t("shuJuGuanLi.butten.Delete") }}</el-button>
+ <el-button icon="el-icon-delete" type="danger" size="small" @click="setDeleteNode()">{{
+ $t("shuJuGuanLi.butten.Delete") }}</el-button>
</el-form-item>
<!-- 鍚戜笂绉诲姩 -->
<el-form-item v-show="menuStatus.delete">
- <el-button
- type="info"
- icon="el-icon-top"
- size="small"
- @click="setEditNode(1)"
- >{{ $t("shuJuGuanLi.butten.MoveUp") }}</el-button>
+ <el-button type="info" icon="el-icon-top" size="small" @click="setEditNode(1)">{{
+ $t("shuJuGuanLi.butten.MoveUp") }}</el-button>
</el-form-item>
<!-- 鍚戜笅绉诲姩 -->
<el-form-item v-show="menuStatus.delete">
- <el-button
- type="info"
- icon="el-icon-bottom"
- size="small"
- @click="setEditNode(2)"
- >{{ $t("shuJuGuanLi.butten.MoveDown") }}</el-button>
+ <el-button type="info" icon="el-icon-bottom" size="small" @click="setEditNode(2)">{{
+ $t("shuJuGuanLi.butten.MoveDown") }}</el-button>
</el-form-item>
</el-form>
</div>
@@ -100,293 +63,131 @@
</div>
<div class="dividing-line"></div>
<div style="padding: 10px;">
- <el-form
- :model="formInline"
- class="demo-form-inline"
- label-width="150px"
- >
+ <el-form :model="formInline" class="demo-form-inline" label-width="150px">
<!-- 鑿滃崟鍚嶇О -->
<el-form-item :label="$t('dataManage.layerObj.layerName')">
- <el-input
- :placeholder="$t('dataManage.layerObj.prompt1')"
- style="width: 60%;"
- v-model="formInline.cnName"
-
- ></el-input>
+ <el-input :placeholder="$t('dataManage.layerObj.prompt1')" style="width: 60%;"
+ v-model="formInline.cnName"></el-input>
</el-form-item>
<!-- 鑿滃崟绫诲瀷 -->
<el-form-item :label="$t('dataManage.layerObj.layerType')">
- <el-select
- :placeholder="$t('dataManage.layerObj.prompt2')"
- clearable
- style="width: 60%;"
- v-model="formInline.type"
-
- >
- <el-option
- label="鐩綍"
- value='1'
- ></el-option>
- <el-option
- label="鍥惧眰"
- value='2'
- ></el-option>
+ <el-select :placeholder="$t('dataManage.layerObj.prompt2')" clearable style="width: 60%;"
+ v-model="formInline.type">
+ <el-option label="鐩綍" value='1'></el-option>
+ <el-option label="鍥惧眰" value='2'></el-option>
</el-select>
</el-form-item>
<!-- 鏈嶅姟绫诲瀷 -->
- <el-form-item
- v-show="formInline.type == 2"
- :label="$t('dataManage.layerObj.serviceType')"
- >
- <el-select
- clearable
- style="width: 60%;"
- v-model="formInline.serveType"
- :placeholder="$t('dataManage.layerObj.prompt3')"
- >
- <el-option
- v-for="item in serveType"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
+ <el-form-item v-show="formInline.type == 2" :label="$t('dataManage.layerObj.serviceType')">
+ <el-select clearable style="width: 60%;" v-model="formInline.serveType"
+ :placeholder="$t('dataManage.layerObj.prompt3')">
+ <el-option v-for="item in serveType" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<!-- 鏈嶅姟鍦板潃 -->
- <el-form-item
- v-show="formInline.type == 2"
- :label="$t('dataManage.layerObj.serviceAddress')"
- >
- <el-input
- :placeholder="$t('dataManage.layerObj.prompt4')"
- style="width: 60%;"
- v-model="formInline.url"
- ></el-input>
+ <el-form-item v-show="formInline.type == 2" :label="$t('dataManage.layerObj.serviceAddress')">
+ <el-input :placeholder="$t('dataManage.layerObj.prompt4')" style="width: 60%;"
+ v-model="formInline.url"></el-input>
</el-form-item>
<!-- 鑻辨枃琛ㄥ悕 -->
- <el-form-item
- v-show="formInline.type == 2 && formInline.serveType =='WMS'"
- :label="$t('dataManage.layerObj.enTableName')"
- >
- <el-input
- :placeholder="$t('dataManage.layerObj.prompt6')"
- style="width: 60%;"
- v-model="formInline.enName"
- ></el-input>
- </el-form-item>
+ <!-- <el-form-item v-show="formInline.type == 2 && formInline.serveType == 'WMS'"
+ :label="$t('dataManage.layerObj.enTableName')">
+ <el-input :placeholder="$t('dataManage.layerObj.prompt6')" style="width: 60%;"
+ v-model="formInline.enName"></el-input>
+ </el-form-item> -->
<!-- 鏁版嵁绫诲瀷 -->
- <el-form-item :label="$t('dataManage.layerObj.dataType')">
- <el-select
- clearable
- style="width: 60%;"
- v-model="formInline.dataType"
- :placeholder="$t('dataManage.layerObj.prompt8')"
- >
- <el-option
- v-for="item in dataType"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
+ <el-form-item v-show="formInline.type==2" :label="$t('dataManage.layerObj.dataType')">
+ <el-select clearable style="width: 60%;" v-model="formInline.dataType"
+ :placeholder="$t('dataManage.layerObj.prompt8')">
+ <el-option v-for="item in dataType" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<!-- 鏄惁鏄剧ず -->
- <el-form-item
- v-show="formInline.type == 2"
- :label="$t('dataManage.layerObj.displayOrNot')"
- >
- <el-radio
- v-model="formInline.isShow"
- label="0"
- > {{$t('dataManage.layerObj.isfalse')}}</el-radio>
- <el-radio
- v-model="formInline.isShow"
- label="1"
- >{{$t('dataManage.layerObj.istrue')}}</el-radio>
+ <el-form-item v-show="formInline.type == 2" :label="$t('dataManage.layerObj.displayOrNot')">
+ <el-radio v-model="formInline.isShow" label="0"> {{ $t('dataManage.layerObj.isfalse') }}</el-radio>
+ <el-radio v-model="formInline.isShow" label="1">{{ $t('dataManage.layerObj.istrue') }}</el-radio>
</el-form-item>
<!-- 鏄惁涓洪」鐩暟鎹� -->
- <el-form-item
- v-show="formInline.type == 2"
- :label="$t('dataManage.layerObj.isItProjectData')"
- >
- <el-radio
- v-model="formInline.isProject"
- label="0"
- > {{$t('dataManage.layerObj.isfalse')}}</el-radio>
- <el-radio
- v-model="formInline.isProject"
- label="1"
- >{{$t('dataManage.layerObj.istrue')}}</el-radio>
- </el-form-item>
+ <!-- <el-form-item v-show="formInline.type == 2" :label="$t('dataManage.layerObj.isItProjectData')">
+ <el-radio v-model="formInline.isProject" label="0"> {{ $t('dataManage.layerObj.isfalse') }}</el-radio>
+ <el-radio v-model="formInline.isProject" label="1">{{ $t('dataManage.layerObj.istrue') }}</el-radio>
+ </el-form-item> -->
<!-- 鎻忚堪 -->
<el-form-item :label="$t('common.bak')">
- <el-input
- style="width: 60%;"
- v-model="formInline.bak"
- :placeholder="$t('dataManage.layerObj.prompt7')"
- ></el-input>
+ <el-input style="width: 60%;" v-model="formInline.bak"
+ :placeholder="$t('dataManage.layerObj.prompt7')"></el-input>
</el-form-item>
<el-form-item v-show="menuStatus.update">
- <el-button
- type="primary"
- size="small"
- @click="updateSend()"
- >{{$t('common.confirm')}}</el-button>
- <el-button
- type="info"
- size="small"
- @click="updateRest()"
- >{{$t('common.reset')}}</el-button>
+ <el-button type="primary" size="small" @click="updateSend()">{{ $t('common.confirm') }}</el-button>
+ <el-button type="info" size="small" @click="updateRest()">{{ $t('common.reset') }}</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
- <el-dialog
- :title="$t('common.append')"
- :visible.sync="dialogVisible"
- width="50%"
- >
+ <el-dialog :title="$t('common.append')" :visible.sync="dialogVisible" width="50%">
<div style="width: 100%;max-height: 63vh;overflow-y: auto; ">
- <el-form
- :model="insertData"
- class="demo-form-inline"
- label-width="150px"
- >
+ <el-form :model="insertData" class="demo-form-inline" label-width="150px">
<!-- 鑿滃崟鍚嶇О -->
<el-form-item :label="$t('dataManage.layerObj.layerName')">
- <el-input
- style="width: 80%;"
- v-model="insertData.cnName"
- :placeholder="$t('dataManage.layerObj.prompt1')"
- ></el-input>
+ <el-input style="width: 80%;" v-model="insertData.cnName"
+ :placeholder="$t('dataManage.layerObj.prompt1')"></el-input>
</el-form-item>
<!-- 鑿滃崟绫诲瀷 -->
<el-form-item :label="$t('dataManage.layerObj.layerType')">
- <el-select
- clearable
- style="width: 80%;"
- v-model="insertData.type"
- :placeholder="$t('dataManage.layerObj.prompt2')"
- >
- <el-option
- label="鐩綍"
- value='1'
- ></el-option>
- <el-option
- label="鍥惧眰"
- value='2'
- ></el-option>
+ <el-select clearable style="width: 80%;" v-model="insertData.type"
+ :placeholder="$t('dataManage.layerObj.prompt2')">
+ <el-option label="鐩綍" value='1'></el-option>
+ <el-option label="鍥惧眰" value='2'></el-option>
</el-select>
</el-form-item>
<!-- 鏈嶅姟绫诲瀷 -->
- <el-form-item
- v-show="insertData.type == 2"
- :label="$t('dataManage.layerObj.serviceType')"
- >
- <el-select
- clearable
- style="width: 80%;"
- v-model="insertData.serveType"
- :placeholder="$t('dataManage.layerObj.prompt3')"
- >
- <el-option
- v-for="item in serveType"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
+ <el-form-item v-show="insertData.type == 2" :label="$t('dataManage.layerObj.serviceType')">
+ <el-select clearable style="width: 80%;" v-model="insertData.serveType"
+ :placeholder="$t('dataManage.layerObj.prompt3')">
+ <el-option v-for="item in serveType" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<!-- 鏈嶅姟鍦板潃 -->
- <el-form-item
- v-show="insertData.type == 2"
- :label="$t('dataManage.layerObj.serviceAddress')"
- >
- <el-input
- :placeholder="$t('dataManage.layerObj.prompt4')"
- style="width: 80%;"
- v-model="insertData.url"
- ></el-input>
+ <el-form-item v-show="insertData.type == 2" :label="$t('dataManage.layerObj.serviceAddress')">
+ <el-input :placeholder="$t('dataManage.layerObj.prompt4')" style="width: 80%;"
+ v-model="insertData.url"></el-input>
</el-form-item>
<!-- 鑻辨枃琛ㄥ悕 -->
- <el-form-item
- v-show="insertData.type == 2 && insertData.serveType =='WMS'"
- :label="$t('dataManage.layerObj.enTableName')"
- >
- <el-input
- :placeholder="$t('dataManage.layerObj.prompt6')"
- style="width: 80%;"
- v-model="insertData.enName"
- ></el-input>
- </el-form-item>
+ <!-- <el-form-item v-show="insertData.type == 2 && insertData.serveType == 'WMS'"
+ :label="$t('dataManage.layerObj.enTableName')">
+ <el-input :placeholder="$t('dataManage.layerObj.prompt6')" style="width: 80%;"
+ v-model="insertData.enName"></el-input>
+ </el-form-item> -->
<!-- 鏁版嵁绫诲瀷 -->
<el-form-item :label="$t('dataManage.layerObj.dataType')">
- <el-select
- clearable
- style="width: 80%;"
- v-model="insertData.dataType"
- :placeholder="$t('dataManage.layerObj.prompt8')"
- >
- <el-option
- v-for="item in dataType"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
+ <el-select clearable style="width: 80%;" v-model="insertData.dataType"
+ :placeholder="$t('dataManage.layerObj.prompt8')">
+ <el-option v-for="item in dataType" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<!-- 鏄惁鏄剧ず -->
- <el-form-item
- v-show="insertData.type == 2"
- :label="$t('dataManage.layerObj.displayOrNot')"
- >
- <el-radio
- v-model="insertData.isShow"
- label="0"
- > {{$t('dataManage.layerObj.isfalse')}}</el-radio>
- <el-radio
- v-model="insertData.isShow"
- label="1"
- >{{$t('dataManage.layerObj.istrue')}}</el-radio>
+ <el-form-item v-show="insertData.type == 2" :label="$t('dataManage.layerObj.displayOrNot')">
+ <el-radio v-model="insertData.isShow" label="0"> {{ $t('dataManage.layerObj.isfalse') }}</el-radio>
+ <el-radio v-model="insertData.isShow" label="1">{{ $t('dataManage.layerObj.istrue') }}</el-radio>
</el-form-item>
<!-- 鏄惁涓洪」鐩暟鎹� -->
- <el-form-item
- v-show="insertData.type == 2"
- :label="$t('dataManage.layerObj.isItProjectData')"
- >
- <el-radio
- v-model="insertData.isProject"
- label="0"
- > {{$t('dataManage.layerObj.isfalse')}}</el-radio>
- <el-radio
- v-model="insertData.isProject"
- label="1"
- >{{$t('dataManage.layerObj.istrue')}}</el-radio>
- </el-form-item>
+ <!-- <el-form-item v-show="insertData.type == 2" :label="$t('dataManage.layerObj.isItProjectData')">
+ <el-radio v-model="insertData.isProject" label="0"> {{ $t('dataManage.layerObj.isfalse') }}</el-radio>
+ <el-radio v-model="insertData.isProject" label="1">{{ $t('dataManage.layerObj.istrue') }}</el-radio>
+ </el-form-item> -->
<!-- 鎻忚堪 -->
<el-form-item :label="$t('common.bak')">
- <el-input
- :placeholder="$t('dataManage.layerObj.prompt7')"
- style="width: 80%;"
- v-model="insertData.bak"
-
- ></el-input>
+ <el-input :placeholder="$t('dataManage.layerObj.prompt7')" style="width: 80%;"
+ v-model="insertData.bak"></el-input>
</el-form-item>
<el-form-item v-show="menuStatus.update">
- <el-button
- type="primary"
- size="small"
- @click="submitForm( )"
- >{{$t('common.confirm')}}</el-button>
- <el-button
- type="info"
- size="small"
- >{{$t('common.cancel')}}</el-button>
+ <el-button type="primary" size="small" @click="submitForm()">{{ $t('common.confirm') }}</el-button>
+ <el-button type="info" size="small">{{ $t('common.cancel') }}</el-button>
</el-form-item>
</el-form>
@@ -575,23 +376,34 @@
this.insertStart();
},
insertLayerData(res) {
+ debugger
+ console.log(this.formInline)
this.insertStart();
var node = this.$refs.tree.getCurrentNode();
this.newNode = node;
var id, lever, orderNum;
- if (res == 1) {
- //鏂板鍚岀骇
- id = this.formInline.pid;
- let pchildNodes = this.$refs.tree.getNode(this.newNode.id).parent.childNodes
- orderNum = this.getMaxOrderNum(pchildNodes);
- lever = this.formInline.level;
- } else if (res == 2) {
- //鏂板瀛愮骇
- id = this.formInline.id;
- let pchildNodes = this.$refs.tree.getNode(this.newNode.id).childNodes
- orderNum = this.getMaxOrderNum(pchildNodes);
- lever = this.formInline.level + 1;
+
+ if (this.treeData.length > 0) {
+ if (res == 1) {
+ //鏂板鍚岀骇
+ id = this.formInline.pid;
+ let pchildNodes = this.$refs.tree.getNode(this.newNode.id).parent.childNodes
+ orderNum = this.getMaxOrderNum(pchildNodes);
+ lever = this.formInline.level;
+ } else if (res == 2) {
+ //鏂板瀛愮骇
+ id = this.formInline.id;
+ let pchildNodes = this.$refs.tree.getNode(this.newNode.id).childNodes
+ orderNum = this.getMaxOrderNum(pchildNodes);
+ lever = this.formInline.level + 1;
+ }
+ } else {
+ id = 0;
+ orderNum = 1;
+ lever = 1;
}
+
+
this.insertData.pid = id;
this.insertData.level = lever;
this.insertData.orderNum = orderNum;
@@ -652,16 +464,22 @@
this.newData = data.result;
var val = this.setTreeData(data.result);
this.treeData = val;
+ console.log("this.treeData", this.treeData)
+ debugger
var cdata;
if (this.currentData) {
cdata = JSON.parse(this.currentData);
} else {
cdata = this.treeData[0]
}
+
this.$nextTick(() => {
- this.expandData = [cdata.id];
- this.$refs.tree.setCurrentKey(cdata.id);
- this.layerFormInline(cdata)
+ if (cdata) {
+ this.expandData = [cdata.id];
+ this.$refs.tree.setCurrentKey(cdata.id);
+ this.layerFormInline(cdata)
+ }
+
});
},
layerFormInline(res) {
@@ -794,6 +612,7 @@
height: calc(100% - 75px);
display: flex;
justify-content: space-around;
+
.leftTree {
width: calc(28% - 0px);
height: 100%;
@@ -802,6 +621,7 @@
box-sizing: border-box;
overflow-y: auto;
}
+
.right {
width: 68%;
height: 100%;
@@ -809,6 +629,7 @@
padding: 10px;
box-sizing: border-box;
border: 1px solid #dcdfe6;
+
.menuTop {
/deep/ .el-form-item {
margin: 5px;
@@ -816,9 +637,10 @@
}
}
}
+
/deep/ .el-input__suffix {
- top: 50%;
- transform: translateY(-50%);
+ top: 50%;
+ transform: translateY(-50%);
}
</style>
--
Gitblit v1.9.3