Merge branch 'master' of https://codeup.aliyun.com/bsdtec/biz-pc-cloud
This commit is contained in:
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,
|
||||||
|
|||||||
Reference in new issue
Block a user