发货清单

src/views/system/order/deliver.vue

@@ -2,27 +2,27 @@
   <div id="form-1">
     <el-row>
       <el-col :span="24" class="main animate__animated animate__backInRight">
-        <el-col class="top_btn">
-          <el-button type="primary" size="mini" @click="toBack()">返回</el-button>
-        </el-col>
-        <el-col :span="24" class="one" v-if="data"> <span>发货清单</span> </el-col>
-        <el-col :span="24" class="two" v-if="data">
-          <el-col :span="12" v-for="(item, index) in data" :key="index">
+        <el-col class="top_btn"><el-button type="primary" size="mini" @click="toBack()">返回</el-button></el-col>
+        <el-col :span="24" class="one"> <span>发货清单</span> </el-col>
+        <el-col class="top_btn"> <el-button type="primary" @click="toFile()">导出清单</el-button></el-col>
+        <el-col :span="24" class="two">
+          <el-col :span="15" v-for="(item, index) in list" :key="index">
             <el-card class="box-card">
-              <div slot="header" class="clearfix">
-                <el-col class="shop">{{ item.shop.name }}</el-col>
-                <el-col>买家:{{ item.customer.name }}</el-col>
+              <el-col class="clearfix">
                 <el-col>收货人:{{ item.address.name }},{{ item.address.phone }}</el-col>
                 <el-col>收货人地址：{{ item.address.province }},{{ item.address.city }},{{ item.address.area }},{{ item.address.address }}</el-col>
-                <el-button style="float: right" type="primary" @click="toFile()">导出</el-button>
-              </div>
-              <el-table border :data="item.goods" style="width: 100%">
-                <el-table-column prop="goods.name" label="商品姓名" width="180"> </el-table-column>
-                <el-table-column prop="name" label="商品规格"> </el-table-column>
-                <el-table-column prop="buy_num" label="商品数量"> </el-table-column>
-              </el-table>
-              <el-col>
-                <!-- <data-table :fields="fields" :data="item.goods"> </data-table> -->
+              </el-col>
+              <el-col class="two_1">
+                <data-table
+                  :select="true"
+                  :selected="selected"
+                  @handleSelect="(e) => handleSelect(e, item.address)"
+                  rowKey="index"
+                  :usePage="false"
+                  :fields="fields"
+                  :data="item.goodsList"
+                >
+                </data-table>
               </el-col>
             </el-card>
           </el-col>
@@ -34,7 +34,6 @@
 
 <script>
 const _ = require('lodash');
-const moment = require('moment');
 import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
 const { mapActions } = createNamespacedHelpers('order');
 export default {
@@ -43,11 +42,16 @@ export default {
   components: {},
   data: function () {
     return {
+      list: [],
       fields: [
+        { label: '订单id', model: 'order_id' },
+        { label: '订单编号', model: 'order_no' },
         { label: '商品名称', model: 'goods.name' },
         { label: '商品规格', model: 'name' },
         { label: '商品数量', model: 'buy_num' },
       ],
+      selected: [],
+      fileList: [],
     };
   },
   async created() {
@@ -57,9 +61,53 @@ export default {
     ...mapActions(['query', 'fetch', 'create', 'update']),
     // 查询
     async search() {
-      console.log(this.data);
+      let data = this.data;
+      let test = _(data).groupBy('address._id').values().value();
+      let list = [];
+      for (const p1 of test) {
+        let goodsList = [];
+        for (const p2 of p1) {
+          for (const p3 of p2.goods) {
+            p3.order_id = p2.id;
+            p3.order_no = p2.no;
+          }
+          goodsList.push(...p2.goods);
+          let i = 0;
+          for (const p4 of goodsList) {
+            p4.index = i;
+            i++;
+          }
+        }
+        let address = p1[0].address;
+        list.push({ goodsList, address });
+      }
+      this.$set(this, 'list', list);
+    },
+    handleSelect(goodsList, address) {
+      let fileList = [];
+      if (this.fileList.length == 0) {
+        fileList.push({ goodsList, address });
+        this.$set(this, 'fileList', fileList);
+      } else {
+        for (const val of this.fileList) {
+          // 判断this.fileList里是否有和选中的地址id相同的
+          if (val.address._id == address._id) {
+            // 判断是否有选中的商品，没有就过滤掉
+            if (goodsList.length == 0) {
+              let p2 = this.fileList.filter((f) => f.address._id != address._id);
+              this.fileList = p2;
+            } else {
+              val.goodsList = goodsList;
+            }
+          } else {
+            this.fileList.push({ goodsList, address });
+          }
+        }
+      }
+      console.log(this.fileList);
     },
     toFile() {
+      console.log(this.fileList);
       this.$message({ message: '导出成功', type: 'success' });
     },
     // 返回
@@ -92,7 +140,6 @@ export default {
   }
   .one {
     margin: 0 0 10px 0;
-
     span:nth-child(1) {
       font-size: 20px;
       font-weight: 700;
@@ -100,9 +147,19 @@ export default {
     }
   }
   .two {
-    // margin: 5px;
+    margin: 5px 10%;
+    .data-table {
+      margin: 5px 0;
+    }
+    .clearfix {
+      margin: 4px 0;
+      .el-col {
+        margin: 4px 0;
+      }
+    }
     .box-card {
       margin: 5px;
+      padding: 5px 0 20px 0;
     }
     .shop {
       text-align: center;
@@ -111,15 +168,6 @@ export default {
     .item {
       margin-bottom: 18px;
     }
-
-    .clearfix:before,
-    .clearfix:after {
-      display: table;
-      content: '';
-    }
-    .clearfix:after {
-      clear: both;
-    }
   }
 }
 </style>