新疆马铃薯 1.首页问题：挪新系统ui，需要确认一下页面数据完整。 2.协同办公：挪新系统 3.营销管理：客户往来取消回款金额字段，改为点击左侧客户时...

gaoluyang

2026-05-30 6a415a072a98d64d2f95d16eef73b6d7270b8d56

 src/views/basicData/product/ImportExcel/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,115 @@
<template>
  <el-button type="info" plain icon="Upload" @click="handleImport">
    å¯¼å…¥
  </el-button>
  <el-dialog v-model="upload.open" :title="upload.title" @close="handleDialogClose">
    <FileUpload ref="fileUploadRef" accept=".xlsx, .xls" :headers="upload.headers" :action="uploadUrl"
      :disabled="upload.isUploading" :showTip="true" @success="handleFileSuccess"
      :downloadTemplate="handleDownloadTemplate" />
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">ç¡® å®š</el-button>
        <el-button @click="upload.open = false">取 æ¶ˆ</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, computed } from "vue";
import { getToken } from "@/utils/auth.js";
import { FileUpload } from "@/components/Upload";
import { ElMessage } from "element-plus";
import { downloadProductModelImportTemplate } from "@/api/basicData/product.js";

defineOptions({
  name: "产品维护导入",
});

const props = defineProps({
  productId: { type: [String, Number], default: "" },
});
const emits = defineEmits(["uploadSuccess"]);
const fileUploadRef = ref();
const upload = reactive({
  // æ˜¯å¦æ˜¾ç¤ºå¼¹å‡ºå±‚（供应商导入）
  open: false,
  // å¼¹å‡ºå±‚标题（供应商导入）
  title: "",
  // æ˜¯å¦ç¦ç”¨ä¸Šä¼ 
  isUploading: false,
  // è®¾ç½®ä¸Šä¼ çš„请求头部
  headers: { Authorization: "Bearer " + getToken() },
});
// ä¸Šä¼ çš„地址（携带 productId å‚数，传给后端的 importProduct æŽ¥å£ï¼‰
const uploadUrl = computed(
  () =>
    import.meta.env.VITE_APP_BASE_API +
    "/basic/product/import" +
    (props.productId ? `?productId=${props.productId}` : "")
);
// ç‚¹å‡»å¯¼å…¥
const handleImport = () => {
  if (!props.productId) {
    ElMessage({ message: "请先选择产品", type: "warning" });
    return;
  }
  upload.open = true;
  upload.title = "产品导入";
};

const submitFileForm = () => {
  fileUploadRef.value.uploadApi();
};

// å…³é—­å¼¹çª—时清除已选文件
const handleDialogClose = () => {
  fileUploadRef.value?.clearFiles?.();
};

const handleFileSuccess = (response) => {
  const { code, msg } = response;
  if (code == 200) {
    ElMessage({ message: msg || "导入成功", type: "success" });
    upload.open = false;
    emits("uploadSuccess");
  } else {
    ElMessage({ message: msg, type: "error" });
  }
};

// ä¸‹è½½ Excel å¯¼å…¥æ¨¡æ¿
const handleDownloadTemplate = () => {
  downloadProductModelImportTemplate()
    .then((blobData) => {
      const blob =
        blobData instanceof Blob
          ? blobData
          : new Blob([blobData], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      link.download = "产品导入模板.xlsx";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
      ElMessage({ message: "模板下载成功", type: "success" });
    })
    .catch(() => {
      ElMessage({ message: "模板下载失败", type: "error" });
    });
};
</script>

<style scoped>
.import-tip {
  margin-top: 12px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.import-tip .el-button {
  margin-left: 8px;
}
</style>