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

apps/web-antd/src/views/finance/invoice/components/InvoiceSettingsPanel.vue

@@ -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>