From cf093c0d471fd736a42cb151788e61c29f17bfb4 Mon Sep 17 00:00:00 2001
From: air <30444667+sszdot@users.noreply.github.com>
Date: Tue, 23 Sep 2025 18:10:18 +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=9Afix=20=E3=80=90=E5=8E=9F=20=20=E5=9B=A0=E3=80=91?=
 =?UTF-8?q?=EF=BC=9A=E5=9C=B0=E5=9B=BE=E6=B7=BB=E5=8A=A0=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=20=E3=80=90=E8=BF=87=20=20=E7=A8=8B=E3=80=91=EF=BC=9A=20?=
 =?UTF-8?q?=E3=80=90=E5=BD=B1=20=20=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                            |  94 +++++++++-
 src/styles/index.scss                         |   4 +
 .../layout/components/main/mapstyle/add.vue   | 160 +++++++-----------
 3 files changed, 159 insertions(+), 99 deletions(-)

diff --git a/src/store/index.js b/src/store/index.js
index 63becd8..ec7a544 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1213,9 +1213,11 @@ const store = new Vuex.Store({
       if (res.data.status === 1) {
         const host = rootState.settings.host
         const list = res.data.mapStyleList.map(style => {
-          const tiles = Array.isArray(style.tiles) ? style.tiles : JSON.parse(style.tiles)
+          // 使用 url 字段，并包装成数组
+          const tiles = style.url ? [style.url] : (Array.isArray(style.tiles) ? style.tiles : [])
           const sourceKey = 'default'
           const spriteUrl = style.sprite && String(style.sprite).trim() ? style.sprite : `${host}/Public/map/sprite`
+          const glyphs = style.glyphs || 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf'
 
           return {
             // 附带原始字段，便于管理端展示和操作
@@ -1224,13 +1226,13 @@ const store = new Vuex.Store({
             sort_order: Number(style.sort_order ?? 0),
             name: style.name,
             sprite: spriteUrl,
-            glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
+            glyphs: glyphs,
             version: 8,
             sources: {
               [sourceKey]: {
                 type: 'raster',
                 tileSize: 256,
-                tiles,
+                tiles: tiles,
                 attribution: ''
               }
             },
@@ -1238,7 +1240,13 @@ const store = new Vuex.Store({
               id: `${sourceKey}Layer`,
               type: 'raster',
               source: sourceKey
-            }]
+            }],
+            // 保存原始URL用于编辑
+            _original: {
+              url: style.url || (tiles.length > 0 ? tiles[0] : ''),
+              sprite: style.sprite,
+              glyphs: style.glyphs
+            }
           }
         })
         commit('setMapStyleList', list)
@@ -1307,6 +1315,84 @@ const store = new Vuex.Store({
         }
         return Promise.reject(new Error('用户取消删除'))
       }
+    },
+    /**
+     * @description: 添加地图样式
+     * @param {Object} form 地图样式表单数据
+     * @param {string} form.name 样式名称
+     * @param {string} form.url 样式URL
+     * @param {string} form.thumbnail 缩略图URL
+     * @param {number} form.sort_order 排序值
+     * @return {Promise} 返回包含服务器响应的Promise
+     */
+    async addMapStyle ({ dispatch }, form) {
+      // 参数验证
+      if (!form || typeof form !== 'object') {
+        throw new Error('无效的表单数据')
+      }
+
+      if (!form.name || !form.name.trim()) {
+        throw new Error('样式名称不能为空')
+      }
+
+      if (!form.url || !form.url.trim()) {
+        throw new Error('样式URL不能为空')
+      }
+
+      // 处理form参数为URLSearchParams格式
+      const params = new URLSearchParams()
+      params.append('name', form.name)
+      params.append('sprite', form.sprite || '')
+      params.append('glyphs', form.glyphs || 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf')
+      params.append('url', form.url)
+      params.append('is_active', form.is_active ? 1 : 0)
+      params.append('sort_order', form.sort_order || 0)
+
+      // 发送请求
+      const res = await api.post('addMapStyle', params, 'Plane')
+
+      // 检查响应状态
+      if (res.data.status === 1) {
+        await dispatch('fetchMapStyleList') // 刷新列表
+        Message.success(res.data.msg)
+      } else {
+        Message.error(res.data.msg)
+      }
+      return res
+    },
+
+    async saveMapStyle ({ dispatch }, form) {
+      // 参数验证
+      if (!form || typeof form !== 'object') {
+        throw new Error('无效的表单数据')
+      }
+
+      if (!form.id) {
+        throw new Error('缺少样式ID')
+      }
+
+      // 处理form参数为URLSearchParams格式
+      const params = new URLSearchParams()
+      params.append('id', form.id)
+
+      if (form.name !== undefined) params.append('name', form.name)
+      if (form.sprite !== undefined) params.append('sprite', form.sprite)
+      if (form.glyphs !== undefined) params.append('glyphs', form.glyphs)
+      if (form.url !== undefined) params.append('url', form.url)
+      if (form.is_active !== undefined) params.append('is_active', form.is_active ? 1 : 0)
+      if (form.sort_order !== undefined) params.append('sort_order', form.sort_order)
+
+      // 发送请求
+      const res = await api.post('saveMapStyle', params, 'Plane')
+
+      // 检查响应状态
+      if (res.data.status === 1) {
+        await dispatch('fetchMapStyleList') // 刷新列表
+        Message.success(res.data.msg)
+      } else {
+        Message.error(res.data.msg)
+      }
+      return res
     }
   },
   modules: {
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 10986d1..da9e2cc 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -141,6 +141,10 @@ label {
   padding-left: 25px !important;
 }
 
+.el-form-item__error {
+  left: 25px !important;
+}
+
 /* 当屏幕宽度小于等于480px时 */
 @media (max-width: 480px) {
   .el-dialog {
diff --git a/src/views/layout/components/main/mapstyle/add.vue b/src/views/layout/components/main/mapstyle/add.vue
index 93b5577..d9dd5d8 100644
--- a/src/views/layout/components/main/mapstyle/add.vue
+++ b/src/views/layout/components/main/mapstyle/add.vue
@@ -10,7 +10,8 @@
             </div>
           </el-header>
           <el-main class="border p-20 m-b-20">
-            <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" :label-position="$store.state.app.isWideScreen ? 'top' : 'right'" class="w-80">
+            <el-form ref="formRef" :model="form" :rules="rules" label-width="120px"
+              :label-position="$store.state.app.isWideScreen ? 'top' : 'right'" class="w-80">
 
               <!-- 基本信息 -->
               <div class="p-b-5">
@@ -19,11 +20,7 @@
                 </el-divider>
               </div>
               <el-form-item label="样式名称" prop="name">
-                <el-input v-model="form.name" placeholder="例如：谷歌卫星瓦片" />
-              </el-form-item>
-              <!-- 版本号固定为8，不显示 -->
-              <el-form-item v-show="false" label="版本" prop="version">
-                <el-input-number v-model="form.version" :min="1" :max="8" :step="1" />
+                <el-input v-model="form.name" placeholder="例如：谷歌卫星" />
               </el-form-item>
               <el-form-item label="是否启用" prop="is_active">
                 <el-switch v-model="form.is_active" :active-value="1" :inactive-value="0" />
@@ -35,29 +32,28 @@
               <!-- 资源信息 -->
               <div class="p-t-10 p-b-5">
                 <el-divider content-position="left">
-                  <font class="fb f-s-18 normalFontColor">资源与源配置</font>
+                  <font class="fb f-s-18 normalFontColor">资源与源配置（84坐标系）</font>
                 </el-divider>
               </div>
               <el-form-item label="sprite 路径" prop="sprite">
-                <el-input v-model="form.sprite" :placeholder="form.sprite && form.sprite.includes('/Public/map/sprite') ? '使用默认路径 /Public/map/sprite' : '可选：sprite 路径（留空则使用默认路径）'" />
+                <el-input v-model="form.sprite"
+                  :placeholder="form.sprite && form.sprite.includes('/Public/map/sprite') ? '使用默认路径 /Public/map/sprite' : '可选：sprite 路径（留空则使用默认路径）'" />
               </el-form-item>
               <el-form-item label="glyphs 路径" prop="glyphs">
                 <el-input v-model="form.glyphs" placeholder="可选：glyphs 路径（如有）" />
               </el-form-item>
               <!-- 固定使用默认值，不显示 -->
-              <el-form-item label="瓦片URL列表" prop="tiles">
-                <el-input
-                  type="textarea"
-                  :rows="4"
-                  v-model="tilesInput"
-                  placeholder="每行一个URL，或粘贴JSON数组，例如：\nhttps://server.com/tiles/{z}/{x}/{y}.png"
-                />
+              <el-form-item label="瓦片URL" prop="url"
+                :rules="[{ required: true, message: '请输入瓦片URL', trigger: 'blur' }]">
+                <el-input v-model="form.url"
+                  placeholder="请输入瓦片URL，例如：http://gac-geo.googlecnapps.cn/maps/vt?lyrs=m&x={x}&y={y}&z={z}" />
               </el-form-item>
               <!-- 固定使用默认值，不显示 -->
 
               <!-- 提交按钮 -->
               <el-form-item>
-                <el-button type="primary" :icon="pageState === 'add' ? 'el-icon-plus' : 'el-icon-edit'" @click="handleSubmit">
+                <el-button type="primary" :icon="pageState === 'add' ? 'el-icon-plus' : 'el-icon-edit'"
+                  @click="pageState === 'add' ? addMapStyle() : saveMapStyle()">
                   {{ pageState === 'add' ? '创建' : '更新' }}
                 </el-button>
                 <el-button v-if="pageState === 'add'" class="iconfont icon-qingchu" @click="resetForm">
@@ -71,7 +67,7 @@
       </el-col>
     </el-row>
   </div>
-  </template>
+</template>
 
 <script>
 export default {
@@ -83,16 +79,15 @@ export default {
         name: '',
         sprite: '',
         glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
-        version: 8,
-        tiles: [], // 存数组，表单用 tilesInput 辅助
+        url: '', // 瓦片URL
         is_active: 1,
         sort_order: 0
       },
-      tilesInput: '', // 文本域字符串（行/JSON）
       pageState: 'add',
       mapStyleId: this.$route.params.id,
       rules: {
-        name: [{ required: true, message: '请输入样式名称', trigger: 'blur' }]
+        name: [{ required: true, message: '请输入样式名称', trigger: 'blur' }],
+        url: [{ required: true, message: '请输入瓦片URL', trigger: 'blur' }]
       }
     }
   },
@@ -107,7 +102,7 @@ export default {
         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) {}
+        } catch (e) { }
       }
       if (item) {
         this.fillFormFromItem(item)
@@ -130,82 +125,54 @@ export default {
       return text.split(/\r?\n/).map(s => s.trim()).filter(Boolean)
     },
     fillFormFromItem (item) {
-      this.form.name = item.name || ''
-      // 如果包含默认路径，设置为空字符串
-      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 = item.tiles.split('\n').filter(Boolean)
-        }
+      this.form = {
+        id: item.id,
+        name: item.name,
+        sprite: item.sprite || '',
+        glyphs: item.glyphs || 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
+        url: item.url || (item.sources && item.sources.default && item.sources.default.tiles &&
+          item.sources.default.tiles.length > 0 ? item.sources.default.tiles[0] : ''),
+        is_active: item.is_active,
+        sort_order: item.sort_order
+      }
+
+      // 处理从 _original 中恢复数据
+      if (item._original) {
+        this.form.url = item._original.url || ''
+        this.form.sprite = item._original.sprite || ''
+        this.form.glyphs = item._original.glyphs || 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf'
       }
-      this.form.tiles = tiles
-      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)
     },
     resetForm () {
-      this.$refs.formRef && this.$refs.formRef.resetFields()
-      this.tilesInput = ''
-      this.form.version = 8
-      this.form.is_active = 1
-      this.form.sort_order = 0
+      this.$refs.formRef.resetFields()
+      this.form = {
+        id: null,
+        name: '',
+        sprite: '',
+        glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
+        url: '',
+        is_active: 1,
+        sort_order: 0
+      }
     },
-    handleSubmit () {
-      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
-          }
-
-          // 准备提交的数据，只包含必要的字段
-          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
-        }
-      })
+    /**
+     * @description: 创建地图样式
+     */
+    async addMapStyle () {
+      const res = await this.$store.dispatch('addMapStyle', this.form)
+      if (res.data.status === 1) {
+        this.$router.push('/mapstyle/index')
+      }
+    },
+    /**
+     * @description: 更新地图样式
+     */
+    async saveMapStyle () {
+      this.form.id = this.mapStyleId
+      const res = await this.$store.dispatch('saveMapStyle', this.form)
+      if (res.data.status === 1) {
+        this.$router.push('/mapstyle/index')
+      }
     }
   }
 }
@@ -213,5 +180,8 @@ export default {
 
 <style lang="scss" scoped>
 @import "@/styles/theme.scss";
-.w-80 { max-width: 880px; }
+
+.w-80 {
+  max-width: 880px;
+}
 </style>