139 lines
3.6 KiB
TypeScript
139 lines
3.6 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-use-before-define */
|
|
import { ERROR_CODE } from '@/constants/constants';
|
|
import { getImageList } from '@/services/terminal';
|
|
import { Input, message, Table, Tooltip } from 'antd';
|
|
import type { ColumnsType } from 'antd/es/table';
|
|
import React, { useEffect, useState } from 'react';
|
|
import styles from './index.less';
|
|
|
|
interface TableProps {
|
|
selectedRowKeys?: any[];
|
|
onUserTableSelect?: (keys: any[], row: any[]) => void;
|
|
}
|
|
|
|
const TablePage: React.FC<TableProps> = ({
|
|
onUserTableSelect,
|
|
selectedRowKeys,
|
|
}) => {
|
|
const [loading, setLoading] = useState(false);
|
|
const [data, setData] = useState<any[]>([]);
|
|
const [searchText, setSearchText] = useState<any>();
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [pageSize, setPageSize] = useState(20);
|
|
const [total, setTotal] = useState(0);
|
|
|
|
useEffect(() => {
|
|
loadImages();
|
|
}, [searchText, currentPage, pageSize]);
|
|
|
|
const loadImages = async () => {
|
|
const params: any = {
|
|
page_size: pageSize,
|
|
page_num: currentPage,
|
|
};
|
|
if (searchText) {
|
|
params.keywords = searchText;
|
|
}
|
|
setLoading(true);
|
|
try {
|
|
const imagesRes: any = await getImageList(params);
|
|
console.log('imagesRes=========', imagesRes);
|
|
const { code, data } = imagesRes || {};
|
|
const { data: list = [], total = 0 } = data || {};
|
|
if (code === ERROR_CODE) {
|
|
setData(list);
|
|
setTotal(total);
|
|
setLoading(false);
|
|
} else {
|
|
message.error(imagesRes.message || '获取镜像列表失败');
|
|
setLoading(false);
|
|
}
|
|
} catch (err) {
|
|
message.error('获取镜像列表失败');
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const columns: ColumnsType<any> = [
|
|
{
|
|
title: '序号',
|
|
dataIndex: 'order',
|
|
key: 'order',
|
|
width: 80,
|
|
render: (_: any, record: any, index: number) => <span>{index + 1}</span>,
|
|
},
|
|
{
|
|
title: '镜像名称',
|
|
dataIndex: 'image_name',
|
|
ellipsis: true,
|
|
render: (text) => {
|
|
return <Tooltip title={text || '--'}>{text || '--'}</Tooltip>;
|
|
},
|
|
},
|
|
{
|
|
title: '源文件名',
|
|
ellipsis: true,
|
|
width: 300,
|
|
dataIndex: 'image_file_name',
|
|
render: (text) => {
|
|
return <Tooltip title={text || '--'}>{text || '--'}</Tooltip>;
|
|
},
|
|
},
|
|
];
|
|
|
|
const handleSearch = (value: string) => {
|
|
setSearchText(value);
|
|
setCurrentPage(1);
|
|
};
|
|
|
|
const handlePageChange = (page: number, size: number) => {
|
|
setCurrentPage(page);
|
|
setPageSize(size);
|
|
};
|
|
|
|
const handlePageSizeChange = (current: number, size: number) => {
|
|
setCurrentPage(1);
|
|
setPageSize(size);
|
|
};
|
|
|
|
return (
|
|
<div className={styles.content_wrap}>
|
|
<div className={styles.search_wrap}>
|
|
<Input.Search
|
|
placeholder="镜像名称..."
|
|
onSearch={handleSearch}
|
|
enterButton
|
|
allowClear
|
|
style={{ width: '300px', marginLeft: '10px' }}
|
|
/>
|
|
</div>
|
|
|
|
<Table
|
|
columns={columns}
|
|
dataSource={data}
|
|
rowKey="id"
|
|
loading={loading}
|
|
rowSelection={{
|
|
selectedRowKeys: selectedRowKeys,
|
|
preserveSelectedRowKeys: true,
|
|
onChange: onUserTableSelect,
|
|
}}
|
|
pagination={{
|
|
current: currentPage,
|
|
pageSize: pageSize,
|
|
total: total,
|
|
simple: true,
|
|
onChange: handlePageChange,
|
|
onShowSizeChange: handlePageSizeChange,
|
|
showSizeChanger: false,
|
|
showQuickJumper: false,
|
|
pageSizeOptions: ['10', '20', '50', '100'],
|
|
}}
|
|
scroll={{ x: 'max-content', y: 300 }}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TablePage;
|