dvcp_v2_webapp/examples/App.vue

<template>
  <div id="app">
    <div class="header" v-if="showTools">
      <b v-text="serveName"/>
      <el-button type="text" @click="showTools=false">隐藏工具栏</el-button>
      <el-button type="text" @click="handleLogin">点此登录</el-button>
    </div>
    <el-row class="fill" type="flex">
      <slider-nav v-if="showTools"/>
      <el-tabs class="layout fill" type="card" :value="currentTab" @tab-click="handleTabClick"
               @tab-remove="handleTabRemove">
        <el-tab-pane label="默认页" class="layoutItem">
          <ai-empty>欢迎使用村微产品库</ai-empty>
        </el-tab-pane>
        <el-tab-pane v-for="op in tabs" :key="op.name" :closable="op.name!='工作台'" :name="op.name" :label="op.label" lazy>
          <router-view/>
        </el-tab-pane>
      </el-tabs>
    </el-row>
    <div v-if="dialog" class="sign-box">
      <ai-sign style="margin: auto" :instance="$axios" :action="{login}"
               visible @login="getToken" :showScanLogin="false"/>
    </div>
    <el-button type="info" v-if="!showTools" class="fixedBtn" @click="showTools=true">显示工具栏</el-button>
  </div>
</template>

<script>
import {mapState} from "vuex";
import SliderNav from "./components/sliderNav";

export default {
  name: 'app',
  components: {SliderNav},
  computed: {
    ...mapState(['apps']),
    serveName() {
      let names = {
        development: "村微产品库",
        oms: "运营平台产品分库",
      }
      return names[process.env.NODE_ENV]
    },
    selectedApp() {
      return this.$route.matched.length > 0
    },
    login() {
      let url = '/auth/oauth/token';
      /project\/sass/g.test(location.pathname) && (url += "?corpId=ww596787bb70f08288")
      return url
    },
    currentTab() {
      let {name, query, hash} = this.$route
      return [name, query?.id, hash].join("")
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(v) {
        this.getTabs(v)
      }
    },
  },
  data() {
    return {
      token: "",
      dialog: false,
      showTools: true,
      tabs: []
    }
  },
  methods: {
    setToken() {
      localStorage.setItem('ui-token', this.token)
      this.$message.success("设置token成功!")
    },
    getToken(params) {
      this.token = params.access_token
      this.setToken()
      this.dialog = false
      location.reload()
    },
    getUserInfo() {
      this.$axios.post("/admin/user/detail-phone").then(res => {
        if (res && res.data) {
          this.$store.commit("setUserInfo", res.data)
          if (/^\/project\/xiushan/.test(location.pathname)) {
            this.$store.commit("setFinanceUser")
          }
        }
      })
    },
    handleLogin() {
      this.$axios.delete("/auth/token/logout").then(() => {
        this.dialog = true
      })
    },
    handleTabClick(tab) {
      let to = {}, selectedTab = this.tabs.find(e => e.name == tab.name)
      if (selectedTab) {
        to = {...selectedTab, params: {tabclick: 1}}
      } else {
        let {name, query, hash} = tab
        to = {name, query, hash, params: {tabclick: 1}}
      }
      this.$router.push({...to})
    },
    handleTabRemove(id = this.currentTab) {
      let tabs = JSON.parse(JSON.stringify(this.tabs)),
          index = tabs?.findIndex(e => id == e.name)
      if (id == this.currentTab) {
        let next = tabs?.[index + 1] || tabs?.[index - 1]
        this.handleTabClick(next)
      }
      this.tabs.splice(index, 1)
    },
    getTabs() {
      let {name, query, hash} = this.$route
      let tab = this.tabs.find(e => e.name == this.currentTab)
      if (tab) {
      } else if (name) {
        let menu = this.apps.find(e => e.name == name)
        this.tabs.push({name, query, hash, label: menu?.label})
      }
    },
  },
  created() {
    this.getTabs()
    this.token = localStorage.getItem("ui-token")
    if (this.token) this.getUserInfo()
    wx = jWeixin
  },
  destroyed() {
    this.token = ""
  },
  mounted() {
    document.title = this.serveName
  }
}
</script>

<style lang="scss">
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .fixedBtn {
    position: fixed;
    top: 0;
    right: 60px;
    opacity: 0;

    &:hover {
      opacity: 1;
    }
  }

  li {
    list-style-type: none;
  }

  .menu {
    min-width: 200px;
    flex-shrink: 0;
    height: 100%;
    border-right: solid 1px #e6e6e6;
    background-color: #fff;

    .el-scrollbar__view {
      padding: 4px 8px;
      display: flex;
      flex-direction: column;
    }

    .el-menu {
      border: none;
      flex: 1;
      min-height: 0;
    }
  }

  & > .header {
    text-align: start;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    height: 43px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 16px;
    margin-bottom: 5px;

    & > b {
      flex: 1;
      min-width: 0;
    }

    .el-input {
      max-width: 25%;
    }
  }

  .sign-box {
    z-index: 99;
    margin: -10px;
    display: flex;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
  }


}

.layout {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: #F5F6F9;
  display: flex;
  flex-direction: column;

  & > .el-tabs__header {
    margin-bottom: 0;
    background: linear-gradient(180deg, #FCFCFC 0%, #E0E2E4 100%);
    height: 40px;
    display: flex;
    align-items: flex-end;
    border: none;

    .el-tabs__nav {
      border: none;
    }

    .el-tabs__item {
      padding: 0 8px 0 12px;
      text-align: left;
      min-width: 130px;
      height: 36px;
      line-height: 36px;
      border: none;
      color: #555;
      font-size: 12px;

      & + .el-tabs__item {
        margin-left: 2px;
      }

      .el-icon-close {
        float: right;
        width: auto;
        height: 100%;
        line-height: 36px;
        background: transparent;
        font-size: 16px;
        color: #89b;

        &:hover {
          color: #000;
        }
      }

      &.is-active {
        border: 1px solid #D8DCE3;
        border-bottom: none;
        border-radius: 4px 4px 0 0;
        background: #F5F6F9;
        color: #222;

        &:after {
          display: none;
        }
      }

      &:after {
        position: absolute;
        right: 0;
        content: " ";
        width: 1px;
        background: #D8DCE3;
        height: 24px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }

  .el-tabs__content {
    flex: 1;
    min-height: 0;

    .el-tab-pane {
      height: 100%;
    }
  }
}
</style>