feature/0411工序操作界面二级路由实现&首页工序参数跳转

src/layout/index.vue

@@ -4,12 +4,9 @@
     <section class="app-main">
       <router-view>
         <template #default="{ Component, route }">
-          <transition
-            enter-active-class="animate__animated animate__fadeIn"
-            mode="out-in"
-          >
-            <keep-alive :include="['ProcessMain,ProSteps']">
-              <component :is="Component" :key="route.fullPath" />
+          <transition enter-active-class="animate__animated animate__fadeIn" mode="out-in">
+            <keep-alive>
+              <component :is="Component" />
             </keep-alive>
           </transition>
         </template>

src/router/index.ts

@@ -32,7 +32,6 @@ export const constantRoutes: RouteRecordRaw[] = [
         path: "process",
         component: () => import("@/views/process/main.vue"),
         name: "ProcessMain",
-
         meta: {
           title: "process",
           icon: "homepage",
@@ -40,6 +39,7 @@ export const constantRoutes: RouteRecordRaw[] = [
       },
       {
         path: "pro-steps",
+        redirect: "/pro-steps/wuliaocaiji",
         component: () => import("@/views/pro-steps/index.vue"),
         name: "ProSteps",
         meta: {
@@ -63,7 +63,7 @@ export const constantRoutes: RouteRecordRaw[] = [
             path: "duomeiticaiji",
             component: () =>
               import("@/views/pro-steps/components/duomeiticaiji.vue"),
-            name: "duomeiticaiji",
+            name: "Duomeiticaiji",
             meta: {
               back: true,
             },
@@ -71,7 +71,7 @@ export const constantRoutes: RouteRecordRaw[] = [
           {
             path: "esop",
             component: () => import("@/views/pro-steps/components/ESOP.vue"),
-            name: "esop",
+            name: "Esop",
             meta: {
               back: true,
             },
@@ -79,7 +79,7 @@ export const constantRoutes: RouteRecordRaw[] = [
           {
             path: "jingu",
             component: () => import("@/views/pro-steps/components/jingu.vue"),
-            name: "jingu",
+            name: "Jingu",
             meta: {
               back: true,
             },
@@ -88,15 +88,15 @@ export const constantRoutes: RouteRecordRaw[] = [
             path: "mingpaibangding",
             component: () =>
               import("@/views/pro-steps/components/mingpaibangding.vue"),
-            name: "mingpaibangding",
+            name: "Mingpaibangding",
             meta: {
               back: true,
             },
           },
           {
-            path: "Jiluxiang",
+            path: "jiluxiang",
             component: () =>
-              import("@/views/pro-steps/components/Jiluxiang.vue"),
+              import("@/views/pro-steps/components/jiluxiang.vue"),
             name: "Jiluxiang",
             meta: {
               back: true,
@@ -107,7 +107,7 @@ export const constantRoutes: RouteRecordRaw[] = [
             path: "shebeijilu",
             component: () =>
               import("@/views/pro-steps/components/shebeijilu.vue"),
-            name: "shebeijilu",
+            name: "Shebeijilu",
             meta: {
               back: true,
             },
@@ -116,7 +116,7 @@ export const constantRoutes: RouteRecordRaw[] = [
             path: "tiaoshipipei",
             component: () =>
               import("@/views/pro-steps/components/tiaoshipipei.vue"),
-            name: "tiaoshipipei",
+            name: "Tiaoshipipei",
             meta: {
               back: true,
             },
@@ -125,7 +125,7 @@ export const constantRoutes: RouteRecordRaw[] = [
             path: "wuliaocaiji",
             component: () =>
               import("@/views/pro-steps/components/wuliaocaiji.vue"),
-            name: "wuliaocaiji",
+            name: "Wuliaocaiji",
             meta: {
               back: true,
               keepAlive: true,

src/styles/variables.scss

@@ -31,7 +31,7 @@ $tags-view-height: 34px; // TagsView 高度
 $select-hover: #0A59F7;//选中主题色
 $font-default-black: #303030;//字体默认黑
 $font-default-60: #00000060;//黑字体透明60%
-
+$font-default-80: #00000080;//黑字体透明60%
 //字体大小
 $f10:10px;
 $f12:12px;
@@ -42,6 +42,9 @@ $f24:24px;
 $f38:38px;
 $f60:60px;
 
+//字重
+$Medium:500;
+
 
 //flex布局居中
 @mixin flex() {

src/views/pro-steps/Jiluxiang.vue

@@ -1,19 +1,23 @@
 <template>
-  <MaterialCollectionDG ref="MaterialCollectionDGRef" />
+  <!-- <MaterialCollectionDG ref="MaterialCollectionDGRef" />
   <el-button @click="handleClick">物料采集</el-button>
-  <el-input v-model="input" style="width: 240px" placeholder="Please input" />
+  <el-input v-model="input" style="width: 240px" placeholder="Please input" /> -->
+  <el-scrollbar>
+    <LeftBarInfo />
+  </el-scrollbar>
 </template>
 
 <script lang="ts" setup>
-import MaterialCollectionDG from "@/components/CommonDialogs/MaterialCollectionDG.vue";
+// import MaterialCollectionDG from "@/components/CommonDialogs/MaterialCollectionDG.vue";
+import LeftBarInfo from "./components/leftBarInfo.vue";
 const input = ref("aa");
-const MaterialCollectionDGRef = ref<any>(null);
-const handleClick = () => {
-  MaterialCollectionDGRef.value &&
-    MaterialCollectionDGRef.value.showMCDG("", () => {
-      console.log("采集成功");
-    });
-};
+// const MaterialCollectionDGRef = ref<any>(null);
+// const handleClick = () => {
+//   MaterialCollectionDGRef.value &&
+//     MaterialCollectionDGRef.value.showMCDG("", () => {
+//       console.log("采集成功");
+//     });
+// };
 </script>
 
 <style lang="scss" scoped></style>

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

@@ -1,5 +1,4 @@
 <template>
-  <!-- 记录项 -->
   <div>
     <el-input v-model="input" placeholder="Please input" style="width: 240px" />
   </div>

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

@@ -1,5 +1,4 @@
 <template>
-  <!-- 多媒体采集 -->
   <div>src/views/555555pro-steps</div>
 </template>
 

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

@@ -1,5 +1,5 @@
 <template>
-  <!-- 紧固 -->
+
   <div>4</div>
 </template>
 

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

@@ -0,0 +1,65 @@
+<template>
+  <div class="container">
+    <div class="textBox">
+      <div class="titleText blackColor">
+        <el-tooltip class="box-item" effect="dark" content="SADFFFSAD-大天线" placement="right-start">
+          SADFFFSAD-大天线
+        </el-tooltip>
+      </div>
+      <div class="simpleText greyColor">SASD-FSDDS-ASDDFFSA...</div>
+    </div>
+    <div class="textBox" style="margin: 10px 0">
+      <div class="simpleText greyColor">序列号</div>
+      <div class="simpleText blackColor">ASD123212DSAD332</div>
+    </div>
+    <div class="textBox">
+      <div class="simpleText greyColor">ASD123212DSAD332</div>
+      <div class="simpleText blackColor">ASD123212DSAD332</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const input = ref("");
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+  border-radius: 16px;
+  background-color: white;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+
+  .textBox {
+    .titleText {
+      font-size: $f24;
+      line-height: 24px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      cursor: pointer;
+    }
+
+    .simpleText {
+      font-size: $f20;
+      line-height: 20px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      cursor: pointer;
+    }
+  }
+}
+
+.blackColor {
+  font-weight: $Medium;
+}
+
+.greyColor {
+  color: $font-default-60;
+}
+</style>

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

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

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

@@ -0,0 +1,9 @@
+<template>
+  <div class="container"></div>
+</template>
+
+<script lang="ts" setup>
+const input = ref("");
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -1,5 +1,5 @@
 <template>
-  <!-- 设备记录 -->
+
   <div>2</div>
 </template>
 

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

@@ -1,5 +1,4 @@
 <template>
-  <!-- 调试配对页面 -->
   <div>1</div>
 </template>
 

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

@@ -1,11 +1,13 @@
 <template>
-  <!-- 物料采集 -->
   <div>
     <el-input v-model="input" style="width: 240px" placeholder="Please input" />
   </div>
 </template>
 
 <script lang="ts" setup>
+defineOptions({
+  name: "Wuliaocaiji",
+});
 const input = ref("");
 </script>
 

src/views/pro-steps/index.vue

@@ -1,20 +1,16 @@
 <template>
   <div class="mainContentBox" style="padding: 0 24px">
     <el-row :gutter="20">
-      <el-col :span="4" class="elColClasss">
+      <el-col :span="4" class="elColClasss" style="height: calc(100vh - 80px)">
         <!-- 侧边栏盒子 -->
         <Jiluxiang />
       </el-col>
       <el-col :span="20" class="elColClasss">
         <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 v-for="(item, index) in stepComponents" :key="index" :class="getNameClass(index)" class="typeBox"
+              @click="setSelectIndex(index)">
+              <router-link :to="{ name: item.name }">
                 <div class="svgIcon">
                   <svg-icon :icon-class="item.compentType" size="30" />
                 </div>
@@ -49,62 +45,67 @@ const stepComponents = ref([
   {
     compentName: "记录项",
     compentType: "jiluxiang",
-    path: "Jiluxiang",
+    path: "jiluxiang",
+    name: "Jiluxiang",
   },
   {
     compentName: "物料采集",
     compentType: "wuliaocaiji",
     path: "wuliaocaiji",
+    name: "Wuliaocaiji",
   },
   {
     compentName: "ESOP",
     compentType: "ESOP",
     path: "esop",
+    path: "Esop",
   },
   {
     compentName: "点检",
     compentType: "dianjian",
+    path: "dianjian",
     path: "Dianjian",
   },
   {
     compentName: "设备记录",
     compentType: "shebeijilu",
     path: "shebeijilu",
+    path: "Shebeijilu",
   },
   {
     compentName: "紧固",
     compentType: "jingu",
     path: "jingu",
+    path: "Jingu",
   },
   {
     compentName: "调试配对",
     compentType: "tiaoshipipei",
     path: "tiaoshipipei",
+    path: "Tiaoshipipei",
   },
   {
     compentName: "铭牌绑定",
     compentType: "mingpai",
     path: "mingpaibangding",
+    path: "Mingpaibangding",
   },
   {
     compentName: "多媒体采集",
     compentType: "duomeiticaiji",
     path: "duomeiticaiji",
+    path: "Duomeiticaiji",
   },
 ]);
 //当前路由在setpComponents中的index
-const selectIndex = ref(-1);
+const selectIndex = ref(0);
 
 const getNameClass = (index) => {
   return index === selectIndex.value ? "typeBoxSelected" : "typeBoxNormal";
 };
 //设置标签是否被选中
-const setSelectIndex = () => {
-  stepComponents.value.forEach((item, index) => {
-    if (item.path == route.name) {
-      selectIndex.value = index;
-    }
-  });
+const setSelectIndex = (index) => {
+  selectIndex.value = index;
 };
 onMounted(() => {
   setSelectIndex();
@@ -116,7 +117,6 @@ onMounted(() => {
   display: flex;
   flex: 1;
   flex-direction: column;
-  background-color: aqua;
   width: 100%;
   height: calc(100vh - 80px);
 
@@ -135,7 +135,6 @@ onMounted(() => {
 .routerView {
   display: flex;
   flex: 1;
-  background-color: red;
   overflow-y: auto;
 }
 

src/views/process/components/order.vue

@@ -44,7 +44,9 @@
 
 <script lang="ts" setup>
 import { reactive, ref } from "vue";
-
+import { processViewStore } from "@/store";
+const router = useRouter();
+const store = processViewStore();
 defineProps<{
   hoverStatus?: boolean;
   item: object;

src/views/process/components/steps.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="body">
-    <div class="steps" v-for="(item, index) in opsArray" :key="index" @click="boxClick(index)">
+    <div class="steps" v-for="(item, index) in opsArray" :key="index" @click="boxClick(item, index)">
       <div :class="selectStepIndex == index ? 'stepBox stepBoxHover' : 'stepBox'">
         <div style="display: flex; align-items: center">
           <div :class="selectStepIndex == index
@@ -35,12 +35,20 @@
 </template>
 
 <script lang="ts" setup>
+import router from "@/router";
+import { processViewStore } from "@/store";
+const store = processViewStore();
 defineProps<{
   opsArray?: object;
   selectStepIndex: number;
 }>();
 const emit = defineEmits(["setstepindex"]);
-const boxClick = (index) => {
+const boxClick = (item, index) => {
+  const data = JSON.parse(JSON.stringify(store.odersData));
+  data.operationId = item.operationId;
+  store.setOdersData({ ...data });
+  //已按要求配置状态机data
+  router.push({ path: "/pro-steps" });
   emit("setstepindex", index);
 };
 </script>

src/views/process/orders.vue

@@ -9,6 +9,8 @@
 
 <script lang="ts" setup>
 import Order from "@/views/process/components/order.vue";
+import { processViewStore } from "@/store";
+const store = processViewStore();
 defineProps<{
   ordersSum?: number;
 }>();
@@ -17,6 +19,11 @@ const ordersDataArray = inject("ordersDataArray");
 const selectIndex = ref(NaN);
 const setSlectIndex = (value: number) => {
   selectIndex.value = value;
+  //状态设置参数
+  store.setOdersData({
+    productLineId: ordersDataArray.value[value].productLineId,
+    workOrderCode: ordersDataArray.value[value].workOrderCode,
+  });
   emit("getindex", value);
 };
 </script>