chengfei-test-system/src/views/modules/report-template/report-template.vue

<script setup lang="ts">
import { ref } from "vue";
import TemplateList from "./com/templateList.vue";
import {
  getProductCodeListById,
  getTestedProductList,
  getTestingDataByCode,
  saveExcelTemplate,
  updateExcelTemplate,
} from "@/api/project/template";

const excelRef = ref(null);
const excelData = ref(null);

// 打开模版
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;
  formData.productCode = tem.productCode;
  // 如果有值 并且是json字符串 则解析
  excelData.value = null;
  if (tem.excelData) {
    excelData.value = JSON.parse(tem.excelData);
  }
  console.log("返回的exccel数据", excelData.value);
  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 onImportTemplate = () => {
  if (excelRef.value) {
    excelRef.value.importExcel();
  }
};

const onExportTemplate = () => {
  if (excelRef.value) {
    excelRef.value.exportExcel();
  }
  console.log("onExportTemplate");
};

// ===== 右侧区域 =======
const formRef = ref(null);
const formData = reactive({
  engineeringId: "",
  formName: "",
  productCode: "",
});
const rules = reactive({
  engineeringId: { required: true, message: "请选择产品", trigger: "blur" },
  productCode: { required: true, message: "请选择编号", trigger: "blur" },
  formName: { required: true, message: "请输入模版名称", trigger: "blur" },
});

// 产品选择器
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 codeProps = {
  label: "productCode",
  value: "productCode",
};
const codeLoading = ref(false);
const codeRemoteMethod = (query: string) => {
  let queryString = query.trim();
  if (queryString.length === 0) {
    codeList.value = codeAllList.value;
    return;
  }
  getProductCodeListById(formData.engineeringId, queryString).then((res) => {
    codeList.value = res.data;
  });
};

const onSaveTemplate = async () => {
  await formRef.value?.validate();

  const res = excelRef.value.getExcelData();

  console.log("保存的exccel数据", res);
  let p = {
    excelData: JSON.stringify(res),
    ...formData,
    id: currentTemplate.value?.id || null,
  };

  if (p.id) {
    await updateExcelTemplate(p);
  } else {
    let result = await saveExcelTemplate(p);
  }

  formRef.value && formRef.value.resetFields();
  currentTemplate.value = null;

  excelData.value = null;
  ElMessage.success("保存成功");
};

// 点击搜索按钮查询 产品编码下的测试数据
const testingDataList = ref<any[]>([]); // 测试数据列表
const onSearchTestingData = async () => {
  console.log(formData);
  let res = await getTestingDataByCode(
    formData.engineeringId,
    formData.productCode
  );
  testingDataList.value = res.data;
};
// 点击测试数据的写入
const onWriteTestingData = (item) => {
  let toWriteValue = `{{${item.dataItem}&${item.engineeringProjectId}}}`; //{{温度}
  excelRef.value.setCellValue(toWriteValue);
  // console.log(
  //   "onWriteTestingData",
  //   toWriteValue,
  //   excelRef.value.setCellValue
  // );
};

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="header">
        <div class="header-left">
          <div class="blue-btn" @click="onOpenTemplate">
            <svg-icon icon-class="save" />
            打开模版
          </div>
          <div class="blue-btn" @click="onImportTemplate">
            <svg-icon icon-class="report-template" />
            导入模版
          </div>
          <div class="blue-btn" @click="onExportTemplate">
            <svg-icon icon-class="save" />
            导出模版
          </div>
        </div>

        <div>
          <div class="blue-btn" @click="onSaveTemplate">
            <svg-icon icon-class="save" />
            保存模版
          </div>
        </div>
      </div>
      <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"
        :rules="rules"
        label-position="top"
      >
        <el-form-item label="模版名称" prop="formName">
          <el-input v-model="formData.formName" placeholder="请输入模版名称" />
        </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-select-v2
            v-model="formData.productCode"
            filterable
            remote
            :remote-method="codeRemoteMethod"
            clearable
            :props="codeProps"
            :options="codeList"
            :loading="codeLoading"
            placeholder="请选择产品编号"
          />
        </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 v-for="item in testingDataList" :key="item.projectName">
            <div class="result-title-text">{{ item.projectName }}</div>
            <div class="result-bar" v-for="log in item.logList">
              <el-icon
                size="20"
                style="cursor: pointer"
                @click.stop="onWriteTestingData(log)"
              >
                <DocumentAdd
              /></el-icon>
              <div>{{ log.dataItem }}</div>
              <div></div>
            </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);

    .header {
      width: 100%;
      height: 64px;
      background-color: $hj-black-3;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 12px;

      .header-left {
        display: flex;
        gap: 10px;
      }
    }

    .excel-container {
      height: calc(100vh - $main-header-height - 64px);
      width: calc(100vw - 296px - 80px);
      position: relative;
    }
  }

  .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-around;
        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>