zhengbasai/library/components/VabNav/index.vue

<script>
  import { useRoutesStore } from '@/store/modules/routes'
  import { useUserStore } from '@/store/modules/user'
  import { translate } from '@/i18n'
  import { isExternal } from '@/utils/validate'
  import { openFirstMenu } from '@/config'
  import { clearStorage } from './api/index'
  import { ElMessage } from 'element-plus'
  export default defineComponent({
    props: {
      layout: {
        type: String,
        default: '',
      },
    },
    setup() {
      const state = reactive({
        factoryRef: null,
        factory: {},
        type: 0, //4驻场
        user_id: 0,
      })
      //获取初始数据
      const _init = () => {
        const factory = JSON.parse(localStorage.getItem('factory'))
        state.factory = factory && factory !== 'undefined' ? factory : ''
      }
      const router = useRouter()
      const routesStore = useRoutesStore()
      const {
        getTab: tab,
        getTabMenu: tabMenu,
        getRoutes: routes,
      } = storeToRefs(routesStore)

      const handleTabClick = () => {
        nextTick(() => {
          if (isExternal(tabMenu.value.path)) {
            window.open(tabMenu.value.path)
            setTimeout(() => {
              router.push('/')
            }, 1000)
          } else if (openFirstMenu)
            router.push(tabMenu.value.redirect || tabMenu.value)
        })
      }
      //清除缓存
      const doClear = async () => {
        await clearStorage()
        ElMessage.success('清除成功')
        localStorage.removeItem('dictsSetting')
        localStorage.removeItem('factory')
        localStorage.removeItem('factory_list')
        setTimeout(() => {
          location.reload()
        }, 1000)
      }

      //切换工厂
      const changeFactory = () => {
        state['factoryRef'].showEdit()
      }
      onMounted(() => {
        const userStore = useUserStore()
        const { type, id } = storeToRefs(userStore)
        state.user_id = id
        console.log(type, '00000')
        state.type = type
        if (state.type == 4) {
          _init()
        }
      })
      return {
        ...toRefs(state),
        changeFactory,
        doClear,
        handleTabClick,
        _init,
      }
    },
  })
</script>

<template>
  <div class="vab-nav">
    <el-row :gutter="15">
      <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="4">
        <div class="left-panel">
          <vab-fold v-if="layout !== 'float'" />
          <el-tabs
            v-if="layout === 'comprehensive'"
            v-model="tab.data"
            tab-position="top"
            @tab-click="handleTabClick"
          >
            <template v-for="(item, index) in routes" :key="index + item.name">
              <el-tab-pane :name="item.name">
                <template #label>
                  <vab-icon
                    v-if="item.meta.icon"
                    :icon="item.meta.icon"
                    :is-custom-svg="item.meta.isCustomSvg"
                    style="min-width: 16px"
                  />
                  <span>{{ translate(item.meta.title) }}</span>
                </template>
              </el-tab-pane>
            </template>
          </el-tabs>
          <vab-breadcrumb v-else class="hidden-xs-only" />
        </div>
      </el-col>
      <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="20">
        <CheckFactory ref="factoryRef" />
        <div class="right-panel">
          <el-button
            v-if="type == 4"
            style="color: red"
            type="text"
            @click="changeFactory"
          >
            {{ factory.name }}
            <el-icon><CaretBottom /></el-icon>
          </el-button>
          <el-button v-if="user_id == 1" type="text" @click="doClear">
            清除缓存
          </el-button>
          <!-- <vab-error-log /> -->
          <vab-lock />
          <!-- <vab-search /> -->
          <!-- <vab-notice /> -->
          <vab-full-screen />
          <!-- <vab-language /> -->
          <!-- <vab-theme /> -->
          <vab-refresh />
          <vab-avatar />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
  .vab-nav {
    position: relative;
    height: $base-nav-height;
    padding-right: $base-padding;
    padding-left: $base-padding;
    overflow: hidden;
    user-select: none;
    background: var(--el-color-white);
    box-shadow: $base-box-shadow;

    .left-panel {
      display: flex;
      align-items: center;
      justify-items: center;
      height: $base-nav-height;

      :deep() {
        .fold-unfold {
          margin-right: $base-margin;
        }

        .el-tabs {
          width: 100%;
          margin-left: $base-margin;

          .el-tabs__header {
            margin: 0;

            > .el-tabs__nav-wrap {
              display: flex;
              align-items: center;

              .el-icon-arrow-left,
              .el-icon-arrow-right {
                font-weight: 600;
                color: var(--el-color-grey);
              }

              .el-tabs__item {
                i {
                  margin-right: 3px;
                }
              }
            }
          }
        }

        .el-tabs__nav-wrap::after {
          display: none;
        }
      }
    }

    .right-panel {
      display: flex;
      align-content: center;
      align-items: center;
      justify-content: flex-end;
      height: $base-nav-height;

      :deep() {
        [class*='ri-'] {
          margin-left: $base-margin;
          color: var(--el-color-grey);
          cursor: pointer;
        }

        button {
          [class*='ri-'] {
            margin-left: 0;
            color: var(--el-color-white);
            cursor: pointer;
          }
        }
      }
    }
  }
</style>