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

<template>
    <basic-container>
        <avue-crud :key="key" ref="crud" :option="option" :data="data" :search.sync="query" @on-load="onLoad"
            :table-loading="loading" @search-reset="resetChange" :page.sync="page" :cell-style="cellStyle"
            @search-change="searchChange" @resetColumn="resetColumnTwo('crud', 'option', 'optionList', 337)"
            @saveColumn="saveColumnTwo('crud', 'option', 'optionList', 337)">
            <template slot="menuLeft">
                <div style="display: flex;align-items: center;">
                    <el-button type="warning" icon="el-icon-download" size="small" @click="outExport">导出</el-button>
                    <div style="display: flex;align-items: center;">
                        <div class="buttonBox">
                            <span>经营利润 = 销售毛利 - 已退货毛利</span>
                        </div>
                    </div>
                </div>
            </template>
            <template slot="header">
                <el-table :data="commodityData" border size="small" @header-click="cellClick" style="width: 100%"
                    v-loading="loading">
                    <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="brandNameSearch">
                <search-query :datalist="brandData" :selectValue="query.brandName" :clearable="true" :buttonIf="false"
                    :forParameter="{ key: 'id', label: 'cname', value: 'cname' }" placeholder="请选择品牌"
                    @corpFocus="listAllfun" @corpChange="corpChange($event, 'brandName')">
                </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="goodsNameSearch">-->
            <!--    <search-query :datalist="goodsData"-->
            <!--                  :selectValue="query.goodsName"-->
            <!--                  :filterable="true"-->
            <!--                  :clearable="true"-->
            <!--                  :remote="true"-->
            <!--                  :buttonIf="false"-->
            <!--                  :forParameter="{key:'id',label:'cname',value:'cname'}"-->
            <!--                  placeholder="请选择商品名称"-->
            <!--                  @remoteMethod="SPgetListfun"-->
            <!--                  @corpFocus="SPgetListfun"-->
            <!--                  @corpChange="corpChange($event,'goodsName')">-->
            <!--    </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>
            <template slot="actualPaymentStatusSearch">
                <search-query :datalist="actualPaymentStatusData" :selectValue="query.actualPaymentStatus"
                    :clearable="true" :buttonIf="false"
                    :forParameter="{ key: 'dictKey', label: 'dictValue', value: 'dictKey' }" placeholder="请选择结算方式"
                    @corpFocus="actualPaymentWorkDictsfun" @corpChange="corpChange($event, 'actualPaymentStatus')">
                </search-query>
            </template>
            <template slot="bsTypeSearch">
                <search-query :datalist="bsTypeData" :selectValue="query.bsType" :clearable="false" :buttonIf="false"
                    :forParameter="{ key: 'dictKey', label: 'dictValue', value: 'dictKey' }" placeholder="请选择单据状态"
                    @corpChange="corpChange($event, 'bsType')">
                </search-query>
            </template>
            <template slot="isContainSearch">
                <el-checkbox v-model="query.isContain" :true-label="1" :false-label="0"></el-checkbox>
            </template>
            <template slot="whetherRebateSearch">
                <el-checkbox v-model="query.whetherRebate" :true-label="1" :false-label="0"></el-checkbox>
            </template>
            <template slot-scope="{ row, index }" slot="ordNo">
                <span style="color: #409EFF;cursor: pointer" @click.stop="Jump(row)">{{ row.ordNo }}
                </span>
            </template>
            <template slot="status" slot-scope="{ row }">
                <span>{{ row.status }}</span>
            </template>
        </avue-crud>
    </basic-container>
</template>

<script>

import { statisticsSaleDetail, statisticsSaleDetailSum } from "@/api/saleDetail";
import { defaultDate3 } from "@/util/date";
import { getList as KHgetList } from '@/api/tirePartsMall/basicData/customerInformation/index'
import { getList as SPgetList } from '@/api/tirePartsMall/basicData/commodityInformation/index'
import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
import { getWorkDicts } from "@/api/system/dictbiz";
import { getToken } from "@/util/auth";
import { getSalesman } from "@/api/landTransportation";
import { listAll, storageDesc } from "@/api/tirePartsMall/basicData/listingManagement";
import { isProcurement } from "@/api/basicData/configuration";
export default {
    components: { SearchQuery },
    data() {
        return {
            loading: false,
            key: 0,
            data: [],
            total: [],
            storageData: [],
            query: {
                businesDateStart: defaultDate3()[0],
                businesDateEnd: defaultDate3()[1],
                bsType: "XS,TKXS",
                isContain: 1,
                whetherRebate: 0,
            },
            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",
                searchSpan: 6,
                // searchIcon: true,
                // searchIndex: 2,
                // highlightCurrentRow: true,
                border: true,
                searchMenuSpan: 24,
                addBtn: false,
                showSummary: true,
                summaryText:this.$t("land118n.total"),
                sumColumnList: [
                    {
                        name: 'goodsNum',
                        type: 'sum',
                        decimals: 0
                    },
                    {
                        name: 'subTotalMoney',
                        type: 'sum',
                        decimals: 2
                    },
                    {
                        name: 'costPrice',
                        type: 'sum',
                        decimals: 2
                    },
                    {
                        name: 'profit',
                        type: 'sum',
                        decimals: 2
                    }
                ],
                column: [{
                    label: '客户名称',
                    prop: 'customerName',
                    overHidden: true,
                    search: true,
                    searchslot: true,
                    width:140,
                    searchOrder: 3
                }, {
                    label: '业务员',
                    prop: 'salerName',
                    overHidden: true,
                    search: true,
                    searchslot: true,
                    searchOrder: 4
                }, {
                    label: '仓库',
                    prop: 'storageName',
                    searchProp: "storageId",
                    search: true,
                    overHidden: true,
                    searchOrder: 9
                }, {
                    label: '业务编号',
                    prop: 'ordNo',
                    overHidden: true,
                    search: true,
                    searchOrder: 5
                }, {
                    label: '业务日期',
                    prop: 'businesDate',
                    overHidden: true,
                }, {
                    label: '出库时间',
                    prop: 'deliveryBusinesDate',
                    overHidden: true,
                }, {
                    label: '结算状态',
                    prop: 'actualPaymentStatus',
                    overHidden: true,
                    search: true,
                    searchslot: true,
                    searchOrder: 7
                }, {
                    label: "业务来源",
                    prop: "businessSource",
                    overHidden: true,
                    search: true,
                    type: 'select',
                    dicUrl: "/api/blade-system/dict-biz/dictionary?code=business_Source",
                    props: {
                        label: "dictValue",
                        value: "dictKey"
                    },
                    searchOrder: 8.1
                }, {
                    label: '品牌',
                    prop: 'brandName',
                    overHidden: true,
                    search: true,
                    searchslot: true,
                    searchOrder: 6.1,
                }, {
                    label: '商品编码',
                    prop: 'code',
                    overHidden: true,
                    search: true,
                    searchslot: true,
                    searchOrder: 6
                }, {
                    label: '商品名称',
                    prop: 'goodsName',
                    overHidden: true,
                    search: true,
                    searchslot: true,
                    searchOrder: 6
                }, {
                    label: '规格型号',
                    prop: 'propertyName',
                    overHidden: true,
                }, {
                    label: '花纹',
                    prop: 'pattern',
                    overHidden: true,
                }, {
                    label: '数量',
                    prop: 'goodsNum',
                    overHidden: true,
                }, {
                    label: '价格',
                    prop: 'price',
                    overHidden: true,
                }, {
                    label: '运费',
                    prop: 'freight',
                    overHidden: true,
                }, {
                    label: '金额',
                    prop: 'subTotalMoney',
                    overHidden: true,
                }, {
                    label: '余额',
                    prop: 'balanceAmount',
                    overHidden: true,
                }, {
                    label: '成本',
                    prop: 'costprie',
                    overHidden: true,
                }, {
                    label: '毛利',
                    prop: 'profit',
                    overHidden: true,
                }, {
                    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: 'dateStart',
                    overHidden: true,
                    search: true,
                    hide: true,
                    searchOrder: 2.1,
                    type: "date",
                    format: "yyyy-MM-dd",
                    valueFormat: "yyyy-MM-dd",
                }, {
                    label: '出库结束',
                    prop: 'dateEnd',
                    overHidden: true,
                    search: true,
                    hide: true,
                    searchOrder: 2.2,
                    type: "date",
                    format: "yyyy-MM-dd",
                    valueFormat: "yyyy-MM-dd",
                }, {
                    label: '单据状态',
                    prop: 'status',
                    overHidden: true,
                    // search: true,
                    // searchslot: true,
                    // searchOrder: 8
                },
                {
                    label: '业务类型',
                    prop: 'bsType',
                    overHidden: true,
                    search: true,
                    searchslot: true,
                    searchOrder: 8
                }, {
                    label: '包含未发货',
                    prop: 'isContain',
                    overHidden: true,
                    hide: true,
                    search: true,
                    searchslot: true,
                    searchOrder: 10
                }, {
                    label: '返利利润',
                    prop: 'whetherRebate',
                    overHidden: true,
                    hide: true,
                    search: true,
                    searchslot: true,
                    searchOrder: 11
                }]
            },
            bsTypeData: [],
            customerData: [], // 客户数据
            brandData: [], // 品牌数据
            goodsData: [], // 商品名称
            salerData: [], // 业务员
            actualPaymentStatusData: [], // 结算状态
            statusData: [], // 单据状态
            commodityData: [], // 合计数据
            // 合计的配置项
            commodityLabel: [{
                id: 1,
                label: '销售数量',
                prop: 'goodsSum'
            }, {
                id: 2,
                label: '销售金额',
                prop: 'amount'
            }, {
                id: 3,
                label: '销售成本',
                prop: 'costPrice'
            }, {
                id: 4,
                label: '销售毛利',
                prop: 'profit'
            },
            {
                id: 5,
                label: '运费',
                prop: 'freight',
            },
            {
                id: 6,
                label: '已退货数量',
                prop: 'goodsSumCancellation'
            }, {
                id: 7,
                label: '已退货金额',
                prop: 'amountCancellation'
            }, {
                id: 8,
                label: '已退货成本',
                prop: 'costPriceCancellation'
            }, {
                id: 9,
                label: '已退货毛利',
                prop: 'profitCancellation'
            }, {
                id: 10,
                label: '已退货运费',
                prop: 'freightCancellation'
            }, {
                    id: 10,
                    label: '经营利润',
                    prop: 'earnedProfit'
                }],
        }
    },
    async created() {
        this.option = await this.getColumnData(this.getColumnName(337), this.optionList);
        isProcurement({ "param": "whether.model" }).then(res => {
            if (res.data.data == 1) {
                this.findObject(this.option.column, "pattern").label = '规格型号1'
            }
        })
        getWorkDicts('xs_business_Type').then(res => {
            this.bsTypeData = res.data.data
        })
        this.query = this.deepClone(this.query)
    },
    methods: {
        Jump(row) {
            this.$router.push({
                path: "/tirePartsMall/salesManagement/saleOrder/index",
                query: {
                    jumpId: row.pid
                }
            })
        },
        resetChange() {
            this.query = this.$options.data().query
        },
        cellStyle({ row, rowIndex }) {
            if (row.status == '已取消') {
                return 'color: red';
            }
            return
        },
        //导出
        outExport() {
            console.log(this.query)
            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/saleDetailExport',   //跳转目标窗口的地址
                query: {
                    ...config.params,    //括号内是要传递给新窗口的参数
                }
            })
            window.open(routeData.href.slice(1, routeData.href.length) + '&' + `${this.website.tokenHeader}=${getToken()}`);
        },
        // 获取品牌数据
        listAllfun() {
            listAll().then(res => {
                this.brandData = res.data.data
            })
        },
        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
            })
        },
        // 获取商品数据
        SPgetListfun(cname) {
            SPgetList({ current: 1, size: 20, cname: cname ? cname : null }).then(res => {
                this.goodsData = res.data.data.records
            })
        },
        // 结算状态
        actualPaymentWorkDictsfun() {
            getWorkDicts('settlement_Status').then(res => {
                this.actualPaymentStatusData = res.data.data
            })
        },
        // 单据状态
        statusWorkDictsfun() {
            getWorkDicts('sales_Status').then(res => {
                this.statusData = 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)
            }
            this.loading = true;
            statisticsSaleDetail(queryParams).then(res => {
                this.data = res.data.data.records
                this.page.total = res.data.data.total
                // this.option.height = window.innerHeight - 230;
                // generalLedgerTotal(queryParams).then(res=>{
                //     this.total = res.data.data
                // })
                this.$nextTick(() => {
                    this.$refs.crud.doLayout();
                    this.$refs.crud.dicInit();
                });
                statisticsSaleDetailSum({ ...Object.assign(params, this.query) }).then(re => {
                    this.commodityData = [re.data.data]

                })
            }).finally(() => {
                this.$refs.crud.doLayout();
                this.loading = false;
            })
        },
        //自定义列保存
        async saveColumnTwo(ref, option, optionBack, code) {
            /**
             * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
             * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
             * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
             */
            const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
            isProcurement({ "param": "whether.model" }).then(res => {
                if (res.data.data == 1) {
                    this.findObject(this.option.column, "pattern").label = '规格型号1'
                }
            })
            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]);
            isProcurement({ "param": "whether.model" }).then(res => {
                if (res.data.data == 1) {
                    this.findObject(this.option.column, "pattern").label = '规格型号1'
                }
            })
            if (inSave) {
                this.$message.success("重置成功");
                this.$refs[ref].$refs.dialogColumn.columnBox = false;
            }
        },

    }
}
</script>

<style scoped>
.buttonBox {
    font-size: 12px;
    color: #909399;
    margin-left: 10px;
    border: 1px solid #d3d4d6;
    border-radius: 3px;
    padding: 6px 10px;
    background: #f4f4f5;
}
</style>