vue-insagent-pc/src/views/Report/StatisticalReport/FeeMeetReport.vue

<template>
  <div class="container" style="width: 99%; margin-top: 0px">
    <templateTable custom :formList="formList" class="invoiceAnd" ref="templateTable" @handleResetForm="resetform"
      :tableConfig="tableConfig" :data="tableData" @findPage="findPage" @handleSearchList="handleSearchList" @getList="getList">
      <template slot="companyId">
        <el-select v-model="pageData.companyId" clearable placeholder="选择险种" filterable size="small">
          <el-option v-for="item in companyList" :key="item.id" :label="item.name"
            :value="item.id"></el-option>
        </el-select>
      </template>
    </templateTable>
  </div>
</template>

<script>
import templateTable from '@/components/TemplateTable/index.vue'

export default {
  name: 'freeMeeReport',
  components: { templateTable },
  data() {
    return {
      formList: [
        {
          name: 'companyId',
          label: '保险公司',
          type: 'slot'
        },
        {
          label: "时间",
          prop: "dateTime",
          type: "datePicker",
        },
      ],
      tableConfig: {
        columns: [
          {
            prop: "inscompany",
            label: "保险公司",
            type: "text"
          },
          {
            prop: "jqPremium",
            label: "交强险保费",
            type: "text"
          },
          {
            prop: "jqExportSuperviseCostsPremiums",
            label: "交强出口手续费",
            type: "text"
          },
          {
            prop: "jqExportOtherCostsPremiums",
            label: "交强出口跟单费",
            type: "text"
          },
          {
            prop: "syPremium",
            label: "商业险保费",
            type: "text"
          },
          {
            prop: "syExportSuperviseCostsPremiums",
            label: "商业出口手续费",
            type: "text"
          },
          {
            prop: "syExportOtherCostsPremiums",
            label: "商业出口跟单费",
            type: "text"
          },
          
          {
            prop: "noPremium",
            label: "非车险保费",
            type: "text"
          },
          {
            prop: "noExportSuperviseCostsPremiums",
            label: "非车出口手续费",
            type: "text"
          },
          {
            prop: "noExportOtherCostsPremiums",
            label: "非车出口跟单费",
            type: "text"
          },
          {
            prop: "distributingPremiums",
            label: "分销费用",
            type: "text"
          },
          {
            prop: "totalPremiums",
            label: "总和",
            type: "text"
          },

        ],
        operationWidth: '180',
        loading: true,
        showSummary: true,
        tableHeight: "none",
        // isPaginationShow: true,
        // optBtns: [
        //   {
        //     type: 'primary',
        //     label: '编辑',
        //     click: (row, index) => { return this.haldUpload(row) },
        //   },
        // ]
      },
      tableData: [],
      pageData: {
      },
      companyList: [],
    }
  },
  created() {
    //获取保险公司
    this.$api.letter.gainTopList().then(res=>{
      this.companyList = res.data
    })
    this.findPage()
  },
  methods: {
    findPage(data) {
      this.tableConfig.loading = false
      let queryData = {...this.pageData}
      if (data && data.dateTime) {
        queryData.startTime = data.dateTime[0]
        queryData.endTime = data.dateTime[1]
      } 
      this.$api.report.feeMeetReport(queryData).then((res) => {
        this.tableData = res.data
      })
    },
    handleSearchList(data) {
      this.findPage(data)
    },
    getList(data) {
      this.findPage(data)
    },
    resetform() {
      this.pageData.companyId = undefined
    },
  },
}
</script>

<style lang="scss" scoped>
.invoiceAnd >>> .el-table__body-wrapper {
  overflow-y: auto !important;
  height: auto !important;
}
.imageclass {
  max-width: 100px;
  max-height: 50px;
  text-align: center;
}
</style>