发票信息
<template>
  <div>
    <el-form :model="invoiceForm" ref="invoiceForm" :rules="formRules">
      <data-table operateBtnLayout
                  :columns="columns"
                  :sourceData.sync="invoiceForm.tableData"
                  :showPage="false"
                  :showSelection="false"
                  v-bind="elHeightObj">
        <template slot="paginationLeft">
          <el-row :gutter="10">
            <!-- 发票金额合计 -->
            <el-col :span="6">
              <el-form-item :label="$t('factoringBusinessInfo.invoice_amount_total')">
                <el-input v-model="amountTotal" :disabled="true" style="width: 200px"></el-input>
              </el-form-item>
            </el-col>
            <!-- 发票可抵扣金额 -->
            <el-col :span="6">
              <el-form-item :label="$t('factoringBusinessInfo.invoice_can_deduction_amount')">
                <el-input v-model="deductionAmount" :disabled="true" style="width: 200px"></el-input>
              </el-form-item>
            </el-col>
            <!--<el-col :span="12">
              <div style="float: right">
                <el-pagination @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page.sync="queryParas.pageIndex"
                                :page-sizes="pageSizes"
                                :page-size="queryParas.pageSize"
                                :layout="pageLayout"
                                prev-text="上一页"
                                next-text="下一页"
                                :page-count="pageCount"
                                :total="currentTotal">
                  <span style="text-align: center">{{queryParas.pageIndex}}</span>
                </el-pagination>
              </div>
            </el-col>-->
          </el-row>
        </template>
      </data-table>
    </el-form>
  </div>
</template>
<script>
import { DataTable, authButton, btnImport } from 'newepoch-components'
import * as format from '@/filters/index'
import mixin from '@/pages/mixin'
export default {
  mixins: [mixin],
  components: {
    DataTable,
    authButton,
    btnImport
  },
  props: {
    sourceData: {
      type: Array,
      default () {
        return []
      }
    },
    initFlag: {
      type: Boolean,
      default () {
        return false
      }
    }
  },
  computed: {
    amountTotal () {
      let total = 0
      this.sourceData.forEach(item => {
        if (!this.UtilJs.isEmpty(item.invoiceAmount)) {
          total += +item.invoiceAmount
        }
      })
      return format.thousandFilter(total, 2)
    },
    deductionAmount () {
      let total = 0
      this.sourceData.forEach(item => {
        if (!this.UtilJs.isEmpty(item.availableAmount)) {
          total += +item.availableAmount
        }
      })
      return format.thousandFilter(total, 2)
    }
  },
  data () {
    const { factoringBusinessInfo } = this.$i18n.messages[this.$i18n.locale]
    return {
      formRules: {},
      selectedRows: [],
      indexFlag: 0,
      menuId: '',
      uploadApi: '',
      queryParas: {
        pageIndex: 1,
        pageSize: 10,
        invoiceNo: ''
      },
      pageSizes: [10, 20, 30, 40, 50],
      pageLayout: 'total, sizes, prev, pager, next, jumper',
      pageCount: 7,
      currentTotal: 0,
      invoiceForm: {
        tableData: []
      },
      form: {
        invoice_amount_total: '',
        invoice_can_deduction_amount: ''
      },
      columns: [
        // 发票号码
        {
          prop: 'invoiceNo',
          align: 'left',
          width: '150px',
          label: factoringBusinessInfo.invoice_number
        },
        // 票据名称
        {
          prop: 'invoiceName',
          align: 'left',
          width: '150px',
          label: factoringBusinessInfo.invoice_name
        },
        // 开票日期
        {
          prop: 'openDate',
          align: 'center',
          width: '165px',
          label: factoringBusinessInfo.invoice_date,
          format: row => format.formatDateNull(row.openDate)
        },
        // 发票金额
        {
          prop: 'invoiceAmount',
          align: 'right',
          width: '200px',
          label: factoringBusinessInfo.invoice_amount,
          format: row => format.thousandFilter(row.invoiceAmount, 2)
        },
        // 可抵扣金额
        {
          prop: 'availableAmount',
          align: 'right',
          width: '150px',
          label: factoringBusinessInfo.can_deduction_amount,
          format: row => format.thousandFilter(row.availableAmount, 2)
        },
        // 抵扣金额
        {
          prop: 'usedAmount',
          align: 'right',
          width: '150px',
          label: factoringBusinessInfo.deduction_amount,
          format: row => format.thousandFilter(row.assetInvoiceRelDTO.usedAmount, 2)
        },
        // 发票代码
        {
          prop: 'invoiceCode',
          align: 'left',
          width: '150px',
          label: factoringBusinessInfo.invoice_code
        },
        // 不含税金额
        {
          prop: 'taxExcludingAmount',
          align: 'right',
          width: '150px',
          label: factoringBusinessInfo.no_tax_amount,
          format: row => format.thousandFilter(row.taxExcludingAmount, 2)
        },
        // 校验码
        {
          prop: 'verificationCode',
          align: 'center',
          width: '150px',
          label: factoringBusinessInfo.check_code
        },
        // 发票状态
        {
          prop: 'lastCheckResult',
          align: 'center',
          width: '150px',
          label: factoringBusinessInfo.invoices_check_result,
          format: (row) => {
            if (!this.UtilJs.isEmpty(row.state) && +row.state === 1) {
              return row.lastCheckResult
            } else if (+row.state === 2 || +row.state === 3) {
              return '发票已' + format.formatDict(row.state, 'SCRS0105')
            } else {
              return '-'
            }
          }
        },
        // 备注
        {
          prop: 'remark',
          align: 'center',
          width: '150px',
          label: factoringBusinessInfo.memo,
          format: row => row.remark === '' ? '—' : row.remark
        }
      ]
    }
  },
  methods: {
    // 每页条数变更时
    handleSizeChange (val) {
      this.queryParas.pageSize = val
      this.queryParas.pageIndex = 1
      this.loadTableData(3)
    },
    // 当前页数改变时
    handleCurrentChange (val) {
      this.queryParas.pageIndex = val
      this.loadTableData(2)
    },
    loadTableData (type) {
      this.currentTotal = this.sourceData.length
      if (this.currentTotal && type) {
        // 根据筛选条件筛选
        this.invoiceForm.tableData = this.sourceData.filter(item => {
          return (item.invoiceNo + '').indexOf(this.queryParas.invoiceNo) > -1
        })
        this.currentTotal = this.invoiceForm.tableData.length
        if (type === 1) {
          this.queryParas.pageIndex = 1
          // 根据当前每页条数筛选
          this.invoiceForm.tableData = this.invoiceForm.tableData.filter((item, index) => {
            return index < this.queryParas.pageSize
          })
        } else if (type === 2) {
          // 根据当前页数筛选
          console.log(this.queryParas.pageIndex)
          this.invoiceForm.tableData = this.invoiceForm.tableData.filter((item, index) => {
            return (this.queryParas.pageIndex - 1) * this.queryParas.pageSize <= index && index < this.queryParas.pageIndex * this.queryParas.pageSize
          })
        } else {
          // 根据当前每页条数筛选
          this.invoiceForm.tableData = this.invoiceForm.tableData.filter((item, index) => {
            return index < this.queryParas.pageSize
          })
        }
      } else if (this.currentTotal) {
        // 初始化表格
        this.invoiceForm.tableData = this.sourceData.filter((item, index) => {
          return index < this.queryParas.pageSize
        })
      }
    }
  },
  watch: {
    initFlag (val) {
      if (val) {
        this.loadTableData()
      }
    }
  }
}
</script>
