From 2d44b5f54f2ef5ede8d351a5e30cb2b03ba28152 Mon Sep 17 00:00:00 2001
From: air <30444667+sszdot@users.noreply.github.com>
Date: Tue, 23 Sep 2025 14:19:27 +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=9Afeat=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=A0=B7=E5=BC=8F=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=20=E3=80=90=E8=BF=87=20=20=E7=A8=8B=E3=80=91?=
 =?UTF-8?q?=EF=BC=9A=20=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                            | 44 +++++++++++++++++
 .../layout/components/main/mapstyle/index.vue | 49 +++++++++++++++++--
 2 files changed, 88 insertions(+), 5 deletions(-)

diff --git a/src/store/index.js b/src/store/index.js
index 9fe1eba..63becd8 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1263,6 +1263,50 @@ const store = new Vuex.Store({
         Message.error(res.data.msg || '排序更新失败')
       }
       return res
+    },
+
+    /**
+     * @description: 删除地图样式
+     * @param {Array} idArr 需要删除的样式ID数组
+     */
+    async fetchDelMapStyle ({ dispatch }, idArr) {
+      if (!idArr || !idArr.length) {
+        Message.warning('请选择要删除的样式')
+        return Promise.reject(new Error('未选择要删除的样式'))
+      }
+
+      try {
+        await MessageBox.confirm(
+          `确定要删除选中的 ${idArr.length} 个地图样式吗？删除后不可恢复！`,
+          '提示',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+            closeOnClickModal: false
+          }
+        )
+
+        const params = new URLSearchParams()
+        params.append('id', idArr.join(','))
+        const res = await api.post('delMapStyle', params, 'Plane')
+
+        if (res.data.status === 1) {
+          Message.success(res.data.msg || '删除成功')
+          // 重新获取样式列表
+          await dispatch('fetchMapStyleList')
+        } else {
+          Message.error(res.data.msg || '删除失败')
+        }
+        return res
+      } catch (error) {
+        if (error !== 'cancel') {
+          console.error('删除样式失败:', error)
+          Message.error('删除失败')
+          throw error
+        }
+        return Promise.reject(new Error('用户取消删除'))
+      }
     }
   },
   modules: {
diff --git a/src/views/layout/components/main/mapstyle/index.vue b/src/views/layout/components/main/mapstyle/index.vue
index 9cb9c8c..1f6b6eb 100644
--- a/src/views/layout/components/main/mapstyle/index.vue
+++ b/src/views/layout/components/main/mapstyle/index.vue
@@ -1,13 +1,21 @@
 <template>
   <div class="app-container">
     <!-- 操作按钮 -->
-    <el-button-group>
+    <el-button-group class="m-b-20">
       <el-button type="primary" icon="el-icon-plus" @click="$router.replace('/mapstyle/add')">添加</el-button>
+      <el-button type="danger" icon="el-icon-delete" @click="handleDelete()">删除</el-button>
       <el-button type="warning" icon="el-icon-edit" @click="toEditPage()">编辑</el-button>
     </el-button-group>
 
     <!-- 样式表格 -->
-    <el-table class="m-t-20 w-100" ref="myTable" :data="styleListPaged" border tooltip-effect="dark">
+    <el-table
+      class="m-t-20 w-100"
+      ref="myTable"
+      :data="styleListPaged"
+      border
+      tooltip-effect="dark"
+      @selection-change="handleSelectionChange"
+    >
       <el-table-column align="center" type="selection" width="40" />
       <el-table-column align="center" label="排序" width="120">
         <template slot-scope="scope">
@@ -45,7 +53,8 @@ export default {
     return {
       pageSize: 8,
       currentPage: 1,
-      tempSort: ''
+      tempSort: '',
+      multipleSelection: []
     }
   },
   computed: {
@@ -57,6 +66,10 @@ export default {
     styleListPaged () {
       const start = (this.currentPage - 1) * this.pageSize
       return this.styleList.slice(start, start + this.pageSize)
+    },
+    // 是否有选中的行
+    hasSelection () {
+      return this.multipleSelection.length > 0
     }
   },
   created () {
@@ -65,6 +78,32 @@ export default {
     }, 1000)
   },
   methods: {
+    // 处理表格选择变化
+    handleSelectionChange (val) {
+      this.multipleSelection = val
+    },
+    // 删除选中的样式
+    async handleDelete () {
+      const selected = this.$refs.myTable.selection || []
+      if (!selected.length) {
+        this.$message.warning('请先选择要删除的样式')
+        return
+      }
+
+      const ids = selected.map(item => item.id).filter(Boolean)
+      if (!ids.length) {
+        this.$message.warning('选中的样式没有有效的ID')
+        return
+      }
+
+      try {
+        await this.$store.dispatch('fetchDelMapStyle', ids)
+        // 清空选择
+        this.$refs.myTable.clearSelection()
+      } catch (error) {
+        console.error('删除失败:', error)
+      }
+    },
     displayName (row, idx) {
       // 兼容样式为字符串或对象（包含 name/title）
       if (typeof row === 'string') return `样式 ${idx + 1}`
@@ -91,11 +130,11 @@ export default {
     toEditPage () {
       const sel = this.$refs.myTable.selection || []
       if (!sel.length) {
-        this.$message.error('请选择一条需要编辑的记录')
+        this.$message.warning('请选择一条需要编辑的记录')
         return
       }
       if (sel.length > 1) {
-        this.$message.error('只能选择一条记录')
+        this.$message.warning('只能选择一条记录')
         return
       }
       const row = sel[0]