TakeoutSaaS.TenantUI/apps/web-antd/src/views/finance/invoice/index.vue

<script setup lang="ts">
/**
 * 文件职责：财务中心发票管理页面入口编排。
 */
import { Page } from '@vben/common-ui';

import { Empty, Spin } from 'ant-design-vue';

import InvoiceDetailDrawer from './components/InvoiceDetailDrawer.vue';
import InvoiceFilterBar from './components/InvoiceFilterBar.vue';
import InvoiceIssueDrawer from './components/InvoiceIssueDrawer.vue';
import InvoiceIssueResultModal from './components/InvoiceIssueResultModal.vue';
import InvoiceSegmentTabs from './components/InvoiceSegmentTabs.vue';
import InvoiceSettingsConfirmModal from './components/InvoiceSettingsConfirmModal.vue';
import InvoiceSettingsPanel from './components/InvoiceSettingsPanel.vue';
import InvoiceStatsBar from './components/InvoiceStatsBar.vue';
import InvoiceTableCard from './components/InvoiceTableCard.vue';
import InvoiceVoidConfirmModal from './components/InvoiceVoidConfirmModal.vue';
import { useFinanceInvoicePage } from './composables/useFinanceInvoicePage';

const {
  activeTab,
  canIssue,
  canManageSettings,
  canViewPage,
  canViewRecords,
  canViewSettings,
  canVoid,
  detail,
  filters,
  handlePageChange,
  handleSearch,
  isDetailDrawerOpen,
  isDetailLoading,
  isIssueDetailLoading,
  isIssueDrawerOpen,
  isIssueResultModalOpen,
  isIssueSubmitting,
  isListLoading,
  isSettingsConfirmModalOpen,
  isSettingsLoading,
  isSettingsSaving,
  isVoidModalOpen,
  isVoidSubmitting,
  issueDetail,
  issueForm,
  issueResult,
  issueTargetRecord,
  openDetail,
  openIssue,
  openSettingsConfirmModal,
  openVoid,
  pagination,
  resetSettings,
  rows,
  setActiveTab,
  setDetailDrawerOpen,
  setEndDate,
  setInvoiceType,
  setIssueDrawerOpen,
  setIssueFormContactEmail,
  setIssueFormRemark,
  setIssueResultModalOpen,
  setKeyword,
  setSettingsConfirmModalOpen,
  setSettingsField,
  setStartDate,
  setStatus,
  setVoidModalOpen,
  setVoidReason,
  settingForm,
  stats,
  submitIssue,
  submitSettings,
  submitVoid,
  tabOptions,
  voidForm,
  voidTargetRecord,
} = useFinanceInvoicePage();
</script>

<template>
  <Page title="发票管理" content-class="page-finance-invoice">
    <div class="fi-page">
      <Empty v-if="!canViewPage" description="暂无发票管理页面访问权限" />

      <template v-else>
        <InvoiceSegmentTabs
          :active-tab="activeTab"
          :options="tabOptions"
          @update:active-tab="setActiveTab"
        />

        <section v-show="activeTab === 'records'" class="fi-tab-panel">
          <template v-if="canViewRecords">
            <InvoiceStatsBar :stats="stats" />

            <InvoiceFilterBar
              :filters="filters"
              @update:start-date="setStartDate"
              @update:end-date="setEndDate"
              @update:status="setStatus"
              @update:invoice-type="setInvoiceType"
              @update:keyword="setKeyword"
              @search="handleSearch"
            />

            <InvoiceTableCard
              :rows="rows"
              :loading="isListLoading"
              :pagination="pagination"
              :can-issue="canIssue"
              :can-void="canVoid"
              @page-change="handlePageChange"
              @detail="openDetail"
              @issue="openIssue"
              @void="openVoid"
            />
          </template>
          <Empty v-else description="暂无开票记录访问权限" />
        </section>

        <section v-show="activeTab === 'settings'" class="fi-tab-panel">
          <template v-if="canViewSettings">
            <Spin :spinning="isSettingsLoading">
              <InvoiceSettingsPanel
                :form="settingForm"
                :can-manage-settings="canManageSettings"
                :saving="isSettingsSaving"
                @update:company-name="(value) => setSettingsField('companyName', value)"
                @update:taxpayer-number="(value) => setSettingsField('taxpayerNumber', value)"
                @update:registered-address="(value) => setSettingsField('registeredAddress', value)"
                @update:registered-phone="(value) => setSettingsField('registeredPhone', value)"
                @update:bank-name="(value) => setSettingsField('bankName', value)"
                @update:bank-account="(value) => setSettingsField('bankAccount', value)"
                @update:enable-electronic-normal-invoice="(value) => setSettingsField('enableElectronicNormalInvoice', value)"
                @update:enable-electronic-special-invoice="(value) => setSettingsField('enableElectronicSpecialInvoice', value)"
                @update:enable-auto-issue="(value) => setSettingsField('enableAutoIssue', value)"
                @update:auto-issue-max-amount="(value) => setSettingsField('autoIssueMaxAmount', value)"
                @reset="resetSettings"
                @save="openSettingsConfirmModal"
              />
            </Spin>
          </template>
          <Empty v-else description="暂无发票设置访问权限" />
        </section>
      </template>
    </div>

    <InvoiceIssueDrawer
      :open="isIssueDrawerOpen"
      :submitting="isIssueSubmitting"
      :loading-detail="isIssueDetailLoading"
      :target-record="issueTargetRecord"
      :detail="issueDetail"
      :form="issueForm"
      @close="setIssueDrawerOpen(false)"
      @update:contact-email="setIssueFormContactEmail"
      @update:issue-remark="setIssueFormRemark"
      @submit="submitIssue"
    />

    <InvoiceDetailDrawer
      :open="isDetailDrawerOpen"
      :loading="isDetailLoading"
      :detail="detail"
      @close="setDetailDrawerOpen(false)"
    />

    <InvoiceVoidConfirmModal
      :open="isVoidModalOpen"
      :submitting="isVoidSubmitting"
      :target-record="voidTargetRecord"
      :form="voidForm"
      @close="setVoidModalOpen(false)"
      @update:void-reason="setVoidReason"
      @submit="submitVoid"
    />

    <InvoiceIssueResultModal
      :open="isIssueResultModalOpen"
      :result="issueResult"
      @close="setIssueResultModalOpen(false)"
    />

    <InvoiceSettingsConfirmModal
      :open="isSettingsConfirmModalOpen"
      :submitting="isSettingsSaving"
      :form="settingForm"
      @close="setSettingsConfirmModalOpen(false)"
      @confirm="submitSettings"
    />
  </Page>
</template>

<style lang="less">
@import './styles/index.less';
</style>