baoshi-swms-app-web/src/views/index.vue

<template>
  <div class="warehouse container">
    <div v-if="menuTrueFalseBy" class="menu">
      <div class="name">
        {{ userInfo.username }}
      </div>
      <div
        v-for="(item, index) in menuList"
        :key="index"
        :class="menuId === item.id ? 'active' : ''"
        @click="onConfirm(item)"
        class="title flex"
      >
        <div class="icon">
          <van-icon :name="item.icon"></van-icon>
        </div>
        <div>{{ item.title }}</div>
      </div>
      <div class="title flex" style="margin-top: 30px;" @click="outLogin">
        <div class="icon">
          <van-icon name="upgrade" />
        </div>
        <div>退出登录</div>
      </div>
    </div>
    <div :class="menuTrueFalseBy ? 'content-box' : 'content-show'">
      <div class="content">
        <van-nav-bar
          placeholder
          :fixed="!menuTrueFalseBy"
          @click-left="back"
          @click-right="showSelect"
        >
          <template #left>
            <div class="u-nav-slot">
              <van-icon name="bars" size="25" />
            </div>
          </template>
          <template #title>
            <div class="flex flexColumn alignCenter">
              <div>工作台</div>
            </div>
          </template>
          <template #right>
            <div style="color: #fff">{{ warehousesMap[warehouse] }}</div>
          </template>
        </van-nav-bar>
        <div class="menu-box">
          <div v-for="(item, index) in menuList[menuId].menu" class="menu-list">
            <div class="menu-title">{{ item.title }}</div>
            <div class="menu-item-box">
              <div v-for="(items, index) in item.children" class="menu-item" @click="onRouter(items.path)">
                <div class="menu-item-icon">
                  <van-icon :name="items.icon" size="28" />
                </div>
                <div class="menu-item-title">{{ items.title }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="menuTrueFalseBy" @click="hideMenu" class="hide-menu"></div>
    </div>
    <select-warehouse ref="selectWarehouseRef" @setWarehouse="setWarehouse" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import menu from '@/hooks/basic/menu.js'
import { useRouter } from 'vue-router'
import { getHeader, goBack } from '@/utils/android'
import { useStore } from '@/store/modules/user'
import { getUserInfo } from '@/api/login/index'
import SelectWarehouse from '@/components/SelectWarehouse.vue'
import { showToast } from 'vant'

const router = useRouter()
const store = useStore()
const userInfo = ref({})
try {
  getHeader()
} catch (error) {
}
setTimeout(() => {
  getUserInfo().then(res => {
    userInfo.value = res.data
  })
}, 300)

const { menuList } = menu()
const menuId = ref(0)
const menuTrueFalseBy = ref(false)
const storeUser = useStore()
const warehouse = ref(storeUser.warehouse)
const warehousesMap = ref({
  'WH99': '测试仓库(WH99)',
  'WH01': '九干仓(WH01)',
  'WH02': '新浜一仓(WH02)',
  'WH10': '新浜二仓(WH10)',
})
const onRouter = (path) => {
  router.push(`/${path}`)
}
const onConfirm = (item) => {
  menuTrueFalseBy.value = false
}
const back = () => {
  try {
    window.android.goBack()
  }catch (e){
    menuTrueFalseBy.value = true
  }
}
const selectWarehouseRef = ref(null)
const showSelect = () => {
  try {
    if(window.android.getHeader()){
      showToast('app内不支持切换仓库')
    }
  }catch (e){
    selectWarehouseRef.value.show(warehouse.value)
  }

}
const hideMenu = () => {
  if (menuTrueFalseBy.value) {
    menuTrueFalseBy.value = false
  }
}
const setWarehouse = (code) => {
  warehouse.value = code
}
const outLogin = () => {
  router.push(`/login`)
}
</script>

<style lang="sass" scoped>
.warehouse
  width: 100%
  height: 100vh
  display: flex

  .menu
    width: 50%
    margin-left: 15px

    .name
      margin: 50px auto
      text-align: center
      font-size: 18px
      font-weight: 500

    .title
      line-height: 40px

    .active
      color: #3c9cff

  .content-box
    width: 50%
    transition: width 0.2s
    overflow: hidden
    background-color: #ffffff
    margin: 80px 0 110px 0
    position: relative

    .content
      width: 375px
      overflow: hidden
      transform: scale(0.75)
      transform-origin: left top
      pointer-events: none

      .menu-box
        .menu-list
          background: #fff
          padding: 10px 0
          font-size: 13px
          margin-bottom: 10px
          color: #333

          .menu-title
            padding: 0 15px 10px 15px
            text-align: left

          .menu-item-box
            display: flex

            .menu-item
              width: 25%

    .hide-menu
      position: absolute
      height: 100%
      width: 100%
      left: 0
      right: 0
      top: 0
      bottom: 0


  .content-show
    width: 100%

    .content
      .menu-box
        .menu-list
          background: #fff
          font-size: 13px
          margin-bottom: 10px
          color: #333

          .menu-title
            padding: 10px 15px 10px 15px
            text-align: left

          .menu-item-box
            display: flex
            flex-wrap: wrap

            .menu-item
              width: 20%
              margin-bottom: 10px

  .grid-text
    font-size: 14px
    color: #909399
    padding: 5px 0 10px 0
</style>