【类 型】:feat

【原  因】:地图样式删除功能
【过  程】:
【影  响】:
This commit is contained in:
air 2025-09-23 14:19:27 +08:00
parent 3f93bcdd90
commit 2d44b5f54f
2 changed files with 88 additions and 5 deletions

View File

@ -1263,6 +1263,50 @@ const store = new Vuex.Store({
Message.error(res.data.msg || '排序更新失败') Message.error(res.data.msg || '排序更新失败')
} }
return res 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: { modules: {

View File

@ -1,13 +1,21 @@
<template> <template>
<div class="app-container"> <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="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 type="warning" icon="el-icon-edit" @click="toEditPage()">编辑</el-button>
</el-button-group> </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" type="selection" width="40" />
<el-table-column align="center" label="排序" width="120"> <el-table-column align="center" label="排序" width="120">
<template slot-scope="scope"> <template slot-scope="scope">
@ -45,7 +53,8 @@ export default {
return { return {
pageSize: 8, pageSize: 8,
currentPage: 1, currentPage: 1,
tempSort: '' tempSort: '',
multipleSelection: []
} }
}, },
computed: { computed: {
@ -57,6 +66,10 @@ export default {
styleListPaged () { styleListPaged () {
const start = (this.currentPage - 1) * this.pageSize const start = (this.currentPage - 1) * this.pageSize
return this.styleList.slice(start, start + this.pageSize) return this.styleList.slice(start, start + this.pageSize)
},
//
hasSelection () {
return this.multipleSelection.length > 0
} }
}, },
created () { created () {
@ -65,6 +78,32 @@ export default {
}, 1000) }, 1000)
}, },
methods: { 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) { displayName (row, idx) {
// name/title // name/title
if (typeof row === 'string') return `样式 ${idx + 1}` if (typeof row === 'string') return `样式 ${idx + 1}`
@ -91,11 +130,11 @@ export default {
toEditPage () { toEditPage () {
const sel = this.$refs.myTable.selection || [] const sel = this.$refs.myTable.selection || []
if (!sel.length) { if (!sel.length) {
this.$message.error('请选择一条需要编辑的记录') this.$message.warning('请选择一条需要编辑的记录')
return return
} }
if (sel.length > 1) { if (sel.length > 1) {
this.$message.error('只能选择一条记录') this.$message.warning('只能选择一条记录')
return return
} }
const row = sel[0] const row = sel[0]