web-admin/src/views/system/order/deliver.vue

<template>
  <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"> <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">
              <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-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>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('order');
export default {
  name: 'form-1',
  props: {},
  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() {
    await this.search();
  },
  methods: {
    ...mapActions(['query', 'fetch', 'create', 'update']),
    // 查询
    async search() {
      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 = (({ goods, name, buy_num }) => ({ goods, name, buy_num }))(p3);
            delete p3.flow_money;
            delete p3.freight;
            delete p3.id;
            delete p3.status;
            delete p3._id;
            delete p3.meta;
            delete p3.num;
            delete p3.sell_money;
            delete p3.__v;
            delete p3.tags;
            delete p3.cart_id;
            let good = (({ name }) => ({ name }))(p3.goods);
            p3.goods = good;
            p3.order_no = p2.no;
          }
          goodsList.push(...p2.goods);
          let i = 0;
          for (const p4 of goodsList) {
            p4.index = i;
            i++;
          }
        }
        let address = (({ name, phone, province, city, area, address }) => ({ name, phone, province, city, area, address }))(p1[0].address);
        list.push({ goodsList, address });
      }
      console.log(list);
      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' });
    },
    // 返回
    toBack() {
      window.history.go('-1');
    },
  },
  computed: {
    data() {
      return this.$route.query.data;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .top_btn {
    margin: 0 0 10px 0;
  }
  .one {
    margin: 0 0 10px 0;
    span:nth-child(1) {
      font-size: 20px;
      font-weight: 700;
      margin-right: 10px;
    }
  }
  .two {
    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;
      font-size: 18px;
    }
    .item {
      margin-bottom: 18px;
    }
  }
}
</style>