ngds/frontendEle/src/views/shop/ba-order-list.vue

<template>
    <div v-loading="loading">
        <div class="white-box">
            <el-table class="withdraw-table" :data="tableData" :max-height="maxHeight" style="width: 100%;" :span-method="objectSpanMethod">
                <el-table-column width="120" label="Product Code" prop="SKU_CODE"></el-table-column><!--商品编号-->
                <el-table-column width="120" label="Product Name" prop="GOODS_TITLE"></el-table-column><!--商品名称-->
                <el-table-column width="120" label="Product Price" prop="REAL_PRICE"></el-table-column><!--商品价格-->
                <el-table-column width="120" label="Qty" prop="BUY_NUMS"></el-table-column><!--数量-->
                <el-table-column width="120" label="Tax Rate" prop="TAX_RATE"></el-table-column><!--税率-->
                <el-table-column width="120" label="Tax" prop="TAX_AMOUNT"></el-table-column><!--税额-->
                <el-table-column width="120" label="Total Price" prop="TOTAL_AMOUNT"></el-table-column><!--税额-->
                <el-table-column width="120" label="Order Code" prop="SN"></el-table-column><!--订单编号-->
                <el-table-column width="120" label="Member Code" prop="USER_NAME"></el-table-column><!--会员编号-->
                <el-table-column width="120" label="Member Name" prop="REAL_NAME"></el-table-column><!--会员姓名-->
                <el-table-column width="130" label="Recipient name" prop="CONSIGNEE"></el-table-column><!--收货人-->
                <el-table-column width="120" label="Phone Number" prop="MOBILE"></el-table-column><!--收货电话-->
                <el-table-column width="150" label="Shipping Address" prop="FULL_ADDRESS"></el-table-column><!--收货地址-->
                <el-table-column width="120" label="Created Name" prop="CREATE_USER"></el-table-column><!--创建人-->
                <el-table-column width="120" label="Created time" prop="CREATED_AT"></el-table-column><!--下单时间-->
                <el-table-column width="150" label="Payment" prop="PAY_TYPE"></el-table-column><!--支付方式-->
                <el-table-column width="120" label="Pay time" prop="PAY_AT"></el-table-column><!--支付时间-->
                <el-table-column width="120" label="Pay Status" prop="STATUS"></el-table-column><!--支付状态-->
            </el-table>
            <div class="white-box-footer">
                <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></pagination>
            </div>
        </div>
    </div>
</template>

<script>
import network from '@/utils/network'
import tool from '@/utils/tool'
import Pagination from '@/components/Pagination'

export default {
    name: "ba-order-list",
    components: {
        Pagination
    },
    mounted() {
        this.getData();
    },
    data() {
        return {
            loading: false,
            form:{},
            tableData:null,
            list: null,
            currentPage: 1,
            totalPages: 1,
            totalCount: 1,
            pageSize: 20,
            tool: tool,
            spanArr: [], // 用于存放需要合并的行的个数
            pos: 0, // 记录spanArr数组的下标
            maxHeight: tool.getTableHeight(),
        }
    },
    methods: {
        handleCurrentChange (page) {
            this.getData(page, this.pageSize)
        },
        handleSizeChange (pageSize) {
            this.getData(this.currentPage, pageSize)
        },
        // 列表页合并
        objectSpanMethod(obj) {
            if (obj.columnIndex >= 7) {
                // ⼆维数组存储的数据取出
                let _row = this.spanArr[obj.rowIndex];
                let _col = _row > 0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col,
                };
            } else {
                return false;
            }
        },
        // 列表页合并
        getSpanArr(orderList) {
            this.pos = 0;
            orderList.forEach((item, index) => {
                //判断是否是第⼀项
                if (index === 0) {
                    this.spanArr.push(1);
                    this.pos = 0;
                } else {
                    //不是第⼀项时，就根据标识去存储
                    if (
                        orderList[index].ORDER_SN === orderList[index - 1].ORDER_SN &&
                        orderList[index].USER_NAME === orderList[index - 1].USER_NAME &&
                        orderList[index].REAL_NAME === orderList[index - 1].REAL_NAME &&
                        orderList[index].CONSIGNEE === orderList[index - 1].CONSIGNEE &&
                        orderList[index].MOBILE === orderList[index - 1].MOBILE &&
                        orderList[index].PAY_AT === orderList[index - 1].PAY_AT &&
                        orderList[index].STATUS === orderList[index - 1].STATUS &&
                        orderList[index].PAY_TYPE === orderList[index - 1].PAY_TYPE &&
                        orderList[index].CREATED_AT === orderList[index - 1].CREATED_AT
                    ) {
                        // 查找到符合条件的数据时每次要把之前存储的数据+1
                        this.spanArr[this.pos] += 1;
                        this.spanArr.push(0);
                    } else {
                        // 没有符合的数据时，要记住当前的index
                        this.spanArr.push(1);
                        this.pos = index;
                    }
                }
            });
        },
        // 查询列表数据
        getData(page, pageSize) {
            this.spanArr = [];
            this.pos = 0;
            let _this = this
            network.getPageData(_this, 'shop/ba-order-list', page, pageSize, {type: this.type}, function (response) {
                _this.loading = false;
                _this.list = response.list;
                let settingObj = _this.list;
                _this.tableData = Object.keys(settingObj).map(item => {
                    //把每个对象返回出去生成一个新的数组中相当于0:{id:1}
                    return settingObj[item];
                });
                _this.getSpanArr(_this.tableData);
            });
        },
    }
}
</script>
<style scoped>

</style>