报告数据管理。

src/api/project/template.ts

@@ -73,3 +73,12 @@ export function getExcelTemplateDetail(id: string): AxiosPromise<any> {
     method: "get",
   });
 }
+
+//预览excel表单
+export function previewExcelTemplateData(data: any = {}): AxiosPromise<any> {
+  return request({
+    url: "/api/v1/test/excelForm/previewForm",
+    method: "post",
+    data: data,
+  });
+}

src/assets/icons/downloadExcel.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" d="M9 3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4.5h3a1 1 0 0 1 .707 1.707l-6 6a1 1 0 0 1-1.414 0l-6-6A1 1 0 0 1 6 7.5h3V3Zm2 1v4.5a1 1 0 0 1-1 1H8.414L12 13.086 15.586 9.5H14a1 1 0 0 1-1-1V4h-2ZM2 18.5a1 1 0 0 1 1-1h18a1 1 0 0 1 0 2H3a1 1 0 0 1-1-1ZM6 22a1 1 0 0 1 1-1h10a1 1 0 0 1 0 2H7a1 1 0 0 1-1-1Z" clip-rule="evenodd"/>
+</svg>

src/views/modules/data-manager/data-manager.vue

@@ -1,5 +1,313 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from "vue";
+import TemplateList from "../report-template/com/templateList.vue";
+import {
+  getProductCodeListById,
+  getTestedProductList,
+  getTestingDataByCode,
+  previewExcelTemplateData,
+  saveExcelTemplate,
+  updateExcelTemplate,
+} from "@/api/project/template";
 
-<template><div>data-manager</div></template>
+const excelRef = ref(null);
+const excelData = ref(null);
 
-<style scoped lang="scss"></style>
+// 打开模版
+const temsDrawerVisible = ref(false);
+const listRef = ref();
+const currentTemplate = ref(null);
+const onSelectTemplate = (tem) => {
+  currentTemplate.value = tem;
+  temsDrawerVisible.value = false;
+
+  formData.engineeringId = tem.engineeringId;
+  formData.formName = tem.formName;
+
+  getProductCodeListById(formData.engineeringId).then((res) => {
+    codeAllList.value = res.data;
+    codeList.value = codeAllList.value;
+  });
+};
+const onOpenTemplate = () => {
+  temsDrawerVisible.value = true;
+  nextTick(() => {
+    listRef.value && listRef.value.openDrawer();
+  });
+};
+
+const onExportTemplate = () => {
+  console.log(excelRef.value);
+  if (excelRef.value) {
+    excelRef.value.downloadExcel();
+  }
+  console.log("onExportTemplate");
+};
+
+// ===== 右侧区域 =======
+const formRef = ref(null);
+const formData = reactive({
+  engineeringId: "",
+  formName: "",
+  productCode: "",
+});
+
+// 产品选择器
+const productAllList = ref<any[]>([]); // 产品列表
+const productList = ref<any[]>([]); // 产品列表
+const proProps = {
+  label: "engineeringProductName",
+  value: "id",
+};
+const proLoading = ref(false);
+const proRemoteMethod = (query: string) => {
+  let queryString = query.trim();
+  if (queryString.length === 0) {
+    productList.value = productAllList.value;
+    return;
+  }
+  getTestedProductList({
+    engineeringProductName: queryString,
+    executeStatus: true,
+  }).then((res) => {
+    productList.value = res.data;
+  });
+};
+const onProductChange = (val) => {
+  getProductCodeListById(formData.engineeringId).then((res) => {
+    codeAllList.value = res.data;
+    codeList.value = codeAllList.value;
+  });
+};
+
+// 产品编号选择器
+const codeAllList = ref<any[]>([]); // 产品编号列表
+const codeList = ref<any[]>([]); // 产品编号列表
+
+// 点击搜索按钮查询 产品编码
+const onSearchTestingData = async () => {
+  let queryString = formData.productCode.trim();
+  if (queryString.length === 0) {
+    codeList.value = codeAllList.value;
+    return;
+  }
+  getProductCodeListById(formData.engineeringId, queryString).then((res) => {
+    codeList.value = res.data;
+  });
+};
+
+// 预览魔板
+const previewExcel = (code) => {
+  previewExcelTemplateData({
+    excelFormId: currentTemplate.value?.id || null,
+    productCode: code,
+  }).then((res) => {
+    excelData.value = null;
+    if (res?.data?.excelData) {
+      excelData.value = JSON.parse(res.data.excelData);
+    }
+  });
+};
+
+onMounted(() => {
+  getTestedProductList({
+    executeStatus: true,
+  }).then((res) => {
+    productAllList.value = res.data;
+    productList.value = productAllList.value;
+  });
+});
+</script>
+
+<template>
+  <div class="report-template">
+    <div class="left">
+      <div class="excel-container">
+        <ExcelView ref="excelRef" v-if="excelData" :data="excelData" />
+      </div>
+    </div>
+    <div class="right">
+      <div class="title-header">测试项查询</div>
+      <el-form ref="formRef" v-model:model="formData" label-position="top">
+        <el-form-item label="模版名称" prop="formName">
+          <el-input
+            v-model="formData.formName"
+            :disabled="true"
+            style="width: calc(100% - 70px); margin-right: 10px"
+          />
+          <el-button type="primary" @click="onOpenTemplate">选择</el-button>
+        </el-form-item>
+        <el-form-item label="产品" prop="engineeringId">
+          <el-select-v2
+            v-model="formData.engineeringId"
+            filterable
+            remote
+            :remote-method="proRemoteMethod"
+            clearable
+            :props="proProps"
+            :options="productList"
+            :loading="proLoading"
+            placeholder="请选择产品名称"
+            @change="onProductChange"
+          />
+        </el-form-item>
+
+        <el-form-item label="产品编号" prop="productCode">
+          <el-input v-model="formData.productCode"></el-input>
+        </el-form-item>
+      </el-form>
+      <div class="blue-btn" style="width: 100%" @click="onSearchTestingData">
+        <svg-icon icon-class="search" />
+        搜索
+      </div>
+      <div class="white-line"></div>
+      <div class="result-text">搜索结果</div>
+      <el-scrollbar class="scroll-bottm-height">
+        <div class="result-box">
+          <div class="result-bar" v-for="log in codeList">
+            <div>{{ log.productCode }}</div>
+            <div>
+              <svg-icon
+                icon-class="preview"
+                size="20"
+                style="margin-right: 12px"
+                @click.stop="previewExcel(log.productCode)"
+              />
+              <svg-icon
+                icon-class="downloadExcel"
+                size="20"
+                @click.stop="onExportTemplate"
+              />
+            </div>
+          </div>
+        </div>
+      </el-scrollbar>
+    </div>
+
+    <el-drawer
+      v-model="temsDrawerVisible"
+      :with-header="false"
+      :append-to-body="true"
+      :destroy-on-close="true"
+      size="800"
+      direction="ltr"
+    >
+      <TemplateList
+        ref="listRef"
+        @close="temsDrawerVisible = false"
+        @selected="onSelectTemplate"
+      ></TemplateList>
+    </el-drawer>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.report-template {
+  display: flex;
+  height: calc(100vh - $main-header-height);
+
+  .left {
+    flex: 1;
+    height: calc(100vh - $main-header-height);
+
+    .excel-container {
+      height: calc(100vh - $main-header-height);
+      width: calc(100vw - 296px - 80px);
+      position: relative;
+      //border: 2px solid red;
+    }
+  }
+
+  .right {
+    width: 296px;
+    height: calc(100vh - $main-header-height);
+    background-color: $hj-black-2;
+    padding: 0 24px;
+
+    .white-line {
+      height: 1px;
+      width: 100%;
+      background-color: $hj-white-4;
+      margin-top: 12px;
+    }
+
+    .result-text {
+      margin-top: 11px;
+      height: 18px;
+      font-size: 14px;
+      color: #ffffff;
+      line-height: 16px;
+      text-align: center;
+    }
+
+    .result-box {
+      margin-top: 12px;
+      padding: 12px 6px;
+      //height: calc(100vh - $main-header-height - 64px - 12px - 330px);
+
+      //overflow-y: auto;
+
+      .result-title-text {
+        font-size: 14px;
+        color: #ffffff;
+        line-height: 16px;
+        text-align: left;
+      }
+
+      .result-bar {
+        height: 36px;
+        line-height: 36px;
+        background: linear-gradient(180deg, #656565 0%, #555555 100%);
+        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
+        border-radius: 4px 4px 4px 4px;
+        font-weight: 400;
+        font-size: 12px;
+        color: #ffffff;
+        margin-top: 8px;
+        text-align: center;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 12px;
+      }
+    }
+  }
+}
+
+.scroll-bottm-height {
+  height: calc(100vh - $main-header-height - 64px - 12px - 330px);
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid #696969;
+}
+
+.blue-btn {
+  width: 130px;
+  height: 36px;
+  line-height: 36px;
+  margin: 0 auto;
+  background: var(--fc-color-7);
+  color: var(--hj-white-1);
+  text-align: center;
+  border-radius: 4px 4px 4px 4px;
+  cursor: pointer;
+}
+
+.title-header {
+  height: 65px;
+  font-weight: 400;
+  font-size: 16px;
+  color: $hj-white-1;
+  line-height: 65px;
+  text-align: left;
+  background-color: $hj-black-2;
+}
+
+:deep(.el-form-item--label-top .el-form-item__label) {
+  height: 18px;
+  font-weight: 400;
+  font-size: 14px;
+  color: #ffffff;
+  line-height: 16px;
+  text-align: left;
+}
+</style>