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 actionRef = useRef<ActionType>();
|
||||||
const { message } = App.useApp();
|
const { message } = App.useApp();
|
||||||
const [syncModalVisible, setSyncModalVisible] = useState(false);
|
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>[] = [
|
const columns: ProColumns<API.GetCustomerDTO>[] = [
|
||||||
{
|
{
|
||||||
|
|
@ -204,8 +177,8 @@ const CustomerList: React.FC = () => {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '用户名',
|
title: '用户名',
|
||||||
dataIndex: 'username',
|
dataIndex: 'username',
|
||||||
hideInSearch: true,
|
copyable: true,
|
||||||
sorter: true,
|
sorter: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -223,6 +196,7 @@ const CustomerList: React.FC = () => {
|
||||||
title: '账单地址',
|
title: '账单地址',
|
||||||
dataIndex: 'billing',
|
dataIndex: 'billing',
|
||||||
hideInSearch: true,
|
hideInSearch: true,
|
||||||
|
|
||||||
width: 200,
|
width: 200,
|
||||||
render: (billing) => <AddressCell address={billing} title="账单地址" />,
|
render: (billing) => <AddressCell address={billing} title="账单地址" />,
|
||||||
},
|
},
|
||||||
|
|
@ -236,7 +210,6 @@ const CustomerList: React.FC = () => {
|
||||||
{
|
{
|
||||||
title: '评分',
|
title: '评分',
|
||||||
dataIndex: 'rate',
|
dataIndex: 'rate',
|
||||||
width: 120,
|
|
||||||
hideInSearch: true,
|
hideInSearch: true,
|
||||||
sorter: true,
|
sorter: true,
|
||||||
render: (_, record) => {
|
render: (_, record) => {
|
||||||
|
|
|
||||||
|
|
@ -191,10 +191,9 @@ const ListPage: React.FC = () => {
|
||||||
request: async () => {
|
request: async () => {
|
||||||
try {
|
try {
|
||||||
const result = await sitecontrollerAll();
|
const result = await sitecontrollerAll();
|
||||||
console.log('result',result)
|
|
||||||
const {success, data}= result
|
const {success, data}= result
|
||||||
if (success && data) {
|
if (success && data) {
|
||||||
return data.map((site: API.SiteConfig) => ({
|
return data.map((site: any) => ({
|
||||||
label: site.name,
|
label: site.name,
|
||||||
value: site.id,
|
value: site.id,
|
||||||
}));
|
}));
|
||||||
|
|
|
||||||
|
|
@ -213,7 +213,7 @@ declare namespace API {
|
||||||
/** 站点ID */
|
/** 站点ID */
|
||||||
site_id?: number;
|
site_id?: number;
|
||||||
/** 原始ID */
|
/** 原始ID */
|
||||||
origin_id?: number;
|
origin_id?: string;
|
||||||
/** 邮箱 */
|
/** 邮箱 */
|
||||||
email?: string;
|
email?: string;
|
||||||
/** 名字 */
|
/** 名字 */
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue