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: 14,
                border: true,
                index: false,
                selection: true,
                dialogClickModal: false,
                menu: false,
                addBtn: false,
                viewBtn: false,
                delBtn: false,
                editBtn: false,
                searchIcon: true,
                searchIndex: 3,
                emptyBtnText: '清空所有条件',
                column: [
                    {
                        label: "业务类型",
                        prop: "businessType",
                        type: 'select',
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=audit_status_los",
                        props: {
                            label: 'dictValue',
                            value: 'dictKey',
                        },
                        overHidden: true,
                    },
                    {
                        label: "结算单位",
                        prop: "corpName",
                        overHidden: true,
                    },
                    {
                        label: "业务编号",
                        prop: "billNo",
                        search: true,
                        overHidden: true,
                    },
                    {
                        label: "提单号",
                        prop: "mblNo",
                        search: true,
                        overHidden: true,
                    },
                    {
                        label: "船名",
                        prop: "vesselName",
                        overHidden: true,
                    },
                    {
                        label: "航次",
                        prop: "voyageNo",
                        overHidden: true,
                    },
                    {
                        label: "开船日期",
                        prop: "etd",
                        overHidden: true,
                    },
                    {
                        label: "提单号",
                        prop: "mblNo",
                        overHidden: true,
                    },
                    {
                        label: "起运港",
                        prop: "pol",
                        overHidden: true,
                    },
                    {
                        label: "目的港",
                        prop: "pod",
                        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: "统计开始",
                        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,
                        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);
        this.query = {
            dc: 'D',
            isBusinessDate: 1,
            isToExamineDate: 0,
            etdStart: defaultDate3()[0],
            etdEnd: defaultDate3()[1],
        }
    },
    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.id)
                        this.$set(this.query, 'corpName', item.cnName)
                    }
                }
            } else if (name == 'clientName') {
                for (let item of this.clientIdData) {
                    if (item.cnName == value) {
                        this.$set(this.query, 'clientId', item.id)
                        this.$set(this.query, 'clientName', item.cnName)
                    }
                }
            } 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: null,
                etdEnd: null,
            };
            this.onLoad(this.page);
        },
        // 搜索
        searchChange(params, done) {
            this.page.currentPage = 1;
            this.onLoad(this.page, this.query);
            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.$nextTick(() => {
                    this.$refs.crud.doLayout();
                    this.$refs.crud.dicInit();
                });
                this.selectionClear();
            });
        },
        selectionClear() {
            this.$refs.crud.toggleSelection();
        },
        //自定义列保存
        async saveColumnTwo(ref, option, optionBack, code) {
            /**
             * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
             * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
             * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
             */
            const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
            if (inSave) {
                this.$message.success("保存成功");
                //关闭窗口
                this.$refs[ref].$refs.dialogColumn.columnBox = false;
            }
        },
        //自定义列重置
        async resetColumnTwo(ref, option, optionBack, code) {
            this[option] = this[optionBack];
            const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
            if (inSave) {
                this.$message.success("重置成功");
                this.$refs[ref].$refs.dialogColumn.columnBox = false;
                this.query = {
                    dc: 'D',
                    isBusinessDate: 1,
                    isToExamineDate: 0,
                    etdStart: defaultDate3()[0],
                    etdEnd: defaultDate3()[1],
                }
            }
        },
        // 更改表格颜色
        headerClassName(tab) {
            //颜色间隔
            let back = ""
            if (tab.columnIndex >= 0 && tab.column.level === 1) {
                if (tab.columnIndex % 2 === 0) {
                    back = "back-one"
                } else if (tab.columnIndex % 2 === 1) {
                    back = "back-two"
                }
            }
            return back;
        },
    }
}
</script>

<style scoped>
::v-deep#out-table .back-one {
    background: #ecf5ff !important;
    text-align: center;
}

::v-deep#out-table .back-two {
    background: #ecf5ff !important;
    text-align: center;
}
::v-deep .el-col-md-8 {
    width: 24.33333%;
}
</style>