CZO_Boss/src/components/shortcutMenu/index.vue

<template>
	<div class="shortcut" :style="{ height: moreStatus ? 'auto' : '50px' }" @mouseleave="moreClose">
		<div class="tags" @mouseenter="moreOpen">
			<router-link v-for="item in shortcutMenuList" :key="item.menuId" :to="'/' + item.path + '/'" class="tag">
				<span class="font_name">{{ item.menuName }}</span>
				<i class="el-icon-error" v-show="delStatus" @click.prevent="deleteShortcutMenu(item)"></i>
			</router-link>
		</div>
		<div class="btns">
			<a href="javascript:void(0);" title="删除" @click="delStatus = !delStatus">
				<i class="el-icon-delete"></i>
			</a>
		</div>
	</div>
</template>

<script>
import { getUserShortcutMenuList, deleteUserShortcutMenu, addUserShortcutMenu } from '@/api/system/menu'
import EventBus from '@/utils/eventBus'
export default {
	data() {
		return {
			moreStatus: false,
			delStatus: false,
			shortcutMenuList: [], // 快捷菜单列表
			userId: '' // 用户ID
		}
	},
	computed: {
		theme() {
			return this.$store.state.settings.theme
		}
	},
	mounted() {
		this.$nextTick(() => {
			EventBus.$on('addShortcutMenu', obj => {
				let param = {
					menuId: obj.menuId,
					userId: this.userId
				}
				addUserShortcutMenu(param).then(res => {
					if (res.code === 200) {
						this.getUserShortcutMenuList()
					}
				})
			})
		})
	},
	created() {
		this.getUserShortcutMenuList()
	},
	methods: {
		// 快捷菜单列表
		getUserShortcutMenuList() {
			this.userId = this.$store.state.user.userId
			getUserShortcutMenuList(this.userId).then(res => {
				this.shortcutMenuList = res.data
				console.log(this.shortcutMenuList)
			})
		},
		// 删除快捷菜单
		deleteShortcutMenu(menu) {
			let obj = {
				menuId: menu.menuId,
				userId: this.userId
			}
			this.$modal
				.confirm('是否确认删除菜单名称为"' + menu.menuName + '"的数据项？')
				.then(function () {
					return deleteUserShortcutMenu(obj)
				})
				.then(res => {
					console.log(res)
					this.getUserShortcutMenuList()
					this.$modal.msgSuccess('删除成功')
				})
				.catch(() => {})
		},
		isActive(route) {
			return route.path === this.$route.path
		},
		activeStyle(tag) {
			if (!this.isActive(tag)) return {}
			return {
				'background-color': this.theme,
				'border-color': this.theme
			}
		},
		moreOpen() {
			this.moreStatus = true
		},
		moreClose() {
			this.moreStatus = false
		}
	}
}
</script>

<style scoped lang="scss">
.shortcut {
	height: 40px;
	line-height: 40px;
	padding: 0 10px;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	.tags {
		flex: 1;
		.tag {
			font-size: 14px;
			color: #fff;
			margin-right: 5px;
			display: inline-block;
			position: relative;
			background: #4c9898;
			border: #4c9898 1px solid;
			border-radius: 5px;
			margin-top: 7px;
			padding: 0 15px;
			i {
				position: absolute;
				top: 20%;
				right: -10px;
			}
		}
	}
	.btns {
		height: 50px;
		display: flex;
		align-items: center;
		i {
			font-size: 18px;
			color: #fff;
		}
		// .more-open i {
		// 	transform: rotate(-90deg);
		// 	-webkit-transform: rotate(-90deg);
		// 	-moz-transform: rotate(-90deg);
		// 	-o-transform: rotate(-90deg);
		// 	-mz-transform: rotate(-90deg);
		// }
		// .more-close i {
		// 	transform: rotate(90deg);
		// 	-webkit-transform: rotate(90deg);
		// 	-moz-transform: rotate(90deg);
		// 	-o-transform: rotate(90deg);
		// 	-mz-transform: rotate(90deg);
		// }
	}
}
</style>