增加生产订单详情-生产记录页面

huminmin

8 小时以前 a215940f3d3f52a1404317c3bb88da2ff12c5fc0

 src/views/productionManagement/productionOrder/Detail/index.vue

@@ -50,7 +50,13 @@
                    }"
                    @click="selectProcess(idx)"
                  >
                    <span v-if="idx === active" class="step-current-badge">生产中</span>
                    <span
                      v-if="p?.status"
                      class="step-status-badge"
                      :class="`step-status-badge-${p.status}`"
                    >
                      {{ statusTagText(p.status) }}
                    </span>
                    <div v-if="p.status !== 'wait'" class="current-progress">
                      <div class="current-progress-head">
                        <span class="current-progress-title">工序进度</span>
@@ -114,13 +120,13 @@
            <div v-else class="right-content">
              <el-table :data="reports" border height="420" v-loading="reportLoading">
                <el-table-column label="序号" type="index" width="60" align="center" />
                <el-table-column label="报工单号" prop="reportNo" min-width="140" show-overflow-tooltip />
                <el-table-column label="报工人员" prop="reportUser" min-width="120" show-overflow-tooltip />
                <el-table-column label="报工时间" prop="reportTime" min-width="160" show-overflow-tooltip />
                <el-table-column label="产出数量" prop="outputQty" min-width="110" />
                <el-table-column label="报工单号" prop="productNo" min-width="140" show-overflow-tooltip />
                <el-table-column label="报工人员" prop="nickName" min-width="120" show-overflow-tooltip />
                <el-table-column label="报工时间" prop="createTime" min-width="160" show-overflow-tooltip />
                <el-table-column label="产出数量" prop="quantity" min-width="110" />
                <el-table-column label="合格数量" prop="qualifiedQty" min-width="110" />
                <el-table-column label="不良数量" prop="badQty" min-width="110" />
                <el-table-column label="不合格处理" prop="remark" min-width="160" show-overflow-tooltip />
                <el-table-column label="不良数量" prop="scrapQty" min-width="110" />
                <el-table-column label="不合格处理" prop="dealResult" min-width="160" show-overflow-tooltip />
                <el-table-column label="操作" width="150" fixed="right">
                  <template #default="{ row }">
                    <el-button type="primary" link @click="viewReportRecord(row)">
@@ -134,21 +140,45 @@
        </div>
      </div>
    </el-card>
    <el-dialog
      v-model="reportRecordDialogVisible"
      title="报工生产记录"
      width="680px"
      destroy-on-close
    >
      <div class="report-record-placeholder">
        <div>报工单号：{{ currentReportRow?.reportNo || "-" }}</div>
        <div>工序：{{ selectedProcess?.processName || "-" }}</div>
        <div class="placeholder-tip">弹框内容待定（后续补充详细生产记录）。</div>
      </div>
      <template #footer>
        <el-button @click="reportRecordDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
<!--    <el-dialog-->
<!--      v-model="reportRecordDialogVisible"-->
<!--      title="报工生产记录"-->
<!--      width="680px"-->
<!--      destroy-on-close-->
<!--    >-->
<!--      <div class="report-record-placeholder">-->
<!--        <div>报工单号：{{ currentReportRow?.reportNo || "-" }}</div>-->
<!--        <div>工序：{{ selectedProcess?.processName || "-" }}</div>-->
<!--        <div class="placeholder-tip">弹框内容待定（后续补充详细生产记录）。</div>-->
<!--      </div>-->
<!--      <template #footer>-->
<!--        <el-button @click="reportRecordDialogVisible = false">关闭</el-button>-->
<!--      </template>-->
<!--    </el-dialog>-->

    <CopperPrintingForm
        v-if="copperPrintingFormVisible"
        v-model:isShow="copperPrintingFormVisible"
        :isEdit="false"
        :row="currentReportRow"
        @refreshData="fetchReportsForProcess(selectedProcess.value)"/>
    <VoltageSortingForm
        v-if="voltageSortingFormVisible"
        v-model:isShow="voltageSortingFormVisible"
        :isEdit="false"
        :row="currentReportRow"
        @refreshData="fetchReportsForProcess(selectedProcess.value)"/>
    <GranulationForm
        v-if="granulationFormVisible"
        v-model:isShow="granulationFormVisible"
        :isEdit="false"
        :row="currentReportRow"
        @refreshData="fetchReportsForProcess(selectedProcess.value)"/>
    <Detail
        v-if="reportRecordDialogVisible"
        v-model:isShow="reportRecordDialogVisible"
        @refreshData="fetchReportsForProcess(selectedProcess.value)"
        :row="currentReportRow"/>
  </div>
</template>

@@ -157,7 +187,10 @@
import { useRoute } from "vue-router";
import { getByProductOrderId } from "@/api/productionManagement/workOrder.js";
import { getByProductWorkOrderId } from "@/api/productionManagement/productionProductMain.js";

const VoltageSortingForm = defineAsyncComponent(() => import("@/views/productionManagement/workOrder/components/VoltageSortingForm.vue"));
const CopperPrintingForm = defineAsyncComponent(() => import("@/views/productionManagement/workOrder/components/CopperPrintingForm.vue"));
const GranulationForm = defineAsyncComponent(() => import("@/views/productionManagement/workOrder/components/GranulationForm.vue"));
const Detail = defineAsyncComponent(() => import("@/views/productionManagement/productionReporting/components/Detail.vue"));
const route = useRoute();

const header = computed(() => ({
@@ -171,16 +204,19 @@
// 工序数据（接口替换）
const processes = ref([]);

const copperPrintingFormVisible = ref(false);
const voltageSortingFormVisible = ref(false);
const granulationFormVisible = ref(false);

const normalizeStatus = (statusText, completionStatus, inputQty, outputQty) => {
  const s = statusText === null || statusText === undefined ? "" : String(statusText).trim();
  const lower = s.toLowerCase();

  // 常见中文状态兜底：进行中/已完成/等待
  if (s.includes("进行") || lower.includes("process") || lower.includes("doing") || lower.includes("running")) return "process";
  if (s.includes("完成") || s.includes("已完") || lower.includes("success") || lower.includes("done") || lower.includes("completed")) return "success";
  if (s.includes("待") || s.includes("未开始") || lower.includes("wait") || lower.includes("pending") || lower.includes("not_start")) return "wait";
  // 按接口实际三种状态：已生成 / 生产中 / 待生产
  if (s.includes("生产中")) return "process";
  if (s.includes("待生产")) return "wait";
  if (s.includes("已生产")) return "success";

  // 用 completionStatus 做兜底（一般为 0~100）
  // 兜底：仍按 completionStatus 做 0~100 判断
  const cs = Number(completionStatus);
  if (Number.isFinite(cs)) {
    if (cs >= 100) return "success";
@@ -188,7 +224,7 @@
    return "wait";
  }

  // 最后再用数量兜底
  // 再兜底：用数量判断
  if (Number.isFinite(inputQty) && inputQty > 0 && Number.isFinite(outputQty) && outputQty >= inputQty) return "success";
  if (Number.isFinite(outputQty) && outputQty > 0) return "process";
  return "wait";
@@ -266,19 +302,11 @@
const reportLoading = ref(false);

const normalizeReport = (item) => {
  // 报工记录：productNo/userName/createTime/quantity/qualifiedQty/scrapQty
  const outputQty = Number(item?.quantity ?? item?.outputQty ?? 0);
  const qualifiedQty = Number(item?.qualifiedQty ?? item?.completeQty ?? item?.goodQty ?? 0);
  const badQty = Number(item?.scrapQty ?? item?.badQty ?? 0);

  return {
    reportNo: item?.productNo ?? item?.reportNo ?? item?.productionReportNo ?? item?.id ?? "",
    reportUser: item?.userName ?? item?.reportUser ?? item?.createdByName ?? item?.reportUserName ?? "",
    reportTime: item?.createTime ?? item?.reportTime ?? item?.createdAt ?? item?.reportDate ?? "",
    outputQty: Number.isFinite(outputQty) ? outputQty : 0,
    qualifiedQty: Math.max(0, Number.isFinite(qualifiedQty) ? qualifiedQty : 0),
    badQty: Number.isFinite(badQty) ? Math.max(0, badQty) : 0,
    remark: item?.remark ?? item?.remarkText ?? item?.description ?? "",
    ...item,
    quantity:  Math.max(0, Number.isFinite(item.quantity) ? item.quantity : 0),
    scrapQty:  Math.max(0, Number.isFinite(item.scrapQty) ? item.scrapQty : 0),
    qualifiedQty:  Math.max(0, Number.isFinite(item.qualifiedQty) ? item.qualifiedQty : 0),
  };
};

@@ -318,9 +346,17 @@
);

const viewReportRecord = (row) => {
  if (!row?.reportNo) return;
  if (!row?.productNo) return;
  currentReportRow.value = row;
  reportRecordDialogVisible.value = true;
  if (row.process ==='印铜' || row.process ==='印银') {
    copperPrintingFormVisible.value = true;
  } else if (row.process === '电压分选') {
    voltageSortingFormVisible.value = true;
  } else if (row.process === '造粒') {
    granulationFormVisible.value = true;
  } else {
    reportRecordDialogVisible.value = true;
  }
};

const reportRecordDialogVisible = ref(false);
@@ -334,11 +370,26 @@
  return Math.round(n);
};

const statusTagText = (status) => {
  if (status === "success") return "已生产";
  if (status === "process") return "生产中";
  if (status === "wait") return "待生产";
  return String(status ?? "");
};

// el-steps: active 为当前进行中的步骤下标（模拟）
const active = computed(() => {
  const list = processes.value || [];
  const idx = list.findIndex((p) => p.status === "process");
  return idx >= 0 ? idx : 0;
  // 激活状态为“待生产”的上一条
  const firstWaitIdx = list.findIndex((p) => p?.status === "wait");
  if (firstWaitIdx > 0) return firstWaitIdx - 1;

  // 如果没有待生产：
  // - 且最后一条是生产中：激活最后一条
  // - 否则：没有激活样式
  const lastIdx = list.length - 1;
  if (lastIdx >= 0 && list[lastIdx]?.status === "process") return lastIdx;
  return null;
});

// 工序进度：用产出/投入估算（UI 先跑通，后续按真实规则替换）
@@ -563,6 +614,39 @@
    pointer-events: none;
  }

  .step-status-badge {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 1;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    padding: 2px 8px;
    line-height: 1.2;
    pointer-events: none;
    white-space: nowrap;
    border: 1px solid transparent;
  }

  .step-status-badge-success {
    color: #67c23a;
    background: rgba(103, 194, 58, 0.14);
    border-color: rgba(103, 194, 58, 0.35);
  }

  .step-status-badge-process {
    color: #b88230;
    background: rgba(230, 162, 60, 0.18);
    border-color: rgba(230, 162, 60, 0.45);
  }

  .step-status-badge-wait {
    color: #909399;
    background: rgba(144, 147, 153, 0.12);
    border-color: rgba(144, 147, 153, 0.35);
  }

  .right-panel {
    border: 1px solid #ebeef5;
    border-radius: 10px;