tenant-Platform/src/views/platform/platformReport.vue

<template>
  <PageMain class="vh100">
    <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="120">
          <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="contactPerson" label="对接人">
                <el-input v-model="recordForm.contactPerson" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="contactPersonPhone" label="对接人手机号">
                <el-input v-model="recordForm.contactPersonPhone" placeholder="请输入"></el-input>
              </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="time" 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 v-for="item in optionObj['settlement_status']" :key="item.value" :value="item.value"
                    :label="item.label"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24" style="height: 50px; display: flex; align-items: start; justify-content: flex-end">
              <el-button type="primary" @click="initData1()">查询</el-button>
              <el-button plain type="primary" @click="handleReset(1)">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-table height="calc(100% - 100px)" :data="recordData" row-key="companyId" :summary-method="getSummaries"
          show-summary>
          <el-table-column prop="companyName" label="保险公司" width="240"></el-table-column>
          <el-table-column prop="totalReceivable" label="应收金额" width="240"></el-table-column>
          <el-table-column prop="contactPerson" label="对接人" width="240"></el-table-column>
          <el-table-column prop="contactPersonPhone" label="对接人手机号" width="240"></el-table-column>
          <el-table-column prop="totalReceivable" label="应收金额" width="240"></el-table-column>
          <el-table-column prop="totalSettlementAmount" label="已结算" width="200"></el-table-column>
          <el-table-column prop="totalUnSettlementAmount" label="未结算" width="200"></el-table-column>
          <el-table-column prop="totalPaymentDifference" label="总差额" width="200"></el-table-column>
          <el-table-column label="操作" fixed="right" width="120">
            <template #default="scope">
              <el-button link type="primary" @click="handleSettlementDetail(scope.row)">查看明细</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="receiver" label="对接人">
                <el-input v-model="recordForm1.receiver"></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.id" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </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="24" style="height: 50px; display: flex; align-items: start; justify-content: flex-end">
              <el-button type="primary" @click="initData2()">查询</el-button>
              <el-button plain type="primary" @click="handleReset(2)">重置</el-button>
              <el-button type="primary" @click="handleExport">导出结算记录</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-table height="calc(100% - 142px)" :data="recordData1">
          <el-table-column prop="receiver" label="对接人" ></el-table-column>
          <el-table-column prop="companyName" label="保险公司" ></el-table-column>
          <el-table-column prop="totalReceivable" label="应收总计" width="150"></el-table-column>
          <el-table-column prop="settledAmount" label="已结算总计" width="150"></el-table-column>
          <el-table-column prop="unSettledAmount" label="未结算总计" width="150"></el-table-column>
          <el-table-column prop="totalPaymentDifference" label="总差额" width="200"></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"
            @current-change="handleCurrentChange"></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="settlementId" label="结算记录编号">
                <el-input v-model="recordForm2.settlementId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="invoiceParty" label="对接人">
                <el-input v-model="recordData2.a"></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.id" :value="item.id"
                    :label="item.name"></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="recordForm2.status">
                  <el-option value="0" label="未结算"></el-option>
                  <el-option value="1" label="已结算"></el-option>
                  <el-option value=" " label="全部"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24" style="height: 50px; display: flex; align-items: start; justify-content: flex-end">
              <el-button type="primary" @click="initData3(['1'])">查询</el-button>
              <el-button plain type="primary" @click="handleReset(3)">重置</el-button>
              <el-button type="primary" @click="handleExport1">导出明细</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-table height="calc(100% - 192px)" :data="recordData2">
          <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="contactPerson" label="对接人" width="150"></el-table-column>
          <el-table-column prop="signingTime" label="签单时间" width="150"></el-table-column>
          <el-table-column prop="licenseNo" label="车牌号" width="150"></el-table-column>
          <el-table-column prop="productName" label="险种" width="150"></el-table-column>
          <el-table-column prop="receivableSuperviseCosts" label="应收金额" width="150"></el-table-column>
          <el-table-column prop="jqPremium" label="交强险保费" width="150"></el-table-column>
          <el-table-column prop="taxPremium" label="车船税" width="150"></el-table-column>
          <el-table-column prop="jqSuperviseCostsProportion" label="交强险手续费比例" width="150"></el-table-column>
          <el-table-column prop="a" label="交强险跟单费比例" width="150"></el-table-column>
          <el-table-column prop="syPremium" label="商业险保费" width="150"></el-table-column>
          <el-table-column prop="sySuperviseCostsProportion" label="商业险手续费比例" width="150"></el-table-column>
          <el-table-column prop="a" label="商业险跟单费比例" width="150"></el-table-column>
          <el-table-column prop="jyPremium" label="非车险保费" width="150"></el-table-column>
          <el-table-column prop="jySuperviseCostsProportion" label="非车险手续费比例" width="150"></el-table-column>
          <el-table-column prop="a" label="非车险跟单费比例" width="150"></el-table-column>
          <el-table-column prop="a" label="交强险保单号" width="150"></el-table-column>
          <el-table-column prop="a" label="商业险保单号" width="150"></el-table-column>
          <el-table-column prop="settlementPerson" label="结算人" width="150"></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"
            @current-change="handleCurrentChange"></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </PageMain>
</template>

<script setup lang="ts">
import api from '@/api'
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
// 结算记录
let recordForm = ref({})
let recordForm1 = ref({})
let recordForm2 = ref({})
let recordData = ref([])
let recordData1 = ref([])
let recordData2 = ref([])
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()
      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)
const handleSizeChange = (size) => {
  size.value = size
}
const handleCurrentChange = (page) => {
  pages.value = page
}

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
}

const initData1 = () => {
  api.settlementApi.platformCompanySuperviseSettlementReport({
    companyId: recordForm.value.companyId,
    startTime: recordForm.value.time?.[0],
    endTime: recordForm.value.time?.[1],
    settlementStartTime: recordForm.value.settlementTime?.[0],
    settlementEndTime: recordForm.value.settlementTime?.[1],
    status: recordForm.value.status,
    contactPerson: recordForm.value.contactPerson,
    contactPersonPhone: recordForm.value.contactPersonPhone,
    agreementType: '1'
  }).then((res: any) => {
    if (res.code == 200) {
      recordData.value = res.data
    }
  })
}
const initData2 = () => {
  api.settlementApi.receiverSettlementReport({
    receiver: recordForm1.value.receiver,
    companyId: recordForm1.value.companyId,
    invoiceParty: recordForm1.value.invoiceParty,
    invoiceType: recordForm1.value.invoiceType,
    status: recordForm1.value.status,
    settlementPerson: recordForm1.value.settlementPerson,
    invoiceId: recordForm1.value.invoiceId,
    startTime: recordForm1.value.settlementTime?.[0],
    endTime: recordForm1.value.settlementTime?.[1],
    pages: pages.value,
    size: size.value,
    invoiceTypes: ['5', '6']
  }).then((res: any) => {
    if (res.code == 200) {
      recordData1.value = res.data.records
      total1.value = res.data.total
    }
  })
}
const initData3 = () => {
  api.settlementApi.superviseSettlementDetailExcel({
    ...recordForm2.value,
    settlementTimeStart: recordForm2.value.settlementTime?.[0],
    settlementTimeEnd: recordForm2.value.settlementTime?.[1],
    pages: pages.value,
    size: size.value,
    status: recordForm2.value.status,
    invoiceTypes: ['5', '6'],
    agreementType: '1'
  }).then((res: any) => {
    if (res.code == 200) {
      recordData2.value = res.data.records
      total2.value = res.data.total
    }
  })
}

const handleSearch = (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;
  }
}
const handleReset = (type) => {

}
const handleExport = () => {
  api.settlementApi.exportReceiverSettlementReportExcel({

  }).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 handleExport1 = () => {
  api.financeApi.exportSuperviseExcel({
    agreementType: '1'
  }).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 optionObj = ref({})
const initOption = () => {
  let list = ['settlement_status']
  list.forEach(item => {
    api.additionalApi.dictDetails(item).then((res: any) => {
      if (res.code == 200) {
        if (res.data) {
          optionObj.value[item] = res.data
        }
      }
    })
  })
}
const  handleSettlementDetail = (row) => {
  activeName.value = '3'
  recordForm2.value.companyId = row.id
  initData3()
}
onMounted(() => {
  if (route.query.activeName === '3') {
    recordForm2.value.settlementId = route.query.settlementId
    activeName.value = '3'
    initData3();
  } else {
    initData1();
  }
  initCompany();
  initOption();
})

</script>

<style scoped lang="scss">
.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

:deep(.subTable .el-table__header-wrapper) {
  display: none;
}
</style>