pj_admin_cloud/src/views/canteen/canteenDailyMenu/index.vue

<template>
	<div class="layout-padding">
		<el-form-item label="商户" prop="merchantId" class="w-60 ml-10 my-6">
			<select-mch v-model="merchantId" />
		</el-form-item>
		<h1 class="mx-auto text-5xl">今日菜谱</h1>

		<table class="w-11/12 border-collapse cursor-pointer mx-auto">
			<tr>
				<td class="text-6xl" @click="addClick(-1)">&lt;</td>
				<td
					v-for="(item, index) in weekData.data"
					:key="index"
					@click="timeClick(item, index)"
					:class="{ selectedSpan: isActive === index ? 'selected' : '' }"
					class="border-2 border-solid border-gray-200 text-center"
				>
					<span>{{ item }}</span>
				</td>
				<td class="text-6xl" @click="addClick(1)">&gt;</td>
			</tr>
		</table>

		<div class="dataDiv">
			<table>
				<tr class="food">
					<td @click="addFood(1)">早餐</td>
					<div class="food_list">
						<td class="food_list_item" v-for="(item, index) in foodData1" :key="index">
							<el-image
								style="width: 80px; height: 80px"
								:src="imageBaseUrl + item.picUrl"
								fit="cover"
								@click="delteData(item.tid)"
							/>
							<div class="w-full text-center text-black">{{ item.name }}</div>
						</td>
					</div>
				</tr>
				<tr class="food">
					<td @click="addFood(2)">中餐</td>
					<div class="food_list">
						<td class="food_list_item" v-for="(item, index) in foodData2" :key="index">
							<el-image
								style="width: 80px; height: 80px"
								:src="imageBaseUrl + item.picUrl"
								fit="cover"
								@click="delteData(item.tid)"
							/>
							<div class="w-full text-center text-black">{{ item.name }}</div>
						</td>
					</div>
				</tr>
				<tr class="food">
					<td @click="addFood(3)">晚餐</td>
					<div class="food_list">
						<td class="food_list_item" v-for="(item, index) in foodData3" :key="index">
							<el-image
								style="width: 80px; height: 80px"
								:src="imageBaseUrl + item.picUrl"
								fit="cover"
								@click="delteData(item.tid)"
							/>
							<div class="w-full text-center text-black">{{ item.name }}</div>
						</td>
					</div>
				</tr>
			</table>
		</div>

		<!-- 编辑、新增  -->
		<form-dialog ref="formDialogRef" @refresh="selectTimeFood" />
	</div>
</template>

<script setup lang="ts" name="systemCanteenDailyMenu">
import { delObjs, selectTimeFoodApi, selectWeekInfo } from "/@/api/canteen/canteenDailyMenu"
import { useMessage, useMessageBox } from "/@/hooks/message"
import { pageJoin } from "/@/api/wallet/mch-manage"

const FormDialog = defineAsyncComponent(() => import("./form.vue"))
const imageBaseUrl = import.meta.env.VITE_IMAGE_BASE_PATH

const formDialogRef = ref()
const loading = ref(true)

const message = useMessage() // 消息弹窗

const foodData1 = ref<any>({})
const foodData2 = ref<any>({})
const foodData3 = ref<any>({})

let timedata = ""
let isActive = ref(-1)
const weekParams = reactive({
	index: 0,
})
const weekData = reactive({
	data: [],
}) //时间数组
const merchantId = ref()
const merchantInfo = ref<any>([])

const addFood = async (hourType: number) => {
	if (!merchantId.value) {
		useMessage().error("请选择商户再进行新增")
		return
	}
	//打开新增框
	formDialogRef.value.openDialog(null, timedata, hourType, merchantId.value)
}
//选中具体时间数据
const timeClick = async (time: string, index: number) => {
	//数据查询操作
	if (time) {
		//时间处理
		time = time.substring(0, time.indexOf("("))
		timedata = time
		//选中
		isActive.value = index
		selectTimeFood()
	}
}
//切换时间
const addClick = async (index: number) => {
	//数据值操作
	weekParams.index = weekParams.index + index
	fetchData()
}

watch(merchantId, () => {
	fetchData()
})

const fetchData = async () => {
	const weekDataRes = await selectWeekInfo(weekParams)
	weekData.data = weekDataRes.data
	isActive.value = 0
	timedata = weekData.data[0]
	// 时间格式
	timedata = timedata.substring(0, timedata.indexOf("("))
	selectTimeFood()
}

const selectTimeFood = async () => {
	foodData1.value = []
	foodData2.value = []
	foodData3.value = []
	let params = {
		time: timedata,
		merchantId: merchantId.value,
	}
	//最大长度
	let count = 0
	const result = await selectTimeFoodApi(params)
	result.data.forEach((r: any) => {
		if (r.dailyMenuVOS.length > count) {
			count = r.dailyMenuVOS.length
		}
		switch (r.hourType) {
			case 1:
				foodData1.value = r.dailyMenuVOS
				break
			case 2:
				foodData2.value = r.dailyMenuVOS
				break
			case 3:
				foodData3.value = r.dailyMenuVOS
				break
		}
	})
}

// 删除菜品
const delteData = async (tid: number) => {
	await message.delConfirm("确定删除菜品吗？", "今日菜品?")
	try {
		await delObjs([tid])
		message.success("删除成功")
	} catch (error) {
		message.error("删除失败")
	}
	selectTimeFood()
}

/** 初始化下拉框 */
const merchantInit = async () => {
	// 获取下拉框选项
	const res = await pageJoin({ current: 1, size: 9999 })
	merchantInfo.value = res.data.records

	//默认选中第一个
	if (merchantInfo.value) {
		merchantId.value = merchantInfo.value[0].id
		fetchData()
	}
}
onMounted(() => {
	merchantInit()
})
</script>

<style lang="scss">
.dataDiv {
	overflow-x: auto;
}

.food {
	display: flex;
	align-items: center;
	margin-top: 50px;

	& > td {
		width: 60px;
		color: rgb(0, 118, 228);
		font-size: 26px;
		cursor: pointer;
	}

	&_list {
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-left: 20px;

		&_item {
			display: inline-block;
			margin: 0 0 10px 10px;
			padding: 10px 6px;
			background-color: #f2f2f2;
			cursor: pointer;
			box-shadow: #43475545 0 0 0.25em, #5a7dbc0d 0 0.25em 1em;
			border-radius: 5px;
			transition: all 0.2s ease;

			&:hover {
				transform: scale(1.1);
				transition: all 0.2s ease;
			}
		}
	}
}
.selectedSpan {
	border: 2px solid rgb(255, 187, 0);
	color: rgb(255, 187, 0);
}
</style>