|
|
@@ -0,0 +1,469 @@
|
|
|
+<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 }}</td>
|
|
|
+ <td class="titlesmall">检验批号或生产批号</td>
|
|
|
+ <td class="titleVal">{{ tableData.orderNo }}</td>
|
|
|
+ <td class="titlesmall">数量</td>
|
|
|
+ <td class="titleVal">
|
|
|
+ {{ tableData.remark1.num ? tableData.remark1.num : "/" }}
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="titlesmall">编号</td>
|
|
|
+ <td colspan="5">
|
|
|
+ {{ tableData.code ? tableData.code : "/" }}
|
|
|
+ </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" value="1" name="options1" />
|
|
|
+ 一级 </label
|
|
|
+ ><br />
|
|
|
+ <label>
|
|
|
+ <input type="checkbox" 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>
|
|
|
+ <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"
|
|
|
+ name="options2"
|
|
|
+ />
|
|
|
+ 否 </label
|
|
|
+ ><br />
|
|
|
+ <label>
|
|
|
+ <input
|
|
|
+ type="checkbox"
|
|
|
+ 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.remark3.content
|
|
|
+ ? tableData.remark3.content
|
|
|
+ : "/"
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sale-content">
|
|
|
+ {{
|
|
|
+ tableData.remark4.content
|
|
|
+ ? tableData.remark4.content
|
|
|
+ : "/"
|
|
|
+ }}
|
|
|
+ </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>
|
|
|
+ <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");
|
|
|
+ console.log(checkboxes1, checkboxes2);
|
|
|
+};
|
|
|
+onMounted(() => {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+}
|
|
|
+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>
|
