feat(finance): 实现发票管理页面与子页面

2026-03-04 15:58:08 +08:00
parent 4690ccdd9d
commit d98926aa3c
28 changed files with 3322 additions and 158 deletions
--- a/apps/web-antd/src/views/finance/invoice/index.vue
+++ b/apps/web-antd/src/views/finance/invoice/index.vue
@@ -0,0 +1,198 @@
+<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>