income_payments_client/src/views/statisticalReport/WholePaymentsStatistics.vue

<!--全所收入的统计-->
<template>
<div class="whole-payments-statistics">
  <page-header-title :img-for-icon="IconImg"></page-header-title>
  <a-card :bordered="false">
    <!--    查询区域-start -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row>

          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="确认年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-year-date :allowClear="false" style="width:100%"  placeholder="请选择确认年份" v-model="queryParam.paymentYear"></j-year-date>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" icon="search" @click="searchQuery"
                        v-has="'wholePaymentsStatistics:search'">查询</a-button>
              <a-button icon="reload" @click="searchReset" class="reset-button">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!--    /查询区域-end-->
    <!--    操作按钮区域-->
    <div class="table-operator">
      <a-button type="primary" icon="export" @click="handleExportXls('全所收入统计')"
                v-has="'wholePaymentsStatistics:export'">导出
      </a-button>
    </div>
    <!--    操作按钮区域-end-->

    <!--    table表格区域-->
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="projectId"
        :columns="columns"
        :scroll="{x: 1500}"
        :dataSource="dataSource"
        :pagination="false"
        :loading="loading"
        @change="handleTableChange"
        class="j-table-force-nowrap main-table">

        <template slot="text" slot-scope="text">
          <a-tooltip>
            <template slot="title">{{ text }}</template>
            <div class="table-text">{{ text }}</div>
          </a-tooltip>
        </template>

        <template slot="allMoney" slot-scope="text">
          <a-tooltip>
            <template slot="title">{{ formatMoney(text) }}</template>
            <div class="table-text">{{ formatMoney(text) }}</div>
          </a-tooltip>
        </template>
      </a-table>
    </div>
  </a-card>

</div>
</template>

<script>
import IconImg from '@/assets/imgs/icon/icon_statistical_report.png'
import PageHeaderTitle from '../../components/layouts/PageHeaderTitle'
import JYearDate from '../../components/jero/JYearDate'
import {JeroListMixin} from '../../mixins/JeroListMixin'
import {formatMoney} from '@/utils/formatMoney'
import {getAction} from '../../api/manage'
import { MonthData } from './statisticData'

// 对表头进行操作
const columns = [
  {
    title: '',
    align: 'center',
    width: 150,
    dataIndex: 'indexName',
    scopedSlots: {customRender: 'text'}
  },
  // {
  //   title: '1月',
  //   align: 'center',
  //   width: 150,
  //   dataIndex: 'allMoney',
  //   sorter: true,
  //   scopedSlots: {customRender: 'allMoney'}
  // },
]
MonthData.map(tt => {
  columns.push({
    title: tt.name,
    align: 'center',
    width: 150,
    dataIndex: tt.key,
    // sorter: true,
    scopedSlots: {customRender: 'allMoney'}
  })
})
columns.push({
  title: '总计',
  align: 'center',
  width: 150,
  dataIndex: 'total',
  fixed: 'right',
  scopedSlots: {customRender: 'allMoney'}
})

export default {
  name: 'WholePaymentsStatistics',
  components: {PageHeaderTitle, JYearDate},
  mixins: [JeroListMixin],
  data() {
    return {
      IconImg,
      labelCol: {
        xs: {span: 24},
        sm: {span: 5}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 10}
      },
      columns,
      // 给定当年作为确认收入年份默认查询条件
      queryParam: {
        paymentYear: new Date().getFullYear().toString()
      },
      lastQueryParam: {
        paymentYear: new Date().getFullYear().toString()
      },
      url: {
        list: '/statistics/allProjectMoneyStatistics/list',
        exportXlsUrl: '/statistics/allProjectMoneyStatistics/excel'
      },
    }
  },
  methods : {
    formatMoney,
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      let params = this.getQueryParams()//查询条件
      this.loading = true
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          let dataSource = res.result.list
          //  讲树形结构的数据 ，修改成table可以直接展示的数据，默认只有三行数据
          let tableData = [
            {indexName: '确认收入金额', total: res.result.sumOfConfirmAmount},
            {indexName: '开票金额', total: res.result.sumOfBillMoney},
            {indexName: '到账金额', total: res.result.sumOfReallyMoney},
          ]

          dataSource.map((item, index) => {
            let keyItem = MonthData.find(ele => Number(ele.value) === (index + 1))
            if(keyItem) {
              let key = keyItem.key
              tableData[0][key] = item.confirmAmount
              tableData[1][key] = item.billMoney
              tableData[2][key] = item.comeAllMoney
            }
          })
          this.dataSource = tableData

        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    searchReset() {
      this.lastQueryParam = {
        paymentYear: new Date().getFullYear().toString()
      }
      this.queryParam = {
        paymentYear: new Date().getFullYear().toString()
      }
      this.exportSelectedKeys = []
      this.loadData(1)
    },
  }
}
</script>

<style scoped lang="less">
@import '~@assets/less/common.less';
</style>