This commit is contained in:
weiwei committed 2025-06-09 17:39:54 +08:00
commit 9904fa9cdc
3 files changed
+175 -40

No files matched your search

+4 -4
View File
@@ -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/ # 正式环境线上
# 代码生成服务地址
@@ -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>
@@ -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)
}
}