yf-admin-ui/src/views/iosBasicData/paymentSummary/index.vue

<template>
    <basic-container>
        <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" :search.sync="query"
            v-model="form" ref="crud" id="out-table" :header-cell-class-name="headerClassName"
            @selection-change="selectionChange" @search-change="searchChange" @search-reset="searchReset"
            @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange"
            @resetColumn="resetColumnTwo('crud', 'option', 'optionBack', 332)"
            @saveColumn="saveColumnTwo('crud', 'option', 'optionBack', 332)" @on-load="onLoad">
            <template slot="menuLeft">
                <el-button type="success" size="small" plain @click="exportfun">导出</el-button>
                <el-button type="primary" size="small" plain>打印报表</el-button>
                <el-button type="info" size="small" plain @click="designReportStart">设计报表</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-scope="{disabled,size}" slot="dcSearch">
                <el-radio v-model="query.dc" label="D" @input="dcInput">应收</el-radio>
                <el-radio v-model="query.dc" label="C" @input="dcInput">应付</el-radio>
            </template>
            <template slot-scope="{disabled,size}" slot="typeSearch">
                <search-query :datalist="typeData" :selectValue="query.type" :buttonIf="false"
                    @corpChange="corpChange($event, 'type')">
                </search-query>
            </template>
            <template slot-scope="{disabled,size}" slot="businessTypeSearch">
                <search-query :datalist="businessTypeData" :selectValue="query.businessType" :clearable="true"
                    :buttonIf="false" :forParameter="{ key: 'dictKey', label: 'dictValue', value: 'dictKey' }"
                    @corpFocus="businessTypeFocus" @corpChange="corpChange($event, 'businessType')">
                </search-query>
            </template>
            <template slot-scope="{disabled,size}" slot="clientIdSearch">
                <search-query :datalist="clientIdData" :selectValue="query.clientName" :filterable="true" :remote="true"
                    :clearable="true" :disabled="query.type != 2" :buttonIf="false"
                    :forParameter="{ key: 'id', label: 'cnName', value: 'cnName' }" @remoteMethod="clientIdListfun"
                    @corpFocus="clientIdListfun" @corpChange="corpChange($event, 'clientName')">
                </search-query>
            </template>
            <template slot-scope="{disabled,size}" slot="corpIdSearch">
                <search-query :datalist="corpIdData" :selectValue="query.corpName" :disabled="query.type != 1"
                    :filterable="true" :remote="true" :clearable="true" :buttonIf="false"
                    :forParameter="{ key: 'id', label: 'cnName', value: 'cnName' }" @remoteMethod="getBcorpsListfun"
                    @corpFocus="getBcorpsListfun" @corpChange="corpChange($event, 'corpName')">
                </search-query>
            </template>
            <template slot-scope="{disabled,size}" slot="srcTypeSearch">
                <search-query :datalist="srcTypeData" :selectValue="query.srcType" :disabled="query.type != 3"
                    :clearable="true" :buttonIf="false"
                    :forParameter="{ key: 'dictKey', label: 'dictValue', value: 'dictKey' }"
                    @corpFocus="srcTypeWorkDictsfun" @corpChange="corpChange($event, 'srcType')">
                </search-query>
            </template>
            <template slot-scope="{disabled,size}" slot="srcIdSearch">
                <search-query :datalist="srcIdData" :selectValue="query.srcName" :disabled="query.type != 3"
                    :filterable="true" :remote="true" :clearable="true" :buttonIf="false"
                    :forParameter="srcforParameter" @remoteMethod="srcCorpFocus" @corpFocus="srcCorpFocus"
                    @corpChange="corpChange($event, 'srcName')">
                </search-query>
            </template>
            <template slot-scope="{disabled,size}" slot="isBusinessDateSearch">
                <el-checkbox v-model="query.isBusinessDate" :true-label="1" :false-label="0"
                    @change="dateChange('isBusinessDate')">按业务日期</el-checkbox>
                <el-checkbox v-model="query.isToExamineDate" :true-label="1" :false-label="0"
                    @change="dateChange('isToExamineDate')">按审核日期</el-checkbox>
            </template>

        </avue-crud>

        <!--设计报表弹窗-->
        <el-dialog append-to-body title="设计报表" class="el-dialogDeep" :visible.sync="DesignreportDialog" width="70%"
            :close-on-click-modal="false" :destroy-on-close="true" :close-on-press-escape="false" v-dialog-drag>
            <reports :id="form.id" :assemblyForm="form" businessValue="JCFX" classifyCode="SFHZ"></reports>
        </el-dialog>

    </basic-container>
</template>

<script>
import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
import { startDate, endDate } from "@/util/date";
import { financeStatisticsFeeSummary, financeStatisticsFeeSummarySum } from "@/api/iosBasicData/paymentSummary"
import { getBcorpsList, getBcorpslistByType } from "@/api/iosBasicData/bcorps";
import { getWorkDicts } from "@/api/system/dictbiz";
import { getDeptLazyTree } from "@/api/system/dept";
import { getList as userGetList } from '@/api/system/user'
import { getToken } from "@/util/auth";
import reports from "@/views/iosBasicData/SeafreightExportF/bills/assembly/reports.vue";

export default {
    components: { reports, SearchQuery },
    data() {
        return {
            DesignreportDialog: false, // 设计报表弹窗
            printingDialog: false, // 打印弹窗
            form: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            query: {
                dc: 'D',
                isBusinessDate: 1,
                isToExamineDate: 0,
                type: '1',
                etdStart: startDate(),
                etdEnd: endDate(),
            },
            option: {},
            optionBack: {
                height: 'auto',
                calcHeight: 30,
                tip: false,
                searchShow: true,
                searchMenuSpan: 12,
                border: true,
                index: false,
                selection: true,
                dialogClickModal: false,
                menu: false,
                addBtn: false,
                viewBtn: false,
                delBtn: false,
                editBtn: false,
                searchIcon: true,
                searchIndex: 3,
                emptyBtnText: '清空所有条件',
                column: [
                    {
                        label: "所属公司",
                        prop: "branchId",
                        width: "120",
                        overHidden: true,
                        // hide: true,
                        // showColumn: false,
                        type: "select",
                        filterable: true,
                        dicUrl: "/api/blade-system/dept/lazy-list",
                        props: {
                            label: "deptName",
                            value: "id",
                        },
                        search: false,
                    },
                    // {
                    //     label: "所属公司",
                    //     prop: "branchId",
                    //     width: "120",
                    //     overHidden: true,
                    // },
                    {
                        label: "结算单位",
                        prop: "corpName",
                        overHidden: true,
                    },
                    {
                        label: "查询方式",
                        prop: "type",
                        hide: true,
                        search: true,
                        type: 'select',
                        searchslot: true,
                    },
                    {
                        label: "业务类型",
                        prop: "businessType",
                        hide: true,
                        search: true,
                        searchslot: true,
                    },
                    {
                        label: "统计开始",
                        prop: "etdStart",
                        search: true,
                        overHidden: true,
                        hide: true,
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                    },
                    {
                        label: "统计结束",
                        prop: "etdEnd",
                        search: true,
                        overHidden: true,
                        hide: true,
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                    },
                    {
                        label: "应收美金",
                        prop: "amountUsd",
                        overHidden: true,
                    },
                    {
                        label: "应收人民币",
                        prop: "amount",
                        overHidden: true,
                    },
                    {
                        label: "已收款美金",
                        prop: "amountUsdAlready",
                        overHidden: true,
                    },
                    {
                        label: "已收款人民币",
                        prop: "amountAlready",
                        overHidden: true,
                    },
                    {
                        label: "未收款美金",
                        prop: "amountUsdNot",
                        overHidden: true,
                    },
                    {
                        label: "未收款人民币",
                        prop: "amountNot",
                        overHidden: true,
                    },
                    {
                        label: "委托人",
                        prop: "clientId",
                        hide: true,
                        search: true,
                        searchslot: true,
                    },
                    {
                        label: "结算单位",
                        prop: "corpId",
                        hide: true,
                        search: true,
                        searchslot: true,
                    },
                    {
                        label: "业务来源",
                        prop: "srcType",
                        hide: true,
                        search: true,
                        searchslot: true,
                    },
                    {
                        label: "业务员",
                        prop: "srcId",
                        hide: true,
                        search: true,
                        searchslot: true,
                    },
                    {
                        label: "",
                        prop: "dc",
                        hide: true,
                        search: true,
                        searchslot: true,
                        searchLabelWidth: '0'
                    },
                    {
                        label: "",
                        prop: "isBusinessDate",
                        hide: true,
                        search: true,
                        searchslot: true,
                        searchLabelWidth: '0'
                    },
                    {
                        label: "",
                        prop: "isToExamineDate",
                        hide: true,
                        searchLabelWidth: '0',
                    },
                ]
            },
            data: [],
            // 查询方式
            typeData: [
                {
                    label: '结算单位',
                    value: '1'
                }, {
                    label: '委托人',
                    value: '2'
                }, {
                    label: '业务来源',
                    value: '3'
                }
            ],
            // 业务类型
            businessTypeData: [],
            clientIdData: [], // 委托人
            corpIdData: [], // 结算单位
            srcTypeData: [], // 业务来源
            srcIdData: [], // 业务员
            srcforParameter: { key: 'id', label: 'cnName', value: 'cnName' },
            selectionList: [], // 多选数据
            commodityData: [], // 合计数据
            // 合计的配置项
            commodityLabel: [
                {
                    id: 1,
                    label: '应收美元',
                    prop: 'amountUsd'
                },
                {
                    id: 2,
                    label: '应收人民币',
                    prop: 'amount'
                },
                {
                    id: 3,
                    label: "已收款美金",
                    prop: "amountUsdAlready",
                },
                {
                    id: 4,
                    label: "已收款人民币",
                    prop: "amountAlready",
                },
                {
                    id: 5,
                    label: "未收款美金",
                    prop: "amountUsdNot",
                },
                {
                    id: 6,
                    label: "未收款人民币",
                    prop: "amountNot",
                },
            ],
            saberUserInfo: {}
        }
    },
    async created() {
        this.saberUserInfo = JSON.parse(
            localStorage.getItem("saber-userInfo")
        ).content;
        this.option = await this.getColumnData(this.getColumnName(332), this.optionBack);
        this.query = {
            dc: 'D',
            isBusinessDate: 1,
            isToExamineDate: 0,
            type: '1',
            etdStart: startDate(),
            etdEnd: endDate(),
        }
        if (this.saberUserInfo.role_name.indexOf('admin') != -1 || this.saberUserInfo.role_name.indexOf('总部') != -1) {
            this.option.searchMenuSpan = 6
            this.option.column.forEach(item => {
                if (item.prop == 'branchId') {
                    item.search = true
                }
            })
        }
    },
    methods: {
        // 设计报表
        designReportStart() {
            this.DesignreportDialog = true
            // this.selectionList
            if (this.selectionList.length == 0) {
                return this.$message.warning('请选择一条数据')
            } else {

            }
        },
        // 导出
        exportfun() {
            const routeData = this.$router.resolve({
                path: '/api/blade-los/financeStatistics/feeSummaryExport',//跳转目标窗口的地址
                query: {
                    ...this.query
                }
            })
            window.open(routeData.href.slice(1, routeData.href.length) + '&' + `${this.website.tokenHeader}=${getToken()}`);
        },
        // 下拉监听
        corpChange(value, name) {
            if (name == 'type') {
                if (value == 1) {
                    this.$set(this.query, 'clientId', null)
                    this.$set(this.query, 'clientName', null)
                    this.$set(this.query, 'srcType', null)
                    this.$set(this.query, 'srcId', null)
                    this.$set(this.query, 'srcName', null)
                    this.findObject(this.option.column, "corpName").label = '结算单位'
                } else if (value == 2) {
                    this.$set(this.query, 'corpId', null)
                    this.$set(this.query, 'corpName', null)
                    this.$set(this.query, 'srcType', null)
                    this.$set(this.query, 'srcId', null)
                    this.$set(this.query, 'srcName', null)
                    this.findObject(this.option.column, "corpName").label = '委托人'
                } else if (value == 3) {
                    this.$set(this.query, 'corpId', null)
                    this.$set(this.query, 'corpName', null)
                    this.$set(this.query, 'clientId', null)
                    this.$set(this.query, 'clientName', null)
                    this.findObject(this.option.column, "corpName").label = '业务来源'
                }
                this.$set(this.query, name, value)
            } else if (name == 'corpName') {
                for (let item of this.corpIdData) {
                    if (item.cnName == value) {
                        this.$set(this.query, 'corpId', item.id)
                        this.$set(this.query, 'corpName', item.cnName)
                    }
                }
            } else if (name == 'clientName') {
                for (let item of this.clientIdData) {
                    if (item.cnName == value) {
                        this.$set(this.query, 'clientId', item.id)
                        this.$set(this.query, 'clientName', item.cnName)
                    }
                }
            } else if (name == 'srcType') {
                if (value == 'OWN') {
                    // 公司
                    this.srcforParameter = { key: 'id', label: 'title', value: 'title' }
                    this.findObject(this.option.column, "srcId").label = '公司'
                    this.ownDeptLazyTreefun()
                } else if (value == 'AGENT') {
                    // 代理
                    this.srcforParameter = { key: 'id', label: 'cnName', value: 'cnName' }
                    this.findObject(this.option.column, "srcId").label = '代理'
                    this.agentBcorpsListfun()
                } else if (value == 'SALES') {
                    // 业务员
                    this.srcforParameter = { key: 'id', label: 'name', value: 'name' }
                    this.findObject(this.option.column, "srcId").label = '业务员'
                    this.salesUserGetListfun()
                } else { }
                this.$set(this.query, name, value)
            } else if (name == 'srcName') {
                for (let item of this.srcIdData) {
                    if (item[this.srcforParameter.value] == value) {
                        if (this.query.srcType == 'SALES') {
                            // 业务员
                            this.$set(this.query, 'srcId', item.id)
                            this.$set(this.query, 'srcName', item.name)
                        } else if (this.form.srcType == 'AGENT') {
                            // 代理
                            this.$set(this.query, 'srcId', item.id)
                            this.$set(this.query, 'srcName', item.cnName)
                        } else {
                            this.$set(this.query, 'srcId', item.id)
                            this.$set(this.query, 'srcName', item.title)
                        }
                    }
                }
            }
            this.$set(this.query, name, value)
        },
        // 业务员下拉
        srcCorpFocus(value, name) {
            if (this.query.srcType == 'SALES') {
                // 业务员
                this.srcforParameter = { key: 'id', label: 'name', value: 'name' }
                this.salesUserGetListfun(value)
            } else if (this.form.srcType == 'AGENT') {
                // 代理
                this.srcforParameter = { key: 'id', label: 'cnName', value: 'cnName' }
                this.agentBcorpsListfun(value)
            } else if (this.form.srcType == 'OWN') {
                // 公司
                this.srcforParameter = { key: 'id', label: 'title', value: 'title' }
                this.ownDeptLazyTreefun()
            } else { }
        },
        // 多选切换
        dateChange(name) {
            if (name == 'isBusinessDate') {
                this.$set(this.query, 'isToExamineDate', 0)
                this.$set(this.query, 'isBusinessDate', 1)
            }
            if (name == 'isToExamineDate') {
                this.$set(this.query, 'isBusinessDate', 0)
                this.$set(this.query, 'isToExamineDate', 1)
            }
            this.page.currentPage = 1;
            this.onLoad(this.page, this.query);
        },
        // 收付单选
        dcInput() {
            let dcName = ''
            if (this.query.dc == 'D') {
                dcName = '收'
            } else {
                dcName = '付'
            }
            this.findObject(this.option.column, "amountUsd").label = `应${dcName}美金`
            this.findObject(this.option.column, "amount").label = `应${dcName}人民币`
            this.findObject(this.option.column, "amountUsdAlready").label = `已${dcName}款美金`
            this.findObject(this.option.column, "amountAlready").label = `已${dcName}款人民币`
            this.findObject(this.option.column, "amountUsdNot").label = `未${dcName}款美金`
            this.findObject(this.option.column, "amountNot").label = `未${dcName}款人民币`

            this.findObject(this.commodityLabel, "amountUsd").label = `应${dcName}美金`
            this.findObject(this.commodityLabel, "amount").label = `应${dcName}人民币`
            this.findObject(this.commodityLabel, "amountUsdAlready").label = `已${dcName}款美金`
            this.findObject(this.commodityLabel, "amountAlready").label = `已${dcName}款人民币`
            this.findObject(this.commodityLabel, "amountUsdNot").label = `未${dcName}款美金`
            this.findObject(this.commodityLabel, "amountNot").label = `未${dcName}款人民币`

            this.page.currentPage = 1;
            this.onLoad(this.page, this.query);
        },
        // 接口获取数据
        // 结算单位
        getBcorpsListfun(cnName) {
            getBcorpsList(1, 10, { cnName, status: 0 }).then(res => {
                this.corpIdData = res.data.data.records
            })
        },
        // 业务类型
        businessTypeFocus() {
            getWorkDicts('profit_business_type_los').then(res => {
                this.businessTypeData = res.data.data
            })
        },
        // 委托人
        clientIdListfun(cnName) {
            getBcorpsList(1, 10, { cnName, status: 0 }).then(res => {
                this.clientIdData = res.data.data.records
            })
        },
        // 获取业务来源数据
        srcTypeWorkDictsfun() {
            getWorkDicts('src_type_los').then(res => {
                this.srcTypeData = res.data.data
            })
        },
        // 获取公司名称 用户管理左侧
        ownDeptLazyTreefun() {
            getDeptLazyTree(0).then(res => {
                this.srcIdData = res.data.data
            })
        },
        // 获取业务来源代理数据
        agentBcorpsListfun(cnName) {
            let corpTypeName = '国内直接客户,国内同行及代理,国外直接客户,国外同行及代理'
            getBcorpslistByType(1, 10, { cnName, status: 0, corpTypeName }).then(res => {
                this.srcIdData = res.data.data.records
            })
        },
        // 获取业务来源业务员数据
        salesUserGetListfun(account) {
            userGetList(1, 10, { account }).then(res => {
                this.srcIdData = res.data.data.records
            })
        },
        // 清空搜索回调方法
        searchReset() {
            this.query = {
                dc: 'D',
                isBusinessDate: 1,
                isToExamineDate: 0,
                type: '1',
                etdStart: null,
                etdEnd: null,
            };
            this.onLoad(this.page);
        },
        // 搜索
        searchChange(params, done) {
            this.page.currentPage = 1;
            this.onLoad(this.page, this.query);
            done();
        },
        currentChange(currentPage) {
            this.page.currentPage = currentPage;
        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
        },
        refreshChange() {
            this.onLoad(this.page, this.query);
        },
        // 多选弹窗
        selectionChange(list) {
            this.selectionList = list;
        },
        onLoad(page, params = {}) {
            this.loading = true;
            financeStatisticsFeeSummary(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                const data = res.data.data;
                this.page.total = data.total;
                this.data = data.records;
                this.loading = false;
                financeStatisticsFeeSummarySum(Object.assign(params, this.query)).then(re => {
                    this.commodityData = [re.data.data]
                    this.$nextTick(() => {
                        this.$refs.crud.doLayout();
                        this.$refs.crud.dicInit();
                    });
                })
                this.selectionClear();
            });
        },
        selectionClear() {
            this.$refs.crud.toggleSelection();
        },
        //自定义列保存
        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 (this.saberUserInfo.role_name.indexOf('admin') != -1 || this.saberUserInfo.role_name.indexOf('总部') != -1) {
                this.option.searchMenuSpan = 6
                this.option.column.forEach(item => {
                    if (item.prop == 'branchId') {
                        item.search = true
                    }
                })
            }
            if (inSave) {
                this.$message.success("重置成功");
                this.$refs[ref].$refs.dialogColumn.columnBox = false;
                this.query = {
                    dc: 'D',
                    isBusinessDate: 1,
                    isToExamineDate: 0,
                    type: '1',
                    etdStart: startDate(),
                    etdEnd: endDate(),
                }
            }
        },
        // 更改表格颜色
        headerClassName(tab) {
            //颜色间隔
            let back = ""
            if (tab.columnIndex >= 0 && tab.column.level === 1) {
                if (tab.columnIndex % 2 === 0) {
                    back = "back-one"
                } else if (tab.columnIndex % 2 === 1) {
                    back = "back-two"
                }
            }
            return back;
        },
    }
}
</script>

<style scoped>
::v-deep#out-table .back-one {
    background: #ecf5ff !important;
    text-align: center;
}

::v-deep#out-table .back-two {
    background: #ecf5ff !important;
    text-align: center;
}

::v-deep .el-col-md-8 {
    width: 24.33333%;
}
</style>