1/10 上货页面优化
wangwei
6 months ago
parent
c8d660071c
commit
cbbe33b91d
@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row :gutter="30">
|
||||
<el-col :span="15" style="border: 1px solid #e3dfe1; padding:15px; height: 700px; margin-left: 20px;">
|
||||
<h2 style="font-weight: bold;">上货信息</h2>
|
||||
<div v-for="(item, index) in detailList" :key="index" class="product-info">
|
||||
<div class="info-item">
|
||||
<p>产品通用名: {{ item.coName }}</p>
|
||||
<p>规格: {{ item.bzgg }}</p>
|
||||
<p>产品标识: {{ item.nameCode }}</p>
|
||||
<p>批次号: {{ item.batchNo }}</p>
|
||||
</div>
|
||||
<div class="count-items">
|
||||
<p>扫码数量: <span class="scan-count">{{ item.count }}</span></p>
|
||||
<p>实际数量: <span class="actual-count">{{ item.reCount }}/ {{ item.measname }}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</el-col>
|
||||
<el-col :span="8" style="border: 1px solid #e3dfe1; margin-left: 20px; padding: 15px;height: 700px;">
|
||||
<h2 style="font-weight: bold;">扫码队列({{codeArray.length}})</h2>
|
||||
<!--<el-divider></el-divider>-->
|
||||
<div style=" border-top: 1px solid #ccc;">
|
||||
<el-table v-loading="loading" :data="codeArray" style="width: 100%;margin-top: 20px" max-height="350"
|
||||
ref="multipleTable">
|
||||
<!-- <el-table-column-->
|
||||
<!-- type="selection"-->
|
||||
<!-- width="55">-->
|
||||
<!-- </el-table-column>-->
|
||||
<el-table-column label="序号" type="index" width="55"></el-table-column>
|
||||
<el-table-column
|
||||
label="追溯码"
|
||||
prop="code"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
|
||||
</div>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {convertDate} from "@/utils/date";
|
||||
import { getCheckDetailCodes, getDetailCodes, updateBizProduct, updateCodeProduct } from '@/api/inout/orderDetailCode'
|
||||
import { errorCodeList } from '@/api/inout/order'
|
||||
|
||||
|
||||
export default {
|
||||
name: "newCreateCodeDetail",
|
||||
props: {
|
||||
idQuery: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
viewType: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
curAction: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
status: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
convertDateFun: convertDate,
|
||||
loading: false,
|
||||
query: {
|
||||
orderId: null,
|
||||
code: "",
|
||||
corpOrderId: "",
|
||||
},
|
||||
detailList: [],
|
||||
total: 0,
|
||||
selectRlVisible: false,
|
||||
dialogTableVisible: false,
|
||||
editCodeVisible: false,
|
||||
orderDetail:null,
|
||||
codeArray:[]
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
"curAction": {
|
||||
handler(newVal, oldVal) {
|
||||
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getOrderDetails() {
|
||||
this.loading = true;
|
||||
this.query.orderId = this.idQuery.billNo;
|
||||
getDetailCodes(this.query) //查找该单号下的所有条码
|
||||
.then((response) => {
|
||||
|
||||
this.detailList = response.data.list || [];
|
||||
this.total = response.data.total || 0;
|
||||
this.loading = false;
|
||||
if (this.detailList.length > 0 && this.status == false){
|
||||
this.orderDetail = this.detailList[0]
|
||||
this.$emit('getOrderData', this.orderDetail)
|
||||
}
|
||||
this.$emit('clearBillNo', this.detailList.length > 0? false : true);
|
||||
let count = 0;
|
||||
if (this.detailList && this.detailList.length > 0) {
|
||||
this.detailList.forEach(item => {
|
||||
count += item.reCount;
|
||||
});
|
||||
this.$emit('getCount', count);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
this.detailList = [];
|
||||
this.total = 0;
|
||||
});
|
||||
},
|
||||
|
||||
rowStyle({row, rowIndex}) {
|
||||
let rowBackground = {};
|
||||
if (this.viewType == 3 && !row.checkSuccess) {
|
||||
rowBackground.color = '#f60303';
|
||||
}
|
||||
return rowBackground;
|
||||
},
|
||||
|
||||
|
||||
saveChange(row) {
|
||||
if (row.batchNo == '') {
|
||||
row.batchNo = null;
|
||||
}
|
||||
updateCodeProduct(row)
|
||||
.then((response) => {
|
||||
this.loading = false;
|
||||
if (response.code === 20000) {
|
||||
this.$message.success("保存成功！");
|
||||
this.selectedIndex = null;
|
||||
this.refreshPanel();
|
||||
|
||||
} else {
|
||||
this.$message.error(response.message);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
this.dataList = [];
|
||||
this.pageTotal = 0;
|
||||
});
|
||||
},
|
||||
rowChange(val) {
|
||||
this.currentRow = val;
|
||||
if (this.currentRow.batchNo == '')
|
||||
this.currentRow.batchNo = null;
|
||||
this.selectedIndex = val.index;
|
||||
},
|
||||
getCodeList() {
|
||||
this.loading = true;
|
||||
this.query.orderId = this.idQuery.billNo
|
||||
errorCodeList(this.query) //查找该单号下的所有条码
|
||||
.then((response) => {
|
||||
this.codeArray = response.data.list || [];
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
|
||||
},
|
||||
created() {
|
||||
if (this.idQuery.billNo != null)
|
||||
this.getOrderDetails();
|
||||
this.getCodeList()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.product-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid #ccc;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.count-items {
|
||||
flex: 0 0 auto; /* This ensures that count items do not grow or shrink */
|
||||
}
|
||||
|
||||
.count-item {
|
||||
margin: 0; /* Remove default margin */
|
||||
}
|
||||
|
||||
.scan-count {
|
||||
color: red;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.actual-count {
|
||||
color: green;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue