kd-aiot-frontend-qms/src/views/inspectionReport/template/inspection_report5.vue

<template>
  <div id="printSection" style="padding: 20px; background-color: white">
    <h2 style="text-align: center; font-size: 24px; margin-bottom: 10px">{{
      basicInfoData.groupName || '湖南特瑞精密医疗器器械有限公司'
    }}</h2>
    <h1
      style="
        text-align: center;
        font-size: 24px;
        margin-bottom: 20px;
        font-weight: bold;
      "
      >来料/半成品检验报告单</h1
    >

    <!-- 编号和报告单号 -->
    <div style="margin-bottom: 5px">
      <el-row style="display: flex">
        <el-col :span="12" style="width: 50%">
          <div style="display: flex; align-items: center">
            <span style="font-weight: bold; margin-right: 10px">报告编号:</span>
            <span style="flex: 1">{{ basicInfoData.code }}</span>
          </div>
        </el-col>
        <el-col :span="12" style="width: 50%">
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: flex-end;
            "
          >
            <span style="font-weight: bold; margin-right: 10px">表单编号:</span>

            <span>
              {{ basicInfoData.reportNumber }}
            </span>
            <!-- <span v-else>
              <el-input
                v-model="basicInfoData.reportNumber"
                placeholder="请输入报告编号"
              ></el-input>
            </span> -->
            <span style="font-weight: bold; margin-left: 3px">
              <span> 版本：</span>

              <span>
                {{ basicInfoData.version }}
              </span>
              <!-- <span v-else>
                <el-input
                  style="width: 120px"
                  v-model="basicInfoData.version"
                  placeholder="请输入版本"
                ></el-input>
              </span> -->
            </span>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 基本信息表格 -->
    <table
      class="basic-info-table"
      style="width: 100%; border-collapse: collapse; border: 1px solid #ccc"
    >
      <tbody>
        <tr>
          <td style="width: 90px; border: 1px solid #ccc; padding: 8px"
            >品 名</td
          >
          <td style="border: 1px solid #ccc; padding: 8px">{{
            basicInfoData.productName
          }}</td>
          <td style="width: 90px; border: 1px solid #ccc; padding: 8px"
            >规格型号</td
          >
          <td style="border: 1px solid #ccc; padding: 8px"
            >{{ basicInfoData.specification }}/{{ basicInfoData.modelType }}</td
          >
        </tr>
        <tr>
          <td style="border: 1px solid #ccc; padding: 8px">来料/半成品批号</td>
          <td style="border: 1px solid #ccc; padding: 8px">{{
            basicInfoData.batchNo
          }}</td>

          <td style="border: 1px solid #ccc; padding: 8px">数量</td>
          <td style="border: 1px solid #ccc; padding: 8px"
            >{{ basicInfoData.total }}{{ basicInfoData.sampleMeasureUnit }}</td
          >
        </tr>
        <tr>
          <td style="border: 1px solid #ccc; padding: 8px">供应商名称</td>
          <td style="border: 1px solid #ccc; padding: 8px">{{
            basicInfoData.supplierName
          }}</td>
          <td style="border: 1px solid #ccc; padding: 8px">抽检数量</td>
          <td style="border: 1px solid #ccc; padding: 8px"
            >{{ basicInfoData.sampleQuantity
            }}{{ basicInfoData.sampleMeasureUnit }}</td
          >
        </tr>
        <tr>
          <td style="border: 1px solid #ccc; padding: 8px">检验日期</td>
          <td style="border: 1px solid #ccc; padding: 8px">
            <div v-if="!isView">
              <el-date-picker
                v-model="basicInfoData.pleaseVerifyDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              />
            </div>
            <div v-else>{{ basicInfoData.manufactureTime }}</div></td
          >
          <td style="border: 1px solid #ccc; padding: 8px">报告日期</td>
          <td style="border: 1px solid #ccc; padding: 8px">
            <div v-if="!isView">
              <el-date-picker
                v-model="basicInfoData.reportDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              />
            </div>
            <div v-else>{{ basicInfoData.reportDate }}</div>
          </td>
        </tr>

        <tr>
          <td style="border: 1px solid #ccc; padding: 8px">检验依据</td>
          <td style="border: 1px solid #ccc; padding: 8px" colspan="3">
            <div v-if="!isView">
              <el-input
                v-model="basicInfoData.inspectionBasis"
                placeholder="请输入检验依据"
              ></el-input>
            </div>
            <div v-else>{{ basicInfoData.inspectionBasis }}</div>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 检验项目表格 -->
    <table
      class="inspection-items-table"
      style="
        width: 100%;
        border-collapse: collapse;
        border: 1px solid #ccc;
        margin-bottom: 20px;
      "
    >
      <thead>
        <tr>
          <th style="width: 100px; border: 1px solid #ccc; padding: 8px"
            >检验项目</th
          >
          <th style="border: 1px solid #ccc; padding: 8px">标准规定</th>
          <th style="border: 1px solid #ccc; padding: 8px">检验工具及编号</th>
          <th style="border: 1px solid #ccc; padding: 8px; width: 90px"
            >检测内容</th
          >
          <th style="width: 80px; border: 1px solid #ccc; padding: 8px"
            >检验结果</th
          >
          <th style="width: 100px; border: 1px solid #ccc; padding: 8px"
            >备注</th
          >
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in inspectionItems" :key="index">
          <td style="border: 1px solid #ccc; padding: 8px; min-height: 37px">{{
            item.item
          }}</td>
          <td style="border: 1px solid #ccc; padding: 8px">{{
            item.standardRegulations
          }}</td>
          <td style="border: 1px solid #ccc; padding: 8px">{{
            item.toolList?.map((item) => item.name + ' ' + item.code).join(',')
          }}</td>
          <td style="border: 1px solid #ccc; padding: 8px">{{
            item.qualityResultContent
          }}</td>
          <td style="border: 1px solid #ccc; padding: 8px">{{
            item.results
          }}</td>
          <td style="border: 1px solid #ccc; padding: 8px">
            <div v-if="!isView">
              <el-input v-model="item.remark" placeholder="请输入"></el-input>
            </div>
            <div v-else>{{ item.remark }}</div>
          </td>
        </tr>
        <tr>
          <td style="width: 120px; border: 1px solid #ccc; padding: 8px"
            >结论</td
          >
          <td style="border: 1px solid #ccc; padding: 8px" :colspan="4">
            <div style="display: flex; align-items: center">
              <div v-if="!isView">
                <el-checkbox
                  label="符合规定"
                  :true-label="'符合'"
                  v-model="basicInfoData.qualityResultsStr"
                  :false-label="'不符合'"
                ></el-checkbox>
                <el-checkbox
                  label="不符合规定："
                  :true-label="'不符合'"
                  v-model="basicInfoData.qualityResultsStr"
                  :false-label="'符合'"
                ></el-checkbox>
              </div>
              <div v-else style="display: flex; align-items: center">
                <span
                  style="
                    position: relative;
                    display: inline-block;
                    width: 14px;
                    height: 14px;
                    box-sizing: border-box;
                    border: 1px solid #000;
                    margin-right: 4px;
                  "
                >
                  <span
                    v-if="basicInfoData.qualityResultsStr === '符合'"
                    style="
                      position: absolute;
                      left: 3px;
                      top: 1px;
                      width: 4px;
                      height: 8px;
                      border: solid #000;
                      border-width: 0 2px 2px 0;
                      transform: rotate(45deg);
                    "
                  ></span>
                </span>
                <span style="margin-right: 12px">符合规定</span>
                <span
                  style="
                    position: relative;
                    display: inline-block;
                    width: 14px;
                    height: 14px;
                    box-sizing: border-box;
                    border: 1px solid #000;
                    margin-right: 4px;
                  "
                >
                  <span
                    v-if="basicInfoData.qualityResultsStr === '不符合'"
                    style="
                      position: absolute;
                      left: 3px;
                      top: 1px;
                      width: 4px;
                      height: 8px;
                      border: solid #000;
                      border-width: 0 2px 2px 0;
                      transform: rotate(45deg);
                    "
                  ></span>
                </span>
                <span>不符合规定：</span>
              </div>
              <el-input
                style="flex: 1"
                v-if="!isView"
                v-model="basicInfoData.qualityResultsStrRemark"
                placeholder="请输入"
              ></el-input>
              <div v-else>{{ basicInfoData.qualityResultsStrRemark }}</div></div
            >
          </td>
        </tr>
      </tbody>
    </table>
    <!-- 签名区域 -->
    <div style="margin-top: 20px">
      <el-row :gutter="20" style="display: flex; align-items: center">
        <el-col :span="8">
          <div style="display: flex; align-items: center; margin-bottom: 10px">
            <span style="font-weight: bold; min-width: 100px"
              >检验人/日期:</span
            >
            <span style="flex: 1">
              <div v-if="!isView" style="display: flex; align-items: center">
                <el-input
                  v-model="basicInfoData.inspector"
                  placeholder="请输入检验人"
                  style="width: 120px"
                ></el-input>
                <el-date-picker
                  v-model="basicInfoData.inspectionTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                  style="width: 140px"
                />
              </div>
              <div v-else
                >{{ basicInfoData.inspector || '' }} /
                {{ basicInfoData.inspectionTime || '' }}</div
              >
            </span>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="display: flex; align-items: center; margin-bottom: 10px">
            <span style="font-weight: bold; min-width: 100px"
              >复核人/日期:</span
            >
            <span style="flex: 1">
              <div v-if="!isView" style="display: flex; align-items: center">
                <el-input
                  v-model="basicInfoData.reviewer"
                  placeholder="请输入复核人"
                  style="width: 120px"
                ></el-input>
                <el-date-picker
                  v-model="basicInfoData.reviewTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                  style="width: 140px"
                />
              </div>
              <div v-else
                >{{ basicInfoData.reviewer || '' }} /
                {{ basicInfoData.reviewTime || '' }}</div
              >
            </span>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="display: flex; align-items: center; margin-bottom: 10px">
            <span style="font-weight: bold; min-width: 100px"
              >批准人/日期:</span
            >
            <span style="flex: 1">
              <div v-if="!isView" style="display: flex; align-items: center">
                <el-input
                  v-model="basicInfoData.checker"
                  placeholder="请输入批准人"
                  style="width: 120px"
                ></el-input>
                <el-date-picker
                  v-model="basicInfoData.approvedDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                  style="width: 140px"
                />
              </div>
              <div v-else
                >{{ basicInfoData.checker || '' }} /
                {{ basicInfoData.approvedDate || '' }}</div
              >
            </span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'QualityReport',
    props: {
      isView: {
        type: Boolean,
        default: false
      }
    },

    data() {
      return {
        // 基本信息数据
        basicInfoData: {},

        // 检验项目
        inspectionItems: []
      };
    },

    methods: {
      /* 打开质检报告 */
      async init(basicInfoData, inspectionItems) {
        this.$set(this, 'basicInfoData', basicInfoData);
        this.$set(this, 'inspectionItems', inspectionItems);
      },

      /* 保存编辑 */
      getValue() {
        return this.basicInfoData;
      }
    }
  };
</script>