tire-platform-ui/src/views/tirePartsMall/financialManagement/purchaseDetail/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.2)"
            @saveColumn="saveColumnTwo('crud', 'option', 'optionList', 337.2)">
            <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%"  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="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 { getParamservice } from "@/api/tirePartsMall/purchasingManagement/warehouseEntryOrder";
export default {
    components: { SearchQuery },
    data() {
        return {
            loading:false,
            key: 0,
            data: [],
            total: [],
            storageData: [],
            query: {
                businesDateStart: defaultDate3()[0],
                businesDateEnd: defaultDate3()[1],
                isContain: 1,
                bsType: 'CG,TKCG,RZCG',
            },
            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: 18,
                addBtn: false,
                showSummary: true,
                summaryText: "合计",
                sumColumnList: [
                    {
                        name: 'goodsNum',
                        type: 'sum',
                        decimals: 0
                    },
                    {
                        name: 'subTotalMoney',
                        type: 'sum',
                        decimals: 2
                    },
                    {
                        name: 'costprie',
                        type: 'sum',
                        decimals: 2
                    },
                    {
                        name: 'profit',
                        type: 'sum',
                        decimals: 2
                    },
                    {
                        name: 'primaryGoodsTotalNum',
                        type: 'sum',
                        decimals: 0
                    },
                    {
                        name: 'primaryGoodsTotalMoney',
                        type: 'sum',
                        decimals: 2
                    },
                    {
                        name: 'price',
                        type: 'sum',
                        decimals: 2
                    },
                    {
                        name: 'outGoodsTotalShipNum',
                        type: 'sum',
                        decimals: 0
                    },
                    {
                        name: 'outGoodsTotalShipAmount',
                        type: 'sum',
                        decimals: 2
                    },
                    {
                        name: 'surplusNum',
                        type: 'sum',
                        decimals: 0
                    },
                    {
                        name: 'surplusAmount',
                        type: 'sum',
                        decimals: 2
                    }
                ],
                column: [{
                    label: '供应商名称',
                    prop: 'customerName',
                    overHidden: true,
                    width: 100,
                    search: true,
                    searchslot: true,
                    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: '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: 'subTotalMoney',
                //     overHidden: true,
                // },
                {
                    label: '订单数量',
                    prop: 'primaryGoodsTotalNum',
                    overHidden: true,
                },
                {
                    label: '订单金额',
                    prop: 'primaryGoodsTotalMoney',
                    overHidden: true,
                },
                {
                    label: '入库数量',
                    prop: 'goodsNum',
                    overHidden: true,
                },
                {
                    label: '入库金额',
                    prop: 'subTotalMoney',
                    overHidden: true,
                },
                {
                    label: '卖出数量',
                    prop: 'outGoodsTotalShipNum',
                    overHidden: true,
                },
                {
                    label: '卖出金额',
                    prop: 'outGoodsTotalShipAmount',
                    overHidden: true,
                },
                {
                    label: '剩余数量',
                    prop: 'surplusNum',
                    overHidden: true,
                },
                {
                    label: '剩余金额',
                    prop: 'surplusAmount',
                    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
                }]
            },
            bsTypeData: [],
            customerData: [], // 客户数据
            brandData: [], // 品牌数据
            goodsData: [], // 商品名称
            salerData: [], // 业务员
            actualPaymentStatusData: [], // 结算状态
            statusData: [], // 单据状态
            commodityData: [], // 合计数据
            // 合计的配置项
            commodityLabel: [{
                id: 1,
                label: '订单数量',
                prop: 'primaryGoodsTotalNum'
            },
            {
                id: 2,
                label: '订单金额',
                prop: 'primaryGoodsTotalMoney'
            },
            // {
            //     id: 3,
            //     label: '采购成本',
            //     prop: 'costprie'
            // }, 
            // {
            //     id: 4,
            //     label: '采购毛利',
            //     prop: 'profit'
            // }, 
            {
                id: 5,
                label: '已取消数量',
                prop: 'goodsSumCancellation'
            },
            {
                id: 6,
                label: '已取消金额',
                prop: 'amountCancellation'
            },
            {
                label: '入库数量',
                prop: 'goodsSum',
            },
            {
                label: '入库金额',
                prop: 'amount',
            },
            {
                label: '卖出数量',
                prop: 'outGoodsTotalShipNum',
            },
            {
                label: '卖出金额',
                prop: 'outGoodsTotalShipAmount',
            },
            {
                label: '剩余数量',
                prop: 'surplusNum',
            },
            {
                label: '剩余金额',
                prop: 'surplusAmount',
            },
                // {
                //     id: 7,
                //     label: '已取消成本',
                //     prop: 'costprieCancellation'
                // }, 
                // {
                //     id: 8,
                //     label: '已取消毛利',
                //     prop: 'profitCancellation'
                // }
            ],
        }
        
    },
    async created() {
        this.option = await this.getColumnData(this.getColumnName(337.2), this.optionList);
        getWorkDicts('cg_business_Type').then(res2 => {
            getParamservice(1, 10, { paramKey: 'whether.financing' }).then(res => {
                if (res.data.data.records.length) {
                    res.data.data.records.forEach(e => {
                        if (e.paramValue == 1) {
                            this.bsTypeData = res2.data.data
                        } else {
                            this.bsTypeData = res2.data.data.filter(e => e.dictKey != "RZCG")
                        }
                    })
                } else {
                    this.bsTypeData = res2.data.data.filter(e => e.dictKey != "RZCG")
                }

            })

        })
        this.query = this.deepClone(this.query)
    },
    methods: {
        resetChange() {
            this.query = {
                businesDateStart: defaultDate3()[0],
                businesDateEnd: defaultDate3()[1],
                isContain: 1,
                bsType: 'CG,TKCG,RZCG',
            }
        },
        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/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: 'GYS', 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,
                bsType: 'CG,TKCG',
                ...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
                // })
                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]);
            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>