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

src/components/Select/SelectSupermarketSupplier.vue

@@ -1,201 +1,86 @@
 <template>
 	<el-select
-		v-model="selectedId"
-		:placeholder="placeholder"
+		style="width: 100%"
+		v-model="state.selectId"
+		:placeholder="props.placeholder"
 		clearable
 		remote-show-suffix
 		filterable
 		remote
-		:remote-method="handleSearch"
+		:remote-method="remoteSearch"
 		:loading="state.loading"
-		@visible-change="handleVisibleChange"
-		@change="handleChange"
-		popper-class="supplier-select-dropdown"
+		@visible-change="(e: boolean) => e && getOptions()"
+		@change="change"
 	>
-		<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-option v-for="item in state.options" :key="item.supplierId" :label="item.supplierName" :value="item.supplierId" />
 	</el-select>
 </template>
 
 <script setup lang="ts">
-import { reactive, watch, nextTick, onMounted, onUnmounted } from "vue"
+import { reactive, watch } from "vue"
 import { fetchList } from "/@/api/supermarketerp/smErpSupplier"
 
-interface Supplier {
-	supplierId: string | number
-	supplierName: string
-}
+const emit = defineEmits(["change"])
 
-interface Props {
+const selectId = defineModel()
+
+export type Props = {
 	placeholder?: string
 }
-
 const props = withDefaults(defineProps<Props>(), {
-	placeholder: "请输入",
+	placeholder: "输入货商搜索",
 })
 
-const emit = defineEmits<{
-	(e: "change", supplier: Supplier | undefined): void
-}>()
-
-const selectedId = defineModel<string | number>()
-
-const state = reactive({
-	loading: false,
-	optionList: [] as Supplier[],
-	searchParams: {
-		supplierName: "",
-		current: 1,
-		size: 10,
-	},
-	hasMore: true,
-	total: 0,
-	isLoadingMore: false,
+const queryForm = reactive<any>({
+	supplierName: "",
+	current: 1,
+	size: 10,
 })
 
-let scrollContainer: HTMLElement | null = null
+const state = reactive<any>({
+	loading: true,
+	selectId: selectId,
+	options: [],
+})
 
-// 监听选中值变化
 watch(
-	selectedId,
-	(newVal) => {
-		if (newVal !== undefined) {
-			resetAndFetch()
-		}
+	selectId,
+	(newVal, oldValue) => {
+		if (newVal == oldValue) return
+		state.selectId = newVal
+		getOptions()
 	},
 	{ 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
-	
+async function getOptions() {
 	try {
-		if (state.searchParams.current === 1) {
-			state.loading = true
-		} else {
-			state.isLoadingMore = true
+		state.loading = true
+		const _pa = {
+			supplierId: selectId.value,
+			...queryForm,
 		}
-		
-		const params = {
-			supplierId: selectedId.value,
-			...state.searchParams,
-		}
-		const { data } = await fetchList(params)
-		
-		// 如果是第一页，替换数据；否则追加数据
-		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
+		const { data } = await fetchList(_pa)
+		state.options = data.records ?? []
 	} finally {
-		state.loading = false
-		state.isLoadingMore = false
+		setTimeout(() => (state.loading = false), 500)
 	}
 }
 
-// 搜索处理
-function handleSearch(keyword: string) {
-	if (keyword !== state.searchParams.supplierName) {
-		state.searchParams.supplierName = keyword
-		resetAndFetch()
+function remoteSearch(params: string) {
+	if (params != queryForm.supplierName) {
+		queryForm.supplierName = params
+		getOptions()
 	}
 }
 
-// 下拉框显示状态变化
-function handleVisibleChange(visible: boolean) {
-	if (visible) {
-		if (state.optionList.length === 0) {
-			resetAndFetch()
-		}
-		// 添加滚动监听
-		nextTick(() => {
-			addScrollListener()
-		})
-	} else {
-		// 移除滚动监听
-		removeScrollListener()
-	}
+function clear() {
+	state.selectId = null
+	getOptions()
 }
 
-// 选择变化处理
-function handleChange(supplierId: string) {
-	const selectedOption = state.optionList.find((option) => option.supplierId === supplierId)
-	emit("change", selectedOption)
+function change(v: any) {
+	const targetSupplier = state.options.find((i: any) => i.supplierId == v)
+	emit("change", targetSupplier)
 }
-
-// 加载更多
-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/purchaseManagement/smErpCgInventory/form.vue

@@ -113,9 +113,19 @@
 					</template>
 				</vxe-column>
 				<vxe-column field="selectedUnitObj" title="包装单位" :edit-render="{}">
-					<template #edit="{ row }">
-						<el-select v-model="row.selectedUnitObj" value-key="id" placeholder="请选择包装单位">
-							<el-option v-for="item in row.erpUnitVos" :key="item.id" :label="item.unit" :value="item" />
+					<template #edit="{ row, $rowIndex }">
+						<el-select
+							v-model="row.selectedUnitObj"
+							value-key="id"
+							placeholder="请选择包装单位"
+							@change="reComputeTotalAmount(row, $rowIndex)"
+						>
+							<el-option
+								v-for="item in row.erpUnitVos"
+								:key="item.id"
+								:label="item.spec ? item.unit + '-' + item.spec : item.unit"
+								:value="item"
+							/>
 						</el-select>
 						<!-- <el-select v-else v-model="row.unitId" value-key="id" placeholder="请选择包装单位">
 							<el-option :key="row.id" :label="row.unit" :value="row.unitId" />
@@ -126,11 +136,11 @@
 					</template>
 				</vxe-column>
 				<vxe-column field="quantity" title="数量" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
-					<template #edit="{ row }">
-						<el-input v-model.number="row.quantity" />
+					<template #edit="{ row, $rowIndex }">
+						<el-input v-model.number="row.quantity" @change="reComputeTotalAmount(row, $rowIndex)" />
 					</template>
 				</vxe-column>
-				<vxe-column field="unitPrice" title="原进价">
+				<vxe-column field="purchasePrice" title="原进价">
 					<template #default="{ row }">
 						{{ displayPrice(row.selectedUnitObj?.purchasePrice || 0) }}
 					</template>
@@ -139,15 +149,25 @@
 					<template #default="{ row }">
 						{{ row?.selectedUnitObj?.realPrice || 0 }}
 					</template>
-					<template #edit="{ row }">
-						<el-input-number v-if="row.selectedUnitObj" v-model="row.selectedUnitObj.realPrice" :min="0" :precision="2" />
+					<template #edit="{ row, $rowIndex }">
+						<el-input-number
+							v-if="row.selectedUnitObj"
+							v-model="row.selectedUnitObj.realPrice"
+							:min="0"
+							:precision="2"
+							@change="reComputeTotalAmount(row, $rowIndex)"
+						/>
 					</template>
 				</vxe-column>
-				<vxe-column field="totalAmount" title="累计总金额">
+				<vxe-column field="totalAmount" title="累计总金额" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
 					<template #default="{ row }">
-						<span v-if="row.selectedUnitObj && row.quantity">
-							{{ Number(row.quantity * parseFloat(row.selectedUnitObj.realPrice || 0)).toFixed(2) }}
-						</span>
+						{{ row?.selectedUnitObj?.totalAmount }}
+						<!-- <span v-if="row.selectedUnitObj && row.quantity">
+							{{ Number((row.quantity * parseFloat(row.selectedUnitObj.realPrice || 0)).toFixed(2)) }}
+						</span> -->
+					</template>
+					<template #edit="{ row }">
+						<el-input-number v-if="row.selectedUnitObj" v-model="row.selectedUnitObj.totalAmount" :min="0" :precision="2" />
 					</template>
 				</vxe-column>
 				<vxe-column field="remark" title="备注" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
@@ -265,7 +285,11 @@ const getInitData = async () => {
 				const selectedUnitObj = item.erpUnitVos.find((unit: any) => unit.id === item.unitId)
 				return {
 					...item,
-					selectedUnitObj: { ...selectedUnitObj, realPrice: displayPrice(item?.realPrice, "") || 0 },
+					selectedUnitObj: {
+						...selectedUnitObj,
+						realPrice: Number(displayPrice(item?.realPrice, "")) || 0,
+						totalAmount: Number(displayPrice(item?.totalAmount, "")),
+					},
 				}
 			})
 		}
@@ -315,8 +339,12 @@ const getSelectedRows = (selectionRows: any) => {
 			// if (index !== -1) return state.erpSpuItemsMemo[index]
 			return {
 				...addItem,
-				erpUnitVos: addItem.erpUnitVos.map((item: any) => ({ ...item, realPrice: displayPrice(item.purchasePrice, "") })),
-				selectedUnitObj: addItem.erpUnitVos[0],
+				erpUnitVos: addItem.erpUnitVos.map((item: any) => ({ ...item, realPrice: Number(displayPrice(item.purchasePrice, "")) })),
+				selectedUnitObj: {
+					...addItem.erpUnitVos[0],
+					realPrice: parseFloat(displayPrice(addItem.erpUnitVos[0].purchasePrice, "")),
+					totalAmount: 1 * parseFloat(displayPrice(addItem.erpUnitVos[0].purchasePrice, "")),
+				},
 				unitId: addItem.erpUnitVos[0].id,
 				quantity: 1,
 				isNew: true,
@@ -347,6 +375,11 @@ const removeRow = () => {
 	}
 }
 
+// 重新计算累计总金额
+const reComputeTotalAmount = (row: any, index: number) => {
+	vxeTableData.value[index].selectedUnitObj.totalAmount = Number((row.quantity * parseFloat(row.selectedUnitObj.realPrice || 0)).toFixed(2))
+}
+
 // 整理table数据
 const settledTableItems = computed(() => {
 	return vxeTableData.value.map((item: any) => {
@@ -357,7 +390,7 @@ const settledTableItems = computed(() => {
 			quantity: item.quantity,
 			unitPrice: selectedUnitObj.purchasePrice ? Number(selectedUnitObj?.purchasePrice) : 0,
 			realPrice: selectedUnitObj.realPrice ? storePrice(selectedUnitObj?.realPrice) : 0,
-			totalAmount: storePrice(Number(selectedUnitObj?.realPrice || 0) * item.quantity),
+			totalAmount: storePrice(Number(selectedUnitObj?.totalAmount || 0)),
 			remark: item.remark,
 			unitId: selectedUnitObj.id,
 			orderType: baseDataForm.orderType,