工单和发票

酒厂银行账户

apps/admin-web/src/pages/InvoicesPage.tsx

@@ -5,7 +5,9 @@ import {
   Drawer,
   Form,
   Input,
+  Modal,
   Select,
+  Space,
   Table,
   Tag,
   Typography,
@@ -47,6 +49,19 @@ type Row = {
   remark?: string;
 };
 
+type CreateFormValues = {
+  orderNo: string;
+  titleType: InvoiceTitleType;
+  invoiceKind: InvoiceKind;
+  titleName: string;
+  taxNo?: string;
+  addressPhone?: string;
+  bankAccount?: string;
+  email: string;
+  phone: string;
+  remark?: string;
+};
+
 export default function InvoicesPage() {
   const [filters, setFilters] = useState<Record<string, string>>({});
   const { data, loading, page, pageSize, setPage, setPageSize, reload } = useAdminList<Row>(
@@ -61,6 +76,11 @@ export default function InvoicesPage() {
   const [detail, setDetail] = useState<Row | null>(null);
   const [drawerOpen, setDrawerOpen] = useState(false);
   const [uploading, setUploading] = useState(false);
+  const [createOpen, setCreateOpen] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [createForm] = Form.useForm<CreateFormValues>();
+  const invoiceKind = Form.useWatch('invoiceKind', createForm);
+  const titleType = Form.useWatch('titleType', createForm);
 
   async function openDetail(id: string) {
     setDetail(await request(`/admin/invoices/${id}`));
@@ -98,6 +118,36 @@ export default function InvoicesPage() {
     setDrawerOpen(false);
   }
 
+  async function submitCreate() {
+    const values = await createForm.validateFields();
+    setCreating(true);
+    try {
+      await request('/admin/invoices', {
+        method: 'POST',
+        body: JSON.stringify({
+          orderNo: values.orderNo.trim(),
+          titleType: values.titleType,
+          invoiceKind: values.invoiceKind,
+          titleName: values.titleName.trim(),
+          taxNo: values.taxNo?.trim() || undefined,
+          addressPhone: values.addressPhone?.trim() || undefined,
+          bankAccount: values.bankAccount?.trim() || undefined,
+          email: values.email.trim(),
+          phone: values.phone.trim(),
+          remark: values.remark?.trim() || undefined,
+        }),
+      });
+      message.success('发票申请已创建');
+      setCreateOpen(false);
+      createForm.resetFields();
+      reload();
+    } catch (e) {
+      message.error(e instanceof Error ? e.message : '创建失败');
+    } finally {
+      setCreating(false);
+    }
+  }
+
   const columns: ColumnsType<Row> = [
     { title: '申请单号', dataIndex: 'invoiceNo', width: 180 },
     { title: '订单号', dataIndex: 'orderNo', width: 160 },
@@ -138,7 +188,30 @@ export default function InvoicesPage() {
 
   return (
     <div>
-      <Typography.Title level={4}>发票管理</Typography.Title>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: 16,
+        }}
+      >
+        <Typography.Title level={4} style={{ margin: 0 }}>
+          发票管理
+        </Typography.Title>
+        <Button
+          type="primary"
+          onClick={() => {
+            createForm.setFieldsValue({
+              titleType: 'PERSONAL',
+              invoiceKind: 'NORMAL',
+            });
+            setCreateOpen(true);
+          }}
+        >
+          创建发票申请
+        </Button>
+      </div>
       <Form
         layout="inline"
         style={{ marginBottom: 16 }}
@@ -187,7 +260,7 @@ export default function InvoicesPage() {
         onClose={() => setDrawerOpen(false)}
         extra={
           detail?.status === 'PENDING' ? (
-            <>
+            <Space>
               <Upload
                 accept="image/*,.pdf"
                 showUploadList={false}
@@ -196,14 +269,14 @@ export default function InvoicesPage() {
                   return false;
                 }}
               >
-                <Button type="primary" loading={uploading} style={{ marginRight: 8 }}>
+                <Button type="primary" loading={uploading}>
                   上传并开票
                 </Button>
               </Upload>
               <Button danger onClick={() => void reject()}>
                 驳回
               </Button>
-            </>
+            </Space>
           ) : null
         }
       >
@@ -242,6 +315,110 @@ export default function InvoicesPage() {
           </Descriptions>
         )}
       </Drawer>
+
+      <Modal
+        title="创建发票申请"
+        open={createOpen}
+        onCancel={() => setCreateOpen(false)}
+        onOk={() => void submitCreate()}
+        confirmLoading={creating}
+        destroyOnClose
+        okText="提交"
+        width={520}
+      >
+        <Form form={createForm} layout="vertical">
+          <Form.Item
+            name="orderNo"
+            label="订单号"
+            rules={[{ required: true, message: '请填写已完成订单号' }]}
+            extra="仅已完成订单可开票"
+          >
+            <Input placeholder="订单号" allowClear />
+          </Form.Item>
+          <Form.Item
+            name="invoiceKind"
+            label="发票类型"
+            rules={[{ required: true, message: '请选择发票类型' }]}
+          >
+            <Select
+              options={(Object.keys(INVOICE_KIND_LABELS) as InvoiceKind[]).map((k) => ({
+                value: k,
+                label: INVOICE_KIND_LABELS[k],
+              }))}
+              onChange={(k: InvoiceKind) => {
+                if (k === 'SPECIAL') createForm.setFieldValue('titleType', 'ENTERPRISE');
+              }}
+            />
+          </Form.Item>
+          <Form.Item
+            name="titleType"
+            label="抬头类型"
+            rules={[{ required: true, message: '请选择抬头类型' }]}
+          >
+            <Select
+              options={(Object.keys(INVOICE_TITLE_TYPE_LABELS) as InvoiceTitleType[]).map((t) => ({
+                value: t,
+                label: INVOICE_TITLE_TYPE_LABELS[t],
+                disabled: invoiceKind === 'SPECIAL' && t === 'PERSONAL',
+              }))}
+            />
+          </Form.Item>
+          <Form.Item
+            name="titleName"
+            label="抬头名称"
+            rules={[{ required: true, message: '请填写抬头名称' }]}
+          >
+            <Input placeholder="个人姓名或企业全称" />
+          </Form.Item>
+          {(titleType === 'ENTERPRISE' || invoiceKind === 'SPECIAL') && (
+            <Form.Item
+              name="taxNo"
+              label="税号"
+              rules={[{ required: true, message: '企业抬头须填写税号' }]}
+            >
+              <Input placeholder="纳税人识别号" />
+            </Form.Item>
+          )}
+          {invoiceKind === 'SPECIAL' && (
+            <>
+              <Form.Item
+                name="addressPhone"
+                label="地址电话"
+                rules={[{ required: true, message: '专用发票须填写地址电话' }]}
+              >
+                <Input placeholder="注册地址及电话" />
+              </Form.Item>
+              <Form.Item
+                name="bankAccount"
+                label="开户行账号"
+                rules={[{ required: true, message: '专用发票须填写开户行账号' }]}
+              >
+                <Input placeholder="开户行及账号" />
+              </Form.Item>
+            </>
+          )}
+          <Form.Item
+            name="email"
+            label="接收邮箱"
+            rules={[
+              { required: true, message: '请填写邮箱' },
+              { type: 'email', message: '邮箱格式不正确' },
+            ]}
+          >
+            <Input placeholder="发票发送邮箱" />
+          </Form.Item>
+          <Form.Item
+            name="phone"
+            label="手机号"
+            rules={[{ required: true, message: '请填写手机号' }]}
+          >
+            <Input placeholder="联系手机" />
+          </Form.Item>
+          <Form.Item name="remark" label="备注">
+            <Input.TextArea rows={2} maxLength={512} showCount />
+          </Form.Item>
+        </Form>
+      </Modal>
     </div>
   );
 }