toesbieya
6 years ago
parent
f4447fa23b
commit
87757f0b9e
@ -1,13 +1,13 @@ |
||||
.form-dialog { |
||||
.abstract-dialog { |
||||
.el-dialog__body { |
||||
padding: 0; |
||||
} |
||||
|
||||
.form-dialog-container { |
||||
.abstract-dialog-container { |
||||
position: relative; |
||||
width: 100%; |
||||
|
||||
.form-dialog-body { |
||||
.abstract-dialog-body { |
||||
padding: 24px 24px 0 |
||||
} |
||||
|
||||
@ -1,11 +0,0 @@ |
||||
<script type="text/jsx"> |
||||
export default { |
||||
name: "ContextmenuItem", |
||||
|
||||
functional: true, |
||||
|
||||
render(h, context) { |
||||
return <li class="contextmenu-item" {...context.data}>{context.children}</li> |
||||
} |
||||
} |
||||
</script> |
||||
@ -1,13 +0,0 @@ |
||||
<script type="text/jsx"> |
||||
export default { |
||||
data: () => ({show: false}), |
||||
|
||||
render() { |
||||
return ( |
||||
<transition name="el-fade-in-linear"> |
||||
{this.show && <div class="aside-hidden-mask" on-click={this.onClick}/>} |
||||
</transition> |
||||
) |
||||
} |
||||
} |
||||
</script> |
||||
@ -1,67 +0,0 @@ |
||||
<script type="text/jsx"> |
||||
import {getters as iframeGetters} from "@/layout/store/iframe" |
||||
import {getters as settingGetters} from "@/layout/store/setting" |
||||
import {getters as tagsViewGetters} from "@/layout/store/tagsView" |
||||
import BackToTop from "./component/BackToTop" |
||||
import PageHeader from "./component/PageHeader" |
||||
import PageView from "./component/PageView" |
||||
import PageFooter from "./component/PageFooter" |
||||
|
||||
export default { |
||||
name: 'AppMain', |
||||
|
||||
components: {BackToTop, PageHeader, PageView, PageFooter}, |
||||
|
||||
computed: { |
||||
showPageHeader() { |
||||
if (!settingGetters.showPageHeader) return false |
||||
return this.$route.meta.pageHeader !== false |
||||
}, |
||||
showBackToTop: () => settingGetters.showBackToTop, |
||||
|
||||
cachedViews: () => tagsViewGetters.cachedViews, |
||||
transitionName: () => tagsViewGetters.transitionName, |
||||
|
||||
showIframe: () => iframeGetters.show, |
||||
currentIframe: () => iframeGetters.current, |
||||
iframeList: () => iframeGetters.list, |
||||
}, |
||||
|
||||
methods: { |
||||
renderPage() { |
||||
return ( |
||||
<div v-show={!this.showIframe} class="scroll-container"> |
||||
{this.showPageHeader && <page-header/>} |
||||
<page-view include={this.cachedViews} transition-name={this.transitionName}/> |
||||
<page-footer/> |
||||
</div> |
||||
) |
||||
}, |
||||
renderIframe() { |
||||
return this.iframeList.map(src => ( |
||||
<iframe |
||||
v-show={this.showIframe && src === this.currentIframe} |
||||
id={src} |
||||
key={src} |
||||
src={src} |
||||
frameborder="0" |
||||
height="100%" |
||||
width="100%" |
||||
/> |
||||
)) |
||||
} |
||||
}, |
||||
|
||||
render() { |
||||
return ( |
||||
<main class="router-main"> |
||||
{this.renderPage()} |
||||
{this.renderIframe()} |
||||
{this.showBackToTop && <back-to-top/>} |
||||
</main> |
||||
) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" src="./style.scss"></style> |
||||
@ -1,7 +1,5 @@ |
||||
<script type="text/jsx"> |
||||
export default { |
||||
name: "BackToTop", |
||||
|
||||
functional: true, |
||||
|
||||
render() { |
||||
@ -0,0 +1,56 @@ |
||||
<script type="text/jsx"> |
||||
import {getters as pageGetters} from "@/layout/store/page" |
||||
import {getters as tagsViewGetters} from "@/layout/store/tagsView" |
||||
import BackToTop from "./component/BackToTop" |
||||
import PageHeader from "./component/PageHeader" |
||||
import PageView from "./component/PageView" |
||||
import PageFooter from "./component/PageFooter" |
||||
|
||||
export default { |
||||
name: 'Page', |
||||
|
||||
components: {BackToTop, PageHeader, PageView, PageFooter}, |
||||
|
||||
methods: { |
||||
renderPage() { |
||||
const render = pageGetters.showPageHeader && this.$route.meta.pageHeader !== false |
||||
const {cachedViews, transitionName} = tagsViewGetters |
||||
|
||||
return ( |
||||
<div v-show={!pageGetters.showIframe} class="scroll-container"> |
||||
{render && <page-header/>} |
||||
<page-view include={cachedViews} transition-name={transitionName}/> |
||||
<page-footer/> |
||||
</div> |
||||
) |
||||
}, |
||||
renderIframe() { |
||||
const {showIframe, iframeList, currentIframe} = pageGetters |
||||
|
||||
return iframeList.map(src => ( |
||||
<iframe |
||||
v-show={showIframe && src === currentIframe} |
||||
id={src} |
||||
key={src} |
||||
src={src} |
||||
frameborder="0" |
||||
height="100%" |
||||
width="100%" |
||||
/> |
||||
)) |
||||
} |
||||
}, |
||||
|
||||
render() { |
||||
return ( |
||||
<main class="router-main"> |
||||
{this.renderPage()} |
||||
{this.renderIframe()} |
||||
{pageGetters.showBackToTop && <back-to-top/>} |
||||
</main> |
||||
) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" src="./style.scss"></style> |
||||
@ -0,0 +1,75 @@ |
||||
/** |
||||
* 侧边栏的响应式数据 |
||||
*/ |
||||
import Vue from 'vue' |
||||
import {bindThis} from "@/util" |
||||
import {createGetters, createMutations} from "@/util/observable" |
||||
import {getters as appGetters} from "./app" |
||||
|
||||
const state = { |
||||
//抽屉模式时的显隐
|
||||
show: false, |
||||
|
||||
//显示顶部logo
|
||||
showLogo: true, |
||||
|
||||
//手风琴效果
|
||||
uniqueOpen: true, |
||||
|
||||
//是否折叠
|
||||
collapse: false, |
||||
|
||||
//折叠时显示上级
|
||||
showParentOnCollapse: false, |
||||
|
||||
//自动隐藏
|
||||
autoHide: false |
||||
} |
||||
|
||||
const store = Vue.observable(state) |
||||
|
||||
export const getters = createGetters(store) |
||||
|
||||
export const mutations = bindThis({ |
||||
...createMutations(store), |
||||
|
||||
/*折叠和自动隐藏不能同时启用*/ |
||||
collapse(v) { |
||||
if (v) store.autoHide = false |
||||
store.collapse = v |
||||
}, |
||||
autoHide(v) { |
||||
if (v) store.collapse = false |
||||
store.autoHide = v |
||||
}, |
||||
|
||||
/*移动端是打开关闭抽屉，桌面端是展开折叠*/ |
||||
open() { |
||||
if (appGetters.device === 'mobile') { |
||||
store.show = true |
||||
} |
||||
else store.collapse = false |
||||
}, |
||||
close() { |
||||
if (appGetters.device === 'mobile') { |
||||
store.show = false |
||||
} |
||||
else store.collapse = true |
||||
}, |
||||
//切换侧边栏的状态
|
||||
switch(action) { |
||||
switch (action) { |
||||
case 'open': |
||||
return this.open() |
||||
case 'close': |
||||
return this.close() |
||||
default : |
||||
let open = true |
||||
if (appGetters.device === 'mobile') { |
||||
open = !store.show |
||||
} |
||||
else open = store.collapse |
||||
return open ? this.open() : this.close() |
||||
} |
||||
} |
||||
}) |
||||
@ -1,35 +0,0 @@ |
||||
import Vue from 'vue' |
||||
import {createGetters} from "@/util/observable" |
||||
|
||||
const state = { |
||||
show: false, |
||||
current: '', |
||||
list: [] |
||||
} |
||||
|
||||
const store = Vue.observable(state) |
||||
|
||||
function add(src) { |
||||
!store.list.includes(src) && store.list.push(src) |
||||
} |
||||
|
||||
function del(src) { |
||||
const index = store.list.findIndex(i => i === src) |
||||
index > -1 && store.list.splice(index, 1) |
||||
} |
||||
|
||||
function open({src}) { |
||||
store.show = true |
||||
store.current = src |
||||
add(src) |
||||
} |
||||
|
||||
function close({src, del: needDelete}) { |
||||
store.show = false |
||||
store.current = '' |
||||
needDelete && del(src) |
||||
} |
||||
|
||||
export const getters = createGetters(store) |
||||
|
||||
export const mutations = {del, open, close} |
||||
@ -0,0 +1,44 @@ |
||||
/** |
||||
* 路由页面的响应式数据 |
||||
*/ |
||||
import Vue from 'vue' |
||||
import {bindThis} from "@/util" |
||||
import {createGetters, createMutations} from "@/util/observable" |
||||
|
||||
const state = { |
||||
/*iframe的控制*/ |
||||
showIframe: false, |
||||
currentIframe: '', |
||||
iframeList: [], |
||||
|
||||
//是否显示页头
|
||||
showPageHeader: true, |
||||
//是否显示返回顶部按钮
|
||||
showBackToTop: true |
||||
} |
||||
|
||||
const store = Vue.observable(state) |
||||
|
||||
export const getters = createGetters(store) |
||||
|
||||
export const mutations = bindThis({ |
||||
...createMutations(store), |
||||
|
||||
addIframe(src) { |
||||
!store.iframeList.includes(src) && store.iframeList.push(src) |
||||
}, |
||||
delIframe(src) { |
||||
const index = store.iframeList.findIndex(i => i === src) |
||||
index > -1 && store.iframeList.splice(index, 1) |
||||
}, |
||||
openIframe({src}) { |
||||
store.showIframe = true |
||||
store.currentIframe = src |
||||
this.addIframe(src) |
||||
}, |
||||
closeIframe({src, del}) { |
||||
store.showIframe = false |
||||
store.currentIframe = '' |
||||
del && this.delIframe(src) |
||||
} |
||||
}) |
||||
@ -1,69 +0,0 @@ |
||||
import Vue from 'vue' |
||||
import {isEmpty} from "@/util" |
||||
import {createGetters} from "@/util/observable" |
||||
import {getLocalPersonalSettings, setLocalPersonalSettings} from "@/util/storage" |
||||
|
||||
const state = { |
||||
//主题色
|
||||
themeColor: '#1890ff', |
||||
//导航模式
|
||||
navMode: 'mix', |
||||
|
||||
//是否显示logo
|
||||
showLogo: true, |
||||
//是否显示页头
|
||||
showPageHeader: true, |
||||
//是否使用多页签
|
||||
useTagsView: true, |
||||
|
||||
//侧边栏菜单手风琴效果
|
||||
sidebarUniqueOpen: true, |
||||
//侧边栏菜单是否折叠
|
||||
sidebarCollapse: false, |
||||
//侧边栏菜单折叠时，弹出菜单是否显示上级
|
||||
sidebarShowParent: false, |
||||
//是否自动隐藏侧边栏菜单
|
||||
sidebarAutoHidden: false, |
||||
|
||||
//是否显示返回顶部按钮
|
||||
showBackToTop: true, |
||||
} |
||||
|
||||
//state填入初始值
|
||||
const localSettings = getLocalPersonalSettings() |
||||
Object.keys(state).forEach(key => { |
||||
if (!isEmpty(localSettings[key])) state[key] = localSettings[key] |
||||
}) |
||||
|
||||
const store = Vue.observable(state) |
||||
|
||||
//每次修改个人设置时，同步到localStorage
|
||||
function createMutations(store) { |
||||
return Object.keys(store).reduce((mutations, key) => { |
||||
mutations[key] = data => { |
||||
store[key] = data |
||||
setLocalPersonalSettings(store) |
||||
} |
||||
return mutations |
||||
}, {}) |
||||
} |
||||
|
||||
export const getters = createGetters(store) |
||||
|
||||
export const mutations = { |
||||
...createMutations(store), |
||||
|
||||
sidebarCollapse(v) { |
||||
//当启用侧边栏折叠时，停用自动隐藏侧边栏
|
||||
if (v) store.sidebarAutoHidden = false |
||||
store.sidebarCollapse = v |
||||
setLocalPersonalSettings(store) |
||||
}, |
||||
|
||||
sidebarAutoHidden(v) { |
||||
//当启用自动隐藏侧边栏时，停用侧边栏折叠
|
||||
if (v) store.sidebarCollapse = false |
||||
store.sidebarAutoHidden = v |
||||
setLocalPersonalSettings(store) |
||||
} |
||||
} |
||||
@ -0,0 +1,18 @@ |
||||
import {getInitialValue} from "@/util" |
||||
|
||||
//vuex中根据state批量生成对应的mutation
|
||||
export function createMutations(state, all = false) { |
||||
const keys = Object.keys(state) |
||||
const obj = {} |
||||
keys.forEach(key => { |
||||
obj[key] = (s, v) => s[key] = v |
||||
}) |
||||
if (all) { |
||||
obj['$all'] = (s, v) => { |
||||
keys.forEach(key => { |
||||
s[key] = v && v[key] || getInitialValue(s[key]) |
||||
}) |
||||
} |
||||
} |
||||
return obj |
||||
} |
||||
Loading…
Reference in new issue