1.request增加loading功能。

src/api/process/materialFlow.ts

@@ -27,11 +27,14 @@ export function getBoxDetailByLabel(label: string) {
 
 // 通过扫码获取物料信息
 export function getMaterialInfoByLabel(label: string) {
-  return request({
-    url: `/api/v1/process/circulation/material`,
-    method: "post",
-    data: { label },
-  });
+  return request(
+    {
+      url: `/api/v1/process/circulation/material`,
+      method: "post",
+      data: { label },
+    },
+    { loadingKey: "getMaterialInfoByLabel" }
+  );
 }
 
 //新增物料流转过程

src/store/modules/common.ts

@@ -7,6 +7,7 @@ export const useCommonStore = defineStore("commonStore", {
     isShowTable: false,
     tableType: 1,
     tableTitle: "",
+    loadingMap: new Map(),
   }),
   actions: {
     // 获取当前时间格式的函数

src/utils/request.ts

@@ -1,5 +1,10 @@
-import axios, { AxiosResponse, InternalAxiosRequestConfig } from "axios";
+import axios, {
+  AxiosRequestConfig,
+  AxiosResponse,
+  InternalAxiosRequestConfig,
+} from "axios";
 import { useUserStoreHook } from "@/store/modules/user";
+import { useCommonStoreHook } from "@/store/modules/common";
 
 // 创建 axios 实例
 const service = axios.create({
@@ -62,8 +67,32 @@ service.interceptors.response.use(
     return Promise.reject(error.message);
   }
 );
+
+interface ExtraConfig {
+  loadingKey?: string;
+}
+
 // 导出 axios 实例
-export default service;
+const myRequest = (config: AxiosRequestConfig, extra?: ExtraConfig) => {
+  const commonS = useCommonStoreHook();
+  const map = commonS.loadingMap;
+  if (extra?.loadingKey) {
+    map?.set(extra?.loadingKey, true);
+  }
+  return new Promise((resolve, reject) => {
+    service(config)
+      .then((response) => {
+        resolve(response);
+      })
+      .catch((error) => {
+        reject(error);
+      })
+      .then(() => {
+        map.delete(extra?.loadingKey);
+      });
+  });
+};
+export default myRequest;
 
 // code: "4104", msg: "账号不存在"enMsg: "accdunt
 // code: "4106", msg: "未登录"，enMsg: "not login")

src/views/material-flow/creatTask.vue

@@ -24,7 +24,10 @@
           placeholder="请扫描或输入物料编码"
           @keyup.enter="handleScanCodeInput"
         />
-        <div style="height: calc(100vh - 450px); margin-top: 15px">
+        <div
+          v-loading="map.get('getMaterialInfoByLabel')"
+          style="height: calc(100vh - 450px); margin-top: 15px"
+        >
           <el-scrollbar>
             <div class="list-container">
               <div
@@ -107,12 +110,16 @@ import {
   getDestinationList,
   getMaterialInfoByLabel,
 } from "@/api/process/materialFlow";
+import { useCommonStoreHook } from "@/store";
+
+const commonS = useCommonStoreHook();
+const map = commonS.loadingMap;
 
 const currentBox = ref("");
 const boxDetail = ref<any>({});
 const enterBox = () => {
   currentBox.value = currentBox.value.trim();
-  getBoxDetailByLabel(currentBox.value).then((res) => {
+  getBoxDetailByLabel(currentBox.value).then((res: any) => {
     boxDetail.value = res.data;
     // materialList.value = res.data.materialList;
   });
@@ -123,7 +130,7 @@ const scanCodeInput = ref("");
 const materialList = ref<any[]>([]);
 
 const handleScanCodeInput = () => {
-  getMaterialInfoByLabel(scanCodeInput.value).then((res) => {
+  getMaterialInfoByLabel(scanCodeInput.value).then((res: any) => {
     // 扫描之后要先查看数组中是否有这个物料，有的话就数量相加，没有的话就添加到数组中
     let hasMaterial = false;
     for (let i = 0; i < materialList.value.length; i++) {
@@ -168,7 +175,7 @@ const onEndBoxClick = (index: number, item: any) => {
 
 onMounted(() => {
   let wm = new WeakMap();
-  getDestinationList(1).then((res) => {
+  getDestinationList(1).then((res: any) => {
     destinationList.value = res.data;
   });
 });