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

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