feat(finance): 实现发票管理页面与子页面
This commit is contained in:
@@ -1,159 +1,5 @@
|
||||
/**
|
||||
* 文件职责：财务中心交易流水 API 契约与请求封装。
|
||||
* 文件职责：财务中心 API 聚合导出。
|
||||
*/
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
/** 交易类型筛选值。 */
|
||||
export type FinanceTransactionTypeFilter =
|
||||
| 'all'
|
||||
| 'income'
|
||||
| 'point_redeem'
|
||||
| 'refund'
|
||||
| 'stored_card_recharge';
|
||||
|
||||
/** 交易渠道筛选值。 */
|
||||
export type FinanceTransactionChannelFilter =
|
||||
| 'all'
|
||||
| 'delivery'
|
||||
| 'dine_in'
|
||||
| 'pickup';
|
||||
|
||||
/** 交易支付方式筛选值。 */
|
||||
export type FinanceTransactionPaymentFilter =
|
||||
| 'alipay'
|
||||
| 'all'
|
||||
| 'balance'
|
||||
| 'card'
|
||||
| 'cash'
|
||||
| 'wechat';
|
||||
|
||||
/** 交易流水筛选参数。 */
|
||||
export interface FinanceTransactionFilterQuery {
|
||||
channel?: FinanceTransactionChannelFilter;
|
||||
endDate?: string;
|
||||
keyword?: string;
|
||||
paymentMethod?: FinanceTransactionPaymentFilter;
|
||||
startDate?: string;
|
||||
storeId: string;
|
||||
type?: FinanceTransactionTypeFilter;
|
||||
}
|
||||
|
||||
/** 交易流水列表查询参数。 */
|
||||
export interface FinanceTransactionListQuery extends FinanceTransactionFilterQuery {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
}
|
||||
|
||||
/** 交易流水列表行。 */
|
||||
export interface FinanceTransactionListItemDto {
|
||||
amount: number;
|
||||
channel: string;
|
||||
isIncome: boolean;
|
||||
occurredAt: string;
|
||||
orderNo?: string;
|
||||
paymentMethod: string;
|
||||
remark: string;
|
||||
transactionId: string;
|
||||
transactionNo: string;
|
||||
type: string;
|
||||
typeText: string;
|
||||
}
|
||||
|
||||
/** 交易流水列表结果。 */
|
||||
export interface FinanceTransactionListResultDto {
|
||||
items: FinanceTransactionListItemDto[];
|
||||
page: number;
|
||||
pageIncomeAmount: number;
|
||||
pageRefundAmount: number;
|
||||
pageSize: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
/** 交易流水统计结果。 */
|
||||
export interface FinanceTransactionStatsDto {
|
||||
totalCount: number;
|
||||
totalIncome: number;
|
||||
totalRefund: number;
|
||||
}
|
||||
|
||||
/** 交易流水详情。 */
|
||||
export interface FinanceTransactionDetailDto {
|
||||
amount: number;
|
||||
arrivedAmount?: number;
|
||||
channel: string;
|
||||
customerName: string;
|
||||
customerPhone: string;
|
||||
giftAmount?: number;
|
||||
memberMobileMasked?: string;
|
||||
memberName?: string;
|
||||
occurredAt: string;
|
||||
orderNo?: string;
|
||||
paymentMethod: string;
|
||||
pointBalanceAfterChange?: number;
|
||||
pointChangeAmount?: number;
|
||||
rechargeAmount?: number;
|
||||
refundNo?: string;
|
||||
refundReason?: string;
|
||||
remark: string;
|
||||
storeId: string;
|
||||
transactionId: string;
|
||||
transactionNo: string;
|
||||
type: string;
|
||||
typeText: string;
|
||||
}
|
||||
|
||||
/** 交易流水导出结果。 */
|
||||
export interface FinanceTransactionExportDto {
|
||||
fileContentBase64: string;
|
||||
fileName: string;
|
||||
totalCount: number;
|
||||
}
|
||||
|
||||
/** 查询交易流水列表。 */
|
||||
export async function getFinanceTransactionListApi(
|
||||
params: FinanceTransactionListQuery,
|
||||
) {
|
||||
return requestClient.get<FinanceTransactionListResultDto>(
|
||||
'/finance/transaction/list',
|
||||
{
|
||||
params,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/** 查询交易流水统计。 */
|
||||
export async function getFinanceTransactionStatsApi(
|
||||
params: FinanceTransactionFilterQuery,
|
||||
) {
|
||||
return requestClient.get<FinanceTransactionStatsDto>(
|
||||
'/finance/transaction/stats',
|
||||
{
|
||||
params,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/** 查询交易流水详情。 */
|
||||
export async function getFinanceTransactionDetailApi(params: {
|
||||
storeId: string;
|
||||
transactionId: string;
|
||||
}) {
|
||||
return requestClient.get<FinanceTransactionDetailDto>(
|
||||
'/finance/transaction/detail',
|
||||
{
|
||||
params,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/** 导出交易流水 CSV。 */
|
||||
export async function exportFinanceTransactionCsvApi(
|
||||
params: FinanceTransactionFilterQuery,
|
||||
) {
|
||||
return requestClient.get<FinanceTransactionExportDto>(
|
||||
'/finance/transaction/export',
|
||||
{
|
||||
params,
|
||||
},
|
||||
);
|
||||
}
|
||||
export * from './invoice';
|
||||
export * from './transaction';
|
||||
|
||||
206
apps/web-antd/src/api/finance/invoice.ts
Normal file
206
apps/web-antd/src/api/finance/invoice.ts
Normal file
@@ -0,0 +1,206 @@
|
||||
/**
|
||||
* 文件职责：财务中心发票管理 API 契约与请求封装。
|
||||
*/
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
/** 发票状态筛选值。 */
|
||||
export type FinanceInvoiceStatusFilter = 'all' | 'issued' | 'pending' | 'voided';
|
||||
|
||||
/** 发票类型筛选值。 */
|
||||
export type FinanceInvoiceTypeFilter = 'all' | 'normal' | 'special';
|
||||
|
||||
/** 发票设置详情。 */
|
||||
export interface FinanceInvoiceSettingDto {
|
||||
autoIssueMaxAmount: number;
|
||||
bankAccount?: string;
|
||||
bankName?: string;
|
||||
companyName: string;
|
||||
enableAutoIssue: boolean;
|
||||
enableElectronicNormalInvoice: boolean;
|
||||
enableElectronicSpecialInvoice: boolean;
|
||||
registeredAddress?: string;
|
||||
registeredPhone?: string;
|
||||
taxpayerNumber: string;
|
||||
}
|
||||
|
||||
/** 保存发票设置请求。 */
|
||||
export interface SaveFinanceInvoiceSettingPayload
|
||||
extends FinanceInvoiceSettingDto {}
|
||||
|
||||
/** 发票记录列表查询参数。 */
|
||||
export interface FinanceInvoiceRecordListQuery {
|
||||
endDate?: string;
|
||||
invoiceType?: Exclude<FinanceInvoiceTypeFilter, 'all'>;
|
||||
keyword?: string;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
startDate?: string;
|
||||
status?: Exclude<FinanceInvoiceStatusFilter, 'all'>;
|
||||
}
|
||||
|
||||
/** 发票统计结果。 */
|
||||
export interface FinanceInvoiceStatsDto {
|
||||
currentMonthIssuedAmount: number;
|
||||
currentMonthIssuedCount: number;
|
||||
pendingCount: number;
|
||||
voidedCount: number;
|
||||
}
|
||||
|
||||
/** 发票记录列表项。 */
|
||||
export interface FinanceInvoiceRecordListItemDto {
|
||||
amount: number;
|
||||
applicantName: string;
|
||||
appliedAt: string;
|
||||
companyName: string;
|
||||
invoiceNo: string;
|
||||
invoiceType: string;
|
||||
invoiceTypeText: string;
|
||||
orderNo: string;
|
||||
recordId: string;
|
||||
status: string;
|
||||
statusText: string;
|
||||
}
|
||||
|
||||
/** 发票记录分页结果。 */
|
||||
export interface FinanceInvoiceRecordListResultDto {
|
||||
items: FinanceInvoiceRecordListItemDto[];
|
||||
page: number;
|
||||
pageSize: number;
|
||||
stats: FinanceInvoiceStatsDto;
|
||||
totalCount: number;
|
||||
}
|
||||
|
||||
/** 发票记录详情。 */
|
||||
export interface FinanceInvoiceRecordDetailDto {
|
||||
amount: number;
|
||||
applicantName: string;
|
||||
appliedAt: string;
|
||||
applyRemark?: string;
|
||||
companyName: string;
|
||||
contactEmail?: string;
|
||||
contactPhone?: string;
|
||||
invoiceNo: string;
|
||||
invoiceType: string;
|
||||
invoiceTypeText: string;
|
||||
issueRemark?: string;
|
||||
issuedAt?: string;
|
||||
issuedByUserId?: string;
|
||||
orderNo: string;
|
||||
recordId: string;
|
||||
status: string;
|
||||
statusText: string;
|
||||
taxpayerNumber?: string;
|
||||
voidReason?: string;
|
||||
voidedAt?: string;
|
||||
voidedByUserId?: string;
|
||||
}
|
||||
|
||||
/** 发票开票请求。 */
|
||||
export interface FinanceInvoiceIssuePayload {
|
||||
contactEmail?: string;
|
||||
issueRemark?: string;
|
||||
recordId: string;
|
||||
}
|
||||
|
||||
/** 发票开票结果。 */
|
||||
export interface FinanceInvoiceIssueResultDto {
|
||||
amount: number;
|
||||
companyName: string;
|
||||
contactEmail?: string;
|
||||
invoiceNo: string;
|
||||
issuedAt: string;
|
||||
recordId: string;
|
||||
status: string;
|
||||
statusText: string;
|
||||
}
|
||||
|
||||
/** 发票作废请求。 */
|
||||
export interface FinanceInvoiceVoidPayload {
|
||||
recordId: string;
|
||||
voidReason: string;
|
||||
}
|
||||
|
||||
/** 发票申请请求。 */
|
||||
export interface FinanceInvoiceApplyPayload {
|
||||
amount: number;
|
||||
applicantName: string;
|
||||
appliedAt?: string;
|
||||
applyRemark?: string;
|
||||
companyName: string;
|
||||
contactEmail?: string;
|
||||
contactPhone?: string;
|
||||
invoiceType: Exclude<FinanceInvoiceTypeFilter, 'all'>;
|
||||
orderNo: string;
|
||||
taxpayerNumber?: string;
|
||||
}
|
||||
|
||||
/** 查询发票设置。 */
|
||||
export async function getFinanceInvoiceSettingDetailApi() {
|
||||
return requestClient.get<FinanceInvoiceSettingDto>(
|
||||
'/finance/invoice/settings/detail',
|
||||
);
|
||||
}
|
||||
|
||||
/** 保存发票设置。 */
|
||||
export async function saveFinanceInvoiceSettingApi(
|
||||
payload: SaveFinanceInvoiceSettingPayload,
|
||||
) {
|
||||
return requestClient.post<FinanceInvoiceSettingDto>(
|
||||
'/finance/invoice/settings/save',
|
||||
payload,
|
||||
);
|
||||
}
|
||||
|
||||
/** 查询发票记录列表。 */
|
||||
export async function getFinanceInvoiceRecordListApi(
|
||||
params: FinanceInvoiceRecordListQuery,
|
||||
) {
|
||||
return requestClient.get<FinanceInvoiceRecordListResultDto>(
|
||||
'/finance/invoice/record/list',
|
||||
{
|
||||
params,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/** 查询发票记录详情。 */
|
||||
export async function getFinanceInvoiceRecordDetailApi(params: {
|
||||
recordId: string;
|
||||
}) {
|
||||
return requestClient.get<FinanceInvoiceRecordDetailDto>(
|
||||
'/finance/invoice/record/detail',
|
||||
{
|
||||
params,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/** 执行发票开票。 */
|
||||
export async function issueFinanceInvoiceRecordApi(
|
||||
payload: FinanceInvoiceIssuePayload,
|
||||
) {
|
||||
return requestClient.post<FinanceInvoiceIssueResultDto>(
|
||||
'/finance/invoice/record/issue',
|
||||
payload,
|
||||
);
|
||||
}
|
||||
|
||||
/** 执行发票作废。 */
|
||||
export async function voidFinanceInvoiceRecordApi(
|
||||
payload: FinanceInvoiceVoidPayload,
|
||||
) {
|
||||
return requestClient.post<FinanceInvoiceRecordDetailDto>(
|
||||
'/finance/invoice/record/void',
|
||||
payload,
|
||||
);
|
||||
}
|
||||
|
||||
/** 发起发票申请。 */
|
||||
export async function applyFinanceInvoiceRecordApi(
|
||||
payload: FinanceInvoiceApplyPayload,
|
||||
) {
|
||||
return requestClient.post<FinanceInvoiceRecordDetailDto>(
|
||||
'/finance/invoice/record/apply',
|
||||
payload,
|
||||
);
|
||||
}
|
||||
159
apps/web-antd/src/api/finance/transaction.ts
Normal file
159
apps/web-antd/src/api/finance/transaction.ts
Normal file
@@ -0,0 +1,159 @@
|
||||
/**
|
||||
* 文件职责：财务中心交易流水 API 契约与请求封装。
|
||||
*/
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
/** 交易类型筛选值。 */
|
||||
export type FinanceTransactionTypeFilter =
|
||||
| 'all'
|
||||
| 'income'
|
||||
| 'point_redeem'
|
||||
| 'refund'
|
||||
| 'stored_card_recharge';
|
||||
|
||||
/** 交易渠道筛选值。 */
|
||||
export type FinanceTransactionChannelFilter =
|
||||
| 'all'
|
||||
| 'delivery'
|
||||
| 'dine_in'
|
||||
| 'pickup';
|
||||
|
||||
/** 交易支付方式筛选值。 */
|
||||
export type FinanceTransactionPaymentFilter =
|
||||
| 'alipay'
|
||||
| 'all'
|
||||
| 'balance'
|
||||
| 'card'
|
||||
| 'cash'
|
||||
| 'wechat';
|
||||
|
||||
/** 交易流水筛选参数。 */
|
||||
export interface FinanceTransactionFilterQuery {
|
||||
channel?: FinanceTransactionChannelFilter;
|
||||
endDate?: string;
|
||||
keyword?: string;
|
||||
paymentMethod?: FinanceTransactionPaymentFilter;
|
||||
startDate?: string;
|
||||
storeId: string;
|
||||
type?: FinanceTransactionTypeFilter;
|
||||
}
|
||||
|
||||
/** 交易流水列表查询参数。 */
|
||||
export interface FinanceTransactionListQuery extends FinanceTransactionFilterQuery {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
}
|
||||
|
||||
/** 交易流水列表行。 */
|
||||
export interface FinanceTransactionListItemDto {
|
||||
amount: number;
|
||||
channel: string;
|
||||
isIncome: boolean;
|
||||
occurredAt: string;
|
||||
orderNo?: string;
|
||||
paymentMethod: string;
|
||||
remark: string;
|
||||
transactionId: string;
|
||||
transactionNo: string;
|
||||
type: string;
|
||||
typeText: string;
|
||||
}
|
||||
|
||||
/** 交易流水列表结果。 */
|
||||
export interface FinanceTransactionListResultDto {
|
||||
items: FinanceTransactionListItemDto[];
|
||||
page: number;
|
||||
pageIncomeAmount: number;
|
||||
pageRefundAmount: number;
|
||||
pageSize: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
/** 交易流水统计结果。 */
|
||||
export interface FinanceTransactionStatsDto {
|
||||
totalCount: number;
|
||||
totalIncome: number;
|
||||
totalRefund: number;
|
||||
}
|
||||
|
||||
/** 交易流水详情。 */
|
||||
export interface FinanceTransactionDetailDto {
|
||||
amount: number;
|
||||
arrivedAmount?: number;
|
||||
channel: string;
|
||||
customerName: string;
|
||||
customerPhone: string;
|
||||
giftAmount?: number;
|
||||
memberMobileMasked?: string;
|
||||
memberName?: string;
|
||||
occurredAt: string;
|
||||
orderNo?: string;
|
||||
paymentMethod: string;
|
||||
pointBalanceAfterChange?: number;
|
||||
pointChangeAmount?: number;
|
||||
rechargeAmount?: number;
|
||||
refundNo?: string;
|
||||
refundReason?: string;
|
||||
remark: string;
|
||||
storeId: string;
|
||||
transactionId: string;
|
||||
transactionNo: string;
|
||||
type: string;
|
||||
typeText: string;
|
||||
}
|
||||
|
||||
/** 交易流水导出结果。 */
|
||||
export interface FinanceTransactionExportDto {
|
||||
fileContentBase64: string;
|
||||
fileName: string;
|
||||
totalCount: number;
|
||||
}
|
||||
|
||||
/** 查询交易流水列表。 */
|
||||
export async function getFinanceTransactionListApi(
|
||||
params: FinanceTransactionListQuery,
|
||||
) {
|
||||
return requestClient.get<FinanceTransactionListResultDto>(
|
||||
'/finance/transaction/list',
|
||||
{
|
||||
params,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/** 查询交易流水统计。 */
|
||||
export async function getFinanceTransactionStatsApi(
|
||||
params: FinanceTransactionFilterQuery,
|
||||
) {
|
||||
return requestClient.get<FinanceTransactionStatsDto>(
|
||||
'/finance/transaction/stats',
|
||||
{
|
||||
params,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/** 查询交易流水详情。 */
|
||||
export async function getFinanceTransactionDetailApi(params: {
|
||||
storeId: string;
|
||||
transactionId: string;
|
||||
}) {
|
||||
return requestClient.get<FinanceTransactionDetailDto>(
|
||||
'/finance/transaction/detail',
|
||||
{
|
||||
params,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/** 导出交易流水 CSV。 */
|
||||
export async function exportFinanceTransactionCsvApi(
|
||||
params: FinanceTransactionFilterQuery,
|
||||
) {
|
||||
return requestClient.get<FinanceTransactionExportDto>(
|
||||
'/finance/transaction/export',
|
||||
{
|
||||
params,
|
||||
},
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：发票记录详情抽屉。
|
||||
*/
|
||||
import type { FinanceInvoiceRecordDetailDto } from '#/api/finance';
|
||||
|
||||
import { Button, Drawer, Empty, Spin, Tag } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
formatCurrency,
|
||||
resolveInvoiceStatusTagColor,
|
||||
resolveInvoiceTypeTagColor,
|
||||
} from '../composables/invoice-page/helpers';
|
||||
|
||||
interface Props {
|
||||
detail: FinanceInvoiceRecordDetailDto | null;
|
||||
loading: boolean;
|
||||
open: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Drawer
|
||||
:open="props.open"
|
||||
width="620"
|
||||
:title="`发票详情 ${props.detail?.invoiceNo ?? ''}`"
|
||||
@close="emit('close')"
|
||||
>
|
||||
<Spin :spinning="props.loading">
|
||||
<template v-if="props.detail">
|
||||
<div class="fi-section">
|
||||
<div class="fi-section-title">基本信息</div>
|
||||
<div class="fi-info-grid">
|
||||
<div>
|
||||
<span class="label">发票号码：</span>
|
||||
<span class="fi-mono">{{ props.detail.invoiceNo }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">状态：</span>
|
||||
<Tag :color="resolveInvoiceStatusTagColor(props.detail.status)">
|
||||
{{ props.detail.statusText }}
|
||||
</Tag>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">申请人：</span>
|
||||
<span>{{ props.detail.applicantName || '--' }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">发票类型：</span>
|
||||
<Tag :color="resolveInvoiceTypeTagColor(props.detail.invoiceType)">
|
||||
{{ props.detail.invoiceTypeText || '--' }}
|
||||
</Tag>
|
||||
</div>
|
||||
<div class="full">
|
||||
<span class="label">公司抬头：</span>
|
||||
<span>{{ props.detail.companyName || '--' }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">纳税人识别号：</span>
|
||||
<span class="fi-mono">{{ props.detail.taxpayerNumber || '--' }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">开票金额：</span>
|
||||
<span class="fi-amount-strong">{{ formatCurrency(props.detail.amount) }}</span>
|
||||
</div>
|
||||
<div class="full">
|
||||
<span class="label">关联订单：</span>
|
||||
<span class="fi-mono">{{ props.detail.orderNo || '--' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fi-section">
|
||||
<div class="fi-section-title">联系信息</div>
|
||||
<div class="fi-info-grid">
|
||||
<div>
|
||||
<span class="label">接收邮箱：</span>
|
||||
<span>{{ props.detail.contactEmail || '--' }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">联系电话：</span>
|
||||
<span>{{ props.detail.contactPhone || '--' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fi-section">
|
||||
<div class="fi-section-title">状态记录</div>
|
||||
<div class="fi-timeline">
|
||||
<div class="fi-timeline-item">
|
||||
<span class="text">提交申请</span>
|
||||
<span class="time">{{ props.detail.appliedAt }}</span>
|
||||
</div>
|
||||
<div v-if="props.detail.issuedAt" class="fi-timeline-item">
|
||||
<span class="text">开票完成</span>
|
||||
<span class="time">{{ props.detail.issuedAt }}</span>
|
||||
</div>
|
||||
<div v-if="props.detail.voidedAt" class="fi-timeline-item">
|
||||
<span class="text">发票作废</span>
|
||||
<span class="time">{{ props.detail.voidedAt }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fi-section">
|
||||
<div class="fi-section-title">备注信息</div>
|
||||
<div class="fi-remark-box">
|
||||
<div class="fi-remark-line">
|
||||
<span class="label">申请备注：</span>
|
||||
<span>{{ props.detail.applyRemark || '无' }}</span>
|
||||
</div>
|
||||
<div class="fi-remark-line">
|
||||
<span class="label">开票备注：</span>
|
||||
<span>{{ props.detail.issueRemark || '无' }}</span>
|
||||
</div>
|
||||
<div class="fi-remark-line">
|
||||
<span class="label">作废原因：</span>
|
||||
<span>{{ props.detail.voidReason || '无' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<Empty v-else description="暂无发票详情" />
|
||||
</Spin>
|
||||
|
||||
<template #footer>
|
||||
<Button @click="emit('close')">关闭</Button>
|
||||
</template>
|
||||
</Drawer>
|
||||
</template>
|
||||
@@ -0,0 +1,101 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：发票记录筛选工具栏。
|
||||
*/
|
||||
import type { FinanceInvoiceFilterState } from '../types';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { Input, Select } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
INVOICE_STATUS_OPTIONS,
|
||||
INVOICE_TYPE_OPTIONS,
|
||||
} from '../composables/invoice-page/constants';
|
||||
|
||||
interface Props {
|
||||
filters: FinanceInvoiceFilterState;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'search'): void;
|
||||
(event: 'update:endDate', value: string): void;
|
||||
(event: 'update:invoiceType', value: string): void;
|
||||
(event: 'update:keyword', value: string): void;
|
||||
(event: 'update:startDate', value: string): void;
|
||||
(event: 'update:status', value: string): void;
|
||||
}>();
|
||||
|
||||
function handleStartDateChange(value: string | undefined) {
|
||||
emit('update:startDate', String(value ?? ''));
|
||||
emit('search');
|
||||
}
|
||||
|
||||
function handleEndDateChange(value: string | undefined) {
|
||||
emit('update:endDate', String(value ?? ''));
|
||||
emit('search');
|
||||
}
|
||||
|
||||
function handleStatusChange(value: unknown) {
|
||||
emit('update:status', String(value ?? 'all'));
|
||||
emit('search');
|
||||
}
|
||||
|
||||
function handleInvoiceTypeChange(value: unknown) {
|
||||
emit('update:invoiceType', String(value ?? 'all'));
|
||||
emit('search');
|
||||
}
|
||||
|
||||
function handleKeywordChange(value: string | undefined) {
|
||||
emit('update:keyword', String(value ?? ''));
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fi-toolbar">
|
||||
<Input
|
||||
class="fi-date-input"
|
||||
type="date"
|
||||
:value="props.filters.startDate"
|
||||
@update:value="(value) => handleStartDateChange(value)"
|
||||
/>
|
||||
<span class="fi-date-sep">至</span>
|
||||
<Input
|
||||
class="fi-date-input"
|
||||
type="date"
|
||||
:value="props.filters.endDate"
|
||||
@update:value="(value) => handleEndDateChange(value)"
|
||||
/>
|
||||
|
||||
<Select
|
||||
class="fi-status-select"
|
||||
:value="props.filters.status"
|
||||
:options="INVOICE_STATUS_OPTIONS"
|
||||
@update:value="(value) => handleStatusChange(value)"
|
||||
/>
|
||||
|
||||
<Select
|
||||
class="fi-type-select"
|
||||
:value="props.filters.invoiceType"
|
||||
:options="INVOICE_TYPE_OPTIONS"
|
||||
@update:value="(value) => handleInvoiceTypeChange(value)"
|
||||
/>
|
||||
|
||||
<div class="fi-toolbar-spacer" />
|
||||
|
||||
<Input
|
||||
class="fi-search"
|
||||
:value="props.filters.keyword"
|
||||
placeholder="搜索发票号码/公司名"
|
||||
allow-clear
|
||||
@update:value="(value) => handleKeywordChange(value)"
|
||||
@press-enter="emit('search')"
|
||||
>
|
||||
<template #prefix>
|
||||
<IconifyIcon icon="lucide:search" class="fi-search-icon" />
|
||||
</template>
|
||||
</Input>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,121 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：发票开票抽屉。
|
||||
*/
|
||||
import type {
|
||||
FinanceInvoiceRecordDetailDto,
|
||||
FinanceInvoiceRecordListItemDto,
|
||||
} from '#/api/finance';
|
||||
import type { FinanceInvoiceIssueFormState } from '../types';
|
||||
|
||||
import { Button, Drawer, Form, Input, Spin, Tag } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
formatCurrency,
|
||||
resolveInvoiceTypeTagColor,
|
||||
} from '../composables/invoice-page/helpers';
|
||||
|
||||
interface Props {
|
||||
detail: FinanceInvoiceRecordDetailDto | null;
|
||||
form: FinanceInvoiceIssueFormState;
|
||||
loadingDetail: boolean;
|
||||
open: boolean;
|
||||
submitting: boolean;
|
||||
targetRecord: FinanceInvoiceRecordListItemDto | null;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void;
|
||||
(event: 'submit'): void;
|
||||
(event: 'update:contactEmail', value: string): void;
|
||||
(event: 'update:issueRemark', value: string): void;
|
||||
}>();
|
||||
|
||||
function toStringValue(value: string | undefined) {
|
||||
return String(value ?? '');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Drawer
|
||||
:open="props.open"
|
||||
width="560"
|
||||
title="发票开票"
|
||||
@close="emit('close')"
|
||||
>
|
||||
<Spin :spinning="props.loadingDetail">
|
||||
<div class="fi-section">
|
||||
<div class="fi-section-title">开票信息</div>
|
||||
<div class="fi-info-grid">
|
||||
<div>
|
||||
<span class="label">发票号码：</span>
|
||||
<span class="fi-mono">{{ props.targetRecord?.invoiceNo || '--' }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">发票类型：</span>
|
||||
<Tag
|
||||
:color="resolveInvoiceTypeTagColor(props.targetRecord?.invoiceType || '')"
|
||||
>
|
||||
{{ props.targetRecord?.invoiceTypeText || '--' }}
|
||||
</Tag>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">申请人：</span>
|
||||
<span>{{ props.targetRecord?.applicantName || '--' }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">开票金额：</span>
|
||||
<span class="fi-amount-strong">{{ formatCurrency(Number(props.targetRecord?.amount || 0)) }}</span>
|
||||
</div>
|
||||
<div class="full">
|
||||
<span class="label">公司抬头：</span>
|
||||
<span>{{ props.targetRecord?.companyName || '--' }}</span>
|
||||
</div>
|
||||
<div class="full">
|
||||
<span class="label">关联订单：</span>
|
||||
<span class="fi-mono">{{ props.targetRecord?.orderNo || '--' }}</span>
|
||||
</div>
|
||||
<div class="full">
|
||||
<span class="label">纳税人识别号：</span>
|
||||
<span class="fi-mono">{{ props.detail?.taxpayerNumber || '--' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fi-section">
|
||||
<div class="fi-section-title">开票补充信息</div>
|
||||
<Form layout="vertical">
|
||||
<Form.Item label="接收邮箱">
|
||||
<Input
|
||||
:value="props.form.contactEmail"
|
||||
placeholder="请输入开票接收邮箱"
|
||||
@update:value="(value) => emit('update:contactEmail', toStringValue(value))"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="开票备注">
|
||||
<Input.TextArea
|
||||
:value="props.form.issueRemark"
|
||||
placeholder="请输入开票备注（选填）"
|
||||
:maxlength="200"
|
||||
:rows="4"
|
||||
show-count
|
||||
@update:value="(value) => emit('update:issueRemark', toStringValue(value))"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</Spin>
|
||||
|
||||
<template #footer>
|
||||
<div class="fi-drawer-footer">
|
||||
<Button @click="emit('close')">取消</Button>
|
||||
<Button type="primary" :loading="props.submitting" @click="emit('submit')">
|
||||
确认开票
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
</Drawer>
|
||||
</template>
|
||||
@@ -0,0 +1,62 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：发票开票成功结果弹窗。
|
||||
*/
|
||||
import type { FinanceInvoiceIssueResultDto } from '#/api/finance';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
|
||||
import { formatCurrency } from '../composables/invoice-page/helpers';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
result: FinanceInvoiceIssueResultDto | null;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal
|
||||
:open="props.open"
|
||||
title="开票完成"
|
||||
:footer="null"
|
||||
@cancel="emit('close')"
|
||||
>
|
||||
<div class="fi-issue-result">
|
||||
<div class="fi-result-title">发票已成功开具</div>
|
||||
|
||||
<div class="fi-result-list">
|
||||
<div class="fi-result-line">
|
||||
<span class="label">发票号码</span>
|
||||
<span class="value fi-mono">{{ props.result?.invoiceNo || '--' }}</span>
|
||||
</div>
|
||||
<div class="fi-result-line">
|
||||
<span class="label">公司抬头</span>
|
||||
<span class="value">{{ props.result?.companyName || '--' }}</span>
|
||||
</div>
|
||||
<div class="fi-result-line">
|
||||
<span class="label">开票金额</span>
|
||||
<span class="value">{{ formatCurrency(Number(props.result?.amount || 0)) }}</span>
|
||||
</div>
|
||||
<div class="fi-result-line">
|
||||
<span class="label">接收邮箱</span>
|
||||
<span class="value">{{ props.result?.contactEmail || '--' }}</span>
|
||||
</div>
|
||||
<div class="fi-result-line">
|
||||
<span class="label">开票时间</span>
|
||||
<span class="value">{{ props.result?.issuedAt || '--' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fi-result-footer">
|
||||
<Button type="primary" @click="emit('close')">我知道了</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
@@ -0,0 +1,29 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：发票管理分段切换栏。
|
||||
*/
|
||||
import type { FinanceInvoiceTabKey } from '../types';
|
||||
|
||||
import { Segmented } from 'ant-design-vue';
|
||||
|
||||
interface Props {
|
||||
activeTab: FinanceInvoiceTabKey;
|
||||
options: Array<{ label: string; value: FinanceInvoiceTabKey }>;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:activeTab', value: FinanceInvoiceTabKey): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="props.options.length > 0" class="fi-seg-wrap">
|
||||
<Segmented
|
||||
:value="props.activeTab"
|
||||
:options="props.options"
|
||||
@update:value="(value) => emit('update:activeTab', value as FinanceInvoiceTabKey)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,72 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：保存发票设置确认弹窗。
|
||||
*/
|
||||
import type { FinanceInvoiceSettingFormState } from '../types';
|
||||
|
||||
import { Modal } from 'ant-design-vue';
|
||||
|
||||
import { formatCurrency } from '../composables/invoice-page/helpers';
|
||||
|
||||
interface Props {
|
||||
form: FinanceInvoiceSettingFormState;
|
||||
open: boolean;
|
||||
submitting: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void;
|
||||
(event: 'confirm'): void;
|
||||
}>();
|
||||
|
||||
function resolveEnabledText(value: boolean) {
|
||||
return value ? '已开启' : '已关闭';
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal
|
||||
:open="props.open"
|
||||
title="确认保存发票设置"
|
||||
ok-text="确认保存"
|
||||
cancel-text="取消"
|
||||
:confirm-loading="props.submitting"
|
||||
@ok="emit('confirm')"
|
||||
@cancel="emit('close')"
|
||||
>
|
||||
<div class="fi-settings-confirm">
|
||||
<p class="fi-settings-desc">
|
||||
即将更新企业开票信息与开票规则，请确认以下关键配置：
|
||||
</p>
|
||||
|
||||
<div class="fi-settings-list">
|
||||
<div class="fi-settings-line">
|
||||
<span class="label">企业名称</span>
|
||||
<span class="value">{{ props.form.companyName || '--' }}</span>
|
||||
</div>
|
||||
<div class="fi-settings-line">
|
||||
<span class="label">纳税人识别号</span>
|
||||
<span class="value fi-mono">{{ props.form.taxpayerNumber || '--' }}</span>
|
||||
</div>
|
||||
<div class="fi-settings-line">
|
||||
<span class="label">电子普通发票</span>
|
||||
<span class="value">{{ resolveEnabledText(props.form.enableElectronicNormalInvoice) }}</span>
|
||||
</div>
|
||||
<div class="fi-settings-line">
|
||||
<span class="label">电子专用发票</span>
|
||||
<span class="value">{{ resolveEnabledText(props.form.enableElectronicSpecialInvoice) }}</span>
|
||||
</div>
|
||||
<div class="fi-settings-line">
|
||||
<span class="label">自动开票</span>
|
||||
<span class="value">{{ resolveEnabledText(props.form.enableAutoIssue) }}</span>
|
||||
</div>
|
||||
<div class="fi-settings-line">
|
||||
<span class="label">自动开票上限</span>
|
||||
<span class="value">{{ formatCurrency(Number(props.form.autoIssueMaxAmount || 0)) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
@@ -0,0 +1,171 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：发票设置表单区域。
|
||||
*/
|
||||
import type { FinanceInvoiceSettingFormState } from '../types';
|
||||
|
||||
import { Button, Card, Divider, Form, Input, InputNumber, Switch } from 'ant-design-vue';
|
||||
|
||||
interface Props {
|
||||
canManageSettings: boolean;
|
||||
form: FinanceInvoiceSettingFormState;
|
||||
saving: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'reset'): void;
|
||||
(event: 'save'): void;
|
||||
(event: 'update:autoIssueMaxAmount', value: number): void;
|
||||
(event: 'update:bankAccount', value: string): void;
|
||||
(event: 'update:bankName', value: string): void;
|
||||
(event: 'update:companyName', value: string): void;
|
||||
(event: 'update:enableAutoIssue', value: boolean): void;
|
||||
(event: 'update:enableElectronicNormalInvoice', value: boolean): void;
|
||||
(event: 'update:enableElectronicSpecialInvoice', value: boolean): void;
|
||||
(event: 'update:registeredAddress', value: string): void;
|
||||
(event: 'update:registeredPhone', value: string): void;
|
||||
(event: 'update:taxpayerNumber', value: string): void;
|
||||
}>();
|
||||
|
||||
function toStringValue(value: string | undefined) {
|
||||
return String(value ?? '');
|
||||
}
|
||||
|
||||
function toNumberValue(value: null | number | string) {
|
||||
const numeric = Number(value ?? 0);
|
||||
return Number.isFinite(numeric) ? numeric : 0;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fi-settings">
|
||||
<Card>
|
||||
<div class="fi-section-hd">企业开票信息</div>
|
||||
<Form layout="vertical">
|
||||
<div class="fi-form-grid">
|
||||
<Form.Item label="企业名称" required>
|
||||
<Input
|
||||
:value="props.form.companyName"
|
||||
placeholder="请输入企业全称"
|
||||
:disabled="!props.canManageSettings"
|
||||
@update:value="(value) => emit('update:companyName', toStringValue(value))"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="纳税人识别号" required>
|
||||
<Input
|
||||
:value="props.form.taxpayerNumber"
|
||||
placeholder="请输入统一社会信用代码"
|
||||
:disabled="!props.canManageSettings"
|
||||
@update:value="(value) => emit('update:taxpayerNumber', toStringValue(value))"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="注册地址">
|
||||
<Input
|
||||
:value="props.form.registeredAddress"
|
||||
placeholder="请输入注册地址"
|
||||
:disabled="!props.canManageSettings"
|
||||
@update:value="(value) => emit('update:registeredAddress', toStringValue(value))"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="注册电话">
|
||||
<Input
|
||||
:value="props.form.registeredPhone"
|
||||
placeholder="请输入注册电话"
|
||||
:disabled="!props.canManageSettings"
|
||||
@update:value="(value) => emit('update:registeredPhone', toStringValue(value))"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="开户银行">
|
||||
<Input
|
||||
:value="props.form.bankName"
|
||||
placeholder="请输入开户银行名称"
|
||||
:disabled="!props.canManageSettings"
|
||||
@update:value="(value) => emit('update:bankName', toStringValue(value))"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="银行账号">
|
||||
<Input
|
||||
:value="props.form.bankAccount"
|
||||
placeholder="请输入银行账号"
|
||||
:disabled="!props.canManageSettings"
|
||||
@update:value="(value) => emit('update:bankAccount', toStringValue(value))"
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
</Form>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<div class="fi-section-hd">发票类型设置</div>
|
||||
<div class="fi-toggle-row">
|
||||
<Switch
|
||||
:checked="props.form.enableElectronicNormalInvoice"
|
||||
:disabled="!props.canManageSettings"
|
||||
@update:checked="(value) => emit('update:enableElectronicNormalInvoice', Boolean(value))"
|
||||
/>
|
||||
<span class="fi-toggle-label">电子普通发票</span>
|
||||
</div>
|
||||
|
||||
<div class="fi-toggle-row">
|
||||
<Switch
|
||||
:checked="props.form.enableElectronicSpecialInvoice"
|
||||
:disabled="!props.canManageSettings"
|
||||
@update:checked="(value) => emit('update:enableElectronicSpecialInvoice', Boolean(value))"
|
||||
/>
|
||||
<span class="fi-toggle-label">电子专用发票</span>
|
||||
<span class="fi-toggle-hint">（需先完成税务资质认证）</span>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<div class="fi-section-hd">自动开票设置</div>
|
||||
<div class="fi-toggle-row">
|
||||
<Switch
|
||||
:checked="props.form.enableAutoIssue"
|
||||
:disabled="!props.canManageSettings"
|
||||
@update:checked="(value) => emit('update:enableAutoIssue', Boolean(value))"
|
||||
/>
|
||||
<span class="fi-toggle-label">自动开票</span>
|
||||
<span class="fi-toggle-hint">开启后，顾客申请发票将自动开具</span>
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Form layout="vertical" class="fi-auto-form">
|
||||
<Form.Item label="单张发票最大金额">
|
||||
<InputNumber
|
||||
class="fi-max-amount-input"
|
||||
:value="props.form.autoIssueMaxAmount"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:step="100"
|
||||
:disabled="!props.canManageSettings"
|
||||
:formatter="(value) => `￥ ${value}`"
|
||||
:parser="(value) => String(value || '').replace(/￥\s?/g, '')"
|
||||
@update:value="(value) => emit('update:autoIssueMaxAmount', toNumberValue(value))"
|
||||
/>
|
||||
<div class="fi-toggle-hint">超过此金额的发票需人工审核后开具</div>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
|
||||
<div class="fi-save-bar">
|
||||
<Button :disabled="!props.canManageSettings" @click="emit('reset')">重置</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
:disabled="!props.canManageSettings"
|
||||
:loading="props.saving"
|
||||
@click="emit('save')"
|
||||
>
|
||||
保存设置
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,47 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：发票记录统计卡片栏。
|
||||
*/
|
||||
import type { FinanceInvoiceStatsDto } from '#/api/finance';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { formatCurrency } from '../composables/invoice-page/helpers';
|
||||
|
||||
interface Props {
|
||||
stats: FinanceInvoiceStatsDto;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fi-stats">
|
||||
<div class="fi-stat-card">
|
||||
<div class="fi-stat-label">
|
||||
<IconifyIcon icon="lucide:receipt-text" class="fi-stat-icon" />
|
||||
<span>本月开票</span>
|
||||
</div>
|
||||
<div class="fi-stat-val">{{ formatCurrency(props.stats.currentMonthIssuedAmount) }}</div>
|
||||
<div class="fi-stat-sub">共 {{ props.stats.currentMonthIssuedCount }} 张</div>
|
||||
</div>
|
||||
|
||||
<div class="fi-stat-card warn">
|
||||
<div class="fi-stat-label">
|
||||
<IconifyIcon icon="lucide:clock" class="fi-stat-icon" />
|
||||
<span>待开票</span>
|
||||
</div>
|
||||
<div class="fi-stat-val">{{ props.stats.pendingCount }}</div>
|
||||
<div class="fi-stat-sub">张待处理</div>
|
||||
</div>
|
||||
|
||||
<div class="fi-stat-card danger">
|
||||
<div class="fi-stat-label">
|
||||
<IconifyIcon icon="lucide:ban" class="fi-stat-icon" />
|
||||
<span>已作废</span>
|
||||
</div>
|
||||
<div class="fi-stat-val">{{ props.stats.voidedCount }}</div>
|
||||
<div class="fi-stat-sub">张已作废</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,206 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：发票记录表格与分页。
|
||||
*/
|
||||
import type { TablePaginationConfig, TableProps } from 'ant-design-vue';
|
||||
|
||||
import type { FinanceInvoiceRecordListItemDto } from '#/api/finance';
|
||||
import type { VNode } from 'vue';
|
||||
|
||||
import { h } from 'vue';
|
||||
|
||||
import { Button, Table, Tag } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
formatCurrency,
|
||||
isIssuedInvoice,
|
||||
isPendingInvoice,
|
||||
resolveInvoiceStatusTagColor,
|
||||
resolveInvoiceTypeTagColor,
|
||||
} from '../composables/invoice-page/helpers';
|
||||
|
||||
interface PaginationState {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
totalCount: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
canIssue: boolean;
|
||||
canVoid: boolean;
|
||||
loading: boolean;
|
||||
pagination: PaginationState;
|
||||
rows: FinanceInvoiceRecordListItemDto[];
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'detail', recordId: string): void;
|
||||
(event: 'issue', row: FinanceInvoiceRecordListItemDto): void;
|
||||
(event: 'pageChange', page: number, pageSize: number): void;
|
||||
(event: 'void', row: FinanceInvoiceRecordListItemDto): void;
|
||||
}>();
|
||||
|
||||
function renderActionButtons(row: FinanceInvoiceRecordListItemDto) {
|
||||
const buttons: VNode[] = [];
|
||||
|
||||
if (isPendingInvoice(row.status)) {
|
||||
if (props.canIssue) {
|
||||
buttons.push(
|
||||
h(
|
||||
Button,
|
||||
{
|
||||
type: 'link',
|
||||
class: 'fi-link-action',
|
||||
onClick: () => emit('issue', row),
|
||||
},
|
||||
() => '开票',
|
||||
),
|
||||
);
|
||||
} else {
|
||||
buttons.push(
|
||||
h(
|
||||
Button,
|
||||
{
|
||||
type: 'link',
|
||||
class: 'fi-link-action',
|
||||
onClick: () => emit('detail', row.recordId),
|
||||
},
|
||||
() => '查看',
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return h('div', { class: 'fi-action-wrap' }, buttons);
|
||||
}
|
||||
|
||||
buttons.push(
|
||||
h(
|
||||
Button,
|
||||
{
|
||||
type: 'link',
|
||||
class: 'fi-link-action',
|
||||
onClick: () => emit('detail', row.recordId),
|
||||
},
|
||||
() => '查看',
|
||||
),
|
||||
);
|
||||
|
||||
if (isIssuedInvoice(row.status) && props.canVoid) {
|
||||
buttons.push(
|
||||
h(
|
||||
Button,
|
||||
{
|
||||
type: 'link',
|
||||
danger: true,
|
||||
class: 'fi-link-action',
|
||||
onClick: () => emit('void', row),
|
||||
},
|
||||
() => '作废',
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return h('div', { class: 'fi-action-wrap' }, buttons);
|
||||
}
|
||||
|
||||
const columns: TableProps['columns'] = [
|
||||
{
|
||||
title: '发票号码',
|
||||
dataIndex: 'invoiceNo',
|
||||
width: 190,
|
||||
customRender: ({ record }) =>
|
||||
h(
|
||||
'span',
|
||||
{
|
||||
class: 'fi-mono',
|
||||
},
|
||||
String(record.invoiceNo || '--'),
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '申请人 / 公司名',
|
||||
dataIndex: 'companyName',
|
||||
width: 220,
|
||||
customRender: ({ record }) =>
|
||||
h('div', { class: 'fi-company-cell' }, [
|
||||
h('div', { class: 'fi-applicant' }, String(record.applicantName || '--')),
|
||||
h('div', { class: 'fi-company' }, String(record.companyName || '--')),
|
||||
]),
|
||||
},
|
||||
{
|
||||
title: '发票类型',
|
||||
dataIndex: 'invoiceTypeText',
|
||||
width: 110,
|
||||
customRender: ({ record }) =>
|
||||
h(
|
||||
Tag,
|
||||
{ color: resolveInvoiceTypeTagColor(String(record.invoiceType || '')) },
|
||||
() => String(record.invoiceTypeText || '--'),
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '金额',
|
||||
dataIndex: 'amount',
|
||||
width: 130,
|
||||
align: 'right',
|
||||
customRender: ({ record }) =>
|
||||
h('span', { class: 'fi-amount' }, formatCurrency(Number(record.amount || 0))),
|
||||
},
|
||||
{
|
||||
title: '关联订单',
|
||||
dataIndex: 'orderNo',
|
||||
width: 170,
|
||||
customRender: ({ text }) =>
|
||||
h('span', { class: 'fi-mono' }, String(text || '--')),
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'statusText',
|
||||
width: 100,
|
||||
customRender: ({ record }) =>
|
||||
h(
|
||||
Tag,
|
||||
{ color: resolveInvoiceStatusTagColor(String(record.status || '')) },
|
||||
() => String(record.statusText || '--'),
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '申请时间',
|
||||
dataIndex: 'appliedAt',
|
||||
width: 180,
|
||||
customRender: ({ text }) => h('span', { class: 'fi-time' }, String(text || '--')),
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
width: 150,
|
||||
customRender: ({ record }) => renderActionButtons(record),
|
||||
},
|
||||
];
|
||||
|
||||
function handleTableChange(next: TablePaginationConfig) {
|
||||
emit('pageChange', Number(next.current || 1), Number(next.pageSize || 10));
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fi-table-card">
|
||||
<Table
|
||||
row-key="recordId"
|
||||
:columns="columns"
|
||||
:data-source="props.rows"
|
||||
:loading="props.loading"
|
||||
:pagination="{
|
||||
current: props.pagination.page,
|
||||
pageSize: props.pagination.pageSize,
|
||||
total: props.pagination.totalCount,
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50'],
|
||||
showTotal: (total: number) => `共 ${total} 条`,
|
||||
}"
|
||||
@change="handleTableChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,71 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：发票作废确认弹窗。
|
||||
*/
|
||||
import type { FinanceInvoiceRecordListItemDto } from '#/api/finance';
|
||||
import type { FinanceInvoiceVoidFormState } from '../types';
|
||||
|
||||
import { Modal, Input } from 'ant-design-vue';
|
||||
|
||||
import { formatCurrency } from '../composables/invoice-page/helpers';
|
||||
|
||||
interface Props {
|
||||
form: FinanceInvoiceVoidFormState;
|
||||
open: boolean;
|
||||
submitting: boolean;
|
||||
targetRecord: FinanceInvoiceRecordListItemDto | null;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void;
|
||||
(event: 'submit'): void;
|
||||
(event: 'update:voidReason', value: string): void;
|
||||
}>();
|
||||
|
||||
function toStringValue(value: string | undefined) {
|
||||
return String(value ?? '');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal
|
||||
:open="props.open"
|
||||
title="确认作废发票"
|
||||
ok-text="确认作废"
|
||||
cancel-text="取消"
|
||||
ok-type="danger"
|
||||
:confirm-loading="props.submitting"
|
||||
@ok="emit('submit')"
|
||||
@cancel="emit('close')"
|
||||
>
|
||||
<div class="fi-void-modal">
|
||||
<p class="fi-void-warning">发票作废后不可恢复，请确认本次操作。</p>
|
||||
|
||||
<div class="fi-void-summary">
|
||||
<div class="fi-void-line">
|
||||
<span class="label">发票号码</span>
|
||||
<span class="value fi-mono">{{ props.targetRecord?.invoiceNo || '--' }}</span>
|
||||
</div>
|
||||
<div class="fi-void-line">
|
||||
<span class="label">公司抬头</span>
|
||||
<span class="value">{{ props.targetRecord?.companyName || '--' }}</span>
|
||||
</div>
|
||||
<div class="fi-void-line">
|
||||
<span class="label">开票金额</span>
|
||||
<span class="value">{{ formatCurrency(Number(props.targetRecord?.amount || 0)) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Input.TextArea
|
||||
:value="props.form.voidReason"
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
show-count
|
||||
placeholder="请输入作废原因"
|
||||
@update:value="(value) => emit('update:voidReason', toStringValue(value))"
|
||||
/>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
@@ -0,0 +1,108 @@
|
||||
import type {
|
||||
FinanceInvoiceSettingFormState,
|
||||
FinanceInvoiceTabKey,
|
||||
OptionItem,
|
||||
} from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：发票管理页面常量定义。
|
||||
*/
|
||||
import type { FinanceInvoiceStatsDto } from '#/api/finance';
|
||||
|
||||
import { getMonthFirstDateString, getTodayDateString } from './helpers';
|
||||
|
||||
/** 发票管理页面查看权限。 */
|
||||
export const FINANCE_INVOICE_VIEW_PERMISSION = 'tenant:finance:invoice:view';
|
||||
|
||||
/** 发票开票权限。 */
|
||||
export const FINANCE_INVOICE_ISSUE_PERMISSION = 'tenant:finance:invoice:issue';
|
||||
|
||||
/** 发票作废权限。 */
|
||||
export const FINANCE_INVOICE_VOID_PERMISSION = 'tenant:finance:invoice:void';
|
||||
|
||||
/** 发票设置权限。 */
|
||||
export const FINANCE_INVOICE_SETTINGS_PERMISSION =
|
||||
'tenant:finance:invoice:settings';
|
||||
|
||||
/** 分段选项。 */
|
||||
export const INVOICE_TAB_OPTIONS: Array<{
|
||||
label: string;
|
||||
value: FinanceInvoiceTabKey;
|
||||
}> = [
|
||||
{ label: '开票记录', value: 'records' },
|
||||
{ label: '发票设置', value: 'settings' },
|
||||
];
|
||||
|
||||
/** 发票状态筛选项。 */
|
||||
export const INVOICE_STATUS_OPTIONS: OptionItem[] = [
|
||||
{ label: '全部状态', value: 'all' },
|
||||
{ label: '待开票', value: 'pending' },
|
||||
{ label: '已开票', value: 'issued' },
|
||||
{ label: '已作废', value: 'voided' },
|
||||
];
|
||||
|
||||
/** 发票类型筛选项。 */
|
||||
export const INVOICE_TYPE_OPTIONS: OptionItem[] = [
|
||||
{ label: '全部类型', value: 'all' },
|
||||
{ label: '普通发票', value: 'normal' },
|
||||
{ label: '专用发票', value: 'special' },
|
||||
];
|
||||
|
||||
/** 默认统计数据。 */
|
||||
export const DEFAULT_INVOICE_STATS: FinanceInvoiceStatsDto = {
|
||||
currentMonthIssuedAmount: 0,
|
||||
currentMonthIssuedCount: 0,
|
||||
pendingCount: 0,
|
||||
voidedCount: 0,
|
||||
};
|
||||
|
||||
/** 创建默认筛选条件。 */
|
||||
export function createDefaultFilters() {
|
||||
return {
|
||||
startDate: getMonthFirstDateString(),
|
||||
endDate: getTodayDateString(),
|
||||
status: 'all',
|
||||
invoiceType: 'all',
|
||||
keyword: '',
|
||||
};
|
||||
}
|
||||
|
||||
/** 创建默认分页。 */
|
||||
export function createDefaultPagination() {
|
||||
return {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
totalCount: 0,
|
||||
};
|
||||
}
|
||||
|
||||
/** 创建默认设置表单。 */
|
||||
export function createDefaultSettingsForm(): FinanceInvoiceSettingFormState {
|
||||
return {
|
||||
companyName: '',
|
||||
taxpayerNumber: '',
|
||||
registeredAddress: '',
|
||||
registeredPhone: '',
|
||||
bankName: '',
|
||||
bankAccount: '',
|
||||
enableElectronicNormalInvoice: true,
|
||||
enableElectronicSpecialInvoice: false,
|
||||
enableAutoIssue: false,
|
||||
autoIssueMaxAmount: 10_000,
|
||||
};
|
||||
}
|
||||
|
||||
/** 创建默认开票表单。 */
|
||||
export function createDefaultIssueForm() {
|
||||
return {
|
||||
contactEmail: '',
|
||||
issueRemark: '',
|
||||
};
|
||||
}
|
||||
|
||||
/** 创建默认作废表单。 */
|
||||
export function createDefaultVoidForm() {
|
||||
return {
|
||||
voidReason: '',
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
import type {
|
||||
FinanceInvoiceRecordListItemDto,
|
||||
FinanceInvoiceSettingDto,
|
||||
FinanceInvoiceStatsDto,
|
||||
} from '#/api/finance';
|
||||
import type {
|
||||
FinanceInvoiceFilterState,
|
||||
FinanceInvoicePaginationState,
|
||||
FinanceInvoiceSettingFormState,
|
||||
} from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：发票管理页面数据加载动作。
|
||||
*/
|
||||
import {
|
||||
getFinanceInvoiceRecordListApi,
|
||||
getFinanceInvoiceSettingDetailApi,
|
||||
} from '#/api/finance';
|
||||
|
||||
import {
|
||||
applySettingDtoToForm,
|
||||
buildInvoiceListQuery,
|
||||
cloneSettingsForm,
|
||||
} from './helpers';
|
||||
|
||||
interface DataActionOptions {
|
||||
canViewRecords: { value: boolean };
|
||||
canViewSettings: { value: boolean };
|
||||
createDefaultSettingsForm: () => FinanceInvoiceSettingFormState;
|
||||
filters: FinanceInvoiceFilterState;
|
||||
isListLoading: { value: boolean };
|
||||
isSettingsLoading: { value: boolean };
|
||||
pagination: FinanceInvoicePaginationState;
|
||||
rows: { value: FinanceInvoiceRecordListItemDto[] };
|
||||
settingForm: FinanceInvoiceSettingFormState;
|
||||
settingSnapshot: { value: FinanceInvoiceSettingFormState };
|
||||
stats: FinanceInvoiceStatsDto;
|
||||
}
|
||||
|
||||
/** 创建页面数据动作。 */
|
||||
export function createDataActions(options: DataActionOptions) {
|
||||
function resetStats() {
|
||||
options.stats.currentMonthIssuedAmount = 0;
|
||||
options.stats.currentMonthIssuedCount = 0;
|
||||
options.stats.pendingCount = 0;
|
||||
options.stats.voidedCount = 0;
|
||||
}
|
||||
|
||||
function clearRecordData() {
|
||||
options.rows.value = [];
|
||||
options.pagination.totalCount = 0;
|
||||
resetStats();
|
||||
}
|
||||
|
||||
function resetSettings() {
|
||||
const defaults = options.createDefaultSettingsForm();
|
||||
Object.assign(options.settingForm, defaults);
|
||||
options.settingSnapshot.value = cloneSettingsForm(defaults);
|
||||
}
|
||||
|
||||
function applySettingsResult(result: FinanceInvoiceSettingDto) {
|
||||
applySettingDtoToForm(options.settingForm, result);
|
||||
options.settingSnapshot.value = cloneSettingsForm(options.settingForm);
|
||||
}
|
||||
|
||||
async function loadRecordList() {
|
||||
if (!options.canViewRecords.value) {
|
||||
clearRecordData();
|
||||
return;
|
||||
}
|
||||
|
||||
options.isListLoading.value = true;
|
||||
try {
|
||||
const result = await getFinanceInvoiceRecordListApi(
|
||||
buildInvoiceListQuery(options.filters, options.pagination),
|
||||
);
|
||||
|
||||
options.rows.value = result.items;
|
||||
options.pagination.page = result.page;
|
||||
options.pagination.pageSize = result.pageSize;
|
||||
options.pagination.totalCount = result.totalCount;
|
||||
|
||||
options.stats.currentMonthIssuedAmount =
|
||||
result.stats.currentMonthIssuedAmount;
|
||||
options.stats.currentMonthIssuedCount = result.stats.currentMonthIssuedCount;
|
||||
options.stats.pendingCount = result.stats.pendingCount;
|
||||
options.stats.voidedCount = result.stats.voidedCount;
|
||||
} finally {
|
||||
options.isListLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadSettings() {
|
||||
if (!options.canViewSettings.value) {
|
||||
resetSettings();
|
||||
return;
|
||||
}
|
||||
|
||||
options.isSettingsLoading.value = true;
|
||||
try {
|
||||
const result = await getFinanceInvoiceSettingDetailApi();
|
||||
applySettingsResult(result);
|
||||
} finally {
|
||||
options.isSettingsLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function clearByPermission() {
|
||||
if (!options.canViewRecords.value) {
|
||||
clearRecordData();
|
||||
}
|
||||
|
||||
if (!options.canViewSettings.value) {
|
||||
resetSettings();
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
applySettingsResult,
|
||||
clearByPermission,
|
||||
clearRecordData,
|
||||
loadRecordList,
|
||||
loadSettings,
|
||||
resetSettings,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,253 @@
|
||||
import type {
|
||||
FinanceInvoiceIssueResultDto,
|
||||
FinanceInvoiceRecordDetailDto,
|
||||
FinanceInvoiceRecordListItemDto,
|
||||
} from '#/api/finance';
|
||||
import type {
|
||||
FinanceInvoiceIssueFormState,
|
||||
FinanceInvoiceVoidFormState,
|
||||
} from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：发票管理页面抽屉与弹窗动作。
|
||||
*/
|
||||
import {
|
||||
getFinanceInvoiceRecordDetailApi,
|
||||
issueFinanceInvoiceRecordApi,
|
||||
voidFinanceInvoiceRecordApi,
|
||||
} from '#/api/finance';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import { isPendingInvoice, toOptionalTrimmed } from './helpers';
|
||||
|
||||
interface DrawerActionOptions {
|
||||
canIssue: { value: boolean };
|
||||
canVoid: { value: boolean };
|
||||
detail: { value: FinanceInvoiceRecordDetailDto | null };
|
||||
isDetailDrawerOpen: { value: boolean };
|
||||
isDetailLoading: { value: boolean };
|
||||
isIssueDetailLoading: { value: boolean };
|
||||
isIssueDrawerOpen: { value: boolean };
|
||||
isIssueResultModalOpen: { value: boolean };
|
||||
isIssueSubmitting: { value: boolean };
|
||||
isVoidModalOpen: { value: boolean };
|
||||
isVoidSubmitting: { value: boolean };
|
||||
issueDetail: { value: FinanceInvoiceRecordDetailDto | null };
|
||||
issueForm: FinanceInvoiceIssueFormState;
|
||||
issueResult: { value: FinanceInvoiceIssueResultDto | null };
|
||||
issueTargetRecord: { value: FinanceInvoiceRecordListItemDto | null };
|
||||
reloadRecordList: () => Promise<void>;
|
||||
voidForm: FinanceInvoiceVoidFormState;
|
||||
voidTargetRecord: { value: FinanceInvoiceRecordListItemDto | null };
|
||||
}
|
||||
|
||||
/** 创建抽屉与弹窗动作。 */
|
||||
export function createDrawerActions(options: DrawerActionOptions) {
|
||||
async function loadDetail(recordId: string) {
|
||||
const result = await getFinanceInvoiceRecordDetailApi({ recordId });
|
||||
options.detail.value = result;
|
||||
return result;
|
||||
}
|
||||
|
||||
function setDetailDrawerOpen(value: boolean) {
|
||||
options.isDetailDrawerOpen.value = value;
|
||||
if (!value) {
|
||||
options.detail.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
function setIssueDrawerOpen(value: boolean) {
|
||||
options.isIssueDrawerOpen.value = value;
|
||||
if (!value) {
|
||||
options.issueTargetRecord.value = null;
|
||||
options.issueDetail.value = null;
|
||||
options.issueForm.contactEmail = '';
|
||||
options.issueForm.issueRemark = '';
|
||||
}
|
||||
}
|
||||
|
||||
function setVoidModalOpen(value: boolean) {
|
||||
options.isVoidModalOpen.value = value;
|
||||
if (!value) {
|
||||
options.voidTargetRecord.value = null;
|
||||
options.voidForm.voidReason = '';
|
||||
}
|
||||
}
|
||||
|
||||
function setIssueResultModalOpen(value: boolean) {
|
||||
options.isIssueResultModalOpen.value = value;
|
||||
if (!value) {
|
||||
options.issueResult.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function openDetail(recordId: string) {
|
||||
if (!recordId) {
|
||||
return;
|
||||
}
|
||||
|
||||
options.isDetailDrawerOpen.value = true;
|
||||
options.isDetailLoading.value = true;
|
||||
try {
|
||||
await loadDetail(recordId);
|
||||
} finally {
|
||||
options.isDetailLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function openIssue(record: FinanceInvoiceRecordListItemDto) {
|
||||
if (!options.canIssue.value) {
|
||||
message.warning('当前账号暂无开票权限');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isPendingInvoice(record.status)) {
|
||||
message.warning('仅待开票记录可执行开票');
|
||||
return;
|
||||
}
|
||||
|
||||
options.issueTargetRecord.value = record;
|
||||
options.issueForm.contactEmail = '';
|
||||
options.issueForm.issueRemark = '';
|
||||
options.issueDetail.value = null;
|
||||
options.isIssueDrawerOpen.value = true;
|
||||
|
||||
options.isIssueDetailLoading.value = true;
|
||||
try {
|
||||
const detail = await getFinanceInvoiceRecordDetailApi({
|
||||
recordId: record.recordId,
|
||||
});
|
||||
options.issueDetail.value = detail;
|
||||
options.issueForm.contactEmail = detail.contactEmail ?? '';
|
||||
} finally {
|
||||
options.isIssueDetailLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshOpenDetailAfterMutation(recordId: string) {
|
||||
if (!options.isDetailDrawerOpen.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (options.detail.value?.recordId !== recordId) {
|
||||
return;
|
||||
}
|
||||
|
||||
options.isDetailLoading.value = true;
|
||||
try {
|
||||
await loadDetail(recordId);
|
||||
} finally {
|
||||
options.isDetailLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function submitIssue() {
|
||||
if (!options.canIssue.value) {
|
||||
message.warning('当前账号暂无开票权限');
|
||||
return;
|
||||
}
|
||||
|
||||
const target = options.issueTargetRecord.value;
|
||||
if (!target?.recordId) {
|
||||
message.warning('请选择待开票记录');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isPendingInvoice(target.status)) {
|
||||
message.warning('当前记录状态不可开票');
|
||||
return;
|
||||
}
|
||||
|
||||
const email = options.issueForm.contactEmail.trim();
|
||||
if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
||||
message.warning('请填写正确的邮箱地址');
|
||||
return;
|
||||
}
|
||||
|
||||
options.isIssueSubmitting.value = true;
|
||||
try {
|
||||
const result = await issueFinanceInvoiceRecordApi({
|
||||
recordId: target.recordId,
|
||||
contactEmail: toOptionalTrimmed(options.issueForm.contactEmail),
|
||||
issueRemark: toOptionalTrimmed(options.issueForm.issueRemark),
|
||||
});
|
||||
|
||||
options.issueResult.value = result;
|
||||
options.isIssueDrawerOpen.value = false;
|
||||
options.isIssueResultModalOpen.value = true;
|
||||
message.success('发票开具成功');
|
||||
|
||||
await options.reloadRecordList();
|
||||
await refreshOpenDetailAfterMutation(target.recordId);
|
||||
} finally {
|
||||
options.isIssueSubmitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function openVoid(record: FinanceInvoiceRecordListItemDto) {
|
||||
if (!options.canVoid.value) {
|
||||
message.warning('当前账号暂无作废权限');
|
||||
return;
|
||||
}
|
||||
|
||||
options.voidTargetRecord.value = record;
|
||||
options.voidForm.voidReason = '';
|
||||
options.isVoidModalOpen.value = true;
|
||||
}
|
||||
|
||||
async function submitVoid() {
|
||||
if (!options.canVoid.value) {
|
||||
message.warning('当前账号暂无作废权限');
|
||||
return;
|
||||
}
|
||||
|
||||
const target = options.voidTargetRecord.value;
|
||||
if (!target?.recordId) {
|
||||
message.warning('请选择需要作废的发票');
|
||||
return;
|
||||
}
|
||||
|
||||
const reason = options.voidForm.voidReason.trim();
|
||||
if (!reason) {
|
||||
message.warning('请填写作废原因');
|
||||
return;
|
||||
}
|
||||
|
||||
options.isVoidSubmitting.value = true;
|
||||
try {
|
||||
const detail = await voidFinanceInvoiceRecordApi({
|
||||
recordId: target.recordId,
|
||||
voidReason: reason,
|
||||
});
|
||||
|
||||
message.success('发票已作废');
|
||||
options.isVoidModalOpen.value = false;
|
||||
options.voidTargetRecord.value = null;
|
||||
options.voidForm.voidReason = '';
|
||||
|
||||
if (
|
||||
options.isDetailDrawerOpen.value &&
|
||||
options.detail.value?.recordId === detail.recordId
|
||||
) {
|
||||
options.detail.value = detail;
|
||||
}
|
||||
|
||||
await options.reloadRecordList();
|
||||
} finally {
|
||||
options.isVoidSubmitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
openDetail,
|
||||
openIssue,
|
||||
openVoid,
|
||||
setDetailDrawerOpen,
|
||||
setIssueDrawerOpen,
|
||||
setIssueResultModalOpen,
|
||||
setVoidModalOpen,
|
||||
submitIssue,
|
||||
submitVoid,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
import type {
|
||||
FinanceInvoiceRecordListQuery,
|
||||
FinanceInvoiceSettingDto,
|
||||
FinanceInvoiceStatusFilter,
|
||||
FinanceInvoiceTypeFilter,
|
||||
} from '#/api/finance';
|
||||
import type {
|
||||
FinanceInvoiceFilterState,
|
||||
FinanceInvoicePaginationState,
|
||||
FinanceInvoiceSettingFormState,
|
||||
} from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：发票管理页面纯函数工具。
|
||||
*/
|
||||
|
||||
function formatDate(date: Date) {
|
||||
const year = date.getFullYear();
|
||||
const month = `${date.getMonth() + 1}`.padStart(2, '0');
|
||||
const day = `${date.getDate()}`.padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
|
||||
function normalizeStatus(
|
||||
status: FinanceInvoiceStatusFilter,
|
||||
): Exclude<FinanceInvoiceStatusFilter, 'all'> | undefined {
|
||||
return status === 'all' ? undefined : status;
|
||||
}
|
||||
|
||||
function normalizeInvoiceType(
|
||||
invoiceType: FinanceInvoiceTypeFilter,
|
||||
): Exclude<FinanceInvoiceTypeFilter, 'all'> | undefined {
|
||||
return invoiceType === 'all' ? undefined : invoiceType;
|
||||
}
|
||||
|
||||
/** 获取今天日期字符串（yyyy-MM-dd）。 */
|
||||
export function getTodayDateString() {
|
||||
return formatDate(new Date());
|
||||
}
|
||||
|
||||
/** 获取当月第一天日期字符串（yyyy-MM-dd）。 */
|
||||
export function getMonthFirstDateString() {
|
||||
const now = new Date();
|
||||
return formatDate(new Date(now.getFullYear(), now.getMonth(), 1));
|
||||
}
|
||||
|
||||
/** 构建发票记录列表查询参数。 */
|
||||
export function buildInvoiceListQuery(
|
||||
filters: FinanceInvoiceFilterState,
|
||||
pagination: FinanceInvoicePaginationState,
|
||||
): FinanceInvoiceRecordListQuery {
|
||||
return {
|
||||
page: pagination.page,
|
||||
pageSize: pagination.pageSize,
|
||||
startDate: filters.startDate || undefined,
|
||||
endDate: filters.endDate || undefined,
|
||||
status: normalizeStatus(filters.status),
|
||||
invoiceType: normalizeInvoiceType(filters.invoiceType),
|
||||
keyword: filters.keyword.trim() || undefined,
|
||||
};
|
||||
}
|
||||
|
||||
/** 判断日期范围是否合法。 */
|
||||
export function isDateRangeInvalid(filters: FinanceInvoiceFilterState) {
|
||||
if (!filters.startDate || !filters.endDate) {
|
||||
return false;
|
||||
}
|
||||
return filters.startDate > filters.endDate;
|
||||
}
|
||||
|
||||
/** 货币格式化（人民币）。 */
|
||||
export function formatCurrency(value: number) {
|
||||
return new Intl.NumberFormat('zh-CN', {
|
||||
style: 'currency',
|
||||
currency: 'CNY',
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
}).format(Number.isFinite(value) ? value : 0);
|
||||
}
|
||||
|
||||
/** 发票类型标签颜色。 */
|
||||
export function resolveInvoiceTypeTagColor(type: string) {
|
||||
if (type === 'normal') return 'blue';
|
||||
if (type === 'special') return 'purple';
|
||||
return 'default';
|
||||
}
|
||||
|
||||
/** 发票状态标签颜色。 */
|
||||
export function resolveInvoiceStatusTagColor(status: string) {
|
||||
if (status === 'pending') return 'orange';
|
||||
if (status === 'issued') return 'green';
|
||||
if (status === 'voided') return 'default';
|
||||
return 'default';
|
||||
}
|
||||
|
||||
/** 是否为待开票状态。 */
|
||||
export function isPendingInvoice(status: string) {
|
||||
return status === 'pending';
|
||||
}
|
||||
|
||||
/** 是否为已开票状态。 */
|
||||
export function isIssuedInvoice(status: string) {
|
||||
return status === 'issued';
|
||||
}
|
||||
|
||||
/** 应用设置 DTO 到表单。 */
|
||||
export function applySettingDtoToForm(
|
||||
target: FinanceInvoiceSettingFormState,
|
||||
source: FinanceInvoiceSettingDto,
|
||||
) {
|
||||
target.companyName = source.companyName || '';
|
||||
target.taxpayerNumber = source.taxpayerNumber || '';
|
||||
target.registeredAddress = source.registeredAddress || '';
|
||||
target.registeredPhone = source.registeredPhone || '';
|
||||
target.bankName = source.bankName || '';
|
||||
target.bankAccount = source.bankAccount || '';
|
||||
target.enableElectronicNormalInvoice = Boolean(
|
||||
source.enableElectronicNormalInvoice,
|
||||
);
|
||||
target.enableElectronicSpecialInvoice = Boolean(
|
||||
source.enableElectronicSpecialInvoice,
|
||||
);
|
||||
target.enableAutoIssue = Boolean(source.enableAutoIssue);
|
||||
target.autoIssueMaxAmount = Number(source.autoIssueMaxAmount || 0);
|
||||
}
|
||||
|
||||
/** 深拷贝设置表单快照。 */
|
||||
export function cloneSettingsForm(
|
||||
source: FinanceInvoiceSettingFormState,
|
||||
): FinanceInvoiceSettingFormState {
|
||||
return {
|
||||
companyName: source.companyName,
|
||||
taxpayerNumber: source.taxpayerNumber,
|
||||
registeredAddress: source.registeredAddress,
|
||||
registeredPhone: source.registeredPhone,
|
||||
bankName: source.bankName,
|
||||
bankAccount: source.bankAccount,
|
||||
enableElectronicNormalInvoice: source.enableElectronicNormalInvoice,
|
||||
enableElectronicSpecialInvoice: source.enableElectronicSpecialInvoice,
|
||||
enableAutoIssue: source.enableAutoIssue,
|
||||
autoIssueMaxAmount: source.autoIssueMaxAmount,
|
||||
};
|
||||
}
|
||||
|
||||
/** 比较设置表单是否发生变化。 */
|
||||
export function isSettingsChanged(
|
||||
current: FinanceInvoiceSettingFormState,
|
||||
snapshot: FinanceInvoiceSettingFormState,
|
||||
) {
|
||||
return JSON.stringify(current) !== JSON.stringify(snapshot);
|
||||
}
|
||||
|
||||
/** 生成保存设置请求体。 */
|
||||
export function buildSettingSavePayload(form: FinanceInvoiceSettingFormState) {
|
||||
return {
|
||||
companyName: form.companyName.trim(),
|
||||
taxpayerNumber: form.taxpayerNumber.trim(),
|
||||
registeredAddress: form.registeredAddress.trim() || undefined,
|
||||
registeredPhone: form.registeredPhone.trim() || undefined,
|
||||
bankName: form.bankName.trim() || undefined,
|
||||
bankAccount: form.bankAccount.trim() || undefined,
|
||||
enableElectronicNormalInvoice: form.enableElectronicNormalInvoice,
|
||||
enableElectronicSpecialInvoice: form.enableElectronicSpecialInvoice,
|
||||
enableAutoIssue: form.enableAutoIssue,
|
||||
autoIssueMaxAmount: Number(form.autoIssueMaxAmount || 0),
|
||||
};
|
||||
}
|
||||
|
||||
/** 文本转空值。 */
|
||||
export function toOptionalTrimmed(value: string) {
|
||||
const normalized = value.trim();
|
||||
return normalized ? normalized : undefined;
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
import type { FinanceInvoiceSettingFormState } from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：发票设置保存与确认动作。
|
||||
*/
|
||||
import type { FinanceInvoiceSettingDto } from '#/api/finance';
|
||||
|
||||
import { saveFinanceInvoiceSettingApi } from '#/api/finance';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
buildSettingSavePayload,
|
||||
cloneSettingsForm,
|
||||
isSettingsChanged,
|
||||
} from './helpers';
|
||||
|
||||
interface SettingsActionOptions {
|
||||
applySettingsResult: (result: FinanceInvoiceSettingDto) => void;
|
||||
canManageSettings: { value: boolean };
|
||||
isSettingsConfirmModalOpen: { value: boolean };
|
||||
isSettingsSaving: { value: boolean };
|
||||
settingForm: FinanceInvoiceSettingFormState;
|
||||
settingSnapshot: { value: FinanceInvoiceSettingFormState };
|
||||
}
|
||||
|
||||
/** 创建发票设置动作。 */
|
||||
export function createSettingsActions(options: SettingsActionOptions) {
|
||||
function setSettingsConfirmModalOpen(value: boolean) {
|
||||
options.isSettingsConfirmModalOpen.value = value;
|
||||
}
|
||||
|
||||
function resetSettings() {
|
||||
Object.assign(options.settingForm, cloneSettingsForm(options.settingSnapshot.value));
|
||||
}
|
||||
|
||||
function hasSettingsChanged() {
|
||||
return isSettingsChanged(options.settingForm, options.settingSnapshot.value);
|
||||
}
|
||||
|
||||
function validateSettings() {
|
||||
if (!options.settingForm.companyName.trim()) {
|
||||
message.warning('请输入企业名称');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!options.settingForm.taxpayerNumber.trim()) {
|
||||
message.warning('请输入纳税人识别号');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (
|
||||
!options.settingForm.enableElectronicNormalInvoice &&
|
||||
!options.settingForm.enableElectronicSpecialInvoice
|
||||
) {
|
||||
message.warning('请至少启用一种发票类型');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (options.settingForm.enableAutoIssue) {
|
||||
const maxAmount = Number(options.settingForm.autoIssueMaxAmount || 0);
|
||||
if (!Number.isFinite(maxAmount) || maxAmount <= 0) {
|
||||
message.warning('自动开票最大金额必须大于 0');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function openSettingsConfirmModal() {
|
||||
if (!options.canManageSettings.value) {
|
||||
message.warning('当前账号暂无发票设置权限');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!validateSettings()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!hasSettingsChanged()) {
|
||||
message.info('未检测到设置变更');
|
||||
return;
|
||||
}
|
||||
|
||||
options.isSettingsConfirmModalOpen.value = true;
|
||||
}
|
||||
|
||||
async function submitSettings() {
|
||||
if (!options.canManageSettings.value) {
|
||||
message.warning('当前账号暂无发票设置权限');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!validateSettings()) {
|
||||
return;
|
||||
}
|
||||
|
||||
options.isSettingsSaving.value = true;
|
||||
try {
|
||||
const result = await saveFinanceInvoiceSettingApi(
|
||||
buildSettingSavePayload(options.settingForm),
|
||||
);
|
||||
options.applySettingsResult(result);
|
||||
options.isSettingsConfirmModalOpen.value = false;
|
||||
message.success('发票设置已保存');
|
||||
} finally {
|
||||
options.isSettingsSaving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
hasSettingsChanged,
|
||||
openSettingsConfirmModal,
|
||||
resetSettings,
|
||||
setSettingsConfirmModalOpen,
|
||||
submitSettings,
|
||||
validateSettings,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,397 @@
|
||||
/**
|
||||
* 文件职责：发票管理页面状态与动作编排。
|
||||
*/
|
||||
import type {
|
||||
FinanceInvoiceIssueResultDto,
|
||||
FinanceInvoiceRecordDetailDto,
|
||||
FinanceInvoiceRecordListItemDto,
|
||||
FinanceInvoiceStatsDto,
|
||||
} from '#/api/finance';
|
||||
import type {
|
||||
FinanceInvoiceFilterState,
|
||||
FinanceInvoiceIssueFormState,
|
||||
FinanceInvoicePaginationState,
|
||||
FinanceInvoiceSettingFormState,
|
||||
FinanceInvoiceTabKey,
|
||||
FinanceInvoiceVoidFormState,
|
||||
} from '../types';
|
||||
|
||||
import { computed, onActivated, onMounted, reactive, ref, watch } from 'vue';
|
||||
|
||||
import { useAccessStore } from '@vben/stores';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
createDefaultFilters,
|
||||
createDefaultIssueForm,
|
||||
createDefaultPagination,
|
||||
createDefaultSettingsForm,
|
||||
createDefaultVoidForm,
|
||||
DEFAULT_INVOICE_STATS,
|
||||
FINANCE_INVOICE_ISSUE_PERMISSION,
|
||||
FINANCE_INVOICE_SETTINGS_PERMISSION,
|
||||
FINANCE_INVOICE_VIEW_PERMISSION,
|
||||
FINANCE_INVOICE_VOID_PERMISSION,
|
||||
INVOICE_TAB_OPTIONS,
|
||||
} from './invoice-page/constants';
|
||||
import { createDataActions } from './invoice-page/data-actions';
|
||||
import { createDrawerActions } from './invoice-page/drawer-actions';
|
||||
import { isDateRangeInvalid } from './invoice-page/helpers';
|
||||
import { createSettingsActions } from './invoice-page/settings-actions';
|
||||
|
||||
/** 创建发票管理页面组合状态。 */
|
||||
export function useFinanceInvoicePage() {
|
||||
const accessStore = useAccessStore();
|
||||
|
||||
const activeTab = ref<FinanceInvoiceTabKey>('records');
|
||||
|
||||
const filters = reactive<FinanceInvoiceFilterState>(
|
||||
createDefaultFilters() as FinanceInvoiceFilterState,
|
||||
);
|
||||
const pagination = reactive<FinanceInvoicePaginationState>(
|
||||
createDefaultPagination(),
|
||||
);
|
||||
const rows = ref<FinanceInvoiceRecordListItemDto[]>([]);
|
||||
|
||||
const stats = reactive<FinanceInvoiceStatsDto>({ ...DEFAULT_INVOICE_STATS });
|
||||
|
||||
const settingForm = reactive<FinanceInvoiceSettingFormState>(
|
||||
createDefaultSettingsForm(),
|
||||
);
|
||||
const settingSnapshot = ref<FinanceInvoiceSettingFormState>(
|
||||
createDefaultSettingsForm(),
|
||||
);
|
||||
|
||||
const issueForm = reactive<FinanceInvoiceIssueFormState>(
|
||||
createDefaultIssueForm(),
|
||||
);
|
||||
const voidForm = reactive<FinanceInvoiceVoidFormState>(createDefaultVoidForm());
|
||||
|
||||
const detail = ref<FinanceInvoiceRecordDetailDto | null>(null);
|
||||
const issueDetail = ref<FinanceInvoiceRecordDetailDto | null>(null);
|
||||
const issueResult = ref<FinanceInvoiceIssueResultDto | null>(null);
|
||||
|
||||
const issueTargetRecord = ref<FinanceInvoiceRecordListItemDto | null>(null);
|
||||
const voidTargetRecord = ref<FinanceInvoiceRecordListItemDto | null>(null);
|
||||
|
||||
const isListLoading = ref(false);
|
||||
const isSettingsLoading = ref(false);
|
||||
const isDetailLoading = ref(false);
|
||||
const isIssueDetailLoading = ref(false);
|
||||
const isIssueSubmitting = ref(false);
|
||||
const isVoidSubmitting = ref(false);
|
||||
const isSettingsSaving = ref(false);
|
||||
|
||||
const isDetailDrawerOpen = ref(false);
|
||||
const isIssueDrawerOpen = ref(false);
|
||||
const isVoidModalOpen = ref(false);
|
||||
const isIssueResultModalOpen = ref(false);
|
||||
const isSettingsConfirmModalOpen = ref(false);
|
||||
|
||||
const accessCodeSet = computed(
|
||||
() => new Set((accessStore.accessCodes ?? []).map(String)),
|
||||
);
|
||||
|
||||
const canViewRecords = computed(() => {
|
||||
const accessCodes = accessCodeSet.value;
|
||||
return (
|
||||
accessCodes.has(FINANCE_INVOICE_VIEW_PERMISSION) ||
|
||||
accessCodes.has(FINANCE_INVOICE_ISSUE_PERMISSION) ||
|
||||
accessCodes.has(FINANCE_INVOICE_VOID_PERMISSION)
|
||||
);
|
||||
});
|
||||
|
||||
const canIssue = computed(() =>
|
||||
accessCodeSet.value.has(FINANCE_INVOICE_ISSUE_PERMISSION),
|
||||
);
|
||||
|
||||
const canVoid = computed(() =>
|
||||
accessCodeSet.value.has(FINANCE_INVOICE_VOID_PERMISSION),
|
||||
);
|
||||
|
||||
const canViewSettings = computed(() => {
|
||||
const accessCodes = accessCodeSet.value;
|
||||
return (
|
||||
accessCodes.has(FINANCE_INVOICE_VIEW_PERMISSION) ||
|
||||
accessCodes.has(FINANCE_INVOICE_SETTINGS_PERMISSION)
|
||||
);
|
||||
});
|
||||
|
||||
const canManageSettings = computed(() =>
|
||||
accessCodeSet.value.has(FINANCE_INVOICE_SETTINGS_PERMISSION),
|
||||
);
|
||||
|
||||
const canViewPage = computed(
|
||||
() => canViewRecords.value || canViewSettings.value,
|
||||
);
|
||||
|
||||
const tabOptions = computed(() =>
|
||||
INVOICE_TAB_OPTIONS.filter((item) => {
|
||||
if (item.value === 'records') {
|
||||
return canViewRecords.value;
|
||||
}
|
||||
if (item.value === 'settings') {
|
||||
return canViewSettings.value;
|
||||
}
|
||||
return false;
|
||||
}),
|
||||
);
|
||||
|
||||
const {
|
||||
applySettingsResult,
|
||||
clearByPermission,
|
||||
clearRecordData,
|
||||
loadRecordList,
|
||||
loadSettings,
|
||||
} = createDataActions({
|
||||
canViewRecords,
|
||||
canViewSettings,
|
||||
createDefaultSettingsForm,
|
||||
filters,
|
||||
isListLoading,
|
||||
isSettingsLoading,
|
||||
pagination,
|
||||
rows,
|
||||
settingForm,
|
||||
settingSnapshot,
|
||||
stats,
|
||||
});
|
||||
|
||||
const {
|
||||
openDetail,
|
||||
openIssue,
|
||||
openVoid,
|
||||
setDetailDrawerOpen,
|
||||
setIssueDrawerOpen,
|
||||
setIssueResultModalOpen,
|
||||
setVoidModalOpen,
|
||||
submitIssue,
|
||||
submitVoid,
|
||||
} = createDrawerActions({
|
||||
canIssue,
|
||||
canVoid,
|
||||
detail,
|
||||
isDetailDrawerOpen,
|
||||
isDetailLoading,
|
||||
isIssueDetailLoading,
|
||||
isIssueDrawerOpen,
|
||||
isIssueResultModalOpen,
|
||||
isIssueSubmitting,
|
||||
isVoidModalOpen,
|
||||
isVoidSubmitting,
|
||||
issueDetail,
|
||||
issueForm,
|
||||
issueResult,
|
||||
issueTargetRecord,
|
||||
reloadRecordList: loadRecordList,
|
||||
voidForm,
|
||||
voidTargetRecord,
|
||||
});
|
||||
|
||||
const {
|
||||
hasSettingsChanged,
|
||||
openSettingsConfirmModal,
|
||||
resetSettings,
|
||||
setSettingsConfirmModalOpen,
|
||||
submitSettings,
|
||||
} = createSettingsActions({
|
||||
applySettingsResult,
|
||||
canManageSettings,
|
||||
isSettingsConfirmModalOpen,
|
||||
isSettingsSaving,
|
||||
settingForm,
|
||||
settingSnapshot,
|
||||
});
|
||||
|
||||
function setActiveTab(value: FinanceInvoiceTabKey) {
|
||||
activeTab.value = value;
|
||||
}
|
||||
|
||||
function setStartDate(value: string) {
|
||||
filters.startDate = value;
|
||||
}
|
||||
|
||||
function setEndDate(value: string) {
|
||||
filters.endDate = value;
|
||||
}
|
||||
|
||||
function setStatus(value: string) {
|
||||
filters.status = (value || 'all') as FinanceInvoiceFilterState['status'];
|
||||
}
|
||||
|
||||
function setInvoiceType(value: string) {
|
||||
filters.invoiceType = (value || 'all') as FinanceInvoiceFilterState['invoiceType'];
|
||||
}
|
||||
|
||||
function setKeyword(value: string) {
|
||||
filters.keyword = value;
|
||||
}
|
||||
|
||||
function setIssueFormContactEmail(value: string) {
|
||||
issueForm.contactEmail = value;
|
||||
}
|
||||
|
||||
function setIssueFormRemark(value: string) {
|
||||
issueForm.issueRemark = value;
|
||||
}
|
||||
|
||||
function setVoidReason(value: string) {
|
||||
voidForm.voidReason = value;
|
||||
}
|
||||
|
||||
function setSettingsField<K extends keyof FinanceInvoiceSettingFormState>(
|
||||
field: K,
|
||||
value: FinanceInvoiceSettingFormState[K],
|
||||
) {
|
||||
settingForm[field] = value;
|
||||
}
|
||||
|
||||
async function handleSearch() {
|
||||
if (isDateRangeInvalid(filters)) {
|
||||
message.warning('开始日期不能晚于结束日期');
|
||||
return;
|
||||
}
|
||||
|
||||
pagination.page = 1;
|
||||
await loadRecordList();
|
||||
}
|
||||
|
||||
async function handlePageChange(page: number, pageSize: number) {
|
||||
pagination.page = page;
|
||||
pagination.pageSize = pageSize;
|
||||
await loadRecordList();
|
||||
}
|
||||
|
||||
function closeTransientPanels() {
|
||||
setDetailDrawerOpen(false);
|
||||
setIssueDrawerOpen(false);
|
||||
setVoidModalOpen(false);
|
||||
setIssueResultModalOpen(false);
|
||||
setSettingsConfirmModalOpen(false);
|
||||
}
|
||||
|
||||
async function loadByPermission() {
|
||||
const tasks: Array<Promise<void>> = [];
|
||||
|
||||
if (canViewRecords.value) {
|
||||
tasks.push(loadRecordList());
|
||||
} else {
|
||||
clearRecordData();
|
||||
}
|
||||
|
||||
if (canViewSettings.value) {
|
||||
tasks.push(loadSettings());
|
||||
}
|
||||
|
||||
await Promise.all(tasks);
|
||||
}
|
||||
|
||||
watch(tabOptions, (next) => {
|
||||
const values = next.map((item) => item.value);
|
||||
if (values.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!values.includes(activeTab.value)) {
|
||||
activeTab.value = values[0] as FinanceInvoiceTabKey;
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
canViewPage,
|
||||
async (value, oldValue) => {
|
||||
if (value === oldValue) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!value) {
|
||||
clearByPermission();
|
||||
closeTransientPanels();
|
||||
return;
|
||||
}
|
||||
|
||||
await loadByPermission();
|
||||
},
|
||||
{ immediate: false },
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
if (!canViewPage.value) {
|
||||
clearByPermission();
|
||||
closeTransientPanels();
|
||||
return;
|
||||
}
|
||||
|
||||
await loadByPermission();
|
||||
});
|
||||
|
||||
onActivated(() => {
|
||||
if (!canViewPage.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
void loadByPermission();
|
||||
});
|
||||
|
||||
return {
|
||||
activeTab,
|
||||
canIssue,
|
||||
canManageSettings,
|
||||
canViewPage,
|
||||
canViewRecords,
|
||||
canViewSettings,
|
||||
canVoid,
|
||||
detail,
|
||||
filters,
|
||||
handlePageChange,
|
||||
handleSearch,
|
||||
hasSettingsChanged,
|
||||
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,
|
||||
};
|
||||
}
|
||||
198
apps/web-antd/src/views/finance/invoice/index.vue
Normal file
198
apps/web-antd/src/views/finance/invoice/index.vue
Normal file
@@ -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>
|
||||
24
apps/web-antd/src/views/finance/invoice/styles/base.less
Normal file
24
apps/web-antd/src/views/finance/invoice/styles/base.less
Normal file
@@ -0,0 +1,24 @@
|
||||
/**
|
||||
* 文件职责：发票管理页面基础样式。
|
||||
*/
|
||||
.page-finance-invoice {
|
||||
.ant-card {
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.fi-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.fi-tab-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.fi-mono {
|
||||
font-family: ui-monospace, sfmono-regular, menlo, consolas, monospace;
|
||||
}
|
||||
135
apps/web-antd/src/views/finance/invoice/styles/drawer.less
Normal file
135
apps/web-antd/src/views/finance/invoice/styles/drawer.less
Normal file
@@ -0,0 +1,135 @@
|
||||
/**
|
||||
* 文件职责：发票抽屉样式。
|
||||
*/
|
||||
.page-finance-invoice {
|
||||
.ant-drawer {
|
||||
.ant-drawer-header {
|
||||
padding: 14px 18px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.ant-drawer-body {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.ant-drawer-footer {
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fi-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.fi-section-title {
|
||||
padding-left: 10px;
|
||||
margin-bottom: 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
border-left: 3px solid #1677ff;
|
||||
}
|
||||
|
||||
.fi-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px 20px;
|
||||
font-size: 13px;
|
||||
|
||||
.label {
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
.fi-amount-strong {
|
||||
font-weight: 600;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
|
||||
.fi-drawer-footer {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.fi-timeline {
|
||||
position: relative;
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
.fi-timeline-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
padding-bottom: 18px;
|
||||
font-size: 13px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: -22px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
content: '';
|
||||
background: #1677ff;
|
||||
border: 2px solid #d6e4ff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
left: -18px;
|
||||
width: 2px;
|
||||
height: calc(100% - 12px);
|
||||
content: '';
|
||||
background: #e8e8e8;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
font-weight: 500;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
|
||||
.time {
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
}
|
||||
|
||||
.fi-remark-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
font-size: 13px;
|
||||
color: rgb(0 0 0 / 65%);
|
||||
background: #fafafa;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.fi-remark-line {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
.label {
|
||||
width: 70px;
|
||||
flex-shrink: 0;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* 文件职责：发票管理页面样式聚合入口。
|
||||
*/
|
||||
@import './base.less';
|
||||
@import './layout.less';
|
||||
@import './table.less';
|
||||
@import './drawer.less';
|
||||
@import './modal.less';
|
||||
@import './responsive.less';
|
||||
166
apps/web-antd/src/views/finance/invoice/styles/layout.less
Normal file
166
apps/web-antd/src/views/finance/invoice/styles/layout.less
Normal file
@@ -0,0 +1,166 @@
|
||||
/**
|
||||
* 文件职责：发票管理页面布局样式。
|
||||
*/
|
||||
.fi-seg-wrap {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.fi-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.fi-stat-card {
|
||||
padding: 18px 20px;
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 6px 14px rgb(15 23 42 / 10%);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&.warn .fi-stat-val {
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
&.danger .fi-stat-val {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
}
|
||||
|
||||
.fi-stat-label {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
font-size: 13px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.fi-stat-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.fi-stat-val {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
|
||||
.fi-stat-sub {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.fi-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 14px 16px;
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
|
||||
|
||||
.fi-date-input {
|
||||
width: 146px;
|
||||
}
|
||||
|
||||
.fi-status-select,
|
||||
.fi-type-select {
|
||||
width: 124px;
|
||||
}
|
||||
|
||||
.fi-date-sep {
|
||||
font-size: 13px;
|
||||
line-height: 32px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.fi-toolbar-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.fi-search {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.fi-search-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.ant-select-selector,
|
||||
.ant-input,
|
||||
.ant-input-affix-wrapper {
|
||||
height: 32px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper .ant-input {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.fi-settings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.fi-section-hd {
|
||||
padding-left: 10px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
border-left: 3px solid #1677ff;
|
||||
}
|
||||
|
||||
.fi-form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px 24px;
|
||||
}
|
||||
|
||||
.fi-toggle-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.fi-toggle-label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
|
||||
.fi-toggle-hint {
|
||||
font-size: 12px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.fi-auto-form {
|
||||
max-width: 340px;
|
||||
}
|
||||
|
||||
.fi-max-amount-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fi-save-bar {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
63
apps/web-antd/src/views/finance/invoice/styles/modal.less
Normal file
63
apps/web-antd/src/views/finance/invoice/styles/modal.less
Normal file
@@ -0,0 +1,63 @@
|
||||
/**
|
||||
* 文件职责：发票弹窗样式。
|
||||
*/
|
||||
.fi-void-modal,
|
||||
.fi-issue-result,
|
||||
.fi-settings-confirm {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.fi-void-warning {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #cf1322;
|
||||
}
|
||||
|
||||
.fi-void-summary,
|
||||
.fi-result-list,
|
||||
.fi-settings-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 12px 14px;
|
||||
background: #fafafa;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.fi-void-line,
|
||||
.fi-result-line,
|
||||
.fi-settings-line {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
|
||||
.label {
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.value {
|
||||
color: rgb(0 0 0 / 88%);
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.fi-result-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.fi-result-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.fi-settings-desc {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: rgb(0 0 0 / 65%);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
/**
|
||||
* 文件职责：发票管理页面响应式样式。
|
||||
*/
|
||||
@media (max-width: 1600px) {
|
||||
.fi-stats {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.fi-stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.fi-toolbar {
|
||||
padding: 14px 12px;
|
||||
|
||||
.fi-date-input,
|
||||
.fi-status-select,
|
||||
.fi-type-select,
|
||||
.fi-search {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fi-date-sep,
|
||||
.fi-toolbar-spacer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fi-form-grid,
|
||||
.fi-info-grid {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
.full {
|
||||
grid-column: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.fi-save-bar {
|
||||
justify-content: stretch;
|
||||
|
||||
.ant-btn {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
62
apps/web-antd/src/views/finance/invoice/styles/table.less
Normal file
62
apps/web-antd/src/views/finance/invoice/styles/table.less
Normal file
@@ -0,0 +1,62 @@
|
||||
/**
|
||||
* 文件职责：发票记录表格样式。
|
||||
*/
|
||||
.fi-table-card {
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
|
||||
.ant-table-wrapper {
|
||||
.ant-table-thead > tr > th {
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td {
|
||||
font-size: 13px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-pagination {
|
||||
margin: 14px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.fi-company-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
|
||||
.fi-applicant {
|
||||
font-weight: 500;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
|
||||
.fi-company {
|
||||
font-size: 12px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
}
|
||||
|
||||
.fi-amount {
|
||||
font-weight: 600;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
|
||||
.fi-time {
|
||||
font-size: 12px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fi-link-action {
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
.fi-action-wrap {
|
||||
display: inline-flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
57
apps/web-antd/src/views/finance/invoice/types.ts
Normal file
57
apps/web-antd/src/views/finance/invoice/types.ts
Normal file
@@ -0,0 +1,57 @@
|
||||
/**
|
||||
* 文件职责：发票管理页面本地状态类型定义。
|
||||
*/
|
||||
import type {
|
||||
FinanceInvoiceStatusFilter,
|
||||
FinanceInvoiceTypeFilter,
|
||||
} from '#/api/finance';
|
||||
|
||||
/** 页面分段键。 */
|
||||
export type FinanceInvoiceTabKey = 'records' | 'settings';
|
||||
|
||||
/** 发票记录筛选状态。 */
|
||||
export interface FinanceInvoiceFilterState {
|
||||
endDate: string;
|
||||
invoiceType: FinanceInvoiceTypeFilter;
|
||||
keyword: string;
|
||||
startDate: string;
|
||||
status: FinanceInvoiceStatusFilter;
|
||||
}
|
||||
|
||||
/** 发票记录分页状态。 */
|
||||
export interface FinanceInvoicePaginationState {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
totalCount: number;
|
||||
}
|
||||
|
||||
/** 发票设置表单状态。 */
|
||||
export interface FinanceInvoiceSettingFormState {
|
||||
autoIssueMaxAmount: number;
|
||||
bankAccount: string;
|
||||
bankName: string;
|
||||
companyName: string;
|
||||
enableAutoIssue: boolean;
|
||||
enableElectronicNormalInvoice: boolean;
|
||||
enableElectronicSpecialInvoice: boolean;
|
||||
registeredAddress: string;
|
||||
registeredPhone: string;
|
||||
taxpayerNumber: string;
|
||||
}
|
||||
|
||||
/** 发票开票抽屉表单状态。 */
|
||||
export interface FinanceInvoiceIssueFormState {
|
||||
contactEmail: string;
|
||||
issueRemark: string;
|
||||
}
|
||||
|
||||
/** 发票作废弹窗表单状态。 */
|
||||
export interface FinanceInvoiceVoidFormState {
|
||||
voidReason: string;
|
||||
}
|
||||
|
||||
/** 通用选项项。 */
|
||||
export interface OptionItem {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
Reference in New Issue
Block a user