1.路由整理。2.叫料。3.维修页面创建。仓储页面创建。

src/api/process/callMateriel.ts

@@ -0,0 +1,18 @@
+import request from "@/utils/request";
+
+// 通过物料编码获取库存信息
+export function stockMaterialList(materialCode: string) {
+  return request({
+    url: `/api/v1/wms/stock/stockMaterial/${materialCode}`,
+    method: "get",
+  });
+}
+
+// 不合格品分布情况及工序(通过序列号获取关联工序)
+export function operationListByIds11(ids: string[]) {
+  return request({
+    url: `/api/v1/process/escalationFault/operation/list`,
+    method: "post",
+    data: { seqNoList: ids },
+  });
+}

src/router/index.ts

@@ -1,172 +1,30 @@
-import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
-
-export const Layout = () => import("@/layout/index.vue");
-
-// 静态路由
-export const constantRoutes: RouteRecordRaw[] = [
-  {
-    path: "/redirect",
-    component: Layout,
-    meta: { hidden: true },
-    children: [
-      {
-        path: "/redirect/:path(.*)",
-        component: () => import("@/views/redirect/index.vue"),
-      },
-    ],
-  },
-
-  {
-    path: "/login",
-    component: () => import("@/views/login/index.vue"),
-    meta: { hidden: true },
-  },
-
-  {
-    path: "/",
-    name: "/",
-    component: Layout,
-    redirect: "/process",
-    children: [
-      {
-        path: "process",
-        component: () => import("@/views/process/main.vue"),
-        name: "ProcessMain",
-        meta: {
-          title: "process",
-          icon: "homepage",
-        },
-      },
-      {
-        path: "pro-steps",
-        component: () => import("@/views/pro-steps/index.vue"),
-        name: "ProSteps",
-        meta: {
-          title: "",
-          icon: "homepage",
-          keepAlive: true,
-          back: true,
-        },
-        children: [
-          {
-            path: "dianjian",
-            component: () =>
-              import("@/views/pro-steps/components/dianjian.vue"),
-            name: "Dianjian",
-            meta: {
-              back: true,
-            },
-          },
-          {
-            path: "duomeiticaiji",
-            component: () =>
-              import("@/views/pro-steps/components/duomeiticaiji.vue"),
-            name: "Duomeiticaiji",
-            meta: {
-              back: true,
-            },
-          },
-          {
-            path: "esop",
-            component: () => import("@/views/pro-steps/components/ESOP.vue"),
-            name: "Esop",
-            meta: {
-              back: true,
-            },
-          },
-          {
-            path: "jingu",
-            component: () => import("@/views/pro-steps/components/jingu.vue"),
-            name: "Jingu",
-            meta: {
-              back: true,
-            },
-          },
-          {
-            path: "mingpaibangding",
-            component: () =>
-              import("@/views/pro-steps/components/mingpaibangding.vue"),
-            name: "Mingpaibangding",
-            meta: {
-              back: true,
-            },
-          },
-          {
-            path: "jiluxiang",
-            component: () =>
-              import("@/views/pro-steps/components/jiluxiang.vue"),
-            name: "Jiluxiang",
-            meta: {
-              back: true,
-              keepAlive: true,
-            },
-          },
-          {
-            path: "shebeijilu",
-            component: () =>
-              import("@/views/pro-steps/components/shebeijilu.vue"),
-            name: "Shebeijilu",
-            meta: {
-              back: true,
-            },
-          },
-          {
-            path: "tiaoshipipei",
-            component: () =>
-              import("@/views/pro-steps/components/tiaoshipipei.vue"),
-            name: "Tiaoshipipei",
-            meta: {
-              back: true,
-            },
-          },
-          {
-            path: "wuliaocaiji",
-            component: () =>
-              import("@/views/pro-steps/components/wuliaocaiji.vue"),
-            name: "Wuliaocaiji",
-            meta: {
-              back: true,
-              keepAlive: true,
-            },
-          },
-        ],
-      },
-      {
-        path: "call-materiel",
-        component: () =>
-          import("@/views/pro-operation/call-materiel/index.vue"),
-        name: "call-materiel",
-        meta: {
-          title: "叫料",
-          icon: "homepage",
-          back: true,
-        },
-      },
-      {
-        path: "drawing",
-        component: () => import("@/views/pro-operation/drawing/index.vue"),
-        name: "drawing-list",
-        meta: {
-          title: "图纸",
-          icon: "homepage",
-          back: true,
-        },
-      },
-    ],
-  },
-
-  {
-    path: "/:pathMatch(.*)*", // 必备
-    component: () => import("@/views/error-page/404.vue"),
+import { createRouter, createWebHashHistory } from "vue-router";
+
+const moduleFiles: any = import.meta.glob("./modules/*.ts", { eager: true });
+
+// 通过 reduce 去搜集所有的模块的导出内容
+const configRoutes = Object.keys(moduleFiles).reduce(
+  (routes: any, filepath: string) => {
+    const value = moduleFiles[filepath].default;
+
+    // 我们判断导出的是不是数组，是则进行拓展解构
+    if (Array.isArray(value)) {
+      routes.push(...value);
+    } else {
+      // 否则直接加到routes中
+      routes.push(value);
+    }
+    return routes;
   },
-];
+  []
+);
 
 /**
  * 创建路由
  */
 const router = createRouter({
   history: createWebHashHistory(),
-  routes: constantRoutes,
+  routes: configRoutes,
   // 刷新时，滚动条位置还原
   scrollBehavior: () => ({ left: 0, top: 0 }),
 });

src/router/modules/constant.ts

@@ -0,0 +1,29 @@
+import { RouteRecordRaw } from "vue-router";
+
+const Layout = () => import("@/layout/index.vue");
+
+const constantRoutes: RouteRecordRaw[] = [
+  {
+    path: "/redirect",
+    component: Layout,
+    meta: { hidden: true },
+    children: [
+      {
+        path: "/redirect/:path(.*)",
+        component: () => import("@/views/redirect/index.vue"),
+      },
+    ],
+  },
+
+  {
+    path: "/login",
+    component: () => import("@/views/login/index.vue"),
+    meta: { hidden: true },
+  },
+
+  {
+    path: "/:pathMatch(.*)*", // 必备
+    component: () => import("@/views/error-page/404.vue"),
+  },
+];
+export default constantRoutes;

src/router/modules/process.ts

@@ -0,0 +1,131 @@
+const Layout = () => import("@/layout/index.vue");
+
+export default {
+  path: "/",
+  name: "/",
+  component: Layout,
+  redirect: "/process",
+  children: [
+    {
+      path: "process",
+      component: () => import("@/views/process/main.vue"),
+      name: "ProcessMain",
+      meta: {
+        title: "process",
+        icon: "homepage",
+      },
+    },
+    {
+      path: "pro-steps",
+      component: () => import("@/views/pro-steps/index.vue"),
+      name: "ProSteps",
+      meta: {
+        title: "",
+        icon: "homepage",
+        keepAlive: true,
+        back: true,
+      },
+      children: [
+        {
+          path: "dianjian",
+          component: () => import("@/views/pro-steps/components/dianjian.vue"),
+          name: "Dianjian",
+          meta: {
+            back: true,
+          },
+        },
+        {
+          path: "duomeiticaiji",
+          component: () =>
+            import("@/views/pro-steps/components/duomeiticaiji.vue"),
+          name: "Duomeiticaiji",
+          meta: {
+            back: true,
+          },
+        },
+        {
+          path: "esop",
+          component: () => import("@/views/pro-steps/components/ESOP.vue"),
+          name: "Esop",
+          meta: {
+            back: true,
+          },
+        },
+        {
+          path: "jingu",
+          component: () => import("@/views/pro-steps/components/jingu.vue"),
+          name: "Jingu",
+          meta: {
+            back: true,
+          },
+        },
+        {
+          path: "mingpaibangding",
+          component: () =>
+            import("@/views/pro-steps/components/mingpaibangding.vue"),
+          name: "Mingpaibangding",
+          meta: {
+            back: true,
+          },
+        },
+        {
+          path: "jiluxiang",
+          component: () => import("@/views/pro-steps/components/jiluxiang.vue"),
+          name: "Jiluxiang",
+          meta: {
+            back: true,
+            keepAlive: true,
+          },
+        },
+        {
+          path: "shebeijilu",
+          component: () =>
+            import("@/views/pro-steps/components/shebeijilu.vue"),
+          name: "Shebeijilu",
+          meta: {
+            back: true,
+          },
+        },
+        {
+          path: "tiaoshipipei",
+          component: () =>
+            import("@/views/pro-steps/components/tiaoshipipei.vue"),
+          name: "Tiaoshipipei",
+          meta: {
+            back: true,
+          },
+        },
+        {
+          path: "wuliaocaiji",
+          component: () =>
+            import("@/views/pro-steps/components/wuliaocaiji.vue"),
+          name: "Wuliaocaiji",
+          meta: {
+            back: true,
+            keepAlive: true,
+          },
+        },
+      ],
+    },
+    {
+      path: "call-materiel",
+      component: () => import("@/views/pro-operation/call-materiel/index.vue"),
+      name: "call-materiel",
+      meta: {
+        title: "叫料",
+        icon: "homepage",
+        back: true,
+      },
+    },
+    {
+      path: "drawing",
+      component: () => import("@/views/pro-operation/drawing/index.vue"),
+      name: "drawing-list",
+      meta: {
+        title: "图纸",
+        icon: "homepage",
+        back: true,
+      },
+    },
+  ],
+};

src/router/modules/repair.ts

@@ -0,0 +1,28 @@
+const Layout = () => import("@/layout/index.vue");
+
+export default {
+  path: "/repair",
+  name: "repair",
+  component: Layout,
+  redirect: "/repair/main",
+  children: [
+    {
+      path: "main",
+      component: () => import("@/views/repair/main/index.vue"),
+      name: "RepairMain",
+      meta: {
+        title: "维修站",
+        icon: "homepage",
+      },
+    },
+    {
+      path: "operation",
+      component: () => import("@/views/repair/operation/index.vue"),
+      name: "RepairOperation",
+      meta: {
+        title: "维修站操作",
+        icon: "homepage",
+      },
+    },
+  ],
+};

src/router/modules/stroage.ts

@@ -0,0 +1,19 @@
+const Layout = () => import("@/layout/index.vue");
+
+export default {
+  path: "/storage",
+  name: "storage",
+  component: Layout,
+  redirect: "/storage/main",
+  children: [
+    {
+      path: "main",
+      component: () => import("@/views/storage/index.vue"),
+      name: "StorageMain",
+      meta: {
+        title: "智能仓储",
+        icon: "homepage",
+      },
+    },
+  ],
+};

src/store/modules/permission.ts

@@ -1,7 +1,6 @@
 import { RouteRecordRaw } from "vue-router";
-import { constantRoutes } from "@/router";
+import constantRoutes from "@/router/modules/constant";
 import { store } from "@/store";
-import { listRoutes } from "@/api/menu";
 
 const modules = import.meta.glob("../../views/**/**.vue");
 const Layout = () => import("@/layout/index.vue");
@@ -76,6 +75,7 @@ export const usePermissionStore = defineStore("permission", () => {
   function setRoutes(newRoutes: RouteRecordRaw[]) {
     routes.value = constantRoutes.concat(newRoutes);
   }
+
   /**
    * 生成动态路由
    *
@@ -100,6 +100,7 @@ export const usePermissionStore = defineStore("permission", () => {
     //     });
     // });
   }
+
   /**
    * 递归过滤有权限的异步(动态)路由
    *
@@ -155,12 +156,14 @@ export const usePermissionStore = defineStore("permission", () => {
    * 获取与激活的顶部菜单项相关的混合模式左侧菜单集合
    */
   const mixLeftMenus = ref<RouteRecordRaw[]>([]);
+
   function setMixLeftMenus(topMenuPath: string) {
     const matchedItem = routes.value.find((item) => item.path === topMenuPath);
     if (matchedItem && matchedItem.children) {
       mixLeftMenus.value = matchedItem.children;
     }
   }
+
   return {
     routes,
     generateRoutes,

src/views/pro-operation/call-materiel/desperse.vue

@@ -1,7 +1,118 @@
 <template>
-  <div>src/views/pro-operation/call-materiel /desperse</div>
+  <el-scrollbar>
+    <div class="grid-container">
+      <div
+        v-for="(box, index) in merterielBoxes"
+        :key="index"
+        class="suit-box"
+        @click="testClick(index)"
+      >
+        <div>
+          <div class="suit-title">{{ box?.materialName }}</div>
+          <div class="suit-desc">{{ box?.spec }}</div>
+        </div>
+        <div>
+          <div>
+            <span class="suit-count">{{ box?.num }}</span>
+            <span class="suit-desc">{{ box?.unit }}</span>
+          </div>
+          <div class="suit-desc">当前库存</div>
+        </div>
+      </div>
+    </div>
+  </el-scrollbar>
+  <CallHistory ref="callHistoryRef" />
+  <MarterielBoxDetail ref="materielBoxDetailRef" />
+  <ChangeCount ref="changeCountRef" description="双面胶黑色" title="叫料数量" />
+  <ConfirmMessage ref="confirmMessageRef" />
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import CallHistory from "@/views/pro-operation/call-materiel/components/call-history.vue";
+import MarterielBoxDetail from "@/views/pro-operation/call-materiel/components/materiel-box-detail.vue";
+import ChangeCount from "@/components/CommonDialogs/ChangeCount.vue";
+import ConfirmMessage from "@/components/CommonDialogs/ConfirmMessage.vue";
+import { stockMaterialList } from "@/api/process/callMateriel";
+import { useProcessStore } from "@/store/modules/processView";
 
-<style lang="scss" scoped></style>
+const processStore = useProcessStore();
+const merterielBoxes = ref<any>([]);
+
+onMounted(() => {
+  // 获取数据
+  stockMaterialList(processStore.scanInfo.materialCode).then((res) => {
+    merterielBoxes.value = res.data;
+  });
+});
+
+// =========叫料历史
+const callHistoryRef = ref<InstanceType<typeof CallHistory>>();
+
+// =========料箱详情
+const materielBoxDetailRef = ref<InstanceType<typeof MarterielBoxDetail>>();
+// =========叫料数量
+const changeCountRef = ref<InstanceType<typeof ChangeCount>>();
+
+// =========确认弹窗
+const confirmMessageRef = ref<InstanceType<typeof ConfirmMessage>>();
+
+const testClick = (index: number) => {
+  callHistoryRef.value?.showDrawer();
+  materielBoxDetailRef.value?.showDialog("", () => {});
+  changeCountRef.value?.showDialog(12, (value: number) => {
+    console.log(value);
+  });
+  confirmMessageRef.value?.showDialog(
+    "工位上料提示",
+    "料箱：LX1321312已到达缓存位，是否立即工位上料？",
+    "工位上料",
+    () => {}
+  );
+};
+</script>
+
+<style lang="scss" scoped>
+.grid-container {
+  width: 100%;
+  display: grid;
+  /*行间距*/
+  grid-row-gap: 24px;
+  /*列间距*/
+  grid-column-gap: 24px;
+
+  grid-template-columns: 1fr 1fr 1fr;
+  overflow-y: auto;
+
+  .suit-box {
+    height: 210px;
+    background-color: white;
+    border-radius: 16px 16px 16px 16px;
+    padding: 24px 30px;
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    justify-content: space-between;
+    position: relative;
+
+    .suit-title {
+      font-weight: 500;
+      font-size: 20px;
+      color: rgba(0, 0, 0, 0.9);
+      text-align: left;
+    }
+
+    .suit-count {
+      font-weight: bold;
+      font-size: 38px;
+      color: rgba(0, 0, 0, 0.9);
+      text-align: left;
+    }
+
+    .suit-desc {
+      font-size: 20px;
+      color: rgba(0, 0, 0, 0.6);
+      text-align: left;
+    }
+  }
+}
+</style>

src/views/repair/main/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>src/views/repair/main /index</div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>

src/views/repair/operation/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>src/views/repair/operation /index</div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>

src/views/storage/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>src/views/storage /index</div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>