出入库
This commit is contained in:
朱昊天
486
gear-ui3/src/views/wms/stockIoOrder/out.vue
Normal file
486
gear-ui3/src/views/wms/stockIoOrder/out.vue
Normal file
@@ -0,0 +1,486 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
|
||||
<el-form-item label="单号" prop="orderCode">
|
||||
<el-input v-model="queryParams.orderCode" placeholder="请输入单据编号" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="业务类型" prop="bizType">
|
||||
<el-input v-model="queryParams.bizType" placeholder="请输入业务类型" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="责任人" prop="responsibleName">
|
||||
<el-input v-model="queryParams.responsibleName" placeholder="请输入责任人" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Plus" size="mini" @click="handleAdd">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="RefreshLeft" size="mini" :disabled="single" @click="handleRevoke()">撤回</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="单据编号" align="center" prop="orderCode" min-width="160" />
|
||||
<el-table-column label="物料" align="center" min-width="220">
|
||||
<template #default="scope">
|
||||
<el-tooltip v-if="scope.row.materialNames && String(scope.row.materialNames).length > 16" effect="dark" placement="top">
|
||||
<template #content>
|
||||
<div style="max-width: 420px; white-space: normal; word-break: break-all;">
|
||||
{{ scope.row.materialNames }}
|
||||
</div>
|
||||
</template>
|
||||
<span>{{ String(scope.row.materialNames).slice(0, 16) + '…' }}</span>
|
||||
</el-tooltip>
|
||||
<span v-else>{{ scope.row.materialNames || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="业务类型" align="center" prop="bizType" min-width="120" />
|
||||
<el-table-column label="责任人" align="center" prop="responsibleName" min-width="120" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="220">
|
||||
<template #default="scope">
|
||||
<el-button size="mini" type="text" icon="Document" @click="showDetail(scope.row)">明细</el-button>
|
||||
<el-button size="mini" type="text" icon="RefreshLeft" @click="handleRevoke(scope.row)">撤回</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<el-dialog :title="editTitle" v-model="editOpen" width="1100px" top="5vh" append-to-body>
|
||||
<el-form ref="editFormRef" :model="editForm" :rules="editRules" label-width="90px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="类型">
|
||||
<el-tag type="warning">出库</el-tag>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="业务类型" prop="bizType">
|
||||
<el-input v-model="editForm.bizType" placeholder="请输入业务类型" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="责任人" prop="responsibleName">
|
||||
<el-input v-model="editForm.responsibleName" placeholder="请输入责任人" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="来源单号" prop="sourceNo">
|
||||
<el-input v-model="editForm.sourceNo" placeholder="请输入来源单号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="editForm.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div style="display:flex;gap:8px;align-items:center;margin-bottom:10px;">
|
||||
<el-button type="primary" plain icon="Plus" size="mini" @click="addDetailRow">新增明细行</el-button>
|
||||
<RawSelector v-model:materialIds="batchMaterialIds" :multiple="true" :allowAdd="false" @multi-change="handleBatchPicked">
|
||||
<template #trigger>
|
||||
<el-button type="primary" plain size="mini">批量选择原料</el-button>
|
||||
</template>
|
||||
</RawSelector>
|
||||
<el-button type="danger" plain icon="Delete" size="mini" :disabled="detailSelection.length === 0" @click="removeDetailRows">删除选中</el-button>
|
||||
<div style="margin-left:auto;">
|
||||
<span>合计数量：{{ totalQtyText }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table :data="editDetails" border style="width: 100%" @selection-change="onDetailSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="行号" width="70" align="center">
|
||||
<template #default="scope">
|
||||
{{ scope.row.lineNo }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="物料类型" width="100" align="center">
|
||||
<template #default>
|
||||
原料
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="原料" min-width="260" align="center">
|
||||
<template #default="scope">
|
||||
<RawSelector v-model="scope.row.itemId" :allowAdd="false" @change="onMaterialPicked(scope.row, $event)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="名称快照" min-width="180" align="center">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.itemName" placeholder="可选" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="数量" min-width="120" align="center">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.quantity" placeholder="请输入数量" @input="recalcAmount(scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="单位" width="90" align="center">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.unit" placeholder="单位" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="批次号" min-width="120" align="center">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.batchNo" placeholder="批次号" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="单价" min-width="110" align="center">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.unitPrice" placeholder="单价" @input="recalcAmount(scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="金额" min-width="110" align="center">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.amount" placeholder="金额" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" min-width="140" align="center">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.remark" placeholder="备注" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitEdit">出库</el-button>
|
||||
<el-button @click="editOpen = false">取消</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="单据明细" v-model="detailOpen" width="1100px" append-to-body>
|
||||
<template v-if="detailData && detailData.order">
|
||||
<el-descriptions :title="'单号：' + (detailData.order.orderCode || '-')" :column="2" border>
|
||||
<el-descriptions-item label="类型">出库</el-descriptions-item>
|
||||
<el-descriptions-item label="业务类型">{{ detailData.order.bizType }}</el-descriptions-item>
|
||||
<el-descriptions-item label="责任人">{{ detailData.order.responsibleName }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div style="margin: 12px 0; text-align: right;">
|
||||
<el-button type="danger" size="small" @click="handleRevoke(detailData.order)">撤回</el-button>
|
||||
</div>
|
||||
<el-table :data="detailData.details || []" border style="width: 100%">
|
||||
<el-table-column label="行号" prop="lineNo" width="70" align="center" />
|
||||
<el-table-column label="原料ID" prop="itemId" width="120" align="center" />
|
||||
<el-table-column label="名称快照" prop="itemName" min-width="160" align="center" />
|
||||
<el-table-column label="数量" prop="quantity" width="120" align="center" />
|
||||
<el-table-column label="单位" prop="unit" width="90" align="center" />
|
||||
<el-table-column label="批次号" prop="batchNo" min-width="120" align="center" />
|
||||
<el-table-column label="备注" prop="remark" min-width="140" align="center" />
|
||||
</el-table>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div style="height:200px;line-height:200px;text-align:center;">未获取到单据数据</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<el-button @click="detailOpen = false">关闭</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RawSelector from '@/components/RawSelector/index.vue'
|
||||
import {
|
||||
listStockIoOrder,
|
||||
getStockIoOrderWithDetail,
|
||||
addStockIoOrderWithDetail,
|
||||
reverseStockIoOrder
|
||||
} from '@/api/wms/stockIoOrder'
|
||||
|
||||
export default {
|
||||
name: 'StockIoOrderOut',
|
||||
components: { RawSelector },
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
buttonLoading: false,
|
||||
ids: [],
|
||||
rows: [],
|
||||
single: true,
|
||||
showSearch: true,
|
||||
total: 0,
|
||||
list: [],
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
orderCode: undefined,
|
||||
ioType: 'O',
|
||||
bizType: undefined,
|
||||
responsibleName: undefined
|
||||
},
|
||||
editOpen: false,
|
||||
editTitle: '',
|
||||
editForm: {},
|
||||
editDetails: [],
|
||||
batchMaterialIds: [],
|
||||
detailSelection: [],
|
||||
editRules: {
|
||||
bizType: [{ required: true, message: '业务类型不能为空', trigger: 'blur' }]
|
||||
},
|
||||
detailOpen: false,
|
||||
detailData: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
totalQtyText() {
|
||||
const total = (this.editDetails || []).reduce((sum, r) => sum + this.toNumber(r.quantity), 0)
|
||||
return String(total)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
toNumber(val) {
|
||||
const n = Number(val)
|
||||
return Number.isFinite(n) ? n : 0
|
||||
},
|
||||
getList() {
|
||||
this.loading = true
|
||||
listStockIoOrder(this.queryParams)
|
||||
.then((res) => {
|
||||
this.list = res.rows || []
|
||||
this.total = res.total || 0
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
resetQuery() {
|
||||
this.resetForm('queryForm')
|
||||
this.queryParams.ioType = 'O'
|
||||
this.handleQuery()
|
||||
},
|
||||
handleSelectionChange(selection) {
|
||||
this.rows = selection
|
||||
this.ids = selection.map((r) => r.orderId)
|
||||
this.single = selection.length !== 1
|
||||
},
|
||||
resetEdit() {
|
||||
this.editForm = {
|
||||
ioType: 'O',
|
||||
bizType: undefined,
|
||||
sourceNo: undefined,
|
||||
responsibleName: undefined,
|
||||
remark: undefined
|
||||
}
|
||||
this.editDetails = []
|
||||
this.detailSelection = []
|
||||
this.resetForm('editFormRef')
|
||||
},
|
||||
handleAdd() {
|
||||
this.resetEdit()
|
||||
this.editTitle = '新增出库单据'
|
||||
this.editOpen = true
|
||||
this.addDetailRow()
|
||||
},
|
||||
showDetail(row) {
|
||||
this.detailOpen = true
|
||||
this.detailData = null
|
||||
getStockIoOrderWithDetail(row.orderId).then((res) => {
|
||||
this.detailData = res.data
|
||||
})
|
||||
},
|
||||
handleRevoke(row) {
|
||||
const target = row || (this.rows && this.rows[0])
|
||||
if (!target || !target.orderId) return
|
||||
this.$modal
|
||||
.confirm('确认撤回该出库？系统将创建一张反向单据并自动执行。')
|
||||
.then(() => {
|
||||
this.buttonLoading = true
|
||||
return reverseStockIoOrder(target.orderId, '')
|
||||
})
|
||||
.then((res) => {
|
||||
const newId = res.data
|
||||
this.$modal.msgSuccess('撤回成功，撤回单ID：' + newId)
|
||||
this.getList()
|
||||
})
|
||||
.finally(() => {
|
||||
this.buttonLoading = false
|
||||
})
|
||||
},
|
||||
submitEdit() {
|
||||
this.$refs.editFormRef.validate((valid) => {
|
||||
if (!valid) return
|
||||
if (!this.editDetails || this.editDetails.length === 0) {
|
||||
this.$modal.msgError('请先添加明细')
|
||||
return
|
||||
}
|
||||
const check = this.validateDetails()
|
||||
if (!check.ok) {
|
||||
this.$modal.msgError(check.message)
|
||||
return
|
||||
}
|
||||
const payload = this.buildPayload()
|
||||
if (payload.orderId) {
|
||||
this.$modal.msgError('已出库单据不支持修改，请撤回后重新出库')
|
||||
return
|
||||
}
|
||||
if (!payload.details || payload.details.length === 0) {
|
||||
this.$modal.msgError('请至少填写一条明细：选择原料并输入数量')
|
||||
return
|
||||
}
|
||||
this.buttonLoading = true
|
||||
addStockIoOrderWithDetail(payload)
|
||||
.then(() => {
|
||||
this.$modal.msgSuccess('出库成功')
|
||||
this.editOpen = false
|
||||
this.getList()
|
||||
})
|
||||
.finally(() => {
|
||||
this.buttonLoading = false
|
||||
})
|
||||
})
|
||||
},
|
||||
validateDetails() {
|
||||
for (const d of this.editDetails || []) {
|
||||
if (!d) continue
|
||||
const hasAny =
|
||||
(d.itemId != null && String(d.itemId) !== '') ||
|
||||
(d.quantity != null && String(d.quantity) !== '') ||
|
||||
(d.unitPrice != null && String(d.unitPrice) !== '') ||
|
||||
(d.batchNo != null && String(d.batchNo) !== '') ||
|
||||
(d.remark != null && String(d.remark) !== '') ||
|
||||
(d.itemName != null && String(d.itemName) !== '')
|
||||
if (!hasAny) {
|
||||
continue
|
||||
}
|
||||
const lineNo = d.lineNo != null ? d.lineNo : '-'
|
||||
if (d.itemId == null || String(d.itemId) === '') {
|
||||
return { ok: false, message: `第${lineNo}行请选择原料` }
|
||||
}
|
||||
const qty = this.toNumber(d.quantity)
|
||||
if (qty <= 0) {
|
||||
return { ok: false, message: `第${lineNo}行请输入数量` }
|
||||
}
|
||||
}
|
||||
return { ok: true, message: '' }
|
||||
},
|
||||
buildPayload() {
|
||||
const details = (this.editDetails || [])
|
||||
.filter((d) => d && d.itemId != null && String(d.itemId) !== '' && this.toNumber(d.quantity) > 0)
|
||||
.map((d, idx) => {
|
||||
const lineNo = d.lineNo != null ? d.lineNo : idx + 1
|
||||
const unitPrice = this.toNumber(d.unitPrice)
|
||||
const quantity = this.toNumber(d.quantity)
|
||||
const amount = d.amount != null && String(d.amount) !== '' ? this.toNumber(d.amount) : unitPrice * quantity
|
||||
return {
|
||||
detailId: d.detailId,
|
||||
lineNo,
|
||||
itemType: 'material',
|
||||
itemId: d.itemId,
|
||||
itemName: d.itemName,
|
||||
quantity: quantity,
|
||||
unit: d.unit,
|
||||
batchNo: d.batchNo,
|
||||
unitPrice: unitPrice,
|
||||
amount: amount,
|
||||
remark: d.remark
|
||||
}
|
||||
})
|
||||
|
||||
const totalQty = details.reduce((sum, d) => sum + this.toNumber(d.quantity), 0)
|
||||
return Object.assign({}, this.editForm, { ioType: 'O', totalQty, details })
|
||||
},
|
||||
addDetailRow() {
|
||||
const nextNo = (this.editDetails || []).length + 1
|
||||
this.editDetails.push({
|
||||
detailId: undefined,
|
||||
lineNo: nextNo,
|
||||
itemType: 'material',
|
||||
itemId: undefined,
|
||||
itemName: undefined,
|
||||
quantity: undefined,
|
||||
unit: undefined,
|
||||
batchNo: undefined,
|
||||
unitPrice: undefined,
|
||||
amount: undefined,
|
||||
remark: undefined
|
||||
})
|
||||
this.rebuildLineNo()
|
||||
},
|
||||
onDetailSelectionChange(rows) {
|
||||
this.detailSelection = rows || []
|
||||
},
|
||||
removeDetailRows() {
|
||||
const ids = new Set((this.detailSelection || []).map((r) => r.lineNo))
|
||||
this.editDetails = (this.editDetails || []).filter((r) => !ids.has(r.lineNo))
|
||||
this.detailSelection = []
|
||||
if (this.editDetails.length === 0) {
|
||||
this.addDetailRow()
|
||||
} else {
|
||||
this.rebuildLineNo()
|
||||
}
|
||||
},
|
||||
rebuildLineNo() {
|
||||
let i = 1
|
||||
this.editDetails = (this.editDetails || []).map((r) => Object.assign({}, r, { lineNo: i++ }))
|
||||
},
|
||||
handleBatchPicked(materials) {
|
||||
const rows = materials || []
|
||||
if (rows.length === 0) {
|
||||
return
|
||||
}
|
||||
let startIndex = 0
|
||||
if (this.editDetails.length === 1) {
|
||||
const r = this.editDetails[0]
|
||||
const empty =
|
||||
(r.itemId == null || String(r.itemId) === '') &&
|
||||
(r.quantity == null || String(r.quantity) === '') &&
|
||||
(r.unitPrice == null || String(r.unitPrice) === '')
|
||||
if (empty) {
|
||||
r.itemId = rows[0].materialId
|
||||
this.onMaterialPicked(r, rows[0])
|
||||
startIndex = 1
|
||||
}
|
||||
}
|
||||
for (let i = startIndex; i < rows.length; i++) {
|
||||
this.addDetailRow()
|
||||
const r = this.editDetails[this.editDetails.length - 1]
|
||||
r.itemId = rows[i].materialId
|
||||
this.onMaterialPicked(r, rows[i])
|
||||
}
|
||||
this.batchMaterialIds = []
|
||||
},
|
||||
onMaterialPicked(row, material) {
|
||||
if (material && material.materialName) {
|
||||
row.itemName = material.materialName
|
||||
if (!row.unit && material.unit) {
|
||||
row.unit = material.unit
|
||||
}
|
||||
if (material.unitPrice != null && row.unitPrice == null) {
|
||||
row.unitPrice = material.unitPrice
|
||||
}
|
||||
this.recalcAmount(row)
|
||||
}
|
||||
},
|
||||
recalcAmount(row) {
|
||||
const qty = this.toNumber(row.quantity)
|
||||
const unitPrice = this.toNumber(row.unitPrice)
|
||||
if (qty > 0 || unitPrice > 0) {
|
||||
row.amount = String(unitPrice * qty)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user