值班人员 上传完成

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/index.vue

@@ -14,7 +14,7 @@
           </template>
           机构值班表模板
         </ButtonGradient>
-        <ButtonGradient>
+        <ButtonGradient @click.native="uploadFile">
           <template #prefix>
             <img src="@screen/images/export.svg" />
           </template>
@@ -114,7 +114,7 @@ import InputSearch from '@screen/components/InputSearch/index.vue';
 import { searchFormList } from "./data";
 import request from "@/utils/request";
 import { setLoading } from "@screen/utils/index.js"
-import { delay, exportFile, confirm } from "@screen/utils/common";
+import { delay, exportFile, confirm, uploadFile } from "@screen/utils/common";
 import { Message } from "element-ui";
 
 export default {
@@ -259,6 +259,10 @@ export default {
         .catch(() => {
           Message.error("删除失败")
         })
+    },
+
+    uploadFile() {
+      uploadFile({ url: "/business/shifts/importEquipment" });
     }
   }
 }

ruoyi-ui/src/views/JiHeExpressway/utils/common.js

@@ -51,7 +51,7 @@ export function exportFile({
 }
 
 /**
- *
+ * Loading 状态的消息
  * @param {ElMessageOptions} options
  * @returns
  */
@@ -94,3 +94,95 @@ export function confirm({
       });
   });
 }
+
+export function uploadFile(
+  { url, method = "POST", data } = {},
+  {
+    // 接受的文件类型
+    accept = ".xls,.xlsx",
+    // 是否多选
+    multiple,
+    // 最大文件大小 (单位: MB)
+    maxSize = 15,
+  } = {}
+) {
+  return new Promise((resolve, reject) => {
+    if (!url) return reject("未配置上传地址");
+
+    const fileDom = document.createElement("input");
+
+    fileDom.type = "file";
+    fileDom.setAttribute("type", "file");
+    accept && fileDom.setAttribute("accept", accept);
+    multiple && fileDom.setAttribute("multiple", "");
+
+    fileDom.click();
+
+    fileDom.oncancel = function () {
+      reject("取消 Upload");
+    };
+
+    fileDom.onchange = function () {
+      const [file] = fileDom.files;
+
+      if (!file) return reject("未选择文件");
+
+      if (file.size > 1024 * 1024 * maxSize) {
+        Message.error(`文件大小不能超过${maxSize}MB`);
+        reject(`文件大小不能超过${maxSize}MB`);
+        return;
+      }
+
+      const close = loadingMessage({ message: "文件上传中..." });
+
+      const formData = new FormData();
+
+      formData.append("file", file);
+
+      for (const key in data) {
+        formData.append(key, data[key]);
+      }
+
+      request({
+        url,
+        method,
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+        data: formData,
+      })
+        .then((res) => {
+          if (res.code !== 200) {
+            Message.error("上传失败");
+            reject(res.msg);
+            return;
+          }
+
+          Message.success("上传成功");
+
+          resolve(res);
+        })
+        .catch((err) => {
+          reject(err);
+        })
+        .finally(() => {
+          close();
+        });
+    };
+  });
+}
+
+/**
+ *
+ * @param {*} number
+ * @returns
+ */
+export function returnFileSize(number) {
+  if (number < 1024) {
+    return `${number} bytes`;
+  } else if (number >= 1024 && number < 1048576) {
+    return `${(number / 1024).toFixed(1)} KB`;
+  } else if (number >= 1048576) {
+    return `${(number / 1048576).toFixed(1)} MB`;
+  }
+}

ruoyi-ui/src/views/JiHeExpressway/utils/index.js

@@ -1,7 +1,7 @@
 import { Loading } from "element-ui";
 
 /**
- *  设置 一个Loading
+ *  设置 一个Loading 全屏的Loading
  * @param {{ target: HTMLElement; fullscreen: boolean; spinner: string; text: string; }} options
  * @returns close callback
  */