1
2
3
4
5
6
7
8
9
10
11
12
<template>
<div class="setting-drawer">
<a-drawer
width="300"
placement="right"
:closable="false"
@close="onClose"
:visible="visible"
style="height: 100%;overflow: auto;"
>
<div class="setting-drawer-index-content">
<div :style="{ marginBottom: '24px' }">
谭毅彬
authored
about a year ago
13
14
15
16
<h4 class="setting-drawer-index-title">{{ $t('system.languageSettings') }}</h4>
<a-list-item>
<j-dict-select-tag type="radioButton" @change="handleLanguageChange" dictCode="sys_language" />
</a-list-item>
17
</div>
谭毅彬
authored
about a year ago
18
<a-divider />
19
<div :style="{ marginBottom: '24px' }">
谭毅彬
authored
about a year ago
20
<h4 class="setting-drawer-index-title">{{ $t('system.otherSettings') }}</h4>
21
22
23
<div>
<a-list :split="false">
<a-list-item>
谭毅彬
authored
about a year ago
24
<a-switch slot="actions" size="small" :defaultChecked="colorWeak" @change="onColorWeak" />
25
<a-list-item-meta>
谭毅彬
authored
about a year ago
26
<div slot="title">{{ $t('system.colorBlindnessMode') }}</div>
27
28
29
</a-list-item-meta>
</a-list-item>
<a-list-item>
谭毅彬
authored
about a year ago
30
<a-switch slot="actions" size="small" :defaultChecked="multipage" @change="onMultipageWeak" />
31
<a-list-item-meta>
谭毅彬
authored
about a year ago
32
<div slot="title">{{ $t('system.multiTabMode') }}</div>
33
34
35
36
37
38
39
</a-list-item-meta>
</a-list-item>
</a-list>
</div>
</div>
</div>
<div class="setting-drawer-index-handle" @click="toggle" v-if="visible">
谭毅彬
authored
about a year ago
40
<a-icon type="close" />
41
42
43
44
45
46
</div>
</a-drawer>
</div>
</template>
<script>
47
48
49
50
51
52
import DetailList from '@/components/tools/DetailList'
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'
谭毅彬
authored
about a year ago
53
import { languageChange, translateDistItems } from '@/api/api'
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
export default {
components: {
DetailList,
SettingItem
},
mixins: [mixin, mixinDevice],
data() {
return {
visible: false,
colorList,
dataFixSiderbar: false
}
},
mounted() {
// 当主题色不是默认色时,才进行主题编译
if (this.primaryColor !== config.primaryColor) {
updateTheme(this.primaryColor)
}
if (this.colorWeak !== config.colorWeak) {
updateColorWeak(this.colorWeak)
}
if (this.multipage !== config.multipage) {
this.$store.dispatch('ToggleMultipage', this.multipage)
78
}
79
80
},
methods: {
谭毅彬
authored
about a year ago
81
82
83
84
handleLanguageChange(lang) {
this.$ls.set('language', lang)
languageChange(lang).then(res => {
if (res.success) {
谭毅彬
authored
about a year ago
85
86
87
const sysAllDictItems = this.$ls.get('UI_CACHE_DB_DICT_DATA')
const allDictItems = translateDistItems(sysAllDictItems)
this.$ls.set('UI_CACHE_DB_DICT_DATA', allDictItems, 7 * 24 * 60 * 60 * 1000)
谭毅彬
authored
about a year ago
88
89
90
91
window.location.reload()
}
})
},
92
93
showDrawer() {
this.visible = true
94
},
95
96
onClose() {
this.visible = false
97
},
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
toggle() {
this.visible = !this.visible
},
onColorWeak(checked) {
this.$store.dispatch('ToggleWeak', checked)
updateColorWeak(checked)
},
onMultipageWeak(checked) {
this.$store.dispatch('ToggleMultipage', checked)
},
handleMenuTheme(theme) {
this.$store.dispatch('ToggleTheme', theme)
},
handleLayout(mode) {
this.$store.dispatch('ToggleLayoutMode', mode)
// 因为顶部菜单不能固定左侧菜单栏,所以强制关闭
this.handleFixSiderbar(false)
// 触发窗口resize事件
triggerWindowResizeEvent()
},
handleContentWidthChange(type) {
this.$store.dispatch('ToggleContentWidth', type)
},
changeColor(color) {
if (this.primaryColor !== color) {
this.$store.dispatch('ToggleColor', color)
updateTheme(color)
125
126
}
},
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
handleFixedHeader(fixed) {
this.$store.dispatch('ToggleFixedHeader', fixed)
},
handleFixedHeaderHidden(autoHidden) {
this.$store.dispatch('ToggleFixedHeaderHidden', autoHidden)
},
handleFixSiderbar(fixed) {
if (this.layoutMode === 'topmenu') {
fixed = false
}
this.dataFixSiderbar = fixed
this.$store.dispatch('ToggleFixSiderbar', fixed)
}
},
}
142
143
144
145
</script>
<style lang="less" scoped>
146
.setting-drawer-index-content {
147
148
149
.setting-drawer-index-blockChecbox {
display: flex;
150
151
152
153
154
155
.setting-drawer-index-item {
margin-right: 16px;
position: relative;
border-radius: 4px;
cursor: pointer;
156
157
158
img {
width: 48px;
159
160
}
161
162
163
164
165
166
167
168
169
.setting-drawer-index-selectIcon {
position: absolute;
top: 0;
right: 0;
width: 100%;
padding-top: 15px;
padding-left: 24px;
height: 100%;
color: #1890ff;
170
font-size: 14px;
171
font-weight: 700;
172
173
174
175
}
}
}
176
177
178
179
180
.setting-drawer-theme-color-colorBlock {
width: 20px;
height: 20px;
border-radius: 2px;
float: left;
181
cursor: pointer;
182
183
184
margin-right: 8px;
padding-left: 0px;
padding-right: 0px;
185
text-align: center;
186
187
color: #fff;
font-weight: 700;
188
189
i {
190
font-size: 14px;
191
192
}
}
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
}
.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;
}
}
217
</style>