bug

package.json

@@ -80,6 +80,7 @@
     "vue-qrcode": "^2.2.2",
     "vue-router": "^4.3.0",
     "vue3-pdfjs": "^0.1.6",
+    "vue3-print-nb": "^0.1.4",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {

src/main.ts

@@ -4,6 +4,7 @@ import router from "@/router";
 import { setupStore } from "@/store";
 import { setupDirective } from "@/directive";
 import { setupElIcons, setupI18n, setupPermission } from "@/plugins";
+import print from "vue3-print-nb";
 
 // 本地SVG图标
 import "virtual:svg-icons-register";
@@ -34,4 +35,4 @@ setupEleAvue(app);
 
 app.component("VueQrcode", VueQrcode);
 
-app.use(router).mount("#app");
+app.use(router).use(print).mount("#app");

src/views/quality/reject/components/process.vue

@@ -46,6 +46,11 @@
         <el-form-item
           label="不合格现象（质量问题）描述："
           prop="remark1[content]"
+          :rules="[
+            {
+              required: true,
+            },
+          ]"
         >
           <el-input type="textarea" v-model="formData.remark2.content" />
         </el-form-item>
@@ -97,7 +102,15 @@
         </el-row>
       </div>
       <div class="stage" v-if="userNameArray[1]">
-        <el-form-item label="原因分析：" prop="remark1[content]">
+        <el-form-item
+          label="原因分析："
+          prop="remark1[content]"
+          :rules="[
+            {
+              required: true,
+            },
+          ]"
+        >
           <el-input type="textarea" v-model="formData.remark3.content" />
         </el-form-item>
         <el-row>
@@ -163,7 +176,15 @@
       <div class="stage" v-if="userNameArray[2]">
         <el-row>
           <el-col :span="8">
-            <el-form-item label="是否有纠正措施：" prop="remark1[content]">
+            <el-form-item
+              label="是否有纠正措施："
+              prop="remark1[content]"
+              :rules="[
+                {
+                  required: true,
+                },
+              ]"
+            >
               <el-radio-group v-model="formData.remark4.res">
                 <el-radio value="0">否</el-radio>
                 <el-radio value="1">是</el-radio>
@@ -238,7 +259,15 @@
         </el-row>
       </div>
       <div class="stage" v-if="userNameArray[3]">
-        <el-form-item label="采取的措施：" prop="remark1[content]">
+        <el-form-item
+          label="采取的措施："
+          prop="remark1[content]"
+          :rules="[
+            {
+              required: true,
+            },
+          ]"
+        >
           <el-input type="textarea" v-model="formData.remark5.content" />
         </el-form-item>
         <el-row>
@@ -305,6 +334,11 @@
         <el-form-item
           label="不合格品评审（审理）处置意见："
           prop="remark1[content]"
+          :rules="[
+            {
+              required: true,
+            },
+          ]"
         >
           <el-input type="textarea" v-model="formData.remark6.content" />
         </el-form-item>
@@ -359,6 +393,11 @@
         <el-form-item
           label="组长（或分管领导）审批意见："
           prop="remark1[content]"
+          :rules="[
+            {
+              required: true,
+            },
+          ]"
         >
           <el-input type="textarea" v-model="formData.remark7.content" />
         </el-form-item>

src/views/quality/reject/components/show.vue

@@ -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>

src/views/quality/reject/index.vue

@@ -25,11 +25,15 @@
         >
           处理
         </el-button>
+        <el-button v-if="row.state == '3'" link @click="toShow(row)">
+          查看
+        </el-button>
       </template>
     </avue-crud>
     <div v-else>
       <Process :key="proccessKey" @get-list="getList" />
     </div>
+    <ShowVue v-model="showState" :tableData="tableData" />
   </div>
 </template>
 <script setup>
@@ -39,7 +43,14 @@ import ButtonPermKeys from "@/common/configs/buttonPermission";
 import { useCommonStoreHook, useDictionaryStore } from "@/store";
 import SingleUpload from "@/components/Upload/SingleUpload.vue";
 import Process from "./components/process.vue";
+import ShowVue from "./components/show.vue";
 const { dicts } = useDictionaryStore();
+const showState = ref(false);
+const toShow = (row) => {
+  tableData.value = setJson(row);
+  showState.value = true;
+};
+const tableData = ref();
 const proccessKey = ref(false);
 const examineStatus = ref(false);
 const formData = ref({});