发货

src/views/oms/order/components/batchbyOneModal.vue

@@ -0,0 +1,113 @@
+<template>
+  <el-drawer
+    title="订单发货（批量逐一发货）"
+    :visible.sync="drawer"
+    :direction="direction"
+    size="40%">
+    <div class="content">
+      <div class="order-top">
+        <el-pagination
+          background
+          :page-size="1"
+          layout="prev, pager, next"
+          :total="10">
+        </el-pagination>
+      </div>
+      <deliveryGoodsInfo />
+      <deliveryPrice />
+    </div>
+    <div class="space"></div>
+    <div class="deli-footer">
+      <div class="d-left">
+        <div class="estimate-total">
+          订单小计<span class="total">￥16.00</span> <span class="detail">明细></span>
+        </div>
+        <div class="estimate-total">
+          预计总价<span class="total">￥48.00</span>
+        </div>
+        <div class="agreement">
+          <el-checkbox v-model="checked">已读并同意《XXX电子运单协议》</el-checkbox>
+        </div>
+      </div>
+      <div class="send-btn" @click="btn">确认,下一单</div>
+    </div>
+  </el-drawer>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import DeliveryGoodsInfo from "./deliveryGoodsInfo.vue";
+import DeliveryPrice from "./deliveryPrice.vue";
+@Component({components:{DeliveryGoodsInfo,DeliveryPrice}})
+export default class DeliveryModal extends Vue {
+  drawer=false;
+  direction='rtl'
+  checked=false;
+  setShow(v:boolean){
+    this.drawer=v;
+  }
+  btn(){
+    
+  }
+}
+</script>
+<style lang="scss" scoped>
+.content{
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 16px;
+  background-color: #FFF;
+  .order-top{
+    padding-bottom: 16px;
+    display: flex;
+    justify-content: center;
+  }
+}
+.deli-footer{
+  height: 80px;
+  width: 100%;
+  padding: 0 16px 8px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items:flex-end;
+  position: absolute;
+  background-color: #FFF;
+  left: 0;
+  bottom: 0;
+  z-index: 10;
+  .d-left{
+    width: 70%;
+    .estimate-total{
+      font-size: 14px;
+      padding-bottom: 4px;
+      .total{
+        font-size: 16px;
+        color: #F00;
+      }
+      .detail{
+        color: #1684FC;
+        padding-left: 16px;
+        cursor: pointer;
+      }
+    }
+  }
+  .send-btn{
+    width: 120px;
+    height: 40px;
+    line-height: 40px;
+    border-radius: 8px;
+    background: linear-gradient(129.2deg, rgba(22,132,252,1) 9.81%,rgba(93,167,249,1) 97.4%);
+    color: rgba(255, 255, 255, 100);
+    font-size: 14px;
+    text-align: center;
+    box-shadow: 0px 2px 6px 0px rgba(93, 167, 249, 100);
+    cursor: pointer;
+  }
+}
+.space{
+  height: 80px;
+  width: 100%;
+  margin-top: 16px;
+}
+</style>

src/views/oms/order/components/carpoolModal.vue

@@ -0,0 +1,162 @@
+<template>
+  <el-drawer
+    title="订单发货（共3单）"
+    :visible.sync="drawer"
+    :direction="direction"
+    size="40%">
+    <div class="content">
+      <div class="order-cont">
+        <div class="cont-left">
+          <div class="order-code">订单编号：02233221000</div>
+          <div class="order-other">
+            <div class="receive-name">姓名：王小二</div>
+            <div class="address">目的地：<span>上海</span></div>
+            <div class="time">预计送达：8月6日 12:00前</div>
+          </div>
+        </div>
+        <i class="el-icon-arrow-right"></i>
+      </div>
+      <div class="order-cont onAct">
+        <div class="cont-left">
+          <div class="order-code">订单编号：02233221000</div>
+          <div class="order-other">
+            <div class="receive-name">姓名：王小二</div>
+            <div class="address">目的地：<span>上海</span></div>
+            <div class="time">预计送达：8月6日 12:00前</div>
+          </div>
+        </div>
+        <i class="el-icon-arrow-down"></i>
+      </div>
+      <deliveryGoodsInfo />
+      <deliveryPrice />
+    </div>
+    <div class="space"></div>
+    <div class="deli-footer">
+      <div class="d-left">
+        <div class="estimate-total">
+          预计总价<span class="total">￥16.00</span> <span class="detail">明细></span>
+        </div>
+        <div class="agreement">
+          <el-checkbox v-model="checked">已读并同意《XXX电子运单协议》</el-checkbox>
+        </div>
+      </div>
+      <div class="send-btn" @click="btn">确认发货</div>
+    </div>
+  </el-drawer>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import DeliveryGoodsInfo from "./deliveryGoodsInfo.vue";
+import DeliveryPrice from "./deliveryPrice.vue";
+@Component({components:{DeliveryGoodsInfo,DeliveryPrice}})
+export default class DeliveryModal extends Vue {
+  drawer=false;
+  direction='rtl'
+  checked=false;
+  onAct='1'
+  setShow(v:boolean){
+    this.drawer=v;
+  }
+  btn(){
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content{
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 16px;
+  background-color: #FFF;
+  .order-cont{
+    height: 60px;
+    width: 100%;
+    box-sizing: border-box;
+    border:solid 1px #BBB;
+    border-radius: 5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 16px;
+    margin-bottom: 16px;
+    cursor: pointer;
+    .cont-left{
+      width: calc(100% - 40px);
+      .order-code{
+        width: 100%;
+        font-size: 14px;
+        padding: 6px 0 4px;
+      }
+      .order-other{
+        width: 100%;
+        display: flex;
+        font-size: 14px;
+        .receive-name{
+          width: 120px;
+        }
+        .address{
+          width: 150px;
+          span{
+            color: #F00;
+          }
+        }
+        .time{
+          width: calc(100% - 120px - 150px);
+        }
+      }
+    }
+  }
+  .order-cont:hover,.onAct{
+    background-color: rgba(160,205,255,0.22);
+  }
+}
+.deli-footer{
+  height: 60px;
+  width: 100%;
+  padding: 0 16px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: absolute;
+  background-color: #FFF;
+  left: 0;
+  bottom: 0;
+  z-index: 10;
+  .d-left{
+    width: 70%;
+    .estimate-total{
+      font-size: 14px;
+      padding-bottom: 4px;
+      .total{
+        font-size: 16px;
+        color: #F00;
+      }
+      .detail{
+        color: #1684FC;
+        padding-left: 16px;
+        cursor: pointer;
+      }
+    }
+  }
+  .send-btn{
+    width: 120px;
+    height: 40px;
+    line-height: 40px;
+    border-radius: 8px;
+    background: linear-gradient(129.2deg, rgba(22,132,252,1) 9.81%,rgba(93,167,249,1) 97.4%);
+    color: rgba(255, 255, 255, 100);
+    font-size: 14px;
+    text-align: center;
+    box-shadow: 0px 2px 6px 0px rgba(93, 167, 249, 100);
+    cursor: pointer;
+  }
+}
+.space{
+  height: 60px;
+  width: 100%;
+  margin-top: 16px;
+}
+</style>

src/views/oms/order/components/deliveryDetail.vue

@@ -0,0 +1,162 @@
+<template>
+  <el-drawer
+    append-to-body
+    title="订单发货"
+    :visible.sync="drawer"
+    :direction="direction"
+    size="40%">
+    <div class="content">
+      <deliveryGoodsInfo />
+      <div class="send-box">
+        <div class="pri-title">
+          <div class="title-item">
+            预计送达和预计费用<span>明细></span>
+          </div>
+          <div class="title-item">
+            实际送达和实际费用<span>明细></span>
+          </div>
+        </div>
+        <div class="send-type">
+          <div class="send-item onSend">
+            <div class="label-name">整车配送</div>
+            <div class="send-info">
+              <div class="s-time">7月23 12：23前</div>
+              <div class="send-price">￥16.00起</div>
+            </div>
+          </div>
+          <div class="send-item ont">
+            <div class="label-name">整车配送</div>
+            <div class="send-info">
+              <div class="s-time">7月25 12：23前</div>
+              <div class="send-price">￥26.00起</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="send-box">
+        <div class="s-row">
+          <div class="s-col">WMS销售订单号：</div>
+        </div>
+        <div class="s-row">
+          <div class="s-col width50">WMS订单类型：</div>
+          <div class="s-col width50">WMS状态：</div>
+        </div>
+        <div class="s-row">
+          <div class="s-col">WMS取消订单的备注：</div>
+        </div>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import DeliveryGoodsInfo from "./deliveryGoodsInfo.vue";
+import DeliveryPrice from "./deliveryPrice.vue";
+@Component({components:{DeliveryGoodsInfo,DeliveryPrice}})
+export default class DeliveryDetail extends Vue {
+  drawer=false;
+  direction='rtl'
+  checked=false;
+  setShow(v:boolean){
+    this.drawer=v;
+  }
+  btn(){
+    this.drawer = false;
+    this.$emit('sendHandle')
+  }
+}
+</script>
+<style lang="scss" scoped>
+.content{
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 16px;
+  background-color: #FFF;
+  .send-box{
+    width: 100%;
+    box-sizing: border-box;
+    padding: 16px;
+    margin-bottom: 16px;
+    background-color: rgba(255, 226, 160, 0.3);
+    .pri-title{
+      width: 100%;
+      padding-bottom: 8px;
+      display: flex;
+      align-items: center;
+      .title-item{
+        width: 188px;
+        font-size: 12px;
+        span{
+          color: #1684FC;
+          padding-left: 8px;
+        }
+      }
+    }
+    .send-type{
+      width: 100%;
+      display: flex;
+      align-items: center;
+      .send-item{
+        width: 156px;
+        box-sizing: border-box;
+        border:solid 3px #999;
+        border-radius: 6px;
+        overflow: hidden;
+        margin-right: 32px;
+        cursor: pointer;
+        .label-name{
+          background-color: #999;
+          color: #FFF;
+          font-size: 16px;
+          font-weight: 700;
+          padding: 2px 0 4px;
+          text-align: center;
+        }
+        .send-info{
+          padding: 8px 0;
+          text-align: center;
+          background-color: #FFF;
+          .s-time{
+            font-size: 14px;
+            color: #1684FC;
+          }
+          .send-price{
+            font-size: 20px;
+            padding-top: 4px;
+          }
+        }
+      }
+      .onSend{
+        border:solid 3px #1684FC;
+        .label-name{
+          background-color: #1684FC;
+        }
+      }
+      .ont{
+        border:solid 3px #FF0404;
+        .label-name{
+          background-color: #FF0404;
+        }
+      }
+    }
+    .s-row{
+      width: 100%;
+      display: flex;
+      align-items: center;
+      padding-bottom: 8px;
+      .s-col{
+        width: 100%;
+        font-size: 14px;
+      }
+      .width50{
+        width: 50%;
+      }
+    }
+    .s-row:last-child{
+      padding: 0;
+    }
+  }
+}
+
+</style>

src/views/oms/order/components/deliveryGoodsInfo.vue

@@ -144,9 +144,9 @@
           <vxe-column field="sex" title="物料名称" show-overflow></vxe-column>
           <vxe-column field="age" title="体积"></vxe-column>
           <vxe-column field="address" title="重量"></vxe-column>
-          <vxe-column field="age" title="单价"></vxe-column>
-          <vxe-column field="age" title="数量"></vxe-column>
-          <vxe-column field="age" title="小计"></vxe-column>
+          <vxe-column field="price" title="单价"></vxe-column>
+          <vxe-column field="num" title="数量"></vxe-column>
+          <vxe-column field="total" title="小计"></vxe-column>
         </vxe-table>
       </div>
     </div>

src/views/oms/order/components/deliveryModal.vue

@@ -3,57 +3,49 @@
     title="订单发货"
     :visible.sync="drawer"
     :direction="direction"
-    size="40%"
-    :before-close="handleClose">
+    size="40%">
     <div class="content">
       <deliveryGoodsInfo />
-      <div class="send-box">
-        <div class="title-label">预计配送和预计费用</div>
-        <div class="send-type">
-          <div class="send-item onSend">
-            <div class="label-name">整车配送</div>
-            <div class="send-info">
-              <div class="s-time">7月23 12：23前</div>
-              <div class="send-price">￥16.00起</div>
-            </div>
-          </div>
-          <div class="send-item">
-            <div class="label-name">标准汽运</div>
-            <div class="send-info">
-              <div class="s-time">7月23 12：23前</div>
-              <div class="send-price">￥22.00起</div>
-            </div>
-          </div>
-        </div>
-      </div>
+      <deliveryPrice />
     </div>
     <div class="space"></div>
     <div class="deli-footer">
       <div class="d-left">
         <div class="estimate-total">
-          预计总价<span class="total">￥16.00</span> <span class="detail">明细></span>
+          预计总价<span class="total">￥16.00</span> <span class="detail" @click="jump">明细></span>
         </div>
         <div class="agreement">
           <el-checkbox v-model="checked">已读并同意《XXX电子运单协议》</el-checkbox>
         </div>
       </div>
-      <div class="send-btn">确认发货</div>
+      <div class="send-btn" @click="btn">确认发货</div>
     </div>
+    <deliveryDetail ref="deliveryDetail" />
   </el-drawer>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 import DeliveryGoodsInfo from "./deliveryGoodsInfo.vue";
-@Component({components:{DeliveryGoodsInfo}})
+import DeliveryPrice from "./deliveryPrice.vue";
+import deliveryDetail from './deliveryDetail.vue'
+@Component({components:{DeliveryGoodsInfo,DeliveryPrice,deliveryDetail}})
 export default class DeliveryModal extends Vue {
   drawer=false;
   direction='rtl'
   checked=false;
-  handleClose(){}
   setShow(v:boolean){
     this.drawer=v;
   }
+  btn(){
+    this.drawer = false;
+    this.$emit('sendHandle')
+  }
+  jump(){
+    if(this.$refs.deliveryDetail){
+      (this.$refs.deliveryDetail as any).setShow(true);
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
@@ -62,57 +54,7 @@ export default class DeliveryModal extends Vue {
   box-sizing: border-box;
   padding: 0 16px;
   background-color: #FFF;
-  .send-box{
-    width: 100%;
-    box-sizing: border-box;
-    padding: 16px;
-    background-color: rgba(255, 226, 160, 0.3);
-    .title-label{
-      font-size: 14px;
-      padding-bottom: 8px;
-    }
-    .send-type{
-      width: 100%;
-      display: flex;
-      align-items: center;
-      .send-item{
-        width: 156px;
-        box-sizing: border-box;
-        border:solid 3px #999;
-        border-radius: 6px;
-        overflow: hidden;
-        margin-right: 32px;
-        cursor: pointer;
-        .label-name{
-          background-color: #999;
-          color: #FFF;
-          font-size: 16px;
-          font-weight: 700;
-          padding: 2px 0 4px;
-          text-align: center;
-        }
-        .send-info{
-          padding: 8px 0;
-          text-align: center;
-          background-color: #FFF;
-          .s-time{
-            font-size: 14px;
-            color: #1684FC;
-          }
-          .send-price{
-            font-size: 20px;
-            padding-top: 4px;
-          }
-        }
-      }
-      .send-item:hover,.onSend{
-        border:solid 3px #1684FC;
-        .label-name{
-          background-color: #1684FC;
-        }
-      }
-    }
-  }
+  
 }
 .deli-footer{
   height: 60px;
@@ -126,6 +68,7 @@ export default class DeliveryModal extends Vue {
   background-color: #FFF;
   left: 0;
   bottom: 0;
+  z-index: 10;
   .d-left{
     width: 70%;
     .estimate-total{
@@ -138,6 +81,7 @@ export default class DeliveryModal extends Vue {
       .detail{
         color: #1684FC;
         padding-left: 16px;
+        cursor: pointer;
       }
     }
   }

src/views/oms/order/components/deliveryPrice.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="send-box">
+    <div class="title-label">预计配送和预计费用</div>
+    <div class="send-type">
+      <div class="send-item onSend">
+        <div class="label-name">整车配送</div>
+        <div class="send-info">
+          <div class="s-time">7月23 12：23前</div>
+          <div class="send-price">￥16.00起</div>
+        </div>
+      </div>
+      <div class="send-item">
+        <div class="label-name">标准汽运</div>
+        <div class="send-info">
+          <div class="s-time">7月23 12：23前</div>
+          <div class="send-price">￥22.00起</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+@Component({components:{}})
+export default class DeliveryPrice extends Vue {
+
+}
+</script>
+<style lang="scss" scoped>
+.send-box{
+  width: 100%;
+  box-sizing: border-box;
+  padding: 16px;
+  background-color: rgba(255, 226, 160, 0.3);
+  .title-label{
+    font-size: 14px;
+    padding-bottom: 8px;
+  }
+  .send-type{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    .send-item{
+      width: 156px;
+      box-sizing: border-box;
+      border:solid 3px #999;
+      border-radius: 6px;
+      overflow: hidden;
+      margin-right: 32px;
+      cursor: pointer;
+      .label-name{
+        background-color: #999;
+        color: #FFF;
+        font-size: 16px;
+        font-weight: 700;
+        padding: 2px 0 4px;
+        text-align: center;
+      }
+      .send-info{
+        padding: 8px 0;
+        text-align: center;
+        background-color: #FFF;
+        .s-time{
+          font-size: 14px;
+          color: #1684FC;
+        }
+        .send-price{
+          font-size: 20px;
+          padding-top: 4px;
+        }
+      }
+    }
+    .send-item:hover,.onSend{
+      border:solid 3px #1684FC;
+      .label-name{
+        background-color: #1684FC;
+      }
+    }
+  }
+}
+</style>

src/views/oms/order/components/sendModeModal.vue

@@ -0,0 +1,102 @@
+<template>
+  <vxe-modal v-model="value" id="sendModeModal" :zIndex="9999" width="65%" height="60%" v-loading="load">
+    <template #title>
+      <span>订单批量发货模式选择</span>
+    </template>
+    <div class="mode">
+      <div class="moda-item" :class="{'onModal': mode==='0'}" @click="modeHandle('0')">
+        <div class="check">
+          <i class="el-icon-success"></i>
+        </div>
+        <div class="msg">处理后形成多张物流单</div>
+        <div class="moda-title">批量逐一发货</div>
+      </div>
+      <div class="moda-item" :class="{'onModal': mode==='1'}" @click="modeHandle('1')">
+        <div class="check">
+          <i class="el-icon-success"></i>
+          <span>推荐</span>
+        </div>
+        <div class="msg">处理后形成多张物流单<br />优惠多多</div>
+        <div class="moda-title">拼车/整车发货</div>
+      </div>
+    </div>
+  </vxe-modal>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+@Component({components:{}})
+export default class SendModeModal extends Vue {
+  load=false;
+  value=false;
+  mode='';
+  setShow(v:boolean){
+    this.value = v;
+  }
+  modeHandle(v:string){
+    this.mode = v;
+    this.value = false;
+    this.$emit('modeChange',v)
+  }
+  show(){}
+  hide(){}
+}
+</script>
+
+<style lang="scss" scoped>
+.mode{
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  .moda-item{
+    width: 244px;
+    height: 268px;
+    box-sizing: border-box;
+    border:solid 1px #F54319;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0 32px;
+    cursor: pointer;
+    .check{
+      width: 100%;
+      padding: 30px 16px 0;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      font-size: 16px;
+      .el-icon-success{
+        font-size: 30px;
+        visibility: hidden;
+      }
+      span{
+        padding-left: 16px;
+      }
+    }
+    .msg{
+      font-size: 12px;
+      color: #999;
+      text-align: center;
+    }
+    .moda-title{
+      font-size: 20px;
+      text-align: center;
+      padding-bottom: 30px;
+    }
+  }
+  .moda-item:hover,.onModal{
+    .check{
+      .el-icon-success{
+        visibility: visible;
+        color: #F54319;
+      }
+      span{
+        color: #F54319;
+      }
+    }
+  }
+}
+</style>

src/views/oms/order/index.vue

@@ -180,7 +180,14 @@
       <!-- 标签 -->
       <labels-modal ref="labelsModal" @onChange="onChangeLabel" />
       <!-- 发货 -->
-      <delivery-modal ref="deliveryModal" />
+      <delivery-modal ref="deliveryModal" @sendHandle="sendHandle" />
+      <!-- 发货模式 -->
+      <send-mode-modal ref="sendModeModal" @modeChange="modeChange" />
+      <!-- 批量逐一发货 -->
+      <batchbyOneModal ref="batchbyOneModal" />
+      <!-- 整车/拼单发货 -->
+      <carpoolModal ref="carpoolModal" />
+
     </div>
   </div>
 </template>
@@ -210,11 +217,14 @@ import AddProductModal from "./components/addProductModal.vue";
 import FreightModal from "./components/freightModal.vue";
 import LabelsModal from "./components/labelsModal.vue";
 import DeliveryModal from "./components/deliveryModal.vue";
+import SendModeModal from "./components/sendModeModal.vue";
+import batchbyOneModal from './components/batchbyOneModal.vue'
+import carpoolModal from './components/carpoolModal.vue'
 import { query,getProvince,smt,unSmt,purchaseQty,unCancel,resetQuestion,archive } from '@/api/omsOrder'
 import { queryAll } from '@/api/question'
 @Component({components:{filterInput,OrderCheckbox,OrderRadio,filterDate,OrderTool,OrderTable,AddOrder,InputSelect,OrderProduct,
   filterMinMax,loadOrderModal,PurchaseModel,MergeModel,SplitModel,CancelOrderModel,QuestModel,SetQuesModal,UpdateRmkModal,UpdateSalerModal,
-  TabModal,AddProductModal,FreightModal,LabelsModal,DeliveryModal}})
+  TabModal,AddProductModal,FreightModal,LabelsModal,DeliveryModal,SendModeModal,batchbyOneModal,carpoolModal}})
 export default class Order extends Vue {
   activeNames:Array<any>=['1','statusList']
   radio=''
@@ -489,6 +499,25 @@ export default class Order extends Vue {
     this.getProvince();
     this.getQuestionList();
   }
+  //发货模式
+  modeChange(v:string){
+    if(v == '0'){
+      if(this.$refs.batchbyOneModal){
+        (this.$refs.batchbyOneModal as any).setShow(true);
+      }
+    }
+    if(v == '1'){
+      if(this.$refs.carpoolModal){
+        (this.$refs.carpoolModal as any).setShow(true);
+      }
+    }
+  }
+  //确认发货
+  sendHandle(){
+    if(this.$refs.sendModeModal){
+      (this.$refs.sendModeModal as any).setShow(true);
+    }
+  }
   //发货
   sendGoods(){
     (this.$refs.deliveryModal as any).setShow(true);