Files
dvcp_v2_webapp/examples/App.vue
2024-10-10 17:35:04 +08:00

148 lines
3.4 KiB
Vue

<template>
<div id="app">
<header-nav v-if="showTools" title="web端产品库">
<template #right>
<mock/>
<div @click="showTools=false,dvDev=true">大屏开发</div>
<div @click="showTools=false">隐藏工具栏</div>
<div @click="handleLogin">点此登录</div>
</template>
</header-nav>
<ai-dv-wrapper class="fill" v-if="dvDev">
<router-view v-bind="commonAttrs"/>
</ai-dv-wrapper>
<el-row v-else-if="showTools" class="fill mar-t48" type="flex">
<slider-nav/>
<main-content class="fill" :commonAttrs="commonAttrs"/>
</el-row>
<router-view class="fill" v-else v-bind="commonAttrs"/>
<div v-if="dialog" class="sign-box">
<ai-sign style="margin: auto" :instance="$request" :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 SliderNav from "./components/sliderNav";
import MainContent from "./components/mainContent";
import HeaderNav from "./components/headerNav";
import {mapActions, mapMutations, mapState} from "vuex";
import Mock from "./components/mock";
import AiDvWrapper from "dui/dv/layout/AiDvWrapper/AiDvWrapper.vue";
export default {
name: 'app',
components: {AiDvWrapper, Mock, HeaderNav, MainContent, SliderNav},
computed: {
...mapState(['user']),
login() {
let url = '/auth/oauth/token';
/project\/sass/g.test(location.pathname) && (url += "?corpId=ww596787bb70f08288")
return url
},
commonAttrs() {
return {
instance: this.$request,
dict: this.$dict,
permissions: this.$permissions
}
}
},
data() {
return {
dialog: false,
showTools: true,
dvDev: false
}
},
watch: {
showTools(v) {
v && (this.dvDev = false)
}
},
methods: {
...mapMutations(['setToken']),
...mapActions(['getUserInfo', 'getFinanceUser']),
getToken(params) {
if (params.access_token) {
this.setToken([params.token_type, params.access_token].join(' '))
this.dialog = false
this.$message.success("登录成功,正在刷新页面...")
location.reload()
} else this.$message.error(params.msg || "登录失败!")
},
handleLogin() {
this.$request.delete("/auth/token/logout").finally(() => {
this.dialog = true
})
},
handleMock() {
}
},
created() {
const {jWeixin} = window
window.wx = jWeixin
if (this.user.token) this.getUserInfo().finally(() => {
if (/^\/project\/xiushan/.test(location.pathname)) {
this.getFinanceUser()
}
})
}
}
</script>
<style lang="scss">
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.mar-t48 {
margin-top: 48px;
}
#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;
z-index: 999;
&:hover {
opacity: 1;
}
}
li {
list-style-type: none;
}
.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>