JG-ADMIN-TEMP/src/views/quality/reject/components/show.vue

<template>
  <div class="bgColor" @click="close" v-if="modelValue">
    <div class="body" @click.stop>
      <div class="header">
        <div class="text">详情查看</div>
        <div class="delete">
          <el-button
            style="margin-right: 10px"
            type="primary"
            size="small"
            class="btn"
            v-print="'#print'"
            >打印</el-button
          >
          <span style="padding: 20px; cursor: pointer" @click="close">X</span>
        </div>
      </div>
      <div class="box">
        <el-scrollbar>
          <div id="print">
            <div class="tableInfo">
              <div class="title" style="text-align: center">
                不合格品（质量问题）分析评审处置表
              </div>
              <div class="info">
                <div class="text">表号：JLB-14-1</div>
              </div>

              <table>
                <thead></thead>
                <tbody>
                  <tr>
                    <td class="titlesmall">产品名称以及型号</td>
                    <td class="titleVal">
                      {{ tableData.materialName }}&nbsp;{{
                        tableData.materialModel
                      }}
                    </td>
                    <td class="titlesmall">工单号</td>
                    <td class="titleVal">{{ tableData.workOrderCode }}</td>
                    <td class="titlesmall">数量</td>
                    <td class="titleVal">
                      {{ tableData.num ? tableData.num : "/" }}
                    </td>
                  </tr>
                  <tr>
                    <td class="titlesmall">管号</td>
                    <td colspan="5">
                      {{ tableData.seqs ? tableData.seqs : "/" }}
                    </td>
                  </tr>
                  <tr>
                    <td class="titlesmall">发生单位或地点</td>
                    <td class="titleVal">
                      {{ tableData.address ? tableData.address : "/" }}
                    </td>
                    <td class="titlesmall">发生阶段</td>
                    <td class="titleVal">
                      {{ tableData.stage ? tableData.stage : "/" }}
                    </td>
                    <td class="titlesmall">发生时间</td>
                    <td class="titleVal">
                      {{
                        tableData.remark1.time ? tableData.remark1.time : "/"
                      }}
                    </td>
                  </tr>
                  <tr>
                    <td class="titlesmall">审理级别</td>
                    <td colspan="5">
                      <form id="checkboxForm1">
                        <label>
                          <input
                            type="checkbox"
                            disabled
                            value="1"
                            name="options1"
                          />
                          一级 </label
                        ><br />
                        <label>
                          <input
                            type="checkbox"
                            disabled
                            value="2"
                            name="options1"
                          />
                          二级 </label
                        ><br />
                      </form>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="6">
                      <div class="sale-box">
                        <div class="sale-title">
                          不合格现象（质量问题）描述：
                        </div>
                        <div class="sale-content">
                          {{
                            tableData.remark2.content
                              ? tableData.remark2.content
                              : "/"
                          }}
                        </div>
                        <div class="sale-bottom">
                          <div class="desc">
                            填表人:
                            {{
                              tableData.remark1.user1
                                ? tableData.remark1.user1
                                : "/"
                            }}
                          </div>
                          <div class="desc">
                            日期:
                            {{
                              tableData.remark1.time
                                ? tableData.remark1.time
                                : "/"
                            }}
                          </div>
                          <div class="desc">
                            检验人员:
                            {{
                              tableData.remark2.user2
                                ? tableData.remark2.user2
                                : "/"
                            }}
                          </div>
                          <div class="desc">
                            日期:
                            {{
                              tableData.remark2.time
                                ? tableData.remark2.time
                                : "/"
                            }}
                          </div>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="6">
                      <div class="sale-box">
                        <div class="sale-title">原因分析：</div>
                        <div class="sale-content">
                          {{
                            tableData.remark3.content
                              ? tableData.remark3.content
                              : "/"
                          }}
                          <div
                            class="noPrint"
                            v-if="
                              undefined != tableData.remark3.srcList &&
                              null != tableData.remark3.srcList &&
                              tableData.remark3.srcList.length > 0
                            "
                          >
                            <div>附件：</div>
                            <div
                              v-for="(item, index) in tableData.remark3
                                .fileNameList"
                              :key="index"
                            >
                              {{ item }}
                              <a :href="tableData.remark3.srcList[index]"
                                ><el-button type="primary" round size="small"
                                  >下载</el-button
                                >
                              </a>
                            </div>
                          </div>
                        </div>
                        <div class="sale-bottom">
                          <div class="desc">
                            分析人:
                            {{
                              tableData.remark3.user3
                                ? tableData.remark3.user3
                                : "/"
                            }}
                          </div>
                          <div class="desc">
                            日期:
                            {{
                              tableData.remark3.time
                                ? tableData.remark3.time
                                : "/"
                            }}
                          </div>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="6">
                      <div class="sale-box">
                        <div class="sale-title">是否有纠正措施：</div>
                        <div class="sale-title">
                          <div style="display: flex; align-items: center">
                            <div>
                              <form id="checkboxForm2">
                                <label>
                                  <input
                                    type="checkbox"
                                    value="0"
                                    disabled
                                    name="options2"
                                  />
                                  否 </label
                                ><br />
                                <label>
                                  <input
                                    type="checkbox"
                                    disabled
                                    value="1"
                                    name="options2"
                                  />
                                  是 </label
                                ><br />
                              </form>
                            </div>
                            <div style="margin-left: 20px">
                              纠正措施通知单号：
                            </div>
                            <span
                              style="
                                width: 200px;
                                height: 100%;
                                border-bottom: 1px solid black;
                                text-align: center;
                              "
                            >
                              {{
                                tableData.remark4.resNum
                                  ? tableData.remark4.resNum
                                  : "/"
                              }}</span
                            >
                          </div>
                        </div>
                        <div class="sale-content">
                          {{
                            tableData.remark4.content
                              ? tableData.remark4.content
                              : "/"
                          }}
                          <div
                            class="noPrint"
                            v-if="
                              undefined != tableData.remark4.srcList &&
                              null != tableData.remark4.srcList &&
                              tableData.remark4.srcList.length > 0
                            "
                          >
                            <div>附件：</div>
                            <div
                              v-for="(item, index) in tableData.remark4
                                .fileNameList"
                              :key="index"
                            >
                              {{ item }}
                              <a :href="tableData.remark4.srcList[index]"
                                ><el-button type="primary" round size="small"
                                  >下载</el-button
                                >
                              </a>
                            </div>
                          </div>
                        </div>
                        <div class="sale-bottom">
                          <div class="desc">
                            分析人:
                            {{
                              tableData.remark4.user4
                                ? tableData.remark4.user4
                                : "/"
                            }}
                          </div>
                          <div class="desc">
                            日期:
                            {{
                              tableData.remark4.time
                                ? tableData.remark4.time
                                : "/"
                            }}
                          </div>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="6">
                      <div class="sale-box">
                        <div class="sale-title">采取的措施：</div>
                        <div class="sale-content">
                          {{
                            tableData.remark5.content
                              ? tableData.remark5.content
                              : "/"
                          }}
                          <div
                            class="noPrint"
                            v-if="
                              undefined != tableData.remark5.srcList &&
                              null != tableData.remark5.srcList &&
                              tableData.remark5.srcList.length > 0
                            "
                          >
                            <div>附件：</div>
                            <div
                              v-for="(item, index) in tableData.remark5
                                .fileNameList"
                              :key="index"
                            >
                              {{ item }}
                              <a :href="tableData.remark5.srcList[index]"
                                ><el-button type="primary" round size="small"
                                  >下载</el-button
                                >
                              </a>
                            </div>
                          </div>
                        </div>
                        <div class="sale-bottom">
                          <div class="desc">
                            责任部门负责人:
                            {{
                              tableData.remark5.user5
                                ? tableData.remark5.user5
                                : "/"
                            }}
                          </div>
                          <div class="desc">
                            日期:
                            {{
                              tableData.remark5.time
                                ? tableData.remark5.time
                                : "/"
                            }}
                          </div>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="6">
                      <div class="sale-box">
                        <div class="sale-title">
                          不合格品评审（审理）处置意见：
                        </div>
                        <div class="sale-content">
                          {{
                            tableData.remark6.content
                              ? tableData.remark6.content
                              : "/"
                          }}
                        </div>
                        <div class="sale-bottom">
                          <div class="desc">
                            签字:{{
                              tableData.remark6.user6
                                ? tableData.remark6.user6
                                : "/"
                            }}
                          </div>
                          <div class="desc">
                            日期:
                            {{
                              tableData.remark6.time
                                ? tableData.remark6.time
                                : "/"
                            }}
                          </div>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="6">
                      <div class="sale-box">
                        <div class="sale-title">组长（或分管领导）审批意见</div>
                        <div class="sale-content">
                          {{
                            tableData.remark7.content
                              ? tableData.remark7.content
                              : "/"
                          }}
                        </div>
                        <div class="sale-bottom">
                          <div class="desc">
                            签字:{{
                              tableData.remark7.user7
                                ? tableData.remark7.user7
                                : "/"
                            }}
                          </div>
                          <div class="desc">
                            日期:
                            {{
                              tableData.remark7.time
                                ? tableData.remark7.time
                                : "/"
                            }}
                          </div>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: [Boolean],
  },
  tableData: {
    type: [Object],
  },
});
const emits = defineEmits(["update:modelValue"]);
const close = () => {
  emits("update:modelValue", false);
};
const setBoxValue = () => {
  const checkboxes1 = document.getElementsByName("options1");
  const checkboxes2 = document.getElementsByName("options2");
  if (props.tableData.remark1.lv == "1") {
    checkboxes1[0].checked = true;
  } else if (props.tableData.remark1?.lv == "2") {
    checkboxes1[1].checked = true;
  }
  if (props.tableData.remark4.res == "0") {
    checkboxes2[0].checked = true;
  } else if (props.tableData.remark4?.res == "1") {
    checkboxes2[1].checked = true;
  }
  if (
    undefined != props.tableData.seqs &&
    null != props.tableData.seqs &&
    "" != props.tableData.seqs
  ) {
    props.tableData.num = props.tableData.seqs.split(",").length;
  } else {
    props.tableData.num = 0;
  }
};
import dictDataUtil from "@/common/configs/dictDataUtil";
watch(
  () => props.tableData,
  () => {
    nextTick(() => {
      setBoxValue();
    });
  }
);
</script>

<style lang="scss" scoped>
#checkboxForm1 {
  display: flex;
  justify-content: space-between;
  padding: 0 40px;
}
#checkboxForm2 {
  display: flex;
  label {
    margin-right: 20px;
  }
}
.titlesmall {
  width: 100px;
  text-align: center;
}
.titleVal {
  text-align: center;
}
@media print {
  #print {
    position: absolute; /* 或 absolute, fixed, 根据需要调整 */
    top: 20px; /* 调整顶部位置 */
    margin: 0; /* 重置边距 */
    width: 700px;
  }
  .noPrint {
    display: none;
  }
}
table {
  width: 100%;
  border-collapse: collapse; /* 合并表格边框 */
}
th,
td {
  border: 1px solid rgba(0, 0, 0, 0.3); /* 设置所有单元格的边框 */
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2; /* 设置表头的背景颜色 */
}
.sale-box {
  .sale-title {
    font-size: 16px;
    margin-bottom: 5px;
    text-align: start;
  }
  .sale-content {
    font-size: 16px;
    margin-bottom: 10px;
    text-align: start;
    padding: 0 8px;
  }
  .sale-bottom {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }
  .desc {
    margin-right: 20px;
  }
}
.bgColor {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  background-color: rgba(0, 0, 0, 0.3);
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  .body {
    width: 800px;
    height: 85vh;
    background-color: white;
    display: flex;
    flex-direction: column;
    padding: 20px;
    .header {
      width: 100%;
      height: 40px;
      display: flex;
      padding-bottom: 10px;
      justify-content: space-between;
      border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    }
    .box {
      height: calc(100% - 40px);
    }
  }
}
.tableInfo {
  width: 100%;
  height: 60px;

  .title {
    margin: 10px 0;
    font-size: 20px;
    font-weight: 600;
  }
  .info {
    display: flex;
    justify-content: space-between;
  }
}
</style>