income_payments_client/src/views/incomePayments/memberManage/modules/StardsMemberStatisticsModal.vue

<template>
  <j-modal
    :title="unitName + title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    :footer="null"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
<!--      <div class="table-operator">-->
<!--        <a-button type="primary" icon="export" @click="handleExportXls(seriesName + '应收账款')">导出</a-button>-->
<!--      </div>-->
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="projectId"
        :columns="columns"
        :scroll="{x: 1500}"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
        :class="dataSource.length === 0 ? 'show-scroll' : ''"
        class="j-table-force-nowrap main-table">

        <!--        项目名称-->
        <template slot="projectName" slot-scope="text">
          <a-tooltip>
            <!--  primary-color" @click="openDetailModal(record)-->
            <template slot="title">{{ text }}</template>
            <div class="table-text">{{ text }}</div>
          </a-tooltip>
        </template>

        <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>

        <!--              是否打包-->
        <template slot="pack" slot-scope="text, record">
          <status-slot :statu-obj="record" :status-no="text" :status-type="true"></status-slot>
        </template>

        <template slot="footer" v-if="dataSource.length > 0">

          <a-table
            size="middle"
            ref="footTable"
            :rowKey="record => record.id"
            :columns="columnsFooter"
            :scroll="{x: 1500}"
            :dataSource="footerDataSource"
            :showHeader="false"
            :pagination="false"
            class="j-table-force-nowrap footer-table">

            <!--        项目名称-->
            <template slot="projectName" slot-scope="text">
              <!--   primary-color @click="openDetailModal(record)"-->
              <a-tooltip>
                <template slot="title">{{ text }}</template>
                <div class="table-text " >{{ text }}</div>
              </a-tooltip>
            </template>

            <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>
        </template>

      </a-table>
    </a-spin>
  </j-modal>
</template>

<script>
import {getAction} from '@/api/manage'

const defaultSorter = {
  column: 'createTime',
  order: 'desc'
}

export default {
  name: 'StardsMemberStatisticsModal',
  data () {
    return {
      unitName: '', // 单位名称
      title: '详情',
      width: 1000,
      visible: false,
      confirmLoading: false,
      columns: [],
      dataSource: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '50', '100'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      loading: false,
      /* 排序参数 */
      isorter: {
        column: 'createTime',
        order: 'desc',
      },
      url: {
        list: ''
      }
    }
  },
  methods: {
    show (param) {
      this.loadData(param)
      this.visible = true
    },
    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) {
          this.dataSource = res.result.pageList.records
          // let obj = {
          //   id: '1',
          //   title: '总计',
          //   allMoney: res.result.sumOfMoney || '0.00' + '',
          //   comeAllMoney: res.result.sumOfReallyMoney || '0.00' + '',
          //   billMoney: res.result.sumOfBillMoney || '0.00' + '',
          //   confirmAmount: res.result.sumOfConfirmAmount || '0.00' + ''
          // }
          // this.footerDataSource = [obj]
          if (res.result.pageList.total) {
            this.ipagination.total = res.result.pageList.total
          } else {
            this.ipagination.total = 0
          }
        }
        if (this.dataSource.length > 0) {
          this.$nextTick(() => {
            this.setScroll()
          })
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      }).finally(() => {
        this.loading = false
      })
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        if (sorter.order) {
          //   如果当前有列选中筛选条件
          this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
        } else {
          //   没有筛选值则 isorter 重置为初始值
          this.isorter.column = defaultSorter.column
          this.isorter.order = defaultSorter.order
        }

      } else {
        this.isorter.column = defaultSorter.column
        this.isorter.order = defaultSorter.order
      }
      this.ipagination = pagination
      this.loadData()
    },
  }
}
</script>

<style scoped>

</style>