Files
JY1.0/src/views/Inventory/MaterialOut/index.vue
2019-06-03 09:13:42 +08:00

402 lines
15 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="app-container">
<el-card>
<div slot="header">
<span style="margin: 5px">领料单编号:</span>
<el-input v-model="pickingListNumber" clearable size="small" style="width:200px" />
<el-button size="small" type="success" icon="el-icon-search" style="margin: 0 0 0 10px" @click="searchList()">查询</el-button>
</div>
<h4 style="margin-top:0">领料单</h4>
<el-table :data="pickListTable1" highlight-current-row border style="width: 100%;" size="mini" height="300" @row-click="clickList">
<el-table-column label="序号" align="center" type="index" width="50"/>
<el-table-column label="领料单编号" align="center" min-width="200">
<template slot-scope="scope">
{{ scope.row.领料单编号 }}
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" min-width="200" >
<template slot-scope="scope">
{{ scope.row.操作日期.split(' ')[0] }}
</template>
</el-table-column>
<el-table-column label="领料人" align="center" min-width="130">
<template slot-scope="scope">
{{ scope.row.姓名 }}
</template>
</el-table-column>
<el-table-column label="领料单备注" align="center" min-width="130">
<template slot-scope="scope">
{{ scope.row.领料单备注 }}
</template>
</el-table-column>
<el-table-column label="领回确认" align="center" min-width="80">
<template slot-scope="scope">
<el-tag v-if="Number(scope.row.是否启用)===1" type="warning">未确认</el-tag>
<el-tag v-else type="success">已确认</el-tag>
</template>
</el-table-column>
</el-table>
<div class="block" style="float:right;margin: 10px 0;">
<el-pagination
:current-page="pageCurrent3"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize3"
:total="total3"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange3"
@current-change="handleCurrentChange3"/>
</div>
<h4>领料单明细{{ pickingListNumberShow }}</h4>
<el-table :data="pickListTable2" highlight-current-row border style="width: 100%;" size="mini" height="300" @row-click="clickListDetail">
<el-table-column label="序号" align="center" type="index" width="50"/>
<el-table-column label="名称" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.名称 }}
</template>
</el-table-column>
<el-table-column label="图号或型号" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.图号或型号 || '—' }}
</template>
</el-table-column>
<el-table-column label="规格" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.规格 || '—' }}
</template>
</el-table-column>
<el-table-column label="机床图号" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.机床图号 }}
</template>
</el-table-column>
<el-table-column label="组号" align="center" min-width="70">
<template slot-scope="scope">
{{ scope.row.组号 }}
</template>
</el-table-column>
<el-table-column label="总数量" align="center" min-width="70">
<template slot-scope="scope">
{{ scope.row.总数量 }}
</template>
</el-table-column>
<el-table-column label="备件数量" align="center" min-width="70">
<template slot-scope="scope">
{{ scope.row.备件数量 }}
</template>
</el-table-column>
<el-table-column label="已领数量" align="center" min-width="70">
<template slot-scope="scope">
{{ scope.row.备件数量 }}
</template>
</el-table-column>
</el-table>
</el-card>
<el-card>
<h4 style="margin-top:0">物料货位数量信息</h4>
<el-table :data="StockNumberTable" border style="width: 100%;" size="mini" height="300">
<el-table-column label="序号" align="center" type="index" width="50"/>
<el-table-column label="名称" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.物料名称 || scope.row.零件名称 }}
</template>
</el-table-column>
<el-table-column label="图号或型号" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.物料型号 || scope.row.零件图号 || '—' }}
</template>
</el-table-column>
<el-table-column label="规格" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.物料规格 || scope.row.规格 || '—' }}
</template>
</el-table-column>
<el-table-column label="仓库名称" align="center" min-width="70">
<template slot-scope="scope">
{{ scope.row.仓库名称 }}
</template>
</el-table-column>
<el-table-column label="货位名称" align="center" min-width="70">
<template slot-scope="scope">
{{ scope.row.货位名称 }}
</template>
</el-table-column>
<el-table-column label="货位存量" align="center" min-width="70">
<template slot-scope="scope">
{{ scope.row.货位存量 }}
</template>
</el-table-column>
<el-table-column label="机床图号" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.机床图号 || '—' }}
</template>
</el-table-column>
<el-table-column label="组号" align="center" min-width="70">
<template slot-scope="scope">
{{ scope.row.组号 || '—' }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="200px">
<template slot-scope="scope" align="center">
<el-button size="mini" type="primary" @click="outStore(scope.row)">出库</el-button>
<el-button size="mini" type="warning" @click="errorRecord(scope.row)">异常记录</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<el-dialog :visible.sync="dialogFormVisible1" title="物料出库" center width="380px">
<el-form ref="form1" :model="form1" :rules="rules1" label-position="left">
<el-form-item label="机床" prop="machineValue" label-width="100px">
<el-select v-model="form1.machineValue" filterable size="small" placeholder="机床" style="width: 200px;margin-right:10px" @change="searchGroup()">
<el-option
v-for="item in machine"
:key="item.value"
:label="item.label"
:value="item.value">
<div style="float: left">{{ item.label }}</div>
<div style="float: right; color: #8492a6; font-size: 13px">&nbsp;&nbsp;{{ item.name }}</div>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="分组" prop="groupNumValue" label-width="100px">
<el-select v-model="form1.groupNumValue" filterable size="small" placeholder="分组" style="width: 200px;margin-right:10px">
<el-option
v-for="item in group"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</el-form-item>
<el-form-item label="出库数量" prop="outNumber" label-width="100px" size="small">
<el-input-number v-model="form1.outNumber" :min="0.01" :precision="2" size="small" placeholder="出库数量" style="width: 200px"/>
</el-form-item>
<el-form-item label="出库人" prop="personValue" label-width="100px">
<el-select v-model="form1.personValue" :disabled="true" size="small" style="width: 200px;margin-right:10px">
<el-option
v-for="item in person"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</el-form-item>
<!--<el-form-item label="领料人" prop="DirectNote" label-width="100px">-->
<!--<el-input v-model="form1.DirectNote" size="small" placeholder="请输入领料人" style="width: 200px"/>-->
<!--</el-form-item>-->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible1=false">取消</el-button>
<el-button type="primary" @click="submitOutStore()">确定</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="dialogFormVisible2" title="异常记录" center width="380px">
<el-form ref="form2" :model="form2" :rules="rules2" label-position="left">
<el-form-item label="异常数量" prop="errorNumber" label-width="100px" size="small">
<el-input v-model="form2.errorNumber" size="small" placeholder="异常数量" style="width: 200px"/>
</el-form-item>
<el-form-item label="异常原因" prop="reason" label-width="100px">
<el-input v-model="form2.reason" size="small" placeholder="异常原因" style="width: 200px"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible2=false">取消</el-button>
<el-button type="primary" @click="submitErrorRecord()"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { initPickPerson, initMachineProject, searchgroup, searchList, searchListDetail, searchStockNumber } from '@/api/Inventory/MaterialOut'
import { mapGetters } from 'vuex'
export default {
name: 'MaterialOut',
data() {
return {
pickingListNumber: '',
pickingListNumberShow: '',
pickListTable1: [],
pageCurrent3: 1,
pageSize3: 20,
total3: 0,
pickListTable2: [],
StockNumberTable: [],
dialogFormVisible1: false,
dialogFormVisible2: false,
form1: {
machineValue: '',
groupNumValue: '',
outNumber: '',
personValue: '',
DirectNote: ''
},
form2: {
errorNumber: '',
reason: ''
},
rules1: {
machineValue: [{ required: true, message: '请选择' }],
groupNumValue: [{ required: true, message: '请选择' }],
outNumber: [{ required: true, message: '请输入' }],
personValue: [{ required: true, message: '请输入' }],
DirectNote: [{ required: true, message: '请输入' }]
},
rules2: {
errorNumber: [{ required: true, message: '请输入' }],
reason: [{ required: true, message: '请输入' }]
},
machine: [],
group: [],
person: []
}
},
computed: {
...mapGetters([
'id'
])
},
mounted() {
this.fetchData()
this.searchList()
},
methods: {
// 初始化数据
fetchData() {
this.person = []
initPickPerson().then(response => {
for (let i = 0; i < response.data.length; i++) {
this.person.push({
label: response.data[i].姓名,
value: response.data[i].人员编号
})
}
})
this.machine = []
initMachineProject().then(response => {
for (let i = 0; i < response.data.length; i++) {
this.machine.push({
label: response.data[i].机床图号,
name: response.data[i].项目名称,
value: response.data[i].机床流水号
})
}
})
},
// 查询领料单列表
searchList() {
let check
this.pickingListNumber ? check = 1 : check = 0
searchList(this.pageCurrent3, this.pageSize3, check, this.pickingListNumber).then(response => {
this.pickListTable1 = response.data.rows
this.total3 = response.data.total
})
},
handleSizeChange3(val) {
this.pageSize3 = val
this.pageCurrent3 = 1
this.searchList()
},
handleCurrentChange3(val) {
this.pageCurrent3 = val
this.searchList()
},
// 查看领料单明细
clickList(row) {
row ? this.pickingListNum = row.领料单流水号 : this.pickingListNum
row ? this.pickingListNumberShow = row.领料单编号 : this.pickingListNumberShow
searchListDetail(this.pickingListNum).then(res => {
this.pickListTable2 = res.data
})
},
// 查看领料单明细相关的物料货位数量
clickListDetail(row) {
console.log(row)
if (row.物料流水号) {
searchStockNumber(row.物料流水号).then(res => {
this.StockNumberTable = res.data
})
} else if (row.基本件流水号) {
console.log(row.基本件流水号)
}
},
// 查询组号
searchGroup() {
this.group = []
this.form1.GroupNumValue = ''
searchgroup(this.form1.MachineValue).then(response => {
for (let i = 0; i < response.data.length; i++) {
this.group.push({
label: response.data[i].组号,
value: Number(response.data[i].组件流水号)
})
}
})
},
// 出库
outStore(row) {
console.log(row, this.id)
if (this.$refs['form1'] !== undefined) {
this.$refs['form1'].resetFields()
}
row.机床流水号 ? this.form1.machineValue = row.机床流水号 : this.form1.machineValue = null
row.组件流水号 ? this.form1.groupNumValue = row.组件流水号 : this.form1.groupNumValue = null
this.form1.outNumber = 0
this.form1.personValue = Number(this.id)
this.dialogFormVisible1 = true
},
// 提交出库
submitOutStore() {
this.$refs['form1'].validate((valid) => {
if (valid) {
console.log(this.form1.machineValue, this.form1.groupNumValue, this.form1.outNumber, this.form1.personValue)
this.dialogFormVisible1 = false
this.$message.success('出库成功')
} else {
return false
}
})
},
// 异常记录
errorRecord() {
if (this.$refs['form2'] !== undefined) {
this.$refs['form2'].resetFields()
}
this.form2.errorNumber = ''
this.form2.reason = ''
this.dialogFormVisible2 = true
},
// 提交异常记录
submitErrorRecord() {
this.$refs['form2'].validate((valid) => {
if (valid) {
console.log(this.form2.errorNumber, this.form2.reason)
this.dialogFormVisible2 = false
this.$message.success('记录成功')
} else {
return false
}
})
}
}
}
</script>
<style scoped>
.el-card{
margin-bottom: 15px;
}
.el-select{
width:200px
}
.el-input{
width:200px
}
span{
margin: 10px 0 10px 10px;
}
.el-tag{
margin: 0
}
</style>