添加每日菜品时可删除菜品项

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
 	}

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;