Smart_platform_ui/src/views/tirePartsMall/statisticAnalysis/outboundStatistics/index.vue

<template>
    <div>
        <basic-container class="page-crad">
            <avue-crud ref="crud" :option="option" :data="dataList" :page.sync="page" :search.sync="search"
                :cell-style="cellStyle" @search-change="searchChange" @current-change="currentChange"
                @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad" :table-loading="loading"
                @resetColumn="resetColumn('crud', 'option', 'defaultOption', 422)"
                @saveColumn="saveColumn('crud', 'option', 'defaultOption', 422)">
                <template slot="header">
                    <el-table :data="commodityData" border size="small" @header-click="cellClick" style="width: 100%"
                        v-loading="itemloading">
                        <el-table-column v-for="(item, index) in commodityLabel" :key="index" :prop="item.prop"
                            show-overflow-tooltip :label="item.label" />
                    </el-table>
                </template>
                <template slot="menuLeft">
                    <el-button type="info" size="small" @click="outExport" icon="el-icon-download">导出</el-button>
                </template>
            </avue-crud>
        </basic-container>
    </div>
</template>

<script>
import { getToken } from "@/util/auth";
import { saleFinancingDetail, saleFinancingDetailSum } from "@/api/tirePartsMall/statisticAnalysis/outboundStatistics";
import _ from "lodash";

export default {
    name: "index",
    data() {
        return {
            itemloading: false,
            commodityLabel: [
                {
                    id: 4,
                    label: "代采数",
                    prop: "sendNumFinancing",
                }, {
                    id: 5,
                    label: "代采金额",
                    prop: "sendNumFinancingAmount",
                }
            ],
            commodityData: [], // 合计数据
            form: {},
            search: {},
            dataList: [],
            loading: false,
            page: {
                pageSize: 20,
                currentPage: 1,
                total: 0,
                pageSizes: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500]
            },
            option: {},
            defaultOption: {
                height: 'auto',
                align: "center",
                border: true,
                index: true,
                addBtn: false,
                viewBtn: false,
                editBtn: false,
                delBtn: false,
                searchMenuSpan: 12,
                emptyBtnText: '清空所有条件',
                menu: false,
                column: [
                    {
                        label: '品牌',
                        prop: 'brandName',
                        width: 100,
                        overHidden: true,
                    },
                    {
                        label: '商品编码',
                        prop: 'goodsNo',
                        width: 100,
                        overHidden: true,
                    },
                    {
                        label: '商品名称',
                        prop: 'goodsName',
                        width: 100,
                        search: true,
                        overHidden: true,
                    },
                    {
                        label: '规格型号',
                        prop: 'propertyName',
                        width: 100,
                        overHidden: true,
                    },
                    {
                        label: '花纹',
                        prop: 'pattern',
                        width: 100,
                        overHidden: true,
                    },
                    {
                        label: '代采数',
                        prop: 'sendNumFinancing',
                        width: 100,
                        overHidden: true,
                    },
                    {
                        label: '代采金额',
                        prop: 'sendNumFinancingAmount',
                        width: 100,
                        overHidden: true,
                    },
                    {
                        label: "出库日期",
                        prop: "businesDate",
                        width: 100,
                        type: 'date',
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                        overHidden: true,
                    },
                    {
                        label: '销售订单号',
                        prop: 'saleOrdNo',
                        width: 120,
                        overHidden: true,
                    },
                    {
                        label: '出库单号',
                        prop: 'billno',
                        width: 100,
                        overHidden: true,
                    },
                    {
                        label: '采购订单号',
                        prop: 'ordNo',
                        width: 120,
                        search: true,
                        overHidden: true,
                        showColumn: false,
                        hide: true,
                    },
                    {
                        label: '采购订单号',
                        prop: 'purchaseOrdNo',
                        width: 120,
                        overHidden: true,
                    },
                    {
                        label: "出库状态",
                        prop: "statusName",
                        width: 100,
                        type: 'select',
                        dicData: [{
                            label: '已出库',
                            value: '已出库'
                        }, {
                            label: '待出库',
                            value: '待出库'
                        }, {
                            label: '撤销出库',
                            value: '撤销出库'
                        }],
                        searchValue: "已出库",
                        search: true,
                        showColumn: false,
                        hide: true,
                    },
                    {
                        label: '仓库',
                        prop: 'warehouse',
                        overHidden: true,
                    },
                    {
                        label: '出库开始',
                        prop: 'dateStart',
                        overHidden: true,
                        search: true,
                        hide: true,
                        showColumn: false,
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                    }, {
                        label: '出库结束',
                        prop: 'dateEnd',
                        overHidden: true,
                        search: true,
                        hide: true,
                        showColumn: false,
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                    },
                    {
                        label: "类型",
                        prop: "type",
                        type: 'select',
                        dicData: [{
                            label: '自有',
                            value: 0
                        }, {
                            label: '融资',
                            value: 1
                        }],
                        search: true,
                        searchValue: 1,
                        showColumn: false,
                        hide: true,
                    }
                ],
            },
        };
    },
    async created() {
        this.option = await this.getColumnData(this.getColumnName(422), this.defaultOption);
    },
    methods: {
        cellStyle() {
            return "padding:0;height:40px;";
        },
        searchReset() {
            this.search = this.$options.data().search;
            this.onLoad(this.page);
        },
        //点击搜索按钮触发
        searchChange(params, done) {
            this.page.currentPage = 1;
            this.onLoad(this.page, params);
            done();
        },
        refreshChange() {
            this.onLoad(this.page, this.search);
        },
        currentChange(val) {
            this.page.currentPage = val;
        },
        sizeChange(val) {
            this.page.currentPage = 1;
            this.page.pageSize = val;
        },
        onLoad(page, params = {}) {
            let obj = {}
            obj = {
                ...Object.assign(params, this.query),
            }
            saleFinancingDetail(page.currentPage, page.pageSize, obj).then(res => {
                this.dataList = res.data.data.records;
                this.page.total = res.data.data.total;
                this.itemloading = true,
                    saleFinancingDetailSum(obj).then(res => {
                        this.commodityData = [res.data.data]
                    }).finally(() => {
                        this.itemloading = false;
                    });
            }).finally(() => {
                this.loading = false;
            });
        },
        //自定义列保存
        async saveColumn(ref, option, optionBack, code) {
            /**
             * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
             * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
             * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
             */
            const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
            if (inSave) {
                this.$message.success("保存成功");
                //关闭窗口
                this.$refs[ref].$refs.dialogColumn.columnBox = false;
                this.searchReset()
            }
        },
        //自定义列重置
        async resetColumn(ref, option, optionBack, code) {
            this[option] = this[optionBack];
            const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
            if (inSave) {
                this.$message.success("重置成功");
                this.$refs[ref].$refs.dialogColumn.columnBox = false;
                this.searchReset()
            }
        },
        outExport() {
            let config = { params: { ...this.search } }
            if (config.params) {
                for (const propName of Object.keys(config.params)) {
                    const value = config.params[propName];
                    if (value !== null && typeof (value) !== "undefined") {
                        if (value instanceof Array) {
                            for (const key of Object.keys(value)) {
                                let params = propName + '[' + key + ']';
                                config.params[params] = value[key]
                            }
                            delete config.params[propName]
                        }
                    }
                }
            }
            const routeData = this.$router.resolve({
                path: '/api/blade-sales-part/statistics/saleFinancingDetailExport',      //跳转目标窗口的地址
                query: {
                    ...config.params,    //括号内是要传递给新窗口的参数
                    identification: this.url
                }
            })
            window.open(routeData.href.slice(1, routeData.href.length) + '&' + `${this.website.tokenHeader}=${getToken()}`);
        },
    }
};
</script>

<style scoped>
.page-crad ::v-deep .basic-container__card {
    height: 94.2vh;
}

::v-deep .el-table__expanded-cell[class*="cell"] {
    padding: 0px;
}

.itemTable ::v-deep .el-table {
    width: 100%;
}

/deep/ .el-col-md-8 {
    width: 24.33333%;
}
</style>