初始化
This commit is contained in:
aixianling
226
examples/App.vue
Normal file
226
examples/App.vue
Normal file
@@ -0,0 +1,226 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user