You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
udiwms-vue-frame/src/views/collect/newCreateCodeDetail.vue

305 lines
8.4 KiB
Vue

<template>
<div>
<el-row :gutter="30">
<el-col :span="15" style="border: 1px solid #e3dfe1; padding:15px; height: 400px; margin-left: 20px; overflow-y: scroll;">
<h2 style="font-weight: bold;">上货信息</h2>
<div v-for="(item, index) in detailList" :key="index" class="product-info">
<div class="info-item">
<p class="p-title">产品通用名: {{ item.coName }}</p>
<p class="p-title">制剂规格: {{ item.prepnSpec }}</p>
<p class="p-title">包装规格: {{ item.bzgg }}</p>
<!--<p class="p-title">产品标识: {{ item.nameCode }}</p>-->
<p class="p-title">批次号: {{ item.batchNo }}</p>
<p class="p-title">生产日期: {{ item.productDate }}</p>
<p class="p-title">失效日期: {{ item.expireDate }}</p>
</div>
<div class="count-items">
<p class="p-title">扫码数量: <span class="scan-count">{{ item.count }}</span></p>
<p class="p-title">实际数量: <span class="actual-count">{{ item.reCount }}{{ item.prepnUnit }}</span></p>
</div>
</div>
</el-col>
<el-col :span="8" style="border: 1px solid #e3dfe1; margin-left: 20px; padding: 15px;height: 400px;">
<h2 style="font-weight: bold;">扫码明细({{codeCount}})</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="600px"
ref="multipleTable">
<!-- <el-table-column-->
<!-- type="selection"-->
<!-- width="55">-->
<!-- </el-table-column>-->
<el-table-column label="序号" type="index" width="55" style="text-align: right;">
</el-table-column>
<el-table-column
label="追溯码"
prop="code"
show-overflow-tooltip
style="text-align: right;">
<template slot-scope="scope">
<div style="font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
{{ scope.row.code }}
</div>
</template>
</el-table-column>
<!-- <el-table-column label="操作" width="100" fixed="right">-->
<!-- <template slot-scope="scope">-->
<!-- <el-button-->
<!-- type="text"-->
<!-- size="small"-->
<!-- @click.native.stop="deleteCode(scope.$index, scope.row)"-->
<!-- >减一-->
<!-- </el-button-->
<!-- >-->
<!-- <el-button-->
<!-- type="text"-->
<!-- size="small"-->
<!-- @click.native.stop="editCode(scope.row)"-->
<!-- >编辑-->
<!-- </el-button-->
<!-- >-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
</div>
</el-col>
</el-row>
<el-dialog
title="编辑条码"
:visible.sync="editCodeVisible"
append-to-body width="70%"
:close-on-click-modal="false"
:close-on-press-escape="false"
v-if="editCodeVisible"
>
<editCodeDialog
editType="2"
:closeCodeDialog="closeCodeDialog"
:codeDetail="codeDetail">
</editCodeDialog>
</el-dialog>
</div>
</template>
<script>
import {convertDate} from "@/utils/date";
import { getCheckDetailCodes, getDetailCodes, updateBizProduct, updateCodeProduct } from '@/api/inout/orderDetailCode'
import { deleteCodesTempById, errorCodeList } from '@/api/inout/order'
import editCodeDialog from "@/views/inout/DialogEditCode";
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,
},
},
components: {editCodeDialog},
data() {
return {
convertDateFun: convertDate,
loading: false,
query: {
orderId: null,
code: "",
corpOrderId: "",
},
detailList: [],
total: 0,
selectRlVisible: false,
dialogTableVisible: false,
editCodeVisible: false,
orderDetail:null,
codeArray:[],
codeCount: 0,
codeDetail: null,
}
},
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);
}else {
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.codeCount = this.codeArray.length
this.loading = false;
})
.catch(() => {
this.loading = false;
});
},
deleteCode(index, row) {
this.$confirm("是否确定移除一个条码?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
let tQuery = {
id: row.id
}
deleteCodesTempById(tQuery)
.then((response) => {
if (response.code === 20000) {
this.getOrderDetails();
this.getCodeList()
} else {
this.$message.error(response.message);
}
});
}).catch(() => {
});
},
editCode(row){
this.codeDetail = row;
this.editCodeVisible = true;
},
closeCodeDialog() {
this.editCodeVisible = false;
this.getOrderDetails();
this.getCodeList()
},
},
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: 65px;
font-weight: bold; /* 添加这行代码,使字体加粗 */
}
.actual-count {
color: green;
font-size: 38px;
}
.p-title{
font-size: 18px;
}
</style>