修改质量报告页面

src/api/statistic/reportMockData.ts

@@ -0,0 +1,494 @@
+import { da, id } from "element-plus/es/locale";
+
+export const getMockData = async () => {
+  const records = [
+    {
+      id: 1,
+      reportCode: "RC001",
+      reportName: "报告A",
+      reportType: "1",
+      creator: "张三",
+      created: "2025-03-22",
+    },
+    {
+      id: 2,
+      reportCode: "RC002",
+      reportName: "报告B",
+      reportType: "2",
+      creator: "李四",
+      created: "2025-03-22",
+    },
+    {
+      id: 3,
+      reportCode: "RC003",
+      reportName: "报告C",
+      reportType: "1",
+      creator: "王五",
+      created: "2025-03-22",
+    },
+    {
+      id: 4,
+      reportCode: "RC004",
+      reportName: "报告D",
+      reportType: "2",
+      creator: "赵六",
+      created: "2025-03-22",
+    },
+    {
+      id: 5,
+      reportCode: "RC005",
+      reportName: "报告E",
+      reportType: "1",
+      creator: "孙七",
+      created: "2025-03-22",
+    },
+    {
+      id: 6,
+      reportCode: "RC006",
+      reportName: "报告F",
+      reportType: "2",
+      creator: "周八",
+      created: "2025-03-22",
+    },
+    {
+      id: 7,
+      reportCode: "RC007",
+      reportName: "报告G",
+      reportType: "1",
+      creator: "吴九",
+      created: "2025-03-22",
+    },
+    {
+      id: 8,
+      reportCode: "RC008",
+      reportName: "报告H",
+      reportType: "2",
+      creator: "郑十",
+      created: "2025-03-22",
+    },
+    {
+      id: 9,
+      reportCode: "RC009",
+      reportName: "报告I",
+      reportType: "1",
+      creator: "冯十一",
+      created: "2025-03-22",
+    },
+    {
+      id: 10,
+      reportCode: "RC010",
+      reportName: "报告J",
+      reportType: "2",
+      creator: "陈十二",
+      created: "2025-03-22",
+    },
+    {
+      id: 11,
+      reportCode: "RC011",
+      reportName: "报告K",
+      reportType: "1",
+      creator: "褚十三",
+      created: "2025-03-22",
+    },
+    {
+      id: 12,
+      reportCode: "RC012",
+      reportName: "报告L",
+      reportType: "2",
+      creator: "卫十四",
+      created: "2025-03-22",
+    },
+  ];
+  return {
+    data: {
+      records: records,
+      totalCount: records.length,
+    },
+  };
+};
+
+export const moduleScreeningData = ref([
+  {
+    id: 1,
+    model: "TM157-C",
+    batch: "2401",
+    preInspection: { quantity: 2, rejects: 0 },
+    highTempStorage: { quantity: 2, rejects: 0 },
+    tempCycle: { quantity: 2, rejects: 0 },
+    randomVibration: { quantity: 2, rejects: 0 },
+    electricalTest: { quantity: 2, rejects: 0 },
+    aging: { quantity: 2, rejects: 0 },
+    finalElectricalTest: { quantity: 2, rejects: 0 },
+    externalInspection: { quantity: 2, rejects: 0 },
+  },
+  {
+    id: 2,
+    model: "HJ-195C",
+    batch: "2405",
+    preInspection: { quantity: 11, rejects: 0 },
+    highTempStorage: { quantity: 11, rejects: 0 },
+    tempCycle: { quantity: 11, rejects: 0 },
+    randomVibration: { quantity: 11, rejects: 0 },
+    electricalTest: { quantity: 11, rejects: 0 },
+    aging: { quantity: 11, rejects: 0 },
+    finalElectricalTest: { quantity: 11, rejects: 0 },
+    externalInspection: { quantity: 11, rejects: 0 },
+  },
+  {
+    id: 3,
+    model: "TM591",
+    batch: "2312",
+    preInspection: { quantity: 10, rejects: 0 },
+    highTempStorage: { quantity: 10, rejects: 0 },
+    tempCycle: { quantity: 10, rejects: 0 },
+    randomVibration: { quantity: 10, rejects: 0 },
+    electricalTest: { quantity: 10, rejects: 0 },
+    aging: { quantity: 10, rejects: 0 },
+    finalElectricalTest: { quantity: 10, rejects: 0 },
+    externalInspection: { quantity: 10, rejects: 0 },
+  },
+  {
+    id: 4,
+    model: "TM665",
+    batch: "2403",
+    preInspection: { quantity: 2, rejects: 0 },
+    highTempStorage: { quantity: 2, rejects: 0 },
+    tempCycle: { quantity: 2, rejects: 0 },
+    randomVibration: { quantity: 2, rejects: 0 },
+    electricalTest: { quantity: 2, rejects: 0 },
+    aging: { quantity: 2, rejects: 0 },
+    finalElectricalTest: { quantity: 2, rejects: 0 },
+    externalInspection: { quantity: 2, rejects: 0 },
+  },
+  {
+    id: 5,
+    model: "TP28DC3A",
+    batch: "2406",
+    preInspection: { quantity: 6, rejects: 0 },
+    highTempStorage: { quantity: 6, rejects: 0 },
+    tempCycle: { quantity: 6, rejects: 0 },
+    randomVibration: { quantity: 6, rejects: 0 },
+    electricalTest: { quantity: 6, rejects: 0 },
+    aging: { quantity: 6, rejects: 0 },
+    finalElectricalTest: { quantity: 6, rejects: 0 },
+    externalInspection: { quantity: 6, rejects: 0 },
+  },
+  {
+    id: 6,
+    model: "TS200DC28S28S(K)",
+    batch: "2406",
+    preInspection: { quantity: 5, rejects: 0 },
+    highTempStorage: { quantity: 5, rejects: 0 },
+    tempCycle: { quantity: 5, rejects: 0 },
+    randomVibration: { quantity: 5, rejects: 0 },
+    electricalTest: { quantity: 5, rejects: 0 },
+    aging: { quantity: 5, rejects: 0 },
+    finalElectricalTest: { quantity: 5, rejects: 0 },
+    externalInspection: { quantity: 5, rejects: 0 },
+  },
+  {
+    id: 7,
+    model: "TM535G",
+    batch: "2312",
+    preInspection: { quantity: 5, rejects: 0 },
+    highTempStorage: { quantity: 5, rejects: 0 },
+    tempCycle: { quantity: 5, rejects: 0 },
+    randomVibration: { quantity: 5, rejects: 0 },
+    electricalTest: { quantity: 5, rejects: 0 },
+    aging: { quantity: 5, rejects: 0 },
+    finalElectricalTest: { quantity: 5, rejects: 0 },
+    externalInspection: { quantity: 5, rejects: 0 },
+  },
+]);
+
+export const consistencyTestData = ref([
+  {
+    id: 1,
+    model: "JTH80DC28S12LB0G",
+    batch: "2404",
+    inspectionStatus: "正在进行",
+    sampleQuantity: "13",
+  },
+  {
+    id: 2,
+    model: "JTPM75RSK060Mb",
+    batch: "2411",
+    inspectionStatus: "正在进行",
+    sampleQuantity: "13",
+  },
+  {
+    id: 3,
+    model: "JTH121MC",
+    batch: "2415",
+    inspectionStatus: "已完成",
+    sampleQuantity: "10",
+  },
+  {
+    id: 4,
+    model: "JTH707MC",
+    batch: "2415",
+    inspectionStatus: "已完成",
+    sampleQuantity: "10",
+  },
+  {
+    id: 5,
+    model: "JTH120DC28S28LB0G",
+    batch: "2406",
+    inspectionStatus: "正在进行",
+    sampleQuantity: "13",
+  },
+  {
+    id: 6,
+    model: "JTH20DC28D±18QL0G",
+    batch: "2413",
+    inspectionStatus: "正在进行",
+    sampleQuantity: "16+2 只不合格品",
+  },
+  {
+    id: 7,
+    model: "JTH15DC28S5SQG",
+    batch: "2350",
+    inspectionStatus: "正在进行",
+    sampleQuantity: "10",
+  },
+  {
+    id: 8,
+    model: "JTH40DC28D±15PL0G",
+    batch: "2324",
+    inspectionStatus: "正在进行",
+    sampleQuantity: "10",
+  },
+  {
+    id: 9,
+    model: "TH329HMC",
+    batch: "2415",
+    inspectionStatus: "正在进行",
+    sampleQuantity: "10",
+  },
+  {
+    id: 10,
+    model: "JTH163",
+    batch: "2416",
+    inspectionStatus: "已完成",
+    sampleQuantity: "3+2 只不合格品（周期性检验）",
+  },
+  {
+    id: 11,
+    model: "JTH437MC",
+    batch: "2418",
+    inspectionStatus: "正在进行",
+    sampleQuantity: "10",
+  },
+  {
+    id: 12,
+    model: "JTH20DC28S5QL-B",
+    batch: "2417",
+    inspectionStatus: "正在进行",
+    sampleQuantity: "13",
+  },
+  {
+    id: 13,
+    model: "JTH20DC28S12NHMC",
+    batch: "2418",
+    inspectionStatus: "正在进行",
+    sampleQuantity: "3+2 只不合格品（周期性检验）",
+  },
+  {
+    id: 14,
+    model: "JTH121MC",
+    batch: "2420",
+    inspectionStatus: "正在进行",
+    sampleQuantity: "3 只不合格品（周期性检验）",
+  },
+  {
+    id: 15,
+    model: "JTH20DC28S12NHMC",
+    batch: "2423",
+    inspectionStatus: "正在进行",
+    sampleQuantity: "3（周期性检验）",
+  },
+  {
+    id: 16,
+    model: "JTPM75RSK060Mb",
+    batch: "2424",
+    inspectionStatus: "正在进行",
+    sampleQuantity: "3+2 只不合格品（周期性检验）",
+  },
+  {
+    id: 17,
+    model: "JTH117MC",
+    batch: "2425",
+    inspectionStatus: "正在进行",
+    sampleQuantity: "10",
+  },
+  {
+    id: 18,
+    model: "JTH422GMC",
+    batch: "2421",
+    inspectionStatus: "正在进行",
+    sampleQuantity: "10",
+  },
+  {
+    id: 19,
+    model: "MTPM2209-P1(底座)",
+    batch: "2412",
+    inspectionStatus: "正在进行",
+    sampleQuantity: "10（周期性检验）",
+  },
+  {
+    id: 20,
+    model: "MTPM2211-P1a（底座）",
+    batch: "2412",
+    inspectionStatus: "已完成",
+    sampleQuantity: "20",
+  },
+  {
+    id: 21,
+    model: "MTPM2211-P1a（盖板）",
+    batch: "2352",
+    inspectionStatus: "已完成",
+    sampleQuantity: "15",
+  },
+  {
+    id: 22,
+    model: "MSPM2620-P3(底座)",
+    batch: "2415",
+    inspectionStatus: "正在进行",
+    sampleQuantity: "20",
+  },
+]);
+
+export const productAcceptanceData = ref([
+  {
+    id: 1,
+    model: "JTH80DC28S12LB0G",
+    batch: "2404",
+    sampleQuantity: 13,
+  },
+  {
+    id: 2,
+    model: "JTPM75RSK060Mb",
+    batch: "2411",
+    sampleQuantity: 13,
+  },
+  {
+    id: 3,
+    model: "JTH121MC",
+    batch: "2415",
+    sampleQuantity: 10,
+  },
+  {
+    id: 4,
+    model: "JTH707MC",
+    batch: "2415",
+    sampleQuantity: 10,
+  },
+  {
+    id: 5,
+    model: "JTH120DC28S28LB0G",
+    batch: "2406",
+    sampleQuantity: 13,
+  },
+  {
+    id: 6,
+    model: "JTH20DC28D±18QL0G",
+    batch: "2413",
+    sampleQuantity: 18,
+  },
+  {
+    id: 7,
+    model: "JTH15DC28S5SQG",
+    batch: "2350",
+    sampleQuantity: 10,
+  },
+  {
+    id: 8,
+    model: "JTH40DC28D±15PL0G",
+    batch: "2324",
+    sampleQuantity: 10,
+  },
+  {
+    id: 9,
+    model: "TH329HMC",
+    batch: "2415",
+    sampleQuantity: 10,
+  },
+  {
+    id: 10,
+    model: "JTH163",
+    batch: "2416",
+    sampleQuantity: 5,
+  },
+  {
+    id: 11,
+    model: "JTH437MC",
+    batch: "2418",
+    sampleQuantity: 10,
+  },
+  {
+    id: 12,
+    model: "JTH20DC28S5QL-B",
+    batch: "2417",
+    sampleQuantity: 13,
+  },
+  {
+    id: 13,
+    model: "JTH20DC28S12NHMC",
+    batch: "2418",
+    sampleQuantity: 5,
+  },
+  {
+    id: 14,
+    model: "JTH121MC",
+    batch: "2420",
+    sampleQuantity: 3,
+  },
+  {
+    id: 15,
+    model: "JTH20DC28S12NHMC",
+    batch: "2423",
+    sampleQuantity: 3,
+  },
+  {
+    id: 16,
+    model: "JTPM75RSK060Mb",
+    batch: "2424",
+    sampleQuantity: 5,
+  },
+  {
+    id: 17,
+    model: "JTH117MC",
+    batch: "2425",
+    sampleQuantity: 10,
+  },
+  {
+    id: 18,
+    model: "JTH422GMC",
+    batch: "2421",
+    sampleQuantity: 10,
+  },
+  {
+    id: 19,
+    model: "MTPM2209-P1(底座)",
+    batch: "2412",
+    sampleQuantity: 10,
+  },
+  {
+    id: 20,
+    model: "MTPM2211-P1a（底座）",
+    batch: "2412",
+    sampleQuantity: 20,
+  },
+  {
+    id: 21,
+    model: "MTPM2211-P1a（盖板）",
+    batch: "2352",
+    sampleQuantity: 15,
+  },
+  {
+    id: 22,
+    model: "MSPM2620-P3(底座)",
+    batch: "2415",
+    sampleQuantity: 20,
+  },
+]);

src/components/ReportView/reportTemplate.vue

@@ -0,0 +1,286 @@
+<template>
+  <div class="bgColor" v-if="modelValue" @click.stop="close">
+    <div class="body">
+      <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" @click="close">X</span>
+        </div>
+      </div>
+      <div class="box">
+        <el-scrollbar>
+          <div id="print">
+            <div class="tableInfo">
+              <div style="page-break-after: always">
+                <div class="title" style="text-align: center">质量日报</div>
+                <div class="tableTitle">模块筛选情况</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 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>
+                    </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>
+                    </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>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  moduleScreeningData,
+  consistencyTestData,
+  productAcceptanceData,
+} from "@/api/statistic/reportMockData.ts";
+
+const props = defineProps({
+  modelValue: {
+    type: [Boolean],
+  },
+  // tablesData: {
+  //   type: [Object],
+  // },
+});
+const emits = defineEmits(["update:modelValue"]);
+const close = () => {
+  emits("update:modelValue", false);
+};
+// import html2canvas from "html2canvas";
+
+// const downloadPNG = async () => {
+//   try {
+//     const canvas = await html2canvas(document.getElementById("print"));
+//     const imgData = canvas.toDataURL("image/png");
+//     const downloadLink = document.createElement("a");
+//     downloadLink.href = imgData;
+//     downloadLink.download = "download.png";
+//     downloadLink.click();
+//   } catch (error) {
+//     console.error("Error generating PNG:", error);
+//   }
+// };
+</script>
+
+<style lang="scss" scoped>
+#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;
+  }
+}
+</style>

src/views/statistic/report/index.vue

@@ -1,13 +1,19 @@
 <template>
   <div class="container1">
-    <div class="header">
+    <div class="header" v-show="!addStatus && !editStatus">
       <Search
         ref="searchref"
         :searchOptions="searchOptons"
         @data-list="getTableData"
       />
     </div>
-    <div class="table">
+    <div class="table" v-if="!addStatus && !editStatus">
+      <div class="tableheader">
+        <el-button type="primary" size="small" class="btn" @click="toAdd"
+          >新增</el-button
+        >
+        <el-button class="btn" @click="exportFnc">导出</el-button>
+      </div>
       <!-- <el-button class="btn" style="margin-bottom: 5px" @click="showPrint"
         >打印</el-button
       > -->
@@ -18,6 +24,11 @@
       >
         <el-table-column prop="reportCode" label="报告编码" />
         <el-table-column prop="reportName" label="报告名称" />
+        <el-table-column label="报告类型">
+          <template #default="{ row }">
+            {{ row.reportType === "1" ? "日报" : "月报" }}
+          </template>
+        </el-table-column>
         <el-table-column prop="creator" label="创建人" />
         <el-table-column prop="created" label="创建时间" />
         <el-table-column
@@ -32,25 +43,103 @@
               type="primary"
               class="btn"
               style="height: 25px"
-              @click="toLook(row)"
+              @click="toEdit(row)"
+              link
+              >编辑</el-button
+            >
+            <el-button
+              type="primary"
+              class="btn"
+              style="height: 25px"
+              @click="showPrint(row)"
               link
               >查看</el-button
             >
+            <el-button
+              type="info"
+              class="btn"
+              style="height: 25px"
+              link
+              @click="toDelete(row.id)"
+              >删除</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
       <Pagination />
     </div>
-    <ReportView v-model="showStatus" :tableData="tableData" />
+    <div v-if="addStatus || editStatus" class="formView">
+      <div class="formTitle">
+        {{ addStatus ? "新增报告" : "编辑报告" }}
+      </div>
+      <el-scrollbar style="height: calc(100% - 60px)">
+        <el-form
+          ref="ruleFormRef"
+          :model="formData"
+          :rules="rules"
+          label-width="auto"
+          class="formStyle"
+        >
+          <el-form-item label="报告编码" prop="reportCode">
+            <el-input v-model="formData.reportCode" />
+          </el-form-item>
+          <el-form-item label="报告名称" prop="reportName">
+            <el-input v-model="formData.reportName" />
+          </el-form-item>
+          <el-form-item label="报告类型" prop="reportType">
+            <el-select v-model="formData.reportType">
+              <el-option
+                v-for="(item, index) in reportTypeOptions"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="产品型号" prop="prodtCode">
+            <el-input v-model="formData.prodtCode" />
+          </el-form-item>
+          <el-form-item label="产品批次" prop="batchNo">
+            <el-input v-model="formData.batchNo" />
+          </el-form-item>
+          <el-form-item label="产品工序" prop="operationCode">
+            <el-input v-model="formData.operationCode" />
+          </el-form-item>
+          <el-form-item label="创建人" prop="creator">
+            <el-input v-model="formData.creator" />
+          </el-form-item>
+        </el-form>
+        <div style="display: flex; justify-content: space-evenly">
+          <el-button
+            type="primary"
+            size="small"
+            style="margin-top: 10px"
+            class="btn"
+            @click="toSubmit"
+            >提交</el-button
+          >
+          <el-button
+            type="info"
+            size="small"
+            style="margin-top: 10px"
+            class="btn"
+            @click="toCancel"
+            >取消</el-button
+          >
+        </div>
+      </el-scrollbar>
+    </div>
+    <reportTemplate v-model="showStatus" :tablesData="tablesData" />
   </div>
 </template>
 
 <script setup>
 import Search from "@/components/Search/index.vue";
-import ReportView from "@/components/ReportView/index.vue";
+import reportTemplate from "@/components/ReportView/reportTemplate.vue";
 import { useDictionaryStore } from "@/store";
 import { getData } from "@/api/report";
 import Pagination from "@/components/Pagination/index.vue";
+import { getMockData } from "@/api/statistic/reportMockData";
 const searchref = ref(null);
 const showPrint = () => {
   showStatus.value = true;
@@ -90,22 +179,84 @@ const getCurrentMonthStartAndEndDates = () => {
   return [formatDate(startDate), formatDate(endDate)];
 };
 const tableData = ref([]);
+// const getTableData = async () => {
+//   const { data } = await getData({
+//     pageNo: currentOption.page,
+//     pageSize: currentOption.limit,
+//     startTime: searchref.value.searchForm.time
+//       ? searchref.value.searchForm.time[0]
+//       : null,
+//     endTime: searchref.value.searchForm.time
+//       ? searchref.value.searchForm.time[1]
+//       : null,
+//     reportCode: searchref.value.searchForm.reportCode,
+//     reportName: searchref.value.searchForm.reportName,
+//     reportType: searchref.value.searchForm.reportType,
+//   });
+//   tableData.value = data.records;
+//   currentOption.total = data.totalCount;
+// };
+
+// mock数据
 const getTableData = async () => {
-  const { data } = await getData({
-    pageNo: currentOption.page,
-    pageSize: currentOption.limit,
-    startTime: searchref.value.searchForm.time
-      ? searchref.value.searchForm.time[0]
-      : null,
-    endTime: searchref.value.searchForm.time
-      ? searchref.value.searchForm.time[1]
-      : null,
-    reportCode: searchref.value.searchForm.reportCode,
-    reportName: searchref.value.searchForm.reportName,
-  });
+  const { data } = await getMockData(); // 使用假数据函数
   tableData.value = data.records;
   currentOption.total = data.totalCount;
+  console.log(tableData.value);
 };
+
+const toCancel = () => {
+  addStatus.value = false;
+  editStatus.value = false;
+};
+
+const formData = reactive({
+  reportCode: "",
+  rePortName: "",
+  rePortType: "",
+  creator: "",
+  prodtCode: "",
+  batchNo: "",
+  operationCode: "",
+});
+
+const addStatus = ref(false);
+const toAdd = () => {
+  reset();
+  addStatus.value = true;
+};
+const editStatus = ref(false);
+const toEdit = (row) => {
+  console.log(row);
+  editStatus.value = true;
+  formData.reportCode = row.reportCode;
+  formData.reportName = row.reportName;
+  formData.reportType = row.reportType;
+  formData.creator = row.creator;
+  formData.prodtCode = row.prodtCode;
+  formData.batchNo = row.batchNo;
+  formData.operationCode = row.operationCode;
+};
+
+const reset = () => {
+  formData.reportCode = "";
+  formData.reportName = "";
+  formData.reportType = "";
+  formData.creator = "";
+  formData.prodtCode = "";
+  formData.batchNo = "";
+  formData.operationCode = "";
+};
+
+const toSubmit = () => {
+  addStatus.value = false;
+  editStatus.value = false;
+};
+
+const reportTypeOptions = ref([
+  { label: "日报", value: "1" },
+  { label: "月报", value: "2" },
+]);
 const showStatus = ref(false);
 const searchOptons = [
   {
@@ -123,6 +274,12 @@ const searchOptons = [
     prop: "reportName",
     type: "input",
   },
+  {
+    label: "报告类型",
+    prop: "reportType",
+    type: "select",
+    options: reportTypeOptions.value,
+  },
 ];
 const maxHeight = ref(null);
 const setHeight = () => {
@@ -153,6 +310,29 @@ onMounted(async () => {
   .table {
     flex: 1;
     padding-bottom: 20px;
+    .tableheader {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: 10px 0px 10px 0px;
+    }
+  }
+}
+.formView {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .formTitle {
+    text-align: center;
+    font-size: 20px;
+    margin-bottom: 20px;
+  }
+
+  .formStyle {
+    width: 400px;
   }
 }
 </style>