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

gaoluyang

2026-06-02 7c2cdcbc7f5585b96fba76a07b0e4417a09c4d7e

 src/views/qualityManagement/processInspection/index.vue

@@ -2,13 +2,6 @@
  <div class="app-container">
    <div class="search_form mb20">
      <div>
        <span class="search_title">工序：</span>
        <el-input v-model="searchForm.process"
                  style="width: 240px"
                  placeholder="请输入工序搜索"
                  @change="handleQuery"
                  clearable
                  :prefix-icon="Search" />
        <span style="margin-left: 10px"
              class="search_title">检测日期：</span>
        <el-date-picker v-model="searchForm.entryDate"
@@ -18,14 +11,6 @@
                        placeholder="请选择"
                        clearable
                        @change="changeDaterange" />
        <span style="margin-left: 10px"
              class="search_title">生产工单号：</span>
        <el-input v-model="searchForm.workOrderNo"
                  style="width: 240px"
                  placeholder="请输入生产工单号搜索"
                  @change="handleQuery"
                  clearable
                  :prefix-icon="Search" />
        <el-button type="primary"
                   @click="handleQuery"
                   style="margin-left: 10px">搜索</el-button>
@@ -54,6 +39,9 @@
             @close="handleQuery"></FormDia>
    <files-dia ref="filesDia"
               @close="handleQuery"></files-dia>
    <QuickCheckDia ref="quickCheckDia"
                   @close="handleQuery"
                   @success="getList"></QuickCheckDia>
    <el-dialog v-model="dialogFormVisible"
               title="编辑检验员"
               width="30%"
@@ -84,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>
@@ -100,6 +117,7 @@
  } from "vue";
  import InspectionFormDia from "@/views/qualityManagement/processInspection/components/inspectionFormDia.vue";
  import FormDia from "@/views/qualityManagement/processInspection/components/formDia.vue";
  import QuickCheckDia from "@/views/qualityManagement/processInspection/components/quickCheckDia.vue";
  import { ElMessageBox } from "element-plus";
  import {
    downloadQualityInspect,
@@ -107,7 +125,10 @@
    qualityInspectListPage,
    qualityInspectUpdate,
    submitQualityInspect,
    batchQuickInspect,
    exportWeilongTemplate,
    exportBaishiTemplate,
    exportDaliTemplate,
    exportCommonTemplate,
  } from "@/api/qualityManagement/rawMaterialInspection.js";
  import FilesDia from "@/views/qualityManagement/processInspection/components/filesDia.vue";
  import dayjs from "dayjs";
@@ -116,7 +137,6 @@

  const data = reactive({
    searchForm: {
      process: "",
      entryDate: undefined, // 录入日期
      workOrderNo: "",
      entryDateStart: undefined,
@@ -135,13 +155,13 @@
      width: 120,
    },
    {
      label: "工序",
      prop: "process",
      width: 230,
    },
    {
      label: "检验员",
      prop: "checkName",
    },
    {
      label: "采购合同号",
      prop: "purchaseContractNo",
         width: 150,
    },
    {
      label: "产品名称",
@@ -311,8 +331,12 @@
  const formDia = ref();
  const filesDia = ref();
  const inspectionFormDia = ref();
  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;
@@ -385,32 +409,8 @@
      return;
    }

    const totalCount = selectedRows.value.length;
    const submittedCount = totalCount - unSubmittedRows.length;

    let confirmMessage = `已选择 ${totalCount} 条检验单`;
    if (submittedCount > 0) {
      confirmMessage += `（其中 ${submittedCount} 条已提交，将自动跳过）`;
    }
    confirmMessage += `\n\n确认后将自动：\n· 检验结果设为"合格"\n· 合格数量设为总数\n· 不合格数量设为 0\n· 提交并入库`;

    ElMessageBox.confirm(confirmMessage, "快速检验", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
      dangerouslyUseHTMLString: false,
    })
      .then(() => {
        // 调用批量快速检验接口
        const ids = unSubmittedRows.map(item => item.id);
        batchQuickInspect(ids).then(res => {
          proxy.$modal.msgSuccess(res.msg || "快速检验完成");
          getList();
        });
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
    const ids = unSubmittedRows.map(item => item.id);
    quickCheckDia.value?.openDialog(ids, unSubmittedRows);
  };

  // 打开新增检验弹框
@@ -483,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 = () => {
@@ -522,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>