| | |
| | | </template> |
| | | </PIMTable> |
| | | </div> |
| | | <!-- 流转卡弹窗 --> |
| | | <!-- 二维码弹窗 --> |
| | | <el-dialog v-model="transferCardVisible" |
| | | title="流转卡" |
| | | width="1000px"> |
| | | <div class="transfer-card-title">工单流转卡</div> |
| | | <div class="transfer-card-container"> |
| | | <div class="transfer-card-info"> |
| | | <div class="info-group"> |
| | | <div class="info-item"> |
| | | <span class="info-label">工单编号</span> |
| | | <span class="info-value">{{ transferCardRowData.workOrderNo }}</span> |
| | | </div> |
| | | <div class="info-item"> |
| | | <span class="info-label">产品名称</span> |
| | | <span class="info-value">{{ transferCardRowData.productName }}</span> |
| | | </div> |
| | | <div class="info-item"> |
| | | <span class="info-label">规格型号</span> |
| | | <span class="info-value">{{ transferCardRowData.model }}</span> |
| | | </div> |
| | | <div class="info-item"> |
| | | <span class="info-label">计划开始时间</span> |
| | | <span class="info-value">{{ transferCardRowData.planStartTime }}</span> |
| | | </div> |
| | | <div class="info-item"> |
| | | <span class="info-label">计划结束时间</span> |
| | | <span class="info-value">{{ transferCardRowData.planEndTime }}</span> |
| | | </div> |
| | | <div class="info-item"> |
| | | <span class="info-label">备注</span> |
| | | <span class="info-value">{{ transferCardRowData.remark }}</span> |
| | | </div> |
| | | </div> |
| | | <div class="info-group"> |
| | | <div class="info-item"> |
| | | <span class="info-label">需求数量</span> |
| | | <span class="info-value">{{ transferCardRowData.planQuantity }}</span> |
| | | </div> |
| | | <div class="info-item"> |
| | | <span class="info-value">{{ transferCardRowData.completeQuantity }}</span> |
| | | </div> |
| | | <div class="info-item"> |
| | | <span class="info-label">良品数量</span> |
| | | <span class="info-value">0</span> |
| | | </div> |
| | | <div class="info-item"> |
| | | <span class="info-label">不良品数</span> |
| | | <span class="info-value">0</span> |
| | | </div> |
| | | <div class="info-item"> |
| | | <span class="info-label">实际开始时间</span> |
| | | <span class="info-value">{{ transferCardRowData.actualStartTime }}</span> |
| | | </div> |
| | | <div class="info-item"> |
| | | <span class="info-label">实际结束时间</span> |
| | | <span class="info-value">{{ transferCardRowData.actualEndTime }}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="transfer-card-qr"> |
| | | <div class="qr-container"> |
| | | <img :src="transferCardQrUrl" |
| | | alt="流转卡二维码" |
| | | style="width: 200px; height: 200px;" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="print-button-container" |
| | | style=" text-align: center; |
| | | margin-bottom: 40px;"> |
| | | <el-button type="primary" |
| | | style="margin-top: 20px;" |
| | | @click="printTransferCard">打印流转卡</el-button> |
| | | title="二维码" |
| | | width="420px" |
| | | align-center> |
| | | <div class="qr-only-dialog"> |
| | | <canvas ref="transferCardQrCanvas" |
| | | width="280" |
| | | height="280" |
| | | class="qr-canvas" /> |
| | | </div> |
| | | </el-dialog> |
| | | <!-- 报工弹窗 --> |
| | |
| | | style="width: 300px" |
| | | placeholder="请输入报废数量" |
| | | @input="handleScrapQtyInput" /> |
| | | </el-form-item> |
| | | <el-form-item label="报工类型" |
| | | prop="reportType"> |
| | | <el-select v-model="reportForm.reportType" |
| | | style="width: 300px" |
| | | placeholder="请选择报工类型"> |
| | | <el-option label="合格" :value="0" /> |
| | | <el-option label="轻微返工" :value="1" /> |
| | | <el-option label="严重返工" :value="2" /> |
| | | <el-option label="报废" :value="3" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="班组信息"> |
| | | <el-select v-model="reportForm.userId" |
| | |
| | | }, |
| | | { |
| | | label: "操作", |
| | | width: "260", |
| | | width: "320", |
| | | align: "center", |
| | | dataType: "action", |
| | | fixed: "right", |
| | |
| | | name: "流转卡", |
| | | clickFun: row => { |
| | | downloadAndPrintWorkOrder(row); |
| | | }, |
| | | }, |
| | | { |
| | | name: "二维码", |
| | | clickFun: row => { |
| | | showTransferCard(row); |
| | | }, |
| | | }, |
| | | { |
| | |
| | | const tableLoading = ref(false); |
| | | const transferCardVisible = ref(false); |
| | | const transferCardData = ref([]); |
| | | const transferCardQrUrl = ref(""); |
| | | const transferCardQrCanvas = ref(null); |
| | | const transferCardRowData = ref(null); |
| | | const reportDialogVisible = ref(false); |
| | | const fileDialogVisible = ref(false); |
| | |
| | | planQuantity: 0, |
| | | quantity: null, |
| | | scrapQty: null, |
| | | reportType: 0, |
| | | userName: "", |
| | | workOrderId: "", |
| | | reportWork: "", |
| | |
| | | |
| | | const showTransferCard = async row => { |
| | | transferCardRowData.value = row; |
| | | const qrContent = String(row.id); |
| | | |
| | | transferCardQrUrl.value = await QRCode.toDataURL(qrContent); |
| | | transferCardVisible.value = true; |
| | | await nextTick(); |
| | | const qrContent = String(row.id); |
| | | if (transferCardQrCanvas.value) { |
| | | const ctx = transferCardQrCanvas.value.getContext("2d"); |
| | | ctx?.clearRect(0, 0, 280, 280); |
| | | await QRCode.toCanvas(transferCardQrCanvas.value, qrContent, { |
| | | width: 280, |
| | | margin: 1, |
| | | errorCorrectionLevel: "M", |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | const printTransferCard = () => { |
| | | window.print(); |
| | | }; |
| | | const currentWorkOrderRow = ref(null); |
| | | |
| | | const openWorkOrderFiles = row => { |
| | |
| | | reportForm.planQuantity = remainingQuantity; |
| | | reportForm.quantity = |
| | | row.quantity !== undefined && row.quantity !== null ? row.quantity : null; |
| | | reportForm.reportType = row.reportType ?? 0; |
| | | reportForm.productProcessRouteItemId = row.productProcessRouteItemId; |
| | | reportForm.workOrderId = row.id; |
| | | reportForm.reportWork = row.reportWork; |
| | |
| | | const submitParams = { |
| | | quantity: quantity, |
| | | scrapQty: isNaN(scrapQty) ? 0 : scrapQty, |
| | | reportType: reportForm.reportType, |
| | | userId: reportForm.userId, |
| | | userName: reportForm.userName, |
| | | productionOperationTaskId: reportForm.workOrderId, |
| | |
| | | text-align: center; |
| | | margin-top: 20px; |
| | | } |
| | | .qr-only-dialog { |
| | | padding: 12px 0 28px; |
| | | } |
| | | .qr-canvas { |
| | | display: block; |
| | | margin: 0 auto; |
| | | } |
| | | .param-grid { |
| | | margin-top: 10px; |
| | | border-top: 1px solid #ebe9f3; |