<template>
|
<el-dialog
|
width="80%"
|
title="客户订单预留"
|
top="5vh"
|
:visible.sync="innerVisible"
|
append-to-body
|
@close="$emit('update:currshowlist', false)"
|
:show="currshowlist"
|
class="stock-dialog"
|
>
|
<div class="reserved-custom-div">
|
<div class="custom-need-part-div">
|
<div class="custom-need-part-header">
|
<div>
|
<el-divider class="pane-divider" direction="vertical"></el-divider
|
><span style="font-size:14px;font-weight:bold"
|
>客户订单所需物料</span
|
>
|
</div>
|
</div>
|
<el-table
|
ref="customNeedPartTable"
|
:data="customNeedPartList"
|
@current-change="changeNeedPart"
|
highlight-current-row
|
height="350px"
|
:header-cell-style="customNeedPartTableHeaderCellStyle"
|
class="custom-need-part-table"
|
>
|
<el-table-column
|
label="零件编号"
|
prop="partNo"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.partNo }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="零件"
|
prop="partName"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.partName }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="需求数量"
|
prop="quantityRequired"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.quantityRequired }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="已预留数量"
|
prop="reservedQuantity"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.reservedQuantity }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="单位"
|
prop="unit"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.unit }}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="custom-need-part-stock-div">
|
<div class="custom-need-part-stock-header">
|
<div>
|
<el-divider class="pane-divider" direction="vertical"></el-divider
|
><span style="font-size:14px;font-weight:bold">库存列表</span>
|
</div>
|
<div>
|
<el-button
|
size="mini"
|
type="primary"
|
:disabled="isSubmit"
|
v-thinclick="`saveReserved`"
|
>保存</el-button
|
>
|
</div>
|
</div>
|
<el-table
|
ref="customNeedPartStockTable"
|
:data="customNeedPartStockList"
|
@selection-change="selectionNeedPartStockChange"
|
height="360px"
|
@row-click="clickNeedPartStock"
|
:header-cell-style="customNeedPartStockTableHeaderCellStyle"
|
class="custom-need-part-stock-table"
|
>
|
<el-table-column type="selection" width="55"></el-table-column>
|
<el-table-column
|
label="零件编号"
|
prop="partNo"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.partNo }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="零件名称"
|
prop="partName"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
<template slot="header" slot-scope="scope">
|
<div style="line-height: 14px;">零件名称</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamOne.partName"
|
@keyup.enter.native="handleFeedList"
|
clearable
|
@clear="handleFeedList"
|
size="mini"
|
></el-input>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<span>{{ scope.row.partName }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="仓库"
|
prop="warehouseName"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
<template slot="header" slot-scope="scope">
|
<div style="line-height: 14px;">仓库</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamOne.warehouseName"
|
@keyup.enter.native="handleFeedList"
|
clearable
|
@clear="handleFeedList"
|
size="mini"
|
></el-input>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<span>{{ scope.row.warehouseName }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="库位号"
|
prop="locationName"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
<template slot="header" slot-scope="scope">
|
<div style="line-height: 14px;">库位号</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamOne.locationName"
|
@keyup.enter.native="handleFeedList"
|
clearable
|
@clear="handleFeedList"
|
size="mini"
|
></el-input>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<span>{{ scope.row.locationName }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="系统编号"
|
prop="systemNo"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
<template slot="header" slot-scope="scope">
|
<div style="line-height: 14px;">系统编号</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamOne.systemNo"
|
@keyup.enter.native="handleFeedList"
|
clearable
|
@clear="handleFeedList"
|
size="mini"
|
></el-input>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<span>{{ scope.row.systemNo }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="零件批号"
|
prop="partBatchNo"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
<template slot="header" slot-scope="scope">
|
<div style="line-height: 14px;">零件批号</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamOne.partBatchNo"
|
@keyup.enter.native="handleFeedList"
|
clearable
|
@clear="handleFeedList"
|
size="mini"
|
></el-input>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<span>{{ scope.row.partBatchNo }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="载具编号"
|
prop="reelNumber"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
<template slot="header" slot-scope="scope">
|
<div style="line-height: 14px;">载具编号</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamOne.reelNumber"
|
@keyup.enter.native="handleFeedList"
|
clearable
|
@clear="handleFeedList"
|
size="mini"
|
></el-input>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<span>{{ scope.row.reelNumber }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="库存数量"
|
prop="stockQuantity"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
<template slot="header" slot-scope="scope">
|
<div style="line-height: 14px;">库存数量</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamOne.stockQuantity"
|
@keyup.enter.native="handleFeedList"
|
clearable
|
@clear="handleFeedList"
|
size="mini"
|
></el-input>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<span>{{ scope.row.stockQuantity }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="已预留数量"
|
prop="reserveQuantity"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
<template slot="header" slot-scope="scope">
|
<div style="line-height: 14px;">已预留数量</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamOne.reserveQuantity"
|
@keyup.enter.native="handleFeedList"
|
clearable
|
@clear="handleFeedList"
|
size="mini"
|
></el-input>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<span>{{ scope.row.reserveQuantity }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="可用库存数量"
|
prop="availableStockQuantity"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
<template slot="header" slot-scope="scope">
|
<div style="line-height: 14px;">可用库存数量</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamOne.availableStockQuantity"
|
@keyup.enter.native="handleFeedList"
|
clearable
|
@clear="handleFeedList"
|
size="mini"
|
></el-input>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<span>{{ scope.row.availableStockQuantity }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="单位"
|
prop="unit"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
<template slot="header" slot-scope="scope">
|
<div style="line-height: 14px;">单位</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamOne.unit"
|
@keyup.enter.native="handleFeedList"
|
clearable
|
@clear="handleFeedList"
|
size="mini"
|
></el-input>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<span>{{ scope.row.unit }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="预留数量" prop="quantity" align="center">
|
<template slot-scope="scope">
|
<el-input
|
size="small"
|
@click.native.stop
|
@blur="inputBlur($event)"
|
v-model="scope.row.quantity"
|
></el-input>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="innerVisible = false">关 闭</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
<style lang="scss" scoped>
|
.reserved-custom-div {
|
height: 800px;
|
}
|
.custom-need-part-div {
|
height: 50%;
|
}
|
.custom-need-part-header {
|
margin-top: 0px;
|
margin-bottom: 5px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.custom-need-part-stock-div {
|
height: 50%;
|
}
|
.custom-need-part-stock-header {
|
margin-top: 5px;
|
margin-bottom: 5px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.pane-divider {
|
width: 4px;
|
background-color: #4283ee;
|
}
|
</style>
|
<script>
|
import { getStockListByPart, addReserve } from '@/api/warehouse/joinstockorder'
|
export default {
|
props: {
|
currshowlist: {
|
type: Boolean,
|
default: false
|
},
|
currentCustomerOrder: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
}
|
},
|
data() {
|
return {
|
innerVisible: false,
|
customNeedPartList: [],
|
customNeedPartStockList: [],
|
selectPartStocks: [],
|
currentPart: null,
|
isSubmit: false,
|
queryParamOne: {
|
partNo: null,
|
partName: null,
|
warehouseName: null,
|
locationName: null,
|
systemNo: null,
|
partBatchNo: null,
|
stockQuantity: null,
|
reserveQuantity: null,
|
availableStockQuantity: null,
|
unit: null,
|
reelNumber: null
|
}
|
}
|
},
|
methods: {
|
// 所需物料
|
getCustomMaterial(type) {
|
if (type) {
|
} else {
|
//
|
this.customNeedPartList.push({
|
partNo: this.currentCustomerOrder.partNo,
|
partName: this.currentCustomerOrder.partName,
|
quantityRequired: this.currentCustomerOrder.buyQtyDue,
|
reservedQuantity: this.currentCustomerOrder.reservedQuantityRealtime,
|
unit: this.currentCustomerOrder.unit
|
})
|
// 根据客户需求零件，查询零件库存列表
|
this.changeNeedPart(this.customNeedPartList[0])
|
}
|
},
|
// 客户需求列表换行点击时，触发查询该零件对应的库存
|
changeNeedPart(val) {
|
this.currentPart = val
|
if (val != null) {
|
this.clearQueryParam()
|
this.queryParamOne.partNo = val.partNo
|
this.getStockByPart(this.queryParamOne)
|
}
|
},
|
clearQueryParam() {
|
this.queryParamOne = {
|
partNo: null,
|
partName: null,
|
warehouseName: null,
|
locationName: null,
|
systemNo: null,
|
partBatchNo: null,
|
stockQuantity: null,
|
reserveQuantity: null,
|
unit: null,
|
reelNumber: null
|
}
|
},
|
getStockByPart(reqParam) {
|
getStockListByPart(reqParam, 0)
|
.then((response) => {
|
const resCode = response.data.code
|
const resData = response.data.data
|
if (resCode === 0) {
|
this.customNeedPartStockList = resData
|
} else {
|
this.customNeedPartStockList = []
|
this.$message.error('库存列表查询失败')
|
}
|
})
|
.catch(() => {
|
this.customNeedPartStockList = []
|
console.log('查询零件对应的库存列表时，发生错误')
|
})
|
},
|
// 工单需求列表头部渲染
|
customNeedPartTableHeaderCellStyle({ row, column, rowIndex, columnIndex }) {
|
const headerStyle = 'background:#599ef4;color:#fff;'
|
return headerStyle
|
},
|
// 库存列表头部渲染
|
customNeedPartStockTableHeaderCellStyle({
|
row,
|
column,
|
rowIndex,
|
columnIndex
|
}) {
|
const headerStyle = 'background:#599ef4;color:#fff;'
|
return headerStyle
|
},
|
// 库存列表选中某行时，触发
|
selectionNeedPartStockChange(val) {
|
this.selectPartStocks = val
|
},
|
// 库存列表点击某行时，选中此行
|
clickNeedPartStock(row) {
|
this.$refs.customNeedPartStockTable.toggleRowSelection(row)
|
},
|
// 保存某个或某些零件的预留，刷新库存列表或工单所需物料
|
saveReserved() {
|
this.isSubmit = true
|
if (this.selectPartStocks.length > 0) {
|
// 校验当前预留的库存是否可用
|
const queryParam = {
|
partNo:
|
this.currentPart != null
|
? this.currentPart.partNo
|
: this.queryParamOne.partNo,
|
partName: this.queryParamOne.partName,
|
warehouseName: this.queryParamOne.warehouseName,
|
locationName: this.queryParamOne.locationName,
|
systemNo: this.queryParamOne.systemNo,
|
partBatchNo: this.queryParamOne.partBatchNo,
|
stockQuantity: this.queryParamOne.stockQuantity,
|
reserveQuantity: this.queryParamOne.reserveQuantity,
|
unit: this.queryParamOne.unit,
|
reelNumber: this.queryParamOne.reelNumber
|
}
|
getStockListByPart(queryParam, 0)
|
.then((resp) => {
|
const respCode = resp.data.code
|
const respData = resp.data.data
|
if (respCode === 0) {
|
const canUseStockList = respData
|
// 校验当前选中库存是否可用
|
let canUseFlag = true
|
let canUseInfo = ''
|
for (let j = 0; j < this.selectPartStocks.length; j++) {
|
const canUseStock = canUseStockList.find((el) => {
|
return el.id === this.selectPartStocks[j].id
|
})
|
if (!canUseStock) {
|
canUseFlag = false
|
canUseInfo =
|
'零件：' +
|
this.selectPartStocks[j].partName +
|
'; SN号：' +
|
this.selectPartStocks[j].partBatchNo +
|
'; 系统编号：' +
|
this.selectPartStocks[j].systemNo +
|
'; 载具编号：' +
|
this.selectPartStocks[j].reelNumber +
|
';对应库存不可用！'
|
break
|
}
|
}
|
if (canUseFlag) {
|
const joinStockOrderList = []
|
this.selectPartStocks.forEach((item) => {
|
// 可用库存大于0才能预留
|
if (item.availableStockQuantity > 0) {
|
const checkFlag = this.checkNumber(item.quantity)
|
if (checkFlag) {
|
if (item.availableStockQuantity >= item.quantity) {
|
joinStockOrderList.push({
|
customerOrderId: this.currentCustomerOrder.id,
|
stockId: item.id,
|
reservedQuantity: item.quantity,
|
partNo: item.partNo,
|
partName: item.partName,
|
warehouseNo: item.warehouseNo,
|
warehouseName: item.warehouseName,
|
locationNo: item.locationNo,
|
locationName: item.locationName,
|
partUnit: item.unit,
|
systemNo: item.systemNo,
|
partBatchNo: item.partBatchNo,
|
status: '01unconfirmed',
|
type: '客户订单预留'
|
})
|
}
|
}
|
}
|
})
|
if (joinStockOrderList && joinStockOrderList.length > 0) {
|
addReserve(joinStockOrderList)
|
.then((response) => {
|
const resCode = response.data.code
|
if (resCode === 0) {
|
this.$emit('handleReserved')
|
this.innerVisible = false
|
this.$message.success('预留成功')
|
} else {
|
this.$message.error('预留失败')
|
}
|
|
this.isSubmit = false
|
})
|
.catch(() => {
|
this.isSubmit = false
|
console.log('零件预留时，发生错误')
|
})
|
} else {
|
this.isSubmit = false
|
}
|
} else {
|
this.isSubmit = false
|
this.$message.error(canUseInfo)
|
}
|
} else {
|
this.isSubmit = false
|
this.$message.error('库存列表查询失败')
|
}
|
})
|
.catch(() => {
|
this.isSubmit = false
|
console.log('查询零件对应的库存列表时，发生错误')
|
})
|
} else {
|
this.isSubmit = false
|
this.$message.warning('请选择需要预留的库存')
|
}
|
},
|
// input在blur时的回调
|
inputBlur(e) {
|
const checkFlag = this.checkNumber(e.target.value)
|
if (!checkFlag) {
|
this.$message.warning('请填写正确的预留数量')
|
}
|
},
|
// 校验数字
|
checkNumber(val) {
|
if (val && val != null && val.trim() !== '') {
|
if (Number(val) === 0) {
|
return false
|
} else {
|
return /^[0-9]+(.[0-9]{1,4})?$/.test(val)
|
}
|
} else {
|
return false
|
}
|
},
|
initData() {
|
this.customNeedPartList = []
|
this.customNeedPartStockList = []
|
this.selectPartStocks = []
|
this.currentPart = null
|
},
|
handleFeedList() {
|
this.getStockByPart(this.queryParamOne)
|
}
|
},
|
watch: {
|
currshowlist() {
|
this.innerVisible = this.currshowlist
|
if (this.currshowlist) {
|
this.initData()
|
this.$nextTick(() => {
|
// 查询工单对应的零件需求
|
this.getCustomMaterial(0)
|
})
|
}
|
}
|
}
|
}
|
</script>
|
