提交 827d0823 authored 作者: fit2cloud-chenyw's avatar fit2cloud-chenyw

feat: 浏览器记录页面分割线位置

上级 08d1659b
<template> <template>
<el-aside <el-aside
:width="width" :width="currentWidth"
class="ms-aside-container" class="ms-aside-container"
:style="{'margin-left': !asideHidden ? 0 : '-' + width}" :style="{'margin-left': !asideHidden ? 0 : '-' + currentWidth}"
> >
<slot /> <slot />
<de-horizontal-drag-bar v-if="showDragBar" /> <de-horizontal-drag-bar v-if="showDragBar" :type="type" />
</el-aside> </el-aside>
</template> </template>
<script> <script>
import DeHorizontalDragBar from './dragbar/DeLeft2RightDragBar' import DeHorizontalDragBar from './dragbar/DeLeft2RightDragBar'
import { getLayout } from '@/utils/LayoutUtil'
export default { export default {
name: 'DeAsideContainer', name: 'DeAsideContainer',
components: { DeHorizontalDragBar }, components: { DeHorizontalDragBar },
...@@ -26,12 +27,21 @@ export default { ...@@ -26,12 +27,21 @@ export default {
showDragBar: { showDragBar: {
type: Boolean, type: Boolean,
default: true default: true
},
type: {
type: String,
default: null
} }
}, },
data() { data() {
return { return {
asideHidden: false asideHidden: false
} }
},
computed: {
currentWidth() {
return this.type && getLayout(this.type) || this.width
}
} }
} }
</script> </script>
......
<template> <template>
<div v-left-to-right-drag class="drag-bar" /> <div v-left-to-right-drag="type" class="drag-bar" />
</template> </template>
<script> <script>
export default { export default {
name: 'DeLeft2RightDragBar' name: 'DeLeft2RightDragBar',
props: {
type: {
type: String,
default: null
}
}
} }
</script> </script>
......
import permission from '@/directive/Permission' import permission from '@/directive/Permission'
// import dataPermission from '@/directive/DataPermission' import { setLayout } from '@/utils/LayoutUtil'
export const left2RightDrag = { export const left2RightDrag = {
inserted(el, binding) { inserted(el, binding) {
const value = binding.value
el.onmousedown = function(e) { el.onmousedown = function(e) {
const init = e.clientX const init = e.clientX
const parent = el.parentNode const parent = el.parentNode
...@@ -15,6 +16,8 @@ export const left2RightDrag = { ...@@ -15,6 +16,8 @@ export const left2RightDrag = {
} }
} }
document.onmouseup = function() { document.onmouseup = function() {
value && setLayout(value, parent.style.width)
document.onmousemove = document.onmouseup = null document.onmousemove = document.onmouseup = null
} }
} }
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<topbar v-if="!fullHeightFlag && finishLoad" :show-tips="showTips" /> <topbar v-if="!fullHeightFlag && finishLoad" :show-tips="showTips" />
<de-container :style="mainStyle"> <de-container :style="mainStyle">
<de-aside-container v-if="!sidebar.hide" class="le-aside-container"> <de-aside-container v-if="!sidebar.hide" type="system" class="le-aside-container">
<sidebar class="sidebar-container" /> <sidebar class="sidebar-container" />
</de-aside-container> </de-aside-container>
......
const defaultLayout = {
panel: '260px',
dataset: '260px',
datasource: '260px',
system: '260px'
}
const STORAGE_KEY = 'global_layout'
export const getLayout = (type) => {
const key = STORAGE_KEY + '_' + type
return localStorage.getItem(key) || defaultLayout[type]
}
export const setLayout = (type, val) => {
const key = STORAGE_KEY + '_' + type
localStorage.setItem(key, val || defaultLayout[type])
}
<template> <template>
<de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]"> <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
<de-aside-container> <de-aside-container type="dataset">
<group :save-status="saveStatus" @switchComponent="switchComponent" /> <group :save-status="saveStatus" @switchComponent="switchComponent" />
</de-aside-container> </de-aside-container>
...@@ -30,7 +30,7 @@ import { removeClass } from '@/utils' ...@@ -30,7 +30,7 @@ import { removeClass } from '@/utils'
import { checkCustomDs } from '@/api/dataset/dataset' import { checkCustomDs } from '@/api/dataset/dataset'
export default { export default {
name: 'DataSet', name: 'DataSet',
components: { DeMainContainer, DeContainer, DeAsideContainer, Group, DataHome, ViewTable, AddDB, AddSQL, AddExcel, AddCustom, AddApi}, components: { DeMainContainer, DeContainer, DeAsideContainer, Group, DataHome, ViewTable, AddDB, AddSQL, AddExcel, AddCustom, AddApi },
data() { data() {
return { return {
component: DataHome, component: DataHome,
......
<template> <template>
<de-container> <de-container>
<de-aside-container> <de-aside-container type="panel">
<el-tabs v-model="activeName" class="tab-panel" :stretch="true" @tab-click="handleClick"> <el-tabs v-model="activeName" class="tab-panel" :stretch="true" @tab-click="handleClick">
<el-tab-pane name="PanelList"> <el-tab-pane name="PanelList">
<span slot="label"><i class="el-icon-document tablepanel-i" />{{ $t('panel.panel_list') }}</span> <span slot="label"><i class="el-icon-document tablepanel-i" />{{ $t('panel.panel_list') }}</span>
......
<template> <template>
<de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]"> <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
<de-aside-container style="padding: 0 0;"> <de-aside-container style="padding: 0 0;" type="datasource">
<ds-tree ref="dsTree" :datasource="datasource" @switch-main="switchMain"/> <ds-tree ref="dsTree" :datasource="datasource" @switch-main="switchMain" />
</de-aside-container> </de-aside-container>
<de-main-container> <de-main-container>
<component :is="component" v-if="!!component" :params="param" :tData="tData" @refresh-type="refreshType" <component
@switch-component="switchMain"/> :is="component"
v-if="!!component"
:params="param"
:t-data="tData"
@refresh-type="refreshType"
@switch-component="switchMain"
/>
</de-main-container> </de-main-container>
</de-container> </de-container>
</template> </template>
...@@ -20,7 +26,7 @@ import DataHome from './DataHome' ...@@ -20,7 +26,7 @@ import DataHome from './DataHome'
export default { export default {
name: 'DsMain', name: 'DsMain',
components: {DeMainContainer, DeContainer, DeAsideContainer, DsTree, DataHome}, components: { DeMainContainer, DeContainer, DeAsideContainer, DsTree, DataHome },
data() { data() {
return { return {
component: DataHome, component: DataHome,
...@@ -37,7 +43,7 @@ export default { ...@@ -37,7 +43,7 @@ export default {
methods: { methods: {
// 切换main区内容 // 切换main区内容
switchMain(param) { switchMain(param) {
const {component, componentParam, tData} = param const { component, componentParam, tData } = param
this.component = DataHome this.component = DataHome
this.param = null this.param = null
this.$nextTick(() => { this.$nextTick(() => {
...@@ -55,7 +61,7 @@ export default { ...@@ -55,7 +61,7 @@ export default {
}) })
}, },
refreshType(datasource) { refreshType(datasource) {
this.datasource = datasource; this.datasource = datasource
this.$refs.dsTree && this.$refs.dsTree.refreshType(datasource) this.$refs.dsTree && this.$refs.dsTree.refreshType(datasource)
}, },
msg2Current(sourceParam) { msg2Current(sourceParam) {
......
<template> <template>
<de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]"> <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
<de-main-container> <de-main-container>
<ds-main ref="dsMain"/> <ds-main ref="dsMain" />
</de-main-container> </de-main-container>
</de-container> </de-container>
</template> </template>
...@@ -14,7 +14,7 @@ import bus from '@/utils/bus' ...@@ -14,7 +14,7 @@ import bus from '@/utils/bus'
export default { export default {
name: 'Panel', name: 'Panel',
components: {DeMainContainer, DeContainer, DsMain}, components: { DeMainContainer, DeContainer, DsMain },
data() { data() {
return { return {
component: DsMain, component: DsMain,
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论