Merge branch 'master' of https://codeup.aliyun.com/bsdtec/biz-pc-cloud
This commit is contained in:
commit
9904fa9cdc
3 files changed
+175
-40
No files matched your search
+4
-4
@@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user