删除门店的多银行账户列表
This commit is contained in:
@@ -1,178 +0,0 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { Button, Form, Input, Modal, Popconfirm, Space, Table, Tag, message } from 'antd';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import type { StoreBankAccountDto } from '@dukang/shared-types';
|
||||
import { request } from '../lib/api';
|
||||
|
||||
type Props = { storeId: string };
|
||||
|
||||
type FormValues = { bankAccountName: string; bankAccountNo: string; bankBranch?: string };
|
||||
|
||||
export default function StoreBankAccountsPanel({ storeId }: Props) {
|
||||
const [form] = Form.useForm<FormValues>();
|
||||
const [items, setItems] = useState<StoreBankAccountDto[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await request<StoreBankAccountDto[]>(`/admin/stores/${storeId}/bank-accounts`);
|
||||
setItems(res ?? []);
|
||||
} catch (e) {
|
||||
message.error(e instanceof Error ? e.message : '加载失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [storeId]);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
function openCreate() {
|
||||
setEditingId(null);
|
||||
form.resetFields();
|
||||
setModalOpen(true);
|
||||
}
|
||||
|
||||
function openEdit(item: StoreBankAccountDto) {
|
||||
setEditingId(item.id);
|
||||
form.setFieldsValue({
|
||||
bankAccountName: item.bankAccountName,
|
||||
bankAccountNo: item.bankAccountNo,
|
||||
bankBranch: item.bankBranch ?? '',
|
||||
});
|
||||
setModalOpen(true);
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
const v = await form.validateFields();
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const body = JSON.stringify({
|
||||
bankAccountName: v.bankAccountName.trim(),
|
||||
bankAccountNo: v.bankAccountNo.replace(/\s+/g, ''),
|
||||
bankBranch: v.bankBranch?.trim() || undefined,
|
||||
});
|
||||
if (editingId) {
|
||||
await request(`/admin/stores/${storeId}/bank-accounts/${editingId}`, { method: 'PUT', body });
|
||||
} else {
|
||||
await request(`/admin/stores/${storeId}/bank-accounts`, { method: 'POST', body });
|
||||
}
|
||||
message.success('已保存');
|
||||
setModalOpen(false);
|
||||
void load();
|
||||
} catch (e) {
|
||||
message.error(e instanceof Error ? e.message : '保存失败');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function setDefault(id: string) {
|
||||
try {
|
||||
await request(`/admin/stores/${storeId}/bank-accounts/${id}/default`, { method: 'POST' });
|
||||
message.success('已设为默认打款账户');
|
||||
void load();
|
||||
} catch (e) {
|
||||
message.error(e instanceof Error ? e.message : '设置失败');
|
||||
}
|
||||
}
|
||||
|
||||
async function remove(id: string) {
|
||||
try {
|
||||
await request(`/admin/stores/${storeId}/bank-accounts/${id}`, { method: 'DELETE' });
|
||||
message.success('已删除');
|
||||
void load();
|
||||
} catch (e) {
|
||||
message.error(e instanceof Error ? e.message : '删除失败');
|
||||
}
|
||||
}
|
||||
|
||||
const columns: ColumnsType<StoreBankAccountDto> = [
|
||||
{ title: '收款人', dataIndex: 'bankAccountName', width: 140 },
|
||||
{ title: '银行账号', dataIndex: 'bankAccountNo', width: 180 },
|
||||
{ title: '开户行', dataIndex: 'bankBranch', render: (v) => v || '—' },
|
||||
{
|
||||
title: '默认',
|
||||
dataIndex: 'isDefault',
|
||||
width: 80,
|
||||
render: (v) => (v ? <Tag color="green">默认</Tag> : null),
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 220,
|
||||
render: (_, row) => (
|
||||
<Space size={0} wrap>
|
||||
<Button type="link" size="small" onClick={() => openEdit(row)}>编辑</Button>
|
||||
{!row.isDefault ? (
|
||||
<Button type="link" size="small" onClick={() => void setDefault(row.id)}>设为默认</Button>
|
||||
) : null}
|
||||
{!row.isDefault ? (
|
||||
<Popconfirm
|
||||
title="确认删除该收款账户？"
|
||||
okText="删除"
|
||||
okButtonProps={{ danger: true }}
|
||||
onConfirm={() => void remove(row.id)}
|
||||
>
|
||||
<Button type="link" size="small" danger>删除</Button>
|
||||
</Popconfirm>
|
||||
) : null}
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Space style={{ marginBottom: 12, width: '100%', justifyContent: 'space-between' }}>
|
||||
<span style={{ color: '#888' }}>
|
||||
每门店可维护多个收款账户，标记「默认」的账户用于核销结算与提现打款；切换即时生效、无需重启服务。
|
||||
</span>
|
||||
<Button type="primary" size="small" onClick={openCreate}>新增账户</Button>
|
||||
</Space>
|
||||
<Table
|
||||
rowKey="id"
|
||||
size="small"
|
||||
loading={loading}
|
||||
columns={columns}
|
||||
dataSource={items}
|
||||
pagination={false}
|
||||
/>
|
||||
<Modal
|
||||
title={editingId ? '编辑收款账户' : '新增收款账户'}
|
||||
open={modalOpen}
|
||||
confirmLoading={submitting}
|
||||
onCancel={() => setModalOpen(false)}
|
||||
onOk={() => void submit()}
|
||||
okText="保存"
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item
|
||||
name="bankAccountName"
|
||||
label="收款人"
|
||||
rules={[{ required: true, message: '请填写收款人' }]}
|
||||
>
|
||||
<Input maxLength={64} placeholder="户名 / 收款人姓名" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="bankAccountNo"
|
||||
label="银行账号"
|
||||
rules={[
|
||||
{ required: true, message: '请填写银行账号' },
|
||||
{ pattern: /^\d{8,32}$/, message: '请填写 8～32 位数字账号' },
|
||||
]}
|
||||
>
|
||||
<Input maxLength={32} placeholder="请输入银行账号" />
|
||||
</Form.Item>
|
||||
<Form.Item name="bankBranch" label="开户行名称">
|
||||
<Input maxLength={128} placeholder="如 中国工商银行郑州分行" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user