新疆马铃薯 1.过程检验下载添加3个模版

gaoluyang

2026-06-02 5b45cbaaafbc45023d7916d9e700d3c59cc33c03

 src/views/qualityManagement/processInspection/index.vue

@@ -72,6 +72,35 @@
      </template>
    </el-dialog>

    <el-dialog v-model="templateDialogVisible"
               title="选择导出模板"
               width="450px"
               @close="closeTemplateDialog">
      <div class="template-grid">
        <div class="template-item" @click="handleTemplateExport('weilong')">
          <div class="template-icon weilong-icon">伟</div>
          <div class="template-name">伟龙模板</div>
        </div>
        <div class="template-item" @click="handleTemplateExport('baishi')">
          <div class="template-icon baishi-icon">百</div>
          <div class="template-name">百事模板</div>
        </div>
        <div class="template-item" @click="handleTemplateExport('dali')">
          <div class="template-icon dali-icon">达</div>
          <div class="template-name">达利模板</div>
        </div>
        <div class="template-item" @click="handleTemplateExport('common')">
          <div class="template-icon common-icon">通</div>
          <div class="template-name">通用模板</div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeTemplateDialog">取消</el-button>
        </div>
      </template>
    </el-dialog>


  </div>
</template>
@@ -96,6 +125,10 @@
    qualityInspectListPage,
    qualityInspectUpdate,
    submitQualityInspect,
    exportWeilongTemplate,
    exportBaishiTemplate,
    exportDaliTemplate,
    exportCommonTemplate,
  } from "@/api/qualityManagement/rawMaterialInspection.js";
  import FilesDia from "@/views/qualityManagement/processInspection/components/filesDia.vue";
  import dayjs from "dayjs";
@@ -301,6 +334,9 @@
  const quickCheckDia = ref();
  const { proxy } = getCurrentInstance();
  const userStore = useUserStore();

  const templateDialogVisible = ref(false);
  const currentExportRow = ref(null);
  const changeDaterange = value => {
    searchForm.value.entryDateStart = undefined;
    searchForm.value.entryDateEnd = undefined;
@@ -447,21 +483,51 @@
      });
  };
  const downLoadFile = row => {
    downloadQualityInspect({ id: row.id }).then(blobData => {
      const blob = new Blob([blobData], {
    currentExportRow.value = row;
    templateDialogVisible.value = true;
  };

  const closeTemplateDialog = () => {
    templateDialogVisible.value = false;
    currentExportRow.value = null;
  };

  const handleTemplateExport = async (templateType) => {
    if (!currentExportRow.value) {
      proxy.$modal.msgError("请选择要导出的数据");
      return;
    }
    const id = currentExportRow.value.id;
    const fileNameMap = {
      weilong: "伟龙模版检验结果.doc",
      baishi: "百事模版检验结果.doc",
      dali: "达利模版检验结果.doc",
      common: "通用模版检验结果.doc",
    };
    const exportFuncMap = {
      weilong: exportWeilongTemplate,
      baishi: exportBaishiTemplate,
      dali: exportDaliTemplate,
      common: exportCommonTemplate,
    };
    try {
      const response = await exportFuncMap[templateType](id);
      const blob = new Blob([response], {
        type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
      });
      const downloadUrl = window.URL.createObjectURL(blob);

      const link = document.createElement("a");
      link.href = downloadUrl;
      link.download = "过程检验报告.docx";
      link.href = URL.createObjectURL(blob);
      link.download = fileNameMap[templateType];
      document.body.appendChild(link);
      link.click();

      document.body.removeChild(link);
      window.URL.revokeObjectURL(downloadUrl);
    });
      URL.revokeObjectURL(link.href);
      proxy.$modal.msgSuccess("导出成功");
      closeTemplateDialog();
    } catch (error) {
      console.error("导出失败", error);
      proxy.$modal.msgError("导出失败");
    }
  };
  // 导出
  const handleOut = () => {
@@ -486,4 +552,64 @@
  });
</script>

<style scoped></style>
<style scoped>
.template-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 20px 10px;
}

.template-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.template-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.2);
  transform: translateY(-2px);
}

.template-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 12px;
}

.weilong-icon {
  background: linear-gradient(135deg, #409eff, #1677ff);
}

.baishi-icon {
  background: linear-gradient(135deg, #67c23a, #529b2e);
}

.dali-icon {
  background: linear-gradient(135deg, #e6a23c, #c4860c);
}

.common-icon {
  background: linear-gradient(135deg, #909399, #6d6d6d);
}

.template-name {
  font-size: 15px;
  color: #303133;
  font-weight: 500;
}
</style>