Merge branch 'dev_银川_中盛建材' of http://114.132.189.42:9002/r/product-inventor...

gongchunyi

2 天以前 f281afc3ae596f649340bfc592b746917e28d701

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

@@ -1,14 +1,25 @@
<template>
  <el-button type="info" plain icon="Upload" @click="handleImport">
  <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" />
  <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 type="primary"
                   @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </template>
@@ -16,100 +27,102 @@
</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";
  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/newProduct.js";

defineOptions({
  name: "产品维护导入",
});
  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 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 +
      "/productMaterialSku/import" +
      (props.productId ? `?materialId=${props.productId}` : "")
  );
  // 点击导入
  const handleImport = () => {
    if (!props.productId) {
      ElMessage({ message: "请先选择产品", type: "warning" });
      return;
    }
    upload.open = true;
    upload.title = "产品规格导入";
  };

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

// 关闭弹窗时清除已选文件
const handleDialogClose = () => {
  fileUploadRef.value?.clearFiles?.();
};
  // 关闭弹窗时清除已选文件
  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" });
  }
};
  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" });
    });
};
  // 下载 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 {
    margin-top: 12px;
    font-size: 12px;
    color: var(--el-text-color-secondary);
  }

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