tire-platform-ui/src/views/tirePartsMall/financialManagement/salesAnalysis/index.vue

<template>
    <basic-container>
        <avue-crud :key="key" ref="crud" :option="option" :data="data" :search.sync="query" @on-load="onLoad"
            @search-reset="resetChange" :page.sync="page" :cell-style="cellStyle" @search-change="searchChange"
            @resetColumn="resetColumnTwo('crud', 'option', 'optionList', 369)"
            @saveColumn="saveColumnTwo('crud', 'option', 'optionList', 369)">
            <template slot="menuLeft">
                <el-button type="warning" icon="el-icon-download" size="small" @click="outExport">导出</el-button>
            </template>
            <template slot="header">
                <el-table :data="commodityData" border size="small" @header-click="cellClick" style="width: 100%">
                    <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="customerNameSearch">
                <search-query :datalist="customerData" :selectValue="query.customerName" :filterable="true"
                    :clearable="true" :remote="true" :buttonIf="false"
                    :forParameter="{ key: 'id', label: 'cname', value: 'cname' }" placeholder="请选择客户名称"
                    @remoteMethod="KHgetListfun" @corpFocus="KHgetListfun" @corpChange="corpChange($event, 'customerName')">
                </search-query>
            </template>
            <template slot="storageIdSearch">
                <search-query :datalist="storageData" :selectValue="query.storageId" :clearable="true" :buttonIf="false"
                    :forParameter="{ key: 'id', label: 'cname', value: 'id' }" placeholder="请选择仓库" @corpFocus="storageIdfun"
                    @corpChange="corpChange($event, 'storageId')">
                </search-query>
            </template>
            <template slot="salerNameSearch">
                <search-query :datalist="salerData" :selectValue="query.salerName" :clearable="true" :buttonIf="false"
                    :forParameter="{ key: 'id', label: 'name', value: 'name' }" placeholder="请选择业务员"
                    @corpFocus="YWYgetListfun" @corpChange="corpChange($event, 'salerName')">
                </search-query>
            </template>
        </avue-crud>
    </basic-container>
</template>

<script>

import { getList, salespersonCustomerSum } from "@/api/tirePartsMall/salesAnalysis";
import { defaultDate3 } from "@/util/date";
import { getList as KHgetList } from '@/api/tirePartsMall/basicData/customerInformation/index'
import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
import { getToken } from "@/util/auth";
import { getSalesman } from "@/api/landTransportation";
import { storageDesc } from "@/api/tirePartsMall/basicData/listingManagement";

export default {
    components: { SearchQuery },
    data() {
        return {
            key: 0,
            data: [],
            total: [],
            storageData: [],
            query: {
                businesDateStart: defaultDate3()[0],
                businesDateEnd: defaultDate3()[1],
                bsType: 1
            },
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
                pageSizes: [10, 50, 100, 200, 300]
            },
            option: {},
            optionList: {
                align: 'center',
                stripe: true,
                index: true,
                menu: false,
                height: "auto",
                border: true,
                searchMenuSpan: 12,
                addBtn: false,
                showSummary: true,
                summaryText: "合计",
                sumColumnList: [
                    {
                        name: 'salesQuantity',
                        type: 'sum',
                        decimals: 0
                    },
                    {
                        name: 'returnQuantity',
                        type: 'sum',
                        decimals: 0
                    },
                    {
                        name: 'salesAmount',
                        type: 'sum',
                        decimals: 2
                    },
                    {
                        name: 'returnAmount',
                        type: 'sum',
                        decimals: 2
                    },
                    {
                        name: 'salesProfit',
                        type: 'sum',
                        decimals: 2
                    }
                ],
                column: [{
                    label: '业务开始',
                    prop: 'businesDateStart',
                    overHidden: true,
                    search: true,
                    hide: true,
                    searchOrder: 1,
                    type: "date",
                    format: "yyyy-MM-dd",
                    valueFormat: "yyyy-MM-dd",
                },
                {
                    label: '业务结束',
                    prop: 'businesDateEnd',
                    overHidden: true,
                    search: true,
                    hide: true,
                    searchOrder: 2,
                    type: "date",
                    format: "yyyy-MM-dd",
                    valueFormat: "yyyy-MM-dd",
                },
                {
                    label: '业务员',
                    prop: 'salerName',
                    overHidden: true,
                    search: true,
                    searchslot: true,
                    hide: true,
                    searchOrder: 3
                },
                {
                    label: '客户名称',
                    prop: 'customerName',
                    overHidden: true,
                    search: true,
                    searchslot: true,
                    hide: true,
                    searchOrder: 4
                },
                {
                    label: '仓库',
                    prop: 'storageName',
                    searchProp: "storageId",
                    search: true,
                    overHidden: true,
                    searchslot: true,
                    hide: true,
                    searchOrder: 5
                },
                {
                    label: '业务类型',
                    prop: "bsType",
                    type: 'select',
                    search: true,
                    overHidden: true,
                    searchslot: true,
                    hide: true,
                    searchOrder: 6,
                    dicData: [{
                        label: '客户',
                        value: 1
                    }, {
                        label: '业务员',
                        value: 2
                    }],
                },
                {
                    label: '分析对象',
                    prop: 'customerName',
                    overHidden: true,
                },
                {
                    label: '销售数量',
                    prop: 'salesQuantity',
                    overHidden: true,
                }, {
                    label: '退货数量',
                    prop: 'returnQuantity',
                    overHidden: true,
                }, {
                    label: '销售金额',
                    prop: 'salesAmount',
                    overHidden: true,
                }, {
                    label: '退货金额',
                    prop: 'returnAmount',
                    overHidden: true,
                },
                {
                    label: '销售利润',
                    prop: 'salesProfit',
                    overHidde: true,
                }],
            },
            customerData: [], // 客户数据
            salerData: [], // 业务员
            commodityData: [], // 合计数据
            // 合计的配置项
            commodityLabel: [{
                id: 1,
                label: '销售数量',
                prop: 'salesQuantity',
            }, {
                id: 2,
                label: '退货数量',
                prop: 'returnQuantity'
            }, {
                id: 3,
                label: '销售金额',
                prop: 'salesAmount',
            }, {
                id: 4,
                label: '退货金额',
                prop: 'returnAmount'
            }, {
                id: 5,
                label: '销售利润',
                prop: 'salesProfit'
            }],
        }
    },
    async created() {
        this.option = await this.getColumnData(this.getColumnName(369), this.optionList);
    },
    methods: {
        resetChange() {
            this.query = this.$options.data().query
        },
        cellStyle({ row, rowIndex }) {
            if (row.status == '已取消') {
                return 'color: red';
            }
            return
        },
        //导出
        outExport() {
            let config = { params: { ...this.query } }
            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/salespersonCustomerExport',   //跳转目标窗口的地址
                query: {
                    ...config.params,    //括号内是要传递给新窗口的参数,
                }
            })
            window.open(routeData.href.slice(1, routeData.href.length) + '&' + `${this.website.tokenHeader}=${getToken()}`);
        },
        storageIdfun() {
            storageDesc().then(res => {
                this.storageData = res.data.data
            })
        },
        // 获取客户数据
        KHgetListfun(cname) {
            KHgetList({ current: 1, size: 20, corpType: 'KH', cname: cname ? cname : null }).then(res => {
                this.customerData = res.data.data.records
            })
        },
        // 获取业务员数据
        YWYgetListfun(realName) {
            // YWYgetList(1,10,{realName:realName?realName:null}).then(res=>{
            //     this.salerData = res.data.data.records
            // })
            getSalesman().then(res => {
                this.salerData = res.data.data
            })
        },
        // 下拉回调
        corpChange(value, name) {
            this.$set(this.query, name, value)
        },
        //搜索
        searchChange(params, done) {
            this.query = params;
            this.onLoad(this.page, params)
            done();
        },
        // 获取列表数据
        onLoad(page, params = {}) {
            let queryParams = {
                size: page.pageSize,
                current: page.currentPage,
                ...Object.assign(params, this.query)
            }
            console.log(queryParams)
            getList(queryParams).then(res => {
                this.data = res.data.data.records
                this.page.total = res.data.data.total
                salespersonCustomerSum({ ...Object.assign(params, this.query) }).then(re => {
                    this.commodityData = [re.data.data]
                })
            })
        },
        //自定义列保存
        async saveColumnTwo(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;
            }
        },
        //自定义列重置
        async resetColumnTwo(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;
            }
        },

    }
}
</script>

<style scoped></style>