feact: 任务管理/任务列表
JINGYJ
1 year ago
parent
52c3301571
commit
e3307046be
@ -0,0 +1,9 @@
|
|||||||
|
export const task_list: { [key: string]: string } = {
|
||||||
|
'task.task.table.list.id': 'ID',
|
||||||
|
'task.task.table.list.name': '项目名称',
|
||||||
|
'task.task.table.list.deviceGroup': '设备组',
|
||||||
|
'task.task.table.list.state': '当前状态',
|
||||||
|
'task.task.table.list.startTime': '开始时间',
|
||||||
|
'task.task.table.list.runTime': '运行时长',
|
||||||
|
'task.task.table.list.endTime': '结束时间',
|
||||||
|
};
|
||||||
@ -0,0 +1,224 @@
|
|||||||
|
import IsBatchDelete from '@/components/BatchOperation/isBatchDelete';
|
||||||
|
import TableActionCard from '@/components/TableActionCard';
|
||||||
|
import IsDelete from '@/components/TableActionCard/isDelete';
|
||||||
|
import {
|
||||||
|
deleteProjectDeleteProject,
|
||||||
|
deleteProjectDeleteProjectByIds,
|
||||||
|
postProjectGetProjectList,
|
||||||
|
} from '@/services/project/Project';
|
||||||
|
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||||
|
import { PageContainer, ProTable } from '@ant-design/pro-components';
|
||||||
|
import { FormattedMessage, useAccess, useIntl } from '@umijs/max';
|
||||||
|
import { Tag, message } from 'antd';
|
||||||
|
import React, { useRef, useState } from 'react';
|
||||||
|
import { proTableCommonOptions, proTablePaginationOptions } from '../../../../config/defaultTable';
|
||||||
|
const TaskList: React.FC = () => {
|
||||||
|
/**
|
||||||
|
* @en-US Pop-up window of new window
|
||||||
|
* @zh-CN 新建窗口的弹窗
|
||||||
|
* */
|
||||||
|
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
|
||||||
|
/**
|
||||||
|
* @en-US The pop-up window of the distribution update window
|
||||||
|
* @zh-CN 分布更新窗口的弹窗
|
||||||
|
* */
|
||||||
|
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
|
||||||
|
const [showDetail, setShowDetail] = useState<boolean>(false);
|
||||||
|
/**
|
||||||
|
* @en-US International configuration
|
||||||
|
* @zh-CN 国际化配置
|
||||||
|
* */
|
||||||
|
const intl = useIntl();
|
||||||
|
const actionRef = useRef<ActionType>();
|
||||||
|
// 动态设置每页数量
|
||||||
|
const [currentPageSize, setCurrentPageSize] = useState<number>(10);
|
||||||
|
const [currentRow, setCurrentRow] = useState<API.Project>();
|
||||||
|
const [selectedRowsState, setSelectedRows] = useState<API.Project[]>([]);
|
||||||
|
|
||||||
|
const handleUpdateModal = () => {
|
||||||
|
if (updateModalOpen) {
|
||||||
|
setUpdateModalOpen(false);
|
||||||
|
setCurrentRow(undefined);
|
||||||
|
} else {
|
||||||
|
setUpdateModalOpen(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const handleCreateModal = () => {
|
||||||
|
if (createModalOpen) {
|
||||||
|
setCreateModalOpen(false);
|
||||||
|
setCurrentRow(undefined);
|
||||||
|
} else {
|
||||||
|
setCreateModalOpen(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const handleColumnDrawer = () => {
|
||||||
|
if (showDetail) {
|
||||||
|
setShowDetail(false);
|
||||||
|
setCurrentRow(undefined);
|
||||||
|
} else {
|
||||||
|
setShowDetail(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const handleDestroy = async (selectedRow: API.Project) => {
|
||||||
|
deleteProjectDeleteProject({ id: selectedRow.id })
|
||||||
|
.then(() => {
|
||||||
|
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
|
||||||
|
actionRef.current?.reload();
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const columns: ProColumns<API.Project>[] = [
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="task.task.table.list.name" defaultMessage="$$$" />,
|
||||||
|
dataIndex: 'name',
|
||||||
|
hideInSearch: false,
|
||||||
|
key: 'fixedName',
|
||||||
|
fixed: 'left',
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="task.task.table.list.deviceGroup" defaultMessage="$$$" />,
|
||||||
|
dataIndex: 'info',
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="task.task.table.list.state" defaultMessage="$$$" />,
|
||||||
|
dataIndex: 'code',
|
||||||
|
// hideInSearch: true,
|
||||||
|
render: (dom) => {
|
||||||
|
return (
|
||||||
|
<Tag bordered={false} color={dom === 'XM00002'? "success": "error"}>
|
||||||
|
{dom}
|
||||||
|
</Tag>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="task.task.table.list.startTime" defaultMessage="$$$" />,
|
||||||
|
dataIndex: 'createTime',
|
||||||
|
hideInSearch: true,
|
||||||
|
valueType: 'dateTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="task.task.table.list.runTime" defaultMessage="$$$" />,
|
||||||
|
dataIndex: 'createTime',
|
||||||
|
hideInSearch: true,
|
||||||
|
valueType: 'dateTime',
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="task.task.table.list.endTime" defaultMessage="$$$" />,
|
||||||
|
dataIndex: 'createTime',
|
||||||
|
hideInSearch: true,
|
||||||
|
valueType: 'dateTime',
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
|
||||||
|
dataIndex: 'option',
|
||||||
|
valueType: 'option',
|
||||||
|
fixed: 'right',
|
||||||
|
render: (_, record) => [
|
||||||
|
<TableActionCard
|
||||||
|
key="TableActionCardRef"
|
||||||
|
renderActions={[
|
||||||
|
{
|
||||||
|
key: 'destroy',
|
||||||
|
renderDom: (
|
||||||
|
<IsDelete
|
||||||
|
deleteApi={() => {
|
||||||
|
handleDestroy(record).then(() => {});
|
||||||
|
}}
|
||||||
|
></IsDelete>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
></TableActionCard>,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<PageContainer>
|
||||||
|
<ProTable<API.Project>
|
||||||
|
headerTitle={intl.formatMessage({
|
||||||
|
id: 'pages.searchTable.title',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}
|
||||||
|
scroll={{ y: proTableCommonOptions.commscrollY, x: proTableCommonOptions.commscrollX }}
|
||||||
|
options={{ fullScreen: true, setting: true, density: true, reload: true }}
|
||||||
|
actionRef={actionRef}
|
||||||
|
rowKey="key"
|
||||||
|
search={{
|
||||||
|
labelWidth: proTableCommonOptions.searchLabelWidth,
|
||||||
|
}}
|
||||||
|
onDataSourceChange={() => {}}
|
||||||
|
pagination={{
|
||||||
|
...proTablePaginationOptions,
|
||||||
|
pageSize: currentPageSize,
|
||||||
|
onChange: (page, pageSize) => setCurrentPageSize(pageSize),
|
||||||
|
}}
|
||||||
|
columnsState={{
|
||||||
|
persistenceKey: 'project_list',
|
||||||
|
persistenceType: 'localStorage',
|
||||||
|
}}
|
||||||
|
tableAlertOptionRender={() => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{selectedRowsState?.length > 0 && (
|
||||||
|
<IsBatchDelete
|
||||||
|
deleteApi={() => {
|
||||||
|
// TODO 需要；联调删除接口
|
||||||
|
deleteProjectDeleteProjectByIds({
|
||||||
|
ids: selectedRowsState.map((v: API.Project) => {
|
||||||
|
return v.id as number;
|
||||||
|
}),
|
||||||
|
}).then(() => {
|
||||||
|
actionRef.current?.reloadAndRest?.();
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
request={async (params = {}, sort) => {
|
||||||
|
const { current, ...rest } = params;
|
||||||
|
const reqParams = {
|
||||||
|
page: current,
|
||||||
|
desc: false,
|
||||||
|
orderKey: '',
|
||||||
|
...rest,
|
||||||
|
};
|
||||||
|
if (sort && Object.keys(sort).length) {
|
||||||
|
reqParams.orderKey = Object.keys(sort)[0];
|
||||||
|
let sort_select = sort[reqParams.orderKey];
|
||||||
|
reqParams.desc = sort_select === 'descend';
|
||||||
|
}
|
||||||
|
let resp = await postProjectGetProjectList({ ...reqParams });
|
||||||
|
return {
|
||||||
|
data: resp.data.list.map((v: API.Project) => {
|
||||||
|
return { ...v, key: v.id };
|
||||||
|
}),
|
||||||
|
success: resp.success,
|
||||||
|
total: resp.data.total,
|
||||||
|
current: resp.data.page,
|
||||||
|
pageSize: resp.data.pageSize,
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
columns={columns}
|
||||||
|
// rowSelection={{
|
||||||
|
// onChange: (_, selectedRows) => {
|
||||||
|
// setSelectedRows(selectedRows);
|
||||||
|
// },
|
||||||
|
// }}
|
||||||
|
/>
|
||||||
|
</PageContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TaskList;
|
||||||
Loading…
Reference in New Issue