| | |
| | | :tableData="tableData" |
| | | :page="page" |
| | | :tableLoading="tableLoading" |
| | | @pagination="pagination"></PIMTable> |
| | | @pagination="pagination"> |
| | | <template #completionStatus="{ row }"> |
| | | <el-progress :percentage="toProgressPercentage(row?.completionStatus)" |
| | | :color="progressColor(toProgressPercentage(row?.completionStatus))" |
| | | :status="toProgressPercentage(row?.completionStatus) >= 100 ? 'success' : ''" /> |
| | | </template> |
| | | </PIMTable> |
| | | </div> |
| | | <el-dialog v-model="editDialogVisible" |
| | | title="编辑时间" |
| | |
| | | <span class="info-label">产品规格</span> |
| | | <span class="info-value">{{ transferCardRowData.model }}</span> |
| | | </div> |
| | | <div class="info-item"> |
| | | <!-- <div class="info-item"> |
| | | <span class="info-label">工单状态</span> |
| | | <span class="info-value">{{ |
| | | transferCardRowData.status === 1 ? '待确认' : |
| | |
| | | transferCardRowData.status === 4 ? '已生产' : |
| | | transferCardRowData.status |
| | | }}</span> |
| | | </div> |
| | | </div> --> |
| | | <div class="info-item"> |
| | | <span class="info-label">计划开始时间</span> |
| | | <span class="info-value">{{ transferCardRowData.planStartTime }}</span> |
| | |
| | | </div> |
| | | <div class="info-group"> |
| | | <div class="info-item"> |
| | | <span class="info-label"> </span> |
| | | <span class="info-value"> </span> |
| | | <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">{{ transferCardRowData.planQuantity }}</span> |
| | | <span class="info-label">完成数量</span> |
| | | <span class="info-value">{{ transferCardRowData.completeQuantity }}</span> |
| | | </div> |
| | | <div class="info-item"> |
| | | <span class="info-label">良品数量</span> |
| | |
| | | <el-dialog v-model="reportDialogVisible" |
| | | title="报工" |
| | | width="500px"> |
| | | <el-form :model="reportForm" |
| | | <el-form ref="reportFormRef" |
| | | :model="reportForm" |
| | | :rules="reportFormRules" |
| | | label-width="120px"> |
| | | <el-form-item label="待生产数量"> |
| | | <el-input v-model="reportForm.planQuantity" |
| | | readonly |
| | | style="width: 300px" /> |
| | | </el-form-item> |
| | | <el-form-item label="本次生产数量"> |
| | | <el-form-item label="本次生产数量" |
| | | prop="quantity"> |
| | | <el-input v-model.number="reportForm.quantity" |
| | | type="number" |
| | | min="1" |
| | | step="1" |
| | | style="width: 300px" |
| | | placeholder="请输入本次生产数量" /> |
| | | placeholder="请输入本次生产数量" |
| | | @input="handleQuantityInput" /> |
| | | </el-form-item> |
| | | <el-form-item label="报废数量" |
| | | prop="scrapQty"> |
| | | <el-input v-model.number="reportForm.scrapQty" |
| | | type="number" |
| | | min="0" |
| | | step="1" |
| | | style="width: 300px" |
| | | placeholder="请输入报废数量" |
| | | @input="handleScrapQtyInput" /> |
| | | </el-form-item> |
| | | <el-form-item label="班组信息"> |
| | | <el-input v-model="reportForm.userName" |
| | | style="width: 300px" |
| | | readonly |
| | | placeholder="请输入班组信息" /> |
| | | <el-select v-model="reportForm.userId" |
| | | style="width: 300px" |
| | | placeholder="请选择班组信息" |
| | | clearable |
| | | filterable |
| | | @change="handleUserChange"> |
| | | <el-option v-for="user in userOptions" |
| | | :key="user.userId" |
| | | :label="user.nickName" |
| | | :value="user.userId" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-form> |
| | | <template #footer> |
| | |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | | <FilesDia ref="workOrderFilesRef" /> |
| | | <el-dialog v-model="allocationDialogVisible" |
| | | title="工单分配" |
| | | width="500px"> |
| | | <el-form :model="allocationForm" |
| | | :rules="allocationFormRules" |
| | | ref="allocationFormRef" |
| | | label-width="120px"> |
| | | <el-form-item label="工单编号"> |
| | | <el-input v-model="allocationForm.workOrderNo" |
| | | readonly |
| | | disabled |
| | | style="width: 300px" /> |
| | | </el-form-item> |
| | | <el-form-item label="产品名称"> |
| | | <el-input v-model="allocationForm.productName" |
| | | readonly |
| | | disabled |
| | | style="width: 300px" /> |
| | | </el-form-item> |
| | | <el-form-item label="分配人员" prop="userId"> |
| | | <el-select v-model="allocationForm.userId" |
| | | style="width: 300px" |
| | | placeholder="请选择班组信息" |
| | | clearable |
| | | filterable |
| | | @change="handleAllocationUserChange"> |
| | | <el-option v-for="user in userOptions" |
| | | :key="user.userId" |
| | | :label="user.nickName" |
| | | :value="user.userId" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-form> |
| | | <template #footer> |
| | | <span class="dialog-footer"> |
| | | <el-button type="primary" |
| | | @click="handleAllocationSubmit">确定</el-button> |
| | | <el-button @click="allocationDialogVisible = false">取消</el-button> |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { onMounted, ref } from "vue"; |
| | | import { onMounted, ref, nextTick } from "vue"; |
| | | import { ElMessageBox } from "element-plus"; |
| | | import dayjs from "dayjs"; |
| | | import { |
| | | productWorkOrderPage, |
| | | updateProductWorkOrder, |
| | | addProductMain, |
| | | downProductWorkOrder, |
| | | } from "@/api/productionManagement/workOrder.js"; |
| | | import { getUserProfile } from "@/api/system/user.js"; |
| | | import { getUserProfile, userListNoPageByTenantId } from "@/api/system/user.js"; |
| | | import QRCode from "qrcode"; |
| | | import { getCurrentInstance, reactive, toRefs } from "vue"; |
| | | import FilesDia from "./components/filesDia.vue"; |
| | | const { proxy } = getCurrentInstance(); |
| | | |
| | | const allocationFormRef = ref(null); |
| | | |
| | | const tableColumn = ref([ |
| | | { |
| | | label: "工单类型", |
| | | prop: "workOrderType", |
| | | width: "80", |
| | | }, |
| | | { |
| | | label: "工单编号", |
| | | prop: "workOrderNo", |
| | |
| | | prop: "processName", |
| | | }, |
| | | { |
| | | label: "待生产数量", |
| | | label: "需求数量", |
| | | prop: "planQuantity", |
| | | width: "140", |
| | | }, |
| | | { |
| | | label: "计划生产数量", |
| | | prop: "quantity", |
| | | label: "完成数量", |
| | | prop: "completeQuantity", |
| | | width: "140", |
| | | }, |
| | | { |
| | | label: "完成进度", |
| | | prop: "completionStatus", |
| | | dataType: "slot", |
| | | slot: "completionStatus", |
| | | width: "140", |
| | | }, |
| | | { |
| | |
| | | { |
| | | name: "流转卡", |
| | | clickFun: row => { |
| | | showTransferCard(row); |
| | | downloadAndPrintWorkOrder(row); |
| | | }, |
| | | }, |
| | | { |
| | | name: "附件", |
| | | clickFun: row => { |
| | | openWorkOrderFiles(row); |
| | | }, |
| | | }, |
| | | { |
| | |
| | | clickFun: row => { |
| | | showReportDialog(row); |
| | | }, |
| | | disabled: row => row.planQuantity <= 0 || !canReportByUser(row), |
| | | }, |
| | | { |
| | | name: "分配", |
| | | clickFun: row => { |
| | | allocationDialog(row); |
| | | }, |
| | | disabled: row => row.planQuantity <= 0, |
| | | }, |
| | | ], |
| | | }, |
| | | ]); |
| | | |
| | | // 计算属性:待生产数量 = 计划 - 已完成 |
| | | const waitProduceQuantity = computed(() => { |
| | | const plan = Number(currentReportRowData.value?.planQuantity) || 0; |
| | | const complete = Number(currentReportRowData.value?.completeQuantity) || 0; |
| | | return plan - complete; |
| | | }); |
| | | const tableData = ref([]); |
| | | const tableLoading = ref(false); |
| | | const qrCodeUrl = ref(""); |
| | |
| | | const transferCardQrUrl = ref(""); |
| | | const transferCardRowData = ref(null); |
| | | const reportDialogVisible = ref(false); |
| | | const allocationDialogVisible = ref(false); |
| | | const userOptions = ref([]); |
| | | const reportForm = reactive({ |
| | | planQuantity: 0, |
| | | quantity: 0, |
| | |
| | | userId: "", |
| | | productMainId: null, |
| | | }); |
| | | const allocationForm = reactive({ |
| | | workOrderId: "", |
| | | workOrderNo: "", |
| | | productName: "", |
| | | currentReportWork: "", |
| | | nickName: "", |
| | | userId: "", |
| | | }); |
| | | const currentAllocationRowData = ref(null); |
| | | const currentReportRowData = ref(null); |
| | | const currentUserId = ref(""); |
| | | const currentUserName = ref(""); |
| | | const page = reactive({ |
| | | current: 1, |
| | | size: 100, |
| | |
| | | }, |
| | | }); |
| | | const { searchForm } = toRefs(data); |
| | | const toProgressPercentage = val => { |
| | | const n = Number(val); |
| | | if (!Number.isFinite(n)) return 0; |
| | | if (n <= 0) return 0; |
| | | if (n >= 100) return 100; |
| | | return Math.round(n); |
| | | }; |
| | | const progressColor = percentage => { |
| | | const p = toProgressPercentage(percentage); |
| | | if (p < 30) return "#f56c6c"; |
| | | if (p < 50) return "#e6a23c"; |
| | | if (p < 80) return "#409eff"; |
| | | return "#67c23a"; |
| | | }; |
| | | let editrow = ref(null); |
| | | |
| | | const allocationFormRules = { |
| | | userId: [ |
| | | { required: true, message: '请选择分配人员', trigger: 'change' } |
| | | ] |
| | | } |
| | | |
| | | // 查询列表 |
| | | /** 搜索按钮操作 */ |
| | |
| | | }); |
| | | }; |
| | | |
| | | // 下载并打印工单流转卡(文件流) |
| | | const downloadAndPrintWorkOrder = async row => { |
| | | if (!row || !row.id) { |
| | | proxy.$modal.msgError("缺少工单ID,无法下载流转卡"); |
| | | return; |
| | | } |
| | | const fileName = row.workOrderNo |
| | | ? `工单流转卡_${row.workOrderNo}.xlsx` |
| | | : "工单流转卡.xlsx"; |
| | | try { |
| | | // 调用接口,以 responseType: 'blob' 获取文件流 |
| | | const blob = await downProductWorkOrder(row.id); |
| | | |
| | | if (!blob) { |
| | | proxy.$modal.msgError("未获取到流转卡文件"); |
| | | return; |
| | | } |
| | | |
| | | // 创建 Blob URL |
| | | const fileBlob = |
| | | blob instanceof Blob |
| | | ? blob |
| | | : new Blob([blob], { type: blob.type || "application/octet-stream" }); |
| | | const url = window.URL.createObjectURL(fileBlob); |
| | | |
| | | // 创建隐藏 iframe,用于触发浏览器打印 |
| | | const iframe = document.createElement("iframe"); |
| | | iframe.style.position = "fixed"; |
| | | iframe.style.right = "0"; |
| | | iframe.style.bottom = "0"; |
| | | iframe.style.width = "0"; |
| | | iframe.style.height = "0"; |
| | | iframe.style.border = "0"; |
| | | iframe.src = url; |
| | | document.body.appendChild(iframe); |
| | | |
| | | iframe.onload = () => { |
| | | try { |
| | | iframe.contentWindow?.focus(); |
| | | iframe.contentWindow?.print(); |
| | | } catch (e) { |
| | | console.error("自动调用打印失败", e); |
| | | // 退而求其次,打开新窗口由用户手动打印 |
| | | window.open(url); |
| | | } |
| | | }; |
| | | } catch (e) { |
| | | console.error("下载工单流转卡失败", e); |
| | | proxy.$modal.msgError("下载工单流转卡失败"); |
| | | } |
| | | }; |
| | | |
| | | const showTransferCard = async row => { |
| | | transferCardRowData.value = row; |
| | | const qrContent = |
| | | proxy.javaApi + "/work-order?orderRow=" + JSON.stringify(row); |
| | | console.log(qrContent, "qrContent"); |
| | | const qrContent = String(row.id); |
| | | |
| | | transferCardQrUrl.value = await QRCode.toDataURL(qrContent); |
| | | transferCardVisible.value = true; |
| | |
| | | }); |
| | | }; |
| | | |
| | | // 分配功能 |
| | | const allocationDialog = row => { |
| | | currentAllocationRowData.value = row; |
| | | allocationForm.workOrderId = row.id; |
| | | allocationForm.workOrderNo = row.workOrderNo || ""; |
| | | allocationForm.productName = row.productName || ""; |
| | | allocationForm.currentReportWork = row.reportWork || ""; |
| | | allocationForm.nickName =row.nickName || ""; |
| | | allocationForm.userId =row.userId || ""; |
| | | allocationDialogVisible.value = true; |
| | | }; |
| | | |
| | | const canReportByUser = row => { |
| | | if (!row || !row.userId) { |
| | | return true; |
| | | } |
| | | if (!currentUserId.value) { |
| | | return false; |
| | | } |
| | | return String(row.userId) === String(currentUserId.value); |
| | | }; |
| | | |
| | | const handleAllocationUserChange = userId => { |
| | | if (!userId) { |
| | | allocationForm.nickName = ""; |
| | | return; |
| | | } |
| | | const selectedUser = userOptions.value.find(user => user.userId === userId); |
| | | allocationForm.nickName = selectedUser ? selectedUser.nickName : ""; |
| | | }; |
| | | |
| | | const handleAllocationSubmit = async () => { |
| | | if (!allocationFormRef.value) { |
| | | return; |
| | | } |
| | | try { |
| | | await allocationFormRef.value.validate(); |
| | | } catch { |
| | | return; |
| | | } |
| | | if (!currentAllocationRowData.value) { |
| | | return; |
| | | } |
| | | const payload = { |
| | | ...currentAllocationRowData.value, |
| | | id: allocationForm.workOrderId, |
| | | userId: allocationForm.userId, |
| | | nickName: allocationForm.nickName, |
| | | }; |
| | | try { |
| | | await updateProductWorkOrder(payload); |
| | | proxy.$modal.msgSuccess("分配成功"); |
| | | allocationDialogVisible.value = false; |
| | | getList(); |
| | | } catch (err) { |
| | | const apiMsg = |
| | | err?.response?.data?.msg || |
| | | err?.msg || |
| | | (err?.userId && Array.isArray(err.userId) |
| | | ? (err.userId[0]?.message || err.userId[0] || "") |
| | | : ""); |
| | | ElMessageBox.alert(apiMsg || "分配失败", "提示", { |
| | | confirmButtonText: "确定", |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | |
| | | const showReportDialog = row => { |
| | | if (!canReportByUser(row)) { |
| | | ElMessageBox.alert("该工单已分配给其他班组,当前用户无报工权限", "提示", { |
| | | confirmButtonText: "确定", |
| | | }); |
| | | return; |
| | | } |
| | | currentReportRowData.value = row; |
| | | reportForm.planQuantity = row.planQuantity; |
| | | reportForm.quantity = row.quantity; |
| | | reportForm.planQuantity = row.planQuantity - row.completeQuantity; |
| | | reportForm.quantity = |
| | | row.quantity !== undefined && row.quantity !== null ? row.quantity : null; |
| | | reportForm.productProcessRouteItemId = row.productProcessRouteItemId; |
| | | reportForm.workOrderId = row.id; |
| | | reportForm.reportWork = row.reportWork; |
| | | reportForm.productMainId = row.productMainId; |
| | | // 获取当前登录用户信息 |
| | | |
| | | reportDialogVisible.value = true; |
| | | }; |
| | | |
| | | const handleReport = () => { |
| | | if (reportForm.planQuantity <= 0) { |
| | | ElMessageBox.alert("待生产数量为0,无法报工", "提示", { |
| | | confirmButtonText: "确定", |
| | | }); |
| | | return; |
| | | } |
| | | if (!reportForm.quantity || reportForm.quantity <= 0) { |
| | | ElMessageBox.alert("请输入有效的本次生产数量", "提示", { |
| | | confirmButtonText: "确定", |
| | | }); |
| | | return; |
| | | } |
| | | if (reportForm.quantity > reportForm.planQuantity) { |
| | | ElMessageBox.alert("本次生产数量不能超过待生产数量", "提示", { |
| | | confirmButtonText: "确定", |
| | | }); |
| | | return; |
| | | } |
| | | // console.log(reportForm); |
| | | addProductMain(reportForm).then(res => { |
| | | if (res.code === 200) { |
| | | proxy.$modal.msgSuccess("报工成功"); |
| | | reportDialogVisible.value = false; |
| | | getList(); |
| | | } else { |
| | | ElMessageBox.alert(res.msg || "报工失败", "提示", { |
| | | confirmButtonText: "确定", |
| | | }); |
| | | } |
| | | reportForm.scrapQty = |
| | | row.scrapQty !== undefined && row.scrapQty !== null ? row.scrapQty : null; |
| | | nextTick(() => { |
| | | reportFormRef.value?.clearValidate(); |
| | | }); |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | getList(); |
| | | // 获取当前登录用户信息,设置为默认选中 |
| | | getUserProfile() |
| | | .then(res => { |
| | | if (res.code === 200) { |
| | | reportForm.userName = res.data.userName; |
| | | reportForm.userId = res.data.userId; |
| | | reportForm.userName = res.data.nickName; |
| | | } |
| | | }) |
| | | .catch(err => { |
| | | console.error("获取用户信息失败", err); |
| | | }); |
| | | |
| | | reportDialogVisible.value = true; |
| | | }; |
| | | |
| | | const openWorkOrderFiles = row => { |
| | | workOrderFilesRef.value?.openDialog(row); |
| | | }; |
| | | |
| | | const handleReport = () => { |
| | | reportFormRef.value?.validate(valid => { |
| | | if (!valid) { |
| | | return false; |
| | | } |
| | | |
| | | if (reportForm.planQuantity <= 0) { |
| | | ElMessageBox.alert("待生产数量为0,无法报工", "提示", { |
| | | confirmButtonText: "确定", |
| | | }); |
| | | return; |
| | | } |
| | | |
| | | // 验证本次生产数量 |
| | | if ( |
| | | reportForm.quantity === null || |
| | | reportForm.quantity === undefined || |
| | | reportForm.quantity === "" |
| | | ) { |
| | | ElMessageBox.alert("请输入本次生产数量", "提示", { |
| | | confirmButtonText: "确定", |
| | | }); |
| | | return; |
| | | } |
| | | |
| | | const quantity = Number(reportForm.quantity); |
| | | const scrapQty = |
| | | reportForm.scrapQty === null || |
| | | reportForm.scrapQty === undefined || |
| | | reportForm.scrapQty === "" |
| | | ? 0 |
| | | : Number(reportForm.scrapQty); |
| | | |
| | | // 本次生产数量 |
| | | if (isNaN(quantity) || !Number.isInteger(quantity) || quantity < 1) { |
| | | ElMessageBox.alert("本次生产数量必须大于等于1", "提示", { |
| | | confirmButtonText: "确定", |
| | | }); |
| | | return; |
| | | } |
| | | |
| | | // 报废数量必须是整数且大于等于0 |
| | | if (isNaN(scrapQty) || !Number.isInteger(scrapQty) || scrapQty < 0) { |
| | | ElMessageBox.alert("报废数量必须大于等于0", "提示", { |
| | | confirmButtonText: "确定", |
| | | }); |
| | | return; |
| | | } |
| | | |
| | | if (quantity > reportForm.planQuantity) { |
| | | ElMessageBox.alert("本次生产数量不能超过待生产数量", "提示", { |
| | | confirmButtonText: "确定", |
| | | }); |
| | | return; |
| | | } |
| | | |
| | | const submitData = { |
| | | ...reportForm, |
| | | quantity: quantity, |
| | | scrapQty: scrapQty, |
| | | }; |
| | | |
| | | // console.log(submitData); |
| | | addProductMain(submitData).then(res => { |
| | | if (res.code === 200) { |
| | | proxy.$modal.msgSuccess("报工成功"); |
| | | reportDialogVisible.value = false; |
| | | getList(); |
| | | } else { |
| | | ElMessageBox.alert(res.msg || "报工失败", "提示", { |
| | | confirmButtonText: "确定", |
| | | }); |
| | | } |
| | | }); |
| | | }); |
| | | }; |
| | | |
| | | // 获取用户列表 |
| | | const getUserList = () => { |
| | | userListNoPageByTenantId() |
| | | .then(res => { |
| | | if (res.code === 200) { |
| | | userOptions.value = res.data || []; |
| | | } |
| | | }) |
| | | .catch(err => { |
| | | console.error("获取用户列表失败", err); |
| | | }); |
| | | }; |
| | | |
| | | // 用户选择变化时更新 userName |
| | | const handleUserChange = userId => { |
| | | if (userId) { |
| | | const selectedUser = userOptions.value.find(user => user.userId === userId); |
| | | if (selectedUser) { |
| | | reportForm.userName = selectedUser.nickName; |
| | | } |
| | | } else { |
| | | reportForm.userName = ""; |
| | | } |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | getList(); |
| | | getUserList(); |
| | | }); |
| | | </script> |
| | | |