Merge branch 'master' of https://codeup.aliyun.com/bsdtec/biz-pc-cloud

src/views/supermarketerp/components/select-dialog.vue

@@ -1,5 +1,5 @@
 <template>
-	<el-dialog v-model="dialogVisible" title="选择商品" width="80%" :close-on-click-modal="false" draggable @close="dialogVisible = false">
+	<el-dialog v-model="dialogVisible" title="选择商品" width="90%" :close-on-click-modal="false" draggable @close="dialogVisible = false">
 		<el-row>
 			<el-form :model="queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataListAndSelect">
 				<el-form-item label="商品名称" prop="productName">
@@ -24,8 +24,7 @@
 			v-loading="loading"
 			:row-key="(row:any) => row.id"
 			:reserve-selection="true"
-			@row-click="rowClick"
-			:row-style="{ cursor: 'pointer' }"
+			@selection-change="handleSelectionChange"
 		>
 			<el-table-column type="selection" width="50" reserve-selection fixed="left" align="center" />
 			<el-table-column type="index" label="#" width="50" fixed="left" align="center" />
@@ -35,20 +34,30 @@
 					<preview-image @click.stop :src="scope.row.picUrl" />
 				</template>
 			</el-table-column>
-			<!-- <el-table-column prop="barcode" label="自编码/条码" min-width="150px" align="center" show-overflow-tooltip /> -->
 			<el-table-column prop="stock" label="库存" min-width="80px" align="center" show-overflow-tooltip />
 			<el-table-column prop="productCode" label="货号" min-width="100px" align="center" show-overflow-tooltip />
-			<!-- <el-table-column prop="brandId" label="品牌" min-width="100px" align="center" show-overflow-tooltip>
+			<el-table-column label="包装单位" min-width="300px" align="center">
 				<template #default="scope">
-					{{ supermarketBrand?.find((item: any) => item.id === scope.row.brandId)?.name }}
+					<div v-if="scope.row.erpUnitVos && scope.row.erpUnitVos.length > 0">
+						<div class="flex flex-wrap gap-2">
+							<el-tag 
+								v-for="unit in scope.row.erpUnitVos" 
+								:key="unit.id"
+								:type="unit.isBase ? 'primary' : 'info'"
+								size="small"
+							>
+								{{ unit.unit }}
+								<span class="text-xs ml-1">
+									({{ formatPrice(unit.purchasePrice) }}元)
+								</span>
+							</el-tag>
+						</div>
+					</div>
+					<div v-else class="text-gray-400">
+						无包装单位
+					</div>
 				</template>
 			</el-table-column>
-			<el-table-column prop="categoryId" label="分类" min-width="100px" align="center" show-overflow-tooltip>
-				<template #default="scope">
-					{{ supermarketCategory?.find((item: any) => item.id === scope.row.categoryId)?.name }}
-				</template>
-			</el-table-column> -->
-			<!-- <el-table-column prop="supplierId" label="货商" min-width="100px" align="center" show-overflow-tooltip /> -->
 			<el-table-column prop="status" label="状态" min-width="100px" align="center" show-overflow-tooltip>
 				<template #default="scope">
 					<dict-tag :options="status" :value="scope.row.status" />
@@ -75,6 +84,7 @@ import { ref } from "vue"
 import { getErpSpuPage } from "/@/api/supermarketerp/common"
 import { getSupermarketCategory, getSupermarketBrand } from "/@/api/supermarketerp/supermarketSpu"
 import { useDict } from "/@/hooks/dict"
+import { displayPrice } from "/@/utils/formatMoney"
 
 const emit = defineEmits(["getSelectedRows"])
 const props = withDefaults(
@@ -100,10 +110,29 @@ const total = ref<number>(0)
 const dataList = ref<any[]>([]) // 对话框多选表格数据
 const supermarketCategory = ref<any>([]) // 商品分类
 const supermarketBrand = ref<any>([]) // 商品品牌
+const selectedRowsWithUnit = ref<any[]>([]) // 记录选中行及其包装单位
+const currentSelectedRows = ref<any[]>([]) // 当前选中的商品行
+
+// 格式化价格显示
+const formatPrice = (price: number) => {
+	return displayPrice(price, "")
+}
+
+// 判断行是否被选中
+const isRowSelected = (row: any) => {
+	return currentSelectedRows.value.some((selectedRow: any) => selectedRow.id === row.id)
+}
+
+// 处理商品选择变化
+const handleSelectionChange = (selection: any[]) => {
+	currentSelectedRows.value = selection
+}
 
 // 打开弹窗
 const openDialog = async () => {
 	dialogVisible.value = true
+	selectedRowsWithUnit.value = []
+	currentSelectedRows.value = []
 	getDataListAndSelect()
 }
 
@@ -113,21 +142,24 @@ const getDataListAndSelect = async () => {
 	try {
 		const { code, data } = await getErpSpuPage(queryForm)
 		if (code === 0) {
-			dataList.value = data.records.map((item: any) => ({ ...item, erpSpuId: item.id }))
+			dataList.value = data.records.map((item: any) => {
+				return {
+					...item,
+					erpSpuId: item.id
+				}
+			})
 			total.value = data.total
 
-			// 保存当前已选中的行
-			// const currentSelectedRows = tableRef.value?.getSelectionRows() || []
-			// 清空表格数据后重新设置
+			// 恢复之前的选择状态
 			nextTick(() => {
-				// 合并当前页面数据中的已选行和之前保存的已选行
-				const rowsToSelect = [...props.selectedRows.filter((row) => dataList.value.some((item) => item.erpSpuId === row.erpSpuId))]
-				// 去重
-				// const uniqueRowsToSelect = Array.from(new Map(rowsToSelect.map((row) => [row.erpSpuId, row])).values())
-				// 为匹配的行设置选中状态
-				rowsToSelect.forEach((row) => {
+				const rowsToRestore = props.selectedRows.filter((row) => dataList.value.some((item) => item.erpSpuId === row.erpSpuId))
+				
+				// 恢复商品选择状态
+				rowsToRestore.forEach((row) => {
 					const targetRow = dataList.value.find((item) => item.erpSpuId === row.erpSpuId)
-					targetRow && tableRef.value?.toggleRowSelection(targetRow, true)
+					if (targetRow) {
+						tableRef.value?.toggleRowSelection(targetRow, true)
+					}
 				})
 			})
 		}
@@ -153,24 +185,22 @@ const resetQuery = () => {
 	getDataListAndSelect()
 }
 
-// 点击商品列表表格行
-const rowClick = (row: any) => {
-	console.log("clicked-row", row)
-	tableRef.value.toggleRowSelection(row)
-}
-
 // 商品选择对话框确认
 const dialogConfirm = () => {
 	const $table = tableRef.value
 	if ($table) {
-		// 获取所有选中的行，包括其他页面的选择
+		// 获取当前选中的商品
 		const currentSelectedRows = $table.getSelectionRows()
+		
 		// 合并当前选中的行和之前已选的行（排除当前页面的行）
 		const allSelectedRows = [
 			...currentSelectedRows,
 			...props.selectedRows.filter((row) => !dataList.value.some((item) => item.erpSpuId === row.erpSpuId)),
 		]
+		
 		dialogVisible.value = false
+		selectedRowsWithUnit.value = []
+		currentSelectedRows.value = []
 		emit("getSelectedRows", allSelectedRows)
 	}
 }