From b807e927440c3f312dcce65857aad57a43fad04b Mon Sep 17 00:00:00 2001
From: ctw <>
Date: Tue, 14 Jan 2025 09:13:05 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=AF=8F=E6=97=A5=E8=8F=9C?=
 =?UTF-8?q?=E5=93=81=E6=97=B6=E5=8F=AF=E5=88=A0=E9=99=A4=E8=8F=9C=E5=93=81?=
 =?UTF-8?q?=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/canteen/canteenDailyMenu/form.vue  | 32 +++++++++++++++-----
 src/views/canteen/canteenDailyMenu/index.vue |  1 +
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/views/canteen/canteenDailyMenu/form.vue b/src/views/canteen/canteenDailyMenu/form.vue
index 433ca34..43787f4 100644
--- a/src/views/canteen/canteenDailyMenu/form.vue
+++ b/src/views/canteen/canteenDailyMenu/form.vue
@@ -32,8 +32,20 @@
 		<h1 style="font-size: 16px; font-weight: bold; color: #000000; margin-top: 20px">预览图</h1>
 		<table>
 			<tr class="food">
-				<div class="food_list">
-					<td class="food_list_item" v-for="(item, index) in selectedList" :key="item.id">
+				<div class="food_list" @mouseleave="hoverIndex = -1">
+					<td
+						class="food_list_item"
+						v-for="(item, index) in selectedFood"
+						:key="item.id"
+						@mouseenter="hoverIndex = index"
+					>
+						<el-icon
+							v-show="hoverIndex === index"
+							@click="removeSelectedItem(item.id)"
+							class="absolute right-[-5px] top-[-8px] text-xl text-blue-600"
+						>
+							<CircleClose />
+						</el-icon>
 						<el-image style="width: 80px; height: 80px" :src="imageBaseUrl + item.picUrl" fit="cover" />
 						<div class="w-full flex justify-around items-center text-black">
 							<span>{{ item.name }}</span>
@@ -142,13 +154,14 @@ const dataFormRef = ref()
 const visible = ref(false)
 const queryRef = ref()
 const selectObjs = ref([]) as any // 表格多选的数据
-const selectedList = ref<any>([])
+const selectedFood = ref<any>([])
 const loading = ref(false)
 const selectDialogVisible = ref<boolean>(false) // 选择菜品对话框开关
 const { spu_status } = useDict("spu_status")
 const categoryOptions = ref<any>([]) // 商品分类选项
 const imageBaseUrl = import.meta.env.VITE_IMAGE_BASE_PATH
 const dataRules = ref({}) // 定义校验规则
+const hoverIndex = ref<number>(-1) // 预览图片hover的索引
 
 // 提交表单数据
 const form = reactive<any>({
@@ -159,7 +172,7 @@ const form = reactive<any>({
 })
 // 选择的菜品的id数组
 const spuIds = computed(() => {
-	return selectedList.value?.map((item: any) => item.id)
+	return selectedFood.value?.map((item: any) => item.id)
 })
 
 const state: BasicTableProps = reactive<BasicTableProps>({
@@ -191,7 +204,7 @@ const openDialog = (id: string, time?: string, hourType?: number, merchantId?: n
 	// 重置表单数据
 	dataFormRef.value?.resetFields()
 	selectObjs.value = []
-	selectedList.value = []
+	selectedFood.value = []
 	state.dataList = []
 
 	// 获取canteenDailyMenu信息
@@ -235,15 +248,20 @@ const handleClickSelect = async () => {
 	}
 }
 
+// 移除预览
+const removeSelectedItem = (id: string) => {
+	selectedFood.value = selectedFood.value.filter((item: any) => item.id !== id)
+}
+
 // 选择菜品点击确认
 const handleSelectDialogConfirm = () => {
 	selectDialogVisible.value = false
-	selectedList.value = selectObjs.value
+	selectedFood.value = selectObjs.value
 }
 
 // 提交
 const onSubmit = async () => {
-	if (selectedList.value.length <= 0) {
+	if (selectedFood.value.length <= 0) {
 		useMessage().warning("请选择菜品")
 		return
 	}
diff --git a/src/views/canteen/canteenDailyMenu/index.vue b/src/views/canteen/canteenDailyMenu/index.vue
index 73abfa2..4572eb5 100644
--- a/src/views/canteen/canteenDailyMenu/index.vue
+++ b/src/views/canteen/canteenDailyMenu/index.vue
@@ -254,6 +254,7 @@ onMounted(async () => {
 		margin-left: 20px;
 
 		&_item {
+			position: relative;
 			display: flex;
 			flex-direction: column;
 			justify-content: space-between;