【类 型】:feat

【原  因】:地图设置 的排序功能完善
【过  程】:
【影  响】:
This commit is contained in:
air 2025-09-22 19:29:44 +08:00
parent be9fb71e66
commit 6c30667309
8 changed files with 432 additions and 2 deletions

View File

@ -123,7 +123,9 @@ export default {
}, },
async mounted () { async mounted () {
// //
await this.$store.dispatch('fetchMapStyleList', this.$store.state.settings.host) if (this.$store.state.mapStyleList.length === 0) {
await this.$store.dispatch('fetchMapStyleList', this.$store.state.settings.host)
}
// //
await this.init() await this.init()

View File

@ -16,6 +16,51 @@ const routes = [
hidden: true hidden: true
} }
}, },
{
path: '/mapstyle',
component: Layout,
redirect: '/mapstyle/index',
meta: {
title: '地图类型',
icon: 'el-icon-map-location',
roles: ['master'],
hidden: true
},
children: [
{
path: '/mapstyle/index',
component: () => import('@/views/layout/components/main/mapstyle/index'),
meta: {
title: '地图列表',
icon: 'el-icon-tickets',
roles: ['master'],
hidden: true
}
},
{
path: '/mapstyle/add',
component: () => import('@/views/layout/components/main/mapstyle/add'),
meta: {
title: '地图添加',
icon: 'el-icon-plus',
roles: ['master'],
tapName: 'plane',
hidden: true
}
},
{
path: '/mapstyle/edit/:id',
component: () => import('@/views/layout/components/main/mapstyle/add'),
meta: {
title: '地图更新',
icon: 'el-icon-edit',
roles: ['master'],
tapName: 'plane',
hidden: true
}
}
]
},
{ {
path: '/home', path: '/home',
component: Layout, component: Layout,

View File

@ -1217,6 +1217,11 @@ const store = new Vuex.Store({
const sourceKey = style.source_key || 'default' const sourceKey = style.source_key || 'default'
return { return {
// 附带原始字段,便于管理端展示和操作
id: style.id,
is_active: Number(style.is_active ?? 1),
sort_order: Number(style.sort_order ?? 0),
source_key: sourceKey,
name: style.name, name: style.name,
sprite: `${host}/Public/map/sprite`, sprite: `${host}/Public/map/sprite`,
glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf', glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
@ -1241,6 +1246,23 @@ const store = new Vuex.Store({
commit('setMapStyleList', []) commit('setMapStyleList', [])
Message.error(res.data.msg || '地图样式获取失败') Message.error(res.data.msg || '地图样式获取失败')
} }
},
/**
* @description: 地图样式排序
* @param {*} form { id, sort_order }
*/
async fetchOrderMapStyle ({ dispatch }, form) {
const params = new URLSearchParams()
params.append('id', form.id)
params.append('sort_order', form.sort_order)
const res = await api.post('orderMapStyle', params, 'Plane')
if (res.data.status === 1) {
await dispatch('fetchMapStyleList') // 刷新样式列表
Message.success(res.data.msg || '排序已更新')
} else {
Message.error(res.data.msg || '排序更新失败')
}
return res
} }
}, },
modules: { modules: {

View File

@ -137,6 +137,10 @@ label {
color: #606266 !important; color: #606266 !important;
} }
.el-form-item__content {
padding-left: 25px !important;
}
/* 当屏幕宽度小于等于480px时 */ /* 当屏幕宽度小于等于480px时 */
@media (max-width: 480px) { @media (max-width: 480px) {
.el-dialog { .el-dialog {

View File

@ -40,6 +40,16 @@
</el-checkbox-group> </el-checkbox-group>
</el-form-item> </el-form-item>
<!-- 地图组件设置 -->
<div class="p-t-10 p-b-5">
<el-divider content-position="left">
<font class="fb f-s-18 normalFontColor">地图组件设置</font>
</el-divider>
</div>
<el-form-item label="地图样式" v-if="this.$store.state.user.power === 'master'">
<el-button type="text" @click="goMapStyle">前往地图样式</el-button>
</el-form-item>
</el-form> </el-form>
</el-main> </el-main>
</el-container> </el-container>
@ -102,7 +112,12 @@ export default {
this.$store.commit('settings/setLanguage', lang) this.$store.commit('settings/setLanguage', lang)
this.$message.success(`语言已切换为:${lang === 'zh-CN' ? '简体中文' : lang}`) this.$message.success(`语言已切换为:${lang === 'zh-CN' ? '简体中文' : lang}`)
// vue-i18n i18n.global.locale = lang // vue-i18n i18n.global.locale = lang
},
goMapStyle () {
this.$router.push('/mapstyle/index')
} }
} }
} }
</script> </script>
<style lang="scss" scoped>
</style>

View File

@ -0,0 +1,229 @@
<template>
<div class="app-container">
<el-row class="m-t-0">
<el-col :span="24">
<el-container>
<el-header height="42px" class="l-h-42 p-l-10 p-r-10 border border-b-n">
<div class="l">
<i :class="pageState === 'add' ? 'el-icon-plus f-s-20' : 'el-icon-edit f-s-20'"></i>
<font class="m-l-10 f-s-18 fb">{{ $route.meta.title }}</font>
</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">
<!-- 基本信息 -->
<div class="p-b-5">
<el-divider content-position="left">
<font class="fb f-s-18 normalFontColor">基本信息</font>
</el-divider>
</div>
<el-form-item label="样式名称" prop="name">
<el-input v-model="form.name" placeholder="例如:谷歌卫星瓦片" />
</el-form-item>
<el-form-item label="版本" prop="version">
<el-input-number v-model="form.version" :min="1" :max="8" :step="1" />
</el-form-item>
<el-form-item label="是否启用" prop="is_active">
<el-switch v-model="form.is_active" :active-value="1" :inactive-value="0" />
</el-form-item>
<el-form-item label="排序" prop="sort_order">
<el-input-number v-model="form.sort_order" :min="0" :max="9999" :step="1" />
</el-form-item>
<!-- 资源信息 -->
<div class="p-t-10 p-b-5">
<el-divider content-position="left">
<font class="fb f-s-18 normalFontColor">资源与源配置</font>
</el-divider>
</div>
<el-form-item label="sprite 路径" prop="sprite">
<el-input v-model="form.sprite" placeholder="可选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="source 名称" prop="source_name">
<el-input v-model="form.source_name" placeholder="例如google、bing" />
</el-form-item>
<el-form-item label="source 类型" prop="source_type">
<el-select v-model="form.source_type" placeholder="请选择 source 类型">
<el-option label="raster" value="raster" />
<el-option label="vector" value="vector" />
</el-select>
</el-form-item>
<el-form-item label="瓦片大小" prop="tile_size">
<el-input-number v-model="form.tile_size" :min="1" :max="1024" :step="1" />
</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>
<el-form-item label="数据来源(署名)" prop="attribution">
<el-input type="textarea" :rows="2" v-model="form.attribution" placeholder="可选,如:© Google" />
</el-form-item>
<!-- 图层配置 -->
<div class="p-t-10 p-b-5">
<el-divider content-position="left">
<font class="fb f-s-18 normalFontColor">图层配置</font>
</el-divider>
</div>
<el-form-item label="图层ID" prop="layer_id">
<el-input v-model="form.layer_id" placeholder="用于 map.addLayer 的 id" />
</el-form-item>
<el-form-item label="图层类型" prop="layer_type">
<el-select v-model="form.layer_type" placeholder="请选择图层类型">
<el-option label="raster" value="raster" />
<el-option label="background" value="background" />
<el-option label="fill" value="fill" />
<el-option label="line" value="line" />
<el-option label="symbol" value="symbol" />
</el-select>
</el-form-item>
<el-form-item label="图层source" prop="layer_source">
<el-input v-model="form.layer_source" placeholder="通常与 source 名称一致" />
</el-form-item>
<!-- 提交按钮 -->
<el-form-item>
<el-button type="primary" :icon="pageState === 'add' ? 'el-icon-plus' : 'el-icon-edit'" @click="handleSubmit">
{{ pageState === 'add' ? '创建' : '更新' }}
</el-button>
<el-button v-if="pageState === 'add'" class="iconfont icon-qingchu" @click="resetForm">
<font class="m-l-5">重填</font>
</el-button>
</el-form-item>
</el-form>
</el-main>
</el-container>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'MapStyleAdd',
data () {
return {
form: {
id: null,
name: '',
sprite: '',
glyphs: '',
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
},
tilesInput: '', // /JSON
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' }]
}
}
},
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))
if (item) {
this.fillFormFromItem(item)
} else {
this.$message.warning('未在列表中找到该样式,表单为空')
}
}
},
methods: {
// tiles JSON
parseTilesInput (val) {
const text = (val || '').trim()
if (!text) return []
try {
const asJson = JSON.parse(text)
if (Array.isArray(asJson)) return asJson
} catch (e) {
// JSON
}
return text.split(/\r?\n/).map(s => s.trim()).filter(Boolean)
},
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)
// 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 = [] }
}
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.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.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
// store actions: fetchAddMapStyle / fetchSaveMapStyle
this.$message.success(`${this.pageState === 'add' ? '创建' : '更新'}成功(示例页,待接入后端)`)
this.$router.replace('/mapstyle/index')
})
}
}
}
</script>
<style lang="scss" scoped>
@import "@/styles/theme.scss";
.w-80 { max-width: 880px; }
</style>

View File

@ -0,0 +1,112 @@
<template>
<div class="app-container">
<!-- 操作按钮 -->
<el-button-group>
<el-button type="primary" icon="el-icon-plus" @click="$router.replace('/mapstyle/add')">添加</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-column align="center" type="selection" width="40" />
<el-table-column align="center" label="排序" width="120">
<template slot-scope="scope">
<el-input
v-model="scope.row.sort_order"
size="mini"
style="width: 80px;"
placeholder="排序"
@focus="tempSort = scope.row.sort_order"
@blur="blurOrder(scope.row)"
/>
</template>
</el-table-column>
<el-table-column align="center" label="ID" width="60">
<template slot-scope="scope">{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="name" label="样式名称" min-width="160">
<template slot-scope="scope">{{ displayName(scope.row, scope.$index) }}</template>
</el-table-column>
<el-table-column prop="style" label="样式/URL" min-width="260" show-overflow-tooltip>
<template slot-scope="scope">{{ displayStyle(scope.row) }}</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination class="m-t-20" layout="prev, pager, next" :current-page.sync="currentPage" :page-size="pageSize"
:total="styleList.length" />
</div>
</template>
<script>
export default {
name: 'MapStyleIndex',
data () {
return {
pageSize: 8,
currentPage: 1,
tempSort: ''
}
},
computed: {
// store MapBox 使
styleList () {
//
return Array.isArray(this.$store.state.mapStyleList) ? this.$store.state.mapStyleList : []
},
styleListPaged () {
const start = (this.currentPage - 1) * this.pageSize
return this.styleList.slice(start, start + this.pageSize)
}
},
created () {
setTimeout(() => {
console.log(this.styleList)
}, 1000)
},
methods: {
displayName (row, idx) {
// name/title
if (typeof row === 'string') return `样式 ${idx + 1}`
return row.name || row.title || `样式 ${idx + 1}`
},
displayStyle (row) {
if (typeof row === 'string') return row
// style/url/id
return row.style || row.url || JSON.stringify(row)
},
// input
async blurOrder (row) {
if (this.tempSort !== row.sort_order) {
if (!row || row.id == null) {
this.$message.warning('该样式缺少ID无法排序')
return
}
await this.$store.dispatch('fetchOrderMapStyle', {
id: row.id,
sort_order: row.sort_order
})
}
},
toEditPage () {
const sel = this.$refs.myTable.selection || []
if (!sel.length) {
this.$message.error('请选择一条需要编辑的记录')
return
}
if (sel.length > 1) {
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)
}
}
}
</script>
<style lang="scss" scoped>
@import "@/styles/theme.scss";
</style>

View File

@ -122,7 +122,8 @@ export default {
this.$store.dispatch('fetchSpuList'), this.$store.dispatch('fetchSpuList'),
this.$store.dispatch('fetchSkuList'), this.$store.dispatch('fetchSkuList'),
this.$store.dispatch('fetchPaidOrderList'), this.$store.dispatch('fetchPaidOrderList'),
this.$store.dispatch('fetchMessageList') this.$store.dispatch('fetchMessageList'),
this.$store.dispatch('fetchMapStyleList', this.$store.state.settings.host)
]).then(() => { ]).then(() => {
return this.$store.dispatch('fetchNoflyData', this.shop_id) return this.$store.dispatch('fetchNoflyData', this.shop_id)
}) })