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

<template>
	<div class="layout-padding">
		<div style="margin-left: 4.5%; margin-top: 1.5%">
			<el-form-item label="商户" prop="merchantId">
				<select-mch v-model="merchantId" style="width: 200px" />
			</el-form-item>
			<h1 class="title">今日菜谱</h1>
		</div>
		<table width="100%" class="titleTable">
			<tr class="trclass">
				<td @click="addClick(-1)">&lt;</td>
				<td
					v-for="(item, index) in weekData.data"
					:key="index"
					@click="timeClick(item, index)"
					class="tdclass"
					:class="{ selectedSpan: isActive === index ? 'selected' : '' }"
				>
					<span>{{ item }}</span>
				</td>
				<td @click="addClick(1)">&gt;</td>
			</tr>
		</table>
		<div class="dataDiv">
			<table :style="{ width: tableWitch + 'px' }" class="foodTable">
				<tr class="food">
					<td @click="addFood(1)">早餐</td>
					<td v-for="(item, index) in foodData1" :key="index">
						<img @click="delteData(item.tid)" :src="item.picUrl" class="imageCss" />
					</td>
				</tr>
				<tr class="food" style="margin: 0px 5px 5px 0px">
					<td @click="addFood(2)">中餐</td>
					<td v-for="(item, index) in foodData2" :key="index">
						<img @click="delteData(item.tid)" :src="item.picUrl" class="imageCss" />
					</td>
				</tr>
				<tr class="food">
					<td @click="addFood(3)">晚餐</td>
					<td v-for="(item, index) in foodData3" :key="index">
						<img @click="delteData(item.tid)" :src="item.picUrl" class="imageCss" />
					</td>
				</tr>
			</table>
		</div>

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

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

// 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue'));

const { daily_menu } = useDict('daily_menu');
// 定义变量内容
const formDialogRef = ref();
// 多选变量
const loading = ref(true); // 列表的加载中

// ---------新增业务变量
const message = useMessage(); // 消息弹窗
const weekData = reactive({
	data: [],
}); //时间数组
const weekParams = reactive({
	index: 0,
});
const foodData1 = ref<any>({});
const foodData2 = ref<any>({});
const foodData3 = ref<any>({});
let isActive = ref(-1);
let timedata = '';
const merchantId = ref();
const merchantStatus = ref(true);
const merchantInfo = ref<any>([]);
let tableWitch = 1000;

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 () => {
	let 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 = [];
	tableWitch = 1000;
	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;
		}
	});
	if (count > 0) {
		tableWitch = count * 300 + 100;
	} else {
		tableWitch = 600;
	}
};
/** 删除数据源按钮 */
const delteData = async (tid: number) => {
	await message.delConfirm('确定删除菜品吗？', '今日菜品?');
	await delObjs(tid);
	message.success('common.delSuccess');
	selectTimeFood();
};

// 删除操作
// 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);
// 	}
// };

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

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

		if (merchantInfo.value.length > 1) {
			merchantStatus.value = false;
		}
		fetchData();
	}
};
/** 初始化 **/
onMounted(() => {
	merchantInit();
});
</script>

<style lang="scss">
.title {
	font-size: 28px;
	display: inline-block;
	margin-left: 25%;
}

.titleTable {
	border-collapse: collapse;
	border-spacing: 0;
	margin-top: 20px;
	cursor: pointer;
}

.tdclass {
	border: 1px solid rgb(233, 233, 233);
	width: 13%;
	height: 36px;
	text-align: center;
	background-color: white;
}

.trclass > td:first-child {
	text-align: center;
}
.trclass > td:last-child {
	text-align: center;
}

.foodTable {
	margin-top: 30px;
}

.food td {
	width: 250px;
	height: 200px;
	display: inline-block;
	background-color: white;
	margin-left: 20px;
	cursor: pointer;
}
.imageCss {
	width: 250px;
}

.food td:first-child {
	width: 60px;
	height: 200px;
	display: inline-flex;
	align-items: center;
	margin-left: 4%;
	background-color: transparent;
	font-size: 26px;
	cursor: pointer;
	// text-decoration: blue underline;
	color: rgb(0, 118, 228);
	cursor: pointer;
}

.dataDiv {
	overflow-x: auto;
}

.selectedSpan {
	border: 1px solid rgb(255, 187, 0);
	color: rgb(255, 187, 0);
}
</style>