<template>
|
<div>
|
<el-card shadow="never">
|
<div slot="header" class="clearfix">
|
<span>工单所需物料</span>
|
</div>
|
<el-table
|
ref="materialTable"
|
:data="materialList"
|
@row-click="changeMaterial"
|
highlight-current-row
|
height="280px"
|
:header-cell-style="{ color: '#999' }"
|
:row-style="{ height: '26px' }"
|
:cell-style="{ padding: '0' }"
|
>
|
<el-table-column
|
label="零件编号"
|
prop="partNo"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
<template slot="header">
|
<div style="line-height: 14px;">零件编号</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamOne.partNo"
|
@keyup.enter.native="handleMaterialList"
|
clearable
|
@clear="handleMaterialList"
|
size="mini"
|
></el-input>
|
</div>
|
</template>
|
<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">
|
<div style="line-height: 14px;">零件</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamOne.partName"
|
@keyup.enter.native="handleMaterialList"
|
clearable
|
@clear="handleMaterialList"
|
size="mini"
|
></el-input>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<span>{{ scope.row.partName }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="单位产出所需数量"
|
prop="qpa"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
<template slot="header">
|
<div style="line-height: 14px;">单位产出所需数量</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamOne.qpa"
|
@keyup.enter.native="handleMaterialList"
|
clearable
|
@clear="handleMaterialList"
|
size="mini"
|
></el-input>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<span>{{ scope.row.qpa }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="订单需求数量"
|
prop="quantityRequired"
|
align="center"
|
:show-overflow-tooltip="true"
|
>
|
<template slot="header">
|
<div style="line-height: 14px;">订单需求数量</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamOne.quantityRequired"
|
@keyup.enter.native="handleMaterialList"
|
clearable
|
@clear="handleMaterialList"
|
size="mini"
|
></el-input>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<span>{{ scope.row.quantityRequired }}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
|
<div class="production" ref="tabDiv" style="margin-top: 12px">
|
<el-tabs v-model="tabName" type="card">
|
<el-row>
|
<el-col :span="12">
|
<el-card shadow="never">
|
<span>线边仓已有物料</span>
|
<div style="float: right; margin-right: 20px">
|
<el-button
|
type="text"
|
size="medium"
|
style="color: #006eff;"
|
@click="addFeed()"
|
>投料</el-button
|
>
|
</div>
|
<el-table
|
ref="stockTable"
|
:summary-method="getSummaries"
|
show-summary
|
:data="stockList"
|
@selection-change="selectionStockChange"
|
height="300px"
|
:header-cell-style="{ color: '#999' }"
|
@row-click="clickStock"
|
:row-style="{ height: '26px' }"
|
:cell-style="{ padding: '0' }"
|
>
|
<el-table-column type="selection" width="55"></el-table-column>
|
<el-table-column
|
label="零件编号"
|
prop="partNo"
|
align="center"
|
:show-overflow-tooltip="true"
|
width="120px"
|
>
|
<template slot="header">
|
<div style="line-height: 14px;">零件编号</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamTwo.partNo"
|
@keyup.enter.native="handleStockList"
|
clearable
|
@clear="handleStockList"
|
size="mini"
|
></el-input>
|
</div>
|
</template>
|
<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"
|
width="120px"
|
>
|
<template slot="header">
|
<div style="line-height: 14px;">零件</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamTwo.partName"
|
@keyup.enter.native="handleStockList"
|
clearable
|
@clear="handleStockList"
|
size="mini"
|
></el-input>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<span>{{ scope.row.partName }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="零件批号"
|
prop="partBatchNo"
|
align="center"
|
:show-overflow-tooltip="true"
|
width="120px"
|
>
|
<template slot="header">
|
<div style="line-height: 14px;">零件批号</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamTwo.partBatchNo"
|
@keyup.enter.native="handleStockList"
|
clearable
|
@clear="handleStockList"
|
size="mini"
|
></el-input>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<span>{{ scope.row.partBatchNo }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="规格型号"
|
prop="specs"
|
align="center"
|
:show-overflow-tooltip="true"
|
width="120px"
|
>
|
<template slot="header">
|
<div style="line-height: 14px;">规格型号</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamTwo.specs"
|
@keyup.enter.native="handleStockList"
|
clearable
|
@clear="handleStockList"
|
size="mini"
|
></el-input>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<span>{{ scope.row.specs }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="单位"
|
prop="unit"
|
align="center"
|
width="120px"
|
>
|
<template slot="header">
|
<div style="line-height: 14px;">单位</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamTwo.unit"
|
@keyup.enter.native="handleStockList"
|
clearable
|
@clear="handleStockList"
|
size="mini"
|
></el-input>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<span>{{ scope.row.unit }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="可用数量"
|
prop="availableStockQuantity"
|
align="center"
|
width="120px"
|
>
|
<template slot="header">
|
<div style="line-height: 14px;">可用数量</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamTwo.availableStockQuantity"
|
@keyup.enter.native="handleStockList"
|
clearable
|
@clear="handleStockList"
|
size="mini"
|
></el-input>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<span>{{ scope.row.availableStockQuantity }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="库存数量"
|
prop="stockQuantity"
|
align="center"
|
width="120px"
|
>
|
<template slot="header">
|
<div style="line-height: 14px;">库存数量</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamTwo.stockQuantity"
|
@keyup.enter.native="handleStockList"
|
clearable
|
@clear="handleStockList"
|
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"
|
width="120px"
|
>
|
<template slot="header">
|
<div style="line-height: 14px;">预留数量</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamTwo.reserveQuantity"
|
@keyup.enter.native="handleStockList"
|
clearable
|
@clear="handleStockList"
|
size="mini"
|
></el-input>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<span>{{ scope.row.reserveQuantity }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="库位号"
|
prop="locationNo"
|
align="center"
|
width="120px"
|
>
|
<template slot="header">
|
<div style="line-height: 14px;">库位号</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamTwo.locationNo"
|
@keyup.enter.native="handleStockList"
|
clearable
|
@clear="handleStockList"
|
size="mini"
|
></el-input>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<span>{{ scope.row.locationNo }}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
</el-col>
|
<el-col :span="12">
|
<el-card>
|
<span>已投入未消耗物料</span>
|
<div style="float: right; margin-right: 20px">
|
<el-button
|
type="text"
|
size="medium"
|
style="color: #E74C3C;"
|
@click="returnMaterial()"
|
>退回</el-button
|
>
|
</div>
|
<el-table
|
ref="feedTable"
|
:summary-method="getSum"
|
show-summary
|
:data="feedList"
|
@selection-change="selectionFeedChange"
|
height="300"
|
:header-cell-style="{ color: '#999' }"
|
@row-click="clickFeed"
|
:row-style="{ height: '26px' }"
|
:cell-style="{ padding: '0' }"
|
>
|
<el-table-column type="selection" width="55"></el-table-column>
|
<el-table-column
|
label="零件编号"
|
prop="partNo"
|
align="center"
|
:show-overflow-tooltip="true"
|
width="120px"
|
>
|
<template slot="header">
|
<div style="line-height: 14px;">零件编号</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamThree.partNo"
|
@keyup.enter.native="handleFeedList"
|
clearable
|
@clear="handleFeedList"
|
size="mini"
|
></el-input>
|
</div>
|
</template>
|
<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"
|
width="120px"
|
>
|
<template slot="header">
|
<div style="line-height: 14px;">零件</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamThree.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="partBatchNo"
|
align="center"
|
:show-overflow-tooltip="true"
|
width="120px"
|
>
|
<template slot="header">
|
<div style="line-height: 14px;">零件批号</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamThree.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="specs"
|
align="center"
|
:show-overflow-tooltip="true"
|
width="120px"
|
>
|
<template slot="header">
|
<div style="line-height: 14px;">规格型号</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamThree.specs"
|
@keyup.enter.native="handleFeedList"
|
clearable
|
@clear="handleFeedList"
|
size="mini"
|
></el-input>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<span>{{ scope.row.specs }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="剩余数量"
|
prop="residualQuantity"
|
align="center"
|
width="120px"
|
>
|
<template slot="header">
|
<div style="line-height: 14px;">剩余数量</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamThree.residualQuantity"
|
@keyup.enter.native="handleFeedList"
|
clearable
|
@clear="handleFeedList"
|
size="mini"
|
></el-input>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<span>{{ scope.row.residualQuantity }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="已投数量"
|
prop="suppliedQuantity"
|
align="center"
|
width="120px"
|
>
|
<template slot="header">
|
<div style="line-height: 14px;">已投数量</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamThree.suppliedQuantity"
|
@keyup.enter.native="handleFeedList"
|
clearable
|
@clear="handleFeedList"
|
size="mini"
|
></el-input>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<span>{{ scope.row.suppliedQuantity }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="单位"
|
prop="unit"
|
align="center"
|
width="120px"
|
>
|
<template slot="header">
|
<div style="line-height: 14px;">单位</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamThree.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="createUser"
|
align="center"
|
width="120px"
|
>
|
<template slot="header">
|
<div style="line-height: 14px;">投料人</div>
|
<div class="th" @click.stop>
|
<el-input
|
type="text"
|
v-model="queryParamThree.createUser"
|
@keyup.enter.native="handleFeedList"
|
clearable
|
@clear="handleFeedList"
|
size="mini"
|
></el-input>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<span>{{ scope.row.createUser }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="投料时间"
|
prop="createTime"
|
align="center"
|
width="145px"
|
>
|
<template slot="header">
|
<div style="line-height: 14px;">投料时间</div>
|
<div class="th" @click.stop>
|
<el-date-picker
|
clearable
|
v-model="queryParamThree.createTime"
|
type="datetimerange"
|
range-separator="-"
|
start-placeholder="开始"
|
end-placeholder="结束"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
@change="feedDateChange($event)"
|
size="mini"
|
style="width:100px"
|
>
|
</el-date-picker>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<span>{{ scope.row.createTime }}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
</el-col>
|
</el-row>
|
</el-tabs>
|
</div>
|
<feedFormDialog
|
:currshowlist.sync="showFeedForm"
|
:dataList="selectStocks"
|
:workstationId="workstationId"
|
@refreshFeedList="refreshFeedAndStock"
|
/>
|
<returnMaterialFormDialog
|
:currshowlist.sync="showReturnMaterialForm"
|
:dataList="selectFeeds"
|
@refreshFeedList="refreshFeedAndStock"
|
/>
|
</div>
|
</template>
|
<style lang="scss" scoped>
|
.feedTableClass td {
|
padding: 6px 0px;
|
}
|
|
.feedTableClass th {
|
padding: 0px 0px;
|
}
|
</style>
|
<script>
|
import { getStock, getFeed } from '@/api/product/personboard'
|
import { getMaterial } from '@/api/plan/operationtask'
|
import feedFormDialog from './feed-form'
|
import returnMaterialFormDialog from './returnmaterial-form'
|
|
export default {
|
components: {
|
feedFormDialog,
|
returnMaterialFormDialog
|
},
|
props: {
|
workstationId: {
|
type: Number
|
},
|
currOperateTask: {
|
type: Object,
|
default: function() {
|
return {}
|
}
|
}
|
},
|
data() {
|
return {
|
materialList: [], // 所需物料
|
stockList: [], // 线边仓库存
|
feedList: [], // 投料
|
selectStocks: [],
|
selectFeeds: [],
|
showFeedForm: false,
|
showReturnMaterialForm: false,
|
tabName: 'first',
|
currentMaterialPartId: 0,
|
paramObject: null,
|
queryParamOne: {},
|
queryParamTwo: {},
|
queryParamThree: {},
|
dateTimeFiltersThree: {}
|
}
|
},
|
created() {
|
console.log('asdasdasdad')
|
this.loadStockByWorkstation()
|
this.loadFeedByWorkstation(this.workstationId)
|
},
|
methods: {
|
// 根据工作站，加载线边仓信息
|
loadStockByWorkstation() {
|
this.stockList = []
|
if (this.workstationId && this.workstationId != null) {
|
var query = Object.assign(
|
{ workstationId: this.workstationId },
|
this.paramObject,
|
this.queryParamTwo
|
)
|
getStock(query)
|
.then((response) => {
|
var data = response.data
|
if (data.code === 0) {
|
this.stockList = data.data
|
} else {
|
this.$message.error('获取线边仓信息失败')
|
}
|
})
|
.catch((error) => {
|
console.log(error)
|
})
|
}
|
},
|
// 线边仓已有物料合计
|
getSummaries(param) {
|
const { columns, data } = param
|
const sums = []
|
columns.forEach((column, index) => {
|
if (index === 0) {
|
sums[index] = '合计'
|
return
|
}
|
const values = data.map((item) => Number(item[column.property]))
|
if (
|
column.property === 'availableStockQuantity' ||
|
column.property === 'stockQuantity' ||
|
column.property === 'reserveQuantity'
|
) {
|
if (!values.every((value) => isNaN(value))) {
|
sums[index] = values.reduce((prev, curr) => {
|
const value = Number(curr)
|
if (!isNaN(value)) {
|
return Number((prev + curr).toFixed(2))
|
} else {
|
return prev
|
}
|
}, 0)
|
} else {
|
sums[index] = ''
|
}
|
} else {
|
sums[index] = ''
|
}
|
})
|
return sums
|
},
|
// 已投入未消耗物料合计
|
getSum(param) {
|
const { columns, data } = param
|
const sums = []
|
columns.forEach((column, index) => {
|
if (index === 0) {
|
sums[index] = '合计'
|
return
|
}
|
const values = data.map((item) => Number(item[column.property]))
|
if (
|
column.property === 'residualQuantity' ||
|
column.property === 'suppliedQuantity'
|
) {
|
if (!values.every((value) => isNaN(value))) {
|
sums[index] = values.reduce((prev, curr) => {
|
const value = Number(curr)
|
if (!isNaN(value)) {
|
return Number((prev + curr).toFixed(2))
|
} else {
|
return prev
|
}
|
}, 0)
|
} else {
|
sums[index] = ''
|
}
|
} else {
|
sums[index] = ''
|
}
|
})
|
return sums
|
},
|
// 根据工作站，加载投料信息
|
loadFeedByWorkstation(stationId) {
|
this.feedList = []
|
if (stationId && stationId != null) {
|
const criteria = {}
|
criteria.dateTimeFilters = this.dateTimeFiltersThree
|
const query = Object.assign(
|
{ criteria: JSON.stringify(criteria) },
|
this.paramObject,
|
this.queryParamThree
|
)
|
getFeed(query, stationId)
|
.then((response) => {
|
var data = response.data
|
if (data.code === 0) {
|
this.feedList = data.data
|
} else {
|
this.$message.error('获取投料信息失败')
|
}
|
})
|
.catch((error) => {
|
console.log(error)
|
})
|
}
|
},
|
// 选择线边仓零件
|
selectionStockChange(val) {
|
this.selectStocks = val
|
},
|
clickStock(row) {
|
this.$refs.stockTable.toggleRowSelection(row)
|
},
|
// 打开投料界面
|
addFeed() {
|
if (this.selectStocks.length > 0) {
|
var _this = this
|
var selectList = _this.selectStocks
|
selectList.forEach(function(item) {
|
_this.$set(item, 'suppliedQuantity', item.availableStockQuantity)
|
})
|
this.showFeedForm = true
|
} else {
|
this.$message.warning('请选择线边仓零件')
|
}
|
},
|
// 刷新线边仓、投料列表
|
refreshFeedAndStock() {
|
this.loadStockByWorkstation()
|
this.loadFeedByWorkstation(this.workstationId)
|
},
|
// 打开退料界面
|
returnMaterial() {
|
if (this.selectFeeds.length > 0) {
|
var _this = this
|
var selectList = _this.selectFeeds
|
selectList.forEach(function(item) {
|
_this.$set(item, 'returnQuantity', item.residualQuantity)
|
})
|
this.showReturnMaterialForm = true
|
} else {
|
this.$message.warning('请选择投料零件')
|
}
|
},
|
clickFeed(row) {
|
this.$refs.feedTable.toggleRowSelection(row)
|
},
|
// 选择投料零件
|
selectionFeedChange(val) {
|
this.selectFeeds = val
|
},
|
// 选择工单所需物料
|
changeMaterial(material) {
|
if (
|
material &&
|
material.partId &&
|
material.partId !== this.currentMaterialPartId
|
) {
|
this.currentMaterialPartId = material.partId
|
} else {
|
this.currentMaterialPartId = 0
|
this.$refs.materialTable.setCurrentRow(-1)
|
}
|
},
|
// 初始化页面变量
|
initFeed() {
|
this.selectStocks = []
|
this.selectFeeds = []
|
this.showFeedForm = false
|
this.showReturnMaterialForm = false
|
},
|
// 在刷新工单所需物料列表数据
|
handleMaterialList() {
|
this.loadMaterialByOperateTask()
|
},
|
handleStockList() {
|
this.loadStockByWorkstation()
|
},
|
handleFeedList() {
|
this.loadFeedByWorkstation(this.workstationId)
|
},
|
loadMaterialByOperateTask() {
|
const query = Object.assign(
|
{ operationTaskId: this.currOperateTask.id },
|
this.queryParamOne
|
)
|
getMaterial(query).then((response) => {
|
this.materialList = response.data.data
|
})
|
},
|
feedDateChange(val) {
|
if (val != null) {
|
this.dateTimeFiltersThree.createTime = val
|
} else {
|
delete this.dateTimeFiltersThree.createTime
|
}
|
this.handleFeedList()
|
}
|
},
|
watch: {
|
workstationId() {
|
if (this.workstationId) {
|
console.log('sssssssss')
|
|
this.loadStockByWorkstation()
|
this.loadFeedByWorkstation(this.workstationId)
|
}
|
this.initFeed()
|
},
|
currOperateTask: {
|
handler(newValue, oldValue) {
|
if (newValue.id) {
|
// 根据工单id查询工单所需物料
|
this.loadMaterialByOperateTask()
|
} else {
|
this.materialList = []
|
}
|
},
|
deep: true
|
},
|
currentMaterialPartId: {
|
handler(newValue, oldValue) {
|
if (newValue) {
|
// 根据所需物料进行过滤
|
this.paramObject = { partId: newValue }
|
this.loadStockByWorkstation()
|
this.loadFeedByWorkstation(this.workstationId)
|
} else {
|
this.paramObject = null
|
this.loadStockByWorkstation()
|
this.loadFeedByWorkstation(this.workstationId)
|
}
|
},
|
immediate: true
|
}
|
}
|
}
|
</script>
|
