Smart_platform_ui/src/views/iosBasicData/UnpaidPaymentsDetails/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', 334)"
                   @saveColumn="saveColumnTwo('crud', 'option', 'optionBack', 334)"
                   @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="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="businessTypeSearch">
                <search-query :datalist="businessTypeData"
                              :selectValue="query.businessType"
                              :clearable="true"
                              :buttonIf="false"
                              :forParameter="{ key:'dictKey', label:'dictValue', value:'dictKey'}"
                              @corpFocus="businessTypeFocus"
                              @corpChange="corpChange($event,'businessType')">
                </search-query>
            </template>
            <template slot-scope="{disabled,size}" slot="clientIdSearch">
                <search-query :datalist="clientIdData"
                              :selectValue="query.clientName"
                              :filterable="true"
                              :remote="true"
                              :clearable="true"
                              :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"
                              :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="srcIdSearch">
                <search-query :datalist="srcIdData"
                              :selectValue="query.srcName"
                              :filterable="true"
                              :remote="true"
                              :clearable="true"
                              :buttonIf="false"
                              :forParameter="{ key:'id', label:'name', value:'name'}"
                              @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 {
    financeStatisticsFeeSummaryDetailNot,
    financeStatisticsFeeSummaryDetailNotSum
} 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,
                isToExamineDate:0,
                etdStart:defaultDate3()[0],
                etdEnd: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,
                column:[
                    {
                        label: "结算单位",
                        prop: "corpName",
                        overHidden:true,
                    },
                    {
                        label: "业务编号",
                        prop: "billNo",
                        overHidden:true,
                    },
                    {
                        label: "船名",
                        prop: "vesselName",
                        overHidden:true,
                    },
                    {
                        label: "航次",
                        prop: "voyageNo",
                        overHidden:true,
                    },
                    {
                        label: "开船日期",
                        prop: "etd",
                        overHidden:true,
                    },
                    {
                        label: "提单号",
                        prop: "mblNo",
                        overHidden:true,
                    },
                    {
                        label: "起运港",
                        prop: "pod",
                        overHidden:true,
                    },
                    {
                        label: "目的港",
                        prop: "pol",
                        overHidden:true,
                    },
                    {
                        label: "汇率",
                        prop: "rate",
                        overHidden:true,
                    },
                    {
                        label: "箱型箱量",
                        prop: "quantityCntrDescr",
                        overHidden:true,
                    },
                    {
                        label: "美元",
                        prop: "amountUsdNot",
                        overHidden:true,
                    },
                    {
                        label: "人民币",
                        prop: "amountNot",
                        overHidden:true,
                    },
                    {
                        label: "开票USD",
                        prop: "amountInvoicingUsd",
                        overHidden:true,
                    },
                    {
                        label: "开票CNY",
                        prop: "amountInvoicing",
                        overHidden:true,
                    },
                    {
                        label: "未开USD",
                        prop: "amountInvoicingUsdNot",
                        overHidden:true,
                    },
                    {
                        label: "未开CNY",
                        prop: "amountInvoicingNot",
                        overHidden:true,
                    },
                    {
                        label: "业务员",
                        prop: "srcCnName",
                        overHidden:true,
                    },
                    {
                        label: "操作员",
                        prop: "operatorName",
                        overHidden: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: "srcId",
                        hide:true,
                        search:true,
                        searchslot:true,
                    },
                    {
                        label: "ETD",
                        prop: "etdStart",
                        search:true,
                        overHidden:true,
                        hide:true,
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                    },
                    {
                        label: "ETA",
                        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,
                        searchSpan:4,
                        searchLabelWidth:'0'
                    },
                    {
                        label: "",
                        prop: "isBusinessDate",
                        hide:true,
                        search:true,
                        searchslot:true,
                        searchLabelWidth:'0'
                    },
                    {
                        label: "",
                        prop: "isToExamineDate",
                        hide:true,
                        searchLabelWidth:'0',
                    },

                ]
            },
            data:[],
            // 查询方式
            typeData:[
                {
                    label:'结算单位',
                    value:'1'
                },{
                    label:'委托人',
                    value:'2'
                },{
                    label:'业务来源',
                    value:'3'
                }
            ],
            // 业务类型
            businessTypeData:[],
            clientIdData:[], // 委托人
            corpIdData:[], // 结算单位
            srcIdData:[], // 业务员

            commodityData:[], // 合计数据
            // 合计的配置项
            commodityLabel:[
                {
                    id:1,
                    label: "美元",
                    prop: "amountUsdNot",
                },
                {
                    id:2,
                    label: "人民币",
                    prop: "amountNot",
                },
                {
                    id:3,
                    label: "开票USD",
                    prop: "amountInvoicingUsd",
                },
                {
                    id:4,
                    label: "开票CNY",
                    prop: "amountInvoicing",
                },
                {
                    id:5,
                    label: "未开USD",
                    prop: "amountInvoicingUsdNot",
                },
                {
                    id:6,
                    label: "未开CNY",
                    prop: "amountInvoicingNot",
                },
            ],

        }
    },
    async created() {
        this.option = await this.getColumnData(this.getColumnName(334), this.optionBack);
    },
    methods:{
        // 导出
        exportfun(){
            const routeData = this.$router.resolve({
                path: '/api/blade-los/financeStatistics/feeSummaryDetailExportNot',//跳转目标窗口的地址
                query: {
                    ...this.query
                }
            })
            window.open(routeData.href.slice(1, routeData.href.length) + '&' + `${this.website.tokenHeader}=${getToken()}`);
        },
        // 下拉监听
        corpChange(value,name){
            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 == 'srcName') {
                for (let item of this.srcIdData) {
                    if (item.name == value) {
                        // 业务员
                        this.$set(this.query,'srcId',item.id)
                        this.$set(this.query,'srcName',item.name)
                    }
                }
            }
            this.$set(this.query,name,value)
        },
        // 业务员下拉
        srcCorpFocus(value,name){
            this.salesUserGetListfun(value)
        },
        // 多选切换
        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
            })
        },
        // 业务类型
        businessTypeFocus(){
            getWorkDicts('profit_business_type_los').then(res=>{
                this.businessTypeData = res.data.data
            })
        },
        // 委托人
        clientIdListfun(cnName){
            getBcorpsList(1,10,{cnName,status: 0}).then(res=>{
                this.clientIdData = res.data.data.records
            })
        },
        // 获取业务来源数据
        srcTypeWorkDictsfun(){
            getWorkDicts('src_type_los').then(res=>{
                this.srcTypeData = res.data.data
            })
        },
        // 获取公司名称 用户管理左侧
        ownDeptLazyTreefun(){
            getDeptLazyTree(0).then(res=>{
                this.srcIdData = res.data.data
            })
        },
        // 获取业务来源代理数据
        agentBcorpsListfun(cnName){
            let corpTypeName = '国内直接客户,国内同行及代理,国外直接客户,国外同行及代理'
            getBcorpslistByType(1,10,{cnName,status: 0,corpTypeName}).then(res=>{
                this.srcIdData = res.data.data.records
            })
        },
        // 获取业务来源业务员数据
        salesUserGetListfun(account){
            userGetList(1,10,{account}).then(res=>{
                this.srcIdData = res.data.data.records
            })
        },
        // 清空搜索回调方法
        searchReset() {
            this.query = {
                dc:'D',
                isBusinessDate:1,
                isToExamineDate:0,
                etdStart:defaultDate3()[0],
                etdEnd:defaultDate3()[1],
            };
            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;
            financeStatisticsFeeSummaryDetailNot(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;
                financeStatisticsFeeSummaryDetailNotSum(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;
}
</style>