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

<template>
	<div class="layout-padding" v-loading="loading">

    <el-row class="flex items-center">
      <el-form-item label="商户" prop="merchantId" class="w-60 my-6">
        <select-mch v-model="merchantId" :apiParams="{ types: '1' }" />
      </el-form-item>

      <div class="ml-4">
        <el-button
          icon="folder-add"
          type="primary"
          @click="copyDialogRef.openDialog()"
          v-auth="'canteen_canteenOnlineCategory_add'"
        >
          一键复制
        </el-button>
      </div>
    </el-row>
		<h1 class="mx-auto text-5xl mt-[-40px]">今日菜谱</h1>

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

		<div class="dataDiv">
			<table>
				<tr class="food">
					<td v-if="!loading" class="text-center" @click="addFood(1)">早餐</td>
					<div class="food_list">
						<td class="food_list_item" v-for="(item, index) in foodData1" :key="index" @click="delteData(item.tid)">
							<el-image style="width: 80px; height: 80px" :src="imageBaseUrl + item.picUrl" fit="cover" />
							<div class="w-full flex justify-around items-center text-black mt-2">
								<span>{{ item.name }}</span>
								<span class="mx-1">|</span>
								<span class="text-sm">{{ canteenCategoryOption.find((v: any) => v.id == item.categoryId)?.name }}</span>
							</div>
							<div class="w-full text-lg text-center text-red-600">{{ displayPrice(item.price) }}</div>
						</td>
					</div>
				</tr>
				<tr class="food">
					<td v-if="!loading" class="text-center" @click="addFood(2)">中餐</td>
					<div class="food_list">
						<td class="food_list_item" v-for="(item, index) in foodData2" :key="index" @click="delteData(item.tid)">
							<el-image style="width: 80px; height: 80px" :src="imageBaseUrl + item.picUrl" fit="cover" />
							<div class="w-full flex justify-around items-center text-black mt-2">
								<span>{{ item.name }}</span>
								<span class="mx-1">|</span>
								<span class="text-sm">{{ canteenCategoryOption.find((v: any) => v.id == item.categoryId)?.name }}</span>
							</div>
							<div class="w-full text-lg text-center text-red-600">{{ displayPrice(item.price) }}</div>
						</td>
					</div>
				</tr>
				<tr class="food">
					<td v-if="!loading" class="text-center" @click="addFood(3)">晚餐</td>
					<div class="food_list">
						<td class="food_list_item" v-for="(item, index) in foodData3" :key="index" @click="delteData(item.tid)">
							<el-image style="width: 80px; height: 80px" loading="lazy" :src="imageBaseUrl + item.picUrl" fit="cover" />
							<div class="w-full flex justify-around items-center text-black mt-2">
								<span>{{ item.name }}</span>
								<span class="mx-1">|</span>
								<span class="text-sm">{{ canteenCategoryOption.find((v: any) => v.id == item.categoryId)?.name }}</span>
							</div>
							<div class="w-full text-lg text-center text-red-600">{{ displayPrice(item.price) }}</div>
						</td>
					</div>
				</tr>
			</table>
		</div>

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

<script setup lang="ts" name="systemCanteenDailyMenu">
import { ElMessageBox } from "element-plus"
import { delObjs, selectTimeFoodApi, selectWeekInfo } from "/@/api/canteen/canteenDailyMenu"
import { getAllSimple as getCanteenCategory } from "/@/api/canteen/canteenCategory"
import { useMessage } from "/@/hooks/message"
import { pageJoin } from "/@/api/wallet/mch-manage"
import { displayPrice } from "/@/utils/formatMoney"
import { auth } from "/@/utils/authFunction"

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() // 商户Id
const merchantInfo = ref<any>([])

const addFood = async (hourType: number) => {
	if (!auth("canteen_canteenDailyMenu_add")) return
	if (!merchantId.value) {
		useMessage().error("请选择商户再进行新增")
		return
	}
	//打开新增框
	formDialogRef.value.openDialog(merchantId.value, timedata, hourType)
}
//选中具体时间数据
const timeClick = async (time: string, index: number) => {
	//数据查询操作
	if (time && isActive.value !== index) {
		//时间处理
		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).finally(() => (loading.value = false))
	weekData.data = weekDataRes.data
	isActive.value = new Date().getDay() === 0 ? 6 : new Date().getDay() - 1
	timedata = weekData.data[isActive.value]
	// 时间格式
	timedata = timedata.substring(0, timedata.indexOf("("))
	selectTimeFood()
}

const selectTimeFood = async () => {
	foodData1.value = []
	foodData2.value = []
	foodData3.value = []
	let params = {
		time: timedata,
		merchantId: merchantId.value,
	}
	loading.value = true
	const result = await selectTimeFoodApi(params).finally(() => (loading.value = false))
	result.data.forEach((r: any) => {
		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) => {
	if (!auth("canteen_canteenDailyMenu_del")) return
	ElMessageBox.confirm("确定删除菜品吗？", "删除菜品", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
	})
		.then(async () => {
			try {
				loading.value = true
				const { code } = await delObjs([tid], merchantId.value)
				if (code === 0) {
					message.success("删除成功")
					selectTimeFood()
				} else {
					message.error("删除失败")
				}
			} catch (error) {
				message.error("删除失败")
			} finally {
				loading.value = false
			}
		})
		.catch(() => {})
}

// 获取下拉框选项
const merchantInit = async () => {
	const res = await pageJoin({ current: 1, size: 9999, types: 1 }).finally(() => (loading.value = false))
	merchantInfo.value = res.data.records

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

// 菜品分类
const canteenCategoryOption = ref<any>([])

// 添加复制弹窗组件的引用
const CopyDialog = defineAsyncComponent(() => import('./copyDialog.vue'))
const copyDialogRef = ref()

onMounted(async () => {
	try {
		// 获取菜品分类
		const res = await getCanteenCategory()
		if (res.code === 0) {
			canteenCategoryOption.value = res.data
		}
	} catch (error) {
		canteenCategoryOption.value = []
	}

	await merchantInit()
})
</script>

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

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

	& > 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 {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			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);
	border-left: 2px solid transparent;
	color: rgb(255, 187, 0);
	font-weight: bold;
	position: relative;
	cursor: default;
}
.selectedSpan::before {
	content: "";
	position: absolute;
	left: -1.5px;
	top: -1.5px;
	bottom: -1.5px;
	border-left: 2px solid rgb(255, 187, 0);
}
</style>