kd-aiot-frontend-wt/src/views/bpm/handleTask/components/qualityReportApproval/detailDialog.vue

<template>
  <div class="quality-report-container">
    <div v-if="reportData.reportNumber">
      <div class="title">
        质检报告
      </div>
      
      <!-- 质检报告表格 -->
      <div style="display: flex; align-items: center; justify-content: space-between; font-size: 14px; margin-bottom: 10px;">
          <div>
              <span class="label">编号：</span>
              <span class="value">{{ reportData.code }}</span>
            </div>
            <div>
              <span class="label">报告单号：</span>
              <span class="value">{{ reportData.reportNumber }}</span>
          </div>
      </div>
      <table class="quality-report-table">
        <tbody>
          <tr>
            <td class="label">检品名称：</td>
            <td class="value">{{ reportData.productName }}</td>
            <td class="label">批号/序列号：</td>
            <td class="value"></td>
          </tr>
          <tr>
            <td class="label">规格型号：</td>
            <td class="value">{{ reportData.specification }}</td>
            <td class="label">数量：</td>
            <td class="value">{{ reportData.total }}</td>
          </tr>
          <tr>
            <td class="label">请验日期：</td>
            <td class="value">{{ reportData.pleaseVerifyDate }}</td>
            <td class="label">请验部门：</td>
            <td class="value">{{ reportData.pleaseVerifyDepartment }}</td>
          </tr>
          <tr>
            <td class="label">报告日期：</td>
            <td class="value">{{ reportData.reportDate }}</td>
            <td class="label">有效期：</td>
            <td class="value">{{ reportData.expirationDate }}</td>
          </tr>
          <tr>
            <td class="label">检品来源：</td>
            <td class="value">{{ reportData.source }}</td>
            <td class="label">储存条件：</td>
            <td class="value">{{ reportData.storageCondition }}</td>
          </tr>
          <tr>
            <td class="label">检验依据：</td>
            <td class="value" colspan="3">{{ reportData.inspectionBasis }}</td>
          </tr>
        </tbody>
      </table>

      <!-- 检验项目表格 -->
      <table class="quality-report-table">
        <thead>
          <tr>
            <th class="label">检验项目</th>
            <th class="label">标准规定</th>
            <th class="label">检验结果</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in reportDetail">
            <td class="value">{{ item.item }}</td>
            <td class="value">{{ item.standardRegulations }}</td>
            <td class="value">{{ item.results }}</td>
          </tr>
        </tbody>
      </table>

      <!-- 结论表格 -->
      <table class="quality-report-table">
        <tbody>
          <tr>
            <td class="label">结论：</td>
            <td class="value" colspan="3">{{ reportData.conclusion }}</td>
          </tr>
          <tr>
            <td class="label">备注：</td>
            <td class="value" colspan="3">{{ reportData.remarks }}</td>
          </tr>
        </tbody>
      </table>

      <div style="display: flex; align-items: center; justify-content: space-between; font-size: 14px; margin-top: 10px;">
        <div>
          <span class="label">检验员/日期：</span>
          <span class="value">{{ reportData.inspector }}/{{ reportData.inspectionTime }}</span>
        </div>
        <div>
          <span class="label">复核人/日期：</span>
          <span class="value">{{ reportData.reviewer }}/{{ reportData.reviewTime }}</span>
        </div>
        <div>
          <span class="label">审核人/日期：</span>
          <span class="value">{{ reportData.checker }}/{{ reportData.approvedDate }}</span>
        </div>
      </div>
    </div>
    <browse
      v-else
      :url="fileUrl"
    ></browse>
  </div>
</template>

<script>
import { getDetail, getListDetail, getDetailById } from '@/api/bpm/components/qualityReportApproval/qualityReportApproval';
import browse from '@/components/jimureport/browse.vue'
import { getJmPrintViewUrl } from '@/components/jimureport//api.js';
import { getToken } from '@/utils/token-util';
  export default {
    props: {
      taskDefinitionKey: {
        type: String,
        default: 'starter'
      },
      businessId: {
        default: ''
      },
      isView: {
        default: ''
      },
      businessCode: {
        default: ''
      },
    },
    components: {
      browse
    },
    data() {
      return {
        // 质检报告数据
        reportData: {},
        reportDetail: [],
        fileUrl: '',
      };
    },
    mounted() {
      this.open()
    },
    methods: {
      async open() {
        const detail = await getDetailById(this.businessId);
        // this.reportData = detail;
        // this.showEditFlag = true;
        console.log('detail~~~', detail);
        if(detail.data.reportTemplateJson?.basicInfoData) {
          this.reportData = detail.data.reportTemplateJson.basicInfoData;
          this.reportDetail = detail.data.reportTemplateJson.inspectionItems;
          
          const reportApprovalTaskVos = detail.data.reportApprovalTaskVos || [];

          const reviewTime = reportApprovalTaskVos?.[reportApprovalTaskVos.length - 2]?.endTime?.split(' ')[0] || '';
          const approvedDate = reportApprovalTaskVos?.[reportApprovalTaskVos.length - 3]?.endTime?.split(' ')[0] || '';
          const reviewer = reportApprovalTaskVos?.[reportApprovalTaskVos.length - 2]?.approvalUserName || '';
          const checker = reportApprovalTaskVos?.[reportApprovalTaskVos.length - 3]?.approvalUserName || '';

          this.$set(this.reportData, 'inspectionTime', this.reportData.inspectionTime?.split(' ')[0] || '');
          this.$set(this.reportData, 'reviewTime', this.reportData.reviewTime?.split(' ')[0] || reviewTime || '');
          this.$set(this.reportData, 'approvedDate', this.reportData.approvedDate?.split(' ')[0] || approvedDate || '');
          this.$set(this.reportData, 'reviewer', this.reportData.reviewer || reviewer || '');
          this.$set(this.reportData, 'checker', this.reportData.checker || checker || '');
        } else {
          // 组件挂载时加载数据
          // this.loadReportData();
          // this.loadListDetail();
          console.log('this.businessCode~~~', this.businessCode);
          let url = await getJmPrintViewUrl('qmsqualityinspectionprint');
          this.fileUrl = `${url}?token=${getToken()}&id=${this.businessId}`;
          console.log('fileUrl~~~', this.fileUrl);
        }
        
        
      },
      // 可以根据需要添加数据加载方法
      async loadReportData() {
      //   // 从API获取质检报告数据
        const detail = await getDetail(this.businessId);
        this.reportData = detail;
      },
      async loadListDetail() {
        const detail = await getListDetail(this.businessId);
        this.reportDetail = detail;
      }
    }
  };
</script>

<style scoped lang="scss">
  .quality-report-container {
    padding: 20px;
    background-color: #ffffff;
    min-height: 100%;
  }

  .title {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
    color: #333333;
  }

  .quality-report-table {
    width: 100%;
    border-collapse: collapse;
    // margin-bottom: 20px;
    font-size: 14px;
  }

  .quality-report-table td,
  .quality-report-table th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  .quality-report-table th {
    background-color: #f5f5f5;
    font-weight: 600;
    color: #333333;
  }

  .quality-report-table .label {
    width: 120px;
    background-color: #f9f9f9;
    font-weight: 500;
    color: #333333;
  }

  .quality-report-table .value {
    color: #555555;
    min-width: 150px;
  }

  .quality-report-table tr:hover {
    background-color: #fafafa;
  }
</style>