tire-platform-ui/src/views/iosBasicData/financeProfit/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"
            @search-change="searchChange" @search-reset="searchReset" @current-change="currentChange"
            @size-change="sizeChange" @refresh-change="refreshChange"
            @resetColumn="resetColumnTwo('crud', 'option', 'optionBack', 336)"
            @saveColumn="saveColumnTwo('crud', 'option', 'optionBack', 336)" @on-load="onLoad">
            <template slot="menuLeft">
                <el-button type="success" size="small" plain @click="exportfun">导出</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="billTypeSearch">
                <avue-input-tree :check-strictly="true" :tags="true" tags multiple v-model="query.billType"
                    placeholder="请选择业务类型" :dic="billTypeData" :style="{ width: '100%' }">
                </avue-input-tree>
            </template>
            <template slot="carrierCnNameSearch">
                <search-query :datalist="carrierData" :selectValue="query.carrierId" :filterable="true" :remote="true"
                    :clearable="true" :buttonIf="false" :forParameter="{ key: 'id', label: 'cnName', value: 'id' }"
                    @remoteMethod="carrierBcorpsListfun" @corpFocus="carrierBcorpsListfun"
                    @corpChange="corpChange($event, 'carrierId')">
                </search-query>
            </template>
            <template slot-scope="{disabled,size}" slot="clientSearch">
                <search-query :datalist="clientData" :selectValue="query.client" :filterable="true" :remote="true"
                    :clearable="true" :buttonIf="false" :forParameter="{ key: 'id', label: 'cnName', value: 'cnName' }"
                    @remoteMethod="clientListfun" @corpFocus="clientListfun" @corpChange="corpChange($event, 'client')">
                </search-query>
            </template>
            <template slot-scope="{disabled,size}" slot="corpNameSearch">
                <search-query :datalist="corpIdData" :selectValue="query.corpId" :filterable="true" :remote="true"
                    :clearable="true" :buttonIf="false" :forParameter="{ key: 'id', label: 'cnName', value: 'id' }"
                    @remoteMethod="getBcorpsListfun" @corpFocus="getBcorpsListfun"
                    @corpChange="corpChange($event, 'corpId')">
                </search-query>
            </template>
            <template slot="vesselCnNameSearch">
                <search-query :datalist="vesselData" :selectValue="query.vesselId" :filterable="true" :clearable="true"
                    :remote="true" :buttonIf="false" placeholder="请选择船名"
                    :forParameter="{ key: 'id', label: 'cnName', value: 'id' }" @remoteMethod="vesselBvesselsListfun"
                    @corpFocus="vesselBvesselsListfun" @corpChange="corpChange($event, 'vesselId')">
                </search-query>
            </template>
            <template slot-scope="{disabled,size}" slot="srcTypeSearch">
                <search-query :datalist="srcTypeData" :selectValue="query.srcType" :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="salesmanSearch">
                <search-query :datalist="srcIdData" :selectValue="query.srcId" :filterable="true" :remote="true"
                    :clearable="true" :buttonIf="false" :forParameter="srcforParameter" @remoteMethod="srcCorpFocus"
                    @corpFocus="srcCorpFocus" @corpChange="corpChange($event, 'srcId')">
                </search-query>
            </template>
            <template slot-scope="{disabled,size}" slot="accDeptNameSearch">
                <tree-select v-model="query.accDeptName" filterable :data="accDeptData"
                    :props="{ label: 'title', children: 'children' }" nodeKey="title" size="small" :multiple="false"
                    @input="corpChange($event, 'accDeptName')">
                </tree-select>
            </template>
            <template slot="lineCnNameSearch">
                <search-query :datalist="lineData" :selectValue="query.lineId" :filterable="true" :clearable="true"
                    :remote="true" :buttonIf="false" :forParameter="{ key: 'id', label: 'cnName', value: 'id' }"
                    placeholder="请选择航线" @remoteMethod="lineBlinesListfun" @corpFocus="lineBlinesListfun"
                    @corpChange="corpChange($event, 'lineId')">
                </search-query>
            </template>
            <template slot="costMergeSearch">
                <el-radio v-model="query.costMerge" :label="1" @input="radioSearchfun('costMerge')">单票费用合并</el-radio>
                <el-radio v-model="query.consistentCorpMerge" :label="1"
                    @input="radioSearchfun('consistentCorpMerge')">相同业务客户合并</el-radio>
                <el-radio v-model="query.inconsistentCorpMerge" :label="1"
                    @input="radioSearchfun('inconsistentCorpMerge')">不同业务客户合并</el-radio>
                <el-checkbox v-model="query.examine" :true-label="1" :false-label="0">只显示整票审核业务</el-checkbox>
                <el-checkbox v-model="query.mergeAmendFee" :true-label="1" :false-label="0">合并amend费用</el-checkbox>
                <el-checkbox v-model="query.examineDate" :true-label="1" :false-label="0">按审核日期</el-checkbox>
            </template>
        </avue-crud>
    </basic-container>
</template>

<script>
import { defaultDate3 } from "@/util/date";
import { financeStatisticsFinanceProfit, financeStatisticsFinanceProfitSum } from "@/api/iosBasicData/paymentSummary";
import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
import { getBcorpsList, getBcorpslistByType } from "@/api/iosBasicData/bcorps";
import { getBvesselsList } from "@/api/iosBasicData/bvessels";
import { getWorkDicts } from "@/api/system/dictbiz";
import { getDeptLazyTree, getDeptTree } from "@/api/system/dept";
import { getList as userGetList } from '@/api/system/user'
import TreeSelect from "@/components/iosbasic-data/TreeSelect.vue";
import { blinesList } from "@/api/iosBasicData/blines";
import { getToken } from "@/util/auth";

export default {
    components: { TreeSelect, SearchQuery },
    data() {
        return {
            form: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            query: {
                billType: 'SE,SI',
                costMerge: 1,
                statisticsDateStart: defaultDate3()[0],
                statisticsDateEnd: defaultDate3()[1],
            },
            option: {},
            optionBack: {
                height: 'auto',
                calcHeight: 30,
                tip: false,
                searchShow: true,
                searchMenuSpan: 24,
                border: true,
                index: false,
                selection: true,
                dialogClickModal: false,
                menu: false,
                addBtn: false,
                viewBtn: false,
                delBtn: false,
                editBtn: false,
                searchIcon: true,
                searchIndex: 3,
                emptyBtnText: '清空所有条件',
                showSummary: true,
                summaryText: "合计",
                sumColumnList: [
                    {
                        name: 'amountDrUsd',
                        type: 'sum',
                        decimals: 2
                    }, {
                        name: 'realAmountDrUsd',
                        type: 'sum',
                        decimals: 2
                    }, {
                        name: 'amountDr',
                        type: 'sum',
                        decimals: 2
                    }, {
                        name: 'realAmountDr',
                        type: 'sum',
                        decimals: 2
                    }, {
                        name: 'amountDrLoc',
                        type: 'sum',
                        decimals: 2
                    }, {
                        name: 'realAmountDrLoc',
                        type: 'sum',
                        decimals: 2
                    }, {
                        name: 'amountCrUsd',
                        type: 'sum',
                        decimals: 2
                    }, {
                        name: 'realAmountCrUsd',
                        type: 'sum',
                        decimals: 2
                    }, {
                        name: 'amountCr',
                        type: 'sum',
                        decimals: 2
                    }, {
                        name: 'realAmountCr',
                        type: 'sum',
                        decimals: 2
                    }, {
                        name: 'amountCrLoc',
                        type: 'sum',
                        decimals: 2
                    }, {
                        name: 'realAmountCrLoc',
                        type: 'sum',
                        decimals: 2
                    }, {
                        name: 'amountProfitLoc',
                        type: 'sum',
                        decimals: 2
                    }, {
                        name: 'realAmountProfitLoc',
                        type: 'sum',
                        decimals: 2
                    }, {
                        name: 'notReceivedDrUsd',
                        type: 'sum',
                        decimals: 2
                    }, {
                        name: 'notReceivedDr',
                        type: 'sum',
                        decimals: 2
                    }, {
                        name: 'notReceivedLoc',
                        type: 'sum',
                        decimals: 2
                    }],
                column: [
                    {
                        label: "业务类型",
                        prop: "billType",
                        overHidden: true,
                        search: true,
                        searchslot: true,
                        searchOrder: 1,
                        type: 'select',
                        dicData: [],
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                    },
                    {
                        label: "业务编号",
                        prop: "billNo",
                        overHidden: true,
                        search: true,
                        searchOrder: 11
                    },
                    {
                        label: "H B/L",
                        prop: "hblNo",
                        overHidden: true,
                    },
                    {
                        label: "M B/L",
                        prop: "mblNo",
                        search: true,
                        overHidden: true,
                        searchOrder: 12
                    },
                    {
                        label: "往来单位",
                        prop: "corpName",
                        overHidden: true,
                        search: true,
                        searchslot: true,
                        searchOrder: 4
                    },
                    {
                        label: "统计开始",
                        prop: "statisticsDateStart",
                        overHidden: true,
                        search: true,
                        hide: true,
                        searchOrder: 7,
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                    },
                    {
                        label: "统计结束",
                        prop: "statisticsDateEnd",
                        overHidden: true,
                        search: true,
                        hide: true,
                        searchOrder: 8,
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                    },
                    {
                        label: "业务员",
                        prop: "salesman",
                        overHidden: true,
                        search: true,
                        searchslot: true,
                        searchOrder: 10
                    },
                    {
                        label: "起运港",
                        prop: "pol",
                        overHidden: true,
                    },
                    {
                        label: "目的港",
                        prop: "pod",
                        overHidden: true,
                    },
                    {
                        label: "船名",
                        prop: "vesselCnName",
                        overHidden: true,
                        search: true,
                        searchslot: true,
                        searchOrder: 5
                    },
                    {
                        label: "航次",
                        prop: "voyageNo",
                        overHidden: true,
                        search: true,
                        searchslot: true,
                        searchOrder: 6
                    },
                    {
                        label: "核算部门",
                        prop: "accDeptName",
                        overHidden: true,
                        search: true,
                        searchslot: true,
                        searchOrder: 12
                    },
                    {
                        label: "航线",
                        prop: "lineCnName",
                        overHidden: true,
                        search: true,
                        searchslot: true,
                        searchOrder: 13
                    },
                    {
                        label: "船公司",
                        prop: "carrierCnName",
                        overHidden: true,
                        search: true,
                        searchslot: true,
                        searchOrder: 2
                    },
                    {
                        label: "操作员",
                        prop: "operatorName",
                        overHidden: true,
                    },
                    {
                        label: "应收美元",
                        prop: "amountDrUsd",
                        overHidden: true,
                    },
                    {
                        label: "实收美元",
                        prop: "realAmountDrUsd",
                        overHidden: true,
                    },
                    {
                        label: "应收人民币",
                        prop: "amountDr",
                        overHidden: true,
                    },
                    {
                        label: "实收人民币",
                        prop: "realAmountDr",
                        overHidden: true,
                    },
                    {
                        label: "合计应收",
                        prop: "amountDrLoc",
                        overHidden: true,
                    },
                    {
                        label: "实际合计应收",
                        prop: "realAmountDrLoc",
                        overHidden: true,
                    },
                    {
                        label: "未收美元",
                        prop: "notReceivedDrUsd",
                        overHidden: true,
                    },
                    {
                        label: "未收人民币",
                        prop: "notReceivedDr",
                        overHidden: true,
                    },
                    {
                        label: "未收合计",
                        prop: "notReceivedLoc",
                        overHidden: true,
                    },
                    {
                        label: "应付美元",
                        prop: "amountCrUsd",
                        overHidden: true,
                    },
                    {
                        label: "实付美元",
                        prop: "realAmountCrUsd",
                        overHidden: true,
                    },
                    {
                        label: "应付人民币",
                        prop: "amountCr",
                        overHidden: true,
                    },
                    {
                        label: "实付人民币",
                        prop: "realAmountCr",
                        overHidden: true,
                    },
                    {
                        label: "合计应付",
                        prop: "amountCrLoc",
                        overHidden: true,
                    },
                    {
                        label: "实际合计应付",
                        prop: "realAmountCrLoc",
                        overHidden: true,
                    },
                    {
                        label: "单票利润",
                        prop: "amountProfitLoc",
                        overHidden: true,
                    },
                    {
                        label: "实际单票利润",
                        prop: "realAmountProfitLoc",
                        overHidden: true,
                    },
                    // {
                    //     label: "委托人",
                    //     prop: "client",
                    //     overHidden: true,
                    //     hide: true,
                    //     search: true,
                    //     searchslot: true,
                    //     searchOrder: 3
                    // },
                    {
                        label: "业务来源",
                        prop: "srcType",
                        overHidden: true,
                        hide: true,
                        search: true,
                        searchslot: true,
                        searchOrder: 9
                    },
                    {
                        label: "",
                        prop: "costMerge",
                        hide: true,
                        search: true,
                        searchslot: true,
                        searchLabelWidth: '0',
                        searchOrder: 14,
                        searchSpan: 18,
                    },
                ]
            },
            data: [],
            // 业务类型数据
            billTypeData: [],
            // 船公司数据
            carrierData: [],
            // 委托人数据
            clientData: [],
            // 结算等单位
            corpIdData: [],
            // 船名
            vesselData: [],
            srcTypeData: [], // 业务来源
            srcIdData: [], // 业务员
            srcforParameter: { key: 'id', label: 'cnName', value: 'id' },
            accDeptData: [], // 部门数据
            lineData: [], // 航线数据
            commodityData: [], // 合计数据
            // 合计的配置项
            commodityLabel: [
                {
                    id: 4,
                    label: '应收人民币',
                    prop: 'amountDr'
                },
                {
                    id: 5,
                    label: '应收美元',
                    prop: 'amountDrUsd'
                },
                {
                    id: 6,
                    label: '合计应收',
                    prop: 'amountDrLoc'
                },
                {
                    id: 10,
                    label: '实收人民币',
                    prop: 'realAmountDr'
                },
                {
                    id: 11,
                    label: '实收美元',
                    prop: 'realAmountDrUsd'
                },
                {
                    id: 12,
                    label: '实收合计',
                    prop: 'realAmountDrLoc'
                },
                {
                    id: 1,
                    label: '应付人民币',
                    prop: 'amountCr'
                },
                {
                    id: 2,
                    label: '应付美元',
                    prop: 'amountCrUsd'
                },
                {
                    id: 3,
                    label: '合计应付',
                    prop: 'amountCrLoc'
                },
                {
                    id: 7,
                    label: '实付人民币',
                    prop: 'realAmountCr'
                },
                {
                    id: 8,
                    label: '实付美元',
                    prop: 'realAmountCrUsd'
                },
                {
                    id: 9,
                    label: '实付合计',
                    prop: 'realAmountCrLoc'
                },
                {
                    id: 13,
                    label: '单票利润',
                    prop: 'amountProfitLoc'
                },
                {
                    id: 14,
                    label: '实际单票利润',
                    prop: 'realAmountProfitLoc'
                },
            ],
        }
    },
    async created() {
        this.option = await this.getColumnData(this.getColumnName(336), this.optionBack);
        this.query = {
            billType: 'SE,SI',
            costMerge: 1,
            statisticsDateStart: defaultDate3()[0],
            statisticsDateEnd: defaultDate3()[1],
        }
        this.getWorkDictsfun()
        this.getLazylistfun() // 获取部门数据
    },
    methods: {
        // 导出
        exportfun() {
            const routeData = this.$router.resolve({
                path: '/api/blade-los/financeStatistics/financeProfitExport',//跳转目标窗口的地址
                query: {
                    ...this.query
                }
            })
            window.open(routeData.href.slice(1, routeData.href.length) + '&' + `${this.website.tokenHeader}=${getToken()}`);
        },
        // 获取字典数据
        getWorkDictsfun() {
            // 获取业务类型
            getWorkDicts('profit_business_type_los').then(res => {
                this.findObject(this.option.column, "billType").dicData = res.data.data
                this.billTypeData = res.data.data.map(item => {
                    return { label: item.dictValue, value: item.dictKey }
                })
            })
        },
        // 单选
        radioSearchfun(name) {
            if (name == 'costMerge') {
                this.$set(this.query, 'consistentCorpMerge', null)
                this.$set(this.query, 'inconsistentCorpMerge', null)
            } else if (name == 'consistentCorpMerge') {
                this.$set(this.query, 'inconsistentCorpMerge', null)
                this.$set(this.query, 'costMerge', null)
            } else if (name == 'inconsistentCorpMerge') {
                this.$set(this.query, 'costMerge', null)
                this.$set(this.query, 'consistentCorpMerge', null)
            }

            this.page.currentPage = 1;
            this.onLoad(this.page, this.query);
        },
        // 业务员下拉
        srcCorpFocus(value, name) {
            if (this.query.srcType == 'SALES') {
                // 业务员
                this.srcforParameter = { key: 'id', label: 'name', value: 'id' }
                this.salesUserGetListfun(value, '业务员')
            } else if (this.form.srcType == 'AGENT') {
                // 代理
                this.srcforParameter = { key: 'id', label: 'cnName', value: 'id' }
                this.agentBcorpsListfun(value)
            } else if (this.form.srcType == 'OWN') {
                // 公司
                this.srcforParameter = { key: 'id', label: 'title', value: 'id' }
                this.ownDeptLazyTreefun()
            } else { }
        },
        // 下拉
        corpChange(value, name) {
            if (name == 'srcType') {
                if (value == 'OWN') {
                    // 公司
                    this.srcforParameter = { key: 'id', label: 'title', value: 'id' }
                    this.ownDeptLazyTreefun()
                } else if (value == 'AGENT') {
                    // 代理
                    this.srcforParameter = { key: 'id', label: 'cnName', value: 'id' }
                    this.agentBcorpsListfun()
                } else if (value == 'SALES') {
                    // 业务员
                    this.srcforParameter = { key: 'id', label: 'name', value: 'id' }
                    this.salesUserGetListfun('', '业务员')
                } else { }
                this.$set(this.query, name, value)
            } else if (name == 'accDeptName') {
                for (let item of this.accDeptData) {
                    if (item.title == value) {
                        this.$set(this.query, 'accDeptName', item.title)
                        this.$set(this.query, 'accDeptId', item.id)
                    }
                }
            } else {
                this.$set(this.query, name, value)
            }
        },
        // 接口
        // 船公司
        carrierBcorpsListfun(cnName) {
            let corpTypeName = '船公司'
            getBcorpslistByType(1, 10, { cnName, corpTypeName, status: 0 }).then(res => {
                this.carrierData = res.data.data.records
            })
        },
        // 委托人
        clientListfun(cnName) {
            getBcorpsList(1, 10, { cnName, status: 0 }).then(res => {
                this.clientData = res.data.data.records
            })
        },
        // 结算单位
        getBcorpsListfun(cnName) {
            getBcorpsList(1, 10, { cnName, status: 0 }).then(res => {
                this.corpIdData = res.data.data.records
            })
        },
        // 船名
        vesselBvesselsListfun(cnName) {
            getBvesselsList(1, 10, { cnName, status: 0 }).then(res => {
                this.vesselData = 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, role) {
            console.info('account-----', account)
            userGetList(1, 10, { account: account, roleId: role }).then(res => {
                this.srcIdData = res.data.data.records
            })
        },
        // 获取核算部门数据
        getLazylistfun() {
            getDeptTree().then(res => {
                this.accDeptData = res.data.data
            })
        },
        // 航线数据
        lineBlinesListfun(cnName) {
            blinesList(1, 10, { cnName, status: 0 }).then(res => {
                this.lineData = res.data.data.records
            })
        },
        // 清空搜索回调方法
        searchReset() {
            this.query = {
                billType: 'SE,SI',
                costMerge: 1,
                statisticsDateStart: null,
                statisticsDateEnd: null,
                mergeAmendFee: 0,
                examine: 0,
                examineDate: 0
            };
            this.onLoad(this.page);
        },
        // 搜索
        searchChange(params, done) {
            this.query = params;
            this.page.currentPage = 1;
            this.onLoad(this.page, params);
            done();
        },
        currentChange(currentPage) {
            this.page.currentPage = currentPage;
        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
        },
        refreshChange() {
            this.onLoad(this.page, this.query);
        },
        onLoad(page, params = {}) {
            this.loading = true;
            if (Array.isArray(this.query.billType)) {
                this.query.billType = this.query.billType.join(',')
            }
            financeStatisticsFinanceProfit(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;
                financeStatisticsFinanceProfitSum(Object.assign(params, this.query)).then(re => {
                    this.commodityData = [re.data.data]
                })
                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 (inSave) {
                this.$message.success("重置成功");
                this.$refs[ref].$refs.dialogColumn.columnBox = false;
                this.query = {
                    billType: 'SE,SI',
                    costMerge: 1,
                    statisticsDateStart: defaultDate3()[0],
                    statisticsDateEnd: defaultDate3()[1],
                }
            }
        },
        // 更改表格颜色
        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;
}

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