441 lines
16 KiB
Vue
441 lines
16 KiB
Vue
<!-- WMS 盘库单表单 -->
|
|
<template>
|
|
<Dialog v-model="dialogVisible" :title="dialogTitle" width="1280px">
|
|
<el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="92px">
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<el-form-item label="盘库单号" prop="no">
|
|
<el-input v-model="formData.no" maxlength="64" placeholder="请输入盘库单号" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="仓库" prop="warehouseId">
|
|
<WarehouseSelect v-model="formData.warehouseId" @change="handleWarehouseChange" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="单据日期" prop="orderTime">
|
|
<el-date-picker
|
|
v-model="formData.orderTime"
|
|
class="!w-1/1"
|
|
placeholder="请选择单据日期"
|
|
type="date"
|
|
value-format="x"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="实际金额">
|
|
<el-input :model-value="formatPrice(actualPrice)" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="16">
|
|
<el-form-item label="备注" prop="remark">
|
|
<el-input v-model="formData.remark" maxlength="255" placeholder="请输入备注" :rows="3" type="textarea" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<div class="mb-12px flex items-center justify-between">
|
|
<span class="text-14px font-bold">盘库明细</span>
|
|
<el-tooltip content="请先选择仓库" :disabled="!!formData.warehouseId" placement="top">
|
|
<span>
|
|
<el-button :disabled="!formData.warehouseId" plain type="primary" @click="handleAddDetail">
|
|
<Icon class="mr-5px" icon="ep:plus" />
|
|
添加商品
|
|
</el-button>
|
|
</span>
|
|
</el-tooltip>
|
|
</div>
|
|
<el-table
|
|
:data="formData.details"
|
|
:summary-method="getDetailSummaries"
|
|
border
|
|
empty-text="暂无商品明细"
|
|
show-summary
|
|
>
|
|
<el-table-column label="商品信息" min-width="210">
|
|
<template #default="{ row }">
|
|
<div>{{ row.itemName || '-' }}</div>
|
|
<div v-if="row.itemCode" class="text-12px text-gray-500">商品编号：{{ row.itemCode }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="规格信息" min-width="210">
|
|
<template #default="{ row }">
|
|
<div>{{ row.skuName || '-' }}</div>
|
|
<div v-if="row.skuCode" class="text-12px text-gray-500">规格编号：{{ row.skuCode }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="right" label="账面库存" prop="quantity" width="120">
|
|
<template #default="{ row }">{{ formatQuantity(row.quantity) || '-' }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="单价(元)" prop="price" width="160">
|
|
<template #default="{ row }">
|
|
<el-input-number
|
|
v-model="row.price"
|
|
:controls="false"
|
|
:min="0"
|
|
:precision="PRICE_PRECISION"
|
|
class="!w-1/1"
|
|
placeholder="单价"
|
|
@change="handleDetailPriceChange(row)"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="实际库存" prop="checkQuantity" width="160">
|
|
<template #default="{ row }">
|
|
<el-input-number
|
|
v-model="row.checkQuantity"
|
|
:controls="false"
|
|
:min="0"
|
|
:precision="QUANTITY_PRECISION"
|
|
class="!w-1/1"
|
|
placeholder="数量"
|
|
@change="handleDetailCheckQuantityChange(row)"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="实际金额(元)" prop="actualPrice" width="160">
|
|
<template #default="{ row }">
|
|
<el-input-number
|
|
v-model="row.actualPrice"
|
|
:controls="false"
|
|
:min="0"
|
|
:precision="PRICE_PRECISION"
|
|
class="!w-1/1"
|
|
placeholder="金额"
|
|
@change="handleDetailActualPriceChange(row)"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="right" label="盈亏数" prop="differenceQuantity" width="120">
|
|
<template #default="{ row }">
|
|
<span :class="getLossClass(getDifferenceQuantity(row))">{{ formatQuantity(getDifferenceQuantity(row)) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="right" label="实际盈亏金额(元)" prop="differencePrice" width="160">
|
|
<template #default="{ row }">
|
|
<span :class="getLossClass(getDifferencePrice(row))">{{ formatPrice(getDifferencePrice(row)) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="操作" width="80">
|
|
<template #default="{ $index }">
|
|
<el-button link type="danger" @click="handleDeleteDetail($index)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<InventorySelect
|
|
ref="inventorySelectRef"
|
|
:warehouse-id="formData.warehouseId"
|
|
@change="handleSelectInventory"
|
|
/>
|
|
</el-form>
|
|
<template #footer>
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<el-button
|
|
v-if="isSavedPrepareOrder"
|
|
v-hasPermi="['wms:check-order:complete']"
|
|
:disabled="formLoading"
|
|
type="success"
|
|
@click="handleComplete"
|
|
>
|
|
完成盘库
|
|
</el-button>
|
|
<el-button
|
|
v-if="isSavedPrepareOrder"
|
|
v-hasPermi="['wms:check-order:cancel']"
|
|
:disabled="formLoading"
|
|
type="danger"
|
|
@click="handleCancel"
|
|
>
|
|
作废
|
|
</el-button>
|
|
</div>
|
|
<div>
|
|
<el-button v-if="isPrepareOrder" :disabled="formLoading" type="primary" @click="submitForm">保存</el-button>
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Dialog>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { FormRules } from 'element-plus'
|
|
import { h } from 'vue'
|
|
import { CheckOrderApi, CheckOrderVO } from '@/api/wms/order/check'
|
|
import { CheckOrderDetailVO } from '@/api/wms/order/check/detail'
|
|
import InventorySelect, { InventorySelectRow } from '@/views/wms/inventory/components/InventorySelect.vue'
|
|
import WarehouseSelect from '@/views/wms/md/warehouse/components/WarehouseSelect.vue'
|
|
import { OrderStatusEnum, OrderUpdateStatusList } from '@/views/wms/utils/constants'
|
|
import {
|
|
dividePrice,
|
|
getLossClass,
|
|
formatPrice,
|
|
formatQuantity,
|
|
formatSumPrice,
|
|
formatSumQuantity,
|
|
multiplyPrice,
|
|
PRICE_PRECISION,
|
|
QUANTITY_PRECISION,
|
|
roundPrice,
|
|
sumPrice,
|
|
sumQuantity
|
|
} from '@/views/wms/utils/format'
|
|
import { generateOrderNo } from '@/views/wms/utils/order'
|
|
|
|
/** WMS 盘库单表单 */
|
|
defineOptions({ name: 'WmsCheckOrderForm' })
|
|
|
|
const { t } = useI18n()
|
|
const message = useMessage()
|
|
|
|
const dialogVisible = ref(false)
|
|
const dialogTitle = ref('')
|
|
const formLoading = ref(false)
|
|
const formType = ref('')
|
|
const originalFormData = ref('')
|
|
|
|
type CheckOrderFormDetail = CheckOrderDetailVO & { actualPrice?: number }
|
|
type CheckOrderFormData = Omit<CheckOrderVO, 'details'> & { details?: CheckOrderFormDetail[] }
|
|
|
|
const formData = ref<CheckOrderFormData>({
|
|
id: undefined,
|
|
no: undefined,
|
|
orderTime: undefined,
|
|
status: OrderStatusEnum.PREPARE,
|
|
warehouseId: undefined,
|
|
remark: undefined,
|
|
details: []
|
|
})
|
|
const formRules = reactive<FormRules>({
|
|
no: [{ required: true, message: '盘库单号不能为空', trigger: 'blur' }],
|
|
orderTime: [{ required: true, message: '单据日期不能为空', trigger: 'change' }],
|
|
warehouseId: [{ required: true, message: '仓库不能为空', trigger: 'change' }]
|
|
})
|
|
const formRef = ref()
|
|
const inventorySelectRef = ref()
|
|
|
|
const getDifferenceQuantity = (detail: CheckOrderFormDetail) => Number(detail.checkQuantity || 0) - Number(detail.quantity || 0)
|
|
const getBookPrice = (detail: CheckOrderFormDetail) => multiplyPrice(detail.quantity, detail.price)
|
|
const getActualPrice = (detail: CheckOrderFormDetail) => detail.actualPrice ?? multiplyPrice(detail.checkQuantity, detail.price)
|
|
const getDifferencePrice = (detail: CheckOrderFormDetail) => {
|
|
if (detail.price === undefined || detail.price === null) {
|
|
return undefined
|
|
}
|
|
return roundPrice(getDifferenceQuantity(detail) * Number(detail.price))
|
|
}
|
|
const renderLossText = (value: number | string | null | undefined, formatter: (value?: number | string | null) => string) =>
|
|
h('span', { class: getLossClass(value) }, formatter(value))
|
|
const totalQuantity = computed(() => sumQuantity(formData.value.details || [], (detail) => getDifferenceQuantity(detail)))
|
|
const totalPrice = computed(() => sumPrice(formData.value.details || [], (detail) => getBookPrice(detail)))
|
|
const actualPrice = computed(() => sumPrice(formData.value.details || [], (detail) => getActualPrice(detail)))
|
|
const differencePrice = computed(() => roundPrice(actualPrice.value - totalPrice.value) || 0)
|
|
const isPrepareOrder = computed(
|
|
() =>
|
|
!formData.value.id ||
|
|
(formData.value.status !== undefined && OrderUpdateStatusList.includes(formData.value.status))
|
|
)
|
|
const isSavedPrepareOrder = computed(
|
|
() =>
|
|
!!formData.value.id &&
|
|
formData.value.status !== undefined &&
|
|
OrderUpdateStatusList.includes(formData.value.status)
|
|
)
|
|
|
|
/** 打开弹窗 */
|
|
const open = async (type: string, id?: number) => {
|
|
dialogVisible.value = true
|
|
dialogTitle.value = t('action.' + type)
|
|
formType.value = type
|
|
resetForm()
|
|
if (id) {
|
|
formLoading.value = true
|
|
try {
|
|
const order = await CheckOrderApi.getCheckOrder(id)
|
|
formData.value = { ...order, details: normalizeDetails(order.details || []) }
|
|
} finally {
|
|
formLoading.value = false
|
|
}
|
|
}
|
|
originalFormData.value = JSON.stringify(buildSubmitData())
|
|
}
|
|
defineExpose({ open })
|
|
|
|
/** 构建盘库明细 */
|
|
const buildDetail = (inventory: InventorySelectRow): CheckOrderFormDetail => ({
|
|
id: undefined,
|
|
itemId: inventory.itemId,
|
|
itemCode: inventory.itemCode,
|
|
itemName: inventory.itemName,
|
|
unit: inventory.unit,
|
|
skuId: inventory.skuId,
|
|
skuCode: inventory.skuCode,
|
|
skuName: inventory.skuName,
|
|
inventoryId: inventory.id,
|
|
warehouseId: inventory.warehouseId,
|
|
warehouseName: inventory.warehouseName,
|
|
quantity: inventory.availableQuantity,
|
|
checkQuantity: inventory.availableQuantity,
|
|
availableQuantity: inventory.availableQuantity,
|
|
price: inventory.price,
|
|
actualPrice: multiplyPrice(inventory.availableQuantity, inventory.price)
|
|
})
|
|
|
|
const normalizeDetails = (details: CheckOrderDetailVO[]) =>
|
|
details.map((detail) => ({
|
|
...detail,
|
|
actualPrice: multiplyPrice(detail.checkQuantity, detail.price)
|
|
}))
|
|
|
|
const handleAddDetail = () => inventorySelectRef.value?.open()
|
|
const handleSelectInventory = (inventories: InventorySelectRow[]) => {
|
|
if (!inventories.length) return
|
|
formData.value.details = formData.value.details || []
|
|
inventories.forEach((inventory) => {
|
|
if (isInventorySelected(inventory)) return
|
|
formData.value.details!.push(buildDetail(inventory))
|
|
})
|
|
}
|
|
const isInventorySelected = (inventory: InventorySelectRow) =>
|
|
(formData.value.details || []).some((detail) => {
|
|
return detail.inventoryId === inventory.id
|
|
})
|
|
const handleDeleteDetail = (index: number) => {
|
|
formData.value.details?.splice(index, 1)
|
|
}
|
|
const handleWarehouseChange = () => {
|
|
formData.value.details = []
|
|
}
|
|
|
|
const handleDetailCheckQuantityChange = (detail: CheckOrderFormDetail) => {
|
|
if (detail.price !== undefined && detail.price !== null) {
|
|
detail.actualPrice = multiplyPrice(detail.checkQuantity, detail.price)
|
|
return
|
|
}
|
|
detail.price = dividePrice(detail.actualPrice, detail.checkQuantity)
|
|
}
|
|
|
|
const handleDetailPriceChange = (detail: CheckOrderFormDetail) => {
|
|
detail.actualPrice = multiplyPrice(detail.checkQuantity, detail.price)
|
|
}
|
|
|
|
const handleDetailActualPriceChange = (detail: CheckOrderFormDetail) => {
|
|
detail.price = dividePrice(detail.actualPrice, detail.checkQuantity)
|
|
}
|
|
|
|
const getDetailSummaries = ({ columns, data }: { columns: any[]; data: CheckOrderFormDetail[] }) =>
|
|
columns.map((column, index) => {
|
|
if (index === 0) return '合计'
|
|
if (column.property === 'quantity') return formatSumQuantity(data, (detail) => detail.quantity)
|
|
if (column.property === 'checkQuantity') return formatSumQuantity(data, (detail) => detail.checkQuantity)
|
|
if (column.property === 'actualPrice') return formatSumPrice(data, (detail) => getActualPrice(detail))
|
|
if (column.property === 'differenceQuantity') return renderLossText(totalQuantity.value, formatQuantity)
|
|
if (column.property === 'differencePrice') return renderLossText(differencePrice.value, formatPrice)
|
|
return ''
|
|
})
|
|
|
|
/** 校验明细 */
|
|
const validateDetails = (required: boolean) => {
|
|
if (!formData.value.details?.length) {
|
|
if (required) {
|
|
message.error('至少包含一条盘库明细')
|
|
return false
|
|
}
|
|
return true
|
|
}
|
|
for (let i = 0; i < formData.value.details.length; i++) {
|
|
const detail = formData.value.details[i]
|
|
if (detail.checkQuantity === undefined || detail.checkQuantity < 0) {
|
|
message.error(`第 ${i + 1} 行明细实盘数量不能小于 0`)
|
|
return false
|
|
}
|
|
}
|
|
return true
|
|
}
|
|
|
|
/** 构建提交数据 */
|
|
const buildSubmitData = () => {
|
|
const { totalQuantity: _totalQuantity, totalPrice: _totalPrice, actualPrice: _actualPrice, details, ...order } = formData.value
|
|
return {
|
|
...order,
|
|
details: (details || []).map(({
|
|
actualPrice: _rowActualPrice,
|
|
availableQuantity: _availableQuantity,
|
|
...detail
|
|
}) => detail)
|
|
} as CheckOrderVO
|
|
}
|
|
|
|
const emit = defineEmits(['success'])
|
|
const submitForm = async () => {
|
|
await formRef.value.validate()
|
|
if (!validateDetails(false)) return
|
|
formLoading.value = true
|
|
try {
|
|
const data = buildSubmitData()
|
|
if (formType.value === 'create') {
|
|
await CheckOrderApi.createCheckOrder(data)
|
|
message.success(t('common.createSuccess'))
|
|
} else {
|
|
await CheckOrderApi.updateCheckOrder(data)
|
|
message.success(t('common.updateSuccess'))
|
|
}
|
|
dialogVisible.value = false
|
|
emit('success')
|
|
} finally {
|
|
formLoading.value = false
|
|
}
|
|
}
|
|
|
|
/** 完成盘库：表单修改过则先保存，再完成 */
|
|
const handleComplete = async () => {
|
|
await formRef.value.validate()
|
|
if (!validateDetails(true)) return
|
|
try {
|
|
await message.confirm('确认完成盘库？完成后将更新库存。')
|
|
formLoading.value = true
|
|
const data = buildSubmitData()
|
|
if (JSON.stringify(data) !== originalFormData.value) {
|
|
await CheckOrderApi.updateCheckOrder(data)
|
|
}
|
|
await CheckOrderApi.completeCheckOrder(formData.value.id!)
|
|
message.success('盘库成功')
|
|
dialogVisible.value = false
|
|
emit('success')
|
|
} finally {
|
|
formLoading.value = false
|
|
}
|
|
}
|
|
|
|
/** 作废盘库单 */
|
|
const handleCancel = async () => {
|
|
try {
|
|
await message.confirm('确认作废该盘库单？作废后不可恢复。')
|
|
formLoading.value = true
|
|
await CheckOrderApi.cancelCheckOrder(formData.value.id!)
|
|
message.success('作废成功')
|
|
dialogVisible.value = false
|
|
emit('success')
|
|
} finally {
|
|
formLoading.value = false
|
|
}
|
|
}
|
|
|
|
/** 重置表单 */
|
|
const resetForm = () => {
|
|
formData.value = {
|
|
id: undefined,
|
|
no: generateOrderNo('PK'),
|
|
orderTime: undefined,
|
|
status: OrderStatusEnum.PREPARE,
|
|
warehouseId: undefined,
|
|
remark: undefined,
|
|
details: []
|
|
}
|
|
originalFormData.value = ''
|
|
nextTick(() => formRef.value?.clearValidate())
|
|
}
|
|
</script>
|