From 88e8062a195b7436b5fd13e1e50f629d26c80255 Mon Sep 17 00:00:00 2001
From: ctw <>
Date: Wed, 15 Jan 2025 18:09:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=AF=8F=E6=97=A5=E8=8F=9C?=
 =?UTF-8?q?=E8=B0=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                            |  23 ++
 src/api/canteen/canteenDailyMenu.ts         |  11 +-
 src/views/canteen/canteenDailyMenu/form.vue | 258 ++++++++++++--------
 3 files changed, 194 insertions(+), 98 deletions(-)
 create mode 100644 .env.development

diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..5e6835c
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,23 @@
+# port 端口号
+VITE_PORT = 8888
+
+#浏览器自动打开
+VITE_OPEN = true
+
+# 本地环境
+ENV = 'development'
+
+# ADMIN 服务地址
+# VITE_ADMIN_PROXY_PATH = http://123.156.230.15:8089/api/ # 线上
+# VITE_ADMIN_PROXY_PATH = http://pjcloud.center.takin.cc/
+# VITE_ADMIN_PROXY_PATH = http://localhost:9999/
+VITE_ADMIN_PROXY_PATH = http://192.168.101.29:9999/ # 邓-本地
+
+# 图片访问基础地址
+# VITE_IMAGE_BASE_PATH = http://123.156.230.15:8089/api # 线上
+# VITE_IMAGE_BASE_PATH = http://pjcloud.center.takin.cc
+# VITE_IMAGE_BASE_PATH = http://localhost:9999
+VITE_IMAGE_BASE_PATH = http://192.168.101.29:9999 # 邓-本地
+
+# 代码生成服务地址
+VITE_GEN_PROXY_PATH = http://192.168.110.156:5003
\ No newline at end of file
diff --git a/src/api/canteen/canteenDailyMenu.ts b/src/api/canteen/canteenDailyMenu.ts
index 061d885..ea54d3d 100644
--- a/src/api/canteen/canteenDailyMenu.ts
+++ b/src/api/canteen/canteenDailyMenu.ts
@@ -56,7 +56,7 @@ export function selectWeekInfo(query?: Object) {
 	})
 }
 
-//  //获取当前选中的菜品信息
+//获取当前选中的菜品信息
 export function selectTimeFoodApi(query?: Object) {
 	return request({
 		url: "/canteen/canteenDailyMenu/selectTimeFood",
@@ -64,3 +64,12 @@ export function selectTimeFoodApi(query?: Object) {
 		params: query,
 	})
 }
+
+// 根据每日日期和每日餐段类型获取可添加的不重复的菜品列表
+export function getCanteenDailyMenuList(query?: Object) {
+	return request({
+		url: "/canteen/canteenSpu/pageDaily",
+		method: "get",
+		params: query,
+	})
+}
diff --git a/src/views/canteen/canteenDailyMenu/form.vue b/src/views/canteen/canteenDailyMenu/form.vue
index 089a636..809b949 100644
--- a/src/views/canteen/canteenDailyMenu/form.vue
+++ b/src/views/canteen/canteenDailyMenu/form.vue
@@ -1,5 +1,5 @@
 <template>
-	<el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable>
+	<el-dialog title="新增" 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-item label="日期" prop="hourType">
 				<p>{{ form.startTime }}</p>
@@ -29,7 +29,7 @@
 			</el-col> -->
 		</el-form>
 
-		<h1 style="font-size: 16px; font-weight: bold; color: #000000; margin-top: 20px">预览图</h1>
+		<h1 style="font-size: 16px; font-weight: bold; color: #000000; margin-top: 20px">预览</h1>
 		<table>
 			<tr class="food">
 				<div class="food_list" @mouseleave="hoverIndex = -1">
@@ -66,102 +66,112 @@
 				<el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
 			</span>
 		</template>
+	</el-dialog>
 
-		<el-dialog v-model="selectDialogVisible" title="选择菜品" width="60%" :close-on-click-modal="false" draggable>
-			<el-row>
-				<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
-					<el-form-item label="商品名称" prop="name">
-						<el-input placeholder="请输入商品名称" v-model="state.queryForm.name" />
-					</el-form-item>
-					<el-form-item label="商品分类" prop="categoryId">
-						<select-ctcg v-model="state.queryForm.categoryId" style="width: 200px" />
-					</el-form-item>
-					<el-form-item>
-						<el-button icon="search" type="primary" @click="getDataList">查询</el-button>
-						<el-button icon="Refresh" @click="resetQuery">重置</el-button>
-					</el-form-item>
-				</el-form>
-			</el-row>
+	<!-- 菜品选择对话框 -->
+	<el-dialog
+		v-model="selectDialogVisible"
+		title="选择菜品"
+		width="60%"
+		:close-on-click-modal="false"
+		draggable
+		@close="() => (selectObjs = [])"
+	>
+		<el-row>
+			<el-form :model="foodQueryForm" ref="queryRef" :inline="true" @keyup.enter="getDataListAndSelect">
+				<el-form-item label="商品名称" prop="name">
+					<el-input placeholder="请输入商品名称" v-model="foodQueryForm.name" />
+				</el-form-item>
+				<el-form-item label="商品分类" prop="categoryId">
+					<select-ctcg v-model="foodQueryForm.categoryId" style="width: 200px" />
+				</el-form-item>
+				<el-form-item>
+					<el-button icon="search" type="primary" @click="getDataListAndSelect">查询</el-button>
+					<el-button icon="Refresh" @click="resetQuery">重置</el-button>
+				</el-form-item>
+			</el-form>
+		</el-row>
 
-			<el-table
-				:data="state.dataList"
-				v-loading="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="50" />
-				<el-table-column prop="name" label="商品名称" width="120px" show-overflow-tooltip />
-				<el-table-column prop="categoryId" label="商品分类" width="100px" show-overflow-tooltip>
-					<template #default="{ row }">
-						{{ categoryOptions?.find((item: any) => item?.id === row?.categoryId)?.name }}
-					</template>
-				</el-table-column>
-				<el-table-column prop="picUrl" label="商品封面图" align="center" width="160px" show-overflow-tooltip>
-					<template #default="scope">
-						<preview-image :src="scope.row.picUrl" />
-					</template>
-				</el-table-column>
-				<el-table-column prop="sort" label="排序字段" show-overflow-tooltip />
-				<el-table-column prop="status" label="上架状态" show-overflow-tooltip>
-					<template #default="scope">
-						<dict-tag :options="spu_status" :value="scope.row.status" />
-					</template>
-				</el-table-column>
-				<el-table-column prop="price" label="商品价格" show-overflow-tooltip>
-					<template #default="scope">
-						{{ displayPrice(scope.row.price) }}
-					</template>
-				</el-table-column>
-				<el-table-column prop="marketPrice" label="市场价" show-overflow-tooltip>
-					<template #default="scope">
-						{{ displayPrice(scope.row.marketPrice) }}
-					</template>
-				</el-table-column>
-				<el-table-column prop="costPrice" label="成本价" show-overflow-tooltip />
-				<el-table-column prop="stock" label="库存" show-overflow-tooltip />
-				<el-table-column prop="salesCount" label="商品销量" show-overflow-tooltip />
-				<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip min-width="160" />
-			</el-table>
-			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+		<el-table
+			ref="foodMultipleTableRef"
+			:data="foodDataList"
+			v-loading="loading"
+			@selection-change="selectionChangeHandle"
+		>
+			<el-table-column type="selection" width="40" align="center" />
+			<el-table-column type="index" label="#" width="50" />
+			<el-table-column prop="name" label="商品名称" width="120px" show-overflow-tooltip />
+			<el-table-column prop="categoryId" label="商品分类" width="100px" show-overflow-tooltip>
+				<template #default="{ row }">
+					{{ categoryOptions?.find((item: any) => item?.id === row?.categoryId)?.name }}
+				</template>
+			</el-table-column>
+			<el-table-column prop="picUrl" label="商品封面图" align="center" width="160px" show-overflow-tooltip>
+				<template #default="scope">
+					<preview-image :src="scope.row.picUrl" />
+				</template>
+			</el-table-column>
+			<el-table-column prop="sort" label="排序字段" show-overflow-tooltip />
+			<el-table-column prop="status" label="上架状态" show-overflow-tooltip>
+				<template #default="scope">
+					<dict-tag :options="spu_status" :value="scope.row.status" />
+				</template>
+			</el-table-column>
+			<el-table-column prop="price" label="商品价格" show-overflow-tooltip>
+				<template #default="scope">
+					{{ displayPrice(scope.row.price) }}
+				</template>
+			</el-table-column>
+			<el-table-column prop="marketPrice" label="市场价" show-overflow-tooltip>
+				<template #default="scope">
+					{{ displayPrice(scope.row.marketPrice) }}
+				</template>
+			</el-table-column>
+			<el-table-column prop="costPrice" label="成本价" show-overflow-tooltip />
+			<el-table-column prop="stock" label="库存" show-overflow-tooltip />
+			<el-table-column prop="salesCount" label="商品销量" show-overflow-tooltip />
+			<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip min-width="160" />
+		</el-table>
+		<pagination
+			@size-change="sizeChangeHandle"
+			@current-change="currentChangeHandle"
+			v-model:current-page="foodQueryForm.current"
+			v-model:page-size="foodQueryForm.size"
+			:total="total"
+		/>
 
-			<template #footer>
-				<div class="dialog-footer">
-					<el-button @click="selectDialogVisible = false">取消</el-button>
-					<el-button type="primary" @click="handleSelectDialogConfirm">确认</el-button>
-				</div>
-			</template>
-		</el-dialog>
+		<template #footer>
+			<div class="dialog-footer">
+				<el-button @click="selectDialogVisible = false">取消</el-button>
+				<el-button type="primary" @click="handleSelectDialogConfirm" :disabled="loading">确认</el-button>
+			</div>
+		</template>
 	</el-dialog>
 </template>
 
 <script setup lang="ts" name="CanteenDailyMenuDialog">
 import { useMessage } from "/@/hooks/message"
 import { rule } from "/@/utils/validate"
-import { BasicTableProps, useTable } from "/@/hooks/table"
 import { useDict } from "/@/hooks/dict"
 import { displayPrice } from "/@/utils/formatMoney"
 import { fetchList as getCanteenCategory } from "/@/api/canteen/canteenCategory"
-import { getObj, addObj, putObj } from "/@/api/canteen/canteenDailyMenu"
-import { fetchList } from "/@/api/canteen/canteenSpu"
+import { getObj, addObj, putObj, getCanteenDailyMenuList } from "/@/api/canteen/canteenDailyMenu"
 
 const emit = defineEmits(["refresh"])
 
+const imageBaseUrl = import.meta.env.VITE_IMAGE_BASE_PATH
+const { spu_status } = useDict("spu_status")
 const dataFormRef = ref()
 const visible = ref(false)
 const queryRef = ref()
 const selectObjs = ref([]) as any // 表格多选的数据
 const selectedFood = ref<any>([])
 const loading = ref(false)
+const foodMultipleTableRef = ref<any>() // 菜品多选表格ref
 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 hoverIndex = ref<number>(-1) // 预览中hover的菜品索引
 
 // 提交表单数据
 const form = reactive<any>({
@@ -170,30 +180,81 @@ const form = reactive<any>({
 	hourType: "",
 	merchantId: "",
 })
-// 选择的菜品的id数组
-const spuIds = computed(() => {
-	return selectedFood.value?.map((item: any) => item.id)
+// 选择的菜品的数组ids
+const spuIds = computed(() => selectedFood.value?.map((item: any) => item.id))
+
+// 菜品查询表单
+const foodQueryForm = reactive<any>({
+	current: 1,
+	size: 9999,
+	startTime: "",
+	hourType: undefined,
 })
+// 菜品列表
+const foodDataList = ref<any>([])
+const total = ref(0) // 菜品总数
 
-const state: BasicTableProps = reactive<BasicTableProps>({
-	queryForm: {},
-	pageList: fetchList,
-})
-
-const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, tableStyle } = useTable(state)
-
-// 多选选择菜品
-const selectionChangHandle = (objs: any) => {
+// 菜品表格多选
+const selectionChangeHandle = (objs: any) => {
+	// console.log("aaaaaaa", objs)
+	// const add = objs.filter((row: any) => !temp.some((item: any) => item.id == row.id))
+	// console.log(add)
+	// const remove = temp.filter((item: any) => !objs.some((row: any) => row.id == item.id))
+	// console.log(remove)
+	// temp = [...objs]
+	// if (add.length > 0 && remove.length <= 0) {
+	// 	// 添加勾选
+	// 	return (selectObjs.value = [...selectObjs.value, ...add])
+	// }
+	// if (add.length <= 0 && remove.length > 0) {
+	// 	// 取消勾选
+	// 	selectObjs.value = selectObjs.value.filter((item: any) => !remove.some((row: any) => row.id == item.id))
+	// }
 	selectObjs.value = objs
 }
 
 // 清空搜索条件
 const resetQuery = () => {
-	// 清空搜索条件
 	queryRef.value?.resetFields()
 	// 清空多选
 	selectObjs.value = []
-	getDataList()
+	foodQueryForm.current = 1
+	foodQueryForm.size = 9999
+	getDataListAndSelect()
+}
+
+// 分页变化
+const sizeChangeHandle = (val: number) => {
+	foodQueryForm.size = val
+	// 再次发起查询操作
+	getDataListAndSelect()
+}
+const currentChangeHandle = (val: number) => {
+	foodQueryForm.current = val
+	getDataListAndSelect()
+}
+
+// 获取菜品数据并且勾选表格行
+const getDataListAndSelect = async () => {
+	loading.value = true
+
+	// 添加请求参数
+	foodQueryForm.startTime = form.startTime
+	foodQueryForm.hourType = form.hourType
+
+	const res = await getCanteenDailyMenuList(foodQueryForm).finally(() => (loading.value = false))
+	if (res.code === 0) {
+		foodDataList.value = res.data.records
+		total.value = res.data.total
+
+		// 转换菜品表格多选的选择状态
+		if (foodDataList.value && foodDataList.value.length > 0 && selectedFood.value.length > 0) {
+			const target = foodDataList.value.filter((row: any) => selectedFood.value.some((item: any) => row.id === item.id))
+			target.forEach((row: any) => nextTick(() => foodMultipleTableRef.value!.toggleRowSelection(row)))
+		} else {
+			foodMultipleTableRef.value!.clearSelection()
+		}
+	}
 }
 
 // 打开弹窗
@@ -203,9 +264,11 @@ const openDialog = (id: string, time?: string, hourType?: number, merchantId?: n
 
 	// 重置表单数据
 	dataFormRef.value?.resetFields()
+	foodQueryForm.current = 1
+	foodQueryForm.size = 9999
 	selectObjs.value = []
 	selectedFood.value = []
-	state.dataList = []
+	foodDataList.value = []
 
 	// 获取canteenDailyMenu信息
 	if (id) {
@@ -236,9 +299,11 @@ const getcanteenDailyMenuData = (id: string) => {
 
 // 点击选择菜品
 const handleClickSelect = async () => {
-	selectDialogVisible.value = true
 	queryRef.value?.resetFields()
-	getDataList()
+	selectDialogVisible.value = true
+
+	selectObjs.value = selectedFood.value
+	await getDataListAndSelect() // 获取菜品数据并且勾选表格行
 
 	try {
 		const res = await getCanteenCategory()
@@ -248,17 +313,17 @@ const handleClickSelect = async () => {
 	}
 }
 
-// 移除预览
-const removeSelectedItem = (id: string) => {
-	selectedFood.value = selectedFood.value.filter((item: any) => item.id !== id)
-}
-
 // 选择菜品点击确认
 const handleSelectDialogConfirm = () => {
 	selectDialogVisible.value = false
 	selectedFood.value = selectObjs.value
 }
 
+// 移除预览
+const removeSelectedItem = (id: string) => {
+	selectedFood.value = selectedFood.value.filter((item: any) => item.id !== id)
+}
+
 // 提交
 const onSubmit = async () => {
 	if (selectedFood.value.length <= 0) {
@@ -282,7 +347,6 @@ const onSubmit = async () => {
 	}
 }
 
-// 暴露变量
 defineExpose({
 	openDialog,
 })