tenant-Platform/src/views/receivable/documentary/documentaryReport.vue

<template>
    <div class="report">
        <el-tabs v-model="activeName" style="height: 100%" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane style="height: 100%" name="1" label="保险公司报表">
                <el-form v-model="recordForm" label-width="80">
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item prop="a" label="保险公司">
                                <el-select v-model="recordForm.companyId" placeholder="请选择" clearable filterable>
                                    <el-option v-for="item in companyList" :key="item.id" :value="item.id " :label="item.name"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="time" label="时间">
                                <el-date-picker
                                    v-model="recordForm.time"
                                    type="daterange"
                                    format="YYYY-MM-DD"
                                    value-format="YYYY-MM-DD"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="status" label="结算状态">
                                <el-select v-model="recordForm.status">
                                    <el-option value="1" label="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-button type="primary" @click="handleSearch(1)">查询</el-button>
                            <el-button plain type="primary" @click="handleReset(1)">重置</el-button>
                        </el-col>
                    </el-row>
                </el-form>
                <el-table
                    class="tableBox"
                    :data="recordData"
                    row-key="companyId"
                    :summary-method="getSummaries"
                    show-summary
                >
                    <el-table-column prop="companyName" label="保险公司" width="300"></el-table-column>
                    <!--                    <el-table-column type="expand" label="合作保险公司" width="200">
                                            <template #default>
                                                展开
                                            </template>
                                        </el-table-column>-->
                    <el-table-column prop="totalReceivable" label="累计应收" width="240"></el-table-column>
                    <el-table-column prop="superviseFee" label="应收跟单费" width="240"></el-table-column>
                    <el-table-column prop="invoicedAmount" label="已开票" width="200"></el-table-column>
                    <el-table-column prop="settledAmount" label="已结算" width="200"></el-table-column>
                    <el-table-column prop="unInvoicedAmount" label="未开票" width="200"></el-table-column>
                    <el-table-column prop="unSettledAmount" label="未结算" width="200"></el-table-column>
                    <el-table-column label="操作" fixed="right" width="120">
                        <template #default="scope">
                            <el-button link type="primary">查看明细</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane style="height: 100%" name="2" label="结算记录">
                <el-form v-model="recordForm1" label-width="120">
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item prop="settlementId" label="结算记录编号">
                                <el-input v-model="recordForm1.settlementId"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="a" label="保险公司">
                                <el-select v-model="recordForm1.companyId" placeholder="请选择" clearable filterable>
                                    <el-option v-for="item in companyList" :key="item.companyCode" :value="item.companyCode" :label="item.name"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="invoiceParty" label="开票方">
                                <el-select v-model="recordForm1.invoiceParty">
                                    <el-option value="1" label="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="invoiceType" label="应收项">
                                <el-select v-model="recordForm1.invoiceType">
                                    <el-option value="1" label="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="status" label="结算状态">
                                <el-select v-model="recordForm1.status">
                                    <el-option value="1" label="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="settlementPerson" label="结算人">
                                <el-input v-model="recordForm1.settlementPerson"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="settlementTime" label="结算时间">
                                <el-date-picker
                                    v-model="recordForm1.settlementTime"
                                    type="daterange"
                                    format="YYYY-MM-DD"
                                    value-format="YYYY-MM-DD"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="invoiceId" label="开票记录编号">
                                <el-input v-model="recordForm1.invoiceId"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" style="display: flex; justify-content: flex-end">
                            <el-button type="primary" @click="handleSearch(2)">查询</el-button>
                            <el-button plain type="primary" @click="handleReset(2)">重置</el-button>
                            <el-button type="primary" @click="handleExport(2)">导出结算记录</el-button>
                        </el-col>
                    </el-row>
                </el-form>
                <el-table
                    class="tableRecord"
                    :data="recordData1"
                >
                    <el-table-column prop="settlementId" label="结算记录编号" width="200"></el-table-column>
                    <el-table-column prop="companyName" label="保险公司" width="200"></el-table-column>
                    <el-table-column prop="invoiceParty" label="开票方" width="150"></el-table-column>
                    <el-table-column prop="invoiceType" label="应收项" width="100"></el-table-column>
                    <el-table-column prop="taxPoint" label="税点" width="100"></el-table-column>
                    <el-table-column prop="actualReceivedAmount" label="实收金额" width="100"></el-table-column>
                    <el-table-column prop="receivePaymentDate" label="收款日期" width="150"></el-table-column>
                    <el-table-column label="收款凭证" width="100">
                        <template #default="scope">
                            <el-button link type="primary" @click="view">查看凭证（1）</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createBy" label="结算人" width="100"></el-table-column>
                    <el-table-column prop="createTime" label="结算时间" width="200"></el-table-column>
                    <el-table-column prop="invoiceId" label="开票记录编号"></el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination
                        v-model:current-page="pages"
                        v-model:page-size="size"
                        :page-sizes="[10, 20, 30, 40]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total1"
                        @size-change="handleSizeChange($event, '2')"
                        @current-change="handleCurrentChange($event, '2')"
                    ></el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane style="height: 100%" name="3" label="车险结算明细">
                <el-form v-model="recordForm2" label-width="120">
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item prop="invoiceId" label="开票记录编号">
                                <el-input v-model="recordForm2.invoiceId"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="companyId" label="保险公司">
                                <el-select v-model="recordForm2.companyId" placeholder="请选择" clearable filterable>
                                    <el-option v-for="item in companyList" :key="item.companyCode" :value="item.companyCode" :label="item.name"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="invoiceParty" label="开票方">
                                <el-select v-model="recordForm2.invoiceParty">
                                    <el-option value="1" label="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="settlementPerson" label="结算人">
                                <el-input v-model="recordForm2.settlementPerson"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="settlementTime" label="结算时间">
                                <el-date-picker
                                    v-model="recordForm.settlementTime"
                                    type="daterange"
                                    format="YYYY-MM-DD"
                                    value-format="YYYY-MM-DD"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="status" label="状态">
                                <el-select v-model="recordForm.status">
                                    <el-option value="1" label="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" style="display: flex; justify-content: flex-end">
                            <el-button type="primary" @click="handleSearch(3)">查询</el-button>
                            <el-button plain type="primary" @click="handleReset(3)">重置</el-button>
                            <el-button type="primary" @click="handleExport(3)">导出明细</el-button>
                        </el-col>
                    </el-row>
                </el-form>
                <el-table
                    class="tableRecord"
                    :data="recordData2"
                >
                    <el-table-column prop="invoiceId" label="开票记录编号" width="200"></el-table-column>
                    <el-table-column prop="companyName" label="保险公司" width="200"></el-table-column>
                    <el-table-column prop="invoiceParty" label="开票方" width="100"></el-table-column>
                    <el-table-column prop="signingTime" label="签单时间" width="150"></el-table-column>
                    <el-table-column prop="status" label="状态" width="100"></el-table-column>
                    <el-table-column prop="licenseNo" label="车牌号" width="120"></el-table-column>
                    <el-table-column prop="productName" label="险种" width="120"></el-table-column>
                    <el-table-column prop="receivableSuperviseCosts" label="应收跟单费" width="100"></el-table-column>
                    <el-table-column prop="jqPremium" label="交强险保费" width="100"></el-table-column>
                    <el-table-column prop="taxPremium" label="车船税" width="100"></el-table-column>
                    <el-table-column prop="jqSuperviseCostsProportion" label="交强险跟单费比例" width="100"></el-table-column>
                    <el-table-column prop="syPremium" label="商业险保费" width="100"></el-table-column>
                    <el-table-column prop="sySuperviseCostsProportion" label="商业险跟单费比例" width="100"></el-table-column>
                    <el-table-column prop="jqPolicyNo" label="交强险保单号" width="200"></el-table-column>
                    <el-table-column prop="syPolicyNo" label="商业险保单号" width="200"></el-table-column>
                    <el-table-column prop="invoicePerson" label="开票人" width="100"></el-table-column>
                    <el-table-column prop="invoiceTime" label="开票时间" width="150"></el-table-column>
                    <el-table-column prop="settlementPerson" label="结算人" width="100"></el-table-column>
                    <el-table-column prop="settlementTime" label="结算时间" width="150"></el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination
                        v-model:current-page="pages"
                        v-model:page-size="size"
                        :page-sizes="[10, 20, 30, 40]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total2"
                        @size-change="handleSizeChange($event, '3')"
                        @current-change="handleCurrentChange($event, '3')"
                    ></el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane style="height: 100%" name="4" label="非车结算明细">
                <el-form v-model="recordForm3" label-width="120">
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item prop="invoiceId" label="开票记录编号">
                                <el-input v-model="recordForm3.invoiceId"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="companyId" label="保险公司">
                                <el-select v-model="recordForm3.companyId" placeholder="请选择" clearable filterable>
                                    <el-option v-for="item in companyList" :key="item.companyCode" :value="item.companyCode" :label="item.name"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="invoiceParty" label="开票方">
                                <el-select v-model="recordForm3.invoiceParty">
                                    <el-option value="1" label="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="settlementPerson" label="结算人">
                                <el-input v-model="recordForm3.settlementPerson"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="settlementTime" label="结算时间">
                                <el-date-picker
                                    v-model="recordForm3.settlementTime"
                                    type="daterange"
                                    format="YYYY-MM-DD"
                                    value-format="YYYY-MM-DD"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="status" label="状态">
                                <el-select v-model="recordForm3.status">
                                    <el-option value="1" label="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" style="display: flex; justify-content: flex-end">
                            <el-button type="primary" @click="handleSearch(4)">查询</el-button>
                            <el-button plain type="primary" @click="handleReset(4)">重置</el-button>
                            <el-button type="primary" @click="handleExport(4)">导出明细</el-button>
                        </el-col>
                    </el-row>
                </el-form>
                <el-table
                    class="tableRecord"
                    :data="recordData3"
                >
                    <el-table-column prop="invoiceId" label="开票记录编号" width="200"></el-table-column>
                    <el-table-column prop="companyName" label="保险公司" width="200"></el-table-column>
                    <el-table-column prop="invoiceParty" label="开票方" width="100"></el-table-column>
                    <el-table-column prop="signingTime" label="签单时间" width="150"></el-table-column>
                    <el-table-column prop="status" label="状态" width="100"></el-table-column>
                    <el-table-column prop="licenseNo" label="车牌号" width="120"></el-table-column>
                    <el-table-column prop="productName" label="险种" width="120"></el-table-column>
                    <el-table-column prop="receivableSuperviseCosts" label="应收跟单费" width="100"></el-table-column>
                    <el-table-column prop="jyPremium" label="非车险保费" width="100"></el-table-column>
                    <el-table-column prop="jySuperviseCostsProportion" label="非车险跟单费比例" width="100"></el-table-column>
                    <el-table-column prop="jyPolicyNo" label="非车险保单号" width="200"></el-table-column>
                    <el-table-column prop="invoicePerson" label="开票人" width="100"></el-table-column>
                    <el-table-column prop="invoiceTime" label="开票时间" width="150"></el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination
                        v-model:current-page="pages"
                        v-model:page-size="size"
                        :page-sizes="[10, 20, 30, 40]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total3"
                        @size-change="handleSizeChange($event, '4')"
                        @current-change="handleCurrentChange($event, '4')"
                    ></el-pagination>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import api from '@/api'

let activeName = ref('1')
const handleClick = (e) => {
    pages.value = 1
    size.value = 10
    switch (e.props.name) {
        case '1':
            initData1()
            break;
        case '2':
            initData2()
            break;
        case '3':
            initData3(['1'])
            break;
        case '4':
            initData3(['3'])
            break;
    }
}

// 保险公司
let companyList = ref([])
const initCompany = () => {
    api.insuranceApi.leftList('').then((res: any) => {
        if(res.code == 200) {
            companyList.value = res.data
        }
    })
}

// 分页
let pages = ref(1)
let size = ref(10)
let total = ref(0)
let total1 = ref(0)
let total2 = ref(0)
let total3 = ref(0)
const handleSizeChange = (size, type) => {
    size.value = size
    switch (type) {
        case 2:
            initData2()
            break;
        case 3:
            initData3('2')
            break;
        case 4:
            initData3('4')
            break;
    }
}
const handleCurrentChange = (pages, type) => {
    pages.value = pages
    switch (type) {
        case 2:
            initData2()
            break;
        case 3:
            initData3('2')
            break;
        case 4:
            initData3('4')
            break;
    }
}

const getSummaries = (param) => {
    const { columns, data } = param
    const sums: (string | VNode)[] = []
    columns.forEach((column, index) => {
        if (index === 0) {
            sums[index] = h('div', [
                '',
            ])
            return
        }
        const values = data.map((item) => Number(item[column.property]))
        if (!values.every((value) => Number.isNaN(value))) {
            sums[index] = ` ${values.reduce((prev, curr) => {
                const value = Number(curr)
                if (!Number.isNaN(value)) {
                    return prev + curr
                } else {
                    return prev
                }
            }, 0)}`
        } else {
            if(index > 2) {
                sums[index - 1] = '0'
            }
        }
    })

    return sums
}

// 结算记录
let recordForm = ref({})
let recordForm1 = ref({})
let recordForm2 = ref({})
let recordForm3 = ref({})
let recordData = ref([])
let recordData1 = ref([])
let recordData2 = ref([])
let recordData3 = ref([])
const view = (scope) => {

}

const initData1 = () => {
    api.settlementApi.companySuperviseSettlementReport({
        companyId: recordForm.value.companyId,
        startTime: recordForm.value.time?.[0],
        endTime: recordForm.value.time?.[1],
        status: recordForm.value.status,
        invoiceTypes: ['2','4'],
        agreementType: '2'
    }).then((res: any) => {
        if(res.code == 200) {
            recordData.value = res.data
        }
    })
}
const initData2 = () => {
    api.settlementApi.superviseSettlementExcel({
        agreementType: '2',
        settlementId: recordForm1.settlementId,
        companyId: recordForm1.companyId,
        invoiceParty: recordForm1.invoiceParty,
        invoiceType: recordForm1.invoiceType,
        status: recordForm1.status,
        settlementPerson: recordForm1.settlementPerson,
        invoiceId: recordForm1.invoiceId,
        settlementTimeStart: recordForm1.value.settlementTime?.[0],
        settlementTimeEnd: recordForm1.value.settlementTime?.[1],
        pages: pages.value,
        size: size.value,
        invoiceTypes: ['2','4']
    }).then((res: any) => {
        if(res.code == 200) {
            recordData1.value = res.data.records
            total1.value = res.data.total
        }
    })
}
const initData3 = (invoiceTypes) => {
    let params = invoiceTypes.includes('2')?
        {
            invoiceId: recordForm2.invoiceId,
            companyId: recordForm2.companyId,
            invoiceParty: recordForm2.invoiceParty,
            settlementPerson: recordForm2.settlementPerson,
            status: recordForm2.status,
            settlementTimeStart: recordForm2.value.settlementTime?.[0],
            settlementTimeEnd: recordForm2.value.settlementTime?.[1],
            pages: pages.value,
            size: size.value,
            invoiceTypes: invoiceTypes
        }:
        invoiceTypes.includes('4')?
            {
                invoiceId: recordForm3.invoiceId,
                companyId: recordForm3.companyId,
                invoiceParty: recordForm3.invoiceParty,
                settlementPerson: recordForm3.settlementPerson,
                status: recordForm3.status,
                settlementTimeStart: recordForm3.value.settlementTime?.[0],
                settlementTimeEnd: recordForm3.value.settlementTime?.[1],
                pages: pages.value,
                size: size.value,
                invoiceTypes: invoiceTypes
            }:
            {}
    api.settlementApi.superviseSettlementDetailExcel({
        ...params
    }).then((res: any) => {
        if(res.code == 200) {
            recordData2.value = res.data.records
            recordData3.value = res.data.records
            total2.value = res.data.total
        }
    })
}

const handleSearch = (type) => {
    pages.value = 1
    size.value = 10
    switch (type) {
        case 1:
            initData1()
            break;
        case 2:
            initData2()
            break;
        case 3:
            initData3('2')
            break;
        case 4:
            initData3('4')
            break;
    }
}
const handleReset = (type) => {
    switch (type) {
        case 1:
            recordForm.value = {
                companyId: '',
                time: [],
                status: ''
            }
            break;
        case 2:
            recordForm1.value = {
                settlementId: '',
                companyId: '',
                invoiceParty: '',
                invoiceType: '',
                status: '',
                settlementPerson: '',
                settlementTime: [],
                invoiceId: ''
            }
            break;
        case 3:
            recordForm2.value = {
                invoiceId: '',
                companyId: '',
                invoiceParty: '',
                settlementPerson: '',
                settlementTime: [],
                status: ''
            }
            break;
        case 4:
            recordForm3.value = {
                invoiceId: '',
                companyId: '',
                invoiceParty: '',
                settlementPerson: '',
                settlementTime: [],
                status: ''
            }
            break;
    }
}

const handleExport = (type) => {
    switch (type) {
        case 2:
            exportOtherSettlementExcel()
            break;
        case 3:
            exportOtherSettlementDetailExcel()
            break;
        case 4:
            exportOtherSettlementDetailJyExcel()
            break;
    }
}

const exportOtherSettlementExcel = () => {
    api.settlementApi.exportOtherSettlementExcel({

    }).then((res: any) => {
        const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
        const fileName = '跟单费应收结算报表明细' + new Date().getTime() + '.xlsx';
        if ('download' in document.createElement('a')) {
            const elink = document.createElement('a');
            elink.download = fileName;
            elink.style.display = 'none';
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href);
            document.body.removeChild(elink);
        } else {
            navigator.msSaveBlob(blob, fileName);
        }
    })
}
const exportOtherSettlementDetailExcel = () => {
    api.settlementApi.exportOtherSettlementDetailExcel({

    }).then((res: any) => {
        const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
        const fileName = '跟单费应收结算报表明细' + new Date().getTime() + '.xlsx';
        if ('download' in document.createElement('a')) {
            const elink = document.createElement('a');
            elink.download = fileName;
            elink.style.display = 'none';
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href);
            document.body.removeChild(elink);
        } else {
            navigator.msSaveBlob(blob, fileName);
        }
    })
}
const exportOtherSettlementDetailJyExcel = () => {
    api.settlementApi.exportOtherSettlementDetailJyExcel({

    }).then((res: any) => {
        const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
        const fileName = '跟单费应收结算报表明细' + new Date().getTime() + '.xlsx';
        if ('download' in document.createElement('a')) {
            const elink = document.createElement('a');
            elink.download = fileName;
            elink.style.display = 'none';
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href);
            document.body.removeChild(elink);
        } else {
            navigator.msSaveBlob(blob, fileName);
        }
    })
}


onMounted(() => {
    initData1();
    initCompany();
})

</script>

<style scoped lang="scss">
.report{
    height: calc(100vh - 134px);
    width: calc(100% - 24px);
    margin: 12px auto;
    padding: 12px;
    background: #FFFFFF;
    overflow-y: auto;
    .tableBox{
        height: calc(100% - 150px);
    }
    .tableRecord{
        height: calc(100% - 210px);
    }
    .pagination{
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
    }
    :deep(.subTable .el-table__header-wrapper) {
        display: none;
    }
}
</style>