|  | @@ -0,0 +1,366 @@
 | 
	
		
			
				|  |  | +<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: 1,
 | 
	
		
			
				|  |  | +                    label: "出库金额",
 | 
	
		
			
				|  |  | +                    prop: "sendNumAmount",
 | 
	
		
			
				|  |  | +                }, {
 | 
	
		
			
				|  |  | +                    id: 2,
 | 
	
		
			
				|  |  | +                    label: "自有数",
 | 
	
		
			
				|  |  | +                    prop: "sendNumHave",
 | 
	
		
			
				|  |  | +                }, {
 | 
	
		
			
				|  |  | +                    id: 3,
 | 
	
		
			
				|  |  | +                    label: "自有金额",
 | 
	
		
			
				|  |  | +                    prop: "sendNumHaveAmount",
 | 
	
		
			
				|  |  | +                }, {
 | 
	
		
			
				|  |  | +                    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: 'sendNum',
 | 
	
		
			
				|  |  | +                        width: 100,
 | 
	
		
			
				|  |  | +                        overHidden: true,
 | 
	
		
			
				|  |  | +                    },
 | 
	
		
			
				|  |  | +                    {
 | 
	
		
			
				|  |  | +                        label: '出库金额',
 | 
	
		
			
				|  |  | +                        prop: 'sendNumAmount',
 | 
	
		
			
				|  |  | +                        width: 100,
 | 
	
		
			
				|  |  | +                        overHidden: true,
 | 
	
		
			
				|  |  | +                    },
 | 
	
		
			
				|  |  | +                    {
 | 
	
		
			
				|  |  | +                        label: '自有数',
 | 
	
		
			
				|  |  | +                        prop: 'sendNumHave',
 | 
	
		
			
				|  |  | +                        width: 100,
 | 
	
		
			
				|  |  | +                        overHidden: true,
 | 
	
		
			
				|  |  | +                    },
 | 
	
		
			
				|  |  | +                    {
 | 
	
		
			
				|  |  | +                        label: '自有金额',
 | 
	
		
			
				|  |  | +                        prop: 'sendNumHaveAmount',
 | 
	
		
			
				|  |  | +                        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>
 |