109 lines
3.9 KiB
Vue
109 lines
3.9 KiB
Vue
<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="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">
|
||
|
||
<!-- 语言设置 -->
|
||
<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="设置">
|
||
<el-radio-group v-model="currentLang" @change="changeLang">
|
||
<el-radio label="zh-CN">简体中文</el-radio>
|
||
<!-- 你可以继续添加更多语言 -->
|
||
<!-- <el-radio label="en">English</el-radio> -->
|
||
</el-radio-group>
|
||
</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="显示模块">
|
||
<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 {
|
||
currentLang: this.$store.state.settings.language || 'zh-CN',
|
||
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: 'message', label: '公告管理' },
|
||
{ value: 'category', label: '分类管理' },
|
||
{ value: 'product', label: '商品管理' },
|
||
{ value: 'broadcast', label: '广告管理' },
|
||
{ value: 'order', label: '订单与统计' },
|
||
{ value: 'download', label: '软件下载' }
|
||
],
|
||
selectedModules: []
|
||
}
|
||
},
|
||
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 })
|
||
})
|
||
},
|
||
changeLang (lang) {
|
||
this.$store.commit('settings/setLanguage', lang)
|
||
this.$message.success(`语言已切换为：${lang === 'zh-CN' ? '简体中文' : lang}`)
|
||
// 如果你用的是 vue-i18n，这里可能还需要调用 i18n.global.locale = lang
|
||
}
|
||
}
|
||
}
|
||
</script>
|