shuiwu/src/components/layout/systemMod.vue

<template>
  <div class="asides">
    <div class="aside-item" :class="act_sys.systemid == item.systemid?'onSystem':''" v-for="item in system" :key="item.index"  @click="onSystemClick(item)">
      <span v-if="collapsed" class="menu-icon uncollapsed"><span class="aside-menu-icon">{{item.systemname.substr(0, 1)}}</span></span>
      <span class="collapsed" v-if="!collapsed">
        <span class="aside-menu-icon">{{item.systemname.substr(0, 1)}}</span>
        {{item.systemname}}
      </span>
    </div>
  </div>
</template>

<script setup>
import Api from '@/api/api'
import { defineComponent,ref, reactive,onMounted,watch} from 'vue';
import { useAuthStore } from '@/stores/modules/auth'
import { storeToRefs } from 'pinia'
import { useRouter } from "vue-router"
import { MenuFoldOutlined,MenuUnfoldOutlined} from '@ant-design/icons-vue'
const router = useRouter()

const store = useAuthStore()

const act_sys = ref({})

let { system,mods } = storeToRefs(store)

const siteInfo = ref({})
const collapsed = ref(true)

const onSystemClick = (system)=>{
  act_sys.value = system
  // mods.value = item.modules
  // router.push({path:item.modules[0].apps[0].path})
  store.modulesData(system)
}

const siteData = async ()=>{
  const res = await Api.requested({
    classname:'manager.site.site',
    method:'querySite',
    content:{}
  })
  siteInfo.value = res.data
}
const onCollapsed = ()=>{
  collapsed.value = !collapsed.value
}

onMounted (()=>{
  store.systemData()
  siteData()
})

watch (()=>system.value,() => {
  act_sys.value = system.value[0]
})
</script>
<style less scoped>
.asides{
  position: relative;
  width:79px;
  background: #fff;
  transition: .1s ease-out all;
  border-right: 1px solid #f1f2f3;
}
.aside-item {
  cursor: pointer;
  color: #333;
  margin:10px 0 35px 0;
  transition: .1s linear;
  overflow: hidden;
}
.logo-panel{
  padding: 10px;
  margin-bottom:10px ;
  border-bottom:1px solid #f1f2f3;
  background: #fff;
}
.logo-panel h4{
  color: #333;
  margin:0 0 0 10px;
}

.flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.showCollapse{
  position: absolute;
  bottom: 0px;
  height: 40px;
  width: 79px;
  text-align: center;
}
.menu-icon{
  display: inline-block;
  height: 30px;
  width: 100%;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  
}
.collapsed{
  display: block;
  padding: 0px 20px;
}
.onSystem .uncollapsed{
 color:#333;
}
</style>