Commit 380c8fe0 authored by littleforest's avatar littleforest

feat: finished table status pages

parent 81cc6cce
import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons'; import { PlusOutlined } from '@ant-design/icons';
import { ActionType, PageContainer, ProColumns } from '@ant-design/pro-components'; import type { ActionType } from '@ant-design/pro-components';
import { ProTable, TableDropdown } from '@ant-design/pro-components'; import { PageContainer } from '@ant-design/pro-components';
import { Button, Dropdown, Space, Tag } from 'antd'; import { ProTable } from '@ant-design/pro-components';
import { Button } from 'antd';
import { useRef } from 'react'; import { useRef } from 'react';
import request from 'umi-request'; import request from 'umi-request';
export const waitTimePromise = async (time: number = 100) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(true);
}, time);
});
};
export const waitTime = async (time: number = 100) => {
await waitTimePromise(time);
};
type GithubIssueItem = {
url: string;
id: number;
number: number;
title: string;
labels: {
name: string;
color: string;
}[];
state: string;
comments: number;
created_at: string;
updated_at: string;
closed_at?: string;
};
const columns: ProColumns<GithubIssueItem>[] = [ const columns: any[] = [
{ {
dataIndex: 'index', title: '用户',
valueType: 'indexBorder', dataIndex: 'name',
width: 48, ellipsis: true,
}, },
{ {
title: '标题', title: '用户账号',
dataIndex: 'title', dataIndex: 'username',
copyable: true,
ellipsis: true, ellipsis: true,
tip: '标题过长会自动收缩',
formItemProps: {
rules: [
{
required: true,
message: '此项为必填项',
},
],
},
}, },
{ {
disable: true, title: '角色',
title: '状态', dataIndex: 'role',
dataIndex: 'state', hideInSearch: true,
filters: true,
onFilter: true,
ellipsis: true, ellipsis: true,
valueType: 'select',
valueEnum: {
all: { text: '超长'.repeat(50) },
open: {
text: '未解决',
status: 'Error',
},
closed: {
text: '已解决',
status: 'Success',
disabled: true,
},
processing: {
text: '解决中',
status: 'Processing',
},
},
}, },
{ {
disable: true, title: '账号状态',
title: '标签', dataIndex: 'iaActive',
dataIndex: 'labels', hideInSearch: true,
search: false,
renderFormItem: (_, { defaultRender }) => {
return defaultRender(_);
},
render: (_, record) => (
<Space>
{record.labels.map(({ name, color }) => (
<Tag color={color} key={name}>
{name}
</Tag>
))}
</Space>
),
}, },
{ {
title: '创建时间', title: '创建时间',
key: 'showTime', dataIndex: 'creationTime',
dataIndex: 'created_at',
valueType: 'date',
sorter: true,
hideInSearch: true, hideInSearch: true,
valueType: 'date',
}, },
{ {
title: '创建时间', title: '备注',
dataIndex: 'created_at', hideInSearch: true,
valueType: 'dateRange', dataIndex: 'creationTime',
hideInTable: true, valueType: 'date',
search: {
transform: (value) => {
return {
startTime: value[0],
endTime: value[1],
};
},
},
}, },
{ {
title: '操作', title: '操作',
...@@ -132,16 +54,11 @@ const columns: ProColumns<GithubIssueItem>[] = [ ...@@ -132,16 +54,11 @@ const columns: ProColumns<GithubIssueItem>[] = [
编辑 编辑
</a>, </a>,
<a href={record.url} target="_blank" rel="noopener noreferrer" key="view"> <a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
查看 重置
</a>,
<a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
删除
</a>, </a>,
<TableDropdown
key="actionGroup"
onSelect={() => action?.reload()}
menus={[
{ key: 'copy', name: '复制' },
{ key: 'delete', name: '删除' },
]}
/>,
], ],
}, },
]; ];
...@@ -150,54 +67,31 @@ const UserManage = () => { ...@@ -150,54 +67,31 @@ const UserManage = () => {
const actionRef = useRef<ActionType>(); const actionRef = useRef<ActionType>();
return ( return (
<PageContainer> <PageContainer>
<ProTable<GithubIssueItem> <ProTable
columns={columns} columns={columns}
actionRef={actionRef} actionRef={actionRef}
cardBordered cardBordered
request={async (params = {}, sort, filter) => { request={async (params = {}, sort, filter) => {
const defaultParams = {
name: '',
Enabled: false,
PageSize: 9,
PageIndex: 1,
};
return request<{ return request<{
data: GithubIssueItem[]; data: any[];
}>('https://proapi.azurewebsites.net/github/issues', { }>('https://glm-mangement-api.baibaomen.com/User/page', {
params, ...defaultParams,
}); });
}} }}
editable={{
type: 'multiple',
}}
columnsState={{
persistenceKey: 'pro-table-singe-demos',
persistenceType: 'localStorage',
onChange(value) {
console.log('value: ', value);
},
}}
rowKey="id" rowKey="id"
search={{
labelWidth: 'auto',
}}
options={{
setting: {
listsHeight: 400,
},
}}
form={{
// 由于配置了 transform,提交的参与与定义的不同这里需要转化一下
syncToUrl: (values, type) => {
if (type === 'get') {
return {
...values,
created_at: [values.startTime, values.endTime],
};
}
return values;
},
}}
pagination={{ pagination={{
pageSize: 5, pageSize: 5,
onChange: (page) => console.log(page), onChange: (page) => {},
}} }}
options={false}
dateFormatter="string" dateFormatter="string"
headerTitle="高级表格" headerTitle="账号列表"
toolBarRender={() => [ toolBarRender={() => [
<Button <Button
key="button" key="button"
...@@ -207,31 +101,8 @@ const UserManage = () => { ...@@ -207,31 +101,8 @@ const UserManage = () => {
}} }}
type="primary" type="primary"
> >
新建 添加账号
</Button>, </Button>,
<Dropdown
key="menu"
menu={{
items: [
{
label: '1st item',
key: '1',
},
{
label: '2nd item',
key: '1',
},
{
label: '3rd item',
key: '1',
},
],
}}
>
<Button>
<EllipsisOutlined />
</Button>
</Dropdown>,
]} ]}
/> />
</PageContainer> </PageContainer>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment