372 lines
12 KiB
TypeScript
372 lines
12 KiB
TypeScript
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
import {
|
|
Alert,
|
|
Button,
|
|
Divider,
|
|
Form,
|
|
Input,
|
|
InputNumber,
|
|
Modal,
|
|
Select,
|
|
Space,
|
|
Table,
|
|
Tag,
|
|
Typography,
|
|
message,
|
|
} from 'antd';
|
|
import type { ColumnsType } from 'antd/es/table';
|
|
import {
|
|
DEFAULT_XFX_LOGISTICS_PRICING,
|
|
FULFILLMENT_PROVIDER_STATUS_LABELS,
|
|
FULFILLMENT_PROVIDER_TYPE_LABELS,
|
|
FulfillmentProviderStatus,
|
|
FulfillmentProviderType,
|
|
LOGISTICS_SETTLEMENT_METHOD_LABELS,
|
|
LogisticsSettlementMethod,
|
|
isXfxProviderCode,
|
|
type FulfillmentProviderDto,
|
|
} from '@dukang/shared-types';
|
|
import { request } from '../lib/api';
|
|
import { fmtTime } from '../lib/constants';
|
|
|
|
const TYPE_OPTIONS = Object.entries(FULFILLMENT_PROVIDER_TYPE_LABELS).map(([value, label]) => ({
|
|
value,
|
|
label,
|
|
}));
|
|
const STATUS_OPTIONS = Object.entries(FULFILLMENT_PROVIDER_STATUS_LABELS).map(([value, label]) => ({
|
|
value,
|
|
label,
|
|
}));
|
|
const SETTLEMENT_OPTIONS = Object.entries(LOGISTICS_SETTLEMENT_METHOD_LABELS).map(
|
|
([value, label]) => ({ value, label }),
|
|
);
|
|
const SIGN_OPTIONS = [
|
|
{ value: 'MD5', label: 'MD5' },
|
|
{ value: 'HMAC-SHA256', label: 'HMAC-SHA256' },
|
|
];
|
|
|
|
const DEFAULT_XFX_API_URL = 'https://beta.51xiaoju.cn/app/api/interface.do';
|
|
|
|
export default function FulfillmentProvidersPage() {
|
|
const [rows, setRows] = useState<FulfillmentProviderDto[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [open, setOpen] = useState(false);
|
|
const [editRow, setEditRow] = useState<FulfillmentProviderDto | null>(null);
|
|
const [form] = Form.useForm();
|
|
const watchedCode = Form.useWatch('code', form);
|
|
const watchedType = Form.useWatch('type', form);
|
|
|
|
const showXfxFields = useMemo(
|
|
() => isXfxProviderCode(String(watchedCode || '')) && watchedType === FulfillmentProviderType.API,
|
|
[watchedCode, watchedType],
|
|
);
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await request<FulfillmentProviderDto[]>('/admin/fulfillment-providers');
|
|
setRows(res);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
void load();
|
|
}, [load]);
|
|
|
|
function openCreate() {
|
|
setEditRow(null);
|
|
form.resetFields();
|
|
form.setFieldsValue({
|
|
code: 'XFX',
|
|
name: '小飞侠',
|
|
type: FulfillmentProviderType.API,
|
|
status: FulfillmentProviderStatus.ACTIVE,
|
|
apiUrl: DEFAULT_XFX_API_URL,
|
|
signType: 'MD5',
|
|
settlementMethod: LogisticsSettlementMethod.PREPAID,
|
|
baseBottles: DEFAULT_XFX_LOGISTICS_PRICING.baseBottles,
|
|
baseFee: DEFAULT_XFX_LOGISTICS_PRICING.baseFee,
|
|
extraBottleFee: DEFAULT_XFX_LOGISTICS_PRICING.extraBottleFee,
|
|
boxBottles: DEFAULT_XFX_LOGISTICS_PRICING.boxBottles,
|
|
boxFee: DEFAULT_XFX_LOGISTICS_PRICING.boxFee,
|
|
});
|
|
setOpen(true);
|
|
}
|
|
|
|
function openEdit(row: FulfillmentProviderDto) {
|
|
setEditRow(row);
|
|
const xfx = row.xiaofeixiaConfig;
|
|
const pricing = row.pricingRules;
|
|
form.setFieldsValue({
|
|
code: row.code,
|
|
name: row.name,
|
|
type: row.type,
|
|
status: row.status,
|
|
apiUrl: xfx?.apiUrl || DEFAULT_XFX_API_URL,
|
|
mchId: xfx?.mchId || '',
|
|
apiKey: '',
|
|
signType: xfx?.signType || 'MD5',
|
|
appId: xfx?.appId || '',
|
|
bankAccountName: row.bankAccountName || '',
|
|
bankName: row.bankName || '',
|
|
bankBranch: row.bankBranch || '',
|
|
bankAccountNo: row.bankAccountNo || '',
|
|
settlementMethod: row.settlementMethod || LogisticsSettlementMethod.PREPAID,
|
|
baseBottles: pricing?.baseBottles ?? DEFAULT_XFX_LOGISTICS_PRICING.baseBottles,
|
|
baseFee: pricing?.baseFee ?? DEFAULT_XFX_LOGISTICS_PRICING.baseFee,
|
|
extraBottleFee: pricing?.extraBottleFee ?? DEFAULT_XFX_LOGISTICS_PRICING.extraBottleFee,
|
|
boxBottles: pricing?.boxBottles ?? DEFAULT_XFX_LOGISTICS_PRICING.boxBottles,
|
|
boxFee: pricing?.boxFee ?? DEFAULT_XFX_LOGISTICS_PRICING.boxFee,
|
|
});
|
|
setOpen(true);
|
|
}
|
|
|
|
async function submit() {
|
|
const v = await form.validateFields();
|
|
const payload: Record<string, unknown> = {
|
|
name: v.name,
|
|
type: v.type,
|
|
status: v.status,
|
|
bankAccountName: v.bankAccountName || null,
|
|
bankName: v.bankName || null,
|
|
bankBranch: v.bankBranch || null,
|
|
bankAccountNo: v.bankAccountNo || null,
|
|
settlementMethod: v.settlementMethod,
|
|
pricingRules: {
|
|
baseBottles: Number(v.baseBottles),
|
|
baseFee: Number(v.baseFee),
|
|
extraBottleFee: Number(v.extraBottleFee),
|
|
boxBottles: v.boxBottles != null ? Number(v.boxBottles) : undefined,
|
|
boxFee: v.boxFee != null ? Number(v.boxFee) : undefined,
|
|
},
|
|
};
|
|
|
|
if (isXfxProviderCode(String(v.code)) && v.type === FulfillmentProviderType.API) {
|
|
payload.xiaofeixiaConfig = {
|
|
apiUrl: v.apiUrl,
|
|
mchId: v.mchId,
|
|
apiKey: v.apiKey || undefined,
|
|
signType: v.signType,
|
|
appId: v.appId || undefined,
|
|
};
|
|
}
|
|
|
|
if (editRow) {
|
|
await request(`/admin/fulfillment-providers/${editRow.id}`, {
|
|
method: 'PUT',
|
|
body: JSON.stringify(payload),
|
|
});
|
|
message.success('已更新');
|
|
} else {
|
|
await request('/admin/fulfillment-providers', {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
code: v.code,
|
|
...payload,
|
|
}),
|
|
});
|
|
message.success('已创建');
|
|
}
|
|
setOpen(false);
|
|
void load();
|
|
}
|
|
|
|
const columns: ColumnsType<FulfillmentProviderDto> = [
|
|
{ title: '编码', dataIndex: 'code', width: 100 },
|
|
{ title: '名称', dataIndex: 'name' },
|
|
{
|
|
title: '类型',
|
|
dataIndex: 'type',
|
|
render: (v) => FULFILLMENT_PROVIDER_TYPE_LABELS[v as FulfillmentProviderType] || v,
|
|
},
|
|
{
|
|
title: '结算',
|
|
dataIndex: 'settlementMethod',
|
|
width: 100,
|
|
render: (v) =>
|
|
LOGISTICS_SETTLEMENT_METHOD_LABELS[v as LogisticsSettlementMethod] || v || '—',
|
|
},
|
|
{
|
|
title: '充值余额',
|
|
dataIndex: 'prepaidBalance',
|
|
width: 100,
|
|
render: (v) => `¥${Number(v || 0).toFixed(2)}`,
|
|
},
|
|
{
|
|
title: '状态',
|
|
dataIndex: 'status',
|
|
render: (v) => (
|
|
<Tag color={v === 'ACTIVE' ? 'green' : 'default'}>
|
|
{FULFILLMENT_PROVIDER_STATUS_LABELS[v as FulfillmentProviderStatus] || v}
|
|
</Tag>
|
|
),
|
|
},
|
|
{
|
|
title: '接口配置',
|
|
render: (_, row) => {
|
|
if (isXfxProviderCode(row.code)) {
|
|
const cfg = row.xiaofeixiaConfig;
|
|
if (!cfg?.apiUrl) return <Tag>未配置</Tag>;
|
|
return (
|
|
<span title={cfg.apiUrl}>
|
|
{cfg.hasApiKey ? '已配置' : '缺 Key'} · {cfg.mchId || '无商户号'}
|
|
</span>
|
|
);
|
|
}
|
|
return row.hasConfig ? '已配置' : '—';
|
|
},
|
|
},
|
|
{ title: '更新时间', dataIndex: 'updatedAt', width: 170, render: fmtTime },
|
|
{
|
|
title: '操作',
|
|
width: 80,
|
|
render: (_, row) => (
|
|
<Button type="link" size="small" onClick={() => openEdit(row)}>
|
|
编辑
|
|
</Button>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div>
|
|
<Space style={{ marginBottom: 16, width: '100%', justifyContent: 'space-between' }}>
|
|
<div>
|
|
<Typography.Title level={4} style={{ margin: 0 }}>
|
|
仓配管理
|
|
</Typography.Title>
|
|
<Typography.Text type="secondary">
|
|
注册承运商接口凭证，并配置物流对账用的银行账户、结算方式与计价标准
|
|
</Typography.Text>
|
|
</div>
|
|
<Button type="primary" onClick={openCreate}>
|
|
注册承运商
|
|
</Button>
|
|
</Space>
|
|
|
|
<Alert
|
|
type="info"
|
|
showIcon
|
|
style={{ marginBottom: 16 }}
|
|
message="小飞侠默认计价：2瓶6元，加一瓶+2元，6瓶一箱14元。财务对账见「财务 → 物流对账」。"
|
|
/>
|
|
|
|
<Table rowKey="id" loading={loading} columns={columns} dataSource={rows} pagination={false} />
|
|
|
|
<Modal
|
|
title={editRow ? '编辑承运商' : '注册承运商'}
|
|
open={open}
|
|
onCancel={() => setOpen(false)}
|
|
onOk={() => void submit()}
|
|
width={640}
|
|
destroyOnClose
|
|
>
|
|
<Form form={form} layout="vertical">
|
|
<Form.Item name="code" label="编码" rules={[{ required: true }]}>
|
|
<Input disabled={Boolean(editRow)} placeholder="如 XFX、JD、SF" />
|
|
</Form.Item>
|
|
<Form.Item name="name" label="名称" rules={[{ required: true }]}>
|
|
<Input placeholder="如 小飞侠、京东物流" />
|
|
</Form.Item>
|
|
<Form.Item name="type" label="类型" rules={[{ required: true }]}>
|
|
<Select options={TYPE_OPTIONS} />
|
|
</Form.Item>
|
|
<Form.Item name="status" label="状态" rules={[{ required: true }]}>
|
|
<Select options={STATUS_OPTIONS} />
|
|
</Form.Item>
|
|
|
|
<Divider orientation="left">物流对账</Divider>
|
|
<Form.Item name="settlementMethod" label="结算方式" rules={[{ required: true }]}>
|
|
<Select options={SETTLEMENT_OPTIONS} />
|
|
</Form.Item>
|
|
<Form.Item name="bankAccountName" label="收款户名">
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item name="bankName" label="开户银行">
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item name="bankBranch" label="开户支行">
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item name="bankAccountNo" label="银行账号">
|
|
<Input />
|
|
</Form.Item>
|
|
<Space wrap style={{ width: '100%' }}>
|
|
<Form.Item
|
|
name="baseBottles"
|
|
label="起送瓶数"
|
|
rules={[{ required: true }]}
|
|
style={{ marginBottom: 12 }}
|
|
>
|
|
<InputNumber min={1} style={{ width: 120 }} />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="baseFee"
|
|
label="起送费用(元)"
|
|
rules={[{ required: true }]}
|
|
style={{ marginBottom: 12 }}
|
|
>
|
|
<InputNumber min={0} precision={2} style={{ width: 120 }} />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="extraBottleFee"
|
|
label="加一瓶(元)"
|
|
rules={[{ required: true }]}
|
|
style={{ marginBottom: 12 }}
|
|
>
|
|
<InputNumber min={0} precision={2} style={{ width: 120 }} />
|
|
</Form.Item>
|
|
<Form.Item name="boxBottles" label="箱规瓶数" style={{ marginBottom: 12 }}>
|
|
<InputNumber min={1} style={{ width: 120 }} />
|
|
</Form.Item>
|
|
<Form.Item name="boxFee" label="一箱费用(元)" style={{ marginBottom: 12 }}>
|
|
<InputNumber min={0} precision={2} style={{ width: 120 }} />
|
|
</Form.Item>
|
|
</Space>
|
|
|
|
{showXfxFields && (
|
|
<>
|
|
<Divider orientation="left">小飞侠接口参数</Divider>
|
|
<Form.Item
|
|
name="apiUrl"
|
|
label="API 地址"
|
|
rules={[{ required: true, message: '请填写小飞侠 API 地址' }]}
|
|
extra="推单请求将发往此地址"
|
|
>
|
|
<Input placeholder={DEFAULT_XFX_API_URL} />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="mchId"
|
|
label="商户号"
|
|
rules={[{ required: true, message: '请填写商户号' }]}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="apiKey"
|
|
label="API Key"
|
|
rules={editRow ? [] : [{ required: true, message: '请填写 API Key' }]}
|
|
extra={
|
|
editRow?.xiaofeixiaConfig?.hasApiKey
|
|
? '已配置密钥；留空则保持不变'
|
|
: undefined
|
|
}
|
|
>
|
|
<Input.Password placeholder={editRow ? '留空则不修改' : '请输入'} />
|
|
</Form.Item>
|
|
<Form.Item name="signType" label="签名类型" initialValue="MD5">
|
|
<Select options={SIGN_OPTIONS} />
|
|
</Form.Item>
|
|
<Form.Item name="appId" label="AppID（可选）">
|
|
<Input />
|
|
</Form.Item>
|
|
</>
|
|
)}
|
|
</Form>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|