web-admin/src/components/orderParts/parts/detail-2.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 FileSaver from 'file-saver';
const ExcelJS = require('exceljs');
import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
export default {
  name: 'form-1',
  props: { deliverList: { type: Array } },
  components: {},
  data: function () {
    return {
      list: [],
      fields: [
        { label: '订单编号', model: 'order_no' },
        { label: '商品名称', model: 'goods.name' },
        { label: '商品规格', model: 'name' },
        { label: '商品数量', model: 'buy_num' },
      ],
      selected: [],
      fileList: [],
    };
  },
  async created() {
    await this.search();
  },
  methods: {
    // 查询
    async search() {
      let data = this.deliverList;
      if (data) {
        let test = _(data).groupBy('address._id').values().value();
        let list = [];
        for (const p1 of test) {
          let goodsList = [];
          for (const p2 of p1) {
            if (p2.is_afterSale == false) {
              for (let p3 of p2.goods) {
                // _.pick(p3, ['goods', 'name', 'buy_num']);
                // let p3_2 = (({ goods, name, buy_num }) => ({ goods, name, buy_num }))(p3);
                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 = _.pick(p1[0].address, ['name', 'phone', 'province', 'city', 'area', 'address', '_id']);
          // let address = (({ name, phone, province, city, area, address, _id }) => ({ name, phone, province, city, area, address, _id }))(p1[0].address);
          list.push({ goodsList, address });
        }
        console.log(list);

        this.$set(this, 'list', list);
      }
    },
    // 选中要导出的商品
    handleSelect(goodsList, address) {
      let fileList = this.fileList;
      if (fileList.length == 0) {
        fileList.push({ goodsList, address });
      } else {
        if (goodsList.length > 0) {
          for (const val of fileList) {
            if (address._id == val.address._id) val.goodsList = goodsList;
            else fileList.push({ goodsList, address });
          }
        } else {
          let p1 = fileList.filter((i) => i.address._id != address._id);
          fileList = p1;
        }
      }
      let list = _.uniqBy(fileList, 'address._id');
      this.$set(this, 'fileList', list);
    },
    // 导出清单
    toFile() {
      const workbook = new ExcelJS.Workbook();
      let list = this.fileList;
      for (let [index, p1] of list.entries()) {
        let name = p1.address.name + index;
        const worksheet = workbook.addWorksheet(name);
        // 设置标题-start
        // 获取单元格位置
        let titleCell = worksheet.getCell('A1');
        // 合并单元格
        worksheet.mergeCells('A1:D1');
        // 单元格内容
        titleCell.value = '发货清单';
        worksheet.columns.forEach(function (column, i) {
          column.font = { size: 14 };
          column.width = 38;
          column.alignment = { wrapText: true, vertical: 'middle', horizontal: 'left' };
          column.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };
        });
        // 单元格内容样式
        titleCell.style = {
          alignment: { vertical: 'middle', horizontal: 'center' },
          font: { size: 20, bold: true },
          border: { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } },
        };
        // 设置标题-end
        let data = [
          ['收获人', p1.address.name],
          ['联系电话', p1.address.phone],
          ['收货地址', p1.address.province + p1.address.city + p1.address.area + p1.address.address],
          ['订单号', '产品名称', '产品规格', '购买数量'],
        ];
        for (const p2 of p1.goodsList) {
          let p4 = [[p2.order_no, p2.goods.name, p2.name, p2.buy_num]];
          data.push(...p4);
        }
        const row = worksheet.getRow(1);
        row.height = 40;
        for (const val of data) {
          worksheet.addRow(val);
        }
      }
      workbook.xlsx.writeBuffer().then((buffer) => {
        FileSaver.saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `发货清单.xlsx`);
      });
    },
    // 返回
    toBack() {
      this.$emit('toBack');
    },
  },
  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>