forked from yoone/WEB
refactor: 提取站点相关逻辑到自定义hook并优化类型定义
将多处重复的站点数据获取和处理的逻辑提取到自定义hook useSites中 修改origin_id类型为string以匹配实际使用场景 移除调试用的console.log语句 为用户名字段添加可复制功能
This commit is contained in:
parent
5471f7a038
commit
2467a0c3b2
|
|
@ -0,0 +1,92 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { sitecontrollerAll } from '@/servers/api/site';
|
||||
|
||||
// 站点数据的类型定义
|
||||
interface Site {
|
||||
id: number;
|
||||
name: string;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
// 自定义 Hook:管理站点数据
|
||||
const useSites = () => {
|
||||
// 添加站点数据状态
|
||||
const [sites, setSites] = useState<Site[]>([]);
|
||||
|
||||
// 添加加载状态
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
|
||||
// 添加错误状态
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// 获取站点数据
|
||||
const fetchSites = async () => {
|
||||
// 设置加载状态为 true
|
||||
setLoading(true);
|
||||
// 清空之前的错误信息
|
||||
setError(null);
|
||||
try {
|
||||
// 调用 API 获取所有站点数据
|
||||
const { data, success } = await sitecontrollerAll();
|
||||
// 判断请求是否成功
|
||||
if (success) {
|
||||
// 将站点数据保存到状态中
|
||||
setSites(data || []);
|
||||
} else {
|
||||
// 如果请求失败,设置错误信息
|
||||
setError('获取站点数据失败');
|
||||
}
|
||||
} catch (error) {
|
||||
// 捕获异常并打印错误日志
|
||||
console.error('获取站点数据失败:', error);
|
||||
// 设置错误信息
|
||||
setError('获取站点数据时发生错误');
|
||||
} finally {
|
||||
// 无论成功与否,都将加载状态设置为 false
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 根据站点ID获取站点名称
|
||||
const getSiteName = (siteId: number | undefined | null) => {
|
||||
// 如果站点ID不存在,返回默认值
|
||||
if (!siteId) return '-';
|
||||
// 如果站点ID是字符串类型,直接返回
|
||||
if (typeof siteId === 'string') {
|
||||
return siteId;
|
||||
}
|
||||
// 在站点列表中查找对应的站点
|
||||
const site = sites.find((s) => s.id === siteId);
|
||||
// 如果找到站点,返回站点名称;否则返回站点ID的字符串形式
|
||||
return site ? site.name : String(siteId);
|
||||
};
|
||||
|
||||
// 根据站点ID获取站点对象
|
||||
const getSiteById = (siteId: number | undefined | null) => {
|
||||
// 如果站点ID不存在,返回 null
|
||||
if (!siteId) return null;
|
||||
// 在站点列表中查找对应的站点
|
||||
const site = sites.find((s) => s.id === siteId);
|
||||
// 返回找到的站点对象,如果找不到则返回 null
|
||||
return site || null;
|
||||
};
|
||||
|
||||
// 组件加载时获取站点数据
|
||||
useEffect(() => {
|
||||
// 调用获取站点数据的函数
|
||||
fetchSites();
|
||||
}, []); // 空依赖数组表示只在组件挂载时执行一次
|
||||
|
||||
// 返回站点数据和相关方法
|
||||
return {
|
||||
sites, // 站点数据列表
|
||||
loading, // 加载状态
|
||||
error, // 错误信息
|
||||
fetchSites, // 重新获取站点数据的方法
|
||||
getSiteName, // 根据ID获取站点名称的方法
|
||||
getSiteById, // 根据ID获取站点对象的方法
|
||||
};
|
||||
};
|
||||
|
||||
// 导出 useSites Hook
|
||||
export default useSites;
|
||||
|
|
@ -115,34 +115,7 @@ const CustomerList: React.FC = () => {
|
|||
const actionRef = useRef<ActionType>();
|
||||
const { message } = App.useApp();
|
||||
const [syncModalVisible, setSyncModalVisible] = useState(false);
|
||||
const [sites, setSites] = useState<any[]>([]); // 添加站点数据状态
|
||||
|
||||
// 获取站点数据
|
||||
const fetchSites = async () => {
|
||||
try {
|
||||
const { data, success } = await sitecontrollerAll();
|
||||
if (success) {
|
||||
setSites(data || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取站点数据失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 根据站点ID获取站点名称
|
||||
const getSiteName = (siteId: number | undefined | null) => {
|
||||
if (!siteId) return '-';
|
||||
if (typeof siteId === 'string') {
|
||||
return siteId;
|
||||
}
|
||||
const site = sites.find((s) => s.id === siteId);
|
||||
return site ? site.name : String(siteId);
|
||||
};
|
||||
|
||||
// 组件加载时获取站点数据
|
||||
useEffect(() => {
|
||||
fetchSites();
|
||||
}, []);
|
||||
|
||||
const columns: ProColumns<API.GetCustomerDTO>[] = [
|
||||
{
|
||||
|
|
@ -204,8 +177,8 @@ const CustomerList: React.FC = () => {
|
|||
},
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'username',
|
||||
hideInSearch: true,
|
||||
dataIndex: 'username',
|
||||
copyable: true,
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
|
|
@ -223,6 +196,7 @@ const CustomerList: React.FC = () => {
|
|||
title: '账单地址',
|
||||
dataIndex: 'billing',
|
||||
hideInSearch: true,
|
||||
|
||||
width: 200,
|
||||
render: (billing) => <AddressCell address={billing} title="账单地址" />,
|
||||
},
|
||||
|
|
@ -236,7 +210,6 @@ const CustomerList: React.FC = () => {
|
|||
{
|
||||
title: '评分',
|
||||
dataIndex: 'rate',
|
||||
width: 120,
|
||||
hideInSearch: true,
|
||||
sorter: true,
|
||||
render: (_, record) => {
|
||||
|
|
|
|||
|
|
@ -191,10 +191,9 @@ const ListPage: React.FC = () => {
|
|||
request: async () => {
|
||||
try {
|
||||
const result = await sitecontrollerAll();
|
||||
console.log('result',result)
|
||||
const {success, data}= result
|
||||
if (success && data) {
|
||||
return data.map((site: API.SiteConfig) => ({
|
||||
return data.map((site: any) => ({
|
||||
label: site.name,
|
||||
value: site.id,
|
||||
}));
|
||||
|
|
|
|||
|
|
@ -213,7 +213,7 @@ declare namespace API {
|
|||
/** 站点ID */
|
||||
site_id?: number;
|
||||
/** 原始ID */
|
||||
origin_id?: number;
|
||||
origin_id?: string;
|
||||
/** 邮箱 */
|
||||
email?: string;
|
||||
/** 名字 */
|
||||
|
|
|
|||
Loading…
Reference in New Issue