feat: login
This commit is contained in:
@@ -1,330 +1,330 @@
|
||||
import type {
|
||||
ActionType,
|
||||
ProColumns,
|
||||
ProDescriptionsItemProps,
|
||||
} from '@ant-design/pro-components';
|
||||
import {
|
||||
FooterToolbar,
|
||||
PageContainer,
|
||||
ProDescriptions,
|
||||
ProTable,
|
||||
} from '@ant-design/pro-components';
|
||||
import { FormattedMessage, useIntl, useRequest } from '@umijs/max';
|
||||
import { Button, Drawer, Input, message } from 'antd';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import { removeRule, rule } from '@/services/ant-design-pro/api';
|
||||
import CreateForm from './components/CreateForm';
|
||||
import UpdateForm from './components/UpdateForm';
|
||||
// import type {
|
||||
// ActionType,
|
||||
// ProColumns,
|
||||
// ProDescriptionsItemProps,
|
||||
// } from '@ant-design/pro-components';
|
||||
// import {
|
||||
// FooterToolbar,
|
||||
// PageContainer,
|
||||
// ProDescriptions,
|
||||
// ProTable,
|
||||
// } from '@ant-design/pro-components';
|
||||
// import { FormattedMessage, useIntl, useRequest } from '@umijs/max';
|
||||
// import { Button, Drawer, Input, message } from 'antd';
|
||||
// import React, { useCallback, useRef, useState } from 'react';
|
||||
// import { removeRule, rule } from '@/services/ant-design-pro/api';
|
||||
// import CreateForm from './components/CreateForm';
|
||||
// import UpdateForm from './components/UpdateForm';
|
||||
|
||||
const TableList: React.FC = () => {
|
||||
const actionRef = useRef<ActionType | null>(null);
|
||||
// const TableList: React.FC = () => {
|
||||
// const actionRef = useRef<ActionType | null>(null);
|
||||
|
||||
const [showDetail, setShowDetail] = useState<boolean>(false);
|
||||
const [currentRow, setCurrentRow] = useState<API.RuleListItem>();
|
||||
const [selectedRowsState, setSelectedRows] = useState<API.RuleListItem[]>([]);
|
||||
// const [showDetail, setShowDetail] = useState<boolean>(false);
|
||||
// const [currentRow, setCurrentRow] = useState<API.RuleListItem>();
|
||||
// const [selectedRowsState, setSelectedRows] = useState<API.RuleListItem[]>([]);
|
||||
|
||||
/**
|
||||
* @en-US International configuration
|
||||
* @zh-CN 国际化配置
|
||||
* */
|
||||
const intl = useIntl();
|
||||
// /**
|
||||
// * @en-US International configuration
|
||||
// * @zh-CN 国际化配置
|
||||
// * */
|
||||
// const intl = useIntl();
|
||||
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
// const [messageApi, contextHolder] = message.useMessage();
|
||||
|
||||
const { run: delRun, loading } = useRequest(removeRule, {
|
||||
manual: true,
|
||||
onSuccess: () => {
|
||||
setSelectedRows([]);
|
||||
actionRef.current?.reloadAndRest?.();
|
||||
// const { run: delRun, loading } = useRequest(removeRule, {
|
||||
// manual: true,
|
||||
// onSuccess: () => {
|
||||
// setSelectedRows([]);
|
||||
// actionRef.current?.reloadAndRest?.();
|
||||
|
||||
messageApi.success('Deleted successfully and will refresh soon');
|
||||
},
|
||||
onError: () => {
|
||||
messageApi.error('Delete failed, please try again');
|
||||
},
|
||||
});
|
||||
// messageApi.success('Deleted successfully and will refresh soon');
|
||||
// },
|
||||
// onError: () => {
|
||||
// messageApi.error('Delete failed, please try again');
|
||||
// },
|
||||
// });
|
||||
|
||||
const columns: ProColumns<API.RuleListItem>[] = [
|
||||
{
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.updateForm.ruleName.nameLabel"
|
||||
defaultMessage="Rule name"
|
||||
/>
|
||||
),
|
||||
dataIndex: 'name',
|
||||
render: (dom, entity) => {
|
||||
return (
|
||||
<a
|
||||
onClick={() => {
|
||||
setCurrentRow(entity);
|
||||
setShowDetail(true);
|
||||
}}
|
||||
>
|
||||
{dom}
|
||||
</a>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.titleDesc"
|
||||
defaultMessage="Description"
|
||||
/>
|
||||
),
|
||||
dataIndex: 'desc',
|
||||
valueType: 'textarea',
|
||||
},
|
||||
{
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.titleCallNo"
|
||||
defaultMessage="Number of service calls"
|
||||
/>
|
||||
),
|
||||
dataIndex: 'callNo',
|
||||
sorter: true,
|
||||
hideInForm: true,
|
||||
renderText: (val: string) =>
|
||||
`${val}${intl.formatMessage({
|
||||
id: 'pages.searchTable.tenThousand',
|
||||
defaultMessage: ' 万 ',
|
||||
})}`,
|
||||
},
|
||||
{
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.titleStatus"
|
||||
defaultMessage="Status"
|
||||
/>
|
||||
),
|
||||
dataIndex: 'status',
|
||||
hideInForm: true,
|
||||
valueEnum: {
|
||||
0: {
|
||||
text: (
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.nameStatus.default"
|
||||
defaultMessage="Shut down"
|
||||
/>
|
||||
),
|
||||
status: 'Default',
|
||||
},
|
||||
1: {
|
||||
text: (
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.nameStatus.running"
|
||||
defaultMessage="Running"
|
||||
/>
|
||||
),
|
||||
status: 'Processing',
|
||||
},
|
||||
2: {
|
||||
text: (
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.nameStatus.online"
|
||||
defaultMessage="Online"
|
||||
/>
|
||||
),
|
||||
status: 'Success',
|
||||
},
|
||||
3: {
|
||||
text: (
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.nameStatus.abnormal"
|
||||
defaultMessage="Abnormal"
|
||||
/>
|
||||
),
|
||||
status: 'Error',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.titleUpdatedAt"
|
||||
defaultMessage="Last scheduled time"
|
||||
/>
|
||||
),
|
||||
sorter: true,
|
||||
dataIndex: 'updatedAt',
|
||||
valueType: 'dateTime',
|
||||
renderFormItem: (item, { defaultRender, ...rest }, form) => {
|
||||
const status = form.getFieldValue('status');
|
||||
if (`${status}` === '0') {
|
||||
return false;
|
||||
}
|
||||
if (`${status}` === '3') {
|
||||
return (
|
||||
<Input
|
||||
{...rest}
|
||||
placeholder={intl.formatMessage({
|
||||
id: 'pages.searchTable.exception',
|
||||
defaultMessage: 'Please enter the reason for the exception!',
|
||||
})}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return defaultRender(item);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.titleOption"
|
||||
defaultMessage="Operating"
|
||||
/>
|
||||
),
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
render: (_, record) => [
|
||||
<UpdateForm
|
||||
trigger={
|
||||
<a>
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.config"
|
||||
defaultMessage="Configuration"
|
||||
/>
|
||||
</a>
|
||||
}
|
||||
key="config"
|
||||
onOk={actionRef.current?.reload}
|
||||
values={record}
|
||||
/>,
|
||||
<a key="subscribeAlert" href="https://procomponents.ant.design/">
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.subscribeAlert"
|
||||
defaultMessage="Subscribe to alerts"
|
||||
/>
|
||||
</a>,
|
||||
],
|
||||
},
|
||||
];
|
||||
// const columns: ProColumns<API.RuleListItem>[] = [
|
||||
// {
|
||||
// title: (
|
||||
// <FormattedMessage
|
||||
// id="pages.searchTable.updateForm.ruleName.nameLabel"
|
||||
// defaultMessage="Rule name"
|
||||
// />
|
||||
// ),
|
||||
// dataIndex: 'name',
|
||||
// render: (dom, entity) => {
|
||||
// return (
|
||||
// <a
|
||||
// onClick={() => {
|
||||
// setCurrentRow(entity);
|
||||
// setShowDetail(true);
|
||||
// }}
|
||||
// >
|
||||
// {dom}
|
||||
// </a>
|
||||
// );
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// title: (
|
||||
// <FormattedMessage
|
||||
// id="pages.searchTable.titleDesc"
|
||||
// defaultMessage="Description"
|
||||
// />
|
||||
// ),
|
||||
// dataIndex: 'desc',
|
||||
// valueType: 'textarea',
|
||||
// },
|
||||
// {
|
||||
// title: (
|
||||
// <FormattedMessage
|
||||
// id="pages.searchTable.titleCallNo"
|
||||
// defaultMessage="Number of service calls"
|
||||
// />
|
||||
// ),
|
||||
// dataIndex: 'callNo',
|
||||
// sorter: true,
|
||||
// hideInForm: true,
|
||||
// renderText: (val: string) =>
|
||||
// `${val}${intl.formatMessage({
|
||||
// id: 'pages.searchTable.tenThousand',
|
||||
// defaultMessage: ' 万 ',
|
||||
// })}`,
|
||||
// },
|
||||
// {
|
||||
// title: (
|
||||
// <FormattedMessage
|
||||
// id="pages.searchTable.titleStatus"
|
||||
// defaultMessage="Status"
|
||||
// />
|
||||
// ),
|
||||
// dataIndex: 'status',
|
||||
// hideInForm: true,
|
||||
// valueEnum: {
|
||||
// 0: {
|
||||
// text: (
|
||||
// <FormattedMessage
|
||||
// id="pages.searchTable.nameStatus.default"
|
||||
// defaultMessage="Shut down"
|
||||
// />
|
||||
// ),
|
||||
// status: 'Default',
|
||||
// },
|
||||
// 1: {
|
||||
// text: (
|
||||
// <FormattedMessage
|
||||
// id="pages.searchTable.nameStatus.running"
|
||||
// defaultMessage="Running"
|
||||
// />
|
||||
// ),
|
||||
// status: 'Processing',
|
||||
// },
|
||||
// 2: {
|
||||
// text: (
|
||||
// <FormattedMessage
|
||||
// id="pages.searchTable.nameStatus.online"
|
||||
// defaultMessage="Online"
|
||||
// />
|
||||
// ),
|
||||
// status: 'Success',
|
||||
// },
|
||||
// 3: {
|
||||
// text: (
|
||||
// <FormattedMessage
|
||||
// id="pages.searchTable.nameStatus.abnormal"
|
||||
// defaultMessage="Abnormal"
|
||||
// />
|
||||
// ),
|
||||
// status: 'Error',
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// title: (
|
||||
// <FormattedMessage
|
||||
// id="pages.searchTable.titleUpdatedAt"
|
||||
// defaultMessage="Last scheduled time"
|
||||
// />
|
||||
// ),
|
||||
// sorter: true,
|
||||
// dataIndex: 'updatedAt',
|
||||
// valueType: 'dateTime',
|
||||
// renderFormItem: (item, { defaultRender, ...rest }, form) => {
|
||||
// const status = form.getFieldValue('status');
|
||||
// if (`${status}` === '0') {
|
||||
// return false;
|
||||
// }
|
||||
// if (`${status}` === '3') {
|
||||
// return (
|
||||
// <Input
|
||||
// {...rest}
|
||||
// placeholder={intl.formatMessage({
|
||||
// id: 'pages.searchTable.exception',
|
||||
// defaultMessage: 'Please enter the reason for the exception!',
|
||||
// })}
|
||||
// />
|
||||
// );
|
||||
// }
|
||||
// return defaultRender(item);
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// title: (
|
||||
// <FormattedMessage
|
||||
// id="pages.searchTable.titleOption"
|
||||
// defaultMessage="Operating"
|
||||
// />
|
||||
// ),
|
||||
// dataIndex: 'option',
|
||||
// valueType: 'option',
|
||||
// render: (_, record) => [
|
||||
// <UpdateForm
|
||||
// trigger={
|
||||
// <a>
|
||||
// <FormattedMessage
|
||||
// id="pages.searchTable.config"
|
||||
// defaultMessage="Configuration"
|
||||
// />
|
||||
// </a>
|
||||
// }
|
||||
// key="config"
|
||||
// onOk={actionRef.current?.reload}
|
||||
// values={record}
|
||||
// />,
|
||||
// <a key="subscribeAlert" href="https://procomponents.ant.design/">
|
||||
// <FormattedMessage
|
||||
// id="pages.searchTable.subscribeAlert"
|
||||
// defaultMessage="Subscribe to alerts"
|
||||
// />
|
||||
// </a>,
|
||||
// ],
|
||||
// },
|
||||
// ];
|
||||
|
||||
/**
|
||||
* Delete node
|
||||
* @zh-CN 删除节点
|
||||
*
|
||||
* @param selectedRows
|
||||
*/
|
||||
const handleRemove = useCallback(
|
||||
async (selectedRows: API.RuleListItem[]) => {
|
||||
if (!selectedRows?.length) {
|
||||
messageApi.warning('请选择删除项');
|
||||
// /**
|
||||
// * Delete node
|
||||
// * @zh-CN 删除节点
|
||||
// *
|
||||
// * @param selectedRows
|
||||
// */
|
||||
// const handleRemove = useCallback(
|
||||
// async (selectedRows: API.RuleListItem[]) => {
|
||||
// if (!selectedRows?.length) {
|
||||
// messageApi.warning('请选择删除项');
|
||||
|
||||
return;
|
||||
}
|
||||
// return;
|
||||
// }
|
||||
|
||||
await delRun({
|
||||
data: {
|
||||
key: selectedRows.map((row) => row.key),
|
||||
},
|
||||
});
|
||||
},
|
||||
[delRun, messageApi.warning],
|
||||
);
|
||||
// await delRun({
|
||||
// data: {
|
||||
// key: selectedRows.map((row) => row.key),
|
||||
// },
|
||||
// });
|
||||
// },
|
||||
// [delRun, messageApi.warning],
|
||||
// );
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
{contextHolder}
|
||||
<ProTable<API.RuleListItem, API.PageParams>
|
||||
headerTitle={intl.formatMessage({
|
||||
id: 'pages.searchTable.title',
|
||||
defaultMessage: 'Enquiry form',
|
||||
})}
|
||||
actionRef={actionRef}
|
||||
rowKey="key"
|
||||
search={{
|
||||
labelWidth: 120,
|
||||
}}
|
||||
toolBarRender={() => [
|
||||
<CreateForm key="create" reload={actionRef.current?.reload} />,
|
||||
]}
|
||||
request={rule}
|
||||
columns={columns}
|
||||
rowSelection={{
|
||||
onChange: (_, selectedRows) => {
|
||||
setSelectedRows(selectedRows);
|
||||
},
|
||||
}}
|
||||
/>
|
||||
{selectedRowsState?.length > 0 && (
|
||||
<FooterToolbar
|
||||
extra={
|
||||
<div>
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.chosen"
|
||||
defaultMessage="Chosen"
|
||||
/>{' '}
|
||||
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.item"
|
||||
defaultMessage="项"
|
||||
/>
|
||||
|
||||
<span>
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.totalServiceCalls"
|
||||
defaultMessage="Total number of service calls"
|
||||
/>{' '}
|
||||
{selectedRowsState.reduce(
|
||||
(pre, item) => pre + (item.callNo ?? 0),
|
||||
0,
|
||||
)}{' '}
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.tenThousand"
|
||||
defaultMessage="万"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
loading={loading}
|
||||
onClick={() => {
|
||||
handleRemove(selectedRowsState);
|
||||
}}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.batchDeletion"
|
||||
defaultMessage="Batch deletion"
|
||||
/>
|
||||
</Button>
|
||||
<Button type="primary">
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.batchApproval"
|
||||
defaultMessage="Batch approval"
|
||||
/>
|
||||
</Button>
|
||||
</FooterToolbar>
|
||||
)}
|
||||
// return (
|
||||
// <PageContainer>
|
||||
// {contextHolder}
|
||||
// <ProTable<API.RuleListItem, API.PageParams>
|
||||
// headerTitle={intl.formatMessage({
|
||||
// id: 'pages.searchTable.title',
|
||||
// defaultMessage: 'Enquiry form',
|
||||
// })}
|
||||
// actionRef={actionRef}
|
||||
// rowKey="key"
|
||||
// search={{
|
||||
// labelWidth: 120,
|
||||
// }}
|
||||
// toolBarRender={() => [
|
||||
// <CreateForm key="create" reload={actionRef.current?.reload} />,
|
||||
// ]}
|
||||
// request={rule}
|
||||
// columns={columns}
|
||||
// rowSelection={{
|
||||
// onChange: (_, selectedRows) => {
|
||||
// setSelectedRows(selectedRows);
|
||||
// },
|
||||
// }}
|
||||
// />
|
||||
// {selectedRowsState?.length > 0 && (
|
||||
// <FooterToolbar
|
||||
// extra={
|
||||
// <div>
|
||||
// <FormattedMessage
|
||||
// id="pages.searchTable.chosen"
|
||||
// defaultMessage="Chosen"
|
||||
// />{' '}
|
||||
// <a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||
// <FormattedMessage
|
||||
// id="pages.searchTable.item"
|
||||
// defaultMessage="项"
|
||||
// />
|
||||
//
|
||||
// <span>
|
||||
// <FormattedMessage
|
||||
// id="pages.searchTable.totalServiceCalls"
|
||||
// defaultMessage="Total number of service calls"
|
||||
// />{' '}
|
||||
// {selectedRowsState.reduce(
|
||||
// (pre, item) => pre + (item.callNo ?? 0),
|
||||
// 0,
|
||||
// )}{' '}
|
||||
// <FormattedMessage
|
||||
// id="pages.searchTable.tenThousand"
|
||||
// defaultMessage="万"
|
||||
// />
|
||||
// </span>
|
||||
// </div>
|
||||
// }
|
||||
// >
|
||||
// <Button
|
||||
// loading={loading}
|
||||
// onClick={() => {
|
||||
// handleRemove(selectedRowsState);
|
||||
// }}
|
||||
// >
|
||||
// <FormattedMessage
|
||||
// id="pages.searchTable.batchDeletion"
|
||||
// defaultMessage="Batch deletion"
|
||||
// />
|
||||
// </Button>
|
||||
// <Button type="primary">
|
||||
// <FormattedMessage
|
||||
// id="pages.searchTable.batchApproval"
|
||||
// defaultMessage="Batch approval"
|
||||
// />
|
||||
// </Button>
|
||||
// </FooterToolbar>
|
||||
// )}
|
||||
|
||||
<Drawer
|
||||
width={600}
|
||||
open={showDetail}
|
||||
onClose={() => {
|
||||
setCurrentRow(undefined);
|
||||
setShowDetail(false);
|
||||
}}
|
||||
closable={false}
|
||||
>
|
||||
{currentRow?.name && (
|
||||
<ProDescriptions<API.RuleListItem>
|
||||
column={2}
|
||||
title={currentRow?.name}
|
||||
request={async () => ({
|
||||
data: currentRow || {},
|
||||
})}
|
||||
params={{
|
||||
id: currentRow?.name,
|
||||
}}
|
||||
columns={columns as ProDescriptionsItemProps<API.RuleListItem>[]}
|
||||
/>
|
||||
)}
|
||||
</Drawer>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
// <Drawer
|
||||
// width={600}
|
||||
// open={showDetail}
|
||||
// onClose={() => {
|
||||
// setCurrentRow(undefined);
|
||||
// setShowDetail(false);
|
||||
// }}
|
||||
// closable={false}
|
||||
// >
|
||||
// {currentRow?.name && (
|
||||
// <ProDescriptions<API.RuleListItem>
|
||||
// column={2}
|
||||
// title={currentRow?.name}
|
||||
// request={async () => ({
|
||||
// data: currentRow || {},
|
||||
// })}
|
||||
// params={{
|
||||
// id: currentRow?.name,
|
||||
// }}
|
||||
// columns={columns as ProDescriptionsItemProps<API.RuleListItem>[]}
|
||||
// />
|
||||
// )}
|
||||
// </Drawer>
|
||||
// </PageContainer>
|
||||
// );
|
||||
// };
|
||||
|
||||
export default TableList;
|
||||
// export default TableList;
|
||||
|
||||
Reference in New Issue
Block a user