修改

.env.development

@@ -10,7 +10,7 @@ VITE_APP_BASE_API = '/dev-api'
 # 上传文件接口地址
 VITE_APP_UPLOAD_URL = 'http://127.0.0.1:7105'
 # 开发接口地址
- VITE_APP_API_URL = 'http://127.0.0.1:7105'
+ VITE_APP_API_URL = 'http://192.168.1.69:7105'
 
 
 # 是否启用 Mock 服务

src/api/statistic/index.js

@@ -1,4 +1,3 @@
-
 import request from "@/utils/request";
 import axios from "axios";
 
@@ -29,3 +28,11 @@ export function getExport(data) {
     data,
   });
 }
+
+export function createNewReport(data) {
+  return service({
+    url: "/api/v1/quality/stat/export",
+    method: "post",
+    data,
+  });
+}

src/components/Search/index.vue

@@ -8,7 +8,6 @@
             class="tep"
             v-model="searchForm[option.prop]"
             placeholder="Please input"
-            size="normal"
             clearable
           />
         </div>
@@ -18,7 +17,6 @@
           <el-select
             class="tep"
             v-model="searchForm[option.prop]"
-            size="normal"
             clearable
             placeholder="Select"
           >
@@ -39,7 +37,6 @@
             range-separator="-"
             start-placeholder="开始日期"
             end-placeholder="结束日期"
-            size="normal"
             value-format="YYYY-MM-DD"
             format="YYYY-MM-DD"
           />
@@ -47,10 +44,8 @@
       </template>
     </div>
     <div class="oprea">
-      <el-button type="primary" size="normal" class="btn" @click="getData"
-        >查询</el-button
-      >
-      <el-button class="btn" size="normal" @click="reset">重置</el-button>
+      <el-button type="primary" class="btn" @click="getData">查询</el-button>
+      <el-button class="btn" @click="reset">重置</el-button>
     </div>
   </div>
 </template>

src/hooks/userCrud.ts

@@ -11,6 +11,10 @@ interface UseCrudConfig {
 
   dataListUrl?: string;
 
+  afterDataList?: Function;
+
+  afterAdd?: Function;
+
   // 需要操作的数据
   row?: any;
   // done用于结束操作
@@ -23,6 +27,8 @@ interface UseCrudConfig {
   params?: object;
   // 是否是编辑，如果是编辑调用更新，否则调用新增
   isEdit?: boolean;
+  //   用于多选选中后添加进入，toDeleteIds中的key值。
+  multipleSelectKey?: string;
 }
 
 export const useCrud = (config?: UseCrudConfig) => {
@@ -54,9 +60,10 @@ export const useCrud = (config?: UseCrudConfig) => {
   });
   /** 配置项结构 v-model */
   // defaults ?: AvueCrudDefaults;
-
+  // 多选返回的数组，命名是因为后来增加了很多功能，现在这个数组里面的值是根据multipleSelectKey来决定
   const toDeleteIds = ref<Array<string>>([]);
-
+  // 多选返回的数组,返回每一行的row数据
+  const selectedRows = ref<any[]>([]);
   const save = async (config?: UseCrudConfig) => {
     try {
       const path = config?.isEdit ? "/update" : "/add";
@@ -70,6 +77,9 @@ export const useCrud = (config?: UseCrudConfig) => {
         Methords.dataList();
         config?.done && config?.done();
         ElMessage.success(res?.msg ?? "");
+        if (commonConfig.value?.afterAdd) {
+          commonConfig.value?.afterAdd(res?.data);
+        }
       } else {
         config?.loading && config?.loading();
         ElMessage.error(res?.msg ?? "");
@@ -102,13 +112,13 @@ export const useCrud = (config?: UseCrudConfig) => {
       handleSearchData();
       try {
         const res = await request({
-          url: commonConfig.value.dataListUrl ?? `${url.value}/page`,
+          url: commonConfig.value?.dataListUrl ?? `${url.value}/page`,
           method: "post",
           data: {
             pageNo: page.value.currentPage,
             pageSize: page.value.pageSize,
-            ...search.value,
             ...(commonConfig.value?.params ?? {}),
+            ...search.value,
           },
         });
         if (res?.data) {
@@ -119,6 +129,9 @@ export const useCrud = (config?: UseCrudConfig) => {
             data.value = res?.data?.records || [];
             page.value.total = res?.data?.totalCount || 0;
           }
+          if (commonConfig.value?.afterDataList) {
+            commonConfig.value?.afterDataList();
+          }
         }
         config?.done && config?.done();
       } catch (err) {
@@ -141,22 +154,25 @@ export const useCrud = (config?: UseCrudConfig) => {
           },
         });
         if (res?.data) {
-          if(res?.data instanceof Array){
-            data.value = res?.data || []
-            page.value.total = res?.data?.length || 0
-          }else{
+          if (res?.data instanceof Array) {
+            data.value = res?.data || [];
+            page.value.total = res?.data?.length || 0;
+          } else {
             data.value = res?.data?.records || [];
             for (let i = 0; i < data.value.length; i++) {
               data.value[i].$cellEdit = true;
-              if(data.value[i].children!=undefined&&data.value[i].children!=null&&data.value[i].children.length > 0 ){
-                for(let j=0;j < data.value[i].children.length; j++){
+              if (
+                data.value[i].children != undefined &&
+                data.value[i].children != null &&
+                data.value[i].children.length > 0
+              ) {
+                for (let j = 0; j < data.value[i].children.length; j++) {
                   data.value[i].children[j].$cellEdit = true;
                 }
               }
             }
             page.value.total = res?.data?.totalCount || 0;
           }
-
         }
         config?.done && config?.done();
       } catch (err) {
@@ -211,9 +227,9 @@ export const useCrud = (config?: UseCrudConfig) => {
         cancelButtonText: "取消",
         type: "warning",
       }).then(async () => {
-        if(row.children && row.children.length > 0 ){
-          ElMessage.error("请先解绑下级关系")
-          return
+        if (row.children && row.children.length > 0) {
+          ElMessage.error("请先解绑下级关系");
+          return;
         }
         try {
           const res = await request({
@@ -234,8 +250,12 @@ export const useCrud = (config?: UseCrudConfig) => {
     // 设置selection: true,后监听选中改变事件，将Id存入数组
     selectionChange: (rows?: any[]) => {
       toDeleteIds.value = [];
+      selectedRows.value = [];
       rows?.forEach((element) => {
-        toDeleteIds.value.push(element.id);
+        toDeleteIds.value.push(
+          element[commonConfig.value?.multipleSelectKey ?? "id"]
+        );
+        selectedRows.value.push(element);
       });
     },
 
@@ -364,13 +384,12 @@ export const useCrud = (config?: UseCrudConfig) => {
     /**
      * 根据搜索项导出数据
      */
-    exportData: async (urlStr: string, filePath: string) => {
+    exportData: async (urlStr: string) => {
       handleSearchData();
       const response = await request({
         url: urlStr,
         method: "post",
         data: search.value,
-        params: { filePath: filePath },
         responseType: "arraybuffer",
       });
       Utils.downloadFile(response);
@@ -387,6 +406,7 @@ export const useCrud = (config?: UseCrudConfig) => {
     toDeleteIds,
     Methords,
     Utils,
+    selectedRows,
     commonConfig,
   };
 };

src/layout/components/AppMain/index.vue

@@ -29,7 +29,7 @@ const cachedViews = computed(() => useTagsViewStore().cachedViews); // 缓存页
   position: relative;
   width: 100%;
   min-height: calc(100vh - $navbar-height);
-  overflow: hidden;
+  overflow: auto;
   background-color: var(--el-bg-color-page);
 }
 

src/styles/reset.scss

@@ -19,6 +19,7 @@ html {
   line-height: 1.5;
   tab-size: 4;
   text-size-adjust: 100%;
+  min-width: 1300px;
 }
 
 body {

src/views/statistic/report/index.vue

@@ -1,374 +1,124 @@
 <template>
-  <div class="container1">
-    <div class="header" v-show="!addStatus && !editStatus">
-      <Search
-        ref="searchref"
-        :searchOptions="searchOptons"
-        @data-list="getTableData"
-      />
-    </div>
-    <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
-      > -->
-      <el-table
-        :data="tableData"
-        border
-        :style="{ height: maxHeight - 40 + 'px' }"
+  <div class="mainContentBox">
+    <avue-crud
+      ref="crudRef"
+      v-model:search="search"
+      v-model="form"
+      :data="data"
+      :option="option"
+      v-model:page="page"
+      @row-save="createRow"
+      @row-update="updateRow"
+      @row-del="deleteRow"
+      @search-change="searchChange"
+      @search-reset="resetChange"
+      @size-change="dataList"
+      @current-change="dataList"
+      @selection-change="selectionChange"
+    >
+      <template #menu="{ row, index, type }">
+        <el-button type="primary" size="small" @click="showDetail(row)"
+          >查看</el-button
+        ></template
       >
-        <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="genDate" label="生成日期" />
-        <el-table-column prop="creator" label="创建人" />
-        <el-table-column prop="created" label="创建时间" />
-        <el-table-column
-          align="center"
-          width="160"
-          prop=""
-          label="操作"
-          id="opear"
-        >
-          <template #default="{ row }">
-            <el-button
-              type="primary"
-              class="btn"
-              style="height: 25px"
-              @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>
-    <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"
+      <template #menu-right="{}">
+        <el-button
+          class="ml-3"
+          @click="exportData('/api/v1/plan/order/export')"
         >
-          <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="genDate">
-            <el-date-picker
-              v-model="formData.genDate"
-              type="date"
-              placeholder="选择日期"
-              style="width: 100%"
-              v-if="formData.reportType == 1"
-            />
-            <el-date-picker
-              v-model="formData.genDate"
-              type="month"
-              placeholder="选择日期"
-              style="width: 100%"
-              v-if="formData.reportType == 2"
-            />
-          </el-form-item>
-          <el-form-item label="产品型号" prop="prodtCode">
-            <el-input
-              v-model="formData.prodtCode"
-              @click="openChoseForm('prodt')"
-            />
-          </el-form-item>
-          <el-form-item label="产品批次" prop="batchNo">
-            <el-input
-              v-model="formData.batchNo"
-              @click="openChoseForm('batch')"
-            />
-          </el-form-item>
-          <el-form-item label="产品工序" prop="operationCode">
-            <el-input
-              v-model="formData.operationCode"
-              @click="openChoseForm('operation')"
-            />
-          </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" />
-    <operationForm ref="opRef" />
+          <template #icon> <i-ep-download /> </template>导出
+        </el-button>
+      </template>
+    </avue-crud>
   </div>
 </template>
-
 <script setup>
-import Search from "@/components/Search/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";
-import operationForm from "./operationForm.vue";
-const searchref = ref(null);
-const showPrint = () => {
-  showStatus.value = true;
-};
-const toLook = (row) => {
-  const fullUrl = window.location.href;
-  const parts = fullUrl.split("/");
-  const thirdSlashIndex = 2;
-  const truncatedUrl = parts.slice(0, thirdSlashIndex + 1).join("/");
-  window.open(truncatedUrl + "/" + row.fileUrl, "_blank");
-};
-const currentOption = reactive({
-  total: 0,
-  page: 1,
-  limit: 10,
-  pageSizes: [10, 20, 40],
+import { ref, getCurrentInstance } from "vue";
+import { useCrud } from "@/hooks/userCrud";
+
+// 传入一个url，后面不带/
+const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
+  useCrud({
+    src: "/api/v1/quality/report",
+  });
+const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
+  Methords; //增删改查
+const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
+const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
+
+const crudRef = ref(null); //crudRef.value 获取avue-crud对象
+
+onMounted(() => {
+  // console.log("crudRef", crudRef)
+  dataList();
 });
-const getCurrentMonthStartAndEndDates = () => {
-  // 获取当前日期
-  let now = new Date();
-
-  // 获取当前月份的第一天
-  let startDate = new Date(now.getFullYear(), now.getMonth(), 1);
 
-  // 获取当前月份的最后一天
-  let endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
-
-  // 格式化日期为'YYYY-MM-DD'格式
-  function formatDate(date) {
-    let year = date.getFullYear();
-    let month = String(date.getMonth() + 1).padStart(2, "0");
-    let day = String(date.getDate()).padStart(2, "0");
-    return `${year}-${month}-${day}`;
+const importExcelData = () => {
+  if (uploadRef.value) {
+    uploadRef.value.show("/api/v1/plan/order/import");
   }
-
-  // 返回包含开始和结束日期的数组
-  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 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.genDate = row.genDate;
-  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 showDetail = (row) => {
+  console.log(row, "showDetail");
 };
 
-const reportTypeOptions = ref([
-  { label: "日报", value: "1" },
-  { label: "月报", value: "2" },
-]);
-const showStatus = ref(false);
-const searchOptons = [
-  {
-    label: "创建时间",
-    prop: "time",
-    type: "daterange",
-  },
-  {
-    label: "报告编号",
-    prop: "reportCode",
-    type: "input",
-  },
-  {
-    label: "报告名称",
-    prop: "reportName",
-    type: "input",
-  },
-  {
-    label: "报告类型",
-    prop: "reportType",
-    type: "select",
-    options: reportTypeOptions.value,
-  },
-];
-
-const opRef = ref(null);
-const openChoseForm = (type) => {
-  opRef.value.open(type);
-};
-
-//------------------
-const maxHeight = ref(null);
-const setHeight = () => {
-  maxHeight.value = document.querySelector(".table").clientHeight - 30;
-};
-onMounted(async () => {
-  searchref.value.searchForm.time = getCurrentMonthStartAndEndDates();
-  setHeight();
-  getTableData();
+// 设置表格列或者其他自定义的option
+option.value = Object.assign(option.value, {
+  searchEnter: true,
+  viewBtn: false,
+  column: [
+    {
+      label: "报告编号",
+      prop: "reportCode",
+      search: true,
+    },
+    {
+      label: "报告名称",
+      prop: "reportName",
+      search: true,
+    },
+    {
+      label: "报告类型",
+      prop: "reportType",
+      search: true,
+      type: "select", //类型为单选框
+      dicData: [
+        {
+          label: "日报",
+          value: "1",
+        },
+        {
+          label: "月报",
+          value: "2",
+        },
+      ],
+      value: "1",
+      control: (val, form) => {
+        if (val === "1") {
+          return {
+            generationDate: {
+              type: "date",
+              format: "YYYY年MM月DD日",
+              valueFormat: "YYYY-MM-DD",
+            },
+          };
+        } else {
+          return {
+            generationDate: {
+              type: "month",
+              format: "YYYY年MM月",
+              valueFormat: "YYYY-MM",
+            },
+          };
+        }
+      },
+    },
+    {
+      label: "日期",
+      prop: "generationDate",
+      type: "datetime",
+    },
+  ],
 });
 </script>
-
-<style scoped lang="scss">
-.btn {
-  height: 25px;
-}
-.container1 {
-  background-color: white;
-  width: 100%;
-  height: 100%;
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  .header {
-    width: 100%;
-    height: auto;
-  }
-  .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>

src/views/statistic/report/index2.vue

@@ -0,0 +1,387 @@
+<template>
+  <div class="container1">
+    <div class="header" v-show="!addStatus && !editStatus">
+      <Search
+        ref="searchref"
+        :searchOptions="searchOptons"
+        @data-list="getTableData"
+      />
+    </div>
+    <div class="table" v-if="!addStatus && !editStatus">
+      <div class="tableheader">
+        <el-button type="primary" 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
+      > -->
+      <el-table
+        :data="tableData"
+        border
+        :style="{ height: maxHeight - 40 + 'px' }"
+      >
+        <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="genDate" label="生成日期" />
+        <el-table-column prop="creator" label="创建人" />
+        <el-table-column prop="created" label="创建时间" />
+        <el-table-column
+          align="center"
+          width="160"
+          prop=""
+          label="操作"
+          id="opear"
+        >
+          <template #default="{ row }">
+            <el-button
+              type="primary"
+              class="btn"
+              style="height: 25px"
+              @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
+        :total="currentOption.total"
+        :page="currentOption.page"
+        :limit="currentOption.limit"
+        :pageSizes="currentOption.pageSizes"
+        v-model:page="currentOption.page"
+        v-model:limit="currentOption.limit"
+        @pagination="getData"
+      />
+    </div>
+    <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"
+          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="genDate"
+            v-if="formData.reportType"
+          >
+            <el-date-picker
+              v-model="formData.genDate"
+              type="date"
+              placeholder="选择日期"
+              style="width: 100%"
+              value-format="YYYY-MM-DD"
+              v-if="formData.reportType == 1"
+            />
+            <el-date-picker
+              v-model="formData.genDate"
+              type="month"
+              value-format="YYYY-MM-DD"
+              placeholder="选择日期"
+              style="width: 100%"
+              v-if="formData.reportType == 2"
+            />
+          </el-form-item>
+          <!--          <el-form-item label="产品型号" prop="prodtCode">-->
+          <!--            <el-input-->
+          <!--              v-model="formData.prodtCode"-->
+          <!--              @click="openChoseForm('prodt')"-->
+          <!--            />-->
+          <!--          </el-form-item>-->
+          <!--          <el-form-item label="产品批次" prop="batchNo">-->
+          <!--            <el-input-->
+          <!--              v-model="formData.batchNo"-->
+          <!--              @click="openChoseForm('batch')"-->
+          <!--            />-->
+          <!--          </el-form-item>-->
+          <!--          <el-form-item label="产品工序" prop="operationCode">-->
+          <!--            <el-input-->
+          <!--              v-model="formData.operationCode"-->
+          <!--              @click="openChoseForm('operation')"-->
+          <!--            />-->
+          <!--          </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"
+            style="margin-top: 10px"
+            class="btn"
+            @click="toSubmit"
+            >提交</el-button
+          >
+          <el-button
+            type="info"
+            style="margin-top: 10px"
+            class="btn"
+            @click="toCancel"
+            >取消</el-button
+          >
+        </div>
+      </el-scrollbar>
+    </div>
+    <reportTemplate v-model="showStatus" :tablesData="tablesData" />
+    <operationForm ref="opRef" />
+  </div>
+</template>
+
+<script setup>
+import Search from "@/components/Search/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";
+import operationForm from "./operationForm.vue";
+const searchref = ref(null);
+const showPrint = () => {
+  showStatus.value = true;
+};
+const tablesData = ref([]);
+const toLook = (row) => {
+  const fullUrl = window.location.href;
+  const parts = fullUrl.split("/");
+  const thirdSlashIndex = 2;
+  const truncatedUrl = parts.slice(0, thirdSlashIndex + 1).join("/");
+  window.open(truncatedUrl + "/" + row.fileUrl, "_blank");
+};
+const currentOption = reactive({
+  total: 0,
+  page: 1,
+  limit: 10,
+  pageSizes: [10, 20, 40],
+});
+const getCurrentMonthStartAndEndDates = () => {
+  // 获取当前日期
+  let now = new Date();
+
+  // 获取当前月份的第一天
+  let startDate = new Date(now.getFullYear(), now.getMonth(), 1);
+
+  // 获取当前月份的最后一天
+  let endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+
+  // 格式化日期为'YYYY-MM-DD'格式
+  function formatDate(date) {
+    let year = date.getFullYear();
+    let month = String(date.getMonth() + 1).padStart(2, "0");
+    let day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  }
+
+  // 返回包含开始和结束日期的数组
+  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 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.genDate = row.genDate;
+  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;
+  console.log(formData);
+};
+
+const reportTypeOptions = ref([
+  { label: "日报", value: "1" },
+  { label: "月报", value: "2" },
+]);
+const showStatus = ref(false);
+const searchOptons = [
+  {
+    label: "创建时间",
+    prop: "time",
+    type: "daterange",
+  },
+  {
+    label: "报告编号",
+    prop: "reportCode",
+    type: "input",
+  },
+  {
+    label: "报告名称",
+    prop: "reportName",
+    type: "input",
+  },
+  {
+    label: "报告类型",
+    prop: "reportType",
+    type: "select",
+    options: reportTypeOptions.value,
+  },
+];
+
+const exportFnc = () => {};
+
+const opRef = ref(null);
+const openChoseForm = (type) => {
+  opRef.value.open(type);
+};
+
+//------------------
+const maxHeight = ref(null);
+const setHeight = () => {
+  maxHeight.value = document.querySelector(".table").clientHeight - 30;
+};
+onMounted(async () => {
+  searchref.value.searchForm.time = getCurrentMonthStartAndEndDates();
+  setHeight();
+  getTableData();
+});
+</script>
+
+<style scoped lang="scss">
+.btn {
+  height: 25px;
+}
+.container1 {
+  background-color: white;
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  .header {
+    width: 100%;
+    height: auto;
+  }
+  .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>