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

.env.development

@@ -8,17 +8,17 @@ VITE_OPEN = true
 ENV = 'development'
 
 # ADMIN 服务地址
-VITE_ADMIN_PROXY_PATH = http://123.156.230.15:8089/api/ # 测试线上
+# 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.125:9999/ # 邓-本地
+VITE_ADMIN_PROXY_PATH = http://192.168.101.132: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://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.125:9999 # 邓-本地
+VITE_IMAGE_BASE_PATH = http://192.168.101.132:9999 # 邓-本地
 # VITE_IMAGE_BASE_PATH = http://59.202.170.152:81/api/ # 正式环境线上
 
 # 代码生成服务地址

src/components/Select/SelectSupermarketSupplier.vue

@@ -10,13 +10,30 @@
 		:loading="state.loading"
 		@visible-change="handleVisibleChange"
 		@change="handleChange"
+		popper-class="supplier-select-dropdown"
 	>
 		<el-option v-for="item in state.optionList" :key="item.supplierId" :label="item.supplierName" :value="item.supplierId" />
+		<el-option
+			v-if="state.loading && state.optionList.length > 0"
+			value=""
+			disabled
+			style="text-align: center; color: #999;"
+		>
+			加载中...
+		</el-option>
+		<el-option
+			v-if="!state.hasMore && state.optionList.length > 0"
+			value=""
+			disabled
+			style="text-align: center; color: #999;"
+		>
+			没有更多数据了
+		</el-option>
 	</el-select>
 </template>
 
 <script setup lang="ts">
-import { reactive, watch } from "vue"
+import { reactive, watch, nextTick, onMounted, onUnmounted } from "vue"
 import { fetchList } from "/@/api/supermarketerp/smErpSupplier"
 
 interface Supplier {
@@ -46,30 +63,63 @@ const state = reactive({
 		current: 1,
 		size: 10,
 	},
+	hasMore: true,
+	total: 0,
+	isLoadingMore: false,
 })
 
+let scrollContainer: HTMLElement | null = null
+
 // 监听选中值变化
 watch(
 	selectedId,
 	(newVal) => {
 		if (newVal !== undefined) {
-			fetchoptionList()
+			resetAndFetch()
 		}
 	},
 	{ immediate: true },
 )
 
+// 重置并获取数据
+async function resetAndFetch() {
+	state.searchParams.current = 1
+	state.optionList = []
+	state.hasMore = true
+	state.isLoadingMore = false
+	await fetchoptionList()
+}
+
 async function fetchoptionList() {
+	if (state.loading || state.isLoadingMore) return
+	
 	try {
-		state.loading = true
+		if (state.searchParams.current === 1) {
+			state.loading = true
+		} else {
+			state.isLoadingMore = true
+		}
+		
 		const params = {
 			supplierId: selectedId.value,
 			...state.searchParams,
 		}
 		const { data } = await fetchList(params)
-		state.optionList = data.records ?? []
+		
+		// 如果是第一页，替换数据；否则追加数据
+		if (state.searchParams.current === 1) {
+			state.optionList = data.records ?? []
+		} else {
+			// 确保追加而不是替换
+			const newRecords = data.records ?? []
+			state.optionList = [...state.optionList, ...newRecords]
+		}
+		
+		state.total = data.total || 0
+		state.hasMore = state.optionList.length < state.total
 	} finally {
 		state.loading = false
+		state.isLoadingMore = false
 	}
 }
 
@@ -77,14 +127,23 @@ async function fetchoptionList() {
 function handleSearch(keyword: string) {
 	if (keyword !== state.searchParams.supplierName) {
 		state.searchParams.supplierName = keyword
-		fetchoptionList()
+		resetAndFetch()
 	}
 }
 
 // 下拉框显示状态变化
 function handleVisibleChange(visible: boolean) {
 	if (visible) {
-		fetchoptionList()
+		if (state.optionList.length === 0) {
+			resetAndFetch()
+		}
+		// 添加滚动监听
+		nextTick(() => {
+			addScrollListener()
+		})
+	} else {
+		// 移除滚动监听
+		removeScrollListener()
 	}
 }
 
@@ -93,4 +152,50 @@ function handleChange(supplierId: string) {
 	const selectedOption = state.optionList.find((option) => option.supplierId === supplierId)
 	emit("change", selectedOption)
 }
+
+// 加载更多
+function loadMore() {
+	if (state.hasMore && !state.loading && !state.isLoadingMore) {
+		state.searchParams.current += 1
+		fetchoptionList()
+	}
+}
+
+// 添加滚动监听
+function addScrollListener() {
+	// 查找下拉框的滚动容器
+	scrollContainer = document.querySelector('.supplier-select-dropdown .el-select-dropdown__wrap') as HTMLElement
+	if (scrollContainer) {
+		scrollContainer.addEventListener('scroll', handleScroll)
+	}
+}
+
+// 移除滚动监听
+function removeScrollListener() {
+	if (scrollContainer) {
+		scrollContainer.removeEventListener('scroll', handleScroll)
+		scrollContainer = null
+	}
+}
+
+// 处理滚动事件
+function handleScroll() {
+	if (!scrollContainer || state.isLoadingMore || !state.hasMore) return
+	
+	const { scrollTop, scrollHeight, clientHeight } = scrollContainer
+	// 当滚动到底部附近时（距离底部50px）触发加载
+	if (scrollTop + clientHeight >= scrollHeight - 50) {
+		loadMore()
+	}
+}
+
+onUnmounted(() => {
+	removeScrollListener()
+})
 </script>
+
+<style>
+.supplier-select-dropdown .el-select-dropdown__wrap {
+	max-height: 300px !important;
+}
+</style>

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"
+			@selection-change="handleSelectionChange"
-			:row-style="{ cursor: 'pointer' }"
 		>
 			<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 rowsToRestore = props.selectedRows.filter((row) => dataList.value.some((item) => item.erpSpuId === row.erpSpuId))
-				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())
+				rowsToRestore.forEach((row) => {
-				// 为匹配的行设置选中状态
-				rowsToSelect.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)
 	}
 }