【类 型】：feat
【原 因】：增加 系统设置 控制模块显示 隐藏 【过 程】： 【影 响】： # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
This commit is contained in:
parent
e14aa9a975
commit
78c2d7de21
@ -1,3 +1,24 @@
|
||||
// 默认模块显示配置
|
||||
const defaultModuleVisibilityMap = {
|
||||
home: true,
|
||||
model: true,
|
||||
register: true,
|
||||
product: true,
|
||||
route: true,
|
||||
planes: true,
|
||||
site: true,
|
||||
shop: true,
|
||||
admin: true,
|
||||
category: true,
|
||||
broadcast: true,
|
||||
order: true,
|
||||
nofly: true
|
||||
}
|
||||
|
||||
// 从 localStorage 读取已有配置，合并覆盖默认配置
|
||||
const savedVisibility = JSON.parse(localStorage.getItem('moduleVisibilityMap') || '{}')
|
||||
const moduleVisibilityMap = { ...defaultModuleVisibilityMap, ...savedVisibility }
|
||||
|
||||
const state = {
|
||||
mqttState: false, // mqtt连接状态
|
||||
isCollapse: localStorage.getItem('isCollapse') ? !!+localStorage.getItem('isCollapse') : true, // 侧边导航栏 显隐
|
||||
@ -6,6 +27,8 @@ const state = {
|
||||
defaultLonLat: null, // 地图默认经纬度
|
||||
defaultZoom: null, // 地图默认缩放
|
||||
|
||||
moduleVisibilityMap, // 使用合并后的 moduleVisibilityMap 初始化
|
||||
|
||||
/* 页面参数 */
|
||||
orderSerch: null, // 订单列表页搜索条件
|
||||
toMessageIdArr: [], // 用户管理 发布公告页面 id临时传参
|
||||
@ -14,6 +37,15 @@ const state = {
|
||||
}
|
||||
|
||||
const mutations = {
|
||||
// 设置 模块显示隐藏参数
|
||||
setModuleVisibility (state, { key, visible }) {
|
||||
state.moduleVisibilityMap[key] = visible
|
||||
localStorage.setItem('moduleVisibilityMap', JSON.stringify(state.moduleVisibilityMap))
|
||||
},
|
||||
setAllModuleVisibility (state, visibilityMap) {
|
||||
state.moduleVisibilityMap = visibilityMap
|
||||
localStorage.setItem('moduleVisibilityMap', JSON.stringify(state.moduleVisibilityMap))
|
||||
},
|
||||
// 导航栏 显隐
|
||||
setCollapse () {
|
||||
state.isCollapse = !state.isCollapse
|
||||
|
||||
@ -1,19 +1,79 @@
|
||||
<template>
|
||||
<div class="h-100">
|
||||
<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="iconfont icon-shezhi f-s-20"></i>
|
||||
<font class="m-l-10 f-s-18 fb">设置</font>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="border p-20">
|
||||
<el-form label-width="120px">
|
||||
|
||||
<!-- 添加删除系统模块 -->
|
||||
<el-form-item label="增删系统模块">
|
||||
<el-checkbox-group v-model="selectedModules" @change="handleChange">
|
||||
<el-checkbox v-for="item in moduleOptions" :key="item.value" :label="item.value">
|
||||
{{ item.label }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Set',
|
||||
data () {
|
||||
return {
|
||||
moduleOptions: [
|
||||
{ value: 'home', label: '概况' },
|
||||
{ value: 'model', label: '机型管理' },
|
||||
{ value: 'register', label: '飞机管理' },
|
||||
{ value: 'nofly', label: '飞行限制' },
|
||||
{ value: 'route', label: '航线管理' },
|
||||
{ value: 'site', label: '站点管理' },
|
||||
{ value: 'planes', label: '无人机' },
|
||||
{ value: 'shop', label: '商铺管理' },
|
||||
{ value: 'admin', label: '管理员管理' },
|
||||
{ value: 'category', label: '分类管理' },
|
||||
{ value: 'product', label: '商品管理' }
|
||||
],
|
||||
selectedModules: []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
computed: {
|
||||
...mapState('app', {
|
||||
moduleVisibilityMap: state => state.moduleVisibilityMap
|
||||
})
|
||||
},
|
||||
created () {
|
||||
// 根据 Vuex 中的 moduleVisibilityMap 初始化 selectedModules（取所有显示为 true 的模块）
|
||||
this.selectedModules = Object.keys(this.moduleVisibilityMap)
|
||||
.filter(key => this.moduleVisibilityMap[key])
|
||||
},
|
||||
methods: {
|
||||
...mapMutations('app', ['setModuleVisibility']),
|
||||
handleChange () {
|
||||
// 先把所有模块都设为 false
|
||||
Object.keys(this.moduleVisibilityMap).forEach(key => {
|
||||
this.setModuleVisibility({ key, visible: false })
|
||||
})
|
||||
// 再把选中的模块设为 true
|
||||
this.selectedModules.forEach(key => {
|
||||
this.setModuleVisibility({ key, visible: true })
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
||||
@ -16,21 +16,27 @@
|
||||
<el-menu v-show="show" class="border-n" :router="true" :default-active="activeMenu" :unique-opened="true"
|
||||
background-color="#304156" text-color="rgb(191, 203, 217)" active-text-color="#409EFF"
|
||||
:collapse-transition="false" :collapse="isCollapse">
|
||||
<template v-for="(route, index) in routes">
|
||||
<el-menu-item @click="lt480Collapse()" v-if="route.children.length < 2" :key="route.path" :index="route.children[0].path">
|
||||
<i class="fc" :class="route.children[0].meta.icon"></i>
|
||||
<span slot="title">{{ route.children[0].meta.title }}</span>
|
||||
</el-menu-item>
|
||||
<el-submenu v-else :key="index" :index="route.path">
|
||||
<template slot="title">
|
||||
<i class="fc" :class="route.meta.icon"></i>
|
||||
<span>{{ route.meta.title }}</span>
|
||||
</template>
|
||||
<el-menu-item @click="lt480Collapse()" v-for="child in route.children" :key="child.path" :index="child.path">
|
||||
<i class="fc" :class="child.meta.icon"></i>
|
||||
<span>{{ child.meta.title }}</span>
|
||||
<template v-for="route in routes">
|
||||
<!-- 判断 moduleVisibilityMap 是否允许显示 -->
|
||||
<template v-if="$store.state.app.moduleVisibilityMap[route.path.replace('/', '')]">
|
||||
<el-menu-item v-if="route.children.length < 2" :key="route.path + '-single'" :index="route.children[0].path"
|
||||
@click="lt480Collapse()">
|
||||
<i class="fc" :class="route.children[0].meta.icon"></i>
|
||||
<span slot="title">{{ route.children[0].meta.title }}</span>
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
|
||||
<el-submenu v-else :key="route.path + '-group'" :index="route.path">
|
||||
<template slot="title">
|
||||
<i class="fc" :class="route.meta.icon"></i>
|
||||
<span>{{ route.meta.title }}</span>
|
||||
</template>
|
||||
<el-menu-item v-for="child in route.children" :key="child.path" :index="child.path"
|
||||
@click="lt480Collapse()">
|
||||
<i class="fc" :class="child.meta.icon"></i>
|
||||
<span>{{ child.meta.title }}</span>
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
</template>
|
||||
</template>
|
||||
</el-menu>
|
||||
</transition>
|
||||
@ -111,9 +117,9 @@ export default {
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description: 动态加载无人机子路由，并保留静态配置（如集群控制）
|
||||
* @param {Array} planes - 飞机对象数组，每个对象包含 id 和 name
|
||||
*/
|
||||
* @description: 动态加载无人机子路由，并保留静态配置（如集群控制）
|
||||
* @param {Array} planes - 飞机对象数组，每个对象包含 id 和 name
|
||||
*/
|
||||
loadRoute (planes) {
|
||||
// 1. 将每架飞机转换为一个路由配置对象
|
||||
const dynamicPlaneRoutes = planes.map((item) => ({
|
||||
@ -149,8 +155,8 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
/**
|
||||
* @description: 监听飞机列表 有刷新导航栏
|
||||
*/
|
||||
* @description: 监听飞机列表 有刷新导航栏
|
||||
*/
|
||||
airList (val) {
|
||||
this.loadRoute(val)
|
||||
this.$forceUpdate()// 刷新本组件
|
||||
|
||||
Loading…
Reference in New Issue
Block a user