344 lines
9.0 KiB
Vue
344 lines
9.0 KiB
Vue
<template>
|
||
<!--XXX 2025-04-06 工单报工（打印标签后，扫标签报工版本【新】） -->
|
||
<view>
|
||
<uni-card class="report-box">
|
||
<view class="report-box-title">外箱标签检验</view>
|
||
<view class="report-box-parts-list">
|
||
<view v-if="packageLabel.label" class="reprot-box-parts-list-item">
|
||
<view class="reprot-box-parts-list-item-left">
|
||
<view class="reprot-box-parts-list-item-title">{{ packageLabel.title }}</view>
|
||
<view class="reprot-box-parts-list-item-content">{{ packageLabel.content }}</view>
|
||
</view>
|
||
<view class="reprot-box-parts-list-item-right">
|
||
<uni-icons type="trash-filled" color="red" size="30" @click="remove(0)"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view v-else>
|
||
<ScanInput @scanConfirm="scanConfirmByPackageLabel" placeholder="请扫外箱标签"></ScanInput>
|
||
</view>
|
||
</view>
|
||
</uni-card>
|
||
<uni-card class="report-box">
|
||
<view class="report-box-title">首标签检验</view>
|
||
<view class="report-box-parts-list">
|
||
<view v-if="firstPartsLabel.label" class="reprot-box-parts-list-item">
|
||
<view class="reprot-box-parts-list-item-left">
|
||
<view class="reprot-box-parts-list-item-title">{{ firstPartsLabel.title }}</view>
|
||
<view class="reprot-box-parts-list-item-content">{{ firstPartsLabel.content }}</view>
|
||
</view>
|
||
<view class="reprot-box-parts-list-item-right">
|
||
<uni-icons type="trash-filled" color="red" size="30" @click="remove(1)"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view v-else>
|
||
<ScanInput @scanConfirm="scanConfirmByFirstLabel" placeholder="请扫首标签"></ScanInput>
|
||
</view>
|
||
</view>
|
||
</uni-card>
|
||
<uni-card class="report-box">
|
||
<view class="report-box-title">末标签检验</view>
|
||
<view class="report-box-parts-list">
|
||
<view v-if="endPartsLabel.label" class="reprot-box-parts-list-item">
|
||
<view class="reprot-box-parts-list-item-left">
|
||
<view class="reprot-box-parts-list-item-title">{{ endPartsLabel.title }}</view>
|
||
<view class="reprot-box-parts-list-item-content">{{ endPartsLabel.content }}</view>
|
||
</view>
|
||
<view class="reprot-box-parts-list-item-right">
|
||
<uni-icons type="trash-filled" color="red" size="30" @click="remove(2)"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view v-else>
|
||
<ScanInput @scanConfirm="scanConfirmByEndLabel" placeholder="请扫末标签"></ScanInput>
|
||
</view>
|
||
</view>
|
||
</uni-card>
|
||
<view class="bottom-box">
|
||
<button :disabled="!canNext" type="primary" @click="next">下一步报工</button>
|
||
</view>
|
||
<!-- 初次进入校验 -->
|
||
<view>
|
||
<uni-popup ref="dialogRef" type="dialog">
|
||
<uni-popup-dialog
|
||
:title="dialog.title"
|
||
:content="dialog.content"
|
||
:type="dialog.type"
|
||
cancelText="关闭"
|
||
confirmText="确认"
|
||
@confirm="dialogConfirm"
|
||
@close="dialogClose"
|
||
></uni-popup-dialog>
|
||
</uni-popup>
|
||
</view>
|
||
<!-- 删除确认对话框 -->
|
||
<view>
|
||
<uni-popup ref="deleteDialogRef" type="dialog">
|
||
<uni-popup-dialog
|
||
title="确认删除"
|
||
content="确定要删除该标签吗？"
|
||
cancelText="取消"
|
||
confirmText="删除"
|
||
@confirm="confirmDelete"
|
||
@close="closeDeleteDialog"
|
||
></uni-popup-dialog>
|
||
</uni-popup>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// 工单相关报工基础Api
|
||
import { CheckBoxInspectionLabel, GetFirstInspectionLabel, GetEndInspectionLabel, CheckFirstInspectionLabel, CheckEndInspectionLabel } from '@/api/workorder/index.js';
|
||
export default {
|
||
props: {
|
||
formData: {
|
||
type: Object
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
dialogRef: null,
|
||
dialog: {
|
||
title: '操作提醒',
|
||
content: '',
|
||
type: 'warn'
|
||
},
|
||
deleteIndex: -1,
|
||
deleteDialogRef: null,
|
||
// 外箱标签信息
|
||
packageLabel: {
|
||
label: '',
|
||
title: '',
|
||
content: '外箱标签'
|
||
},
|
||
// 首标签和末标签
|
||
firstPartsLabel: {
|
||
label: '',
|
||
title: '',
|
||
content: '首标签'
|
||
},
|
||
endPartsLabel: {
|
||
label: '',
|
||
title: '',
|
||
content: '末标签'
|
||
}
|
||
};
|
||
},
|
||
computed: {
|
||
canNext() {
|
||
return this.firstPartsLabel.label && this.endPartsLabel.label && this.packageLabel.label;
|
||
}
|
||
},
|
||
methods: {
|
||
// 标签扫码
|
||
async scanConfirmByPackageLabel(val) {
|
||
try {
|
||
this.loading = true;
|
||
const _value = val;
|
||
if (_value === '' || _value === null) {
|
||
this.loading = false;
|
||
this.dialog.content = '扫码结果为空！';
|
||
this.dialog.type = 'warn';
|
||
this.$refs.dialogRef.open();
|
||
return;
|
||
}
|
||
let parmas = {
|
||
workorder: this.formData.fkWorkorder,
|
||
box_label: _value
|
||
};
|
||
let res = await CheckBoxInspectionLabel(parmas);
|
||
if (res.code === 200 && res.data === '合格') {
|
||
this.packageLabel.label = _value;
|
||
this.packageLabel.content = _value;
|
||
} else {
|
||
this.dialog.content = '外箱标签校验异常:' + res.data;
|
||
this.dialog.type = 'warn';
|
||
this.$refs.dialogRef.open();
|
||
}
|
||
this.loading = false;
|
||
} catch (e) {
|
||
this.loading = false;
|
||
console.log(e);
|
||
}
|
||
},
|
||
async scanConfirmByFirstLabel(val) {
|
||
try {
|
||
this.loading = true;
|
||
const _value = val;
|
||
if (_value === '' || _value === null) {
|
||
this.loading = false;
|
||
this.dialog.content = '扫码结果为空！';
|
||
this.dialog.type = 'warn';
|
||
this.$refs.dialogRef.open();
|
||
return;
|
||
}
|
||
let parmas = {
|
||
workorder: this.formData.fkWorkorder,
|
||
first_label: _value
|
||
};
|
||
let res = await CheckFirstInspectionLabel(parmas);
|
||
if (res.code === 200 && res.data === '合格') {
|
||
this.firstPartsLabel.label = _value;
|
||
this.firstPartsLabel.content = _value;
|
||
} else {
|
||
this.dialog.content = '首标签校验异常:' + res.data;
|
||
this.dialog.type = 'warn';
|
||
this.$refs.dialogRef.open();
|
||
}
|
||
this.loading = false;
|
||
} catch (e) {
|
||
this.loading = false;
|
||
console.log(e);
|
||
}
|
||
},
|
||
async scanConfirmByEndLabel(val) {
|
||
try {
|
||
this.loading = true;
|
||
const _value = val;
|
||
if (_value === '' || _value === null) {
|
||
this.loading = false;
|
||
this.dialog.content = '扫码结果为空！';
|
||
this.dialog.type = 'warn';
|
||
this.$refs.dialogRef.open();
|
||
return;
|
||
}
|
||
let parmas = {
|
||
workorder: this.formData.fkWorkorder,
|
||
end_label: _value
|
||
};
|
||
let res = await CheckEndInspectionLabel(parmas);
|
||
if (res.code === 200 && res.data === '合格') {
|
||
this.endPartsLabel.label = _value;
|
||
this.endPartsLabel.content = _value;
|
||
} else {
|
||
this.dialog.content = '末标签校验异常:' + res.data;
|
||
this.dialog.type = 'warn';
|
||
this.$refs.dialogRef.open();
|
||
}
|
||
this.loading = false;
|
||
} catch (e) {
|
||
this.loading = false;
|
||
console.log(e);
|
||
}
|
||
},
|
||
getFirstLabel(workorder) {
|
||
GetFirstInspectionLabel({ workorder }).then((res) => {
|
||
if (res.code === 200 && res.data) {
|
||
this.firstPartsLabel.label = res.data;
|
||
this.firstPartsLabel.content = res.data;
|
||
}
|
||
});
|
||
},
|
||
getEndLabel(workorder) {
|
||
GetEndInspectionLabel({ workorder }).then((res) => {
|
||
if (res.code === 200 && res.data) {
|
||
this.endPartsLabel.label = res.data;
|
||
this.endPartsLabel.content = res.data;
|
||
}
|
||
});
|
||
},
|
||
remove(index) {
|
||
this.deleteIndex = index;
|
||
this.$refs.deleteDialogRef.open();
|
||
},
|
||
confirmDelete() {
|
||
if (this.deleteIndex === 0) {
|
||
this.packageLabel.label = '';
|
||
this.packageLabel.content = '';
|
||
this.deleteIndex = -1;
|
||
}
|
||
if (this.deleteIndex === 1) {
|
||
this.firstPartsLabel.label = '';
|
||
this.firstPartsLabel.content = '';
|
||
this.deleteIndex = -1;
|
||
}
|
||
if (this.deleteIndex === 2) {
|
||
this.endPartsLabel.label = '';
|
||
this.endPartsLabel.content = '';
|
||
this.deleteIndex = -1;
|
||
}
|
||
this.$refs.deleteDialogRef.close();
|
||
},
|
||
closeDeleteDialog() {
|
||
this.deleteIndex = null;
|
||
},
|
||
next() {
|
||
this.$emit('next');
|
||
},
|
||
dialogConfirm() {
|
||
this.dialogClose();
|
||
},
|
||
dialogClose() {
|
||
this.$refs.dialogRef.close();
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.report-form-item {
|
||
display: flex;
|
||
}
|
||
.report-form-label {
|
||
width: 80px;
|
||
font-size: 14px;
|
||
}
|
||
.report-form-value {
|
||
font-size: 16px;
|
||
}
|
||
.report-box {
|
||
height: 20vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.report-box-title {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
}
|
||
.report-box-parts-list {
|
||
width: 86vw;
|
||
height: 48vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
overflow-y: auto;
|
||
will-change: scroll-position;
|
||
}
|
||
.reprot-box-parts-list-item {
|
||
padding: 5px;
|
||
margin: 0px; /* 添加外边距 */
|
||
width: calc(100% - 10px); /* 调整宽度以适应内边距 */
|
||
height: 50px;
|
||
border: 1px solid #c1c1c1; /* 调整边框颜色为更柔和的灰色 */
|
||
display: flex;
|
||
flex-direction: row;
|
||
transition: background-color 0.3s ease; /* 添加过渡效果 */
|
||
}
|
||
.reprot-box-parts-list-item:hover {
|
||
background-color: #f5f5f5; /* 添加悬停效果 */
|
||
}
|
||
.reprot-box-parts-list-item-left {
|
||
width: 75%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.reprot-box-parts-list-item-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
.reprot-box-parts-list-item-content {
|
||
font-size: 14px;
|
||
}
|
||
.reprot-box-parts-list-item-right {
|
||
width: 25%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
</style>
|