|
|
@@ -1,25 +1,200 @@
|
|
|
<template>
|
|
|
- <div id="index">count</div>
|
|
|
+ <div id="index">
|
|
|
+ <el-col :span="24" class="main">
|
|
|
+ <el-col :span="24" class="one">
|
|
|
+ <el-button @click="toLout()">导出</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="two">
|
|
|
+ <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
|
|
|
+ <el-col :span="24" class="address">
|
|
|
+ <el-col :span="24" class="address_1"> <span>发货地址</span> </el-col>
|
|
|
+ <el-col :span="24" class="address_2">
|
|
|
+ <el-col :span="24"> 收获人：{{ item.address.name }} </el-col>
|
|
|
+ <el-col :span="24"> 联系电话：{{ item.address.phone }} </el-col>
|
|
|
+ <el-col :span="24"> 收获地址：{{ item.address.province }}{{ item.address.city }}{{ item.address.area }}{{ item.address.address }} </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="goods">
|
|
|
+ <el-col :span="24" class="goods_1"> <span>产品</span> </el-col>
|
|
|
+ <el-col :span="24" class="goods_2">
|
|
|
+ <el-col :span="24" class="goodsList" v-for="(tag, indexs) in item.goodsList" :key="indexs">
|
|
|
+ <el-col :span="24">订单号：{{ tag.order_no }}</el-col>
|
|
|
+ <el-col :span="24">产品名称：{{ tag.goods.name }}</el-col>
|
|
|
+ <el-col :span="24">购买数量：{{ tag.buy_num }}</el-col>
|
|
|
+ <el-col :span="24">产品规格：{{ tag.name }}</el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+import FileSaver from 'file-saver';
|
|
|
+const ExcelJS = require('exceljs');
|
|
|
+import { mapState, createNamespacedHelpers, createLogger } from 'vuex';
|
|
|
export default {
|
|
|
name: 'index',
|
|
|
props: {},
|
|
|
components: {},
|
|
|
data: function () {
|
|
|
- return {};
|
|
|
+ return {
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ address: {
|
|
|
+ name: 'test',
|
|
|
+ phone: '13089419810',
|
|
|
+ province: '吉林省',
|
|
|
+ city: '长春市',
|
|
|
+ area: '朝阳区',
|
|
|
+ address: '吉林省长春市朝阳区前进大街1244号1号楼',
|
|
|
+ },
|
|
|
+ goodsList: [
|
|
|
+ {
|
|
|
+ name: '测试规格',
|
|
|
+ goods: {
|
|
|
+ name: 'test',
|
|
|
+ },
|
|
|
+ buy_num: 1,
|
|
|
+ order_no: '20221011165102-lur282e6lga-1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '测试规格',
|
|
|
+ goods: {
|
|
|
+ name: 'test',
|
|
|
+ },
|
|
|
+ buy_num: 1,
|
|
|
+ order_no: '20221011165102-lur282e6lga-1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '测试规格',
|
|
|
+ goods: {
|
|
|
+ name: 'test',
|
|
|
+ },
|
|
|
+ buy_num: 1,
|
|
|
+ order_no: '20221011165102-lur282e6lga-1',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ address: {
|
|
|
+ name: '王大拿',
|
|
|
+ phone: '13756970519',
|
|
|
+ province: '吉林省',
|
|
|
+ city: '长春市',
|
|
|
+ area: '朝阳区',
|
|
|
+ address: '吉林省长春市朝阳区前进大街1408号',
|
|
|
+ },
|
|
|
+ goodsList: [
|
|
|
+ {
|
|
|
+ name: '测试规格',
|
|
|
+ goods: {
|
|
|
+ name: 'test',
|
|
|
+ },
|
|
|
+ buy_num: 1,
|
|
|
+ order_no: '20221011133453-9z1u93k128o-1',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
},
|
|
|
computed: {
|
|
|
...mapState(['user']),
|
|
|
},
|
|
|
created() {},
|
|
|
- methods: {},
|
|
|
+ methods: {
|
|
|
+ toLout() {
|
|
|
+ const workbook = new ExcelJS.Workbook();
|
|
|
+ let list = this.list;
|
|
|
+ for (let [index, p1] of list.entries()) {
|
|
|
+ let name = p1.address.name + index;
|
|
|
+ let worksheet = workbook.addWorksheet(name);
|
|
|
+ // 设置标题-start
|
|
|
+ // 获取单元格位置
|
|
|
+ const titleCell = worksheet.getCell('A1');
|
|
|
+ // 合并单元格
|
|
|
+ worksheet.mergeCells('A1:D1');
|
|
|
+ // 单元格内容
|
|
|
+ titleCell.value = '发货清单';
|
|
|
+ // 单元格内容样式
|
|
|
+ titleCell.alignment = { vertical: 'middle', horizontal: 'center' };
|
|
|
+ // 设置标题-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);
|
|
|
+ }
|
|
|
+ for (const val of data) {
|
|
|
+ worksheet.addRow(val);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ workbook.xlsx.writeBuffer().then((buffer) => {
|
|
|
+ FileSaver.saveAs(
|
|
|
+ new Blob([buffer], {
|
|
|
+ type: 'application/octet-stream',
|
|
|
+ }),
|
|
|
+ `发货清单.xlsx`
|
|
|
+ );
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
metaInfo() {
|
|
|
return { title: this.$route.meta.title };
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="less" scoped></style>
|
|
|
+<style lang="less" scoped>
|
|
|
+.main {
|
|
|
+ .one {
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ }
|
|
|
+ .two {
|
|
|
+ .list {
|
|
|
+ border: 1px solid #ff0000;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ .address {
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ .address_1 {
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ border: 1px solid #00ffff;
|
|
|
+ padding: 5px;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .goods {
|
|
|
+ .goods_1 {
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ border: 1px solid #00ffff;
|
|
|
+ padding: 5px;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .goods_2 {
|
|
|
+ .goodsList {
|
|
|
+ border: 1px solid #0000ff;
|
|
|
+ padding: 10px;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
