Smart_platform_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"
                   @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 >设计报表</el-button>
            </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"
                              @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>
    </basic-container>
</template>

<script>
    import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
    import {CurrentMonth, dateFormat, defaultDate3, defaultDate4} from "@/util/date";
    import {financeStatisticsFeeSummary} 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";

    export default {
        components: {SearchQuery},
        data(){
            return {
                form: {},
                loading: true,
                page: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },
                query: {
                    dc:'D',
                    isBusinessDate:1,
                    type:'1',
                    etdStart:defaultDate3()[0],
                    etdEnd:defaultDate3()[1],
                },
                option:{},
                optionBack:{
                    height:'auto',
                    calcHeight: 30,
                    tip: false,
                    searchShow: true,
                    searchMenuSpan: 6,
                    border: true,
                    index: false,
                    selection: true,
                    dialogClickModal: false,
                    menu:false,
                    addBtn:false,
                    viewBtn:false,
                    delBtn:false,
                    editBtn:false,
                    column:[
                        {
                            label: "结算单位",
                            prop: "corpName",
                            overHidden:true,
                        },
                        {
                            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: "type",
                            hide:true,
                            search:true,
                            type: 'select',
                            searchslot:true,
                        },
                        {
                            label: "业务类型",
                            prop: "businessType",
                            hide:true,
                            search:true,
                            searchslot: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: "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: "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:[
                    {
                        label:'海运出口',
                        value:'HYCK'
                    },{
                        label:'海运进口',
                        value:'HYJK'
                    },{
                        label:'空运出口',
                        value:'KYCK'
                    },{
                        label:'空运进口',
                        value:'KYJK'
                    }
                ],
                clientIdData:[], // 委托人
                corpIdData:[], // 结算单位
                srcTypeData:[], // 业务来源
                srcIdData:[], // 业务员
                srcforParameter:{key:'id', label:'cnName', value:'cnName'},

            }
        },
        async created() {
            this.option = await this.getColumnData(this.getColumnName(332), this.optionBack);
        },
        methods:{
            // 导出
            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.corpId)
                            this.$set(this.query,'corpName',item.corpName)
                        }
                    }
                } else if (name == 'clientName') {
                    for (let item of this.clientIdData) {
                        if (item.cnName == value) {
                            this.$set(this.query,'clientId',item.corpId)
                            this.$set(this.query,'clientName',item.corpName)
                        }
                    }
                }else if (name == 'srcType') {
                    if (value == 'OWN') {
                        // 公司
                        this.srcforParameter = { key:'id', label:'title', value:'title'}
                        this.ownDeptLazyTreefun()
                    }else if (value == 'AGENT') {
                        // 代理
                        this.srcforParameter = { key:'id', label:'cnName', value:'cnName'}
                        this.agentBcorpsListfun()
                    }else if (value == 'SALES') {
                        // 业务员
                        this.srcforParameter = { key:'id', label:'name', value:'name'}
                        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.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
                })
            },
            // 委托人
            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 = {};
                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;
                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;
                    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;
}
</style>