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"
            @search-reset="query={}"
            :page.sync="page"
            :cell-style="cellStyle"
            @search-change="searchChange"
            @resetColumn="resetColumnTwo('crud', 'option', 'optionList', 337)"
            @saveColumn="saveColumnTwo('crud', 'option', 'optionList', 337)">
            <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="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="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="statusSearch">
                <search-query :datalist="statusData"
                              :selectValue="query.status"
                              :buttonIf="false"
                              :forParameter="{key:'dictKey',label:'dictValue',value:'dictKey'}"
                              placeholder="请选择单据状态"
                              @corpFocus="statusWorkDictsfun"
                              @corpChange="corpChange($event,'status')">
                </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} from "@/api/tirePartsMall/basicData/listingManagement";

export default {
    components: {SearchQuery},
    data() {
        return {
            key: 0,
            data: [],
            total: [],
            query: {
                businesDateStart: defaultDate3()[0],
                businesDateEnd: defaultDate3()[1],
                isContain: 1,
                bsType:'CG,TKCG',
            },
            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: 6,
                addBtn: false,
                showSummary: true,
                summaryText: "合计",
                sumColumnList: [
                    {
                        name: 'goodsNum',
                        type: 'sum',
                        decimals: 0
                    },
                    {
                        name: 'price',
                        type: 'sum',
                        decimals: 2
                    },
                    {
                        name: 'subTotalMoney',
                        type: 'sum',
                        decimals: 2
                    },
                    {
                        name: 'costprie',
                        type: 'sum',
                        decimals: 2
                    },
                    {
                        name: 'profit',
                        type: 'sum',
                        decimals: 2
                    }
                ],
                column: [{
                    label: '供应商名称',
                    prop: 'customerName',
                    overHidden: true,
                    search: true,
                    searchslot: true,
                    searchOrder: 3
                }, {
                    label: '业务员',
                    prop: 'salerName',
                    overHidden: true,
                    search: true,
                    searchslot: true,
                    searchOrder: 4
                }, {
                    label: '仓库',
                    prop: 'storageName',
                    overHidden: true,
                }, {
                    label: '业务编号',
                    prop: 'ordNo',
                    overHidden: true,
                    search: true,
                    searchOrder: 5
                }, {
                    label: '业务日期',
                    prop: 'businesDate',
                    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: '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: 'status',
                    overHidden: true,
                    search: true,
                    searchslot: true,
                    searchOrder: 8
                }, {
                    label: '包含未发货',
                    prop: 'isContain',
                    overHidden: true,
                    hide: true,
                    search: true,
                    searchslot: true,
                    searchOrder: 9
                }]
            },
            customerData: [], // 客户数据
            brandData: [], // 品牌数据
            goodsData: [], // 商品名称
            salerData: [], // 业务员
            actualPaymentStatusData: [], // 结算状态
            statusData: [], // 单据状态
            commodityData: [], // 合计数据
            // 合计的配置项
            commodityLabel: [{
                id: 1,
                label: '采购数量',
                prop: 'goodsSum'
            }, 
            {
                id: 2,
                label: '采购金额',
                prop: 'amount'
            }, 
            // {
            //     id: 3,
            //     label: '采购成本',
            //     prop: 'costprie'
            // }, 
            // {
            //     id: 4,
            //     label: '采购毛利',
            //     prop: 'profit'
            // }, 
            {
                id: 5,
                label: '已取消数量',
                prop: 'goodsSumCancellation'
            }, 
            {
                id: 6,
                label: '已取消金额',
                prop: 'amountCancellation'
            }, 
            // {
            //     id: 7,
            //     label: '已取消成本',
            //     prop: 'costprieCancellation'
            // }, 
            // {
            //     id: 8,
            //     label: '已取消毛利',
            //     prop: 'profitCancellation'
            // }
        ],
        }
    },
    async created() {
        this.option = await this.getColumnData(this.getColumnName(337), this.optionList);
    },
    methods: {
        cellStyle({row, rowIndex}) {
            if (row.status == '已取消') {
                return 'color: red';
            }
            return
        },
        //导出
        outExport() {
            let config = {params: {bsType:'CG,TKCG',...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,    //括号内是要传递给新窗口的参数
                    bsType:'CG,TKCG',
                }
            })
            window.open(routeData.href.slice(1, routeData.href.length) + '&' + `${this.website.tokenHeader}=${getToken()}`);
        },
        // 获取品牌数据
        listAllfun() {
            listAll().then(res => {
                this.brandData = 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,
                bsType:'CG,TKCG',
                ...Object.assign(params, this.query)
            }
            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]

                })
            })
        },
        //自定义列保存
        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>