<template>
|
<div class="scan-container">
|
<el-card class="scan-card">
|
<div slot="header" class="clearfix">
|
<span>出库单配货扫描</span>
|
</div>
|
<el-form ref="form" :model="formData" label-width="120px" class="scan-form">
|
<el-form-item label="波次号">
|
<el-input ref="batchCode" v-model="formData.batchCode" autofocus class="input-300" @keyup.native.enter.stop="getData"></el-input>
|
</el-form-item>
|
<el-form-item label="物料条码">
|
<el-input ref="productModel" v-model="formData.productModel" class="input-300" @keyup.native.enter.stop="checkPackingBarcode"></el-input>
|
<span class="sub-item">
|
<span class="sub-label">扫描数量：</span>
|
<el-input-number v-model="formData.scanQty" :min="0" controls-position="right" class="input-120" @change="setScanQty"></el-input-number>
|
</span>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="onSubmit">确认配货</el-button>
|
<el-button @click="onReset">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<div v-show="formData.isShow" class="allot-position">
|
<div class="title">配货位</div>
|
<div class="value" v-text="formData.allotName"></div>
|
</div>
|
</el-card>
|
<el-card class="scan-card body-no-padding">
|
<div slot="header" class="clearfix">
|
<span class="padding-top-10">扫描结果</span>
|
<el-button type="text" class="floatRight" @click="setting.visible=true">字段设置</el-button>
|
</div>
|
<el-table ref="scan-table" :data="tableData" :row-class-name="rowClass" stripe style="width: 100%" class="scan-table" @row-click="setCurrent">
|
<template v-for="(item, index) in setting.fields">
|
<template v-if="'positionName,scanWeight'.indexOf(item.prop)>=0">
|
<el-table-column v-if="item.visible" :key="index" :prop="item.prop" :label="item.label" :width="item.width">
|
<template slot-scope="scope">
|
<template>
|
<el-input v-model="scope.row[item.prop]" size="mini" class="w-100pc"></el-input>
|
</template>
|
</template>
|
</el-table-column>
|
</template>
|
<template v-else-if="'produceDate,limitDate'.indexOf(item.prop)>=0">
|
<el-table-column v-if="item.visible" :key="index" :prop="item.prop" :label="item.label" :width="item.width">
|
<template slot-scope="scope">
|
<template>
|
<el-date-picker v-model="scope.row[item.prop]" size="mini" type="date" placeholder="选择日期" class="w-110" value-format="yyyy-MM-dd">
|
</el-date-picker>
|
</template>
|
</template>
|
</el-table-column>
|
</template>
|
<template v-else>
|
<el-table-column v-if="item.visible" :key="index" :prop="item.prop" :label="item.label" :width="item.width">
|
</el-table-column>
|
</template>
|
</template>
|
</el-table>
|
</el-card>
|
<scan-setting-dialog ref="setting-dialog" :visible.sync="setting.visible" :fields="setting.fields" :name="setting.name">
|
</scan-setting-dialog>
|
<!--声音文件-->
|
<audio ref="sound_error" controls="controls" style="display:none;">
|
<source src="@/assets/sounds/error2.mp3" type="audio/mpeg" />
|
</audio>
|
<audio ref="sound_correct" controls="controls" style="display:none;">
|
<source src="@/assets/sounds/feixin.mp3" type="audio/mpeg" />
|
</audio>
|
<audio ref="sound_scan" controls="controls" style="display:none;">
|
<source src="@/assets/sounds/saomiao.wav" type="audio/mpeg" />
|
</audio>
|
</div>
|
</template>
|
|
<script>
|
import YrtScanMixins from "@/components/common/yrtScanMixins.vue";
|
import ScanSettingDialog from "@/components/common/components/scanSettingDialog.vue";
|
|
export default {
|
name: "outbound-scan-order-matching",
|
components: {
|
ScanSettingDialog
|
},
|
mixins: [YrtScanMixins],
|
data() {
|
return {
|
formData: {
|
orderCode: null,
|
batchCode: "",
|
productModel: null, // 物料条码
|
allotPositionName: null, // 配货位
|
isShow: false, // 配货位显示和隐藏
|
allotName: 0, // 显示的配货位
|
scanQty: 0 // 扫描数量
|
},
|
// 明细数据
|
tableData: [],
|
// 当前正在扫描的数据
|
currentRow: {},
|
// 扫描列设置对话框参数
|
setting: {
|
visible: false,
|
name: "outbound-scan-order-matching",
|
fields: [
|
{
|
prop: "productModel",
|
label: "条形码",
|
visible: true,
|
width: 130,
|
order: 1
|
},
|
{
|
prop: "allotPositionName",
|
label: "配货位",
|
visible: true,
|
width: 90,
|
order: 2
|
},
|
{
|
prop: "quantityOrder",
|
label: "清单数量",
|
visible: true,
|
width: 90,
|
order: 3
|
},
|
{
|
prop: "scanQuanity",
|
label: "已配货数量",
|
visible: true,
|
width: 90,
|
order: 4
|
},
|
{
|
prop: "finishedQuantity",
|
label: "当前扫描数量",
|
visible: true,
|
width: 120,
|
order: 5
|
},
|
{
|
prop: "unFinishedQuantity",
|
label: "未配货数量",
|
visible: true,
|
width: 130,
|
order: 6
|
},
|
{
|
prop: "orderCode",
|
label: "订单号",
|
visible: true,
|
width: 140,
|
order: 7
|
},
|
{
|
prop: "productCode",
|
label: "物料编号",
|
visible: true,
|
width: 130,
|
order: 8
|
},
|
{
|
prop: "weight",
|
label: "单位毛重",
|
visible: true,
|
width: 90,
|
order: 9
|
},
|
{
|
prop: "totalWeight",
|
label: "合计重量",
|
visible: false,
|
width: 80,
|
order: 10
|
},
|
{
|
prop: "scanWeight",
|
label: "已扫重量",
|
visible: false,
|
width: 80,
|
order: 11
|
},
|
{
|
prop: "productName",
|
label: "物料名称",
|
visible: true,
|
width: null,
|
order: 12
|
}
|
]
|
},
|
// 一次扫描的数量
|
scanCount: 1
|
};
|
},
|
// 监听数据
|
watch: {
|
// 当前行扫描数据改变后，将扫描数量也改变
|
currentRow: {
|
handler: function(rowData) {
|
if (rowData) {
|
this.formData.scanQty = rowData.finishedQuantity;
|
}
|
},
|
deep: true
|
}
|
},
|
mounted() {
|
// 字段设置
|
const setting = localStorage[this.setting.name + "-setting"];
|
if (setting) {
|
this.setting.fields = JSON.parse(setting);
|
}
|
},
|
methods: {
|
// 获得明细数据
|
getData() {
|
var the = this;
|
var batchCode = the.formData.batchCode;
|
if (!batchCode) {
|
this.$message.error("波次号不能为空");
|
return;
|
}
|
this.tableData = [];
|
const url = "/api/outbound/orderMatching/getOrderMatchingData";
|
const parment = {
|
orderPrintCode: batchCode
|
};
|
const callback = res => {
|
the.common.showMsg(res);
|
if (res.result) {
|
// 构建数据
|
this.currentRow = {};
|
this.tableData = res.data.dataList.map(row => {
|
this.$set(row, "scanQuanity", 0);
|
// 后端数据FinishedQuanity写错了，应为FinishedQuantity
|
row.scanQuanity = row.finishedQuanity;
|
row.unFinishedQuantity = Math.Round(row.quantityOrder - row.finishedQuanity, 4);
|
row.finishedQuantity = 0;
|
return row;
|
});
|
// 条码框获得焦点
|
this.focus("productModel");
|
this.play();
|
} else {
|
this.playError();
|
}
|
};
|
the.common.ajax(url, parment, callback, the.$refs["form"]);
|
},
|
// 判断扫描包装条码
|
checkPackingBarcode(evt) {
|
var code = this.formData.productModel;
|
if (!code) return;
|
this.checkPackingProductModel(this.tableData, () => {
|
this.formData.isShow = true; // 显示配货位
|
this.formData.allotName = this.currentRow.allotPositionName; // 显示的配货位值
|
});
|
},
|
// 提交数据
|
onSubmit() {
|
var the = this;
|
if (!this.formData.batchCode) {
|
this.$message.error("请扫描波次单号！");
|
this.$refs.batchCode.focus();
|
this.$refs.sound_error.play(); // 播放声音
|
return;
|
}
|
const dataList = this.tableData.filter(item => item.finishedQuantity > 0);
|
if (!dataList.length) {
|
this.$message.error("请先扫描一条记录！");
|
return;
|
}
|
var orderPrintCode = the.formData.batchCode;
|
var url = "/api/outbound/orderMatching/saveOrderMatch";
|
var parment = {
|
openNodeApi: true,
|
orderPrintCode: orderPrintCode,
|
dataList: dataList
|
};
|
this.common.ajax(
|
url,
|
parment,
|
res => {
|
this.common.showMsg(res);
|
this.onReset();
|
},
|
true
|
);
|
},
|
// 重置
|
onReset() {
|
this.formData = {
|
batchCode: null,
|
positionName: null,
|
productModel: null,
|
scanQty: 0
|
};
|
this.tableData = [];
|
this.$refs.batchCode.focus();
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
@import "../../../styles/scan.scss";
|
.scan-card {
|
position: relative;
|
.allot-position {
|
position: absolute;
|
top: 65px;
|
left: 700px;
|
.title {
|
padding: 10px;
|
}
|
.value {
|
color: red;
|
font-size: 50px;
|
}
|
}
|
}
|
</style>
|
