Smart_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="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"
                                 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";

    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: 4,
                    border: true,
                    index: false,
                    selection: true,
                    dialogClickModal: false,
                    menu:false,
                    addBtn:false,
                    viewBtn:false,
                    delBtn:false,
                    editBtn:false,
                    searchIcon:true,
                    searchIndex:3,

                    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
                        }],
                    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",
                            overHidden:true,
                        },
                        {
                            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: "pod",
                            overHidden:true,
                        },
                        {
                            label: "目的港",
                            prop: "pol",
                            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: "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:14,
                        },
                    ]
                },
                data:[],
                // 业务类型数据
                billTypeData:[],
                // 船公司数据
                carrierData:[],
                // 委托人数据
                clientData:[],
                // 结算等单位
                corpIdData:[],
                // 船名
                vesselData:[],
                srcTypeData:[], // 业务来源
                srcIdData:[], // 业务员
                srcforParameter:{key:'id', label:'cnName', value:'id'},
                accDeptData:[], // 部门数据
                lineData:[], // 航线数据
                commodityData:[], // 合计数据
                // 合计的配置项
                commodityLabel:[
                    {
                        id:1,
                        label:'应付人民币',
                        prop:'amountCr'
                    },
                    {
                        id:2,
                        label:'应付美元',
                        prop:'amountCrUsd'
                    },
                    {
                        id:3,
                        label:'合计应付',
                        prop:'amountCrLoc'
                    },
                    {
                        id:4,
                        label:'应收人民币',
                        prop:'amountDr'
                    },
                    {
                        id:5,
                        label:'应收美元',
                        prop:'amountDrUsd'
                    },
                    {
                        id:6,
                        label:'合计应收',
                        prop:'amountDrLoc'
                    },
                    {
                        id:7,
                        label:'实付人民币',
                        prop:'realAmountCr'
                    },
                    {
                        id:8,
                        label:'实付美元',
                        prop:'realAmountCrUsd'
                    },
                    {
                        id:9,
                        label:'实付合计',
                        prop:'realAmountCrLoc'
                    },
                    {
                        id:7,
                        label:'实付人民币',
                        prop:'realAmountDr'
                    },
                    {
                        id:8,
                        label:'实付美元',
                        prop:'realAmountDrUsd'
                    },
                    {
                        id:9,
                        label:'实付合计',
                        prop:'realAmountCrLoc'
                    },
                    {
                        id:9,
                        label:'实际单票利润',
                        prop:'realAmountProfitLoc'
                    },
                ],
            }
        },
        async created() {
            this.option = await this.getColumnData(this.getColumnName(336), this.optionBack);
            this.getWorkDictsfun()
            this.getLazylistfun() // 获取部门数据
        },
        methods:{
            // 获取字典数据
            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)
                }
            },
            // 业务员下拉
            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){
                userGetList(1,10,{account}).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 = {};
                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;
                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;
                }
            },
            // 更改表格颜色
            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>