add 新增导入组件; update 更新配方bom的导入功能

src/components/DialogUpload.vue

@@ -0,0 +1,188 @@
+<template>
+  <el-dialog
+    class="dialog-just-form"
+    :visible="visible"
+    @close="handleClose"
+    width="30%"
+    :title="title"
+    :destroy-on-close="false"
+    :close-on-click-modal="configs.clickModalToClose ?? true">
+    <el-upload
+      style="margin-top: 24px; text-align: center"
+      drag
+      :action="urls.importOrderUrl"
+      :headers="uploadHeaders"
+      :show-file-list="false"
+      :on-error="handleError"
+      :on-success="handleSuccess">
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text">
+        将文件拖到此处，或
+        <em>点击上传</em>
+      </div>
+      <div class="el-upload__tip" slot="tip">{{ hint }}</div>
+    </el-upload>
+
+    <div slot="footer">
+      <el-button type="success" @click="handleBtnClick({ name: 'download-template', filename, url })">下载模板</el-button>
+      <el-button @click="handleBtnClick({ name: 'cancel' })">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { pick as __pick } from "@/utils/filters";
+import Cookies from "js-cookie";
+// import moment from "moment";
+
+export default {
+  name: "DialogUpload",
+  props: {
+    title: {
+      type: String,
+      default: '导入'
+    },
+    hint: {
+      hint: String,
+      default: '只能上传 Excel 文件'
+    },
+    filename: {
+      hint: String,
+      default: 'default_file.xlsx'
+    },
+    url: { // 下载地址
+      hint: String,
+      default: '/importTemplates/orderImport.xlsx'
+    },
+    configs: {
+      type: Object,
+      default: () => ({
+        clickModalToClose: true,
+        forms: null,
+      }),
+    },
+  },
+  inject: ["urls"],
+  data() {
+    return {
+      loadingStatus: false,
+      visible: false,
+    };
+  },
+  computed: {
+    uploadHeaders() {
+      return {
+        token: Cookies.get("token") || "",
+      };
+    },
+  },
+  methods: {
+    init(data) {
+      this.visible = true;
+    },
+
+    fileTypeCheck() {
+      // 上传前检查文件类型: Boolean
+    },
+
+    fileSizeCheck() {
+      // 上传前检查文件大小: Boolean
+    },
+
+    handleSuccess(response, file, fileList) {
+      // console.log("success response", response);
+      let message = "";
+      let isError = false;
+
+      if (typeof response === "object" && "msg" in response) message = response.msg;
+      if (typeof response === "object" && "data" in response) message = response.data.toString();
+      if (typeof response === "string") {
+        message = response;
+        isError = true;
+      }
+      
+      this.handleClose();
+
+      this.$message({
+        message,
+        type: isError ? "error" : "info",
+        duration: 2000,
+      });
+    },
+
+    handleError(err, file, fileList) {
+      console.log("err", err);
+    },
+
+    handleBtnClick(payload) {
+      if ("name" in payload) {
+        switch (payload.name) {
+          case "cancel":
+            this.handleClose();
+            break;
+          case "download-template":
+            this.handleDownloadTemplate(payload.filename, payload.url);
+            break;
+        }
+      }
+    },
+
+    handleDownloadTemplate(filename, href) {
+      this.$notify({
+        title: "提示",
+        message: "开始下载",
+        type: "success",
+      });
+
+      // 下载模板
+      let a = document.createElement("a");
+      a.href = href;
+      a.download = filename ?? "orderTemplate.xlsx";
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    },
+
+    handleUploadChange(file, fileList) {
+      // console.log("[Upload] handleUploadChange...", file, fileList);
+    },
+
+    handleClose() {
+      this.visible = false;
+
+      setTimeout(() => {
+        this.$emit("destroy-dialog");
+      }, 200);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.dialog-just-form >>> .el-dialog__body {
+  /* padding-top: 16px !important;
+  padding-bottom: 16px !important; */
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.el-select,
+.el-cascader,
+.el-date-editor {
+  width: 100% !important;
+}
+
+.dialog-just-form >>> .el-dialog__header {
+  padding: 10px 20px 10px;
+  /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), white); */
+}
+
+.h0 {
+  height: 0;
+  width: 0;
+}
+
+.dialog-just-form >>> .dialog-demo {
+  text-align: center;
+}
+</style>