55

src/views/produce/components/routings.vue

@@ -10,6 +10,7 @@
       width="70%"
     >
       <div class="routing_box">
+   
         工艺路线： <span>{{ routeObj.produceRoutingName }}</span></div
       >
       <div>
@@ -106,6 +107,7 @@
     },
 
     created() {
+   
       this.getTaskFn();
     }
   };

src/views/produceOrder/components/details/index.vue

@@ -27,20 +27,22 @@
       </div>
 
       <div class="drawer_content">
-        <Info ></Info>
+        <Info :workOrderInfo="workOrderInfo"></Info>
       </div>
     </el-drawer>
   </div>
 </template>
 
 <script>
- import Info from './info.vue';
+  import Info from './info.vue';
   export default {
     components: { Info },
     data() {
       return {
         drawer: false,
-        isFullscreen: true
+        isFullscreen: true,
+
+        workOrderInfo: {}
       };
     },
 
@@ -55,6 +57,7 @@
       },
 
       open(row) {
+        this.workOrderInfo = row;
         this.drawer = true;
       }
     }

src/views/produceOrder/components/details/info.vue

@@ -1,24 +1,129 @@
 <template>
-    <div>
+  <div class="material">
+    <div class="content_table">
+      <div class="item rx-sc">
+        <div class="rx ww25">
+          <div class="lable rx-cc">工单编号</div>
+          <div class="content">
+            {{ workOrderInfo.code }}
+          </div>
+        </div>
 
+        <div class="rx ww25">
+          <div class="lable rx-cc">产品编码</div>
+          <div class="content">{{ workOrderInfo.productCode }}</div>
+        </div>
+
+        <div class="rx ww25">
+          <div class="lable rx-cc">产品名称</div>
+          <div class="content">{{ workOrderInfo.productName }}</div>
+        </div>
+
+        <div class="rx ww25">
+          <div class="lable rx-cc">批次号</div>
+          <div class="content">{{ workOrderInfo.batchNo }}</div>
+        </div>
+      </div>
+
+      <div class="item rx-sc">
+        <div class="rx ww25">
+          <div class="lable rx-cc">生产数量</div>
+          <div class="content rx-sc">
+            <div>{{ workOrderInfo.formingNum }}</div>
+            <div class="unit">{{ workOrderInfo.unit }}</div>
+          </div>
+        </div>
+
+        <div class="rx ww25">
+          <div class="lable rx-cc">重量</div>
+          <div class="content content_num">
+            <div>{{ workOrderInfo.formingWeight }}</div>
+            <div class="unit">{{ workOrderInfo.weightUnit }}</div>
+          </div>
+
+          <div class="rx ww25">
+            <div class="lable rx-cc">计划开始时间</div>
+            <div class="content">{{ workOrderInfo.planStartTime }}</div>
+          </div>
+
+          <div class="rx ww25">
+            <div class="lable rx-cc">计划结束时间</div>
+            <div class="content">{{ workOrderInfo.planCompleteTime }}</div>
+          </div>
+        </div>
+      </div>
     </div>
-  </template>
-  
-  <script>
-    export default {
-      data() {
-        return {
-
-        };
-      },
-  
-      methods: {
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      workOrderInfo: {
+        type: Object,
+        default: () => ({})
+      }
+    },
+    data() {
+      return {};
+    },
+
+    methods: {}
+  };
+</script>
+
+<style lang="scss" scoped>
+  .content_table {
+    width: 100%;
+    border: 1px solid #e3e5e5;
+    position: relative;
+
+    .item {
+      display: flex;
+      border-bottom: 1px solid #e3e5e5;
+
+      .lable {
+        width: 88px;
+        text-align: center;
+        background-color: #f7f9fa;
+        font-size: 12px;
+        border-right: 1px solid #e3e5e5;
+        flex-shrink: 0;
+      }
+
+      .content {
+        min-width: 250px;
+        min-height: 32px;
+        font-size: 14px;
+        line-height: 14px;
+        font-style: normal;
+        font-weight: 400;
+        padding: 9px 4px;
+        box-sizing: border-box;
+        word-wrap: break-word;
+        flex-grow: 1 !important;
+
+        .unit {
+          padding: 0 2px;
+          font-size: 12px;
+          color: #404446;
+        }
+      }
+
+      .content_num {
+        display: flex;
+        align-items: center;
+        padding: 2px;
+        --input-background-color: #f0f8f2;
+      }
 
+      &:last-child {
+        border-bottom: none;
       }
-    };
-  </script>
-  
-  <style lang="scss" scoped>
+    }
 
-  </style>
-  
+    .ww25 {
+      width: 25%;
+    }
+  }
+</style>