From 6b22256b992b5ff1897c8756993e31f4e359280a Mon Sep 17 00:00:00 2001 From: chenhaojie Date: Fri, 22 Mar 2024 11:42:41 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8B=93=E5=B1=95=E5=9B=BE=E5=B1=82?= =?UTF-8?q?=E8=B5=84=E6=BA=90=E9=85=8D=E7=BD=AE=E7=9A=84=E6=89=A9=E5=B1=95?= =?UTF-8?q?=E5=AD=97=E6=AE=B5=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../layerManage/resource/LayerDetails.vue | 304 +++++++++++++----- 1 file changed, 224 insertions(+), 80 deletions(-) diff --git a/src/views/aiSupervision/layerManage/resource/LayerDetails.vue b/src/views/aiSupervision/layerManage/resource/LayerDetails.vue index d5f7fdb..72c2ceb 100644 --- a/src/views/aiSupervision/layerManage/resource/LayerDetails.vue +++ b/src/views/aiSupervision/layerManage/resource/LayerDetails.vue @@ -19,70 +19,134 @@
添加图层 - - - - - - + + + + + + + + - - - - - - - - - - - - - -
- + + + + + + + + + - {{ editDataInfoForm.relationStyleName ? editDataInfoForm.relationStyleName : '点击选择样式' }} - - 取消选择样式 + + +
+ + {{ editDataInfoForm.relationStyleName ? editDataInfoForm.relationStyleName : '点击选择样式' }} + + 取消选择样式 +
+ + + + + +
+ 添加 + 删除
- - - + + + + + + + + + + + + + + + + +
取 消 @@ -188,9 +252,32 @@ export default { }, dialogFormVisible: false, //是否显示对话框 keyword: '', - styleDialogVisible: false //是否显示样式选择对话框 + styleDialogVisible: false, //是否显示样式选择对话框 + activeName: '1', + extendTable: [], + multipleSelection: [] }; }, + watch: { + keyword() { + this.debouncedGetLayerList(); + }, + dialogFormVisible(val) { + if (val === false) { + this.initData(); + } + } + }, + created() { + // 使用 lodash 的 debounce 函数创建防抖版本 + this.debouncedGetLayerList = debounce(this.getLayerList, 500); + + getDirectoryByIdApi(this.$route.query.id).then((res) => { + this.directoryInfo = res.data.children[0]; + this.initData(); + this.getLayerList(); + }); + }, methods: { goBack() { this.$router.go(-1); @@ -204,6 +291,7 @@ export default { this.editDataInfoForm.serviceIndex = row.serviceIndex; this.editDataInfoForm.relationStyleId = row.relationStyleId; this.editDataInfoForm.relationStyleName = row.relationStyleName; + this.extendTable = (row.extendData && JSON.parse(row.extendData)) || []; this.dialogTitle = '编辑图层'; this.dialogFormVisible = true; }, @@ -259,7 +347,11 @@ export default { }); return; } - await saveOrUpdateLayerApi(this.editDataInfoForm); + const params = { + ...this.editDataInfoForm, + extendData: JSON.stringify(this.extendTable) + }; + await saveOrUpdateLayerApi(params); this.getLayerList(); this.dialogFormVisible = false; }, @@ -284,26 +376,73 @@ export default { this.editDataInfoForm.dirNames = this.directoryInfo.name; this.editDataInfoForm.tileSize = '256'; this.dialogTitle = '添加图层'; - } - }, - created() { - // 使用 lodash 的 debounce 函数创建防抖版本 - this.debouncedGetLayerList = debounce(this.getLayerList, 500); - - getDirectoryByIdApi(this.$route.query.id).then((res) => { - this.directoryInfo = res.data.children[0]; - this.initData(); - this.getLayerList(); - }); - }, - watch: { - keyword() { - this.debouncedGetLayerList(); }, - dialogFormVisible(val) { - if (val === false) { - this.initData(); + addRow() { + const editRow = this.extendTable.find((item) => item.isEdit); + if (editRow) { + this.$message({ + type: 'info', + message: '请先保存当前编辑行' + }); + return; + } + this.extendTable.push({ + id: '', + field: '', + alias: '', + value: '', + isEdit: true + }); + }, + deleteRow(index) { + this.$messageBox + .confirm('是否删除该行数据?', '提示', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning' + }) + .then(() => { + if (index !== undefined) { + this.extendTable.splice(index, 1); + } else { + this.extendTable = this.extendTable.filter((item) => !this.multipleSelection.includes(item)); + } + }) + .catch(() => { + this.$message({ + type: 'info', + message: '已取消删除' + }); + }); + }, + editRow(index) { + this.extendTable[index].isEdit = true; + }, + cancelRow(index) { + if (!this.extendTable[index].id) { + this.extendTable.splice(index, 1); + } else { + this.extendTable[index].isEdit = false; + } + }, + saveRow(index) { + if (!this.extendTable[index].id) { + this.extendTable[index].id = sycim.Cesium.createGuid(); } + // 表格名字校验不重复 + const name = this.extendTable[index].field; + const isRepeat = this.extendTable.some((item, i) => item.field === name && i !== index); + if (isRepeat) { + this.$message({ + type: 'info', + message: '字段名称重复，请重新输入' + }); + return; + } + this.extendTable[index].isEdit = false; + }, + handleSelectionChange(val) { + this.multipleSelection = val; } } }; @@ -402,4 +541,9 @@ header { } } } +.el-dialog { + .fn-btns { + margin-bottom: 10px; + } +}