| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <div class="search_form"> |
| | | <div> |
| | | <span class="search_title">工单编号:</span> |
| | | <el-input v-model="searchForm.workOrderNo" |
| | | style="width: 240px" |
| | | placeholder="请输入" |
| | | @change="handleQuery" |
| | | clearable |
| | | prefix-icon="Search" /> |
| | | <el-button type="primary" |
| | | @click="handleQuery" |
| | | style="margin-left: 10px">搜索</el-button> |
| | | </div> |
| | | <div> |
| | | <div class="search-row"> |
| | | <div class="search-item"> |
| | | <span class="search_title">工单编号:</span> |
| | | <el-input v-model="searchForm.workOrderNo" |
| | | style="width: 240px" |
| | | placeholder="请输入" |
| | | @change="handleQuery" |
| | | clearable |
| | | prefix-icon="Search" /> |
| | | </div> |
| | | <div class="search-item"> |
| | | <el-button type="primary" |
| | | @click="handleQuery">搜索</el-button> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="table_list"> |
| | |
| | | </div> |
| | | </div> |
| | | </el-dialog> |
| | | <el-dialog v-model="editDialogVisible" |
| | | title="编辑时间" |
| | | width="500px"> |
| | | <el-form :model="editrow" |
| | | label-width="120px"> |
| | | <el-form-item label="计划开始时间"> |
| | | <el-date-picker v-model="editrow.planStartTime" |
| | | type="date" |
| | | placeholder="请选择" |
| | | value-format="YYYY-MM-DD" |
| | | style="width: 300px" /> |
| | | </el-form-item> |
| | | <el-form-item label="计划结束时间"> |
| | | <el-date-picker v-model="editrow.planEndTime" |
| | | type="date" |
| | | placeholder="请选择" |
| | | value-format="YYYY-MM-DD" |
| | | style="width: 300px" /> |
| | | </el-form-item> |
| | | <el-form-item label="实际开始时间"> |
| | | <el-date-picker v-model="editrow.actualStartTime" |
| | | type="date" |
| | | placeholder="请选择" |
| | | value-format="YYYY-MM-DD" |
| | | style="width: 300px" /> |
| | | </el-form-item> |
| | | <el-form-item label="实际结束时间"> |
| | | <el-date-picker v-model="editrow.actualEndTime" |
| | | type="date" |
| | | placeholder="请选择" |
| | | value-format="YYYY-MM-DD" |
| | | style="width: 300px" /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <template #footer> |
| | | <span class="dialog-footer"> |
| | | <el-button @click="editDialogVisible = false">取消</el-button> |
| | | <el-button type="primary" |
| | | @click="handleUpdate">确定</el-button> |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | | <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.productNo }}</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.status === 1 ? '待确认' : |
| | | transferCardRowData.status === 2 ? '待生产' : |
| | | transferCardRowData.status === 3 ? '生产中' : |
| | | transferCardRowData.status === 4 ? '已生产' : |
| | | transferCardRowData.status |
| | | }}</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"> </span> |
| | | </div> |
| | | <div class="info-item"> |
| | | <span class="info-label">计划数量</span> |
| | | <span class="info-value">{{ transferCardRowData.planQuantity }}</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 class="qr-tip" |
| | | style="margin-top: 10px; text-align: center;">流转卡二维码</div> --> |
| | | </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> |
| | | </div> |
| | | </el-dialog> |
| | | <el-dialog v-model="reportDialogVisible" |
| | | title="报工" |
| | | width="500px"> |
| | | <el-form :model="reportForm" |
| | | label-width="120px"> |
| | | <el-form-item label="待生产数量"> |
| | | <el-input v-model="reportForm.remainingQuantity" |
| | | readonly |
| | | style="width: 300px" /> |
| | | </el-form-item> |
| | | <el-form-item label="本次生产数量"> |
| | | <el-input v-model.number="reportForm.quantity" |
| | | type="number" |
| | | min="1" |
| | | style="width: 300px" |
| | | placeholder="请输入本次生产数量" /> |
| | | </el-form-item> |
| | | <el-form-item label="班组信息"> |
| | | <el-input v-model="reportForm.userName" |
| | | style="width: 300px" |
| | | readonly |
| | | placeholder="请输入班组信息" /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <template #footer> |
| | | <span class="dialog-footer"> |
| | | <el-button @click="reportDialogVisible = false">取消</el-button> |
| | | <el-button type="primary" |
| | | @click="handleReport">确定</el-button> |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | import { onMounted, ref } from "vue"; |
| | | import { ElMessageBox } from "element-plus"; |
| | | import dayjs from "dayjs"; |
| | | import { productWorkOrderPage } from "@/api/productionManagement/workOrder.js"; |
| | | import { |
| | | productWorkOrderPage, |
| | | updateProductWorkOrder, |
| | | addProductMain, |
| | | } from "@/api/productionManagement/workOrder.js"; |
| | | import { getUserProfile } from "@/api/system/user.js"; |
| | | import QRCode from "qrcode"; |
| | | import { getCurrentInstance, reactive, toRefs } from "vue"; |
| | | const { proxy } = getCurrentInstance(); |
| | |
| | | label: "实际结束时间", |
| | | prop: "actualEndTime", |
| | | }, |
| | | { |
| | | label: "操作", |
| | | width: "200", |
| | | align: "center", |
| | | dataType: "action", |
| | | operation: [ |
| | | { |
| | | name: "编辑", |
| | | clickFun: row => { |
| | | handleEdit(row); |
| | | }, |
| | | }, |
| | | { |
| | | name: "流转卡", |
| | | clickFun: row => { |
| | | showTransferCard(row); |
| | | }, |
| | | }, |
| | | { |
| | | name: "报工", |
| | | clickFun: row => { |
| | | showReportDialog(row); |
| | | }, |
| | | }, |
| | | ], |
| | | }, |
| | | ]); |
| | | const tableData = ref([]); |
| | | const tableLoading = ref(false); |
| | | const qrDialogVisible = ref(false); |
| | | const qrCodeUrl = ref(""); |
| | | const qrRowData = ref(null); |
| | | const editDialogVisible = ref(false); |
| | | const transferCardVisible = ref(false); |
| | | const transferCardData = ref([]); |
| | | const transferCardQrUrl = ref(""); |
| | | const transferCardRowData = ref(null); |
| | | const reportDialogVisible = ref(false); |
| | | const reportForm = reactive({ |
| | | remainingQuantity: 0, |
| | | quantity: 0, |
| | | userName: "", |
| | | }); |
| | | const currentReportRowData = ref(null); |
| | | const page = reactive({ |
| | | current: 1, |
| | | size: 100, |
| | |
| | | }, |
| | | }); |
| | | const { searchForm } = toRefs(data); |
| | | let editrow = ref(null); |
| | | |
| | | // 查询列表 |
| | | /** 搜索按钮操作 */ |
| | |
| | | document.body.removeChild(link); |
| | | }; |
| | | |
| | | const showTransferCard = async row => { |
| | | transferCardRowData.value = row; |
| | | const qrContent = proxy.javaApi + "/work-order?orderId=" + row.id; |
| | | transferCardQrUrl.value = await QRCode.toDataURL(qrContent); |
| | | transferCardVisible.value = true; |
| | | }; |
| | | |
| | | const printTransferCard = () => { |
| | | window.print(); |
| | | }; |
| | | |
| | | const handleEdit = row => { |
| | | editrow.value = JSON.parse(JSON.stringify(row)); |
| | | editDialogVisible.value = true; |
| | | }; |
| | | |
| | | const handleUpdate = () => { |
| | | updateProductWorkOrder(editrow.value) |
| | | .then(res => { |
| | | proxy.$modal.msgSuccess("提交成功"); |
| | | editDialogVisible.value = false; |
| | | getList(); |
| | | }) |
| | | .catch(() => { |
| | | ElMessageBox.alert("修改失败", "提示", { |
| | | confirmButtonText: "确定", |
| | | }); |
| | | }); |
| | | }; |
| | | |
| | | const showReportDialog = row => { |
| | | currentReportRowData.value = row; |
| | | reportForm.remainingQuantity = 1; |
| | | reportForm.quantity = 0; |
| | | reportForm.productProcessRouteItemId = row.productProcessRouteItemId; |
| | | // 获取当前登录用户信息 |
| | | |
| | | reportDialogVisible.value = true; |
| | | }; |
| | | |
| | | const handleReport = () => { |
| | | if (!reportForm.quantity || reportForm.quantity <= 0) { |
| | | ElMessageBox.alert("请输入有效的本次生产数量", "提示", { |
| | | confirmButtonText: "确定", |
| | | }); |
| | | return; |
| | | } |
| | | if (reportForm.quantity > reportForm.remainingQuantity) { |
| | | ElMessageBox.alert("本次生产数量不能超过待生产数量", "提示", { |
| | | confirmButtonText: "确定", |
| | | }); |
| | | return; |
| | | } |
| | | addProductMain(reportForm).then(res => { |
| | | if (res.code === 200) { |
| | | proxy.$modal.msgSuccess("报工成功"); |
| | | reportDialogVisible.value = false; |
| | | getList(); |
| | | } else { |
| | | ElMessageBox.alert(res.msg || "报工失败", "提示", { |
| | | confirmButtonText: "确定", |
| | | }); |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | getList(); |
| | | getUserProfile() |
| | | .then(res => { |
| | | if (res.code === 200) { |
| | | reportForm.userName = res.data.userName; |
| | | reportForm.userId = res.data.userId; |
| | | } |
| | | }) |
| | | .catch(err => { |
| | | console.error("获取用户信息失败", err); |
| | | }); |
| | | }); |
| | | </script> |
| | | |
| | | <style scoped lang="scss"></style> |
| | | <style scoped lang="scss"> |
| | | .search_form { |
| | | margin-bottom: 20px; |
| | | .search-row { |
| | | display: flex; |
| | | gap: 20px; |
| | | align-items: center; |
| | | .search-item { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 10px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .transfer-card-title { |
| | | font-size: 24px; |
| | | font-weight: bold; |
| | | text-align: center; |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | .transfer-card-container { |
| | | display: flex; |
| | | gap: 20px; |
| | | height: 350px; |
| | | .transfer-card-info { |
| | | flex: 1; |
| | | overflow: auto; |
| | | .info-group { |
| | | width: 50%; |
| | | float: left; |
| | | } |
| | | .info-item { |
| | | display: flex; |
| | | margin-bottom: 15px; |
| | | .info-label { |
| | | width: 120px; |
| | | font-weight: bold; |
| | | margin-right: 20px; |
| | | } |
| | | .info-value { |
| | | flex: 1; |
| | | } |
| | | } |
| | | } |
| | | .transfer-card-qr { |
| | | width: 240px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: flex-start; |
| | | } |
| | | } |
| | | </style> |
| | | |
| | | <style lang="scss"> |
| | | @media print { |
| | | @page { |
| | | size: landscape; |
| | | } |
| | | body * { |
| | | visibility: hidden; |
| | | } |
| | | .el-dialog__wrapper, |
| | | .el-dialog, |
| | | .el-dialog__body, |
| | | .transfer-card-title, |
| | | .transfer-card-container, |
| | | .transfer-card-container *, |
| | | .info-item, |
| | | .info-label, |
| | | .info-value { |
| | | visibility: visible; |
| | | } |
| | | .print-button-container { |
| | | visibility: hidden; |
| | | } |
| | | .el-dialog__wrapper { |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | right: 0; |
| | | margin: 0; |
| | | } |
| | | .el-dialog { |
| | | width: 100% !important; |
| | | max-width: 800px; |
| | | margin: 0 auto !important; |
| | | } |
| | | .el-dialog__header, |
| | | .el-dialog__footer { |
| | | display: none; |
| | | } |
| | | .el-dialog__body { |
| | | padding: 20px; |
| | | } |
| | | .transfer-card-container { |
| | | height: auto; |
| | | display: flex; |
| | | gap: 20px; |
| | | } |
| | | .transfer-card-info { |
| | | flex: 1; |
| | | .info-group { |
| | | width: 100%; |
| | | float: none; |
| | | margin-bottom: 20px; |
| | | } |
| | | .info-item { |
| | | display: flex; |
| | | margin-bottom: 10px; |
| | | .info-label { |
| | | width: 100px; |
| | | font-weight: bold; |
| | | margin-right: 15px; |
| | | white-space: nowrap; |
| | | } |
| | | .info-value { |
| | | flex: 1; |
| | | word-break: break-word; |
| | | } |
| | | } |
| | | } |
| | | .transfer-card-qr { |
| | | width: 160px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: flex-start; |
| | | } |
| | | .qr-container img { |
| | | width: 140px !important; |
| | | height: 140px !important; |
| | | } |
| | | } |
| | | </style> |