<template>
|
<div class='setting-drawer'>
|
<a-drawer
|
width='300'
|
placement='right'
|
:closable='false'
|
:visible='visible'
|
:get-container='false'
|
:wrap-style="{ position: 'absolute' }"
|
@close='onClose'
|
>
|
<div class='setting-drawer-index-content'>
|
|
|
<div :style="{ marginBottom: '24px' }">
|
<h3 class='setting-drawer-index-title'>主题色</h3>
|
|
<div style='height: 20px'>
|
<a-tooltip class='setting-drawer-theme-color-colorBlock' v-for='(item, index) in colorList' :key='index'>
|
<template slot='title'>
|
{{ item.key }}
|
</template>
|
<a-tag :color='item.color' @click='changeTheme(item.color)'>
|
<a-icon type='check' v-if='item.color === primaryColor'></a-icon>
|
</a-tag>
|
</a-tooltip>
|
|
</div>
|
</div>
|
<a-divider />
|
|
<div :style="{ marginBottom: '24px' }">
|
<h3 class='setting-drawer-index-title'>基础设置</h3>
|
|
|
<div :style="{ marginTop: '24px' }">
|
<a-list :split='false'>
|
|
<a-list-item>
|
<a-switch slot='actions' size='small' :checked='collapsable' @change='handleCollapsable' />
|
<a-list-item-meta>
|
<div slot='title'>节点收起</div>
|
</a-list-item-meta>
|
</a-list-item>
|
<a-list-item>
|
<a-switch slot='actions' size='small' :checked='disabled' @change='handleDisabled' />
|
<a-list-item-meta>
|
<div slot='title'>节点禁止编辑</div>
|
</a-list-item-meta>
|
</a-list-item>
|
<a-list-item>
|
<a-switch slot='actions' size='small' :checked='scalable' @change='handleScalable' />
|
<a-list-item-meta>
|
<div slot='title'>视图缩放</div>
|
</a-list-item-meta>
|
</a-list-item>
|
|
<a-list-item>
|
<a-switch slot='actions' size='small' :disabled='!scalable' :checked='zoomWheel'
|
@change='handleZoomWheel' />
|
<a-list-item-meta>
|
<div slot='title' :style="{ textDecoration: !scalable ? 'line-through' : 'unset' }">鼠标滚轮控制缩放</div>
|
</a-list-item-meta>
|
</a-list-item>
|
|
</a-list>
|
</div>
|
</div>
|
<a-divider />
|
|
<div :style="{ marginBottom: '24px' }">
|
<h3 class='setting-drawer-index-title'>其他设置</h3>
|
<div>
|
<a-list :split='false'>
|
|
<a-list-item>
|
<a-list-item-meta>
|
<div slot='title'>背景颜色</div>
|
</a-list-item-meta>
|
</a-list-item>
|
|
<a-list-item>
|
<div style='height: 20px'>
|
<a-tooltip class='setting-drawer-theme-color-colorBlock' v-for='(item, index) in colorList'
|
:key='index'>
|
<template slot='title'>
|
{{ item.key }}
|
</template>
|
<a-tag :color='item.color' @click='changeColor(item.color,1)'>
|
<a-icon type='check' v-if='item.color === bgColor'></a-icon>
|
</a-tag>
|
</a-tooltip>
|
|
</div>
|
</a-list-item>
|
|
<a-list-item>
|
<a-list-item-meta>
|
<div slot='title'>文字颜色</div>
|
</a-list-item-meta>
|
</a-list-item>
|
|
<a-list-item>
|
<div style='height: 20px'>
|
<a-tooltip class='setting-drawer-theme-color-colorBlock' v-for='(item, index) in colorList'
|
:key='index'>
|
<template slot='title'>
|
{{ item.key }}
|
</template>
|
<a-tag :color='item.color' @click='changeColor(item.color,2)'>
|
<a-icon type='check' v-if='item.color === textColor'></a-icon>
|
</a-tag>
|
</a-tooltip>
|
|
</div>
|
</a-list-item>
|
|
</a-list>
|
</div>
|
</div>
|
<a-divider />
|
|
</div>
|
<div class='setting-drawer-index-handle' @click='toggle' v-if='visible'>
|
<!-- <a-icon type="setting" v-if="!visible"/>-->
|
<!-- <a-icon type="close" v-else/>-->
|
<a-icon type='close' />
|
</div>
|
</a-drawer>
|
</div>
|
</template>
|
|
<script>
|
import SettingItem from '@/components/setting/SettingItem'
|
import config from '@/defaultSettings'
|
import { updateTheme, updateColorWeak, colorList } from '@/components/tools/setting'
|
import { mixin, mixinDevice } from '@/utils/mixin.js'
|
import { triggerWindowResizeEvent } from '@/utils/util'
|
import Vue from 'vue'
|
|
export default {
|
components: {
|
SettingItem
|
},
|
data() {
|
return {
|
disabled: true,
|
scalable: true,
|
zoomWheel: false,
|
collapsable: true,
|
layoutMode: 'slidemenu',
|
contentWidth: 'fixed',
|
primaryColor: {},
|
bgColor: '',
|
textColor: '',
|
visible: false,
|
colorList,
|
dataFixSiderbar: false
|
}
|
},
|
mounted() {
|
|
},
|
methods: {
|
|
onOpen() {
|
this.visible = true
|
this.loadSetting()
|
},
|
|
onClose() {
|
this.visible = false
|
},
|
toggle() {
|
this.visible = !this.visible
|
},
|
loadSetting() {
|
const collapsable = Vue.ls.get('org_setting_collapsable')
|
const disabled = Vue.ls.get('org_setting_disabled')
|
const scalable = Vue.ls.get('org_setting_scalable')
|
const zoomWheel = Vue.ls.get('org_setting_zoomWheel')
|
if (collapsable != null) {
|
this.collapsable = collapsable
|
}
|
console.info(disabled)
|
if (disabled != null) {
|
this.disabled = disabled
|
console.info(this.disabled)
|
}
|
if (scalable != null) {
|
this.scalable = scalable
|
}
|
if (zoomWheel != null) {
|
this.zoomWheel = zoomWheel
|
}
|
|
},
|
onColorWeak(checked) {
|
|
},
|
onMultipageWeak(checked) {
|
},
|
|
handleLayout(mode) {
|
this.$emit('settingCmd', { name: 'horizontal', value: mode })
|
// 触发窗口resize事件
|
triggerWindowResizeEvent()
|
},
|
handleContentWidthChange(type) {
|
|
},
|
changeTheme(color) {
|
this.$message.info('功能开发中~')
|
|
},
|
changeColor(color, type) {
|
this.$message.info('功能开发中~')
|
return
|
if (type == 1) {
|
this.bgColor = color
|
this.$emit('settingCmd', { name: 'bgColor', value: color })
|
} else if (type == 2) {
|
this.textColor = color
|
this.$emit('settingCmd', { name: 'textColor', value: color })
|
}
|
this.$message.info('功能开发中~')
|
},
|
handleCollapsable(collapsable) {
|
this.collapsable = collapsable
|
this.$emit('settingCmd', { name: 'collapsable', value: collapsable })
|
},
|
handleDisabled(disabled) {
|
this.disabled = disabled
|
this.$emit('settingCmd', { name: 'disabled', value: disabled })
|
},
|
handleScalable(scalable) {
|
this.scalable = scalable
|
console.info(this.scalable)
|
this.$emit('settingCmd', { name: 'scalable', value: scalable })
|
},
|
handleZoomWheel(zoomWheel) {
|
this.zoomWheel = zoomWheel
|
this.$emit('settingCmd', { name: 'zoomWheel', value: zoomWheel })
|
}
|
}
|
}
|
</script>
|
|
<style lang='less' scoped>
|
|
.setting-drawer-index-content {
|
|
.setting-drawer-index-blockChecbox {
|
display: flex;
|
|
.setting-drawer-index-item {
|
margin-right: 16px;
|
position: relative;
|
border-radius: 4px;
|
cursor: pointer;
|
|
img {
|
width: 48px;
|
}
|
|
.setting-drawer-index-selectIcon {
|
position: absolute;
|
top: 0;
|
right: 0;
|
width: 100%;
|
padding-top: 15px;
|
padding-left: 24px;
|
color: #1890ff;
|
font-size: 14px;
|
font-weight: 700;
|
}
|
}
|
}
|
|
.setting-drawer-theme-color-colorBlock {
|
width: 20px;
|
height: 20px;
|
border-radius: 2px;
|
float: left;
|
cursor: pointer;
|
margin-right: 8px;
|
padding-left: 0px;
|
padding-right: 0px;
|
text-align: center;
|
color: #fff;
|
font-weight: 700;
|
|
i {
|
font-size: 14px;
|
}
|
}
|
}
|
|
.setting-drawer-index-handle {
|
position: absolute;
|
top: 240px;
|
background: #1890ff;
|
width: 48px;
|
height: 48px;
|
right: 300px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
cursor: pointer;
|
pointer-events: auto;
|
z-index: 1001;
|
text-align: center;
|
font-size: 16px;
|
border-radius: 4px 0 0 4px;
|
|
i {
|
color: rgb(255, 255, 255);
|
font-size: 20px;
|
}
|
}
|
</style>
|
