This commit is contained in:
dzc committed 2025-08-02 16:30:21 +08:00
commit 2feab8cb7f
2 files changed
+94 -176

No files matched your search

@@ -1,201 +1,86 @@
<template> <template>
<el-select <el-select
v-model="selectedId" style="width: 100%"
:placeholder="placeholder" v-model="state.selectId"
:placeholder="props.placeholder"
clearable clearable
remote-show-suffix remote-show-suffix
filterable filterable
remote remote
:remote-method="handleSearch" :remote-method="remoteSearch"
:loading="state.loading" :loading="state.loading"
@visible-change="handleVisibleChange" @visible-change="(e: boolean) => e && getOptions()"
@change="handleChange" @change="change"
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-for="item in state.options" :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> </el-select>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { reactive, watch, nextTick, onMounted, onUnmounted } from "vue" import { reactive, watch } from "vue"
import { fetchList } from "/@/api/supermarketerp/smErpSupplier" import { fetchList } from "/@/api/supermarketerp/smErpSupplier"
interface Supplier { const emit = defineEmits(["change"])
supplierId: string | number
supplierName: string
}
interface Props { const selectId = defineModel()
export type Props = {
placeholder?: string placeholder?: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
placeholder: "请输入", placeholder: "输入货商搜索",
}) })
const emit = defineEmits<{ const queryForm = reactive<any>({
(e: "change", supplier: Supplier | undefined): void supplierName: "",
}>() current: 1,
size: 10,
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,
}) })
let scrollContainer: HTMLElement | null = null const state = reactive<any>({
loading: true,
selectId: selectId,
options: [],
})
// 监听选中值变化
watch( watch(
selectedId, selectId,
(newVal) => { (newVal, oldValue) => {
if (newVal !== undefined) { if (newVal == oldValue) return
resetAndFetch() state.selectId = newVal
} getOptions()
}, },
{ immediate: true }, { immediate: true },
) )
// 重置并获取数据 async function getOptions() {
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 { try {
if (state.searchParams.current === 1) { state.loading = true
state.loading = true const _pa = {
} else { supplierId: selectId.value,
state.isLoadingMore = true ...queryForm,
} }
const { data } = await fetchList(_pa)
const params = { state.options = data.records ?? []
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
} finally { } finally {
state.loading = false setTimeout(() => (state.loading = false), 500)
state.isLoadingMore = false
} }
} }
// 搜索处理 function remoteSearch(params: string) {
function handleSearch(keyword: string) { if (params != queryForm.supplierName) {
if (keyword !== state.searchParams.supplierName) { queryForm.supplierName = params
state.searchParams.supplierName = keyword getOptions()
resetAndFetch()
} }
} }
// 下拉框显示状态变化 function clear() {
function handleVisibleChange(visible: boolean) { state.selectId = null
if (visible) { getOptions()
if (state.optionList.length === 0) {
resetAndFetch()
}
// 添加滚动监听
nextTick(() => {
addScrollListener()
})
} else {
// 移除滚动监听
removeScrollListener()
}
} }
// 选择变化处理 function change(v: any) {
function handleChange(supplierId: string) { const targetSupplier = state.options.find((i: any) => i.supplierId == v)
const selectedOption = state.optionList.find((option) => option.supplierId === supplierId) emit("change", targetSupplier)
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> </script>
<style>
.supplier-select-dropdown .el-select-dropdown__wrap {
max-height: 300px !important;
}
</style>
@@ -113,9 +113,19 @@
</template> </template>
</vxe-column> </vxe-column>
<vxe-column field="selectedUnitObj" title="包装单位" :edit-render="{}"> <vxe-column field="selectedUnitObj" title="包装单位" :edit-render="{}">
<template #edit="{ row }"> <template #edit="{ row, $rowIndex }">
<el-select v-model="row.selectedUnitObj" value-key="id" placeholder="请选择包装单位"> <el-select
<el-option v-for="item in row.erpUnitVos" :key="item.id" :label="item.unit" :value="item" /> 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>
<!-- <el-select v-else v-model="row.unitId" value-key="id" placeholder="请选择包装单位"> <!-- <el-select v-else v-model="row.unitId" value-key="id" placeholder="请选择包装单位">
<el-option :key="row.id" :label="row.unit" :value="row.unitId" /> <el-option :key="row.id" :label="row.unit" :value="row.unitId" />
@@ -126,11 +136,11 @@
</template> </template>
</vxe-column> </vxe-column>
<vxe-column field="quantity" title="数量" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }"> <vxe-column field="quantity" title="数量" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
<template #edit="{ row }"> <template #edit="{ row, $rowIndex }">
<el-input v-model.number="row.quantity" /> <el-input v-model.number="row.quantity" @change="reComputeTotalAmount(row, $rowIndex)" />
</template> </template>
</vxe-column> </vxe-column>
<vxe-column field="unitPrice" title="原进价"> <vxe-column field="purchasePrice" title="原进价">
<template #default="{ row }"> <template #default="{ row }">
{{ displayPrice(row.selectedUnitObj?.purchasePrice || 0) }} {{ displayPrice(row.selectedUnitObj?.purchasePrice || 0) }}
</template> </template>
@@ -139,15 +149,25 @@
<template #default="{ row }"> <template #default="{ row }">
{{ row?.selectedUnitObj?.realPrice || 0 }} {{ row?.selectedUnitObj?.realPrice || 0 }}
</template> </template>
<template #edit="{ row }"> <template #edit="{ row, $rowIndex }">
<el-input-number v-if="row.selectedUnitObj" v-model="row.selectedUnitObj.realPrice" :min="0" :precision="2" /> <el-input-number
v-if="row.selectedUnitObj"
v-model="row.selectedUnitObj.realPrice"
:min="0"
:precision="2"
@change="reComputeTotalAmount(row, $rowIndex)"
/>
</template> </template>
</vxe-column> </vxe-column>
<vxe-column field="totalAmount" title="累计总金额"> <vxe-column field="totalAmount" title="累计总金额" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
<template #default="{ row }"> <template #default="{ row }">
<span v-if="row.selectedUnitObj && row.quantity"> {{ row?.selectedUnitObj?.totalAmount }}
{{ Number(row.quantity * parseFloat(row.selectedUnitObj.realPrice || 0)).toFixed(2) }} <!-- <span v-if="row.selectedUnitObj && row.quantity">
</span> {{ 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> </template>
</vxe-column> </vxe-column>
<vxe-column field="remark" title="备注" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }"> <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) const selectedUnitObj = item.erpUnitVos.find((unit: any) => unit.id === item.unitId)
return { return {
...item, ...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] // if (index !== -1) return state.erpSpuItemsMemo[index]
return { return {
...addItem, ...addItem,
erpUnitVos: addItem.erpUnitVos.map((item: any) => ({ ...item, realPrice: displayPrice(item.purchasePrice, "") })), erpUnitVos: addItem.erpUnitVos.map((item: any) => ({ ...item, realPrice: Number(displayPrice(item.purchasePrice, "")) })),
selectedUnitObj: addItem.erpUnitVos[0], selectedUnitObj: {
...addItem.erpUnitVos[0],
realPrice: parseFloat(displayPrice(addItem.erpUnitVos[0].purchasePrice, "")),
totalAmount: 1 * parseFloat(displayPrice(addItem.erpUnitVos[0].purchasePrice, "")),
},
unitId: addItem.erpUnitVos[0].id, unitId: addItem.erpUnitVos[0].id,
quantity: 1, quantity: 1,
isNew: true, 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数据 // 整理table数据
const settledTableItems = computed(() => { const settledTableItems = computed(() => {
return vxeTableData.value.map((item: any) => { return vxeTableData.value.map((item: any) => {
@@ -357,7 +390,7 @@ const settledTableItems = computed(() => {
quantity: item.quantity, quantity: item.quantity,
unitPrice: selectedUnitObj.purchasePrice ? Number(selectedUnitObj?.purchasePrice) : 0, unitPrice: selectedUnitObj.purchasePrice ? Number(selectedUnitObj?.purchasePrice) : 0,
realPrice: selectedUnitObj.realPrice ? storePrice(selectedUnitObj?.realPrice) : 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, remark: item.remark,
unitId: selectedUnitObj.id, unitId: selectedUnitObj.id,
orderType: baseDataForm.orderType, orderType: baseDataForm.orderType,