food/src/views/layout/components/main/home/set.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">

            <!-- 添加删除系统模块 -->
            <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: []
    }
  },
  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>