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 { RELATION_DATABASE_TOOL_CONFIG } from '../constants/adapter';

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.deleteDataSource(id)).then(() => {
            queryData();
        });
    };

    const columns = [
        {
            title: '数据源名称',
            dataIndex: 'taskName',
        },
        {
            title: '数据源名称',
            dataIndex: 'name',
        },
        {
            title: '挂载点',
            dataIndex: 'mountPath',
        },
        {
            title: '适配器类型',
            dataIndex: 'adapter',
            render: (text, record) => {
                const adapterInfo = adapters?.find(s => s.id == record?.adapter)
                return adapterInfo?.adapterName
            }
        },
        {
            title: '采集方式',
            dataIndex: 'control',
            render: (text, record) => {
                const adapterInfo = adapters?.find(s => s.id == record?.adapter)
                return adapterInfo?.mode
            }
        },
        {
            title: '工具版本',
            dataIndex: 'length',
            render: (text, record) => {
                const adapterInfo = adapters?.find(s => s.id == record?.adapter)
                return adapterInfo?.adapterVersion
            }
        },
        {
            title: '修改时间',
            dataIndex: 'time',
            render: (text, record) => moment(record?.time).format('YYYY-MM-DD HH:mm:ss')
        },
        {
            title: '描述',
            dataIndex: 'description',
            ellipsis: true,
            search: false,
        },
        {
            title: '操作',
            width: 160,
            key: 'option',
            valueType: 'option',
            render: (text, record) => {
                const options = [];
                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;

            },
        },
    ];

    const onFinish = (values) => {
        const { stepOneValues, stepTwoValues } = values;
        const adapterInfo = adapters?.find(x => x.adapterName == stepOneValues?.adapterName)
        if (adapterInfo) {
            const dataToSave = {
                name: stepOneValues?.name,
                audited: true,
                adapter: adapterInfo?.id,
                mountPath: 1,
                description: stepOneValues?.description,
                config: stepTwoValues,
                time: moment()
            }
            if (editData) {
                dispatch(actions.metadataAcquisition.modifyTask(editData?.id, dataToSave)).then(res => {
                    if (res.success) {
                        setVisible(false);
                        setEditData(null);
                        queryData();
                    }
                })
            } else {
                dispatch(actions.metadataAcquisition.addTask(dataToSave)).then(res => {
                    if (res.success) {
                        setVisible(false);
                        setEditData(null);
                        queryData();
                    }
                })
            }
        }
    }

    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,
                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}
                {...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);