From 3f93bcdd900f39414564595365dcd77d1c954752 Mon Sep 17 00:00:00 2001 From: air <30444667+sszdot@users.noreply.github.com> Date: Tue, 23 Sep 2025 13:34:38 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90=E7=B1=BB=20=20=E5=9E=8B=E3=80=91?= =?UTF-8?q?=EF=BC=9Afactor=20=E3=80=90=E5=8E=9F=20=20=E5=9B=A0=E3=80=91?= =?UTF-8?q?=EF=BC=9A=E5=AE=8C=E5=96=84=E5=9C=B0=E5=9B=BE=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=20=E7=BC=96=E8=BE=91=E5=8A=9F=E8=83=BD=20=E3=80=90=E8=BF=87=20?= =?UTF-8?q?=20=E7=A8=8B=E3=80=91=EF=BC=9A=20=E3=80=90=E5=BD=B1=20=20?= =?UTF-8?q?=E5=93=8D=E3=80=91=EF=BC=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/store/index.js | 10 +- .../layout/components/main/mapstyle/add.vue | 160 ++++++++---------- .../layout/components/main/mapstyle/index.vue | 10 +- 3 files changed, 85 insertions(+), 95 deletions(-) diff --git a/src/store/index.js b/src/store/index.js index 89cd1b1..9fe1eba 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1214,24 +1214,24 @@ const store = new Vuex.Store({ const host = rootState.settings.host const list = res.data.mapStyleList.map(style => { const tiles = Array.isArray(style.tiles) ? style.tiles : JSON.parse(style.tiles) - const sourceKey = style.source_key || 'default' + const sourceKey = 'default' + const spriteUrl = style.sprite && String(style.sprite).trim() ? style.sprite : `${host}/Public/map/sprite` return { // 附带原始字段，便于管理端展示和操作 id: style.id, is_active: Number(style.is_active ?? 1), sort_order: Number(style.sort_order ?? 0), - source_key: sourceKey, name: style.name, - sprite: `${host}/Public/map/sprite`, + sprite: spriteUrl, glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf', version: 8, sources: { [sourceKey]: { type: 'raster', - tileSize: Number(style.tileSize || 256), + tileSize: 256, tiles, - attribution: style.attribution || '' + attribution: '' } }, layers: [{ diff --git a/src/views/layout/components/main/mapstyle/add.vue b/src/views/layout/components/main/mapstyle/add.vue index d9289d8..93b5577 100644 --- a/src/views/layout/components/main/mapstyle/add.vue +++ b/src/views/layout/components/main/mapstyle/add.vue @@ -21,7 +21,8 @@ - + + @@ -38,23 +39,12 @@ - + - - - - - - - - - - - - + - - - - - -
- - 图层配置 - -
- - - - - - - - - - - - - - - + @@ -116,16 +82,9 @@ export default { id: null, name: '', sprite: '', - glyphs: '', + glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf', version: 8, - source_name: '', - source_type: 'raster', - tile_size: 256, tiles: [], // 存数组，表单用 tilesInput 辅助 - attribution: '', - layer_id: '', - layer_type: 'raster', - layer_source: '', is_active: 1, sort_order: 0 }, @@ -133,23 +92,23 @@ export default { pageState: 'add', mapStyleId: this.$route.params.id, rules: { - name: [{ required: true, message: '请输入样式名称', trigger: 'blur' }], - version: [{ type: 'number', required: true, message: '请输入版本', trigger: 'change' }], - source_name: [{ required: true, message: '请输入 source 名称', trigger: 'blur' }], - source_type: [{ required: true, message: '请选择 source 类型', trigger: 'change' }], - tile_size: [{ type: 'number', required: true, message: '请输入瓦片大小', trigger: 'change' }], - layer_id: [{ required: true, message: '请输入图层ID', trigger: 'blur' }], - layer_type: [{ required: true, message: '请选择图层类型', trigger: 'change' }], - layer_source: [{ required: true, message: '请输入图层source', trigger: 'blur' }] + name: [{ required: true, message: '请输入样式名称', trigger: 'blur' }] } } }, - created () { + async created () { // 初始化页面状态与预填充 if (this.mapStyleId != null) { this.pageState = 'edit' this.form.id = this.mapStyleId - const item = (this.$store.state.mapStyleList || []).find(i => String(i.id) === String(this.mapStyleId)) + let item = (this.$store.state.mapStyleList || []).find(i => String(i.id) === String(this.mapStyleId)) + if (!item) { + // 尝试拉取一次列表后再匹配（兼容刷新后store丢失） + try { + await this.$store.dispatch('fetchMapStyleList', this.$store.state.settings.host) + item = (this.$store.state.mapStyleList || []).find(i => String(i.id) === String(this.mapStyleId)) + } catch (e) {} + } if (item) { this.fillFormFromItem(item) } else { @@ -172,24 +131,23 @@ export default { }, fillFormFromItem (item) { this.form.name = item.name || '' - this.form.sprite = item.sprite || '' - this.form.glyphs = item.glyphs || '' - this.form.version = Number(item.version ?? 8) - this.form.source_name = item.source_name || '' - this.form.source_type = item.source_type || 'raster' - this.form.tile_size = Number(item.tile_size ?? 256) + // 如果包含默认路径，设置为空字符串 + this.form.sprite = (item.sprite && item.sprite.includes('/Public/map/sprite')) ? '' : (item.sprite || '') + this.form.glyphs = item.glyphs || 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf' + this.form.version = 8 // tiles 兼容字符串JSON或数组 let tiles = [] - if (Array.isArray(item.tiles)) tiles = item.tiles - else if (typeof item.tiles === 'string') { - try { tiles = JSON.parse(item.tiles) } catch (e) { tiles = [] } + if (Array.isArray(item.tiles)) { + tiles = item.tiles + } else if (typeof item.tiles === 'string') { + try { + tiles = JSON.parse(item.tiles) + } catch (e) { + tiles = item.tiles.split('\n').filter(Boolean) + } } this.form.tiles = tiles - this.tilesInput = tiles.join('\n') - this.form.attribution = item.attribution || '' - this.form.layer_id = item.layer_id || '' - this.form.layer_type = item.layer_type || 'raster' - this.form.layer_source = item.layer_source || '' + this.tilesInput = Array.isArray(tiles) ? tiles.join('\n') : tiles this.form.is_active = Number(item.is_active ?? 1) this.form.sort_order = Number(item.sort_order ?? 0) }, @@ -197,26 +155,56 @@ export default { this.$refs.formRef && this.$refs.formRef.resetFields() this.tilesInput = '' this.form.version = 8 - this.form.source_type = 'raster' - this.form.tile_size = 256 - this.form.layer_type = 'raster' this.form.is_active = 1 this.form.sort_order = 0 }, handleSubmit () { - this.$refs.formRef.validate((valid) => { - if (!valid) return - // 准备 tiles - const tiles = this.parseTilesInput(this.tilesInput) - if (!tiles.length) { - this.$message.error('请至少填写一个瓦片URL') - return - } - this.form.tiles = tiles + this.$refs.formRef.validate(valid => { + if (valid) { + // 处理 tiles 输入 + this.form.tiles = this.parseTilesInput(this.tilesInput) + if (this.form.tiles.length === 0) { + this.$message.warning('请至少输入一个瓦片URL') + return + } - // 提交占位：待接入 store actions: fetchAddMapStyle / fetchSaveMapStyle - this.$message.success(`${this.pageState === 'add' ? '创建' : '更新'}成功（示例页，待接入后端）`) - this.$router.replace('/mapstyle/index') + // 准备提交的数据，只包含必要的字段 + const submitData = { + name: this.form.name, + // 如果sprite为空，使用默认路径 + sprite: this.form.sprite || '/Public/map/sprite', + glyphs: this.form.glyphs, + tiles: this.form.tiles, + is_active: this.form.is_active, + sort_order: this.form.sort_order + } + + // 如果是编辑模式，添加ID + if (this.pageState === 'edit' && this.form.id) { + submitData.id = this.form.id + } + + const loading = this.$loading({ lock: true }) + const action = this.pageState === 'add' + ? this.$store.dispatch('addMapStyle', submitData) + : this.$store.dispatch('saveMapStyle', submitData) + + action.then(res => { + if (res.data.status === 1) { + this.$message.success(res.data.msg) + this.$router.push('/layout/mapstyle') + } else { + this.$message.error(res.data.msg || '操作失败') + } + }).catch(e => { + this.$message.error(e.message || '请求出错') + }).finally(() => { + loading.close() + }) + } else { + this.$message.warning('请正确填写表单') + return false + } }) } } diff --git a/src/views/layout/components/main/mapstyle/index.vue b/src/views/layout/components/main/mapstyle/index.vue index c895c69..9cb9c8c 100644 --- a/src/views/layout/components/main/mapstyle/index.vue +++ b/src/views/layout/components/main/mapstyle/index.vue @@ -24,7 +24,7 @@ - + @@ -98,10 +98,12 @@ export default { this.$message.error('只能选择一条记录') return } - // 这里暂时用序号作为 id（样式可能没有后端 id），编辑页仅作占位 const row = sel[0] - const id = typeof row === 'object' && row.id != null ? row.id : this.styleList.indexOf(row) - this.$router.push('/mapstyle/edit/' + id) + if (!row || row.id == null) { + this.$message.error('此样式缺少后端ID，无法编辑') + return + } + this.$router.push('/mapstyle/edit/' + row.id) } } }