OnlineEducation-student-front/src/views/student/classCentre/rightMenu.vue

<template>
	<div class="rightBtn">
		<a-menu v-model:selectedKeys="selectedKeys" style="width: 60px" mode="inline" theme="dark">
			<a-menu-item :key="item.key" class="btnItem" v-for="(item, idx) in listBtn" @click="selectBtn(item)">
				<div class="fcc">
					<component :is="item.icon"></component>
				</div>
				<div class="fcc">{{ item.title }}</div>
			</a-menu-item>
		</a-menu>
		<rightContent ref="formRef" :idsObj="props.idsObj" :rightItem="rightItem" @videoSpeed="videoSpeed"></rightContent>
	</div>
</template>

<script setup name="rightMenu">
	import classCentre from '@/api/student/classCentre'
	import rightContent from './form.vue'
	import { useRoute, useRouter } from 'vue-router'
	import { message } from 'ant-design-vue'
	const route = useRoute()
	const router = useRouter()
	const emit = defineEmits({ videoSpeed: null })
	const props = defineProps({
		dataList: {
			type: [Array, Object],
			default: () => []
		},
		idsObj: {
			type: [Array, Object],
			required: () => {}
		}
	})
	import {
		PlaySquareOutlined,
		FileTextOutlined,
		AlignCenterOutlined,
		SnippetsOutlined,
		CopyOutlined,
		ReadOutlined,
		QuestionCircleOutlined,
		FileOutlined
	} from '@ant-design/icons-vue'
	const formRef = ref()
	const rightItem = ref({})
	const selectedKeys = ref([''])
	const btnList = ref([
		// {
		// 	title: '视频',
		// 	key: '1',
		// 	icon: PlaySquareOutlined,
		// 	type: 1
		// },
		{
			title: '讲义',
			key: '2',
			icon: FileTextOutlined,
			type: 1
		},
		{
			title: '字幕',
			key: '3',
			icon: AlignCenterOutlined,
			type: 1
		},
		{
			title: '作业',
			key: '4',
			icon: SnippetsOutlined,
			type: 3,
			routerUrl: '/student/do',
			routerSrc: '/student/read'
		},
		{
			title: '测验',
			key: '5',
			icon: CopyOutlined,
			type: 3,
			routerUrl: '/student/do',
			routerSrc: '/student/read'
		},
		{
			title: '笔记',
			key: '6',
			icon: ReadOutlined,
			type: 2
		},
		{
			title: '问答',
			key: '7',
			icon: QuestionCircleOutlined,
			type: 4
		},
		{
			title: '考试',
			key: '8',
			icon: FileOutlined,
			type: 3,
			routerUrl: '/student/paper/1',
			relateId: route.query.id
		}
	])
	const selectBtn = (event, edit) => {
		if (event.type == 3) {
			if (event.relateId) {
				if (event.key == '4' || event.key == '5') {
					window.open(`${event.status == 2 ? event.routerSrc : event.routerUrl}?id=${event.relateId}`, '_blank')
				} else {
					router.push({
						path: event.routerUrl,
						query: {
							id: event.relateId
						}
					})
				}
			} else {
				message.error(`没有${event.key == 5 ? '测试' : '作业'}`)
			}
		} else {
			rightItem.value = event
			formRef.value.onOpen(edit ? edit : '')
		}
	}
	const listBtn = computed(() => {
		return btnList.value.map((r) => {
			const match = props.dataList.length && props.dataList.find((e) => r.key == e.funcType)
			return match ? { ...r, ...match } : r
		})
	})

	const videoSpeed = (e) => {
		emit('videoSpeed', e)
	}
	const onClose = () => {
		formRef.value.onClose()
	}
	defineExpose({
		selectBtn,
		onClose
	})
</script>
<style scoped lang="less">
	.rightBtn {
		position: fixed;
		right: 0;
		top: 150px;
		z-index: 99999;
	}
	.fcc {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	:deep(.btnItem) {
		height: auto;
		line-height: normal;
		padding: 10px 0 !important;
	}
</style>