Jcdm042-Mes.git

wujian

2024-04-15 4fe66d4f3ac6888b10f9b0e5e0f2ab555c650d7d

提交 \| 用户 \| 时间
e57a89	1	<template>
懒	2	<el-drawer size="280px" :visible="visible" :with-header="false" :append-to-body="true" :show-close="false">
	3	<div class="drawer-container">
	4	<div>
	5	<div class="setting-drawer-content">
	6	<div class="setting-drawer-title">
	7	<h3 class="drawer-title">主题风格设置</h3>
	8	</div>
	9	<div class="setting-drawer-block-checbox">
	10	<div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
	11	<img src="@/assets/images/dark.svg" alt="dark">
	12	<div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
	13	<i aria-label="图标: check" class="anticon anticon-check">
	14	<svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class="">
	15	<path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/>
	16	</svg>
	17	</i>
	18	</div>
	19	</div>
	20	<div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-light')">
	21	<img src="@/assets/images/light.svg" alt="light">
	22	<div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
	23	<i aria-label="图标: check" class="anticon anticon-check">
	24	<svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class="">
	25	<path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/>
	26	</svg>
	27	</i>
	28	</div>
	29	</div>
	30	</div>
	31
	32	<div class="drawer-item">
	33	<span>主题颜色</span>
	34	<theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
	35	</div>
	36	</div>
	37
	38	<el-divider/>
	39
	40	<h3 class="drawer-title">系统布局配置</h3>
	41
	42	<div class="drawer-item">
	43	<span>开启 TopNav</span>
	44	<el-switch v-model="topNav" class="drawer-switch" />
	45	</div>
	46
	47	<div class="drawer-item">
	48	<span>开启 Tags-Views</span>
	49	<el-switch v-model="tagsView" class="drawer-switch" />
	50	</div>
	51
	52	<div class="drawer-item">
	53	<span>固定 Header</span>
	54	<el-switch v-model="fixedHeader" class="drawer-switch" />
	55	</div>
	56
	57	<div class="drawer-item">
	58	<span>显示 Logo</span>
	59	<el-switch v-model="sidebarLogo" class="drawer-switch" />
	60	</div>
	61
	62	<div class="drawer-item">
	63	<span>动态标题</span>
	64	<el-switch v-model="dynamicTitle" class="drawer-switch" />
	65	</div>
	66
	67	<el-divider/>
	68
	69	<el-button size="small" type="primary" plain icon="el-icon-document-add" @click="saveSetting">保存配置</el-button>
	70	<el-button size="small" plain icon="el-icon-refresh" @click="resetSetting">重置配置</el-button>
	71	</div>
	72	</div>
	73	</el-drawer>
	74	</template>
	75
	76	<script>
	77	import ThemePicker from '@/components/ThemePicker'
	78
	79	export default {
	80	components: { ThemePicker },
	81	data() {
	82	return {
	83	theme: this.$store.state.settings.theme,
	84	sideTheme: this.$store.state.settings.sideTheme
	85	};
	86	},
	87	computed: {
	88	visible: {
	89	get() {
	90	return this.$store.state.settings.showSettings
	91	}
	92	},
	93	fixedHeader: {
	94	get() {
	95	return this.$store.state.settings.fixedHeader
	96	},
	97	set(val) {
	98	this.$store.dispatch('settings/changeSetting', {
	99	key: 'fixedHeader',
	100	value: val
	101	})
	102	}
	103	},
	104	topNav: {
	105	get() {
	106	return this.$store.state.settings.topNav
	107	},
	108	set(val) {
	109	this.$store.dispatch('settings/changeSetting', {
	110	key: 'topNav',
	111	value: val
	112	})
	113	if (!val) {
	114	this.$store.dispatch('app/toggleSideBarHide', false);
	115	this.$store.commit("SET_SIDEBAR_ROUTERS", this.$store.state.permission.defaultRoutes);
	116	}
	117	}
	118	},
	119	tagsView: {
	120	get() {
	121	return this.$store.state.settings.tagsView
	122	},
	123	set(val) {
	124	this.$store.dispatch('settings/changeSetting', {
	125	key: 'tagsView',
	126	value: val
	127	})
	128	}
	129	},
	130	sidebarLogo: {
	131	get() {
	132	return this.$store.state.settings.sidebarLogo
	133	},
	134	set(val) {
	135	this.$store.dispatch('settings/changeSetting', {
	136	key: 'sidebarLogo',
	137	value: val
	138	})
	139	}
	140	},
	141	dynamicTitle: {
	142	get() {
	143	return this.$store.state.settings.dynamicTitle
	144	},
	145	set(val) {
	146	this.$store.dispatch('settings/changeSetting', {
	147	key: 'dynamicTitle',
	148	value: val
	149	})
	150	}
	151	},
	152	},
	153	methods: {
	154	themeChange(val) {
	155	this.$store.dispatch('settings/changeSetting', {
	156	key: 'theme',
	157	value: val
	158	})
	159	this.theme = val;
	160	},
	161	handleTheme(val) {
	162	this.$store.dispatch('settings/changeSetting', {
	163	key: 'sideTheme',
	164	value: val
	165	})
	166	this.sideTheme = val;
	167	},
	168	saveSetting() {
	169	this.$modal.loading("正在保存到本地，请稍候...");
	170	this.$cache.local.set(
	171	"layout-setting",
	172	`{
	173	"topNav":${this.topNav},
	174	"tagsView":${this.tagsView},
	175	"fixedHeader":${this.fixedHeader},
	176	"sidebarLogo":${this.sidebarLogo},
	177	"dynamicTitle":${this.dynamicTitle},
	178	"sideTheme":"${this.sideTheme}",
	179	"theme":"${this.theme}"
	180	}`
	181	);
	182	setTimeout(this.$modal.closeLoading(), 1000)
	183	},
	184	resetSetting() {
	185	this.$modal.loading("正在清除设置缓存并刷新，请稍候...");
	186	this.$cache.local.remove("layout-setting")
	187	setTimeout("window.location.reload()", 1000)
	188	}
	189	}
	190	}
	191	</script>
	192
	193	<style lang="scss" scoped>
	194	.setting-drawer-content {
	195	.setting-drawer-title {
	196	margin-bottom: 12px;
	197	color: rgba(0, 0, 0, .85);
	198	font-size: 14px;
	199	line-height: 22px;
	200	font-weight: bold;
	201	}
	202
	203	.setting-drawer-block-checbox {
	204	display: flex;
	205	justify-content: flex-start;
	206	align-items: center;
	207	margin-top: 10px;
	208	margin-bottom: 20px;
	209
	210	.setting-drawer-block-checbox-item {
	211	position: relative;
	212	margin-right: 16px;
	213	border-radius: 2px;
	214	cursor: pointer;
	215
	216	img {
	217	width: 48px;
	218	height: 48px;
	219	}
	220
	221	.setting-drawer-block-checbox-selectIcon {
	222	position: absolute;
	223	top: 0;
	224	right: 0;
	225	width: 100%;
	226	height: 100%;
	227	padding-top: 15px;
	228	padding-left: 24px;
	229	color: #1890ff;
	230	font-weight: 700;
	231	font-size: 14px;
	232	}
	233	}
	234	}
	235	}
	236
	237	.drawer-container {
	238	padding: 20px;
	239	font-size: 14px;
	240	line-height: 1.5;
	241	word-wrap: break-word;
	242
	243	.drawer-title {
	244	margin-bottom: 12px;
	245	color: rgba(0, 0, 0, .85);
	246	font-size: 14px;
	247	line-height: 22px;
	248	}
	249
	250	.drawer-item {
	251	color: rgba(0, 0, 0, .65);
	252	font-size: 14px;
	253	padding: 12px 0;
	254	}
	255
	256	.drawer-switch {
	257	float: right
	258	}
	259	}
	260	</style>