From 8775059d5d84990cd601a18af7574c7de22496ac Mon Sep 17 00:00:00 2001
From: zjf <1799650030@qq.com>
Date: Thu, 14 Aug 2025 12:05:10 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A4=90=E6=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/canteen/timeSlotConfig.ts            |  41 +++
 src/views/canteen/boxesAvailability/form.vue | 155 ++++++++--
 src/views/canteen/boxesBooking/form.vue      | 308 ++++++++++++++-----
 src/views/canteen/boxesBooking/index.vue     |  90 ++++--
 src/views/canteen/boxesInfo/form.vue         | 103 +++++--
 src/views/canteen/boxesInfo/index.vue        |  31 +-
 src/views/canteen/canteenOnlineSpu/index.vue |   6 +
 src/views/canteen/timeSlotConfig/form.vue    | 213 +++++++++++++
 src/views/canteen/timeSlotConfig/index.vue   | 121 ++++++++
 9 files changed, 910 insertions(+), 158 deletions(-)
 create mode 100644 src/api/canteen/timeSlotConfig.ts
 create mode 100644 src/views/canteen/timeSlotConfig/form.vue
 create mode 100644 src/views/canteen/timeSlotConfig/index.vue

diff --git a/src/api/canteen/timeSlotConfig.ts b/src/api/canteen/timeSlotConfig.ts
new file mode 100644
index 0000000..3a74199
--- /dev/null
+++ b/src/api/canteen/timeSlotConfig.ts
@@ -0,0 +1,41 @@
+import request from "/@/utils/request"
+
+export function fetchList(query?: Object) {
+  return request({
+    url: '/canteen/timeSlotConfig/page',
+    method: 'get',
+    params: query
+  })
+}
+
+export function addObj(obj?: Object) {
+  return request({
+    url: '/canteen/timeSlotConfig',
+    method: 'post',
+    data: obj
+  })
+}
+
+export function getObj(id?: string) {
+  return request({
+    url: '/canteen/timeSlotConfig/' + id,
+    method: 'get'
+  })
+}
+
+export function delObjs(ids?: Object) {
+  return request({
+    url: '/canteen/timeSlotConfig',
+    method: 'delete',
+    data: ids
+  })
+}
+
+export function putObj(obj?: Object) {
+  return request({
+    url: '/canteen/timeSlotConfig',
+    method: 'put',
+    data: obj
+  })
+}
+
diff --git a/src/views/canteen/boxesAvailability/form.vue b/src/views/canteen/boxesAvailability/form.vue
index b24fe4a..9eb6b78 100644
--- a/src/views/canteen/boxesAvailability/form.vue
+++ b/src/views/canteen/boxesAvailability/form.vue
@@ -1,46 +1,80 @@
 <template>
-	<el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable>
-		<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
+	<el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable width="700px">
+		<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="120px" v-loading="loading">
 			<el-row :gutter="24">
 				<el-col :span="12" class="mb20">
-					<el-form-item label="包厢Id" prop="boxesId">
-						<el-input v-model="form.boxesId" placeholder="请输入包厢Id" />
+					<el-form-item label="商户" prop="merchantId">
+						<select-mch v-model="form.merchantId" @change="onMerchantChange" />
 					</el-form-item>
 				</el-col>
-
 				<el-col :span="12" class="mb20">
-					<el-form-item label="预约id" prop="bookingId">
-						<el-input v-model="form.bookingId" placeholder="请输入预约id" />
+					<el-form-item label="餐桌" prop="boxesId">
+						<el-select v-model="form.boxesId" placeholder="请选择餐桌" clearable>
+							<el-option
+								v-for="item in tableList"
+								:key="item.id"
+								:label="`${item.tableNumber} - ${item.name}`"
+								:value="item.id"
+							/>
+						</el-select>
 					</el-form-item>
 				</el-col>
-
 				<el-col :span="12" class="mb20">
-					<el-form-item label="状态 0空闲 1已使用" prop="status">
-						<el-input v-model="form.status" placeholder="请输入状态 0空闲 1已使用" />
+					<el-form-item label="餐次类型" prop="mealType">
+						<el-select v-model="form.mealType" placeholder="请选择餐次类型" @change="onMealTypeChange">
+							<el-option label="早餐" value="1" />
+							<el-option label="中餐" value="2" />
+							<el-option label="晚餐" value="3" />
+						</el-select>
 					</el-form-item>
 				</el-col>
-
 				<el-col :span="12" class="mb20">
-					<el-form-item label="用户id" prop="userId">
-						<el-input v-model="form.userId" placeholder="请输入用户id" />
+					<el-form-item label="日期" prop="bxDate">
+						<el-date-picker
+							v-model="form.bxDate"
+							type="date"
+							placeholder="请选择日期"
+							format="YYYY-MM-DD"
+							value-format="YYYY-MM-DD"
+							:disabled-date="disabledDate"
+						/>
 					</el-form-item>
 				</el-col>
-
 				<el-col :span="12" class="mb20">
-					<el-form-item label="格式为 YYYY-MM-DD" prop="bxDate">
-						<el-input v-model="form.bxDate" placeholder="请输入格式为 YYYY-MM-DD" />
+					<el-form-item label="开始时间" prop="startTime">
+						<el-time-select
+							v-model="form.startTime"
+							placeholder="请选择开始时间"
+							:selectable-range="getSelectableTimeRange()"
+							:step="30"
+							format="HH:mm"
+							value-format="HH:mm"
+						/>
 					</el-form-item>
 				</el-col>
-
 				<el-col :span="12" class="mb20">
-					<el-form-item label="时间" prop="hour">
-						<el-date-picker type="datetime" placeholder="请选择时间" v-model="form.hour" :value-format="dateTimeStr"></el-date-picker>
+					<el-form-item label="结束时间" prop="endTime">
+						<el-time-select
+							v-model="form.endTime"
+							placeholder="请选择结束时间"
+							:selectable-range="getSelectableTimeRange()"
+							:step="30"
+							format="HH:mm"
+							value-format="HH:mm"
+						/>
 					</el-form-item>
 				</el-col>
-
 				<el-col :span="12" class="mb20">
-					<el-form-item label="时间索引（0-24）" prop="hourIndex">
-						<el-input v-model="form.hourIndex" placeholder="请输入时间索引（0-24）" />
+					<el-form-item label="状态" prop="status">
+						<el-radio-group v-model="form.status">
+							<el-radio :label="0">空闲</el-radio>
+							<el-radio :label="1">已使用</el-radio>
+						</el-radio-group>
+					</el-form-item>
+				</el-col>
+				<el-col :span="24" class="mb20">
+					<el-form-item label="备注" prop="remark">
+						<el-input type="textarea" v-model="form.remark" placeholder="请输入备注信息" :rows="3" />
 					</el-form-item>
 				</el-col>
 			</el-row>
@@ -58,6 +92,7 @@
 import { useDict } from '/@/hooks/dict';
 import { useMessage } from '/@/hooks/message';
 import { getObj, addObj, putObj } from '/@/api/canteen/boxesAvailability';
+import { fetchList as fetchTableList } from '/@/api/canteen/boxesInfo';
 import { rule } from '/@/utils/validate';
 const emit = defineEmits(['refresh']);
 
@@ -65,35 +100,88 @@ const emit = defineEmits(['refresh']);
 const dataFormRef = ref();
 const visible = ref(false);
 const loading = ref(false);
-// 定义字典
-const { booking_status } = useDict('booking_status');
+const tableList = ref<any[]>([]);
 
 // 提交表单数据
 const form = reactive({
 	id: '',
+	merchantId: '',
 	boxesId: '',
-	bookingId: '',
-	status: '',
-	userId: '',
+	mealType: '',
 	bxDate: '',
-	hour: '',
-	hourIndex: '',
+	startTime: '',
+	endTime: '',
+	status: 0,
+	remark: '',
 });
 
 // 定义校验规则
-const dataRules = ref({});
+const dataRules = ref({
+	merchantId: [{ required: true, message: '商户不能为空', trigger: 'change' }],
+	boxesId: [{ required: true, message: '餐桌不能为空', trigger: 'change' }],
+	mealType: [{ required: true, message: '餐次类型不能为空', trigger: 'change' }],
+	bxDate: [{ required: true, message: '日期不能为空', trigger: 'change' }],
+	startTime: [{ required: true, message: '开始时间不能为空', trigger: 'change' }],
+	endTime: [{ required: true, message: '结束时间不能为空', trigger: 'change' }],
+	status: [{ required: true, message: '状态不能为空', trigger: 'change' }],
+});
+
+// 禁用过去的日期
+const disabledDate = (time: Date) => {
+	return time.getTime() < Date.now() - 8.64e7;
+};
+
+// 获取可选时间范围
+const getSelectableTimeRange = () => {
+	switch (form.mealType) {
+		case '1': return '07:00:00,09:00:00'; // 早餐
+		case '2': return '11:30:00,13:30:00'; // 中餐
+		case '3': return '17:30:00,19:30:00'; // 晚餐
+		default: return '00:00:00,23:59:59';
+	}
+};
+
+// 商户变化时加载餐桌列表
+const onMerchantChange = async (merchantId: string) => {
+	if (merchantId) {
+		try {
+			const res = await fetchTableList({ merchantId, status: '0' });
+			tableList.value = res.data?.records || [];
+		} catch (error) {
+			console.error('加载餐桌列表失败:', error);
+		}
+	} else {
+		tableList.value = [];
+	}
+	form.boxesId = '';
+};
+
+// 餐次类型变化时重置时间
+const onMealTypeChange = () => {
+	form.startTime = '';
+	form.endTime = '';
+};
 
 // 打开弹窗
 const openDialog = (id: string) => {
 	visible.value = true;
 	form.id = '';
+	form.merchantId = '';
+	form.boxesId = '';
+	form.mealType = '';
+	form.bxDate = '';
+	form.startTime = '';
+	form.endTime = '';
+	form.status = 0;
+	form.remark = '';
+	tableList.value = [];
 
 	// 重置表单数据
 	nextTick(() => {
 		dataFormRef.value?.resetFields();
 	});
 
-	// 获取boxesAvailability信息
+	// 获取可用时间段信息
 	if (id) {
 		form.id = id;
 		getboxesAvailabilityData(id);
@@ -120,11 +208,14 @@ const onSubmit = async () => {
 
 // 初始化表单数据
 const getboxesAvailabilityData = (id: string) => {
-	// 获取数据
 	loading.value = true;
 	getObj(id)
 		.then((res: any) => {
 			Object.assign(form, res.data);
+			// 加载餐桌列表
+			if (form.merchantId) {
+				onMerchantChange(form.merchantId);
+			}
 		})
 		.finally(() => {
 			loading.value = false;
diff --git a/src/views/canteen/boxesBooking/form.vue b/src/views/canteen/boxesBooking/form.vue
index e86d2c3..a60ffaf 100644
--- a/src/views/canteen/boxesBooking/form.vue
+++ b/src/views/canteen/boxesBooking/form.vue
@@ -1,84 +1,101 @@
 <template>
-	<el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable>
-		<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
+	<el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable width="800px">
+		<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="120px" v-loading="loading">
 			<el-row :gutter="24">
 				<el-col :span="12" class="mb20">
-					<el-form-item label="包厢" prop="boxesId">
-						<el-input v-model="form.boxesId" placeholder="请输入包厢Id" />
+					<el-form-item label="商户" prop="merchantId">
+						<select-mch v-model="form.merchantId" @change="onMerchantChange" />
 					</el-form-item>
 				</el-col>
-
 				<el-col :span="12" class="mb20">
-					<el-form-item label="开始时间" prop="startTime">
-						<el-input v-model="form.startTime" placeholder="请输入开始时间" />
-					</el-form-item>
-				</el-col>
-
-				<el-col :span="12" class="mb20">
-					<el-form-item label="结束时间" prop="endTime">
-						<el-input v-model="form.endTime" placeholder="请输入结束时间" />
-					</el-form-item>
-				</el-col>
-
-				<el-col :span="12" class="mb20">
-					<el-form-item label="审核人id" prop="checkUserId">
-						<el-input v-model="form.checkUserId" placeholder="请输入审核人id" />
-					</el-form-item>
-				</el-col>
-
-				<el-col :span="12" class="mb20">
-					<el-form-item label="1审核中 2通过 3驳回 4" prop="checkStatus">
-						<el-select v-model="form.checkStatus" placeholder="请选择1审核中 2通过 3驳回 4">
-							<el-option :value="item.value" :label="item.label" v-for="(item, index) in check_status" :key="index"></el-option>
+					<el-form-item label="餐桌" prop="boxesId">
+						<el-select v-model="form.boxesId" placeholder="请选择餐桌" clearable>
+							<el-option
+								v-for="item in tableList"
+								:key="item.id"
+								:label="`${item.tableNumber} - ${item.name} (${item.capacity}人)`"
+								:value="item.id"
+							/>
 						</el-select>
 					</el-form-item>
 				</el-col>
-
 				<el-col :span="12" class="mb20">
-					<el-form-item label="创建人" prop="creator">
-						<el-input v-model="form.creator" placeholder="请输入创建人" />
+					<el-form-item label="餐次类型" prop="mealType">
+						<el-select v-model="form.mealType" placeholder="请选择餐次类型" @change="onMealTypeChange">
+							<el-option label="早餐(07:00-09:00)" value="1" />
+							<el-option label="中餐(11:30-13:30)" value="2" />
+							<el-option label="晚餐(17:30-19:30)" value="3" />
+						</el-select>
 					</el-form-item>
 				</el-col>
-
-				<el-col :span="12" class="mb20">
-					<el-form-item label="更新人" prop="updater">
-						<el-input v-model="form.updater" placeholder="请输入更新人" />
-					</el-form-item>
-				</el-col>
-
-				<el-col :span="12" class="mb20">
-					<el-form-item label="是否删除" prop="deleted">
-						<el-input v-model="form.deleted" placeholder="请输入是否删除" />
-					</el-form-item>
-				</el-col>
-
 				<el-col :span="12" class="mb20">
 					<el-form-item label="预约日期" prop="bookingDate">
-						<el-input v-model="form.bookingDate" placeholder="请输入预约日期" />
+						<el-date-picker
+							v-model="form.bookingDate"
+							type="date"
+							placeholder="请选择预约日期"
+							format="YYYY-MM-DD"
+							value-format="YYYY-MM-DD"
+							:disabled-date="disabledDate"
+						/>
 					</el-form-item>
 				</el-col>
-
 				<el-col :span="12" class="mb20">
-					<el-form-item label="用户id" prop="userId">
-						<el-input v-model="form.userId" placeholder="请输入用户id" />
+					<el-form-item label="预约人数" prop="bookingPeople">
+						<el-input-number v-model="form.bookingPeople" :min="1" :max="20" placeholder="请输入预约人数" />
 					</el-form-item>
 				</el-col>
-
 				<el-col :span="12" class="mb20">
-					<el-form-item label="预约状态（0 预约成功，1预约失败 2取消预约 ）" prop="status">
-						<el-select v-model="form.status" placeholder="请选择预约状态（0 预约成功，1预约失败 2取消预约 ）">
-							<el-option label="??" :value="0" />
-							<el-option label="??" :value="1" />
-						</el-select>
+					<el-form-item label="开始时间" prop="startTime">
+						<el-time-select
+							v-model="form.startTime"
+							placeholder="请选择开始时间"
+							:disabled="!form.mealType || !form.bookingDate"
+							:selectable-range="getSelectableTimeRange()"
+							:step="30"
+							format="HH:mm"
+							value-format="HH:mm"
+						/>
 					</el-form-item>
 				</el-col>
-
 				<el-col :span="12" class="mb20">
-					<el-form-item label="总价单位分" prop="totalPrice">
-						<el-input v-model="form.totalPrice" placeholder="请输入总价单位分" />
+					<el-form-item label="结束时间" prop="endTime">
+						<el-time-select
+							v-model="form.endTime"
+							placeholder="请选择结束时间"
+							:disabled="!form.startTime"
+							:selectable-range="getSelectableTimeRange()"
+							:step="30"
+							format="HH:mm"
+							value-format="HH:mm"
+						/>
+					</el-form-item>
+				</el-col>
+				<el-col :span="24" class="mb20">
+					<el-form-item label="备注" prop="remark">
+						<el-input type="textarea" v-model="form.remark" placeholder="请输入备注信息" :rows="3" />
 					</el-form-item>
 				</el-col>
 			</el-row>
+			
+			<!-- 时间段选择区域 -->
+			<div v-if="form.boxesId && form.mealType && form.bookingDate" class="time-slot-section">
+				<el-divider content-position="left">可用时间段</el-divider>
+				<div class="time-slots">
+					<div v-for="slot in availableTimeSlots" :key="slot.startTime" class="time-slot-item">
+						<el-button
+							:type="isTimeSlotSelected(slot) ? 'success' : 'primary'"
+							:plain="!isTimeSlotSelected(slot)"
+							size="small"
+							@click="toggleTimeSlot(slot)"
+							:disabled="slot.status === 'booked'"
+						>
+							{{ slot.startTime }} - {{ slot.endTime }}
+							<el-tag v-if="slot.status === 'booked'" type="danger" size="small">已预约</el-tag>
+						</el-button>
+					</div>
+				</div>
+			</div>
 		</el-form>
 		<template #footer>
 			<span class="dialog-footer">
@@ -93,6 +110,7 @@
 import { useDict } from '/@/hooks/dict';
 import { useMessage } from '/@/hooks/message';
 import { getObj, addObj, putObj } from '/@/api/canteen/boxesBooking';
+import { fetchList as fetchTableList } from '/@/api/canteen/boxesInfo';
 import { rule } from '/@/utils/validate';
 const emit = defineEmits(['refresh']);
 
@@ -100,40 +118,170 @@ const emit = defineEmits(['refresh']);
 const dataFormRef = ref();
 const visible = ref(false);
 const loading = ref(false);
-// 定义字典
-const { check_status } = useDict('check_status');
+const tableList = ref<any[]>([]);
+const availableTimeSlots = ref<any[]>([]);
+const selectedTimeSlots = ref<any[]>([]);
 
 // 提交表单数据
 const form = reactive({
 	id: '',
+	merchantId: '',
 	boxesId: '',
+	mealType: '',
+	bookingDate: '',
 	startTime: '',
 	endTime: '',
-	checkUserId: '',
-	checkStatus: '',
-	creator: '',
-	updater: '',
-	deleted: '',
-	bookingDate: '',
-	userId: '',
-	status: '',
-	totalPrice: '',
+	bookingPeople: 1,
+	remark: '',
+	status: '0',
 });
 
 // 定义校验规则
-const dataRules = ref({});
+const dataRules = ref({
+	merchantId: [{ required: true, message: '商户不能为空', trigger: 'change' }],
+	boxesId: [{ required: true, message: '餐桌不能为空', trigger: 'change' }],
+	mealType: [{ required: true, message: '餐次类型不能为空', trigger: 'change' }],
+	bookingDate: [{ required: true, message: '预约日期不能为空', trigger: 'change' }],
+	startTime: [{ required: true, message: '开始时间不能为空', trigger: 'change' }],
+	endTime: [{ required: true, message: '结束时间不能为空', trigger: 'change' }],
+	bookingPeople: [{ required: true, message: '预约人数不能为空', trigger: 'blur' }],
+});
+
+// 禁用过去的日期
+const disabledDate = (time: Date) => {
+	return time.getTime() < Date.now() - 8.64e7;
+};
+
+// 获取可选时间范围
+const getSelectableTimeRange = () => {
+	switch (form.mealType) {
+		case '1': return '07:00:00,09:00:00'; // 早餐
+		case '2': return '11:30:00,13:30:00'; // 中餐
+		case '3': return '17:30:00,19:30:00'; // 晚餐
+		default: return '00:00:00,23:59:59';
+	}
+};
+
+// 商户变化时加载餐桌列表
+const onMerchantChange = async (merchantId: string) => {
+	if (merchantId) {
+		try {
+			const res = await fetchTableList({ merchantId, status: '0' });
+			tableList.value = res.data?.records || [];
+		} catch (error) {
+			console.error('加载餐桌列表失败:', error);
+		}
+	} else {
+		tableList.value = [];
+	}
+	form.boxesId = '';
+};
+
+// 餐次类型变化时重置时间
+const onMealTypeChange = () => {
+	form.startTime = '';
+	form.endTime = '';
+	selectedTimeSlots.value = [];
+};
+
+// 检查时间段是否被选中
+const isTimeSlotSelected = (slot: any) => {
+	return selectedTimeSlots.value.some(selected => 
+		selected.startTime === slot.startTime && selected.endTime === slot.endTime
+	);
+};
+
+// 切换时间段选择
+const toggleTimeSlot = (slot: any) => {
+	if (slot.status === 'booked') return;
+	
+	const isSelected = isTimeSlotSelected(slot);
+	if (isSelected) {
+		selectedTimeSlots.value = selectedTimeSlots.value.filter(selected => 
+			!(selected.startTime === slot.startTime && selected.endTime === slot.endTime)
+		);
+	} else {
+		selectedTimeSlots.value.push(slot);
+	}
+	
+	// 自动填充开始和结束时间
+	if (selectedTimeSlots.value.length > 0) {
+		const sortedSlots = selectedTimeSlots.value.sort((a, b) => a.startTime.localeCompare(b.startTime));
+		form.startTime = sortedSlots[0].startTime;
+		form.endTime = sortedSlots[sortedSlots.value.length - 1].endTime;
+	} else {
+		form.startTime = '';
+		form.endTime = '';
+	}
+};
+
+// 生成可用时间段
+const generateTimeSlots = () => {
+	const slots = [];
+	let startHour, endHour;
+	
+	switch (form.mealType) {
+		case '1': // 早餐
+			startHour = 7;
+			endHour = 9;
+			break;
+		case '2': // 中餐
+			startHour = 11.5;
+			endHour = 13.5;
+			break;
+		case '3': // 晚餐
+			startHour = 17.5;
+			endHour = 19.5;
+			break;
+		default:
+			return [];
+	}
+	
+	for (let hour = startHour; hour < endHour; hour += 0.5) {
+		const startTime = `${Math.floor(hour).toString().padStart(2, '0')}:${(hour % 1 === 0.5 ? '30' : '00')}`;
+		const endTime = `${Math.floor(hour + 0.5).toString().padStart(2, '0')}:${((hour + 0.5) % 1 === 0.5 ? '30' : '00')}`;
+		
+		slots.push({
+			startTime,
+			endTime,
+			status: 'available'
+		});
+	}
+	
+	availableTimeSlots.value = slots;
+};
+
+// 监听表单变化
+watch([() => form.boxesId, () => form.mealType, () => form.bookingDate], () => {
+	if (form.boxesId && form.mealType && form.bookingDate) {
+		generateTimeSlots();
+		// 这里可以调用API获取实际的时间段状态
+		// fetchTimeSlotStatus();
+	}
+});
 
 // 打开弹窗
 const openDialog = (id: string) => {
 	visible.value = true;
 	form.id = '';
+	form.merchantId = '';
+	form.boxesId = '';
+	form.mealType = '';
+	form.bookingDate = '';
+	form.startTime = '';
+	form.endTime = '';
+	form.bookingPeople = 1;
+	form.remark = '';
+	selectedTimeSlots.value = [];
+	availableTimeSlots.value = [];
+	tableList.value = [];
 
 	// 重置表单数据
 	nextTick(() => {
 		dataFormRef.value?.resetFields();
 	});
 
-	// 获取boxesBooking信息
+	// 获取预约信息
 	if (id) {
 		form.id = id;
 		getboxesBookingData(id);
@@ -160,11 +308,14 @@ const onSubmit = async () => {
 
 // 初始化表单数据
 const getboxesBookingData = (id: string) => {
-	// 获取数据
 	loading.value = true;
 	getObj(id)
 		.then((res: any) => {
 			Object.assign(form, res.data);
+			// 加载餐桌列表
+			if (form.merchantId) {
+				onMerchantChange(form.merchantId);
+			}
 		})
 		.finally(() => {
 			loading.value = false;
@@ -176,3 +327,22 @@ defineExpose({
 	openDialog,
 });
 </script>
+
+<style scoped>
+.time-slot-section {
+	margin-top: 20px;
+	padding: 20px;
+	background: #f5f7fa;
+	border-radius: 8px;
+}
+
+.time-slots {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+}
+
+.time-slot-item {
+	margin-bottom: 10px;
+}
+</style>
diff --git a/src/views/canteen/boxesBooking/index.vue b/src/views/canteen/boxesBooking/index.vue
index 94bda80..cf7d06d 100644
--- a/src/views/canteen/boxesBooking/index.vue
+++ b/src/views/canteen/boxesBooking/index.vue
@@ -3,11 +3,31 @@
 		<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">
-					<el-form-item label="餐桌" prop="boxesName">
-            <el-input placeholder="请输入餐桌" v-model="state.queryForm.boxesName" />
+					<el-form-item label="餐桌名称" prop="tableName">
+						<el-input placeholder="请输入餐桌名称" v-model="state.queryForm.tableName" />
 					</el-form-item>
-					<el-form-item label="用户" prop="userId">
-						<el-input placeholder="请输入用户" v-model="state.queryForm.userName" />
+					<el-form-item label="餐次类型" prop="mealType">
+						<el-select v-model="state.queryForm.mealType" placeholder="请选择餐次类型" clearable>
+							<el-option label="早餐" value="1" />
+							<el-option label="中餐" value="2" />
+							<el-option label="晚餐" value="3" />
+						</el-select>
+					</el-form-item>
+					<el-form-item label="预约日期" prop="bookingDate">
+						<el-date-picker
+							v-model="state.queryForm.bookingDate"
+							type="date"
+							placeholder="请选择预约日期"
+							format="YYYY-MM-DD"
+							value-format="YYYY-MM-DD"
+						/>
+					</el-form-item>
+					<el-form-item label="预约状态" prop="status">
+						<el-select v-model="state.queryForm.status" placeholder="请选择预约状态" clearable>
+							<el-option label="预约成功" value="0" />
+							<el-option label="预约失败" value="1" />
+							<el-option label="取消预约" value="2" />
+						</el-select>
 					</el-form-item>
 					<el-form-item>
 						<el-button icon="search" type="primary" @click="getDataList">查询</el-button>
@@ -52,32 +72,48 @@
 				<el-table-column type="selection" width="40" align="center" />
 				<el-table-column type="index" label="#" width="50" />
 				<el-table-column prop="boxesName" label="餐桌名称" show-overflow-tooltip />
-				<el-table-column prop="startTime" label="开始时间" show-overflow-tooltip min-width="160" />
-				<el-table-column prop="endTime" label="结束时间" show-overflow-tooltip min-width="160" />
-				<el-table-column prop="checkStatus" label="审核状态" show-overflow-tooltip min-width="160">
+        				<el-table-column prop="mealName" label="餐次类型" show-overflow-tooltip>
+
+                </el-table-column>
+        				<el-table-column prop="userName" label="预约人" show-overflow-tooltip />
+<!--				<el-table-column prop="mealType" label="餐次类型" show-overflow-tooltip>-->
+<!--					<template #default="scope">-->
+<!--						<el-tag v-if="scope.row.mealType === '1'" type="success">早餐</el-tag>-->
+<!--						<el-tag v-else-if="scope.row.mealType === '2'" type="warning">中餐</el-tag>-->
+<!--						<el-tag v-else-if="scope.row.mealType === '3'" type="info">晚餐</el-tag>-->
+<!--						<el-tag v-else type="info">-</el-tag>-->
+<!--					</template>-->
+<!--				</el-table-column>-->
+				<el-table-column prop="bookingDate" label="预约日期" show-overflow-tooltip />
+        <el-table-column prop="createTime" label="预约时间" show-overflow-tooltip />
+<!--				<el-table-column prop="startTime" label="开始时间" show-overflow-tooltip />-->
+<!--				<el-table-column prop="endTime" label="结束时间" show-overflow-tooltip />-->
+<!--				<el-table-column prop="bookingPeople" label="预约人数" show-overflow-tooltip />-->
+<!--				<el-table-column prop="remark" label="备注" show-overflow-tooltip />-->
+				<el-table-column prop="status" label="预约状态" show-overflow-tooltip>
 					<template #default="scope">
-						<dict-tag :options="check_status" :value="scope.row.checkStatus"></dict-tag>
-					</template>
-				</el-table-column>
-				<el-table-column prop="bookingDate" label="预约日期" show-overflow-tooltip min-width="160" />
-				<el-table-column prop="userName" label="用户" show-overflow-tooltip min-width="100" />
-				<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip min-width="160" />
-				<el-table-column label="操作" width="150" fixed="right">
-					<template #default="scope">
-						<el-button
-							icon="edit-pen"
-							text
-							type="primary"
-							v-auth="'canteen_boxesBooking_edit'"
-							@click="formDialogRef.openDialog(scope.row.id)"
-						>
-							编辑
-						</el-button>
-						<el-button icon="delete" text type="primary" v-auth="'canteen_boxesBooking_del'" @click="handleDelete([scope.row.id])"
-							>删除</el-button
-						>
+						<el-tag v-if="scope.row.status === 0" type="success">预约成功</el-tag>
+						<el-tag v-else-if="scope.row.status === 1" type="danger">预约失败</el-tag>
+						<el-tag v-else-if="scope.row.status === 2" type="info">取消预约</el-tag>
+						<el-tag v-else type="info">-</el-tag>
 					</template>
 				</el-table-column>
+<!--				<el-table-column label="操作" width="150" fixed="right">-->
+<!--					<template #default="scope">-->
+<!--						<el-button-->
+<!--							icon="edit-pen"-->
+<!--							text-->
+<!--							type="primary"-->
+<!--							v-auth="'canteen_boxesBooking_edit'"-->
+<!--							@click="formDialogRef.openDialog(scope.row.id)"-->
+<!--						>-->
+<!--							编辑-->
+<!--						</el-button>-->
+<!--						<el-button icon="delete" text type="primary" v-auth="'canteen_boxesBooking_del'" @click="handleDelete([scope.row.id])"-->
+<!--							>删除</el-button-->
+<!--						>-->
+<!--					</template>-->
+<!--				</el-table-column>-->
 			</el-table>
 			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
 		</div>
diff --git a/src/views/canteen/boxesInfo/form.vue b/src/views/canteen/boxesInfo/form.vue
index 6a76685..9436af4 100644
--- a/src/views/canteen/boxesInfo/form.vue
+++ b/src/views/canteen/boxesInfo/form.vue
@@ -1,45 +1,59 @@
 <template>
 	<el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable>
-		<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
+		<el-form ref="dataFormRef" :model="form" :rules="dataRules" label-width="90px" v-loading="loading">
 			<el-row :gutter="24">
-				<el-col :span="14" class="mb20">
+				<el-col :span="12" class="mb20">
 					<el-form-item label="商户" prop="merchantId">
 						<select-mch v-model="form.merchantId" />
 					</el-form-item>
 				</el-col>
-				<el-col :span="14" class="mb20">
-					<el-form-item label="包厢名称" prop="name">
-						<el-input v-model="form.name" placeholder="请输入包厢名称" />
+				<el-col :span="12" class="mb20">
+					<el-form-item label="餐桌编号" prop="tableNumber">
+						<el-input v-model="form.tableNumber" placeholder="请输入餐桌编号" />
+					</el-form-item>
+				</el-col>
+				<el-col :span="12" class="mb20">
+					<el-form-item label="餐桌名称" prop="name">
+						<el-input v-model="form.name" placeholder="请输入餐桌名称" />
+					</el-form-item>
+				</el-col>
+				<el-col :span="12" class="mb20">
+					<el-form-item label="餐桌类型" prop="tableType">
+						<el-select v-model="form.tableType" placeholder="请选择餐桌类型">
+							<el-option label="小桌(2-4人)" value="1" />
+							<el-option label="中桌(4-6人)" value="2" />
+							<el-option label="大桌(6-8人)" value="3" />
+							<el-option label="包间(8人以上)" value="4" />
+						</el-select>
 					</el-form-item>
 				</el-col>
 				<el-col :span="24" class="mb20">
-					<el-form-item label="包厢图片" prop="images">
+					<el-form-item label="餐桌图片" prop="images">
 						<upload-img v-model:imageUrl="form.images"></upload-img>
 					</el-form-item>
 				</el-col>
-				<el-col :span="14" class="mb20">
+				<el-col :span="12" class="mb20">
 					<el-form-item label="容纳人数" prop="capacity">
 						<el-input v-model="form.capacity" placeholder="请输入容纳人数" />
 					</el-form-item>
 				</el-col>
-
 				<el-col :span="24" class="mb20">
-					<el-form-item label="包厢状态" prop="status">
+					<el-form-item label="餐桌状态" prop="status">
 						<el-radio-group v-model="form.status">
 							<el-radio :label="item.value" v-for="(item, index) in boxes_status" border :key="index">{{ item.label }} </el-radio>
 						</el-radio-group>
 					</el-form-item>
 				</el-col>
 				<el-col :span="24" class="mb20">
-					<el-form-item label="包厢地址" prop="address">
-						<el-input type="textarea" v-model="form.address" placeholder="请输入包厢地址" />
-					</el-form-item>
-				</el-col>
-				<el-col :span="24" class="mb20">
-					<el-form-item label="包厢描述" prop="description">
-						<editor v-if="visible" v-model:get-html="form.description" placeholder="请输入包厢描述"></editor>
+					<el-form-item label="餐桌摆放形式" prop="address">
+						<el-input type="textarea" v-model="form.address" placeholder="请输入餐桌摆放形式" />
 					</el-form-item>
 				</el-col>
+<!--				<el-col :span="24" class="mb20">-->
+<!--					<el-form-item label="餐桌描述" prop="description">-->
+<!--						<editor v-if="visible" v-model:get-html="form.description" placeholder="请输入餐桌描述"></editor>-->
+<!--					</el-form-item>-->
+<!--				</el-col>-->
 			</el-row>
 		</el-form>
 		<template #footer>
@@ -52,6 +66,7 @@
 </template>
 
 <script setup lang="ts" name="BoxesInfoDialog">
+import { ref, reactive, nextTick } from 'vue';
 import { useDict } from '/@/hooks/dict';
 import { useMessage } from '/@/hooks/message';
 import { getObj, addObj, putObj } from '/@/api/canteen/boxesInfo';
@@ -68,7 +83,9 @@ const { boxes_status } = useDict('boxes_status');
 // 提交表单数据
 const form = reactive({
 	id: '',
+	tableNumber: '',
 	name: '',
+	tableType: '',
 	capacity: '',
 	description: '',
 	address: '',
@@ -80,23 +97,32 @@ const form = reactive({
 // 定义校验规则
 const dataRules = ref({
 	merchantId: [{ required: true, message: '商户不能为空', trigger: 'blur' }],
-	name: [{ required: true, message: '包厢名称不能为空', trigger: 'blur' }],
+	tableNumber: [{ required: true, message: '餐桌编号不能为空', trigger: 'blur' }],
+	name: [{ required: true, message: '餐桌名称不能为空', trigger: 'blur' }],
+	tableType: [{ required: true, message: '餐桌类型不能为空', trigger: 'change' }],
 	capacity: [
 		{ required: true, message: '容纳人数不能为空', trigger: 'blur' },
 		{ validator: rule.number, trigger: 'blur' },
 	],
-	images: [{ required: true, message: '包厢图片不能为空', trigger: 'blur' }],
+	// 图片字段暂时不设为必填，方便测试
+	// images: [{ required: true, message: '餐桌图片不能为空', trigger: 'blur' }],
 });
 
 // 打开弹窗
 const openDialog = (id: string) => {
 	visible.value = true;
-	form.id = '';
-
+	
 	// 重置表单数据
-	nextTick(() => {
-		dataFormRef.value?.resetFields();
-	});
+	form.id = '';
+	form.tableNumber = '';
+	form.name = '';
+	form.tableType = '';
+	form.capacity = '';
+	form.description = '';
+	form.address = '';
+	form.images = '';
+	form.status = '0';
+	form.merchantId = '';
 
 	// 获取boxesInfo信息
 	if (id) {
@@ -112,12 +138,23 @@ const onSubmit = async () => {
 
 	try {
 		loading.value = true;
-		form.id ? await putObj(form) : await addObj(form);
+		
+		// 准备提交数据
+		const submitData = {
+			...form,
+			// 确保数据类型正确
+			tableType: form.tableType ? Number(form.tableType) : undefined,
+			capacity: form.capacity ? Number(form.capacity) : undefined,
+			status: form.status ? Number(form.status) : 0
+		};
+		
+		const result = form.id ? await putObj(submitData) : await addObj(submitData);
+		
 		useMessage().success(form.id ? '修改成功' : '添加成功');
 		visible.value = false;
 		emit('refresh');
 	} catch (err: any) {
-		useMessage().error(err.msg);
+		useMessage().error(err.msg || err.message || '操作失败');
 	} finally {
 		loading.value = false;
 	}
@@ -129,9 +166,19 @@ const getboxesInfoData = (id: string) => {
 	loading.value = true;
 	getObj(id)
 		.then((res: any) => {
-			Object.assign(form, res.data, {
-				status: '' + res.data.status,
-			});
+			if (res.data) {
+				// 确保数据类型正确
+				form.id = res.data.id || '';
+				form.tableNumber = res.data.tableNumber || '';
+				form.name = res.data.name || '';
+				form.tableType = res.data.tableType ? String(res.data.tableType) : '';
+				form.capacity = res.data.capacity || '';
+				form.description = res.data.description || '';
+				form.address = res.data.address || '';
+				form.images = res.data.images || '';
+				form.status = res.data.status ? String(res.data.status) : '0';
+				form.merchantId = res.data.merchantId || '';
+			}
 		})
 		.finally(() => {
 			loading.value = false;
diff --git a/src/views/canteen/boxesInfo/index.vue b/src/views/canteen/boxesInfo/index.vue
index 1896ff5..a392fb8 100644
--- a/src/views/canteen/boxesInfo/index.vue
+++ b/src/views/canteen/boxesInfo/index.vue
@@ -3,9 +3,20 @@
 		<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">
+					<el-form-item label="餐桌编号" prop="tableNumber">
+						<el-input placeholder="请输入餐桌编号" v-model="state.queryForm.tableNumber" />
+					</el-form-item>
 					<el-form-item label="餐桌名称" prop="name">
 						<el-input placeholder="请输入餐桌名称" v-model="state.queryForm.name" />
 					</el-form-item>
+					<el-form-item label="餐桌类型" prop="tableType">
+						<el-select v-model="state.queryForm.tableType" placeholder="请选择餐桌类型" clearable>
+							<el-option label="小桌(2-4人)" value="1" />
+							<el-option label="中桌(4-6人)" value="2" />
+							<el-option label="大桌(6-8人)" value="3" />
+							<el-option label="包间(8人以上)" value="4" />
+						</el-select>
+					</el-form-item>
 					<el-form-item>
 						<el-button icon="search" type="primary" @click="getDataList">查询</el-button>
 						<el-button icon="Refresh" @click="resetQuery">重置</el-button>
@@ -14,7 +25,7 @@
 			</el-row>
 			<el-row>
 				<div class="mb8" style="width: 100%">
-					<el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()" v-auth="'canteen_boxesInfo_add'">
+					<el-button icon="folder-add" type="primary" class="ml10" @click="handleAdd" v-auth="'canteen_boxesInfo_add'">
 						新 增
 					</el-button>
 					<el-button
@@ -27,7 +38,7 @@
 					>
 						删 除
 					</el-button>
-					<el-button plain type="primary" @click="showList = false">排期详情</el-button>
+<!--					<el-button plain type="primary" @click="showList = false">排期详情</el-button>-->
 					<right-toolbar
 						v-model:showSearch="showSearch"
 						:export="'canteen_boxesInfo_export'"
@@ -38,6 +49,7 @@
 					></right-toolbar>
 				</div>
 			</el-row>
+
 			<el-table
 				:data="state.dataList"
 				v-loading="state.loading"
@@ -49,7 +61,17 @@
 			>
 				<el-table-column type="selection" width="40" align="center" />
 				<el-table-column type="index" label="#" width="50" />
+				<el-table-column prop="tableNumber" label="餐桌编号" show-overflow-tooltip />
 				<el-table-column prop="name" label="餐桌名称" show-overflow-tooltip />
+				<el-table-column prop="tableType" label="餐桌类型" show-overflow-tooltip>
+					<template #default="scope">
+						<el-tag v-if="scope.row.tableType === '1' || scope.row.tableType === 1" type="success">小桌(2-4人)</el-tag>
+						<el-tag v-else-if="scope.row.tableType === '2' || scope.row.tableType === 2" type="warning">中桌(4-6人)</el-tag>
+						<el-tag v-else-if="scope.row.tableType === '3' || scope.row.tableType === 3" type="info">大桌(6-8人)</el-tag>
+						<el-tag v-else-if="scope.row.tableType === '4' || scope.row.tableType === 4" type="danger">包间(8人以上)</el-tag>
+						<el-tag v-else type="info">{{ scope.row.tableType || '-' }}</el-tag>
+					</template>
+				</el-table-column>
 				<el-table-column prop="capacity" label="容纳人数" show-overflow-tooltip />
 				<el-table-column prop="description" label="餐桌描述" show-overflow-tooltip />
 				<el-table-column prop="address" label="餐桌摆放样式" show-overflow-tooltip />
@@ -156,4 +178,9 @@ const handleDelete = async (ids: string[]) => {
 		useMessage().error(err.msg)
 	}
 }
+
+// 新增操作
+const handleAdd = () => {
+	formDialogRef.value?.openDialog();
+}
 </script>
diff --git a/src/views/canteen/canteenOnlineSpu/index.vue b/src/views/canteen/canteenOnlineSpu/index.vue
index c6e673b..a9c9aab 100644
--- a/src/views/canteen/canteenOnlineSpu/index.vue
+++ b/src/views/canteen/canteenOnlineSpu/index.vue
@@ -83,6 +83,12 @@
 						<dict-tag :options="spu_status" :value="scope.row.status" />
 					</template>
 				</el-table-column>
+        <el-table-column prop="dishTypeName" label="上架类型" show-overflow-tooltip min-width="100">
+          <template #default="scope">
+              <el-tag v-show="scope.row.dishType == 1" type="success">{{ scope.row.dishTypeName}}</el-tag>
+              <el-tag v-show="scope.row.dishType == 2" type="primary">{{ scope.row.dishTypeName}}</el-tag>
+          </template>
+        </el-table-column>
 				<el-table-column prop="price" label="商品价格" show-overflow-tooltip min-width="100">
 					<template #default="scope">
 						{{ displayPrice(scope.row.price) }}
diff --git a/src/views/canteen/timeSlotConfig/form.vue b/src/views/canteen/timeSlotConfig/form.vue
new file mode 100644
index 0000000..5ac9bac
--- /dev/null
+++ b/src/views/canteen/timeSlotConfig/form.vue
@@ -0,0 +1,213 @@
+<template>
+    <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible"
+      :close-on-click-modal="false" draggable>
+      <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="120px" v-loading="loading">
+       <el-row :gutter="24">
+    <el-col :span="12" class="mb20">
+      <el-form-item label="餐次类型" prop="mealType">
+        <el-select v-model="form.mealType" placeholder="请选择餐次类型" @change="onMealTypeChange">
+          <el-option label="早餐" value="1" />
+          <el-option label="中餐" value="2" />
+          <el-option label="晚餐" value="3" />
+        </el-select>
+      </el-form-item>
+      </el-col>
+
+    <el-col :span="12" class="mb20">
+      <el-form-item label="餐次名称" prop="mealName">
+        <el-input v-model="form.mealName" placeholder="请输入餐次名称"/>
+      </el-form-item>
+      </el-col>
+
+    <el-col :span="12" class="mb20">
+      <el-form-item label="开始时间" prop="startTime">
+        <el-time-select
+          v-model="form.startTime"
+          placeholder="请选择开始时间"
+          :selectable-range="getTimeRange()"
+          :step="30"
+          format="HH:mm"
+          value-format="HH:mm"
+        />
+      </el-form-item>
+      </el-col>
+
+    <el-col :span="12" class="mb20">
+      <el-form-item label="结束时间" prop="endTime">
+        <el-time-select
+          v-model="form.endTime"
+          placeholder="请选择结束时间"
+          :selectable-range="getTimeRange()"
+          :step="30"
+          format="HH:mm"
+          value-format="HH:mm"
+        />
+      </el-form-item>
+      </el-col>
+
+    <el-col :span="12" class="mb20">
+      <el-form-item label="时间段名称" prop="timeSlotName">
+        <el-input v-model="form.timeSlotName" placeholder="请输入时间段名称"/>
+      </el-form-item>
+      </el-col>
+
+    <el-col :span="12" class="mb20">
+      <el-form-item label="是否启用" prop="isEnabled">
+        <el-radio-group v-model="form.isEnabled">
+          <el-radio :label="1">启用</el-radio>
+          <el-radio :label="0">禁用</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      </el-col>
+
+    <el-col :span="12" class="mb20">
+      <el-form-item label="排序" prop="sort">
+        <el-input-number v-model="form.sort" :min="0" :max="999" placeholder="请输入排序"/>
+      </el-form-item>
+      </el-col>
+
+    <el-col :span="24" class="mb20">
+      <el-form-item label="备注" prop="remark">
+        <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" :rows="3"/>
+      </el-form-item>
+      </el-col>
+
+			</el-row>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="visible = false">取消</el-button>
+          <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
+        </span>
+      </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts" name="TimeSlotConfigDialog">
+import { useDict } from '/@/hooks/dict';
+import { useMessage } from "/@/hooks/message";
+import { getObj, addObj, putObj } from '/@/api/canteen/timeSlotConfig'
+import { rule } from '/@/utils/validate';
+const emit = defineEmits(['refresh']);
+
+// 定义变量内容
+const dataFormRef = ref();
+const visible = ref(false)
+const loading = ref(false)
+
+// 提交表单数据
+const form = reactive({
+		id:'',
+	  mealType: '',
+	  mealName: '',
+	  startTime: '',
+	  endTime: '',
+	  timeSlotName: '',
+	  isEnabled: 1,
+	  sort: 0,
+	  remark: '',
+	  deptId: '',
+});
+
+// 定义校验规则
+const dataRules = ref({
+	mealType: [{ required: true, message: '餐次类型不能为空', trigger: 'change' }],
+	mealName: [{ required: true, message: '餐次名称不能为空', trigger: 'blur' }],
+	startTime: [{ required: true, message: '开始时间不能为空', trigger: 'change' }],
+	endTime: [{ required: true, message: '结束时间不能为空', trigger: 'change' }],
+	timeSlotName: [{ required: true, message: '时间段名称不能为空', trigger: 'blur' }],
+	isEnabled: [{ required: true, message: '是否启用不能为空', trigger: 'change' }],
+	sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
+})
+
+// 获取时间范围
+const getTimeRange = () => {
+	return '00:00:00,23:59:59';
+};
+
+// 餐次类型变化时自动填充餐次名称
+const onMealTypeChange = () => {
+	switch (form.mealType) {
+		case '1':
+			form.mealName = '早餐';
+			form.startTime = '07:00';
+			form.endTime = '09:00';
+			break;
+		case '2':
+			form.mealName = '中餐';
+			form.startTime = '11:30';
+			form.endTime = '13:30';
+			break;
+		case '3':
+			form.mealName = '晚餐';
+			form.startTime = '17:30';
+			form.endTime = '19:30';
+			break;
+		default:
+			form.mealName = '';
+			form.startTime = '';
+			form.endTime = '';
+	}
+};
+
+// 打开弹窗
+const openDialog = (id: string) => {
+  visible.value = true
+  form.id = ''
+  form.mealType = ''
+  form.mealName = ''
+  form.startTime = ''
+  form.endTime = ''
+  form.timeSlotName = ''
+  form.isEnabled = 1
+  form.sort = 0
+  form.remark = ''
+  form.deptId = ''
+
+  // 重置表单数据
+	nextTick(() => {
+		dataFormRef.value?.resetFields();
+	});
+
+  // 获取timeSlotConfig信息
+  if (id) {
+    form.id = id
+    gettimeSlotConfigData(id)
+  }
+};
+
+// 提交
+const onSubmit = async () => {
+	const valid = await dataFormRef.value.validate().catch(() => {});
+	if (!valid) return false;
+
+	try {
+    loading.value = true;
+		form.id ? await putObj(form) : await addObj(form);
+		useMessage().success(form.id ? '修改成功' : '添加成功');
+		visible.value = false;
+		emit('refresh');
+	} catch (err: any) {
+		useMessage().error(err.msg);
+	} finally {
+    loading.value = false;
+  }
+};
+
+
+// 初始化表单数据
+const gettimeSlotConfigData = (id: string) => {
+  // 获取数据
+  loading.value = true
+  getObj(id).then((res: any) => {
+    Object.assign(form, res.data)
+  }).finally(() => {
+    loading.value = false
+  })
+};
+
+// 暴露变量
+defineExpose({
+  openDialog
+});
+</script>
diff --git a/src/views/canteen/timeSlotConfig/index.vue b/src/views/canteen/timeSlotConfig/index.vue
new file mode 100644
index 0000000..7b139a7
--- /dev/null
+++ b/src/views/canteen/timeSlotConfig/index.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="layout-padding">
+    <div class="layout-padding-auto layout-padding-view">
+      <el-row>
+        <div class="mb8" style="width: 100%">
+          <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
+            v-auth="'canteen_timeSlotConfig_add'">
+            新 增
+          </el-button>
+          <el-button plain :disabled="multiple" icon="Delete" type="primary"
+            v-auth="'canteen_timeSlotConfig_del'" @click="handleDelete(selectObjs)">
+            删除
+          </el-button>
+          <right-toolbar v-model:showSearch="showSearch" :export="'canteen_timeSlotConfig_export'"
+                @exportExcel="exportExcel" class="ml10 mr20" style="float: right;"
+            @queryTable="getDataList"></right-toolbar>
+        </div>
+      </el-row>
+      <el-table :data="state.dataList" v-loading="state.loading" border
+        :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
+				@selection-change="selectionChangHandle"
+        @sort-change="sortChangeHandle">
+        <el-table-column type="selection" width="40" align="center" />
+        <el-table-column type="index" label="#" width="40" />
+          <el-table-column prop="mealType" label="餐次类型 1-早餐 2-中餐 3-晚餐"  show-overflow-tooltip/>
+          <el-table-column prop="mealName" label="餐次名称"  show-overflow-tooltip/>
+          <el-table-column prop="startTime" label="开始时间"  show-overflow-tooltip/>
+          <el-table-column prop="endTime" label="结束时间"  show-overflow-tooltip/>
+          <el-table-column prop="timeSlotName" label="时间段名称"  show-overflow-tooltip/>
+          <el-table-column prop="isEnabled" label="是否启用 0-禁用 1-启用"  show-overflow-tooltip/>
+          <el-table-column prop="sort" label="排序"  show-overflow-tooltip/>
+          <el-table-column prop="remark" label="备注"  show-overflow-tooltip/>
+<!--          <el-table-column prop="deptId" label="部门id"  show-overflow-tooltip/>-->
+        <el-table-column label="操作" width="150">
+          <template #default="scope">
+            <el-button icon="edit-pen" text type="primary" v-auth="'canteen_timeSlotConfig_edit'"
+              @click="formDialogRef.openDialog(scope.row.id)">编辑</el-button>
+            <el-button icon="delete" text type="primary" v-auth="'canteen_timeSlotConfig_del'" @click="handleDelete([scope.row.id])">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+    </div>
+
+    <!-- 编辑、新增  -->
+    <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
+
+  </div>
+</template>
+
+<script setup lang="ts" name="systemTimeSlotConfig">
+import { BasicTableProps, useTable } from "/src/hooks/table";
+import { fetchList, delObjs } from "/src/api/canteen/timeSlotConfig";
+import { useMessage, useMessageBox } from "/src/hooks/message";
+import { useDict } from '/src/hooks/dict';
+
+// 引入组件
+const FormDialog = defineAsyncComponent(() => import('./form.vue'));
+// 定义查询字典
+
+// 定义变量内容
+const formDialogRef = ref()
+// 搜索变量
+const queryRef = ref()
+const showSearch = ref(true)
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: {},
+  pageList: fetchList
+})
+
+//  table hook
+const {
+  getDataList,
+  currentChangeHandle,
+  sizeChangeHandle,
+  sortChangeHandle,
+  downBlobFile,
+	tableStyle
+} = useTable(state)
+
+// 清空搜索条件
+const resetQuery = () => {
+  // 清空搜索条件
+  queryRef.value?.resetFields()
+  // 清空多选
+  selectObjs.value = []
+  getDataList()
+}
+
+// 导出excel
+const exportExcel = () => {
+  downBlobFile('/canteen/timeSlotConfig/export', Object.assign(state.queryForm, { ids: selectObjs }), 'timeSlotConfig.xlsx')
+}
+
+// 多选事件
+const selectionChangHandle = (objs: { id: string }[]) => {
+  selectObjs.value = objs.map(({ id }) => id);
+  multiple.value = !objs.length;
+};
+
+// 删除操作
+const handleDelete = async (ids: string[]) => {
+  try {
+    await useMessageBox().confirm('此操作将永久删除');
+  } catch {
+    return;
+  }
+
+  try {
+    await delObjs(ids);
+    getDataList();
+    useMessage().success('删除成功');
+  } catch (err: any) {
+    useMessage().error(err.msg);
+  }
+};
+</script>