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="main-content" type="flex">
      <el-scrollbar class="menu" v-if="showTools">
        <el-input size="small" v-model="search" placeholder="应用名称或文件名" clearable @change="recordSearch"/>
        <el-menu router>
          <el-menu-item v-for="(menu,j) in menus" :key="j" :index="menu.path">
            {{ menu.label }}
          </el-menu-item>
        </el-menu>
      </el-scrollbar>
      <router-view v-if="selectedApp"/>
      <ai-empty v-else>请选择应用</ai-empty>
    </el-row>
    <div v-if="dialog" class="sign-box">
      <ai-sign style="margin: auto" :instance="$axios" :action="{login:'/auth/oauth/token?corpId=ww596787bb70f08288'}"
               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";

export default {
  name: 'app',
  computed: {
    ...mapState(['apps']),
    serveName() {
      let names = {
        development: "村微产品库",
        oms: "运营平台产品分库",
      }
      return names[process.env.NODE_ENV]
    },
    menus() {
      let reg = new RegExp(`.*${this.search.replace(/-/g,'')||''}.*`, 'gi')
      return (this.apps || []).filter(e => !this.search || reg.test(e.name) || reg.test(e.label))
    },
    selectedApp() {
      return this.$route.matched.length > 0
    }
  },
  data() {
    return {
      token: "",
      search: "",
      dialog: false,
      showTools: true
    }
  },
  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)
        }
      })
    },
    handleLogin() {
      this.$axios.delete("/auth/token/logout").then(() => {
        this.dialog = true
      })
    },
    recordSearch() {
      localStorage.setItem("searchApp", this.search)
    }
  },
  created() {
    this.search = localStorage.getItem("searchApp") || ""
    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;
}

.villageFinance-autocomplete {
  width: auto !important;

  li {
    line-height: normal !important;
    padding: 7px !important;
    border-bottom: 1px solid #f1f1f1;

    &:hover {
      background-color: #f4f4f4 !important;
    }
  }

  .name {
    text-overflow: ellipsis;
    line-height: normal;
    overflow: hidden;
  }

  .addr {
    font-size: 12px;
    color: #b4b4b4;
  }

  .highlighted .addr {
    color: #ddd;
  }
}

#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;
  gap: 5px;

  .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: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 16px;

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

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

  & > .main-content {
    width: 100%;
    flex: 1;
    min-height: 0;
    box-sizing: border-box;

    & > *:last-child {
      flex: 1;
      min-width: 0;
    }
  }

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