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="overflow-y-auto">
			<table class="my-4">
				<tr>
					<td class="w-16 h-48 text-4xl text-center cursor-pointer text-blue-500" @click="addFood(1)">早餐</td>
					<td class="w-64 h-48 text-center" v-for="(item, index) in foodData1" :key="index">
						<img
							@click="delteData(item.tid)"
							:src="imageBaseUrl + item.picUrl"
							class="p-3 w-full h-full object-contain"
						/>
					</td>
				</tr>
				<tr>
					<td class="w-16 h-48 text-4xl text-center cursor-pointer text-blue-500" @click="addFood(2)">中餐</td>
					<td class="w-64 h-48 text-center" v-for="(item, index) in foodData2" :key="index">
						<img
							@click="delteData(item.tid)"
							:src="imageBaseUrl + item.picUrl"
							class="p-3 w-full h-full object-contain"
						/>
					</td>
				</tr>
				<tr>
					<td class="w-16 h-48 text-4xl text-center cursor-pointer text-blue-500" @click="addFood(3)">晚餐</td>
					<td class="w-64 h-48 text-center" v-for="(item, index) in foodData3" :key="index">
						<img
							@click="delteData(item.tid)"
							:src="imageBaseUrl + item.picUrl"
							class="p-3 w-full h-full object-contain"
						/>
					</td>
				</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">
.selectedSpan {
	border: 2px solid rgb(255, 187, 0);
	color: rgb(255, 187, 0);
}
</style>