处理出入库

components/mobile/center/outOfStorage/StorageList.vue

@@ -11,6 +11,16 @@
           <span>查看更多</span>
         </div>
       </li>
+      <li>
+        <div class="linetext">入库单： <span>21324</span></div>
+        <div class="linetext">买家名称： <span>21324</span></div>
+        <div class="linetext">类型： <span>21324</span></div>
+        <div class="linetext">录入人： <span>21324</span></div>
+        <div class="linetext">录入时间： <span>21324</span></div>
+        <div class="look-btn">
+          <span>查看更多</span>
+        </div>
+      </li>
     </ul>
   </div>
 </template>
@@ -110,13 +120,14 @@
 <style lang="scss" scoped>
   $base-color: #3f84f6;
   .storage{
-    padding: 0.24rem 0.24rem;
-    background: #fff;
     ul{
       li{
+        padding: 0.24rem 0.24rem;
+        background: #fff;
+        margin-bottom:.2rem;
         .linetext{
           color:#666;
-          margin-bottom: 0.24rem;
+          line-height: .6rem;
           overflow: hidden;
           -o-text-overflow: ellipsis;
           text-overflow: ellipsis;

components/mobile/center/outOfStorage/detailStorage.vue

@@ -4,26 +4,22 @@
       <div class="linetext">入库单： <span>21324</span></div>
       <div class="linetext">买家名称： <span>21324</span></div>
       <div class="linetext">所属订单： <span>21324</span></div>
-      <div class="linetext"><em>*</em>物流公司：
-        <input type="text">
-      </div>
-      <div class="linetext"><em>*</em>物流单号：
-        <input type="text">
-      </div>
+      <div class="linetext">物流公司： <span>323425</span></div>
+      <div class="linetext">物流单号：<span>34254</span></div>
       <div class="linetext">录入人： <span>21324</span></div>
       <div class="linetext">录入时间： <span>21324</span></div>
     </div>
     <ul class="list-unstyled">
-      <li>
-        <div class="super"><span>1</span></div>
-        <div class="linetext">型号： <span>21324</span></div>
-        <div class="linetext">品牌： <span>21324</span></div>
-        <div class="linetext">物料名称： <span>21324</span></div>
-        <div class="linetext">规格： <span>21324</span></div>
-        <div class="linetext">应出库(PCS)： <span>21324</span></div>
-        <div class="linetext">已出库(PCS)： <span>21324</span></div>
-        <div class="linetext"><em>*</em>本次出库(PCS)： <span>21324</span></div>
-        <div class="linetext">单价($)： <span>21324</span></div>
+      <li class="info-list clearfix">
+        <span class="super"><em>1</em></span>
+        <div class="linetext width50 fl">型号： <span>21324</span></div>
+        <div class="linetext width50 fl">品牌： <span>21324</span></div>
+        <div class="linetext width50 fl">物料名称： <span>21324</span></div>
+        <div class="linetext width50 fl">规格： <span>21324</span></div>
+        <div class="linetext width50 fl">应出库(PCS)： <span>21324</span></div>
+        <div class="linetext width50 fl">已出库(PCS)： <span>21324</span></div>
+        <div class="linetext width50 fl"><em>*</em>本次出库(PCS)： <span>21324</span></div>
+        <div class="linetext width50 fl">单价($)： <span class="base-color">21324</span></div>
       </li>
     </ul>
   </div>
@@ -123,30 +119,49 @@
 </script>
 <style lang="scss" scoped>
   $base-color: #3f84f6;
+  $title-color: #ffa200;
   .storage{
-    padding: 0.24rem 0.24rem;
-    background: #fff;
+    .storage-info{
+      padding: 0.24rem 0.24rem;
+      background: #fff;
+      margin-bottom:.2rem;
+    }
     .linetext{
       color:#666;
-      margin-bottom: 0.24rem;
+      line-height: .6rem;
       overflow: hidden;
       -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
       white-space: nowrap;
       span{
         color:#333;
+        &.base-color{
+          color:$base-color;
+        }
       }
     }
-    ul{
-      li{
-        .look-btn{
-          padding: 0.2rem 0;
-          border-top: 1px solid #d3d3d3;
-          text-align: center;
-          a{
-
-          }
-        }
+    .info-list{
+      position:relative;
+      padding: 0.3rem 0.24rem;
+      background: #fff;
+      margin-bottom:.2rem;
+      .width50{
+        display:inline-block;
+        width: 48%;
+        margin-left: .1rem;
+      }
+      >span{
+        display:inline-block;
+        position:absolute;
+        left:0;
+        top:0;
+        padding: 0 .1rem;
+        background: $title-color;
+        border-radius: 0 .5rem .5rem 0;
+        line-height: .3rem;
+        height:.3rem;
+        color:#fff;
+        font-size: .24rem;
       }
     }
   }

components/mobile/center/outOfStorage/otherStorage.vue

@@ -1,15 +1,25 @@
 <template>
   <div class="storage">
+    <div class="btn-click">
+      <span class="base-color">新增</span>
+      <span class="base-color">保存</span>
+      <span class="clear">取消</span>
+    </div>
+    <div class="storage-info">
+      <div class="linetext">入库单： <span>21324</span></div>
+      <div class="linetext">买家名称： <span><input type="text"></span></div>
+      <div class="linetext">录入人： <span>21324</span></div>
+      <div class="linetext">录入时间： <span>21324</span></div>
+    </div>
     <ul class="list-unstyled">
-      <li>
-        <div class="linetext">入库单： <span>21324</span></div>
-        <div class="linetext">买家名称： <span>21324</span></div>
-        <div class="linetext">类型： <span>21324</span></div>
-        <div class="linetext">录入人： <span>21324</span></div>
-        <div class="linetext">录入时间： <span>21324</span></div>
-        <div class="look-btn">
-          <span>查看更多</span>
-        </div>
+      <li class="info-list clearfix">
+        <span class="super"><em>1</em></span>
+        <div class="linetext width50 fl">型号： <span><input type="text"></span></div>
+        <div class="linetext width50 fl">品牌： <span>21324</span></div>
+        <div class="linetext width50 fl">物料名称： <span>21324</span></div>
+        <div class="linetext width50 fl">规格： <span>21324</span></div>
+        <div class="linetext width50 fl"><em>*</em>出库数(PCS)： <span><input type="text"></span></div>
+        <div class="linetext width50 fl">单价($)： <span><input type="text"></span></div>
       </li>
     </ul>
   </div>
@@ -109,31 +119,91 @@
 </script>
 <style lang="scss" scoped>
   $base-color: #3f84f6;
+  $title-color: #ffa200;
+  $red-color: #ff0000;
   .storage{
-    padding: 0.24rem 0.24rem;
-    background: #fff;
-    ul{
-      li{
-        .linetext{
-          color:#666;
-          margin-bottom: 0.24rem;
-          overflow: hidden;
-          -o-text-overflow: ellipsis;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          span{
-            color:#333;
-          }
+    position: relative;
+    margin-bottom:.3rem;
+    .btn-click{
+      padding: 0.24rem 0.24rem;
+      position: absolute;
+      bottom: -1rem;
+      left: 0;
+      right: 0;
+      text-align: center;
+      span{
+        display:inline-block;
+        width:30%;
+        height: .6rem;
+        line-height: .6rem;
+        margin: 0 .1rem;
+        border-radius:.05rem;
+        &.clear{
+          color:#fafbfc;
+          background: #b5b5b5;
         }
-        .look-btn{
-          padding: 0.2rem 0;
-          border-top: 1px solid #d3d3d3;
-          text-align: center;
-          a{
-
-          }
+        &.base-color{
+          color:#fff;
+          background: $base-color;
+        }
+      }
+    }
+    .storage-info{
+      padding: 0.24rem 0.24rem;
+      background: #fff;
+      margin-bottom:.2rem;
+    }
+    .linetext{
+      color:#666;
+      line-height: .6rem;
+      overflow: hidden;
+      -o-text-overflow: ellipsis;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      input{
+        width: 1rem;
+        height: .56rem;
+        font-size: .24rem;
+        border-radius: .04rem;
+        border: 1px solid #d2d2d2;
+        padding: 0 .2rem;
+      }
+      em{
+        color:$red-color;
+      }
+      span{
+        color:#333;
+        &.base-color{
+          color:$base-color;
         }
       }
     }
+    ul{
+      margin-bottom:1rem;
+    }
+    .info-list{
+      position:relative;
+      padding: 0.3rem 0.24rem;
+      background: #fff;
+      margin-bottom:.2rem;
+      .width50{
+        display:inline-block;
+        width: 48%;
+        margin-left: .1rem;
+      }
+      >span{
+        display:inline-block;
+        position:absolute;
+        left:0;
+        top:0;
+        padding: 0 .1rem;
+        background: $title-color;
+        border-radius: 0 .5rem .5rem 0;
+        line-height: .3rem;
+        height:.3rem;
+        color:#fff;
+        font-size: .24rem;
+      }
+    }
   }
 </style>

components/mobile/center/outOfStorage/purchaseStorage.vue

@@ -1,15 +1,25 @@
 <template>
   <div class="storage">
+    <div class="storage-info">
+      <div class="linetext">入库单： <span>21324</span></div>
+      <div class="linetext">买家名称： <span>21324</span></div>
+      <div class="linetext">所属订单： <span>21324</span></div>
+      <div class="linetext"><em>*</em>物流公司： <span>323425</span></div>
+      <div class="linetext"><em>*</em>物流单号：<span>34254</span></div>
+      <div class="linetext">录入人： <span>21324</span></div>
+      <div class="linetext">录入时间： <span>21324</span></div>
+    </div>
     <ul class="list-unstyled">
-      <li>
-        <div class="linetext">入库单： <span>21324</span></div>
-        <div class="linetext">买家名称： <span>21324</span></div>
-        <div class="linetext">类型： <span>21324</span></div>
-        <div class="linetext">录入人： <span>21324</span></div>
-        <div class="linetext">录入时间： <span>21324</span></div>
-        <div class="look-btn">
-          <span>查看更多</span>
-        </div>
+      <li class="info-list clearfix">
+        <span class="super"><em>1</em></span>
+        <div class="linetext width50 fl">型号： <span>21324</span></div>
+        <div class="linetext width50 fl">品牌： <span>21324</span></div>
+        <div class="linetext width50 fl">物料名称： <span>21324</span></div>
+        <div class="linetext width50 fl">规格： <span>21324</span></div>
+        <div class="linetext width50 fl">应出库(PCS)： <span>21324</span></div>
+        <div class="linetext width50 fl">已出库(PCS)： <span>21324</span></div>
+        <div class="linetext width50 fl"><em>*</em>本次出库(PCS)： <span>21324</span></div>
+        <div class="linetext width50 fl">单价($)： <span class="base-color">21324</span></div>
       </li>
     </ul>
   </div>
@@ -109,31 +119,54 @@
 </script>
 <style lang="scss" scoped>
   $base-color: #3f84f6;
+  $title-color: #ffa200;
+  $red-color: #ff0000;
   .storage{
-    padding: 0.24rem 0.24rem;
-    background: #fff;
-    ul{
-      li{
-        .linetext{
-          color:#666;
-          margin-bottom: 0.24rem;
-          overflow: hidden;
-          -o-text-overflow: ellipsis;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          span{
-            color:#333;
-          }
-        }
-        .look-btn{
-          padding: 0.2rem 0;
-          border-top: 1px solid #d3d3d3;
-          text-align: center;
-          a{
-
-          }
+    .storage-info{
+      padding: 0.24rem 0.24rem;
+      background: #fff;
+      margin-bottom:.2rem;
+    }
+    .linetext{
+      color:#666;
+      line-height: .6rem;
+      overflow: hidden;
+      -o-text-overflow: ellipsis;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      em{
+        color:$red-color;
+      }
+      span{
+        color:#333;
+        &.base-color{
+          color:$base-color;
         }
       }
     }
+    .info-list{
+      position:relative;
+      padding: 0.3rem 0.24rem;
+      background: #fff;
+      margin-bottom:.2rem;
+      .width50{
+        display:inline-block;
+        width: 48%;
+        margin-left: .1rem;
+      }
+      >span{
+        display:inline-block;
+        position:absolute;
+        left:0;
+        top:0;
+        padding: 0 .1rem;
+        background: $title-color;
+        border-radius: 0 .5rem .5rem 0;
+        line-height: .3rem;
+        height:.3rem;
+        color:#fff;
+        font-size: .24rem;
+      }
+    }
   }
 </style>

pages/mobile/center/vendor/outOfStorage/index.vue

@@ -36,10 +36,10 @@
             </base-filter>
           </div>
           <div class="list-content">
-            <storage-list :listData="listData"></storage-list>
-            <detail-storage></detail-storage>
-            <other-storage></other-storage>
-            <purchase-storage></purchase-storage>
+            <storage-list :listData="listData" v-if="handleItem === 0"></storage-list>
+            <!--<detail-storage></detail-storage>-->
+            <other-storage v-if="handleItem === 1"></other-storage>
+            <purchase-storage v-if="handleItem === 2"></purchase-storage>
           </div>
           <!--<empty-status :type="'collect'" :showLink="true" :text="'抱歉，没有相关信息'" v-else></empty-status>-->
           <!--<pull-up :fixId="'mobile-storage-center'" :searchMore="fetching" :allPage="allPage" :page="page" @pullUpAction="onPullUpAction"></pull-up>-->
@@ -56,6 +56,9 @@
   export default {
     middleware: 'authenticated',
     layout: 'mobile',
+    fetch({route, store}) {
+      return Promise.all([store.dispatch('product/getLoadStorageData', {})])
+    },
     data () {
       return {
         remindText: '',

store/product.js

@@ -229,5 +229,15 @@ export const actions = {
       }, err => {
         commit('component/REQUEST_COLLECTCODE_FAILURE', err)
       })
+  },
+  // 获取出入库所有记录数据
+  getLoadStorageData({commit}, params = {}) {
+    commit('storage/REQUEST_LIST')
+    return axios.get('CommodityInOutbound/page', {params: params})
+      .then(res => {
+        commit('storage/GET_LIST_SUCCESS', res.data)
+      }, err => {
+        commit('storage/GET_LIST_FAILURE', err)
+      })
   }
 }

store/product/storage.js

@@ -0,0 +1,19 @@
+export const state = () => ({
+  list: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_LIST (state) {
+    state.list.fetching = true
+  },
+  GET_LIST_SUCCESS (state, result) {
+    state.list.fetching = false
+    state.list.data = result
+  },
+  GET_LIST_FAILURE (state) {
+    state.list.fetching = false
+  }
+}