GovernmentDataResourceCenter/web/client/src/sections/metadataAcquisition/containers/acquisitionTask.js

import React, { useEffect, useState } from 'react'
import { Spin, Popconfirm, Tree, Row, Col, Button, Input, Table } from 'antd';
import { connect } from 'react-redux';
import ProTable from '@ant-design/pro-table';
import moment from 'moment';
import TaskModal from '../components/taskModal';
import { parseHumanReadable } from 'cron-js-parser';

import './style.less';
function AcquisitionTask(props) {
    const { loading, clientHeight, actions, dispatch, dataSources, adapters, tasks } = props;
    const [pageSize, setPageSize] = useState(10);
    const [currentPage, setCurrentPage] = useState(1);
    const [searchValue, setSearchValue] = useState('')
    const [visible, setVisible] = useState(false);//是否展示新增编辑模态框
    const [editData, setEditData] = useState(null);//模态框编辑数据
    const queryData = (search) => {
        const query = {
            // limit: search ? 10 : pageSize || 10,
            // page: search ? 1 : currentPage || 1,
            taskName: searchValue
        }
        dispatch(actions.metadataAcquisition.getTasks(query));
    }

    useEffect(() => {
        dispatch(actions.metadataAcquisition.getDataSources());
        dispatch(actions.metadataAcquisition.getAdapters())
        queryData();
    }, [pageSize, currentPage]);

    const handleDelete = (id) => {
        dispatch(actions.metadataAcquisition.deleteTask(id)).then(() => {
            queryData();
        });
    };

    //cron表达式转中文
    const transCron = (value) => {
        try {
            let lang = 'zh_CN' //english
            let obj = {
                atSeconds: [1, 5, 10],
                runEveryXMins: {
                    startAt: 10,
                    every: 10
                },
                runEveryHourInRange: {
                    from: 2,
                    to: 20
                },
                isEveryDay: true,
                atYears: [2020, 2022]
            };
            return (parseHumanReadable(value, obj, lang))
        } catch (err) {
            return '-'
        }
    }

    const onFinish = (values) => {
        const dataToSave = {
            taskName: values?.taskName,
            retryCount: values?.retryCount,
            retryTime: values?.retryTime,
            retried: values?.retried ? true : false,
            dataSourceId: values?.dataSourceId,
            cron: values?.cron,
        }

        if (editData) {
            dispatch(actions.metadataAcquisition.modifyTask(editData?.id, dataToSave)).then(res => {
                if (res.success) {
                    setVisible(false);
                    setEditData(null);
                    queryData();
                }
            })
        } else {
            dataToSave.enabled = true;
            dataToSave.autoReleased = true;
            dataToSave.storageStrategy = "增量";
            dispatch(actions.metadataAcquisition.addTask(dataToSave)).then(res => {
                if (res.success) {
                    setVisible(false);
                    setEditData(null);
                    queryData();
                }
            })
        }

    }

    const columns = [
        {
            title: '任务名称',
            dataIndex: 'taskName',
        },
        {
            title: '数据源名称',
            dataIndex: 'dataSourceName',
            render: (text, record) => {
                return record?.dataSource?.name
            }
        },
        {
            title: '适配器类型',
            dataIndex: 'adapter',
            render: (text, record) => {
                const adapterInfo = record?.dataSource?.adapter
                return adapterInfo?.adapterName
            }
        },
        {
            title: '采集方式',
            dataIndex: 'control',
            render: (text, record) => {
                const adapterInfo = record?.dataSource?.adapter
                return adapterInfo?.mode
            }
        },
        {
            title: '执行周期',
            dataIndex: 'cron',
            // render: (text, record) => {
            //     return transCron(record?.cron);
            // }
        },
        {
            title: '重复次数',
            dataIndex: 'retryCount',
        },
        {
            title: '时间间隔(分钟)',
            dataIndex: 'retryTime',
        },

        {
            title: '操作',
            width: 300,
            key: 'option',
            valueType: 'option',
            render: (text, record) => {
                const options = [];
                options.push(<a onClick={() => {

                }} style={{ marginRight: 8 }}>立即执行</a>)

                const enabledText = record?.enabled ? '禁用' : '启用';
                options.push(<a onClick={() => {
                    dispatch(actions.metadataAcquisition.modifyTask(record?.id, { enabled: !record?.enabled }, '采集任务' + enabledText)).then(res => {
                        if (res.success) {
                            queryData();
                        }
                    })
                }} style={{ marginRight: 8 }}>{enabledText}</a>)

                options.push(<a onClick={() => {
                    const adapterInfo = adapters?.find(x => x.id == record?.adapter)
                    setVisible(true)
                    record.adapterInfo = adapterInfo
                    setEditData(record)
                }} style={{ marginRight: 8 }}>编辑</a>)
                options.push(
                    <Popconfirm
                        key="del"
                        placement="top"
                        title="是否确认删除该采集任务？"
                        onConfirm={() => handleDelete(record.id)}
                        okText="是"
                        cancelText="否"
                    >
                        <a>删除</a>
                    </Popconfirm>)

                return options;

            },
        },
    ];

    return <Spin spinning={loading}>
        <Row className='protable-title'>
            <Col span={12}><Button type='primary' onClick={() => { setVisible(true) }}>新建</Button></Col>
            <Col span={12} style={{ textAlign: 'right' }}><Input
                value={searchValue} onChange={e => { setSearchValue(e.target.value) }}
                style={{ width: 220, marginRight: 15 }} placeholder="数据源或任务名称" /><Button onClick={() => { queryData() }} type='primary'>查询</Button></Col>
        </Row>
        <ProTable
            columns={columns}
            dateFormatter="string"
            search={false}
            scroll={
                {
                    scrollToFirstRowOnChange: true,
                    y: clientHeight - 260
                }
            }
            pagination={{
                size: 'large',
                total: tasks?.count,
                showSizeChanger: true,
                // showQuickJumper: true,
                // current: currentPage,
                // pageSize: pageSize || 10,
                defaultPageSize: 10,
                pageSizeOptions: [10, 20, 50],
                // showTotal: (total) => {
                //     return <span style={{ fontSize: 15 }}>{`共${Math.ceil(total / pageSize)}页，${total}项`}</span>
                // },
                // onShowSizeChange: (currentPage, pageSize) => {
                //     setCurrentPage(currentPage);
                //     setPageSize(pageSize);

                // },
                // onChange: (page, pageSize) => {
                //     setCurrentPage(page);
                //     setPageSize(pageSize);

                // }
            }}
            dataSource={tasks?.rows || []}
            options={false}
        />

        {
            visible && <TaskModal
                onCancel={
                    () => {
                        setVisible(false)
                        setEditData(null)
                    }
                }
                editData={editData}
                visible={visible}
                onFinish={onFinish}
                dataSourceFilter={dataSources?.rows?.map(s => {
                    s.disabled = !!tasks?.rows?.find(x => x.dataSourceId == s.id);
                    return s;
                })}
                {...props}
            />
        }
    </Spin>

}

function mapStateToProps(state) {
    const {
        auth, global, datasources, adapters, tasks
    } = state;
    return {
        loading: datasources.isRequesting || adapters?.isRequesting,
        clientHeight: global.clientHeight,
        actions: global.actions,
        dataSources: datasources?.data || {},
        adapters: adapters?.data || [],
        tasks: tasks?.data || [],
    };
}

export default connect(mapStateToProps)(AcquisitionTask);