feature/0410首页工序点击优化

src/components/CommonDialogs/MaterialCollectionDG.vue

@@ -1,19 +1,15 @@
 <template>
-  <el-dialog
-    id="custom-dialog"
-    v-model="visible"
-    :close-on-click-modal="false"
-    :title="null"
-    close-icon="null"
-  >
+  <el-dialog id="custom-dialog" v-model="visible" :close-on-click-modal="false" :title="null" close-icon="null">
     <div class="top-title">物料采集[3]</div>
     <div class="center-content">
       <div>请选择采集的物料类型</div>
     </div>
+    <div class="body">
+      <div class="box"></div>
+    </div>
     <div class="bottom-btns">
       <el-button class="cancelBtn" @click="visible = false">Cancel</el-button>
-      <el-button class="sureBtn" type="primary" @click="sure"
-        >Confirm
+      <el-button class="sureBtn" type="primary" @click="sure">Confirm
       </el-button>
     </div>
   </el-dialog>
@@ -47,6 +43,7 @@ defineExpose({
   box-shadow: 0px 0px 80px 10px rgba(0, 0, 0, 0.25);
   border-radius: 16px 16px 16px 16px;
   width: 924px;
+  max-height: 80vh;
 
   .top-title {
     width: 100%;
@@ -68,6 +65,18 @@ defineExpose({
     color: rgba(0, 0, 0, 0.9);
   }
 
+  .body {
+    width: calc(100% - 240px);
+    max-height: calc(50vh - 80px);
+    margin: 0 auto;
+    overflow-y: auto;
+
+    .box {
+      width: 100%;
+      height: 100px;
+    }
+  }
+
   .bottom-btns {
     display: flex;
     justify-content: center;

src/views/process/components/steps.vue

@@ -1,17 +1,33 @@
 <template>
   <div class="body">
-    <div class="steps" v-for="(item, index) in opsArray" :key="index">
-      <div class="stepBox">
+    <div class="steps" v-for="(item, index) in opsArray" :key="index" @click="boxClick(index)">
+      <div :class="selectStepIndex == index ? 'stepBox stepBoxHover' : 'stepBox'">
         <div style="display: flex; align-items: center">
-          <div class="stepIndex">
-            <span class="indexText">{{ index + 1 }}</span>
+          <div :class="selectStepIndex == index
+              ? 'stepIndex stepIndexHover'
+              : 'stepIndex'
+            ">
+            <span :class="selectStepIndex == index
+                ? 'indexText hoverTextColor'
+                : 'indexText'
+              ">{{ index + 1 }}</span>
           </div>
           <div class="midTextBox">
-            <div class="stepName">{{ item.operationName }}</div>
-            <div class="stepStation">{{ item.operationCode }}</div>
+            <div :class="selectStepIndex == index ? 'stepName stepNameHover' : 'stepName'
+              ">
+              {{ item.operationName }}
+            </div>
+            <div :class="selectStepIndex == index
+                ? 'stepStation stepStationHover'
+                : 'stepStation'
+              ">
+              {{ item.operationCode }}
+            </div>
           </div>
         </div>
-        <div class="timeBox">{{ item.completeNum }}</div>
+        <div :class="selectStepIndex == index ? 'timeBox timeBoxHover' : 'timeBox'">
+          {{ item.completeNum }}
+        </div>
       </div>
       <div class="line" v-if="index != opsArray.length - 1"></div>
     </div>
@@ -19,41 +35,14 @@
 </template>
 
 <script lang="ts" setup>
-const array = [
-  {
-    name: "aaa",
-    position: "装配工位",
-    time: "10",
-  },
-  {
-    name: "222",
-    position: "装配工位",
-    time: "14440",
-  },
-  {
-    name: "222",
-    position: "装配工位",
-    time: "14440",
-  },
-  {
-    name: "222",
-    position: "装配工位",
-    time: "14440",
-  },
-  {
-    name: "222",
-    position: "装配工位",
-    time: "14440",
-  },
-  {
-    name: "222",
-    position: "装配工位",
-    time: "14440",
-  },
-];
 defineProps<{
   opsArray?: object;
+  selectStepIndex: number;
 }>();
+const emit = defineEmits(["setstepindex"]);
+const boxClick = (index) => {
+  emit("setstepindex", index);
+};
 </script>
 
 <style lang="scss" scoped>
@@ -71,29 +60,33 @@ defineProps<{
   box-shadow: 0px 1px 1px 1px #00000025;
 }
 
-.stepBox:hover {
+.stepBoxHover {
   box-shadow: 0px 0px 0px 0px;
   background-color: $select-hover;
+}
 
-  .stepIndex {
-    border-color: white;
-
-    span {
-      color: white;
-    }
-  }
+.stepIndexHover {
+  border-color: white !important;
 
-  .stepName {
+  span {
     color: white;
   }
+}
 
-  .stepStation {
-    color: white;
-  }
+.stepNameHover {
+  color: white !important;
+}
 
-  .timeBox {
-    color: white;
-  }
+.stepStationHover {
+  color: white !important;
+}
+
+.timeBoxHover {
+  color: white !important;
+}
+
+.hoverTextColor {
+  color: white !important;
 }
 
 .stepIndex {

src/views/process/processes.vue

@@ -2,7 +2,7 @@
   <!-- 工序板块 -->
   <div class="commonTitle">工序[{{ OptArrayLength }}]</div>
   <el-scrollbar class="barHeight">
-    <Steps :opsArray="opsArray" />
+    <Steps :opsArray="opsArray" @setstepindex="setSelectStepIndex" :selectStepIndex="selectStepIndex" />
   </el-scrollbar>
   <div class="bottomBtn">
     <el-button color="#0A59F7" class="btn" round>
@@ -14,7 +14,11 @@
 import Steps from "@/views/process/components/steps.vue";
 const ordersDataArray = inject("ordersDataArray");
 const selectOrderIndex = inject("selectOrderIndex");
+const selectStepIndex = ref(-1);
 const opsArray = ref([]);
+const setSelectStepIndex = (value) => {
+  selectStepIndex.value = value;
+};
 const setOptArray = () => {
   if (selectOrderIndex.value > -1) {
     opsArray.value = ordersDataArray.value[selectOrderIndex.value].ops;