质量报告 查看

src/views/statistic/report/index.vue

@@ -31,6 +31,7 @@
       </template>
     </avue-crud>
     <reportTemplate v-model="showStatus" :detail="detail" />
+    <ToPrintDialog ref="toPrintRef"></ToPrintDialog>
   </div>
 </template>
 
@@ -38,6 +39,7 @@
 import { ref, getCurrentInstance } from "vue";
 import { useCrud } from "@/hooks/userCrud";
 import reportTemplate from "@/components/ReportView/reportTemplate.vue";
+import ToPrintDialog from "./toPrintTables.vue";
 // 传入一个url，后面不带/
 const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
   useCrud({
@@ -47,24 +49,27 @@ const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
   Methords; //增删改查
 const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
 const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
-const tablesData=ref([]);
+const tablesData = ref([]);
 const crudRef = ref(null); //crudRef.value 获取avue-crud对象
 
 onMounted(() => {
   // console.log("crudRef", crudRef)
   dataList();
 });
-const showStatus=ref(false);
+const showStatus = ref(false);
 const importExcelData = () => {
   if (uploadRef.value) {
     uploadRef.value.show("/api/v1/plan/order/import");
   }
 };
 
-const detail=ref({});
+const toPrintRef = ref(null);
+
+const detail = ref({});
 const showDetail = (row) => {
-  showStatus.value=true;
-  detail.value=row;
+  // showStatus.value = true;
+  // detail.value = row;
+  toPrintRef.value && toPrintRef.value.openPrintDialog(row);
 };
 
 // 设置表格列或者其他自定义的option

src/views/statistic/report/toPrintTables.vue

@@ -0,0 +1,330 @@
+<script setup lang="ts">
+import { ElMessageBox } from "element-plus";
+import {
+  consistencyTestData,
+  moduleScreeningData,
+  productAcceptanceData,
+} from "@/api/statistic/reportMockData";
+
+const detail = ref<any>({});
+
+const dialogVisible = ref(false);
+
+const openPrintDialog = (row) => {
+  dialogVisible.value = true;
+  console.info("openPrintDialog", row);
+  //   在这里调接口
+  detail.value = row;
+};
+
+const handleClose = (done: () => void) => {};
+
+defineExpose({
+  openPrintDialog: openPrintDialog,
+});
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    width="1000"
+    append-to-body
+    align-center
+    :close-on-click-modal="false"
+  >
+    <div>
+      <el-scrollbar class="scroll-container">
+        <div id="print">
+          <div class="tableInfo">
+            <div style="page-break-after: always">
+              <div
+                class="title"
+                style="text-align: center"
+                v-if="detail.reportType == 1"
+              >
+                质量日报({{ detail.generationDate }})
+              </div>
+              <div
+                class="title"
+                style="text-align: center"
+                v-if="detail.reportType == 2"
+              >
+                质量月报({{ detail.generationDate }})
+              </div>
+
+              <div class="tableTitle">模块筛选情况</div>
+              <table>
+                <thead>
+                  <tr>
+                    <th>序号</th>
+                    <th id="lineId" colspan="2">
+                      <span style="float: left; margin-top: 10px"
+                        >产品型号<br />检验批号</span
+                      >
+                      <span style="float: right; margin-top: 10px"
+                        >筛选项目</span
+                      >
+                    </th>
+                    <th>封前 目检</th>
+                    <th>随机 振动</th>
+                    <th>稳定性 烘烤</th>
+                    <th>电测 试</th>
+                    <th>温度 循环</th>
+                    <th>老化</th>
+                    <th>最终电测试</th>
+                    <th>绝缘电阻</th>
+                    <th>外部 目检</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(item, index) in moduleScreeningData" :key="index">
+                    <td>{{ item.id }}</td>
+                    <td>{{ item.model }} {{ item.batch }}</td>
+                    <td>
+                      <div>数量</div>
+                      <div>剔除数</div>
+                    </td>
+                    <td>
+                      <div>{{ item.preInspection.quantity }}</div>
+                      <div>{{ item.preInspection.rejects }}</div>
+                    </td>
+                    <td>
+                      <div>{{ item.highTempStorage.quantity }}</div>
+                      <div>{{ item.highTempStorage.rejects }}</div>
+                    </td>
+                    <td>
+                      <div>{{ item.tempCycle.quantity }}</div>
+                      <div>{{ item.tempCycle.rejects }}</div>
+                    </td>
+                    <td>
+                      <div>{{ item.randomVibration.quantity }}</div>
+                      <div>{{ item.randomVibration.rejects }}</div>
+                    </td>
+                    <td>
+                      <div>{{ item.electricalTest.quantity }}</div>
+                      <div>{{ item.electricalTest.rejects }}</div>
+                    </td>
+                    <td>
+                      <div>{{ item.aging.quantity }}</div>
+                      <div>{{ item.aging.rejects }}</div>
+                    </td>
+                    <td>
+                      <div>{{ item.finalElectricalTest.quantity }}</div>
+                      <div>{{ item.finalElectricalTest.rejects }}</div>
+                    </td>
+                    <td>
+                      <div>{{ item.externalInspection.quantity }}</div>
+                      <div>{{ item.externalInspection.rejects }}</div>
+                    </td>
+                    <td>
+                      <div>{{ item.externalInspection.quantity }}</div>
+                      <div>{{ item.externalInspection.rejects }}</div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div style="page-break-after: always">
+              <div class="tableTitle" style="margin-top: 100px">
+                质量一致性检验
+              </div>
+              <div class="info">
+                <div class="text">产品型号：</div>
+                <div class="text">产品批次：</div>
+                <div class="text">报告日期：2025年03月23日</div>
+              </div>
+              <table>
+                <thead>
+                  <tr>
+                    <th>序号</th>
+                    <th>产品型号</th>
+                    <th>批号</th>
+                    <th>质量一致性检验情况</th>
+                    <th>留样数量</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(item, index) in consistencyTestData" :key="index">
+                    <td>{{ item.id }}</td>
+                    <td>{{ item.model }}</td>
+                    <td>{{ item.batch }}</td>
+                    <td>{{ item.inspectionStatus }}</td>
+                    <td>{{ item.sampleQuantity }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div class="tableTitle" style="margin-top: 100px">
+              产品代验收情况
+            </div>
+            <div class="info">
+              <div class="text">产品型号：</div>
+              <div class="text">产品批次：</div>
+              <div class="text">报告日期：2025年03月23日</div>
+            </div>
+            <table>
+              <thead>
+                <tr>
+                  <th>序号</th>
+                  <th>产品型号</th>
+                  <th>批号</th>
+                  <th>数量</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(item, index) in productAcceptanceData" :key="index">
+                  <td>{{ item.id }}</td>
+                  <td>{{ item.model }}</td>
+                  <td>{{ item.batch }}</td>
+                  <td>{{ item.sampleQuantity }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </el-scrollbar>
+    </div>
+    <template #header>
+      <div class="dialog-header">
+        <div>报告预览</div>
+        <el-button type="primary" size="small" @click="dialogVisible = false">
+          打印
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped lang="scss">
+.dialog-header {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  gap: 20px;
+}
+
+.scroll-container {
+  height: calc(100vh - 200px);
+}
+
+#lineId {
+  background: #f2f2f2
+    url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=)
+    no-repeat 100% 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; /* 设置表头的背景颜色 */
+}
+
+.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: 80%;
+    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;
+
+  .tableTitle {
+    margin: 10px 0;
+    font-size: 20px;
+    font-weight: 600;
+    letter-spacing: 20px;
+    text-align: center;
+  }
+
+  .title {
+    margin: 10px 0;
+    font-size: 20px;
+    font-weight: 600;
+  }
+  .info {
+    display: flex;
+    padding: 0 20px;
+    justify-content: space-between;
+  }
+}
+
+.slash {
+  position: relative;
+}
+.slash::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  border-left: 1px solid #444;
+  transform: rotate(45deg);
+  transform-origin: 0 0;
+}
+.split-line {
+  border-bottom: 1px solid #444;
+  padding: 4px 0;
+}
+
+//上下分割成两行的
+.top-and-bottom {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  border: 0;
+  .content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .middle-line {
+    width: 100%;
+    height: 1px;
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+}
+</style>

tsconfig.json

@@ -12,7 +12,7 @@
     "lib": ["esnext", "dom"],
     "baseUrl": ".",
     "allowJs": true,
-    "noImplicitAny": true,
+    "noImplicitAny": false,
     "paths": {
       "@/*": ["src/*"]
     },