toesbieya
6 years ago
parent
f4447fa23b
commit
87757f0b9e
@ -1,13 +1,13 @@ |
|||||||
.form-dialog { |
.abstract-dialog { |
||||||
.el-dialog__body { |
.el-dialog__body { |
||||||
padding: 0; |
padding: 0; |
||||||
} |
} |
||||||
|
|
||||||
.form-dialog-container { |
.abstract-dialog-container { |
||||||
position: relative; |
position: relative; |
||||||
width: 100%; |
width: 100%; |
||||||
|
|
||||||
.form-dialog-body { |
.abstract-dialog-body { |
||||||
padding: 24px 24px 0 |
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"> |
<script type="text/jsx"> |
||||||
export default { |
export default { |
||||||
name: "BackToTop", |
|
||||||
|
|
||||||
functional: true, |
functional: true, |
||||||
|
|
||||||
render() { |
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