From 12843a60ec47e20d1622e04244748de641e16b34 Mon Sep 17 00:00:00 2001
From: weiwei <ctw@example.com>
Date: Thu, 27 Mar 2025 16:27:11 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8C=85=E5=8E=A2=E6=8E=92=E6=9C=9F=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/canteen/boxesInfo.ts                  |  49 +++--
 src/views/canteen/boxesInfo/index.vue         |   8 +-
 .../canteen/boxesInfo/scheduleDetail.vue      | 197 ++++++++++++++++++
 3 files changed, 227 insertions(+), 27 deletions(-)
 create mode 100644 src/views/canteen/boxesInfo/scheduleDetail.vue

diff --git a/src/api/canteen/boxesInfo.ts b/src/api/canteen/boxesInfo.ts
index ae43cf2..3897c10 100644
--- a/src/api/canteen/boxesInfo.ts
+++ b/src/api/canteen/boxesInfo.ts
@@ -1,41 +1,40 @@
 import request from "/@/utils/request"
 
 export function fetchList(query?: Object) {
-  return request({
-    url: '/canteen/boxesInfo/page',
-    method: 'get',
-    params: query
-  })
+	return request({
+		url: "/canteen/boxesInfo/page",
+		method: "get",
+		params: query,
+	})
 }
 
 export function addObj(obj?: Object) {
-  return request({
-    url: '/canteen/boxesInfo',
-    method: 'post',
-    data: obj
-  })
+	return request({
+		url: "/canteen/boxesInfo",
+		method: "post",
+		data: obj,
+	})
 }
 
 export function getObj(id?: string) {
-  return request({
-    url: '/canteen/boxesInfo/' + id,
-    method: 'get'
-  })
+	return request({
+		url: "/canteen/boxesInfo/" + id,
+		method: "get",
+	})
 }
 
 export function delObjs(ids?: Object) {
-  return request({
-    url: '/canteen/boxesInfo',
-    method: 'delete',
-    data: ids
-  })
+	return request({
+		url: "/canteen/boxesInfo",
+		method: "delete",
+		data: ids,
+	})
 }
 
 export function putObj(obj?: Object) {
-  return request({
-    url: '/canteen/boxesInfo',
-    method: 'put',
-    data: obj
-  })
+	return request({
+		url: "/canteen/boxesInfo",
+		method: "put",
+		data: obj,
+	})
 }
-
diff --git a/src/views/canteen/boxesInfo/index.vue b/src/views/canteen/boxesInfo/index.vue
index 17356bb..5f7a661 100644
--- a/src/views/canteen/boxesInfo/index.vue
+++ b/src/views/canteen/boxesInfo/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="layout-padding">
+	<div v-if="showList" class="layout-padding w-full">
 		<div class="layout-padding-auto layout-padding-view">
 			<el-row v-show="showSearch">
 				<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
@@ -27,6 +27,7 @@
 					>
 						删 除
 					</el-button>
+					<el-button plain type="primary" @click="showList = false">排期详情</el-button>
 					<right-toolbar
 						v-model:showSearch="showSearch"
 						:export="'canteen_boxesInfo_export'"
@@ -87,6 +88,8 @@
 		<!-- 编辑、新增  -->
 		<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
 	</div>
+
+	<schedule-detail v-else @hidden="showList = true" />
 </template>
 
 <script setup lang="ts" name="systemBoxesInfo">
@@ -97,7 +100,7 @@ import { useDict } from "/@/hooks/dict"
 
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import("./form.vue"))
-// 定义查询字典
+const ScheduleDetail = defineAsyncComponent(() => import("./scheduleDetail.vue"))
 
 const { boxes_status } = useDict("boxes_status")
 // 定义变量内容
@@ -108,6 +111,7 @@ const showSearch = ref(true)
 // 多选变量
 const selectObjs = ref([]) as any
 const multiple = ref(true)
+const showList = ref<boolean>(true)
 
 const state: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: {},
diff --git a/src/views/canteen/boxesInfo/scheduleDetail.vue b/src/views/canteen/boxesInfo/scheduleDetail.vue
new file mode 100644
index 0000000..4e9daf5
--- /dev/null
+++ b/src/views/canteen/boxesInfo/scheduleDetail.vue
@@ -0,0 +1,197 @@
+<template>
+	<div v-loading="loading" class="layout-padding w-full">
+		<div class="flex w-80 ml-10 my-6">
+			<el-button plain type="primary" @click="emit('hidden')">返回</el-button>
+			<el-form-item label="商户" prop="merchantId" class="w-60 ml-4">
+				<select-mch v-model="merchantId" :apiParams="{ types: '1' }" />
+			</el-form-item>
+		</div>
+		<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="w-full h-full overflow-auto p-10 flex flex-wrap justify-center">
+			<div
+				class="relative w-40 h-16 leading-[44px] p-2 m-2 text-lg rounded-lg box-border text-slate-950 hover:text-green-600 bg-gray-200/50 border-2 border-solid border-gray-200/50 hover:border-green-800/50 hover:bg-green-400/10 transition-all text-center"
+				v-for="(item, index) in boxesBookingList"
+				:key="index"
+			>
+				<div class="absolute top-0 left-0 w-11 h-5 leading-5 rounded text-slate-500 font-bold bg-amber-300/30 text-sm">
+					{{ booking_status.find((item: any) => item.value == "1")?.label }}
+				</div>
+				{{ item.hour }}
+			</div>
+		</div>
+		<!-- <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> -->
+	</div>
+</template>
+
+<script setup lang="ts" name="systemCanteenDailyMenu">
+import { selectWeekInfo } from "/@/api/canteen/canteenDailyMenu"
+import { pageJoin } from "/@/api/wallet/mch-manage"
+import { fetchList } from "/@/api/canteen/boxesAvailability"
+import { useMessage } from "/@/hooks/message"
+import { useDict } from "/@/hooks/dict"
+
+const emit = defineEmits(["hidden"])
+
+const { booking_status } = useDict("booking_status")
+const loading = ref(false)
+let timedata = ""
+let isActive = ref(-1)
+const weekParams = reactive({
+	index: 0,
+})
+const weekData = reactive({
+	data: [],
+}) // 时间数组
+const boxesBookingList = ref<any>([]) // 包厢当天排期详情列表
+const merchantId = ref() // 商户Id
+const merchantInfo = ref<any>([])
+
+//选中具体时间数据
+const timeClick = async (time: string, index: number) => {
+	//数据查询操作
+	if (time && isActive.value !== index) {
+		//时间处理
+		time = time.substring(0, time.indexOf("("))
+		timedata = time
+		//选中
+		isActive.value = index
+		selectTimeBoxes()
+	}
+}
+//切换时间
+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("("))
+	selectTimeBoxes()
+}
+
+// 获取当天包厢排期详情
+const selectTimeBoxes = async () => {
+	loading.value = true
+	try {
+		const res = await fetchList({ bxDate: timedata, current: 1, size: 24 })
+		if (res.code == 0) {
+			boxesBookingList.value = res.data.records
+		} else {
+			useMessage().error(res.msg || "查询失败")
+		}
+	} catch (error) {
+		useMessage().error("错误")
+	} finally {
+		loading.value = false
+	}
+}
+
+// 获取下拉框选项
+const merchantInit = async () => {
+	loading.value = true
+	const res = await pageJoin({ current: 1, size: 99999 }).finally(() => (loading.value = false))
+	merchantInfo.value = res.data.records
+
+	//默认选中第一个
+	if (merchantInfo.value) {
+		merchantId.value = merchantInfo.value[0].id
+		fetchData()
+	}
+}
+
+onMounted(async () => {
+	await merchantInit()
+})
+</script>
+
+<style scoped>
+.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>