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>

src/views/atomViews/ListViewWithHead.vue

@@ -4,23 +4,54 @@
     <!-- <head-form :form-config="headFormConfig" @headBtnClick="btnClick" /> -->
     <BaseSearchForm :head-config="headConfig" @btn-click="handleBtnClick" />
 
-    <BaseListTable v-loading="tableLoading" :table-config="tableConfig.table" :column-config="tableConfig.column"
-      :table-data="dataList" @operate-event="handleOperate" :current-page="page" :current-size="size"
+    <BaseListTable
+      v-loading="tableLoading"
+      :table-config="tableConfig.table"
+      :column-config="tableConfig.column"
+      :table-data="dataList"
+      @operate-event="handleOperate"
+      :current-page="page"
+      :current-size="size"
       :refresh-layout-key="refreshLayoutKey" />
 
-    <el-pagination class="mt-5 flex justify-end" @size-change="handleSizeChange" @current-change="handlePageChange"
-      :current-page.sync="page" :page-sizes="[1, 5, 10, 20, 50, 100]" :page-size="size" :total="totalPage"
+    <el-pagination
+      class="mt-5 flex justify-end"
+      @size-change="handleSizeChange"
+      @current-change="handlePageChange"
+      :current-page.sync="page"
+      :page-sizes="[1, 5, 10, 20, 50, 100]"
+      :page-size="size"
+      :total="totalPage"
       layout="total, sizes, prev, pager, next, jumper"></el-pagination>
     <!-- :current-page.sync="currentPage"
           			:page-size.sync="pageSize" -->
 
-    <DialogWithMenu ref="edit-dialog" v-if="!!dialogConfigs && dialogType === DIALOG_WITH_MENU"
-      :dialog-visible.sync="dialogVisible" :configs="dialogConfigs" @refreshDataList="getList" />
-    <DialogJustForm ref="edit-dialog" v-if="!!dialogConfigs && dialogType === DIALOG_JUST_FORM"
-      :dialog-visible.sync="dialogVisible" :configs="dialogConfigs" @refreshDataList="getList"
+    <DialogWithMenu
+      ref="edit-dialog"
+      v-if="!!dialogConfigs && dialogType === DIALOG_WITH_MENU"
+      :dialog-visible.sync="dialogVisible"
+      :configs="dialogConfigs"
+      @refreshDataList="getList" />
+    <DialogJustForm
+      ref="edit-dialog"
+      v-if="!!dialogConfigs && dialogType === DIALOG_JUST_FORM"
+      :dialog-visible.sync="dialogVisible"
+      :configs="dialogConfigs"
+      @refreshDataList="getList"
       @emit-data="handleOperate" />
-    <DialogCarPayload ref="car-payload-dialog" v-if="!!carPayloadDialogConfigs"
-      :dialog-visible.sync="carPayloadDialogVisible" :configs="carPayloadDialogConfigs" @refreshDataList="getList" />
+    <DialogCarPayload
+      ref="car-payload-dialog"
+      v-if="!!carPayloadDialogConfigs"
+      :dialog-visible.sync="carPayloadDialogVisible"
+      :configs="carPayloadDialogConfigs"
+      @refreshDataList="getList" />
+    <DialogUpload
+      ref="upload-dialog"
+      v-if="uploadDialogVisible"
+      title="导入配方"
+      url="/importTemplates/bomImport.xlsx"
+      filename="bomTemplate.xlsx"
+      @refresh-list="getList" />
   </div>
 </template>
 
@@ -30,6 +61,7 @@ import BaseSearchForm from "@/components/BaseSearchForm.vue";
 import DialogWithMenu from "@/components/DialogWithMenu.vue";
 import DialogJustForm from "@/components/DialogJustForm.vue";
 import DialogCarPayload from "@/components/DialogCarPayload.vue";
+import DialogUpload from "@/components/DialogUpload.vue";
 import moment from "moment";
 
 const DIALOG_WITH_MENU = "DialogWithMenu";
@@ -38,7 +70,7 @@ const DIALOG_CARPAYLOAD = "DialogCarPayload";
 
 export default {
   name: "ListViewWithHead",
-  components: { BaseSearchForm, BaseListTable, DialogWithMenu, DialogJustForm, DialogCarPayload },
+  components: { BaseSearchForm, BaseListTable, DialogWithMenu, DialogJustForm, DialogCarPayload, DialogUpload },
   props: {
     tableConfig: {
       type: Object,
@@ -109,6 +141,7 @@ export default {
       dataList: [],
       tableLoading: false,
       refreshLayoutKey: null,
+      uploadDialogVisible: false,
     };
   },
   inject: ["urls"],
@@ -138,9 +171,6 @@ export default {
         });
       }
 
-      // if (this.urls.pageIsPostApi) {
-      // } else {
-      // 默认是 get 方式请求 page
       this.$http[this.urls.pageIsPostApi ? "post" : "get"](
         this.urls.page,
         this.urls.pageIsPostApi
@@ -300,7 +330,7 @@ export default {
           break;
         }
         case "to-bom-detail": {
-          console.log('to-bom-detail', data)
+          console.log("to-bom-detail", data);
           // 查看配方详情
           return this.$router.push({
             name: "pms-bomDetails",
@@ -381,12 +411,12 @@ export default {
           });
         }
         case "detach": {
-
-          return this.$confirm('是否下发?', '提示', {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }).then(() => {
+          return this.$confirm("是否下发?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+          })
+            .then(() => {
               this.$http
                 .post(this.urls.detach, data /* { id: data } */, { headers: { "Content-Type": "application/json" } })
                 .then(({ data: res }) => {
@@ -407,14 +437,13 @@ export default {
                     });
                   }
                 });
-          }).catch(() => {
+            })
+            .catch(() => {
               this.$message({
-              type: 'warning',
-              message: '已取消下发'
+                type: "warning",
+                message: "已取消下发",
               });
             });
-
-
         }
         case "to-car-history": {
           return this.$router.push({
@@ -431,19 +460,21 @@ export default {
         }
         case "sync": {
           // 同步单个料仓数据
-          this.$http.post(this.urls.syncSingleUrl, data, {
+          this.$http
+            .post(this.urls.syncSingleUrl, data, {
               headers: {
-              "Content-Type": "application/json"
-            }
-          }).then(({ data: res }) => {
+                "Content-Type": "application/json",
+              },
+            })
+            .then(({ data: res }) => {
               if (res.code === 0) {
                 this.$message({
-                message: '同步成功',
-                type: 'success'
+                  message: "同步成功",
+                  type: "success",
                 });
                 this.getList();
               }
-          })
+            });
         }
       }
     },
@@ -461,7 +492,9 @@ export default {
         case "新增":
           this.openDialog();
           break;
-
+        case "导入":
+          this.openUploadDialog();
+          break;
         case "手动添加": {
           this.openDialog();
           return;
@@ -502,9 +535,9 @@ export default {
         case "同步":
         case "全部同步":
           this.$http.post(this.urls.syncUrl).then(({ data: res }) => {
-            console.log('全部同步', res)
+            console.log("全部同步", res);
             if (res.code === 0) {
-              this.$message({ message: '同步成功', type: 'success' })
+              this.$message({ message: "同步成功", type: "success" });
               this.getList();
             }
           });
@@ -540,6 +573,14 @@ export default {
         this.$refs["edit-dialog"].init(/** some args... */ row_id, detail_mode, tag_info, extraParams);
       });
     },
+
+    openUploadDialog() {
+      this.uploadDialogVisible = true;
+
+      this.$nextTick(() => {
+        this.$refs["upload-dialog"].init();
+      });
+    },
   },
 };
 </script>

src/views/modules/pms/bom/config.js

@@ -251,6 +251,7 @@ export default function () {
       copyUrl: "/pms/bom/copy",
       subase: "/pms/bomMaterial",
       subpage: "/pms/bomMaterial/page",
+      importOrderUrl: '/pms/order/importExcelBom', // 导入的api
     },
   };
 }