tire-platform-ui/src/views/iosBasicData/paymentDetail/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', 333)"
                   @saveColumn="saveColumnTwo('crud', 'option', 'optionBack', 333)"
                   @on-load="onLoad" >
            <template slot="menuLeft">
                <el-button type="success" size="small" plain @click="exportfun" >导出</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 { financeStatisticsFeeSummaryDetail} 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: "BILLNO",
                        prop: "billNo",
                        overHidden:true,
                    },
                    {
                        label: "MBLNO",
                        prop: "mblNo",
                        overHidden:true,
                    },
                    {
                        label: "ETD",
                        prop: "etdDate",
                        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: "amountInvoicingUsd",
                        overHidden:true,
                    },
                    {
                        label: "开票人民币",
                        prop: "amountInvoicing",
                        overHidden:true,
                    },
                    {
                        label: "未开美金",
                        prop: "amountInvoicingUsdNot",
                        overHidden:true,
                    },
                    {
                        label: "未开人民币",
                        prop: "amountInvoicingNot",
                        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(333), this.optionBack);
    },
    methods:{
        // 导出
        exportfun(){
            const routeData = this.$router.resolve({
                path: '/api/blade-los/financeStatistics/feeSummaryDetailExport',//跳转目标窗口的地址
                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;
            financeStatisticsFeeSummaryDetail(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>