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:id="{ row }">
            <span class="column-cell" @click="getInvoiceDetailInfo(row.row)">{{ row.row.id }}</span>
          </template>
          <template v-slot:code_url="{ row }">
            <div class="invoice-info-action">
              <span class="column-cell" v-if="row.row.code_url" @click="getInvoiceInfo(row.row)">查看开票二维码</span>
              <span class="column-cell" v-if="showAgainBtn(row.row)" @click="againInvoce(row.row)">重新开票</span>
              <span class="column-cell" v-if="showEditBtn()" @click="editInvoice(row.row)">编辑发票</span>
            </div>
          </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>
    <new-code-model
      ref="invoiceDetailRef"
      :codeDetail="selectInvoice"
    />
  </div>
</template>
<script>
import InfoCard from '../../ui/InfoCard.vue';
import TableCard from '../../ui/TableCard.vue';
import newSetOrderInfo from '../newSetOrderInfo.vue';
import newCodeModel from '@/views/order/components/new-codeModel.vue';
import { mapState } from 'vuex';
export default {
  name: 'InvoiceInfo',
  components: {
    InfoCard,
    TableCard,
    newSetOrderInfo,
    newCodeModel
  },
  data() {
    return {
      invoiceColumns: [
        { prop: 'id', label: '发票ID', width: 160 },
        { prop: 'invoice_serialnum', label: '发票编号', width: 160, render: (row) => row.invoice_serialnum || '-' },
        { 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: {}
    }
  },
  computed: {
     ...mapState({
      orderDetail: state => state.order.orderDetail
    })
  },
  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)
    },
    showAgainBtn(item) {
      /**
       * 1. 超级管理员
       * 2. 销管
       * 3. 客服
       * 4. 行政
       * 5. 财务
       */
      // this.orderDetail.userIdentity
      // 按钮展示权限：发票状态为已开具或开票失败时，且管理后台用户群组为“财务”时才展示，否则不展示；
      const status = item.invoice_status === 1 || item.invoice_status === -1
      const root = Array.isArray(this.orderDetail?.userIdentity) && this.orderDetail?.userIdentity.includes(5)
      const url = item.code_url
      return status && root && url
    },
    showEditBtn() {
      /**
       * 1. 超级管理员
       * 2. 销管
       * 3. 客服
       * 4. 行政
       * 5. 财务
       */
      // this.orderDetail.userIdentity
      // 线下开票
      const applybillStatus = this.orderDetail.orderData?.applybill_status === 2
      const root = Array.isArray(this.orderDetail?.userIdentity) && this.orderDetail?.userIdentity.includes(5)
      return applybillStatus && root
    },
    backInvoiceStatus(val) {
      if (val == -2) {
          return '已冲红'
      } else if (val == -1) {
          return '开票失败'
      } else if (val == 0) {
          return '已申请'
      } else if (val == 1) {
          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;
    },
    againInvoce(item) {
      const { code_url } = item
      const URLS = new URL(code_url)
      const domain = URLS.origin;
      const params = code_url.split('?')[1]
      const path = `${domain}/jy_mobile/invoice/Invoicing?type=Replace&${params}&finance=1`
      window.open(path, '_blank')
    },
    editInvoice(item) {
      const { code_url } = item
      const URLS = new URL(code_url)
      const domain = URLS.origin;
    },
    getInvoiceDetailInfo(item) {
      this.selectInvoice = item;
      this.$refs.invoiceDetailRef.codeShow = 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;
            }
          }
        }
      }
      .invoice-info-action {
        display: flex;
        flex-direction: column;
      }
      .column-cell {
        color: $color_main;
        cursor: pointer;
      }
    }
  }
  .num-active {
    color: $color_main;
  }
}
</style>