opms_frontend/src/views/contract/components/DetailsInvoice.vue

<template>
  <!-- 回款计划 -->
  <div class="invoice-container">
    <el-row class="mb10">
      <el-col class="text-right" :span="24">
        <el-button icon="el-icon-plus" size="mini" type="primary" @click="$refs.invoice.init()">新建发票</el-button>
      </el-col>
    </el-row>
    <el-table border :data="invoiceData" height="calc(100% - 50px)">
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        align="center"
        :label="item.label"
        :min-width="item.width"
        :prop="item.prop"
        show-overflow-tooltip>
        <template #default="{ row }">
          <span v-if="item.prop == 'invoiceType'">
            {{ invoiceTypeData.filter((item) => item.key == row.invoiceType)[0].value || '-' }}
          </span>
          <span v-else-if="item.prop == 'approStatus'">
            {{ row.approStatus == '10' ? '未通过' : '已通过' }}
          </span>
          <span v-else-if="item.prop == 'contractAmount'">
            {{ formatPrice(row.contractAmount) }}
          </span>
          <span v-else-if="item.prop == 'invoiceAmount'">
            {{ formatPrice(row.invoiceAmount) }}
          </span>
          <span v-else>{{ row[item.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="$refs.invoicing.init(scope.row.id)">通过</el-button>
        </template>
      </el-table-column>
    </el-table>
    <edit-invoice ref="invoice" :details="details" :invoice-type-data="invoiceTypeData" @invoiceSave="getInvoiceList" />
    <invoicing ref="invoicing" @invoiceSave="getInvoiceList" />
  </div>
</template>

<script>
  import to from 'await-to-js'
  import invoiceApi from '@/api/contract/invoice'
  import EditInvoice from './EditInvoice'
  import Invoicing from './Invoicing'

  export default {
    name: 'DetailsInvoice',
    components: { EditInvoice, Invoicing },
    props: {
      details: {
        type: Object,
        default: () => {},
      },
    },
    data() {
      return {
        invoiceData: [],
        invoiceTypeData: [], //发票类型
        columns: [
          {
            label: '客户名称',
            width: 'auto',
            prop: 'custName',
          },
          {
            label: '合同编号',
            width: '100px',
            prop: 'contractCode',
          },
          {
            label: '合同金额',
            width: '100px',
            prop: 'contractAmount',
          },
          {
            label: '开票金额（元）',
            width: '120px',
            prop: 'invoiceAmount',
          },
          {
            label: '开票日期',
            width: '100px',
            prop: 'invoiceDate',
          },
          {
            label: '实际开票日期',
            width: '100px',
            prop: 'actualInvoiceDate',
          },
          {
            label: '开票类型',
            width: '100px',
            prop: 'invoiceType',
          },
          {
            label: '发票号码',
            width: '100px',
            prop: 'invoiceCode',
          },
          {
            label: '快递单号',
            width: '100px',
            prop: 'courierCode',
          },
          {
            label: '审核状态',
            width: '100px',
            prop: 'approStatus',
          },
          {
            label: '备注',
            width: '100px',
            prop: 'remark',
          },
        ],
      }
    },

    mounted() {
      this.getOptions()
      this.getInvoiceList()
    },

    methods: {
      getOptions() {
        Promise.all([this.getDicts('invoice_type')])
          .then(([invoiceType]) => {
            this.invoiceTypeData = invoiceType.data.values || []
          })
          .catch((err) => console.log(err))
      },
      async getInvoiceList() {
        let params = { contractId: this.details.id, pageNum: 0 }
        const [err, res] = await to(invoiceApi.getList(params))
        if (err) return
        this.invoiceData = res.data.list
      },
    },
  }
</script>

<style lang="scss" scoped>
  .invoice-container {
    height: 100%;
    .mb10 {
      margin-bottom: 10px;
    }
    .collection {
      height: 100%;
      .el-row {
        height: 30px;
      }
    }
    .text-right {
      text-align: right;
    }
  }
</style>