<template>
|
<view class="container">
|
<cu-custom :bgColor="NavBarColor" :isBack="true" backRouterName="productionTask">
|
<block slot="backText">返回</block>
|
<block slot="content">报工</block>
|
<block slot="right">
|
<view @click="printHandel">
|
<image class="search" src="/static/icon_dayin.png" style="width: 25px; height: 25px;" alt="打印按钮" />
|
</view>
|
</block>
|
</cu-custom>
|
|
<!-- 骨架屏 -->
|
<view v-if="loading" class="skeleton-container">
|
<view class="skeleton-group">
|
<view class="skeleton-divider"></view>
|
<view class="skeleton-item">
|
<view class="skeleton-label"></view>
|
<view class="skeleton-input"></view>
|
</view>
|
<view class="skeleton-item">
|
<view class="skeleton-label"></view>
|
<view class="skeleton-input"></view>
|
</view>
|
<view class="skeleton-item">
|
<view class="skeleton-label"></view>
|
<view class="skeleton-input"></view>
|
</view>
|
<view class="skeleton-item">
|
<view class="skeleton-label"></view>
|
<view class="skeleton-input"></view>
|
</view>
|
</view>
|
|
<view class="skeleton-group">
|
<view class="skeleton-divider"></view>
|
<view class="skeleton-item">
|
<view class="skeleton-label"></view>
|
<view class="skeleton-input"></view>
|
</view>
|
<view class="skeleton-item">
|
<view class="skeleton-label"></view>
|
<view class="skeleton-select"></view>
|
</view>
|
<view class="skeleton-item">
|
<view class="skeleton-label"></view>
|
<view class="skeleton-select"></view>
|
</view>
|
<view class="skeleton-item">
|
<view class="skeleton-label"></view>
|
<view class="skeleton-input"></view>
|
</view>
|
<view class="skeleton-item">
|
<view class="skeleton-label"></view>
|
<view class="skeleton-select"></view>
|
</view>
|
<view class="skeleton-item">
|
<view class="skeleton-label"></view>
|
<view class="skeleton-datetime"></view>
|
</view>
|
</view>
|
|
<view class="skeleton-button"></view>
|
</view>
|
|
<!-- 实际内容 -->
|
<view v-else class="container">
|
<uni-forms
|
ref="form"
|
:modelValue="formData"
|
:rules="rules"
|
validate-trigger="bind"
|
err-show-type="undertext">
|
<uni-group top="1">
|
<view class="divider"><text>工单信息</text></view>
|
<uni-forms-item :label-width="100" name="workOrderNumber" label="单据编号:">
|
<uni-easyinput v-model="formData.workOrderNumber" :disabled="true" />
|
</uni-forms-item>
|
<uni-forms-item :label-width="100" name="materialCode" label="物料编码:">
|
<uni-easyinput v-model="formData.materialCode" :disabled="true" />
|
</uni-forms-item>
|
|
<uni-forms-item :label-width="100" name="materialDescription" label="物料描述:">
|
<uni-easyinput v-model="formData.materialDescription" :disabled="true" />
|
</uni-forms-item>
|
<uni-forms-item :label-width="100" name="plannedQuantity" label="计划数量:">
|
<uni-easyinput v-model="formData.plannedQuantity" :disabled="true" />
|
</uni-forms-item>
|
|
<view class="divider"><text>报工信息</text></view>
|
|
<uni-forms-item :label-width="140" required name="inspectionOrderNumber"
|
label="报工单号:">
|
<uni-easyinput v-model="formData.inspectionOrderNumber" placeholder="系统生成" :disabled="true" />
|
</uni-forms-item>
|
<uni-forms-item :label-width="140" required name="process" label="仓库">
|
<uni-data-select v-model="formData.process" :localdata="SpareList" @change="changeisSpareList"
|
placeholder="请选择" />
|
</uni-forms-item>
|
<uni-forms-item :label-width="140" required name="inspectionQuantity" label="报工数量:">
|
<uni-number-box v-model="formData.inspectionQuantity" />
|
</uni-forms-item>
|
<uni-forms-item :label-width="140" required name="inspectionPlan" label="检验人员">
|
<uni-data-select v-model="formData.inspectionPlan" :localdata="SpareList"
|
@change="changeisSpareList" placeholder="请选择" />
|
</uni-forms-item>
|
<uni-forms-item :label-width="140" required name="inspectionTime" label="报工时间">
|
<uni-datetime-picker type="datetime" v-model="formData.inspectionTime" />
|
</uni-forms-item>
|
</uni-group>
|
</uni-forms>
|
|
<view class="padding flex flex-direction">
|
<view class="flex-sub bg-blue padding-sm margin-xl radius text-sm text-center text-white"
|
@click.stop="ProductionTask()" hover-class="is-hover">确定</view>
|
</view>
|
</view>
|
|
<pdaScanVue></pdaScanVue>
|
</view>
|
</template>
|
|
<script>
|
import pdaScanVue from "@/components/mes/pdaScan.vue";
|
import QRCode from 'qrcode';
|
|
export default {
|
components: {
|
pdaScanVue
|
},
|
data() {
|
return {
|
loading: true,
|
isShow: false,
|
isSubmitting: false, // 防重复提交
|
SpareList: [{
|
text: "是",
|
value: 1
|
},
|
{
|
text: "否",
|
value: 0
|
}
|
],
|
scrollLeft: 0,
|
formData: {
|
workOrderNumber: '1111111',
|
materialCode: '120008194',
|
materialDescription: '三代轮毂轴承单元\\G3-487',
|
plannedQuantity: '200',
|
inspectionOrderNumber: '',
|
process: '',
|
inspectionType: '',
|
inspectionQuantity: '',
|
inspectionPlan: '',
|
inspectionTime: '',
|
// 新增字段用于标签数据
|
productName: '驱动轴总成',
|
palletNo: 'PAL20250822001',
|
produceDate: '',
|
workshop: '装配车间3号线'
|
},
|
// 表单验证规则
|
rules: {
|
process: {
|
rules: [{
|
required: true,
|
errorMessage: '请选择工序'
|
}]
|
},
|
inspectionType: {
|
rules: [{
|
required: true,
|
errorMessage: '请选择检验类型'
|
}]
|
},
|
inspectionPlan: {
|
rules: [{
|
required: true,
|
errorMessage: '请选择检验方案'
|
}]
|
},
|
inspectionTime: {
|
rules: [{
|
required: true,
|
errorMessage: '请选择检验时间'
|
}]
|
},
|
inspectionQuantity: {
|
rules: [{
|
required: true,
|
errorMessage: '请输入送检数量'
|
}, {
|
format: 'number',
|
errorMessage: '送检数量必须为数字'
|
}]
|
}
|
},
|
NavBarColor: this.NavBarColor,
|
url: {
|
upload: "/eam/sysFiles/batch_upload",
|
stallList: "/eam/eamRepairOrder/queryById",
|
getEquipmentList: 'eam/equipment/list',
|
approval: '/eam/eamRepairOrder/perform'
|
},
|
styles: {
|
color: '#2979FF',
|
borderColor: '#2979FF'
|
},
|
msg1Count: 0
|
}
|
},
|
computed: {
|
top() {
|
return this.CustomBar * 2 + 160
|
},
|
style() {
|
var StatusBar = this.StatusBar;
|
var CustomBar = this.CustomBar;
|
var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
|
return style
|
},
|
},
|
mounted() {
|
/**
|
* 上料下料根据物料类型判断（额外信息)---扫码/手动输入 ---（手动输入调用接口返回库存信息） 扫码信息提交后端，在重新赋值 判断物料类型- 显示特殊属性值， 库存信息也要保存
|
*/
|
const currentLineType = this.$store.getters.currentLineType;
|
console.log('当前产线类型：', currentLineType);
|
/**
|
* 装配 ASSEMBLE
|
* 内法兰INNERFLANGE
|
* 外法兰OUTERFLANGE
|
* 热处理HEATTREATMENT
|
*/
|
},
|
created() {
|
// 初始化生产日期为当前日期
|
this.formData.produceDate = this.formatDate(new Date());
|
|
// 模拟数据加载
|
setTimeout(() => {
|
this.loading = false;
|
}, 1000);
|
},
|
methods: {
|
// 格式化日期
|
formatDate(date) {
|
const year = date.getFullYear();
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
const day = String(date.getDate()).padStart(2, '0');
|
return `${year}-${month}-${day}`;
|
},
|
|
// 点击打印按钮：生成HTML预览并跳转
|
async printHandel() {
|
// 1. 验证表单信息
|
if (!this.formData.inspectionQuantity || !this.formData.process) {
|
uni.showToast({
|
title: '请先填写报工数量和仓库信息',
|
icon: 'none',
|
duration: 2000
|
});
|
return;
|
}
|
|
try {
|
uni.showLoading({ title: '生成预览中...' });
|
|
// 2. 收集打印数据
|
const tagData = this.getReportPrintData();
|
|
// 3. 跳转至预览页，并携带打印数据
|
await uni.navigateTo({
|
url: `/pages/finished-product-preview/finished-product-preview?tagData=${encodeURIComponent(JSON.stringify(tagData))}`
|
});
|
|
uni.hideLoading();
|
} catch (error) {
|
uni.hideLoading();
|
console.error('生成预览失败:', error);
|
uni.showToast({ title: '预览生成失败', icon: 'none' });
|
}
|
},
|
|
// 生成成品托标签数据（优化后）
|
getReportPrintData() {
|
const { formData } = this;
|
return {
|
|
material: '120034535',
|
batch: '25098814',
|
model: 'G3-2B259',
|
quantity: 216,
|
inspectDate: '20250408',
|
inspector: '王義/合格',
|
date: '2025.08.22'
|
|
// batchNo: "25158878",
|
// productModel: "三代轮毂轴承单元\\G3-639",
|
// palletNo: "11236979",
|
// quantity: "107",
|
// workshop: "3003",
|
// code: "1200143912506070086",
|
// planNum:"10016456466565"
|
};
|
},
|
|
changeisSpareList(e) {
|
this.formData.isSpare = e;
|
},
|
|
async ProductionTask() {
|
// 防止重复提交
|
if (this.isSubmitting) {
|
uni.showToast({
|
icon: "none",
|
title: "正在提交中，请勿重复点击",
|
duration: 2000
|
});
|
return;
|
}
|
|
uni.showLoading({
|
mask: true,
|
title: "提交中..."
|
});
|
|
try {
|
// 表单验证
|
await this.$refs.form.validate();
|
|
this.isSubmitting = true;
|
|
// 发送报工请求
|
const response = await this.$http.post(this.url.approval, {
|
workOrderNumber: this.formData.workOrderNumber,
|
materialCode: this.formData.materialCode,
|
materialDescription: this.formData.materialDescription,
|
plannedQuantity: this.formData.plannedQuantity,
|
inspectionOrderNumber: this.formData.inspectionOrderNumber,
|
process: this.formData.process,
|
inspectionType: this.formData.inspectionType,
|
inspectionQuantity: this.formData.inspectionQuantity,
|
inspectionPlan: this.formData.inspectionPlan,
|
inspectionTime: this.formData.inspectionTime
|
});
|
|
if (response.data.success) {
|
uni.showToast({
|
icon: "success",
|
title: '提交成功',
|
duration: 2000
|
});
|
|
// 延迟跳转
|
await new Promise(resolve => setTimeout(resolve, 2000));
|
|
this.$Router.replaceAll({
|
name: 'qualityInspection'
|
});
|
} else {
|
uni.showModal({
|
title: "提交失败",
|
content: response.data.message || "服务器处理失败，请稍后重试",
|
confirmText: '确定',
|
showCancel: false,
|
icon: "none"
|
});
|
}
|
} catch (error) {
|
// 错误处理
|
if (error.errMsg) {
|
uni.showToast({
|
icon: "none",
|
title: error,
|
duration: 2000
|
});
|
} else {
|
console.error("请求失败:", error);
|
let errorMessage = "网络请求失败";
|
if (error.errMsg) {
|
if (error.errMsg.includes("timeout")) {
|
errorMessage = "请求超时，请检查网络连接";
|
} else if (error.errMsg.includes("fail")) {
|
errorMessage = "网络连接失败，请检查网络设置";
|
}
|
}
|
uni.showToast({
|
icon: "none",
|
title: errorMessage,
|
duration: 3000
|
});
|
}
|
} finally {
|
this.isSubmitting = false;
|
uni.hideLoading();
|
}
|
},
|
}
|
}
|
</script>
|
|
<style>
|
.is-hover {
|
color: rgba(255, 255, 255, 0.6);
|
background-color: #55aaff;
|
border-color: #55aaff;
|
}
|
|
.divider {
|
display: flex;
|
font-weight: bold;
|
align-items: center;
|
text-align: center;
|
color: #1E90FF;
|
font-size: 24rpx;
|
margin: 20px 0;
|
}
|
|
.divider::before,
|
.divider::after {
|
content: '';
|
flex: 1;
|
border-bottom: 1px solid gray;
|
margin: 0 16px;
|
}
|
|
.divider text {
|
white-space: nowrap;
|
}
|
|
.content {
|
margin-top: 5px;
|
}
|
|
.content scroll-view {
|
scrollIndicator: "none"
|
}
|
|
.popupView {
|
margin-top: 45px;
|
height: auto;
|
}
|
|
/* 骨架屏样式 */
|
.skeleton-container {
|
padding: 20rpx;
|
}
|
|
.skeleton-group {
|
margin-bottom: 40rpx;
|
}
|
|
.skeleton-divider {
|
height: 40rpx;
|
width: 300rpx;
|
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
|
background-size: 400% 100%;
|
border-radius: 4rpx;
|
animation: skeleton-loading 1.4s ease infinite;
|
margin-bottom: 30rpx;
|
}
|
|
.skeleton-item {
|
display: flex;
|
align-items: center;
|
margin-bottom: 30rpx;
|
}
|
|
.skeleton-label {
|
width: 160rpx;
|
height: 40rpx;
|
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
|
background-size: 400% 100%;
|
border-radius: 4rpx;
|
animation: skeleton-loading 1.4s ease infinite;
|
margin-right: 20rpx;
|
}
|
|
.skeleton-input {
|
flex: 1;
|
height: 60rpx;
|
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
|
background-size: 400% 100%;
|
border-radius: 8rpx;
|
animation: skeleton-loading 1.4s ease infinite;
|
}
|
|
.skeleton-select {
|
flex: 1;
|
height: 60rpx;
|
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
|
background-size: 400% 100%;
|
border-radius: 8rpx;
|
animation: skeleton-loading 1.4s ease infinite;
|
}
|
|
.skeleton-datetime {
|
flex: 1;
|
height: 60rpx;
|
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
|
background-size: 400% 100%;
|
border-radius: 8rpx;
|
animation: skeleton-loading 1.4s ease infinite;
|
}
|
|
.skeleton-button {
|
width: 90%;
|
height: 80rpx;
|
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
|
background-size: 400% 100%;
|
border-radius: 10rpx;
|
animation: skeleton-loading 1.4s ease infinite;
|
margin: 40rpx auto;
|
}
|
|
@keyframes skeleton-loading {
|
0% {
|
background-position: 100% 50%;
|
}
|
100% {
|
background-position: 0 50%;
|
}
|
}
|
</style>
|
