feat: 添加站点Site管理 #30
|
|
@ -16,3 +16,4 @@
|
|||
*.yaml
|
||||
#
|
||||
/docs
|
||||
.DS_Store
|
||||
|
|
|
|||
12
.umirc.ts
12
.umirc.ts
|
|
@ -43,6 +43,18 @@ export default defineConfig({
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '站点管理',
|
||||
path: '/site',
|
||||
access: 'canSeeSite',
|
||||
routes: [
|
||||
{
|
||||
name: '站点列表',
|
||||
path: '/site/list',
|
||||
component: './Site/List',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '商品管理',
|
||||
path: '/product',
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ export default (initialState: any) => {
|
|||
const canSeeCustomer = (isSuper || isAdmin) || (initialState?.user?.permissions?.includes('customer') ?? false);
|
||||
const canSeeLogistics = (isSuper || isAdmin) || (initialState?.user?.permissions?.includes('logistics') ?? false);
|
||||
const canSeeStatistics = (isSuper || isAdmin) || (initialState?.user?.permissions?.includes('statistics') ?? false);
|
||||
const canSeeSite = (isSuper || isAdmin) || (initialState?.user?.permissions?.includes('site') ?? false);
|
||||
|
||||
return {
|
||||
canSeeOrganiza,
|
||||
|
|
@ -18,5 +19,6 @@ export default (initialState: any) => {
|
|||
canSeeCustomer,
|
||||
canSeeLogistics,
|
||||
canSeeStatistics,
|
||||
canSeeSite,
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,254 @@
|
|||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { ActionType, ProColumns, ProTable, ProFormInstance } from '@ant-design/pro-components';
|
||||
import { DrawerForm, ProFormText, ProFormSelect, ProFormSwitch } from '@ant-design/pro-components';
|
||||
import { Button, message, Popconfirm, Space, Tag } from 'antd';
|
||||
import { request } from '@umijs/max';
|
||||
|
||||
// 站点数据项类型（前端不包含密钥字段，后端列表不返回密钥）
|
||||
interface SiteItem {
|
||||
id: number;
|
||||
siteName: string;
|
||||
apiUrl?: string;
|
||||
type?: 'woocommerce' | 'shopyy';
|
||||
skuPrefix?: string;
|
||||
isDisabled: number;
|
||||
}
|
||||
|
||||
// 创建/更新表单的值类型，包含可选的密钥字段
|
||||
interface SiteFormValues {
|
||||
siteName: string;
|
||||
apiUrl?: string;
|
||||
type?: 'woocommerce' | 'shopyy';
|
||||
isDisabled?: boolean;
|
||||
consumerKey?: string; // WooCommerce REST API 的 consumer key
|
||||
consumerSecret?: string; // WooCommerce REST API 的 consumer secret
|
||||
skuPrefix?: string;
|
||||
}
|
||||
|
||||
const SiteList: React.FC = () => {
|
||||
const actionRef = useRef<ActionType>();
|
||||
const formRef = useRef<ProFormInstance>();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [editing, setEditing] = useState<SiteItem | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
if (editing) {
|
||||
formRef.current?.setFieldsValue({
|
||||
siteName: editing.siteName,
|
||||
apiUrl: editing.apiUrl,
|
||||
type: editing.type,
|
||||
skuPrefix: editing.skuPrefix,
|
||||
isDisabled: !!editing.isDisabled,
|
||||
consumerKey: undefined,
|
||||
consumerSecret: undefined,
|
||||
});
|
||||
} else {
|
||||
formRef.current?.setFieldsValue({
|
||||
siteName: undefined,
|
||||
apiUrl: undefined,
|
||||
type: 'woocommerce',
|
||||
skuPrefix: undefined,
|
||||
isDisabled: false,
|
||||
consumerKey: undefined,
|
||||
consumerSecret: undefined,
|
||||
});
|
||||
}
|
||||
}, [open, editing]);
|
||||
|
||||
// 表格列定义
|
||||
const columns: ProColumns<SiteItem>[] = [
|
||||
{ title: 'ID', dataIndex: 'id', width: 80, sorter: true, hideInSearch: true },
|
||||
{ title: '站点名称', dataIndex: 'siteName', width: 220 },
|
||||
{ title: 'API 地址', dataIndex: 'apiUrl', width: 280, hideInSearch: true },
|
||||
{ title: 'SKU 前缀', dataIndex: 'skuPrefix', width: 160, hideInSearch: true },
|
||||
{
|
||||
title: '平台',
|
||||
dataIndex: 'type',
|
||||
width: 140,
|
||||
valueType: 'select',
|
||||
request: async () => [
|
||||
{ label: 'WooCommerce', value: 'woocommerce' },
|
||||
{ label: 'Shopyy', value: 'shopyy' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'isDisabled',
|
||||
width: 120,
|
||||
hideInSearch: true,
|
||||
render: (_, row) => (
|
||||
<Tag color={row.isDisabled ? 'red' : 'green'}>
|
||||
{row.isDisabled ? '已禁用' : '启用中'}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'actions',
|
||||
width: 240,
|
||||
hideInSearch: true,
|
||||
render: (_, row) => (
|
||||
<Space>
|
||||
<Button
|
||||
size="small"
|
||||
onClick={() => {
|
||||
setEditing(row);
|
||||
setOpen(true);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Popconfirm
|
||||
title={row.isDisabled ? '启用站点' : '禁用站点'}
|
||||
description={row.isDisabled ? '确认启用该站点？' : '确认禁用该站点？'}
|
||||
onConfirm={async () => {
|
||||
try {
|
||||
await request(`/site/disable/${row.id}`, {
|
||||
method: 'PUT',
|
||||
data: { disabled: !row.isDisabled },
|
||||
});
|
||||
message.success('更新成功');
|
||||
actionRef.current?.reload();
|
||||
} catch (e: any) {
|
||||
message.error(e?.message || '更新失败');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Button size="small" type="primary" danger={!row.isDisabled}>
|
||||
{row.isDisabled ? '启用' : '禁用'}
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
// 表格数据请求
|
||||
const tableRequest = async (params: Record<string, any>) => {
|
||||
try {
|
||||
const { current = 1, pageSize = 10, siteName, type } = params;
|
||||
const resp = await request('/site/list', {
|
||||
method: 'GET',
|
||||
params: {
|
||||
current,
|
||||
pageSize,
|
||||
keyword: siteName || undefined,
|
||||
type: type || undefined,
|
||||
},
|
||||
});
|
||||
const { success, data, message: errMsg } = resp as any;
|
||||
if (!success) throw new Error(errMsg || '获取失败');
|
||||
return {
|
||||
data: (data?.items ?? []) as SiteItem[],
|
||||
total: data?.total ?? 0,
|
||||
success: true,
|
||||
};
|
||||
} catch (e: any) {
|
||||
message.error(e?.message || '获取失败');
|
||||
return { data: [], total: 0, success: false };
|
||||
}
|
||||
};
|
||||
|
||||
// 提交创建/更新逻辑；编辑时未填写密钥则不提交（保持原值）
|
||||
const handleSubmit = async (values: SiteFormValues) => {
|
||||
try {
|
||||
if (editing) {
|
||||
const payload: Record<string, any> = {
|
||||
// 仅提交存在的字段，避免覆盖为 null/空
|
||||
...(values.siteName ? { siteName: values.siteName } : {}),
|
||||
...(values.apiUrl ? { apiUrl: values.apiUrl } : {}),
|
||||
...(values.type ? { type: values.type } : {}),
|
||||
...(typeof values.isDisabled === 'boolean' ? { isDisabled: values.isDisabled } : {}),
|
||||
...(values.skuPrefix ? { skuPrefix: values.skuPrefix } : {}),
|
||||
};
|
||||
// 仅当输入了新密钥时才提交，未输入则保持原本值
|
||||
if (values.consumerKey && values.consumerKey.trim()) {
|
||||
payload.consumerKey = values.consumerKey.trim();
|
||||
}
|
||||
if (values.consumerSecret && values.consumerSecret.trim()) {
|
||||
payload.consumerSecret = values.consumerSecret.trim();
|
||||
}
|
||||
await request(`/site/update/${editing.id}`, { method: 'PUT', data: payload });
|
||||
} else {
|
||||
// 新增站点时要求填写 consumerKey 和 consumerSecret
|
||||
if (!values.consumerKey || !values.consumerSecret) {
|
||||
throw new Error('Consumer Key and Secret are required');
|
||||
}
|
||||
await request('/site/create', {
|
||||
method: 'POST',
|
||||
data: {
|
||||
siteName: values.siteName,
|
||||
apiUrl: values.apiUrl,
|
||||
type: values.type || 'woocommerce',
|
||||
consumerKey: values.consumerKey,
|
||||
consumerSecret: values.consumerSecret,
|
||||
skuPrefix: values.skuPrefix,
|
||||
},
|
||||
});
|
||||
}
|
||||
message.success('提交成功');
|
||||
setOpen(false);
|
||||
setEditing(null);
|
||||
actionRef.current?.reload();
|
||||
return true;
|
||||
} catch (e: any) {
|
||||
message.error(e?.message || '提交失败');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProTable<SiteItem>
|
||||
actionRef={actionRef}
|
||||
rowKey="id"
|
||||
columns={columns}
|
||||
request={tableRequest}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="new"
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
setEditing(null);
|
||||
setOpen(true);
|
||||
}}
|
||||
>
|
||||
新增站点
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
|
||||
<DrawerForm<SiteFormValues>
|
||||
title={editing ? '编辑站点' : '新增站点'}
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
formRef={formRef}
|
||||
onFinish={handleSubmit}
|
||||
>
|
||||
{/* 站点名称，必填 */}
|
||||
<ProFormText name="siteName" label="站点名称" placeholder="例如：本地商店" rules={[{ required: true, message: '站点名称为必填项' }]} />
|
||||
{/* API 地址，可选 */}
|
||||
<ProFormText name="apiUrl" label="API 地址" placeholder="例如：https://shop.example.com" />
|
||||
{/* 平台类型选择 */}
|
||||
<ProFormSelect
|
||||
name="type"
|
||||
label="平台"
|
||||
options={[
|
||||
{ label: 'WooCommerce', value: 'woocommerce' },
|
||||
{ label: 'Shopyy', value: 'shopyy' },
|
||||
]}
|
||||
/>
|
||||
{/* 是否禁用 */}
|
||||
<ProFormSwitch name="isDisabled" label="禁用" />
|
||||
<ProFormText name="skuPrefix" label="SKU 前缀" placeholder={editing ? '留空表示不修改' : '可选'} />
|
||||
{/* WooCommerce REST consumer key；新增必填，编辑不填则保持原值 */}
|
||||
<ProFormText name="consumerKey" label="Key" placeholder={editing ? '留空表示不修改' : '必填'} rules={editing ? [] : [{ required: true, message: 'Key 为必填项' }]} />
|
||||
{/* WooCommerce REST consumer secret；新增必填，编辑不填则保持原值 */}
|
||||
<ProFormText name="consumerSecret" label="Secret" placeholder={editing ? '留空表示不修改' : '必填'} rules={editing ? [] : [{ required: true, message: 'Secret 为必填项' }]} />
|
||||
</DrawerForm>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SiteList;
|
||||
|
|
@ -8,7 +8,7 @@ dayjs.extend(relativeTime);
|
|||
/**
|
||||
* RelatedOrders 表格组件
|
||||
* 用于展示订单详情中的关联数据(订阅/订单)，按统一表格样式渲染
|
||||
* 中文注释:本组件将订阅与订单统一归一化为五列展示，便于快速浏览
|
||||
* 本组件将订阅与订单统一归一化为五列展示，便于快速浏览
|
||||
*/
|
||||
const RelatedOrders: React.FC<{ data?: any[] }> = ({ data = [] }) => {
|
||||
const rows = (Array.isArray(data) ? data : []).map((it: any) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue