From ef45a5e068d1a31a6f23e74d0c3105af91e15a83 Mon Sep 17 00:00:00 2001 From: Surpriseplus <845948745@qq.com> Date: 星期四, 17 八月 2023 15:15:22 +0800 Subject: [PATCH] 图层管理,资源管理页面修改 --- src/views/datamanage/layerManagement.vue | 603 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 546 insertions(+), 57 deletions(-) diff --git a/src/views/datamanage/layerManagement.vue b/src/views/datamanage/layerManagement.vue index 35d78a8..e075579 100644 --- a/src/views/datamanage/layerManagement.vue +++ b/src/views/datamanage/layerManagement.vue @@ -105,22 +105,7 @@ 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-form-item> - <!-- 鑻辨枃鍚嶇О --> - <el-form-item :label="$t('dataManage.layerObj.englishName')"> - <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.layerType')"> <el-select @@ -138,6 +123,76 @@ ></el-option> </el-select> </el-form-item> + <!-- 鏈嶅姟璧勬簮--> + <el-form-item + v-show="formInline.isLayer == 1" + :label="$t('dataManage.layerObj.serviceResources')" + > + <el-button + size="small" + class="serviceButton" + @click="setServiceChange('0')" + key="0" + :class="{serviceActive: !serviceActive }" + >{{$t('dataManage.layerObj.isfalse')}}</el-button> + <el-button + size="small" + class="serviceButton" + @click="setServiceChange('1')" + key="1" + :class="{serviceActive: serviceActive}" + >{{$t('dataManage.layerObj.istrue')}}</el-button> + + </el-form-item> + <!-- 鑿滃崟鍚嶇О --> + <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-form-item> + <!-- 璧勬簮绫诲埆 --> + <el-form-item + v-show="formInline.isLayer == 1" + :label="$t('dataManage.layerObj.firm')" + > + <el-select + style="width: 60%;" + v-model="formInline.category" + :disabled="serviceActive" + :placeholder="$t('dataManage.layerObj.prompt3')" + > + <el-option + v-for="item in serviceType" + :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="$t('dataManage.layerObj.dataType')" + > + <el-select + style="width: 60%;" + v-model="formInline.data" + :placeholder="$t('dataManage.layerObj.prompt3')" + :disabled="serviceActive" + @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" @@ -147,6 +202,7 @@ style="width: 60%;" v-model="formInline.type" :placeholder="$t('dataManage.layerObj.prompt3')" + :disabled="serviceActive" > <el-option v-for="item in dataType" @@ -157,6 +213,7 @@ </el-option> </el-select> </el-form-item> + <!-- 鏈嶅姟鍦板潃 --> <el-form-item v-show="formInline.isLayer == 1" @@ -165,21 +222,22 @@ <el-input :placeholder="$t('dataManage.layerObj.prompt4')" style="width: 60%;" - v-model="formInline.url" + v-model="formInline.serviceUrl" + :disabled="serviceActive" ></el-input> </el-form-item> - <!-- 鑻辨枃琛ㄥ悕 --> - <!-- <el-form-item - v-show="formInline.isLayer == 1 && formInline.type =='WMS'" - :label="$t('dataManage.layerObj.enTableName')" + <!-- 鑻辨枃鍚嶇О --> + <el-form-item + v-show="formInline.isLayer == 1 && formInline.category == 2" + :label="$t('dataManage.layerObj.englishName')" > <el-input + :disabled="serviceActive" :placeholder="$t('dataManage.layerObj.prompt6')" style="width: 60%;" - v-model="formInline.enName" + v-model="formInline.tab" ></el-input> - </el-form-item> --> - + </el-form-item> <!-- 鏄惁鏄剧ず --> <el-form-item v-show="formInline.isLayer == 1" @@ -236,22 +294,6 @@ 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="insertData.cnName" - ></el-input> - </el-form-item> - <!-- 鑻辨枃鍚嶇О --> - <el-form-item :label="$t('dataManage.layerObj.englishName')"> - <el-input - :placeholder="$t('dataManage.layerObj.prompt6')" - style="width: 60%;" - v-model="insertData.enName" - ></el-input> - </el-form-item> <!-- 鑿滃崟绫诲瀷 --> <el-form-item :label="$t('dataManage.layerObj.layerType')"> <el-select @@ -269,12 +311,94 @@ ></el-option> </el-select> </el-form-item> + <el-form-item + v-show="insertData.isLayer == 1" + :label="$t('dataManage.layerObj.serviceResources')" + > + <!-- <el-button + size="small" + class="serviceButton" + @click="setServiceChange('0')" + :class="{serviceActive: insertData.service === '0'}" + >{{$t('dataManage.layerObj.isfalse')}}</el-button> + <el-button + size="small" + class="serviceButton" + @click="setServiceChange('1')" + :class="{serviceActive: insertData.service === '1'}" + >{{$t('dataManage.layerObj.istrue')}}</el-button> --> + <el-button + size="small" + class="serviceButton" + @click="setInsertServiceChange('0')" + key="0" + :class="{serviceActive: !insertServiceActive }" + >{{$t('dataManage.layerObj.isfalse')}}</el-button> + <el-button + size="small" + class="serviceButton" + @click="setInsertServiceChange('1')" + key="1" + :class="{serviceActive: insertServiceActive}" + >{{$t('dataManage.layerObj.istrue')}}</el-button> + + </el-form-item> + <!-- 鑿滃崟鍚嶇О --> + <el-form-item :label="$t('dataManage.layerObj.layerName')"> + <el-input + :placeholder="$t('dataManage.layerObj.prompt1')" + style="width: 60%;" + v-model="insertData.cnName" + ></el-input> + </el-form-item> + <!-- 璧勬簮绫诲埆 --> + <el-form-item + v-show="insertData.isLayer == 1" + :label="$t('dataManage.layerObj.firm')" + > + <el-select + style="width: 60%;" + v-model="insertData.category" + :disabled="insertServiceActive" + :placeholder="$t('dataManage.layerObj.prompt3')" + > + <el-option + v-for="item in serviceType" + :key="item.value" + :label="item.label" + :value="item.value" + > + </el-option> + </el-select> + </el-form-item> <!-- 鏁版嵁绫诲瀷 --> + <el-form-item + v-show="insertData.isLayer == 1" + :label="$t('dataManage.layerObj.dataType')" + > + <el-select + style="width: 60%;" + v-model="insertData.data" + :placeholder="$t('dataManage.layerObj.prompt3')" + :disabled="insertServiceActive" + @change="setInsertDataTypeClick" + > + <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.isLayer == 1" :label="$t('dataManage.layerObj.serviceType')" > <el-select + :disabled="insertServiceActive" style="width: 60%;" v-model="insertData.type" :placeholder="$t('dataManage.layerObj.prompt3')" @@ -294,26 +418,29 @@ :label="$t('dataManage.layerObj.serviceAddress')" > <el-input + :disabled="insertServiceActive" :placeholder="$t('dataManage.layerObj.prompt4')" style="width: 60%;" - v-model="insertData.url" + v-model="insertData.serviceUrl" ></el-input> </el-form-item> - <!-- 鑻辨枃琛ㄥ悕 --> - <!-- <el-form-item :label="$t('dataManage.layerObj.enTableName')"> + <!-- 鑻辨枃鍚嶇О --> + <el-form-item + v-show="insertData.isLayer == 1 && insertData.category == 2" + :label="$t('dataManage.layerObj.englishName')" + > <el-input + :disabled="insertServiceActive" :placeholder="$t('dataManage.layerObj.prompt6')" style="width: 60%;" - v-model="insertData.enName" + v-model="insertData.tab" ></el-input> - </el-form-item> --> - + </el-form-item> <!-- 鏄惁鏄剧ず --> <el-form-item v-show="insertData.isLayer == 1" :label="$t('dataManage.layerObj.displayOrNot')" > - <el-radio v-model="insertData.status" label="0" @@ -336,15 +463,104 @@ <el-button type="primary" size="small" - @click="submitForm( )" + @click="submitForm()" >{{$t('common.confirm')}}</el-button> <el-button type="info" size="small" + @click="submitCancel()" >{{$t('common.cancel')}}</el-button> </el-form-item> </el-form> + </div> + </el-dialog> + <el-dialog + :visible.sync="dialogService" + width="50%" + :show-close="false" + > + <div style="width: 100%;max-height: 63vh;overflow-y: auto; "> + <div style=" display: flex; justify-content: space-between;"> + <div> <el-input + size="small" + v-model="listData.name" + > <i + slot="suffix" + class="el-input__icon el-icon-search" + @click="setServiceQuery" + ></i></el-input></div> + <div> + <el-button + type="info" + size="small" + @click="setServiceRest" + >{{$t('common.reset')}}</el-button> + + <el-button + type="primary" + size="small" + @click="setServiceConfirm" + >{{$t('common.confirm')}}</el-button> + <el-button + type="info" + size="small" + @click="setServiceCanel" + >{{$t('common.cancel')}}</el-button> + + </div> + </div> + <el-table + ref="multipleTable" + :data="tableData" + @select="selectChange" + > + <el-table-column + type="selection" + width="55" + > + </el-table-column> + <el-table-column + align="center" + type="index" + :label="$t('common.index')" + width="70px" + /> + <el-table-column + align="center" + prop="cnName" + :label="$t('dataManage.layerObj.resourceName')" + /> + + <el-table-column + align="center" + prop="category" + :label="$t('dataManage.layerObj.serviceType')" + :formatter="setResCategory" + /> + <el-table-column + align="center" + prop="type" + :label="$t('dataManage.layerObj.dataType')" + :formatter="setResType" + /> + </el-table> + <div + class="pagination_box" + style="margin-top: 15px" + > + <el-pagination + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + :current-page="listData.pageIndex" + :page-sizes="[10, 50,100,200]" + :page-size="listData.pageSize" + layout="total, sizes, prev, pager, next, jumper" + :total="listData.count" + > + </el-pagination> + </div> + </div> </el-dialog> </div> @@ -357,11 +573,12 @@ layer_update, layer_updates, layer_insert, - layer_delete + layer_delete, + res_selectByPageAndCount, } from "../../api/api"; import $ from 'jquery' import { getToken } from '../../utils/auth'; -import { serve_type, data_type } from './js/layerManage.js' +import { serve_type, data_type, category_type } from './js/layerManage.js' import { json } from "body-parser"; export default { @@ -370,7 +587,6 @@ MyBread, }, data() { - return { filterText: null, formInline: { @@ -386,6 +602,8 @@ isLayer: null, category: null, status: null, + service: '0', + serviceUrl: null }, serveType: null, dataType: null, @@ -403,11 +621,26 @@ checkData: null, backUpData: null, dialogVisible: false, - insertData: {}, + insertData: { + type: null, + data: null, + }, currentData: null, newNode: null, newData: [], oriData: [], + dialogService: false, + listData: { + pageIndex: 1, + pageSize: 10, + count: 0, + name: '' + }, + tableData: [], + multipleSelection: [], + serviceActive: true, + insertServiceActive: false, + serviceType: null }; }, watch: { @@ -416,6 +649,193 @@ }, }, methods: { + setFromDataTypeClick(res) { + this.setInsertDataTypeChange(res) + this.formInline.type = this.dataType[0].value + }, + setInsertDataTypeClick(res) { + this.setInsertDataTypeChange(res) + this.insertData.type = this.dataType[0].value + }, + setInsertDataTypeChange(res) { + var filter = this.serveType.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, + }) + } + } + } + this.dataType = std + }, + setServiceConfirm() { + if (this.multipleSelection.length <= 0) { + return this.$message("鏈�夋嫨璧勬簮鏁版嵁"); + } + var url, serviceUrl; + if (this.multipleSelection.status == 1) { + serviceUrl = this.multipleSelection.url; + url = this.multipleSelection.url; + } else if (this.multipleSelection.status == 2) { + var token = getToken() + if (this.multipleSelection.proxy && this.multipleSelection.proxy.indexOf('{token}') > -1) { + serviceUrl = BASE_URL + this.multipleSelection.proxy.replaceAll('{token}', token); + } else { + serviceUrl = this.multipleSelection.url + } + + url = this.multipleSelection.proxy; + } + if (this.dialogVisible) { + this.setInsertDataTypeChange(this.multipleSelection.data); + this.insertData.cnName = this.multipleSelection.cnName; + this.insertData.enName = this.multipleSelection.enName; + this.insertData.type = this.multipleSelection.type; + this.insertData.resid = this.multipleSelection.id + this.insertData.serviceUrl = serviceUrl; + this.insertData.url = url; + this.insertData.data = this.multipleSelection.data; + this.insertData.tab = this.multipleSelection.tab; + this.insertData.category = this.multipleSelection.category; + this.insertServiceActive = true + } else { + this.formInline.cnName = this.multipleSelection.cnName; + this.formInline.enName = this.multipleSelection.enName; + this.formInline.type = this.multipleSelection.type; + this.formInline.resid = this.multipleSelection.id + this.formInline.serviceUrl = serviceUrl; + this.formInline.data = this.multipleSelection.data; + this.formInline.tab = this.multipleSelection.tab; + this.formInline.category = this.multipleSelection.category; + this.formInline.url = url; + this.serviceActive = true + // this.formInline.status = '1'; + + } + this.dialogService = false + }, + + + setServiceRest() { + this.listData = { + pageIndex: 1, + pageSize: 10, + count: 0, + name: '' + } + this.getServiceData(); + }, + setServiceQuery() { + this.listData.pageIndex = 1; + this.listData.pageSize = 10; + this.listData.count = 0; + this.getServiceData(); + }, + setServiceCanel() { + this.dialogService = false; + this.multipleSelection = []; + this.tableData == []; + this.listData = { + pageIndex: 1, + pageSize: 10, + count: 0, + name: '' + } + }, + selectChange(selection, row) { + this.multipleSelection = row + if (selection.length > 1) { + let del_row = selection.shift() + this.$refs.multipleTable.toggleRowSelection(del_row, false) + } + }, + setResType(row, column) { + switch (row.type) { + case 0: + return "URL" + break; + case 1: + return "TMS" + break; + case 2: + return "WMTS" + break; + case 3: + return "WMS" + break; + case 4: + return "WFS" + break; + case 5: + return "Tileset" + break; + default: + return "" + break; + } + }, + setResCategory(row, column) { + switch (row.category) { + case 0: + return "鍏朵粬" + break; + case 1: + return "GisServer" + break; + case 2: + return "GeoServer" + break; + case 3: + return "鏁扮畝" + break; + default: + return "" + break; + } + }, + handleSizeChange(val) { + this.listData.pageSize = val; + this.getServiceData(); + }, + handleCurrentChange(val) { + this.listData.pageIndex = val; + this.getServiceData(); + }, + setServiceChange(res) { + if (res == '1') { + this.setServiceRest() + } else { + this.serviceActive = false + this.formInline.resid = 0 + } + }, + setInsertServiceChange(res) { + if (res == '1') { + this.setServiceRest() + } else { + this.insertServiceActive = false + this.insertData.resid = 0 + } + }, + async getServiceData() { + const data = await res_selectByPageAndCount(this.listData); + if (data.code != 200) { + return this.$message.error("璧勬簮鏁版嵁鑾峰彇澶辫触"); + } + this.tableData = data.result; + this.listData.count = data.count; + this.dialogService = true + }, //鍚戜笂鍚戜笅绉诲姩 setEditNode(res) { let node = this.$refs.tree.getCurrentNode(); @@ -516,10 +936,19 @@ this.getLayerTree(); }, + submitCancel() { + this.dialogVisible = false; + this.insertStart(); + }, async submitForm() { - var val = this.insertData; + var val = JSON.parse(JSON.stringify(this.insertData)); val.status = parseInt(val.status); - // val.isProject = parseInt(val.isProject); + var token = getToken(); + if (val.serviceUrl && val.serviceUrl.indexOf(BASE_URL) > -1) { + val.serviceUrl = val.serviceUrl.replaceAll(BASE_URL, ''); + val.serviceUrl = val.serviceUrl.replaceAll(token, '{token}') + } + val.url = val.serviceUrl const data = await layer_insert(val); if (data.code != 200) { return this.$message.error("鏂板澶辫触"); @@ -553,6 +982,7 @@ this.insertData.pid = id; this.insertData.level = lever; this.insertData.orderNum = orderNum; + this.dialogVisible = true; }, getMaxOrderNum(res) { @@ -566,6 +996,10 @@ return val; }, insertStart() { + var data = this.serveType[0].value; + this.setInsertDataTypeChange(this.serveType[0].value) + var type = this.dataType[0].value + var category = this.serviceType[0].value this.insertData = { cnName: null, type: null, @@ -577,13 +1011,23 @@ isProject: '0', enName: '', isLayer: null, - category: null, + category: category, status: null, + service: '0', + status: '1', + type: type, + data: data, } }, //淇敼鏁版嵁 async updateSend() { var val = JSON.parse(JSON.stringify(this.formInline)); + var token = getToken(); + if (val.serviceUrl && val.serviceUrl.indexOf(BASE_URL) > -1) { + val.serviceUrl = val.serviceUrl.replaceAll(BASE_URL, ''); + val.serviceUrl = val.serviceUrl.replaceAll(token, '{token}') + } + val.url = val.serviceUrl const data = await layer_update(val); this.currentData = JSON.stringify(this.formInline) if (data.code != 200) { @@ -613,6 +1057,10 @@ this.oriData = data.result; this.newData = data.result; var val = this.setTreeData(data.result); + val.sort(function (a, b) { + return a.orderNum - b.orderNum + }) + this.treeData = val; var cdata; if (this.currentData) { @@ -637,6 +1085,26 @@ this.formInline = result; this.formInline.isLayer = res.isLayer.toString(); this.formInline.status = result.status.toString(); + if (res.resid && res.resid > 0) { + this.serviceActive = true + } else { + this.serviceActive = false + } + debugger + var url; + if (!this.serviceActive) { + url = result.url; + } else if (this.serviceActive) { + var token = getToken() + if (result.url.indexOf('{token}') > -1) { + url = BASE_URL + result.url.replaceAll('{token}', token); + } else { + url = result.url; + } + + } + this.formInline.serviceUrl = url; + this.setInsertDataTypeChange(this.formInline.data) // this.formInline.isProject = result.isProject.toString(); }, //鍥惧眰鍒楄〃鐐瑰嚮浜嬩欢 @@ -655,7 +1123,6 @@ return a.orderNum - b.orderNum }) } - branchArr.length > 0 ? (father.children = branchArr) : ""; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊� // 灞炰簬鍚屼竴瀵硅薄闂锛屼緥濡傦細浠� a=b銆乧=1 锛岀劧鍚庡啀浠� b.c=c 锛� 閭d箞 a.c=b.c=c=1 锛涘悓鐞嗭紝鍚庣画浠� c.d=2 ,閭d箞 a.c.d 涔熸槸=2锛� // 鐢辨寰幆澶氭鍚庯紝灏辫兘褰㈡垚鐩稿簲鐨勬爲褰㈡暟鎹粨鏋� @@ -671,6 +1138,7 @@ optionsStart() { var std = []; var ste = []; + var str = []; for (var i in serve_type) { ste.push({ value: serve_type[i].value, @@ -682,9 +1150,20 @@ std.push({ value: data_type[i].value, label: data_type[i].name, + children: data_type[i].children }) } this.dataType = ste; + + for (var i in category_type) { + str.push({ + value: category_type[i].value, + label: category_type[i].name, + }) + } + this.serviceType = str; + + }, //鏁版嵁鍒濆鍖� formInlineStart() { @@ -699,7 +1178,8 @@ isProject: '0', enName: '', isLayer: null, - category: null + category: null, + serviceUrl: null } }, //鑾峰彇鏉冮檺 @@ -780,6 +1260,15 @@ } } } +.serviceButton { + background: transparent !important; + color: #dcdfe6; +} +.serviceActive { + background: transparent !important; + color: #46a6ff; + border: 1px solid #46a6ff; +} /deep/ .el-input__suffix { top: 50%; transform: translateY(-50%); -- Gitblit v1.9.3