GovernmentDataResourceCenter/web/client/src/sections/metadataManagement/containers/databasesTable.js

import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Spin, Table, Popconfirm, Button, Input } from 'antd';
import { ButtonGroup } from '$components';
import moment from 'moment';
import FileSaver from 'file-saver';
import MetadataDatabaseModal from '../components/metadataDatabModal';
import { ModelTypes } from '../constants/index';

const DatabaseTable = (props) => {
    const { user, dispatch, actions, clientHeight, resourceCatalogId, resourceCatalogKey,
        resourceCatalogPath, isRequesting, metadataModels, setView } = props;
    const { metadataManagement } = actions;
    const SortValues = { 'ascend': 'asc', 'descend': 'desc' };
    const [tableData, setTableData] = useState([]);
    const [tableDataCount, setTableDataCount] = useState(0);//Table数据
    const [createAtSort, setCreateAtSort] = useState('descend');
    const [keywords, setKeywords] = useState('');
    const [limit, setLimit] = useState(10);
    const [currentPage, setCurrentPage] = useState(1);
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const [selectedRows, setSelectedRows] = useState([]);
    const [modalVisible, setModalVisible] = useState(false);
    const [editData, setEditData] = useState({});

    useEffect(() => {
        setCreateAtSort('descend');
        initData({ limit, offset: currentPage - 1, orderDirection: SortValues[createAtSort] });
    }, [resourceCatalogId]);

    const initData = (query = {}) => {
        dispatch(metadataManagement.getMetadataDatabases({ catalog: resourceCatalogId, keywords, orderBy: 'createAt', ...query })).then(res => {
            if (res.success) {
                setTableData(res.payload.data.rows);
                setTableDataCount(res.payload.data.count);
            }
        })
    }
    const onView = (id) => {
        setView(id);
    }
    const onEdit = (record) => {
        dispatch(metadataManagement.getMetadataModels({ modelTypes: ModelTypes })).then(res => {
            if (res.success) {
                setEditData({ title: '修改库表元数据', record: { path: '/' + resourceCatalogPath.join('/'), ...record, ...record.attributesParam } });
                setModalVisible(true);
            }
        })
    }
    const confirmDelete = (id) => { }
    const marking = (id) => { }
    const applyResources = (id) => { }

    const onTableChange = (pagination, filters, sorter) => {
        let limit = Number.parseInt(pagination.pageSize);
        let offset = Number.parseInt(pagination.current) - 1;
        setCurrentPage(pagination.current);
        setLimit(limit);
        let query = { offset, limit, orderDirection: SortValues[createAtSort] };
        if (sorter.columnKey === 'createAt') {
            query.orderDirection = SortValues[sorter.order];
            setCreateAtSort(sorter.order);
        }
        setSelectedRowKeys([]);
        setSelectedRows([]);
        initData(query);
    }
    const columns = [
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            width: '16%',
            ellipsis: true
        }, {
            title: '代码',
            dataIndex: 'code',
            key: 'code',
            width: '16%',
            ellipsis: true
        }, {
            title: '元数据类型',
            dataIndex: 'type',
            key: 'type',
            width: '10%'
        }, {
            title: '标签',
            dataIndex: 'tags',
            key: 'tags',
            width: '18%',
            ellipsis: true,
            render: (text, record, index) => {
                let tagName = record.tagDatabases.map(tagSet => tagSet.tag.name);
                return tagName.join(',');
            }
        }, {
            title: '创建者',
            dataIndex: 'createBy',
            key: 'createBy',
            width: '14%',
            render: (text, record, index) => {
                return record.user.username
            }
        }, {
            title: '创建时间',
            dataIndex: 'createAt',
            key: 'createAt',
            width: '18%',
            sortOrder: createAtSort,
            sorter: (a, b) => moment(a.createAt).valueOf() - moment(b.createAt).valueOf(),
            sortDirections: ['descend', 'ascend', 'descend'],
            render: (text, record, index) => {
                return moment(text).format('YYYY-MM-DD HH:mm:ss')
            }
        }, {
            title: '操作',
            dataIndex: 'action',
            width: '8%',
            render: (text, record) => {
                return <ButtonGroup>
                    <a onClick={() => onView(record.id)}>查看</a>
                    <a style={{ marginLeft: 10 }} onClick={() => onEdit(record)}>编辑</a>
                    <Popconfirm
                        title="是否确认删除该元数据？若确认删除则关联的数据将一并删除！"
                        onConfirm={() => confirmDelete(record.id)}
                    > <a style={{ marginLeft: 10 }}>删除</a></Popconfirm>
                    <a style={{ marginLeft: 10 }} onClick={() => marking(record.id)}>打标</a>
                    <a style={{ marginLeft: 10 }} onClick={() => applyResources(record.id)}>申请资源</a>
                </ButtonGroup>
            }
        }];

    const onSearch = () => {
        setSelectedRowKeys([]);
        setSelectedRows([]);
        setCurrentPage(1);
        initData({ limit, offset: 0, orderDirection: SortValues[createAtSort] });
    }
    const handleExport = (isAll = false) => {
        let tableHeader = `<tr>`;
        columns.filter(c => c.dataIndex != 'action').map(c => { tableHeader += `<th><div>${c.title}</div></th>`; });
        tableHeader += '</tr>';
        if (isAll) {
            dispatch(metadataManagement.getMetadataDatabases({ catalog: resourceCatalogId })).then(res => {
                if (res.success) {
                    handleExportTable(tableHeader, res.payload.data.rows, isAll);
                }
            })
        } else {
            let data = []
            if (createAtSort === 'descend') {
                data = selectedRows.sort((a, b) => moment(b.createAt).valueOf() - moment(a.createAt).valueOf());
            } else {
                data = selectedRows.sort((a, b) => moment(a.createAt).valueOf() - moment(b.createAt).valueOf());
            }
            handleExportTable(tableHeader, data);
        }
    }
    const handleExportTable = (tableHeader, contentData, isAll = false) => {
        let tableContent = '';
        contentData.map(cd => {
            tableContent += `<tr>`;
            tableContent += `<th style="font-weight:600"><div>${cd.name}</div></th>`;
            tableContent += `<th style="font-weight:600"><div>${cd.code}</div></th>`;
            tableContent += `<th style="font-weight:600"><div>${cd.type}</div></th>`;
            let tagName = cd.tagDatabases.map(tagSet => tagSet.tag.name);
            tableContent += `<th style="font-weight:600"><div>${tagName.join(',')}</div></th>`;
            tableContent += `<th style="font-weight:600"><div>${cd.user.username}</div></th>`;
            tableContent += `<th style="font-weight:600"><div>${moment(cd.createAt).format('YYYY-MM-DD HH:mm:ss')}</div></th>`;
            tableContent += `</tr>`;
        })
        let exportTable = `\uFEFF<table border="1">
            ${tableHeader}
            ${tableContent}
        </table>`;
        let tempStr = new Blob([exportTable], { type: 'text/plain;charset=utf-8' });
        FileSaver.saveAs(tempStr, `库表元数据导出.xls`);
    }
    //新建、修改
    const onConfirm = (values) => {
        let obj = {}
        if (editData.add) {
            obj = { createBy: user.id, catalog: resourceCatalogId, catalogKey: resourceCatalogKey, ...values }
            dispatch(metadataManagement.postMeatadataDatabases(obj)).then(() => {
                onSearch(); setModalVisible(false);
            });
        } else {
            obj = { catalog: resourceCatalogId, catalogKey: resourceCatalogKey, ...values }
            dispatch(metadataManagement.putMeatadataDatabases(editData.record.id, obj)).then(() => {
                onSearch(); setModalVisible(false);
            });
        }
    }
    return <Spin spinning={isRequesting}>
        <div style={{ marginBottom: 16 }}>
            <Button type='primary' onClick={() => {
                dispatch(metadataManagement.getMetadataModels({ modelTypes: ModelTypes })).then(res => {
                    if (res.success) {
                        setEditData({ add: true, title: '新建库表元数据', record: { path: '/' + resourceCatalogPath.join('/') } });
                        setModalVisible(true);
                    }
                })
            }}>新建</Button>
            {
                tableDataCount == 0 ? <Button disabled={tableDataCount == 0} style={{ marginLeft: 16 }} onClick={() => handleExport()}>导出</Button> :
                    selectedRowKeys && selectedRowKeys.length ?
                        <Button disabled={tableDataCount == 0} style={{ marginLeft: 16 }} onClick={() => handleExport()}>导出</Button>
                        : <Popconfirm title={'是否导出全部？'} onConfirm={() => handleExport(true)} okText="确定" cancelText="取消">
                            <Button disabled={tableDataCount == 0} style={{ marginLeft: 16 }}> 导出</Button>
                        </Popconfirm>
            }
            <Button type='primary' style={{ marginLeft: 16, float: 'right' }} onClick={onSearch}>查询</Button>
            <Input style={{ width: 220, float: 'right' }} placeholder="输入名称/代码/类型"
                allowClear onPressEnter={onSearch} onChange={e => setKeywords(e.target.value || '')} />
        </div >
        <Table
            scroll={{ y: clientHeight - 320 }}
            rowKey='id'
            columns={columns}
            dataSource={tableData}
            onChange={onTableChange}
            pagination={{
                current: currentPage,
                pageSize: limit,
                total: tableDataCount,
                showSizeChanger: true,
                // showQuickJumper: true,
                showTotal: (total) => { return <span style={{ fontSize: 15 }}>{`共${Math.ceil(total / limit)}页，${total}项`}</span> },
                onShowSizeChange: (currentPage, pageSize) => {
                    setCurrentPage(currentPage);
                    setLimit(pageSize);
                },
                onChange: (page, pageSize) => {
                    setSelectedRowKeys([]);
                    setSelectedRows([]);
                    setCurrentPage(page);
                    setLimit(pageSize);
                    let queryParams = {
                        orderDirection: SortValues[createAtSort],
                        page: page - 1,
                        size: pageSize
                    };
                    initData(queryParams);
                }
            }}
            rowSelection={{
                onChange: (selectedRowKeys, selectedRows) => {
                    setSelectedRowKeys(selectedRowKeys)
                    setSelectedRows(selectedRows);
                },
                selectedRowKeys: selectedRowKeys
            }}
        >
        </Table>
        {
            modalVisible ?
                <MetadataDatabaseModal
                    modelTypes={ModelTypes.filter(m => m === '目录')}
                    metadataModels={metadataModels.filter(m => m.modelType === '目录')}
                    editData={editData}
                    onCancel={() => setModalVisible(false)}
                    onConfirm={onConfirm} /> : ''
        }
    </Spin >
}
function mapStateToProps(state) {
    const { global, auth, metadataDatabases, metadataModels } = state;
    return {
        user: auth.user,
        actions: global.actions,
        clientHeight: global.clientHeight,
        isRequesting: metadataDatabases.isRequesting || metadataModels.isRequesting,
        metadataModels: metadataModels.data,

    };
}
export default connect(mapStateToProps)(DatabaseTable)