feature/0411工序操作二级路由实现

package.json

@@ -57,6 +57,7 @@
     "path-browserify": "^1.0.1",
     "path-to-regexp": "^6.2.1",
     "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
     "sockjs-client": "1.6.1",
     "sortablejs": "^1.15.2",
     "stompjs": "^2.3.3",

src/router/index.ts

@@ -47,6 +47,89 @@ export const constantRoutes: RouteRecordRaw[] = [
           icon: "homepage",
           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,
+            },
+          },
+        ],
       },
     ],
   },

src/store/index.ts

@@ -1,8 +1,9 @@
 import type { App } from "vue";
 import { createPinia } from "pinia";
-
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
 const store = createPinia();
-
+//状态机持久化
+store.use(piniaPluginPersistedstate);
 // 全局注册 store
 export function setupStore(app: App<Element>) {
   app.use(store);
@@ -14,4 +15,5 @@ export * from "./modules/settings";
 export * from "./modules/tagsView";
 export * from "./modules/user";
 export * from "./modules/common";
+export * from "./modules/processView";
 export { store };

src/store/modules/processView.ts

@@ -0,0 +1,15 @@
+export const processViewStore = defineStore(
+  "process",
+  () => {
+    //首页到工序操作传递参数
+    const odersData = ref({});
+    function setOdersData(obj: object) {
+      odersData.value = obj;
+    }
+    return { odersData, setOdersData };
+  },
+  {
+    //开启持久化存储
+    persist: true,
+  }
+);

src/views/pro-steps/Jiluxiang.vue

@@ -1,11 +1,12 @@
 <template>
   <MaterialCollectionDG ref="MaterialCollectionDGRef" />
   <el-button @click="handleClick">物料采集</el-button>
+  <el-input v-model="input" style="width: 240px" placeholder="Please input" />
 </template>
 
 <script lang="ts" setup>
 import MaterialCollectionDG from "@/components/CommonDialogs/MaterialCollectionDG.vue";
-
+const input = ref("aa");
 const MaterialCollectionDGRef = ref<any>(null);
 const handleClick = () => {
   MaterialCollectionDGRef.value &&

src/views/pro-steps/components/ESOP.vue

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

src/views/pro-steps/components/Jiluxiang.vue

@@ -0,0 +1,18 @@
+<template>
+  <!-- 记录项 -->
+  <div>
+    <el-input v-model="input" style="width: 240px" placeholder="Please input" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: "Jialuxiang",
+});
+const input = ref("");
+onActivated(() => {
+  console.log("active");
+});
+</script>
+
+<style lang="scss" scoped></style>

src/views/pro-steps/components/dianjian.vue

@@ -0,0 +1,12 @@
+<template>
+  <!-- 点检 -->
+  <div>
+    <el-input v-model="input" style="width: 240px" placeholder="Please input" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+const input = ref("");
+</script>
+
+<style lang="scss" scoped></style>

src/views/pro-steps/components/duomeiticaiji.vue

@@ -0,0 +1,8 @@
+<template>
+  <!-- 多媒体采集 -->
+  <div>src/views/555555pro-steps</div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>

src/views/pro-steps/components/jingu.vue

@@ -0,0 +1,8 @@
+<template>
+  <!-- 紧固 -->
+  <div>4</div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>

src/views/pro-steps/MultimediaCapture.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- 铭牌绑定 -->
   <div>src/views/pro-steps</div>
 </template>
 

src/views/pro-steps/components/shebeijilu.vue

@@ -0,0 +1,8 @@
+<template>
+  <!-- 设备记录 -->
+  <div>2</div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>

src/views/pro-steps/components/tiaoshipipei.vue

@@ -0,0 +1,8 @@
+<template>
+  <!-- 调试配对页面 -->
+  <div>1</div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>

src/views/pro-steps/components/wuliaocaiji.vue

@@ -0,0 +1,12 @@
+<template>
+  <!-- 物料采集 -->
+  <div>
+    <el-input v-model="input" style="width: 240px" placeholder="Please input" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+const input = ref("");
+</script>
+
+<style lang="scss" scoped></style>

src/views/pro-steps/index.vue

@@ -1,21 +1,30 @@
 <template>
-  <div class="mainContentBox">
+  <div class="mainContentBox" style="padding: 0 24px">
     <el-row :gutter="20">
       <el-col :span="4" class="elColClasss">
         <!-- 侧边栏盒子 -->
         <Jiluxiang />
       </el-col>
       <el-col :span="20" class="elColClasss">
-        <div class="typeContainer">
-          <div
-            v-for="(item, index) in stepComponents"
-            :key="index"
-            :class="getNameClass(index)"
-            class="typeBox"
-            @click="clickToolCom(item, index)"
-          >
-            <svg-icon :icon-class="item.compentType" size="30" />
-            <div class="name">{{ item.compentName }}</div>
+        <div class="container">
+          <div class="typeContainer">
+            <div v-for="(item, index) in stepComponents" :key="index" :class="getNameClass(index)" class="typeBox">
+              <router-link :to="{ name: item.path }">
+                <div class="svgIcon">
+                  <svg-icon :icon-class="item.compentType" size="30" />
+                </div>
+                <div class="name">{{ item.compentName }}</div>
+              </router-link>
+            </div>
+          </div>
+          <!-- 二级路由盒子 -->
+          <div class="routerView">
+            <router-view v-slot="{ Component, route }">
+              <keep-alive v-if="route.meta.keepAlive == true">
+                <component :is="Component" :key="route.name" />
+              </keep-alive>
+              <component v-else :is="Component" :key="route.name" />
+            </router-view>
           </div>
         </div>
       </el-col>
@@ -26,65 +35,102 @@
 <script setup>
 import { onMounted } from "vue";
 import Jiluxiang from "@/views/pro-steps/Jiluxiang.vue";
-
+import { processViewStore } from "@/store";
+const store = processViewStore();
 const route = useRoute();
+//配置标签信息Data
 const stepComponents = ref([
   {
     compentName: "记录项",
     compentType: "jiluxiang",
-    route: "",
+    path: "Jiluxiang",
   },
   {
     compentName: "物料采集",
     compentType: "wuliaocaiji",
+    path: "wuliaocaiji",
   },
   {
     compentName: "ESOP",
     compentType: "ESOP",
+    path: "esop",
   },
   {
     compentName: "点检",
     compentType: "dianjian",
+    path: "dianjian",
   },
   {
     compentName: "设备记录",
     compentType: "shebeijilu",
+    path: "shebeijilu",
   },
   {
     compentName: "紧固",
     compentType: "jingu",
+    path: "jingu",
   },
   {
     compentName: "调试配对",
     compentType: "tiaoshipipei",
+    path: "tiaoshipipei",
   },
   {
     compentName: "铭牌绑定",
     compentType: "mingpai",
+    path: "mingpaibangding",
   },
   {
     compentName: "多媒体采集",
     compentType: "duomeiticaiji",
+    path: "duomeiticaiji",
   },
 ]);
+//当前路由在setpComponents中的index
 const selectIndex = ref(-1);
-const currentCom = ref({});
 
-const clickToolCom = (com, index) => {
-  selectIndex.value = index;
-  currentCom.value = com;
-};
 const getNameClass = (index) => {
   return index === selectIndex.value ? "typeBoxSelected" : "typeBoxNormal";
 };
+//设置标签是否被选中
+const setSelectIndex = () => {
+  stepComponents.value.forEach((item, index) => {
+    if (item.path == route.name) {
+      selectIndex.value = index;
+    }
+  });
+};
+onMounted(() => {
+  setSelectIndex();
+});
 </script>
 
 <style lang="scss" scoped>
-.typeContainer {
+.container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  background-color: aqua;
   width: 100%;
-  overflow-x: auto;
+  height: calc(100vh - 80px);
+
+  .typeContainer {
+    width: 100%;
+    overflow-x: auto;
+    display: flex;
+    justify-content: flex-start;
+
+    .svgIcon {
+      @include flex;
+    }
+  }
+}
+
+.routerView {
   display: flex;
-  justify-content: flex-start;
+  flex: 1;
+  background-color: red;
+  overflow-y: auto;
 }
 
 .typeBox {

src/views/process/currentProduction.vue

@@ -16,9 +16,14 @@
 import CurrentOrderInfo from "@/views/process/components/currentOrderInfo.vue";
 import Operate from "@/views/process/components/operate.vue";
 import ScanCode from "@/views/process/components/scanCode.vue";
+import { processViewStore } from "@/store";
+
+const store = processViewStore();
 const router = useRouter();
+const orderData = { name: 2, id: 44 };
 const click = (itemValue) => {
-  router.push({ path: "/pro-steps", query: { id: 1 } });
+  store.setOdersData(orderData);
+  router.push({ path: "/pro-steps" });
 };
 </script>