shuiwu/src/components/layout/modules/menu.vue

<template>
  <div class="sw-menu">
    <a-menu style="flex:1" v-model:selectedKeys="current" mode="inline" :open-keys="openKeys" @openChange="onOpenChange" active-text-color="#000" @click="itemClick">
      <template v-for="item in mods" :key="item.systemmoduleid">
        <a-sub-menu v-if="item.apps.length > 1" :key="item.systemmoduleid" @click="modClick(item)">
          <template #title>
            <div>
              <!-- <img width="15" style="margin-top:-2px;margin-right:5px" :src="item.iconurl" alt=""> -->
              {{item.systemmodulename}}
          </div>
          </template>
          <template #icon>
            <CalendarOutlined />
          </template>
          <a-menu-item v-for="app in item.apps" :key="app.systemappid" @click="routeChange(app)">
            {{app.meta.title}}
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item v-if="item.apps.length == 1" :key="item.systemmoduleid" @click="modClick(item)">
          <template #icon>
            <CalendarOutlined />
          </template>
          <span @click="routeChange(item.apps[0])">{{item.apps[0].meta.title}}</span>
        </a-menu-item>
      </template>
    </a-menu>
  </div>
</template>

<script setup>
import { ref,onBeforeMount} from 'vue';
import { useAuthStore } from '@/stores/modules/auth'
import { storeToRefs } from 'pinia'
import { useRouter } from "vue-router"
import less from 'less'
import { CalendarOutlined,PieChartOutlined} from '@ant-design/icons-vue'
import {ConfigProvider, Modal } from 'ant-design-vue';
const router = useRouter()
const store = useAuthStore()
let { mods,actMod,system } = storeToRefs(store)

let rootSubmenuKeys = ref([])
let openKeys = ref([])
let selectedKeys = ref([])

const current = ref([])

const onOpenChange = openKey => {
  const latestOpenKey = openKey.find(key => openKeys.value.indexOf(key) === -1);
  if (rootSubmenuKeys.value.indexOf(latestOpenKey) === -1) {
    openKeys.value = openKey;
  } else {
    openKeys.value = latestOpenKey ? [latestOpenKey] : [];
  }
}

const itemClick = (item, key, keyPath)=>{
  current.value = item.keyPath
}
const modClick = (item)=>{
  actMod.value = item
}
const routeChange = (app)=>{
  // store.appData(app)
  console.log(app)
  router.push({path:app.path})
  console.log(app.path);
}
const colorState = ref({})
const setTheme = (themeName)=> {
  if (themeName === 'light') {
    colorState.value = {
      primaryColor: '#f23557',
      errorColor: '#eb586f',
      warningColor: '#ffde7d',
      successColor: '#4aa0d5',
      infoColor: '#d8e9f0',
    }

    ConfigProvider.config({
      theme: colorState.value
    });

  } else if (themeName === 'normal') {
    colorState.value = {
      primaryColor: '#14317D',
      errorColor: '#ff4d4f',
      warningColor: '#faad14',
      successColor: '#52c41a',
      infoColor: '#1890ff',
    }
    ConfigProvider.config({
      theme: colorState.value
    });
  } else if (themeName === 'caffairs') {
      less.modifyVars({
        '@base': '#fff' // 要更改为的新颜色值
      }).then(() => {
        console.log('Primary color has been changed')
      }).catch(error => {
        console.error(error)
      })
    colorState.value = {
      primaryColor: '#404b69',
      errorColor: '#ff5f5f',
      warningColor: '#ffc93c',
      successColor: '#1fab89',
      infoColor: '#dbedf3',
      menuBg:'#fff'
    }
    ConfigProvider.config({
      theme: colorState.value
    });
  }

}

let getKeys = () => {
  system.value.forEach(sys => {
    sys.modules.forEach(mod => {
      rootSubmenuKeys.value.push(mod.systemmoduleid)
    })
  })
}

onBeforeMount(()=>{
 setTheme('normal')
  getKeys()
})
</script>
<style scoped>

</style>