From 42355ad48b7e33bbd288314f14191c4f2be44ae7 Mon Sep 17 00:00:00 2001
From: WX <1377869194@qq.com>
Date: 星期三, 16 八月 2023 18:05:53 +0800
Subject: [PATCH] 图层编辑功能调整
---
src/views/layer/layerSet.vue | 397 ++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 324 insertions(+), 73 deletions(-)
diff --git a/src/views/layer/layerSet.vue b/src/views/layer/layerSet.vue
index 3908cd2..4f453fc 100644
--- a/src/views/layer/layerSet.vue
+++ b/src/views/layer/layerSet.vue
@@ -20,51 +20,14 @@
@node-click="handleNodeClick"
ref="treeRef"
/>
-
- <!-- <div class="contentBox" v-for="(item, i) in menuOption" :key="i">
- <div
- class="contentTile"
- @click.stop="selectList(item)"
- :class="{ highlight: item.id == selectedNodeId }"
- >
- <div class="contentLeft">
- <div class="contentImg"></div>
- <div class="contentLabel">{{ item.name }}</div>
- </div>
- <div class="contentRight">
- <div>
- <div
- @click="handlIsShow(item.name)"
- class="contentUP"
- :class="{ accordion: item.isShow }"
- ></div>
- </div>
- </div>
- </div>
-
- <div class="content" v-show="item.isShow">
- <div
- class="layer_box"
- v-for="(v, k) in item.children"
- :key="k"
- @click.stop="selectList(v)"
- :class="{ highlight: v.id == selectedNodeId }"
- >
- <div class="contentLeft">
- <div class="contentImg"></div>
- <div class="contentLabel">{{ v.name }}</div>
- </div>
- </div>
- </div>
- </div> -->
</div>
</div>
<div class="edit_box">
<div class="edit_box_btn btnstyle">
- <el-button type="primary" :icon="Plus" @click="added('t')"
+ <el-button type="primary" :icon="Plus" @click="insertLayerData(1)"
>鏂板鍚岀骇</el-button
>
- <el-button type="primary" :icon="Plus" @click="added('z')"
+ <el-button type="primary" :icon="Plus" @click="insertLayerData(2)"
>鏂板瀛愮骇</el-button
>
<el-button
@@ -82,44 +45,168 @@
>
</div>
<div class="edit_box_form">
- <el-form :model="form" label-width="120px">
+ <el-form :model="formInline" label-width="120px">
<el-form-item label="閫変腑鍥惧眰">
+ <el-select style="width: 100%" v-model="formInline.isLayer">
+ <el-option label="鍥惧眰缁�" value="0"></el-option>
+ <el-option label="鍥惧眰" value="1"></el-option>
+ </el-select>
+ </el-form-item>
+ <!-- 鏈嶅姟璧勬簮-->
+ <el-form-item v-show="formInline.isLayer == 1" label="鏈嶅姟璧勬簮">
+ <el-button
+ size="small"
+ class="serviceButton"
+ @click="setServiceChange('0')"
+ key="0"
+ :class="{ serviceActive: !serviceActive }"
+ >鍚�</el-button
+ >
+ <el-button
+ size="small"
+ class="serviceButton"
+ @click="setServiceChange('1')"
+ key="1"
+ :class="{ serviceActive: serviceActive }"
+ >鏄�</el-button
+ >
+ </el-form-item>
+
+ <el-form-item label="鍥惧眰鍚嶇О">
<el-input
- v-model="form.selectName"
- disabled
- placeholder="鐐瑰嚮鍥惧眰鏍戦�夋嫨"
+ v-model="formInline.cnName"
+ placeholder="璇疯緭鍏ュ浘灞傚悕绉�"
/>
</el-form-item>
- <el-form-item label="鍥惧眰鍚嶇О">
- <el-input v-model="form.name" placeholder="璇疯緭鍏ュ浘灞傚悕绉�" />
- </el-form-item>
- <el-form-item label="鍥惧眰绫诲瀷">
+ <!-- 鏁版嵁绫诲瀷 -->
+ <el-form-item v-show="formInline.isLayer == 1" label="鏁版嵁绫诲瀷">
<el-select
style="width: 100%"
- v-model="form.region"
- placeholder="璇烽�夋嫨鍥惧眰绫诲瀷"
+ v-model="formInline.data"
+ :disabled="serviceActive"
+ @change="setFromDataTypeClick"
>
<el-option
- v-for="(e, i) in stretchOptions"
- :label="e.label"
- :value="e.value"
- :key="i"
- />
+ 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.isLayer == 1" label="鏈嶅姟绫诲瀷">
+ <el-select
+ style="width: 100%"
+ v-model="formInline.type"
+ :disabled="serviceActive"
+ >
+ <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 label="鏈嶅姟鍦板潃">
- <el-input v-model="form.layerUrl" placeholder="璇疯緭鍏ユ湇鍔″湴鍧�" />
+ <el-form-item label="鏈嶅姟鍦板潃" v-show="formInline.isLayer == 1">
+ <el-input
+ v-model="formInline.serviceUrl"
+ placeholder="璇疯緭鍏ユ湇鍔″湴鍧�"
+ :disabled="serviceActive"
+ />
</el-form-item>
<el-form-item>
- <!-- <div class="btnstyle editBtn">
+ <div class="btnstyle editBtn">
<el-button type="primary" @click="onSubmit">纭畾</el-button>
- <el-button class="delbtn">鍙栨秷</el-button>
- </div> -->
+ <el-button class="delbtn" @click="updateRest">鍙栨秷</el-button>
+ </div>
</el-form-item>
</el-form>
</div>
</div>
+ <el-dialog title="鏂板" v-model:visible="dialogVisible" width="50%">
+ <div style="width: 100%; max-height: 63vh; overflow-y: auto">
+ <el-form :model="formInline" label-width="120px">
+ <el-form-item label="閫変腑鍥惧眰">
+ <el-select style="width: 100%" v-model="formInline.isLayer">
+ <el-option label="鍥惧眰缁�" value="0"></el-option>
+ <el-option label="鍥惧眰" value="1"></el-option>
+ </el-select>
+ </el-form-item>
+ <!-- 鏈嶅姟璧勬簮-->
+ <el-form-item v-show="formInline.isLayer == 1" label="鏈嶅姟璧勬簮">
+ <el-button
+ size="small"
+ class="serviceButton"
+ @click="setServiceChange('0')"
+ key="0"
+ :class="{ serviceActive: !serviceActive }"
+ >鍚�</el-button
+ >
+ <el-button
+ size="small"
+ class="serviceButton"
+ @click="setServiceChange('1')"
+ key="1"
+ :class="{ serviceActive: serviceActive }"
+ >鏄�</el-button
+ >
+ </el-form-item>
+
+ <el-form-item label="鍥惧眰鍚嶇О">
+ <el-input
+ v-model="formInline.cnName"
+ placeholder="璇疯緭鍏ュ浘灞傚悕绉�"
+ />
+ </el-form-item>
+ <!-- 鏁版嵁绫诲瀷 -->
+ <el-form-item v-show="formInline.isLayer == 1" label="鏁版嵁绫诲瀷">
+ <el-select
+ style="width: 100%"
+ v-model="formInline.data"
+ @change="setFromDataTypeClick"
+ >
+ <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.isLayer == 1" label="鏈嶅姟绫诲瀷">
+ <el-select style="width: 100%" v-model="formInline.type">
+ <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 label="鏈嶅姟鍦板潃" v-show="formInline.isLayer == 1">
+ <el-input
+ v-model="formInline.serviceUrl"
+ placeholder="璇疯緭鍏ユ湇鍔″湴鍧�"
+ />
+ </el-form-item>
+ <el-form-item>
+ <div class="btnstyle editBtn">
+ <el-button type="primary" @click="onSubmit">纭畾</el-button>
+ <el-button class="delbtn" @click="updateRest">鍙栨秷</el-button>
+ </div>
+ </el-form-item>
+ </el-form>
+ </div>
+ </el-dialog>
</div>
</template>
@@ -134,6 +221,8 @@
} from "vue";
import { Plus, Delete, Top, Bottom } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
+import { serve_type, data_type } from "./js/layerManage.js";
+import { removeToken, getToken } from "@/utils/auth";
const stretchValue = ref("");
const emits = defineEmits(["SETstate", "addlayer", "delLayer"]);
//defineProps 鏉ユ帴鏀剁粍浠剁殑浼犲��
@@ -165,21 +254,134 @@
},
];
-const form = reactive({
- name: "",
- region: "",
- selectName: "",
- layerUrl: "",
- children: [],
+const formInline = ref({
+ cnName: null,
+ type: null,
+ serveType: null,
+ url: null,
+ dataType: null,
+ bak: null,
+ isShow: "1",
+ isProject: "0",
+ enName: "",
+ isLayer: null,
+ category: null,
+ status: null,
+ service: "0",
+ serviceUrl: null,
+});
+const insertData = ref({
+ cnName: null,
+ type: null,
+ serveType: null,
+ url: null,
+ dataType: null,
+ bak: null,
+ isShow: "1",
+ isProject: "0",
+ enName: "",
+ isLayer: null,
+ category: null,
+ status: null,
+ service: "0",
+ serviceUrl: null,
});
const props = {
label: "cnName",
children: "children",
};
+let dialogVisible = ref(false);
// 褰撳墠閫変腑鐨勮妭鐐� id
const selectedNodeId = ref(null as any); //鍋氱被鍨嬫柇瑷�澶勭悊
const selectedObj = ref(null);
let menuOption = ref([]);
+let serviceActive = ref(false);
+let dataType = ref(null);
+let serveType = ref(null);
+let backUpData = ref(null);
+const insertLayerData = (res) => {
+ // 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;
+ // }
+ // this.insertData.pid = id;
+ // this.insertData.level = lever;
+ // this.insertData.orderNum = orderNum;
+
+ dialogVisible.value = true;
+};
+//淇敼閲嶇疆
+const updateRest = () => {
+ var res = JSON.parse(backUpData.value);
+ formInline.value = res;
+ formInline.value.isLayer = res.isLayer.toString();
+
+ formInline.value.status = res.status.toString();
+ // this.formInline.isProject = res.isProject.toString();
+};
+//涓嬫媺鑿滃崟鍒濆鍖�
+const optionsStart = () => {
+ var std = [];
+ var ste = [];
+ for (var i in serve_type) {
+ ste.push({
+ value: serve_type[i].value,
+ label: serve_type[i].name,
+ });
+ }
+ serveType.value = std;
+ for (var i in data_type) {
+ std.push({
+ value: data_type[i].value,
+ label: data_type[i].name,
+ children: data_type[i].children,
+ });
+ }
+ dataType.value = ste;
+};
+const setInsertDataTypeChange = (res) => {
+ var filter = serveType.value.filter((rs) => {
+ if (rs.value == res) {
+ return rs;
+ }
+ });
+ if (filter.length <= 0) return;
+ var std = [];
+ var data = filter[0].children;
+ for (var i in data) {
+ for (var j in serve_type) {
+ if (serve_type[j].value == data[i]) {
+ std.push({
+ value: serve_type[j].value,
+ label: serve_type[j].name,
+ });
+ }
+ }
+ }
+ dataType.value = std;
+};
+const setFromDataTypeClick = (res) => {
+ setInsertDataTypeChange(res);
+ formInline.value.type = dataType.value[0].value;
+};
+const setServiceChange = (res) => {
+ if (res == "1") {
+ // this.setServiceRest()
+ } else {
+ serviceActive.value = false;
+ formInline.value.resid = 0;
+ }
+};
const handleCheckChange = (
data: Tree,
checked: boolean,
@@ -194,14 +396,35 @@
// 澶勭悊鑺傜偣鐐瑰嚮浜嬩欢
function handleNodeClick(data: any) {
console.log(data);
+ console.log(formInline.value);
if (data.id === selectedNodeId.value) {
// 濡傛灉褰撳墠鑺傜偣宸茬粡閫変腑锛屽垯鍙栨秷閫変腑
selectedNodeId.value = null;
} else {
// 鍚﹀垯閫変腑褰撳墠鑺傜偣
selectedNodeId.value = data.id;
- form.selectName = data.cnName;
selectedObj.value = data;
+ backUpData.value = JSON.stringify(data);
+ // this.currentData = JSON.stringify(result)
+ formInline.value = data;
+ formInline.value.isLayer = data.isLayer.toString();
+ if (data.resid && data.resid > 0) {
+ serviceActive.value = true;
+ } else {
+ serviceActive.value = false;
+ }
+ var url;
+ if (!serviceActive.value) {
+ url = data.url;
+ } else if (serviceActive.value) {
+ var token = getToken();
+ if (data.url.indexOf("{token}") > -1) {
+ url = BASE_URL + data.url.replaceAll("{token}", token);
+ } else {
+ url = data.url;
+ }
+ }
+ formInline.value.serviceUrl = url;
}
}
//鏂板
@@ -212,14 +435,17 @@
}
var addObj = {
id: id,
- cnName: form.name,
- region: form.region,
- layerUrl: form.layerUrl,
+ cnName: formInline.value.name,
+ region: formInline.value.region,
+ url: formInline.value.layerUrl,
children: [],
- type: 2,
- parentId: null,
+ type: 2, //鏁版嵁绫诲瀷
+ proxy: null,
+ data: 0,
+ tab: "", //Geoserver 鍚嶇О锛�
+ category: "", //鏈嶅姟绫诲埆 Geoserver ,
};
- if (form.region == "鐩綍") {
+ if (formInline.value.region == "鐩綍") {
addObj.type = 1;
}
@@ -288,6 +514,7 @@
}
emits("addlayer", { type: type, id: selectedObj.value.id });
};
+optionsStart();
</script>
<style lang="less" scoped>
@@ -343,7 +570,8 @@
width: 359px;
height: 615px;
background: rgba(7, 8, 14, 0.8);
-
+ // padding-bottom: 60px;
+ box-sizing: border-box;
.layerTitle {
width: calc(100% - 27px);
height: 42px;
@@ -378,6 +606,19 @@
}
.layerContent {
padding: 0 8px;
+ height: 92%;
+ overflow: auto;
+ }
+ .layerContent::-webkit-scrollbar {
+ width: 8px;
+ }
+ .layerContent::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ background: rgba(0, 0, 0, 0.2);
+ }
+ .layerContent::-webkit-scrollbar-track {
+ border-radius: 0;
+ background: rgba(0, 0, 0, 0);
}
.contentBox {
margin-top: 3px;
@@ -473,6 +714,7 @@
}
}
}
+
.editBtn {
width: 100%;
display: flex;
@@ -518,4 +760,13 @@
.highlight {
background: rgba(104, 156, 255, 0.5) !important;
}
+.serviceButton {
+ background: transparent !important;
+ color: #dcdfe6;
+}
+.serviceActive {
+ background: transparent !important;
+ color: #46a6ff;
+ border: 1px solid #46a6ff;
+}
</style>
--
Gitblit v1.9.3