qmx_page_admin/src/views/create-order/components/order-detail-submodule/InvoiceInfo.vue

<template>
  <div class="invoice-info">
    <info-card title="开票概览">
      <div class="invoice-info-content">
        <div class="invoice-info-item">
          开票状态：{{ getInvoiceStatus(orderDetail?.orderData?.invoiced_status) }}

        </div>
        <div class="invoice-info-item">
          已开票金额：¥{{ formatNumber(invoiceData?.invoiceMoney || 0) }}
        </div>
        <div class="invoice-info-item">
          未开票金额：¥{{ formatNumber(invoiceData?.remainingMoney || 0) }}
        </div>
      </div>
    </info-card>
    <info-card title="开票详情" :length="invoiceList.length || 0" :is-show-length="true">
      <div class="invoice-info-detail">
        <TableCard
          class="invoice-info-content-table"
          :table-data="invoiceList"
          :columns="invoiceColumns"
          width="1108px"
        >
          <template #code_url-header>
            <div class="column-label-cell">
              <div class="column-label-cell-title">开票二维码</div>
              <div class="column-label-cell-tip">支持客户换开或查看发票</div>
            </div>
          </template>
          <template v-slot:code_url="{ row }">
            <span class="column-cell" @click="getInvoiceInfo(row.row)">查看</span>
          </template>
          <template v-slot:invoice_money="{ row }">
            <span>¥{{ formatNumber(row.row.invoice_money) }}</span>
          </template>
          <template v-slot:invoice_status="{ row }">
            <span>{{ backInvoiceStatus(row.row.invoice_status) }}</span>
          </template>
        </TableCard>
      </div>
    </info-card>
    <new-set-order-info
      ref="invoiceRef"
      :show-content="4"
      :show-dialog="showInvoiceDialog"
      :orderInfo="orderData"
      title="开票二维码"
      @close="showInvoiceDialog = false"
    >
      <div style="display:flex;flex-direction:column;" slot="content">
          <span>订单编号：{{selectInvoice.invoice_order_code}}</span>
          <span>开票金额合计：{{selectInvoice.invoice_money / 100}}元</span>
      </div>
    </new-set-order-info>
  </div>
</template>
<script>
import InfoCard from '../../ui/InfoCard.vue';
import TableCard from '../../ui/TableCard.vue';
import newSetOrderInfo from '../newSetOrderInfo.vue';
export default {
  name: 'InvoiceInfo',
  components: {
    InfoCard,
    TableCard,
    newSetOrderInfo
  },
  props: {
    orderDetail: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      invoiceColumns: [
        { prop: 'invoice_number', label: '发票号', width: 160 },
        { prop: 'invoice_code', label: '发票代码', width: 160 },
        { prop: 'invoice_money', label: '关联订单开票金额', width: 160 },
        { prop: 'invoice_status', label: '发票状态', width: 120 },
        { prop: 'code_url', label: '开票二维码', width: 188 },
        { prop: 'operable_time', label: '操作时间', width: 160 },
        { prop: 'operator', label: '操作人', width: 160 }
      ],
      invoiceList: [{
        invoice_number: '20231231',
        invoice_code: '20231231',
        invoice_money: 100022.00,
        invoice_status: '已申请',
        code_url: '查看',
        operable_time: '2023-12-31 13:21:32',
        operator: '张三'
      }],
      invoiceData: {},
      invoiceSta: [
        {v: 0, n: '未开票'},
        {v: 2, n: '全额开票'},
        {v: 3, n: '部分开票'}
      ],
      showInvoiceDialog: false,
      selectInvoice: {},
      orderData: {}
    }
  },
  mounted() {
    this.invoiceData = this.orderDetail?.invoiceData || {}
    this.invoiceList = this.invoiceData?.invoiceInfo || []
    this.orderData = this.orderDetail?.orderData || {}
  },
  methods: {
    formatNumber(num, x = 2) {
      num = Number(num) || 0
      return (num / 100).toFixed(x)
    },
    backInvoiceStatus(val) {
      if (val == 0) {
          return '未申请'
      } else if (val == 1) {
          return '已申请'
      } else if (val == 2) {
          return '已开具'
      } else {
          return '未申请'
      }
    },
    getInvoiceStatus(val) {
      const item = this.invoiceSta.find(item => item.v === val) || {};
      return item.n || '-';
    },
    getInvoiceInfo(item) {
      this.selectInvoice = item
      this.$nextTick(() => {
        this.$refs.invoiceRef.QrCodeImage = item.code_url;
      });
      this.showInvoiceDialog = true;
    },
  },
}
</script>
<style lang="scss" scoped>
.invoice-info {
  .invoice-info-content {
    display: flex;
    align-items: center;
    .invoice-info-item {
      min-width: 255px;
      margin-right: 32px;
      font-size: 14px;
      line-height: 22px;
      color: $gray_10;
    }
  }
  // margin-top: 20px;
  .invoice-info-content-table {
    border-radius: 4px;
    ::v-deep {
      .cell {
        text-align: center;
        font-size: 14px;
        color: $gray_10;
      }
      .has-gutter {
        th {
          background: #F9FAFB;
          .cell {
            padding: 0;
            color: #686868;
            font-weight: 400;
            .column-label-cell-tip {
              color: #2ABED1;
            }
          }
        }
      }
      .column-cell {
        color: $color_main;
        cursor: pointer;
      }
    }
  }
  .num-active {
    color: $color_main;
  }
}
</style>