From 611f1d634dc41a717ffa9bb7bb59bc3d8247e82d Mon Sep 17 00:00:00 2001
From: ctw <>
Date: Thu, 16 Jan 2025 18:24:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=AF=8F=E6=97=A5=E8=8F=9C=E5=93=81=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E6=94=B9=E4=B8=BA=E5=88=86=E9=A1=B5=E5=B9=B6=E4=BF=9D?=
 =?UTF-8?q?=E5=AD=98=E5=8B=BE=E9=80=89=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                            |  10 +-
 src/views/canteen/canteenDailyMenu/form.vue | 171 ++++++++++++--------
 2 files changed, 107 insertions(+), 74 deletions(-)

diff --git a/.env.development b/.env.development
index 0906e93..513a670 100644
--- a/.env.development
+++ b/.env.development
@@ -10,14 +10,16 @@ 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_ADMIN_PROXY_PATH = http://localhost:9999/
+VITE_ADMIN_PROXY_PATH = http://192.168.101.29:9999/ # 邓-本地
+# VITE_ADMIN_PROXY_PATH = http://59.202.170.152:81/api # 正式环境
 
 # 图片访问基础地址
 # 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_IMAGE_BASE_PATH = http://localhost:9999
+VITE_IMAGE_BASE_PATH = http://192.168.101.29:9999 # 邓-本地
+# VITE_IMAGE_BASE_PATH = http://59.202.170.152:81/api/ # 正式环境
 
 # 代码生成服务地址
 VITE_GEN_PROXY_PATH = http://192.168.110.156:5003
diff --git a/src/views/canteen/canteenDailyMenu/form.vue b/src/views/canteen/canteenDailyMenu/form.vue
index 5eb36b3..c0475de 100644
--- a/src/views/canteen/canteenDailyMenu/form.vue
+++ b/src/views/canteen/canteenDailyMenu/form.vue
@@ -92,55 +92,57 @@
 			</el-form>
 		</el-row>
 
-		<div style="overflow: auto; max-height: 60vh">
-			<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" align="center" />
-				<el-table-column prop="name" label="商品名称" width="100px" align="center" show-overflow-tooltip />
-				<el-table-column prop="categoryId" label="商品分类" width="100px" align="center" 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" show-overflow-tooltip>
-					<template #default="scope">
-						<preview-image :src="scope.row.picUrl" />
-					</template>
-				</el-table-column>
-				<el-table-column prop="sort" label="排序字段" align="center" show-overflow-tooltip />
-				<el-table-column prop="status" label="上架状态" align="center" 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="商品价格" align="center" show-overflow-tooltip>
-					<template #default="scope">
-						{{ displayPrice(scope.row.price) }}
-					</template>
-				</el-table-column>
-				<el-table-column prop="marketPrice" label="市场价" align="center" show-overflow-tooltip>
-					<template #default="scope">
-						{{ displayPrice(scope.row.marketPrice) }}
-					</template>
-				</el-table-column>
-				<el-table-column prop="costPrice" label="成本价" align="center" show-overflow-tooltip />
-				<el-table-column prop="stock" label="库存" align="center" show-overflow-tooltip />
-				<el-table-column prop="salesCount" label="商品销量" align="center" show-overflow-tooltip />
-				<el-table-column prop="createTime" label="创建时间" align="center" show-overflow-tooltip />
-			</el-table>
-		</div>
-		<!-- <pagination
+		<el-table
+			ref="foodMultipleTableRef"
+			:data="foodDataList"
+			v-loading="loading"
+			@select="handleSelect"
+			@select-all="handleSelectAll"
+			@selection-change="selectionChangeHandle"
+			:row-key="(row:any) => row.id"
+			:reserve-selection="true"
+		>
+			<el-table-column type="selection" width="40" align="center" />
+			<el-table-column type="index" label="#" width="50" align="center" />
+			<el-table-column prop="name" label="商品名称" width="100px" align="center" show-overflow-tooltip />
+			<el-table-column prop="categoryId" label="商品分类" width="100px" align="center" 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" show-overflow-tooltip>
+				<template #default="scope">
+					<preview-image :src="scope.row.picUrl" />
+				</template>
+			</el-table-column>
+			<el-table-column prop="sort" label="排序字段" align="center" show-overflow-tooltip />
+			<el-table-column prop="status" label="上架状态" align="center" 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="商品价格" align="center" show-overflow-tooltip>
+				<template #default="scope">
+					{{ displayPrice(scope.row.price) }}
+				</template>
+			</el-table-column>
+			<el-table-column prop="marketPrice" label="市场价" align="center" show-overflow-tooltip>
+				<template #default="scope">
+					{{ displayPrice(scope.row.marketPrice) }}
+				</template>
+			</el-table-column>
+			<el-table-column prop="costPrice" label="成本价" align="center" show-overflow-tooltip />
+			<el-table-column prop="stock" label="库存" align="center" show-overflow-tooltip />
+			<el-table-column prop="salesCount" label="商品销量" align="center" show-overflow-tooltip />
+			<el-table-column prop="createTime" label="创建时间" align="center" show-overflow-tooltip />
+		</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">
@@ -188,7 +190,7 @@ const spuIds = computed(() => selectedFood.value?.map((item: any) => item.id))
 // 菜品查询表单
 const foodQueryForm = reactive<any>({
 	current: 1,
-	size: 9999,
+	size: 10,
 	startTime: "",
 	hourType: undefined,
 })
@@ -196,23 +198,40 @@ const foodQueryForm = reactive<any>({
 const foodDataList = ref<any>([])
 const total = ref(0) // 菜品总数
 
+// 用来单击后保存数据状态
+function handleSelect(selectedRows: any[], row: any) {
+	selectObjs.value.findIndex((item: any) => item.id === row.id) === -1
+		? // selectObjs.value.indexOf(row) === -1
+		  selectObjs.value.push(row)
+		: selectObjs.value.splice(
+				// selectObjs.value.indexOf(row)
+				selectObjs.value.findIndex((item: any) => item.id === row.id),
+				1,
+		  )
+	console.log(selectObjs.value)
+}
+
+// 用来执行全选和反全选的数据状态保存
+function handleSelectAll(selectedRows: any[]) {
+	if (selectedRows.length > 0) {
+		selectedRows.forEach((row: any) => {
+			if (selectObjs.value.indexOf(row) === -1) {
+				selectObjs.value.push(row)
+			}
+		})
+	} else {
+		foodDataList.value.forEach((row: any) => {
+			const index = selectObjs.value.indexOf(row)
+			if (index !== -1) {
+				selectObjs.value.splice(index, 1)
+			}
+		})
+	}
+	console.log(selectObjs.value)
+}
 // 菜品表格多选
 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
+	// selectObjs.value = objs
 }
 
 // 清空搜索条件
@@ -221,7 +240,7 @@ const resetQuery = () => {
 	// 清空多选
 	selectObjs.value = []
 	foodQueryForm.current = 1
-	foodQueryForm.size = 9999
+	foodQueryForm.size = 10
 	getDataListAndSelect()
 }
 
@@ -250,13 +269,23 @@ const getDataListAndSelect = async () => {
 		foodDataList.value = res.data.records
 		total.value = res.data.total
 
+		// nextTick(() => {
+		// foodDataList.value.forEach((row: any) => {
+		// const index = selectObjs.value.indexOf(row)
+		const target = foodDataList.value.filter((row: any) => selectObjs.value.some((item: any) => row.id === item.id))
+		target.forEach((row: any) => nextTick(() => foodMultipleTableRef.value!.toggleRowSelection(row)))
+
+		// foodMultipleTableRef.value.toggleRowSelection(row, index !== -1)
+		// })
+		// })
+
 		// 转换菜品表格多选的选择状态
-		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()
-		}
+		// 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()
+		// }
 	}
 }
 
@@ -268,7 +297,7 @@ const openDialog = (id: string, time?: string, hourType?: number, merchantId?: n
 	// 重置表单数据
 	dataFormRef.value?.resetFields()
 	foodQueryForm.current = 1
-	foodQueryForm.size = 9999
+	foodQueryForm.size = 10
 	selectObjs.value = []
 	selectedFood.value = []
 	foodDataList.value = []
@@ -303,9 +332,11 @@ const getcanteenDailyMenuData = (id: string) => {
 // 点击选择菜品
 const handleClickSelect = async () => {
 	queryRef.value?.resetFields()
+	foodQueryForm.current = 1
+	foodQueryForm.size = 10
 	selectDialogVisible.value = true
 
-	selectObjs.value = selectedFood.value
+	selectObjs.value = [...selectedFood.value]
 	await getDataListAndSelect() // 获取菜品数据并且勾选表格行
 
 	try {
@@ -319,7 +350,7 @@ const handleClickSelect = async () => {
 // 选择菜品点击确认
 const handleSelectDialogConfirm = () => {
 	selectDialogVisible.value = false
-	selectedFood.value = selectObjs.value
+	selectedFood.value = [...selectObjs.value]
 }
 
 // 移除预览