原材料检验详情页面

zhangwencui

8 小时以前 4040afa2a2b5af32e022c8c62aef57de06dd3c06

原材料检验详情页面

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,250 @@
<template>
  <el-dialog v-model="dialogVisible"
             :title="dialogTitle"
             width="800px"
             :close-on-click-modal="false"
             custom-class="custom-dialog">
    <div class="detail-container">
      <!-- åŸºç¡€ä¿¡æ¯ -->
      <div class="detail-section">
        <h3 class="section-title">基础信息</h3>
        <el-descriptions :column="3"
                         border>
          <el-descriptions-item label="检测日期">{{ formatTime(detailData.checkTime) }}</el-descriptions-item>
          <el-descriptions-item label="供应商">{{ detailData.supplier || '-' }}</el-descriptions-item>
          <el-descriptions-item label="检验员"><span style="color: #eb9113;">{{ detailData.checkName || '-' }}</span></el-descriptions-item>
          <el-descriptions-item label="产品名称"><span style="color: hsl(210, 100%, 63%);">{{ detailData.productName || '-' }}</span></el-descriptions-item>
          <el-descriptions-item label="规格型号"><span style="">{{ detailData.model || '-' }}</span></el-descriptions-item>
          <el-descriptions-item label="单位"><span style="">{{ detailData.unit || '-' }}</span></el-descriptions-item>
          <el-descriptions-item label="数量">{{ detailData.quantity || 0 }}</el-descriptions-item>
          <el-descriptions-item label="试样编号">{{ detailData.sampleCode || '-' }}</el-descriptions-item>
          <el-descriptions-item label="车牌号">{{ detailData.licensePlateNumber || '-' }}</el-descriptions-item>
          <el-descriptions-item label="试样状态"><el-tag>{{ detailData.sampleState || '-' }}</el-tag></el-descriptions-item>
          <el-descriptions-item label="检测性质"><el-tag type="info">{{ detailData.inspectNature || '-' }}</el-tag></el-descriptions-item>
          <el-descriptions-item label="指标选择"><el-tag type="warning">{{ detailData.testStandardName || detailData.testStandardId || '-' }}</el-tag></el-descriptions-item>
          <el-descriptions-item label="取样日期">{{ formatTime(detailData.sampleTime) }}</el-descriptions-item>
          <el-descriptions-item label="检测单位">{{ detailData.checkCompany || '-' }}</el-descriptions-item>
          <el-descriptions-item label="检测结果"><el-tag :type="detailData.checkResult == '合格' ? 'success' : 'danger'">{{ detailData.checkResult || '-' }}</el-tag></el-descriptions-item>
          <el-descriptions-item label="提交状态"><el-tag :type="detailData.inspectState ? 'success' : 'danger'">{{ detailData.inspectState ? '已提交' : '未提交' }}</el-tag></el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- æŒ‡æ ‡ä¿¡æ¯ -->
      <div class="detail-section"
           v-if="detailData.qualityInspectParams && detailData.qualityInspectParams.length > 0">
        <h3 class="section-title">指标信息</h3>
        <el-table :data="detailData.qualityInspectParams"
                  style="width: 100%"
                  border>
          <el-table-column prop="parameterItem"
                           label="指标"
                           min-width="150"></el-table-column>
          <el-table-column prop="unit"
                           label="单位"
                           width="100"></el-table-column>
          <el-table-column prop="standardValue"
                           label="标准值"
                           width="120"></el-table-column>
          <el-table-column prop="controlValue"
                           label="内控值"
                           width="120"></el-table-column>
          <el-table-column prop="testValue"
                           label="检验值"
                           width="120">
            <template #default="scope">
              <span style="color: hsl(210, 100%, 63%);">{{ scope.row.testValue || '-' }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
  import { ref, computed, watch } from "vue";
  import dayjs from "dayjs";
  import {
    qualityInspectDetailByProductId,
    getQualityTestStandardParamByTestStandardId,
  } from "@/api/qualityManagement/metricMaintenance.js";
  import { qualityInspectParamInfo } from "@/api/qualityManagement/qualityInspectParam.js";

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: () => ({}),
    },
  });

  const emit = defineEmits(["update:visible"]);

  const dialogVisible = computed({
    get: () => props.visible,
    set: value => emit("update:visible", value),
  });

  const dialogTitle = computed(() => "原材料检验详情");
  const detailData = ref(props.data);
  const loading = ref(false);

  // æ ¼å¼åŒ–时间
  const formatTime = time => {
    return time ? dayjs(time).format("YYYY-MM-DD HH:mm:ss") : "-";
  };

  // åŠ è½½æŒ‡æ ‡é€‰æ‹©å’Œè¡¨æ ¼æ•°æ®
  const loadIndicatorData = async () => {
    if (!detailData.value.productId) return;

    loading.value = true;
    try {
      // åŠ è½½æŒ‡æ ‡é€‰æ‹©åˆ—表
      const params = {
        productId: detailData.value.productId,
        inspectType: 0,
      };
      const standardRes = await qualityInspectDetailByProductId(params);
      if (standardRes.data && standardRes.data.length > 0) {
        // æŸ¥æ‰¾å½“前选择的指标名称
        const selectedStandard = standardRes.data.find(
          item => item.id == detailData.value.testStandardId
        );
        if (selectedStandard) {
          detailData.value.testStandardName =
            selectedStandard.standardName || selectedStandard.standardNo;
        }
      }

      // åŠ è½½å‚数数据（与编辑页面保持一致）
      if (detailData.value.id) {
        getQualityInspectParamList(detailData.value.id);
      }
    } catch (error) {
      console.error("加载指标数据失败:", error);
    } finally {
      loading.value = false;
    }
  };
  const getQualityInspectParamList = id => {
    qualityInspectParamInfo(id).then(res => {
      detailData.value.qualityInspectParams = res.data;
    });
  };
  // ç›‘听数据变化
  watch(
    () => props.data,
    newData => {
      detailData.value = newData;
    },
    { deep: true }
  );

  // æš´éœ²æ–¹æ³•ç»™çˆ¶ç»„件
  defineExpose({
    loadIndicatorData,
  });
</script>

<style scoped>
  .detail-container {
    max-height: 600px;
    overflow-y: auto;
    padding: 0 16px;
  }

  .detail-section {
    margin-bottom: 28px;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .section-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #1a1a1a;
    border-bottom: 2px solid #409eff;
    padding-bottom: 10px;
  }

  .dialog-footer {
    text-align: center;
    padding: 20px;
    border-top: 1px solid #ebeef5;
  }

  .dialog-footer .el-button {
    min-width: 100px;
    padding: 8px 20px;
  }

  /* è‡ªå®šä¹‰å¯¹è¯æ¡†æ ·å¼ */
  :deep(.custom-dialog) {
    border-radius: 12px;
    overflow: hidden;
  }

  :deep(.custom-dialog .el-dialog__header) {
    background-color: #f5f7fa;
    padding: 20px;
    border-bottom: 1px solid #ebeef5;
  }

  :deep(.custom-dialog .el-dialog__title) {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
  }

  :deep(.custom-dialog .el-dialog__body) {
    padding: 20px;
  }

  /* æè¿°åˆ—表样式优化 */
  :deep(.el-descriptions) {
    border-radius: 6px;
    overflow: hidden;
  }

  :deep(.el-descriptions__label) {
    font-weight: 500;
    color: #606266;
  }

  :deep(.el-descriptions__content) {
    color: #1a1a1a;
    font-weight: 500;
  }

  /* è¡¨æ ¼æ ·å¼ä¼˜åŒ– */
  :deep(.el-table) {
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  :deep(.el-table th) {
    background-color: #f5f7fa;
    font-weight: 600;
    color: #303133;
  }

  :deep(.el-table tr:hover > td) {
    background-color: #ecf5ff !important;
  }

  :deep(.el-table td) {
    color: #303133;
  }
</style>

 src/views/qualityManagement/rawMaterialInspection/index.vue

@@ -49,6 +49,10 @@
             @close="handleQuery"></FormDia>
    <files-dia ref="filesDia"
               @close="handleQuery"></files-dia>
    <DetailDialog ref="detailDialog"
                  v-model:visible="detailDialogVisible"
                  :data="detailDialogData"
                  @close="handleQuery"></DetailDialog>
    <el-dialog v-model="dialogFormVisible"
               title="编辑检验员"
               width="30%"
@@ -93,6 +97,7 @@
  } from "vue";
  import InspectionFormDia from "@/views/qualityManagement/rawMaterialInspection/components/inspectionFormDia.vue";
  import FormDia from "@/views/qualityManagement/rawMaterialInspection/components/formDia.vue";
  import DetailDialog from "@/views/qualityManagement/rawMaterialInspection/components/detailDialog.vue";
  import { ElMessageBox } from "element-plus";
  import {
    downloadQualityInspect,
@@ -255,6 +260,13 @@
          },
        },
        {
          name: "详情",
          type: "text",
          clickFun: row => {
            openDetailDialog(row);
          },
        },
        {
          name: "附件",
          type: "text",
          clickFun: row => {
@@ -318,6 +330,9 @@
  const formDia = ref();
  const filesDia = ref();
  const inspectionFormDia = ref();
  const detailDialog = ref();
  const detailDialogVisible = ref(false);
  const detailDialogData = ref({});
  const { proxy } = getCurrentInstance();
  const userStore = useUserStore();
  const changeDaterange = value => {
@@ -372,6 +387,20 @@
    });
  };

  // æ‰“开详情弹框
  const openDetailDialog = row => {
    // ç¡®ä¿qualityInspectParams字段存在
    if (!row.qualityInspectParams) {
      row.qualityInspectParams = [];
    }
    detailDialogData.value = row;
    detailDialogVisible.value = true;
    // æ‰“开弹窗后加载指标数据
    setTimeout(() => {
      detailDialog.value?.loadIndicatorData();
    }, 100);
  };

  // åˆ é™¤
  const handleDelete = () => {
    let ids = [];