增加 销售订单明细 进度

src/pages/cses_spt/cses_spt_detail.vue

@@ -357,9 +357,9 @@
     name: "saletaskDetail",
     data() {
       return {
-        taskflag_dt: "待接收",
+        taskflag_dt: "已完成",
         ifnew: 0,
-        ifban: 1, //控制是否弹出填写拒绝原因div的开关
+        ifban: 0, //控制是否弹出填写拒绝原因div的开关
         ifaccept: 0 //1-全部明细同意，整单接收  0-有明细不能接收，整单退回
       };
     },

src/pages/saletaskdetail.vue

@@ -218,10 +218,11 @@
       </div>
 
       <div class="liubai_dt"></div>
+      <div class="mxjdinfo">*点击明细可查看明细产品进度</div>
       <div class="subtitle_dt">订单明细</div>
       <div class="taskmx_dt">
 
-        <div id="rowmx_dt">
+        <div id="rowmx_dt"  @click="gotomxjd">
           <div class="mxmtrl_dt">
             <svg class="icon" aria-hidden="true">
               <use xlink:href="#icon-dian"></use>
@@ -231,7 +232,7 @@
           <div class="mxqty_dt">数量：100，¥50000</div>
         </div>
 
-        <div id="rowmx_dt">
+        <div id="rowmx_dt"  @click="gotomxjd">
           <div class="mxmtrl_dt">
             <svg class="icon" aria-hidden="true">
               <use xlink:href="#icon-dian"></use>
@@ -242,7 +243,7 @@
         </div>
 
 
-        <div id="rowmx_dt">
+        <div id="rowmx_dt"  @click="gotomxjd">
           <div class="mxmtrl_dt">
             <svg class="icon" aria-hidden="true">
               <use xlink:href="#icon-dian"></use>
@@ -271,6 +272,11 @@
         {
           history.back();
         }
+      },
+            gotomxjd(){
+        this.$router.push({
+          path: "/salemxjd"
+        });
       }
     },
     computed: {
@@ -411,7 +417,7 @@
   .liubai_dt {
     width: 100%;
     height: 10px;
-    background-color: rgb(246, 246, 246);
+    background-color: #f6f6f6;
   }
 
   .middlearea {
@@ -513,4 +519,11 @@
     margin-left: 25px;
   }
 
+  .mxjdinfo{
+    background-color: #f6f6f6;
+    font-size: 12px;
+    color:#888;
+    padding: 5px 0 5px 5px;
+  }
+
 </style>

src/pages/saletaskmxjd.vue

@@ -0,0 +1,205 @@
+<template>
+  <div id="saletaskmxjd">
+    <div class="topbar">
+      <div class="topbar_left" @click="goback">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-fanhui"></use>
+        </svg>
+      </div>
+      <div class="topbar_middle">
+        订单明细进度跟踪
+      </div>
+      <div class="topbar_right">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-caidan"></use>
+        </svg>
+      </div>
+    </div>
+
+    <div id="content">
+
+      <div class="salemxjd_info">
+        <div class="salemxjd_mtrl">V形角脚(三角底) 焊梯形方片</div>
+        <div class="salemxjd_mtrl_sub">L184*L184*H123*3.0 喷黑砂</div>
+        <div class="salemxjd_mtrl_sub">数量：2000 交期：2019-05-25</div>
+      </div>
+
+      <div class="liubai_dt"></div>
+
+      <div class="salemxjd_data">
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-dian"></use>
+          </svg>
+          材料入库：1876；4月3日</div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-dian"></use>
+          </svg>
+          原料领料：1875；4月7日</div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-dian"></use>
+          </svg>
+          冲压：已完成</div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-dian"></use>
+          </svg>
+          切管：已完成</div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-dian"></use>
+          </svg>
+          自动焊：已完成</div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-dian"></use>
+          </svg>
+          AR：已完成</div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-dian"></use>
+          </svg>
+          CO2：未派工</div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-dian"></use>
+          </svg>
+          手抛：已完成</div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-dian"></use>
+          </svg>
+          自抛：已完成</div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-dian"></use>
+          </svg>
+          手磨：80%；预计4月20日完成，已超期</div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-dian"></use>
+          </svg>
+          包装：70%；预计4月30日完成</div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-dian"></use>
+          </svg>
+          外协供应商：辉隆电镀厂</div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-dian"></use>
+          </svg>
+          外协发出：1012；4月8日</div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-dian"></use>
+          </svg>
+          外协回厂：1012；4月10日</div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-dian"></use>
+          </svg>
+          外协返工：48；4月12日</div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-dian"></use>
+          </svg>
+          包装领料：2331；4月13日</div>
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-dian"></use>
+          </svg>
+          成品入仓：1300；欠：700</div>
+      </div>
+    </div>
+  </div>
+
+</template>
+<script>
+  export default {
+    methods: {
+      goback() {
+        {
+          history.back();
+        }
+      }
+    }
+  }
+
+</script>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    /* background-color: #fff; */
+    font-family: "微软雅黑";
+  }
+
+  .topbar {
+    min-height: 44px;
+    border-bottom: 1px solid #e5e5e5;
+    background: #fff;
+    position: fixed;
+    width: 100%;
+    z-index: 9999;
+    display: flex;
+    font-size: 18px;
+    align-items: center;
+  }
+
+  .topbar_left {
+    /* flex: 0 0 %; */
+    margin-left: 10px;
+  }
+
+  .topbar_middle {
+    text-align: center;
+    flex: 0 0 85%;
+  }
+
+  .topbar_right {
+    /* flex: 0 0 10%; */
+    position: absolute;
+    right: 10px;
+  }
+
+  #content {
+    position: absolute;
+    top: 44px;
+    background-color: #fff;
+    width: 100%
+  }
+
+  .liubai_dt {
+    width: 100%;
+    height: 10px;
+    background-color: #f6f6f6;
+  }
+
+  .salemxjd_info {
+    padding: 20px;
+  }
+
+  .salemxjd_mtrl {
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  .salemxjd_mtrl_sub {
+    font-size: 15px;
+    color: #666;
+  }
+
+  .salemxjd_data {
+    /* font-size: 15px;
+    padding: 10px;
+    line-height: 30px; */
+    margin: 0 20px;
+    font-size: 15px;
+    line-height: 30px;
+    padding: 10px 0;
+  }
+
+</style>

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import SaleTask from '@/pages/saletask'
 import SaleTaskDetail from '@/pages/saletaskdetail'
+import SaleTaskmxjd from '@/pages/saletaskmxjd'
 import Home from '@/pages/home'
 import Setting from '@/pages/setting'
 import Daily from '@/pages/daily'
@@ -28,6 +29,14 @@ export default new Router({
         title: '订单详情'
       }
     },
+    {
+      path: '/salemxjd',
+      name: 'SaleTaskmxjd',
+      component: SaleTaskmxjd,
+      meta: {
+        title: '订单详情'
+      }
+    },  
     {
       path: '/saletask',
       name: 'SaleTask',