elink-star
/
ShibeiWorkPlatform_Frontend
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

适配框架

shibei_master
dai 4 years ago
parent
621cdb54a9
commit
5cdf99a18e
4 changed files with 96 additions and 99 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 48
      src/assets/scss/common.scss
  2. 2
      src/js/store/index.js
  3. 2
      src/views/main-content.vue
  4. 143
      src/views/main.vue

48
src/assets/scss/common.scss
View File

@ -4,8 +4,8 @@
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial,
'Microsoft YaHei', '微软雅黑', Arial, sans-serif; sans-serif;
font-size: $--font-size-base; font-size: $--font-size-base;
line-height: $base--line-height; line-height: $base--line-height;
color: $--color-text-primary; color: $--color-text-primary;
@ -35,7 +35,7 @@ img {
} }
.clearfix:before, .clearfix:before,
.clearfix:after { .clearfix:after {
content: ' '; content: " ";
display: table; display: table;
} }
.clearfix:after { .clearfix:after {
@ -144,8 +144,8 @@ img {
background-color: transparent; background-color: transparent;
} }
&-add { &-add {
> span > *[class*='el-icon-'], > span > *[class*="el-icon-"],
> span > *[class*='icon'] { > span > *[class*="icon"] {
vertical-align: middle; vertical-align: middle;
font-size: 18px; font-size: 18px;
margin-right: 5px; margin-right: 5px;
@ -201,6 +201,12 @@ img {
.aui-wrapper { .aui-wrapper {
position: relative; position: relative;
padding-top: $navbar--height; padding-top: $navbar--height;
&.z-iframe {
padding-top: 0;
.aui-content--tabs {
padding-top: 10px;
}
}
} }
/* Sidebar fold /* Sidebar fold
@ -383,7 +389,7 @@ img {
&::after { &::after {
position: absolute; position: absolute;
content: ''; content: "";
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -448,8 +454,8 @@ img {
} }
} }
&__search { &__search {
> *[class*='el-icon-'], > *[class*="el-icon-"],
> *[class*='icon'] { > *[class*="icon"] {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
@ -572,9 +578,7 @@ img {
min-height: calc(#{$content--fill-height} - 2px); min-height: calc(#{$content--fill-height} - 2px);
} }
> .aui-card--fill > .el-card__header + .el-card__body { > .aui-card--fill > .el-card__header + .el-card__body {
min-height: calc( min-height: calc(#{$content--fill-height} - #{$content--card-header-height} - 2px);
#{$content--fill-height} - #{$content--card-header-height} - 2px
);
} }
&--tabs { &--tabs {
padding: $content--tabs-header-height 0 0; padding: $content--tabs-header-height 0 0;
@ -646,7 +650,7 @@ img {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
content: ''; content: "";
width: 100%; width: 100%;
height: 2px; height: 2px;
background-color: $--color-primary; background-color: $--color-primary;
@ -679,15 +683,10 @@ img {
min-height: calc(#{$content--fill-height-tabs} - 2px); min-height: calc(#{$content--fill-height-tabs} - 2px);
} }
> .aui-card--fill > .el-card__header + .el-card__body { > .aui-card--fill > .el-card__header + .el-card__body {
min-height: calc( min-height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px);
#{$content--fill-height-tabs} - #{$content--card-header-height} -
2px
);
} }
&.is-iframe { &.is-iframe {
height: calc( height: calc(#{$content--fill-height-tabs} + #{$content--padding * 2});
#{$content--fill-height-tabs} + #{$content--padding * 2}
);
margin: -$content--padding; margin: -$content--padding;
min-height: auto; min-height: auto;
> .aui-card--fill { > .aui-card--fill {
@ -706,10 +705,7 @@ img {
background-color: #fff; background-color: #fff;
} }
> .aui-card--fill > .el-card__header + .el-card__body { > .aui-card--fill > .el-card__header + .el-card__body {
height: calc( height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px);
#{$content--fill-height-tabs} - #{$content--card-header-height} -
2px
);
} }
} }
} }
@ -739,7 +735,7 @@ img {
/* Page /* Page
------------------------------ */ ------------------------------ */
*[class*='aui-page__'] { *[class*="aui-page__"] {
padding-top: 0; padding-top: 0;
.aui-content { .aui-content {
min-height: auto; min-height: auto;
@ -751,9 +747,7 @@ img {
min-height: calc(100vh - #{$content--padding * 2} - 2px); min-height: calc(100vh - #{$content--padding * 2} - 2px);
} }
> .aui-card--fill > .el-card__header + .el-card__body { > .aui-card--fill > .el-card__header + .el-card__body {
min-height: calc( min-height: calc(100vh - #{$content--padding * 2} - #{$content--card-header-height} - 2px);
100vh - #{$content--padding * 2} - #{$content--card-header-height} - 2px
);
} }
} }
} }

2
src/js/store/index.js
View File

@ -37,6 +37,8 @@ export default new Vuex.Store({
menuList: [], menuList: [],
activeName: "", activeName: "",
}, },
inIframe: window.self !== window.top,
}, },
modules: { modules: {
user, user,

2
src/views/main-content.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<main :class="['aui-content', { 'aui-content--tabs': $route.meta.isTab }]"> <main :class="['aui-content', { 'aui-content--tabs': $route.meta.isTab }]">
<!-- tab展示内容 --> <!-- tab展示内容 -->
<template v-if="$route.meta.isTab"> <template v-if="$route.meta.isTab && !$store.state.inIframe">
<el-dropdown class="aui-content--tabs-tools"> <el-dropdown class="aui-content--tabs-tools">
<i class="el-icon-arrow-down"></i> <i class="el-icon-arrow-down"></i>
<el-dropdown-menu slot="dropdown" <el-dropdown-menu slot="dropdown"

143
src/views/main.vue
View File

@ -7,186 +7,187 @@
{ 'aui-sidebar--fold': $store.state.sidebarFold }, { 'aui-sidebar--fold': $store.state.sidebarFold },
{ {
'aui-sidebar--noside': 'aui-sidebar--noside':
$store.state.sidebarActiveSubMenuList.length == 0 $store.state.sidebarActiveSubMenuList.length == 0,
} },
{ 'z-iframe': $store.state.inIframe },
]" ]"
> >
<template v-if="!loading"> <template v-if="!loading">
<main-navbar ref="ref_navbar" /> <main-navbar ref="ref_navbar" v-if="!$store.state.inIframe" />
<main-sidebar /> <main-sidebar v-if="!$store.state.inIframe" />
<div class="aui-content__wrapper"> <div class="aui-content__wrapper">
<main-content <main-content
v-if="!$store.state.contentIsNeedRefresh" v-if="!$store.state.contentIsNeedRefresh"
@changeCustomerName="changeCustomerName" @changeCustomerName="changeCustomerName"
/> />
</div> </div>
<main-theme-tools /> <main-theme-tools v-if="!$store.state.inIframe" />
</template> </template>
</div> </div>
</template> </template>
<script> <script>
import MainNavbar from './main-navbar' import MainNavbar from "./main-navbar";
import MainSidebar from './main-sidebar' import MainSidebar from "./main-sidebar";
import MainContent from './main-content' import MainContent from "./main-content";
import MainThemeTools from './main-theme-tools' import MainThemeTools from "./main-theme-tools";
import debounce from 'lodash/debounce' import debounce from "lodash/debounce";
import { mapGetters } from 'vuex' import { mapGetters } from "vuex";
import nextTick from 'dai-js/tools/nextTick' import nextTick from "dai-js/tools/nextTick";
export default { export default {
provide() { provide() {
return { return {
// 刷新 // 刷新
refresh() { refresh() {
this.$store.state.contentIsNeedRefresh = true this.$store.state.contentIsNeedRefresh = true;
this.$nextTick(() => { this.$nextTick(() => {
this.$store.state.contentIsNeedRefresh = false this.$store.state.contentIsNeedRefresh = false;
}) });
} },
} };
}, },
data() { data() {
return { return {
loading: true, loading: true,
userType: localStorage.getItem('userType') userType: localStorage.getItem("userType"),
} };
}, },
components: { components: {
MainNavbar, MainNavbar,
MainSidebar, MainSidebar,
MainContent, MainContent,
MainThemeTools MainThemeTools,
}, },
watch: { watch: {
$route: 'routeHandle' $route: "routeHandle",
}, },
async created() { async created() {
this.windowResizeHandle() this.windowResizeHandle();
this.routeHandle(this.$route) this.routeHandle(this.$route);
if (localStorage.getItem('userType') === 'work') { if (localStorage.getItem("userType") === "work") {
Promise.all([this.getWorkUserInfo()]).then(() => { Promise.all([this.getWorkUserInfo()]).then(() => {
this.loading = false this.loading = false;
}) });
} else { } else {
Promise.all([this.getUserInfo()]).then(() => { Promise.all([this.getUserInfo()]).then(() => {
this.loading = false this.loading = false;
}) });
} }
}, },
computed: {}, computed: {},
methods: { methods: {
changeCustomerName(customerName) { changeCustomerName(customerName) {
this.$refs['ref_navbar'].changeCustomerName(customerName) this.$refs["ref_navbar"].changeCustomerName(customerName);
}, },
// 窗口改变大小 // 窗口改变大小
windowResizeHandle() { windowResizeHandle() {
this.$store.state.sidebarFold = this.$store.state.sidebarFold =
document.documentElement['clientWidth'] <= 992 || false document.documentElement["clientWidth"] <= 992 || false;
window.addEventListener( window.addEventListener(
'resize', "resize",
debounce(() => { debounce(() => {
this.$store.state.sidebarFold = this.$store.state.sidebarFold =
document.documentElement['clientWidth'] <= 992 || false document.documentElement["clientWidth"] <= 992 || false;
}, 150) }, 150)
) );
}, },
// 路由, 监听 // 路由, 监听
routeHandle(route) { routeHandle(route) {
if (!route.meta.isTab) { if (!route.meta.isTab) {
return false return false;
} }
var tab = this.$store.state.contentTabs.filter( var tab = this.$store.state.contentTabs.filter(
(item) => item.name === route.name (item) => item.name === route.name
)[0] )[0];
if (!tab) { if (!tab) {
tab = { tab = {
...window.SITE_CONFIG['contentTabDefault'], ...window.SITE_CONFIG["contentTabDefault"],
...route.meta, ...route.meta,
name: route.name, name: route.name,
params: { ...route.params }, params: { ...route.params },
query: { ...route.query } query: { ...route.query },
} };
this.$store.state.contentTabs = this.$store.state.contentTabs =
this.$store.state.contentTabs.concat(tab) this.$store.state.contentTabs.concat(tab);
} }
this.$store.state.sidebarMenuActiveName = tab.menuId this.$store.state.sidebarMenuActiveName = tab.menuId;
this.$store.state.contentTabsActiveName = tab.name this.$store.state.contentTabsActiveName = tab.name;
this.syncLevelOneMenuActive(tab.menuId) this.syncLevelOneMenuActive(tab.menuId);
}, },
async syncLevelOneMenuActive(menuId) { async syncLevelOneMenuActive(menuId) {
await nextTick() await nextTick();
console.log( console.log(
'*******************************', "*******************************",
menuId, menuId,
this.$store.state.sidebarMenuList this.$store.state.sidebarMenuList
) );
const fn = (item) => { const fn = (item) => {
if (item.id == menuId) { if (item.id == menuId) {
return true return true;
} else if (item.children.length > 0) { } else if (item.children.length > 0) {
return item.children.findIndex(fn) !== -1 return item.children.findIndex(fn) !== -1;
} else { } else {
return false return false;
} }
} };
let idx = this.$store.state.sidebarMenuList.findIndex(fn) let idx = this.$store.state.sidebarMenuList.findIndex(fn);
this.$store.state.LevelOneMenuActiveName = this.$store.state.LevelOneMenuActiveName =
idx !== -1 ? this.$store.state.sidebarMenuList[idx].id : '' idx !== -1 ? this.$store.state.sidebarMenuList[idx].id : "";
this.$store.state.sidebarActiveSubMenuList = this.$store.state.sidebarActiveSubMenuList =
idx !== -1 ? this.$store.state.sidebarMenuList[idx].children : [] idx !== -1 ? this.$store.state.sidebarMenuList[idx].children : [];
}, },
// 获取当前管理员信息 // 获取当前管理员信息
getUserInfo() { getUserInfo() {
const url = '/epmetuser/operuser/queryOperUserDto' const url = "/epmetuser/operuser/queryOperUserDto";
return this.$http return this.$http
.get(url) .get(url)
.then(({ data: res }) => { .then(({ data: res }) => {
if (res.code !== 0) { if (res.code !== 0) {
return this.$message.error(res.msg) return this.$message.error(res.msg);
} }
this.$store.state.user.id = res.data.id this.$store.state.user.id = res.data.id;
this.$store.state.user.realName = res.data.realName this.$store.state.user.realName = res.data.realName;
this.$store.state.user.superAdmin = res.data.superAdmin this.$store.state.user.superAdmin = res.data.superAdmin;
this.$store.state.user.gender = data.gender this.$store.state.user.gender = data.gender;
localStorage.setItem('customerId', '') localStorage.setItem("customerId", "");
}) })
.catch(() => {}) .catch(() => {});
}, },
// 获取当前管理员信息 // 获取当前管理员信息
getWorkUserInfo() { getWorkUserInfo() {
const url = '/epmetuser/customerstaff/staffbasicinfo' const url = "/epmetuser/customerstaff/staffbasicinfo";
let params = {} let params = {};
window.app.ajax.post( window.app.ajax.post(
url, url,
params, params,
(data, rspMsg) => { (data, rspMsg) => {
this.$store.state.user = { ...data } this.$store.state.user = { ...data };
console.log('user---hahha', this.$store.state.user) console.log("user---hahha", this.$store.state.user);
// this.$store.state.user.id = data.id // this.$store.state.user.id = data.id
// this.$store.state.user.realName = data.realName // this.$store.state.user.realName = data.realName
// this.$store.state.user.superAdmin = data.superAdmin // this.$store.state.user.superAdmin = data.superAdmin
// this.$store.state.user.gender = data.gender // this.$store.state.user.gender = data.gender
localStorage.setItem('roleList', data.roleList) localStorage.setItem("roleList", data.roleList);
localStorage.setItem('customerId', data.customerId) localStorage.setItem("customerId", data.customerId);
// this.$store.state.user.roleList = data.roleList // this.$store.state.user.roleList = data.roleList
// this.$store.state.user.customerId = data.customerId // this.$store.state.user.customerId = data.customerId
}, },
(rspMsg, data) => { (rspMsg, data) => {
this.$message.error(rspMsg) this.$message.error(rspMsg);
} }
) );
// return this.$http.get(url).then(({ data: res }) => { // return this.$http.get(url).then(({ data: res }) => {
// if (res.code !== 0) { // if (res.code !== 0) {
// return this.$message.error(res.msg) // return this.$message.error(res.msg)
// } // }
// }).catch(() => { }) // }).catch(() => { })
} },
} },
} };
</script> </script>

Write Preview
Loading…
Cancel
Save