过程检验增加查询条件,增加详情功能

zhangwencui

8 小时以前 4179d065f06c6969d913c29b363b95efe8fbc813

过程检验增加查询条件,增加详情功能

 src/api/qualityManagement/rawMaterialInspection.js

@@ -63,3 +63,11 @@
        params: query,
    })
}
// æŸ¥è¯¢è¿‡ç¨‹æ£€è¯¦æƒ…
export function qualityInspectProcessDetails(query) {
    return request({
        url: '/quality/qualityInspect/processDetails',
        method: 'get',
        params: query,
    })
}

 src/views/qualityManagement/processInspection/components/detailDialog.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,281 @@
<template>
  <div>
    <el-dialog v-model="dialogVisible"
               title="检验详情"
               width="1000px"
               @close="closeDialog">
      <el-card class="detail-card">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>
        <div class="detail-info">
          <div class="info-row">
            <div class="info-item">
              <span class="info-label">日期：</span>
              <span class="info-value">{{ dayjs(detailData.createTime) .format('YYYY-MM-DD') }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">生产订单号：</span>
              <span class="info-value">{{ detailData.npsNo }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">工序：</span>
              <!-- <span class="info-value">{{ detailData.process }}</span> -->
              <el-tag type="primary">{{ detailData.process }}</el-tag>
            </div>
          </div>
          <div class="info-row">
            <div class="info-item">
              <span class="info-label">产品编码：</span>
              <span class="info-value">{{ detailData.materialCode }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">产品类型：</span>
              <!-- <span class="info-value">{{ detailData.strength }}</span> -->
              <el-tag type="info">{{ detailData.strength }}</el-tag>
            </div>
            <div class="info-item">
              <span class="info-label">产品名称：</span>
              <span class="info-value">{{ detailData.productName }}</span>
            </div>
          </div>
          <div class="info-row">
            <div class="info-item">
              <span class="info-label">规格：</span>
              <span class="info-value">{{ detailData.model }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">班次：</span>
              <el-tag :type="detailData.schedule === '白班' ? 'primary' : 'warning'">{{ detailData.schedule }}</el-tag>
            </div>
            <div class="info-item">
              <span class="info-label">岗位人员：</span>
              <span class="info-value">{{ detailData.postName }}</span>
            </div>
          </div>
          <div class="info-row">
            <!-- <div class="info-item">
              <span class="info-label">报工单号：</span>
              <span class="info-value">{{ detailData.productionProductRouteItemId }}</span>
            </div> -->
            <div class="info-item">
              <span class="info-label">产出数量：</span>
              <span class="info-value"><span style="font-weight: bold;color: #409eff;">{{ detailData.quantity }}</span> æ–¹</span>
            </div>
            <div class="info-item">
              <span class="info-label">合格数量：</span>
              <span class="info-value"><span style="font-weight: bold;color: #28e431;">{{ detailData.qualifiedQuantity }}</span> æ–¹</span>
            </div>
            <div class="info-item">
              <span class="info-label">不合格数量：</span>
              <span class="info-value"><span style="font-weight: bold;color: #b43434;">{{ detailData.unqualifiedQuantity }}</span> æ–¹</span>
            </div>
          </div>
        </div>
      </el-card>
      <el-card v-for="group in groupedInspectionData"
               :key="group.sourceSort"
               class="detail-card"
               style="margin-top: 20px;">
        <template #header>
          <div class="card-header">
            <span v-if="groupedInspectionData.length > 1">检验指标组 - {{ group.sourceSort }}</span>
            <span v-else>检验指标</span>
          </div>
        </template>
        <el-table :data="group.items"
                  style="width: 100%"
                  :row-class-name="rowClassName">
          <el-table-column prop="paramName"
                           label="指标" />
          <el-table-column prop="unit"
                           label="单位"
                           width="100">
            <template #default="scope">
              {{ scope.row.unit || "/" }}
            </template>
          </el-table-column>
          <el-table-column prop="standardText"
                           label="标准值" />
          <el-table-column prop="paramValue"
                           label="实际值" />
          <el-table-column prop="result"
                           label="结果"
                           width="100">
            <template #default="scope">
              <el-tag :type="scope.row.result === '合格' ? 'success' : 'danger'">
                {{ scope.row.result }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { ref, onMounted } from "vue";
  import { qualityInspectProcessDetails } from "@/api/qualityManagement/rawMaterialInspection.js";
  import dayjs from "dayjs";

  const emit = defineEmits(["close"]);
  const dialogVisible = ref(false);
  const detailData = ref({});
  const inspectionData = ref([]);
  const groupedInspectionData = ref([]);
  const loading = ref(false);

  const openDialog = row => {
    dialogVisible.value = true;
    detailData.value = {
      ...row,
      createTime: row.createTime
        ? dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss")
        : "",
    };
    getInspectionDetails(row.productionProductRouteItemId);
  };

  const getInspectionDetails = id => {
    loading.value = true;
    qualityInspectProcessDetails({ productionProductRouteItemId: id })
      .then(res => {
        const data = res.data || [];
        // è®¡ç®—结果
        const processedData = data.map(item => {
          let result = "合格";
          let standardText = "";
          if (item.valueMode === 1) {
            // å•å€¼æ¯”较
            if (item.standardValue !== null) {
              standardText = item.standardValue;
              if (item.paramValue !== item.standardValue) {
                result = "不合格";
              }
            } else {
              standardText = "-";
              result = "合格";
            }
          } else if (item.valueMode === 2) {
            // åŒºé—´æ¯”较
            if (item.minValue !== null || item.maxValue !== null) {
              standardText =
                (item.minValue ? item.minValue : "-∞") +
                "~" +
                (item.maxValue ? item.maxValue : "+∞");
              if (
                item.paramValue < item.minValue ||
                item.paramValue > item.maxValue
              ) {
                result = "不合格";
              }
            } else {
              standardText = "-";
              result = "合格";
            }
          }
          return {
            ...item,
            standardText,
            result,
          };
        });

        // æŒ‰sourceSort分组
        const grouped = {};
        processedData.forEach(item => {
          const key = item.sourceSort || "默认";
          if (!grouped[key]) {
            grouped[key] = [];
          }
          grouped[key].push(item);
        });

        // è½¬æ¢ä¸ºæ•°ç»„格式
        groupedInspectionData.value = Object.entries(grouped).map(
          ([key, items]) => ({
            sourceSort: key,
            items,
          })
        );

        loading.value = false;
      })
      .catch(err => {
        loading.value = false;
        console.error("获取检验详情失败:", err);
      });
  };

  const closeDialog = () => {
    dialogVisible.value = false;
    emit("close");
  };

  // ä¸ºä¸åˆæ ¼çš„行添加样式
  const rowClassName = ({ row }) => {
    return row.result == "不合格" ? "unqualified-row" : "";
  };

  defineExpose({
    openDialog,
  });
</script>

<style scoped>
  .detail-card {
    margin-bottom: 20px;
  }

  .card-header {
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }

  .detail-info {
    padding: 10px 0;
  }

  .info-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }

  .info-item {
    width: 33%;
    margin-bottom: 10px;
  }

  .info-label {
    display: inline-block;
    width: 100px;
    font-weight: bold;
    color: #666;
  }

  .info-value {
    color: #333;
  }

  .dialog-footer {
    text-align: center;
  }

  :deep(.unqualified-row) {
    background-color: rgba(245, 108, 108, 0.05) !important;
  }

  :deep(.unqualified-row .cell) {
    color: #f56c6c !important;
  }
</style>

 src/views/qualityManagement/processInspection/index.vue

@@ -4,8 +4,32 @@
      <div>
        <span class="search_title">工序：</span>
        <el-input v-model="searchForm.process"
                  style="width: 240px"
                  style="width: 200px"
                  placeholder="请输入工序搜索"
                  @change="handleQuery"
                  clearable
                  :prefix-icon="Search" />
        <span style="margin-left: 10px"
              class="search_title">生产订单号：</span>
        <el-input v-model="searchForm.npsNo"
                  style="width: 200px"
                  placeholder="请输入生产订单号搜索"
                  @change="handleQuery"
                  clearable
                  :prefix-icon="Search" />
        <span style="margin-left: 10px"
              class="search_title">产品编码：</span>
        <el-input v-model="searchForm.materialCode"
                  style="width: 200px"
                  placeholder="请输入产品编码搜索"
                  @change="handleQuery"
                  clearable
                  :prefix-icon="Search" />
        <span style="margin-left: 10px"
              class="search_title">产品名称：</span>
        <el-input v-model="searchForm.productName"
                  style="width: 200px"
                  placeholder="请输入产品名称搜索"
                  @change="handleQuery"
                  clearable
                  :prefix-icon="Search" />
@@ -15,6 +39,7 @@
                        value-format="YYYY-MM-DD"
                        format="YYYY-MM-DD"
                        type="daterange"
                        style="width: 240px"
                        placeholder="请选择"
                        clearable
                        @change="changeDaterange" />
@@ -60,6 +85,8 @@
             @close="handleQuery"></FormDia>
    <files-dia ref="filesDia"
               @close="handleQuery"></files-dia>
    <DetailDialog ref="detailDialog"
                  @close="handleQuery"></DetailDialog>
    <el-dialog v-model="dialogFormVisible"
               title="编辑检验员"
               width="30%"
@@ -104,6 +131,7 @@
  } from "vue";
  import InspectionFormDia from "@/views/qualityManagement/processInspection/components/inspectionFormDia.vue";
  import FormDia from "@/views/qualityManagement/processInspection/components/formDia.vue";
  import DetailDialog from "@/views/qualityManagement/processInspection/components/detailDialog.vue";
  import { ElMessageBox } from "element-plus";
  import {
    downloadQualityInspect,
@@ -112,6 +140,7 @@
    qualityInspectUpdate,
    submitQualityInspect,
    qualityInspectProcessPage,
    qualityInspectProcessDetails,
  } from "@/api/qualityManagement/rawMaterialInspection.js";
  import FilesDia from "@/views/qualityManagement/processInspection/components/filesDia.vue";
  import dayjs from "dayjs";
@@ -124,6 +153,9 @@
      entryDate: undefined, // å½•å…¥æ—¥æœŸ
      startTime: undefined,
      endTime: undefined,
      materialCode: "",
      productName: "",
      npsNo: "",
    },
    rules: {
      checkName: [{ required: true, message: "请选择", trigger: "change" }],
@@ -218,75 +250,21 @@
      slot: "unqualifiedQuantity",
    },

    // {
    //   dataType: "action",
    //   label: "操作",
    //   align: "center",
    //   fixed: "right",
    //   width: 280,
    //   operation: [
    //     {
    //       name: "编辑",
    //       type: "text",
    //       clickFun: row => {
    //         openForm("edit", row);
    //       },
    //       disabled: row => {
    //         // å·²æäº¤åˆ™ç¦ç”¨
    //         if (row.inspectState == 1) return true;
    //         // å¦‚果检验员有值，只有当前登录用户能编辑
    //         if (row.checkName) {
    //           return row.checkName !== userStore.nickName;
    //         }
    //         return false;
    //       },
    //     },
    //     {
    //       name: "附件",
    //       type: "text",
    //       clickFun: row => {
    //         openFilesFormDia(row);
    //       },
    //     },
    //     {
    //       name: "提交",
    //       type: "text",
    //       clickFun: row => {
    //         submit(row.id);
    //       },
    //       disabled: row => {
    //         // å·²æäº¤åˆ™ç¦ç”¨
    //         if (row.inspectState == 1) return true;
    //         // å¦‚果检验员有值，只有当前登录用户能提交
    //         if (row.checkName) {
    //           return row.checkName !== userStore.nickName;
    //         }
    //         return false;
    //       },
    //     },
    //     {
    //       name: "分配检验员",
    //       type: "text",
    //       clickFun: row => {
    //         if (!row.checkName) {
    //           open(row);
    //         } else {
    //           proxy.$modal.msgError("检验员已存在");
    //         }
    //       },
    //       disabled: row => {
    //         return row.inspectState == 1 || row.checkName;
    //       },
    //     },
    //     {
    //       name: "下载",
    //       type: "text",
    //       clickFun: row => {
    //         downLoadFile(row);
    //       },
    //     },
    //   ],
    // },
    {
      dataType: "action",
      label: "操作",
      align: "center",
      fixed: "right",
      width: 100,
      operation: [
        {
          name: "详情",
          clickFun: row => {
            openInspectionFormDia(row);
          },
        },
      ],
    },
  ]);
  const userList = ref([]);
  const currentRow = ref(null);
@@ -305,6 +283,7 @@
  const formDia = ref();
  const filesDia = ref();
  const inspectionFormDia = ref();
  const detailDialog = ref();
  const { proxy } = getCurrentInstance();
  const userStore = useUserStore();
  const changeDaterange = value => {
@@ -325,10 +304,13 @@
  /** é‡ç½®æŒ‰é’®æ“ä½œ */
  const resetForm = () => {
    searchForm.value = {
      checkName: "",
      process: "",
      entryDate: undefined,
      startTime: undefined,
      endTime: undefined,
      materialCode: "",
      productName: "",
      npsNo: "",
    };
    getList();
  };
@@ -368,6 +350,13 @@
      inspectionFormDia.value?.openDialog(type, row);
    });
  };

  // æ‰“开详情弹框
  const openInspectionFormDia = row => {
    nextTick(() => {
      detailDialog.value?.openDialog(row);
    });
  };
  // æ‰“开附件弹框
  const openFilesFormDia = (type, row) => {
    nextTick(() => {