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

import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Spin, Table, Popconfirm, Button, Input, Row, Col } from 'antd';
import { ButtonGroup } from '$components';
import MetadataRestapiModal from '../components/metadataRestapiModal';
import MetadataTagModal from '../components/metadataTagModal';
import MetadataResourceModal from '../components/metadataResourceModal';

const RestapisTable = (props) => {
    const { user, dispatch, actions, clientHeight, resourceCatalogId, resourceCatalogKey,
        isRequesting, metadataModels, tagList, metadataResourceApplications } = props;
    const { metadataManagement } = actions;
    const [tableData, setTableData] = useState([]);
    const [tableDataCount, setTableDataCount] = useState(0);//Table数据
    const [keywords, setKeywords] = useState('');
    const [limit, setLimit] = useState(10);
    const [currentPage, setCurrentPage] = useState(1);
    const [modalVisible, setModalVisible] = useState(false);
    const [editData, setEditData] = useState({});
    const [tagModalVisible, setTagModalVisible] = useState(false);
    const [editTagData, setEditTagData] = useState({});
    const [resourceModalVisible, setResourceModalVisible] = useState(false);
    const [editResourceData, setEditResourceData] = useState({});

    useEffect(() => {
        dispatch(metadataManagement.getTagList());
        initData({ limit, offset: currentPage - 1 });
    }, []);

    const initData = (query = {}) => {
        dispatch(metadataManagement.getMetadataRestapis({ catalog: resourceCatalogId, keywords, ...query })).then(res => {
            if (res.success) {
                setTableData(res.payload.data.rows);
                setTableDataCount(res.payload.data.count);
                let resourceNames = [];
                res.payload.data.rows.map(r => {
                    resourceNames.push(r.name);
                })
                if (resourceNames.length)
                    dispatch(metadataManagement.getMetadataResourceApplications({ resourceNames: resourceNames.join(','), type: '接口' }))
            }

        })
    }
    const onEdit = (record) => {
        dispatch(metadataManagement.getMetadataModels({ modelTypes: '接口' })).then(res => {
            if (res.success) {
                setEditData({ title: '修改接口元数据', record: { ...record, ...record.attributesParam } });
                setModalVisible(true);
            }
        })
    }
    const confirmDelete = (id) => {
        dispatch(metadataManagement.delMetadataRestapis(id)).then(res => {
            if (res.success) {
                onSearch(); setModalVisible(false);
            }
        });
    }
    const marking = (id) => {
        dispatch(metadataManagement.getTagMetadata(id, 'restapi')).then(res => {
            if (res.success) {
                const obj = { tagSet: [], tags: [], id: id };
                if (res.payload.data.length) {
                    const tagSetIds = res.payload.data.map(d => d.tagSet)
                    obj.tagSet = [...new Set(tagSetIds)];
                    obj.tags = res.payload.data.map(d => d.id);
                }
                setEditTagData({ record: obj });
                setTagModalVisible(true);
            }
        })
    }
    const onConfirmTag = (values) => {
        dispatch(metadataManagement.postTagMetadata({ restapi: editTagData.record.id, ...values })).then(res => {
            if (res.success) {
                onSearch(); setTagModalVisible(false);
            }
        });
    }
    const applyResources = (record) => {
        setEditResourceData({ record: { resourceName: record.name, applyBy: user.id, applyByName: user.name, resourceType: '接口' } });
        setResourceModalVisible(true);
    }

    const onConfirmResource = (values) => {
        dispatch(metadataManagement.postMetadataResourceApplications(values)).then(res => {
            if (res.success) {
                onSearch(); setResourceModalVisible(false);
            }
        });
    }
    const columns = [{
        title: '接口名称',
        dataIndex: 'name',
        key: 'name',
        ellipsis: true,
        width: '23%'
    }, {
        title: '接口路由',
        dataIndex: 'url',
        key: 'url',
        ellipsis: true,
        width: '23%'
    }, {
        title: '接口类型',
        dataIndex: 'method',
        key: 'method',
        width: '10%'
    }, {
        title: '传参',
        dataIndex: 'queryParam',
        key: 'queryParam',
        ellipsis: true,
        width: '20%'
    }, {
        title: '返回值',
        dataIndex: 'return',
        key: 'return',
        ellipsis: true,
        width: '23%'
    }, {
        title: '标签',
        dataIndex: 'tags',
        key: 'tags',
        width: '23%',
        ellipsis: true,
        render: (text, record, index) => {
            let tagName = record.tagRestapis.map(tagSet => tagSet.tag.name);
            return tagName.join(',');
        }
    }, {
        title: '状态',
        dataIndex: 'enabled',
        key: 'enabled',
        width: '10%',
        render: (text) => <span>{text ? '启用' : '禁用'}</span>
    }, {
        title: '操作',
        dataIndex: 'action',
        width: '8%',
        render: (text, record) => {
            let resourceApplicationsRecords = metadataResourceApplications.filter(ra =>
                ra.applyBy == user.id && ra.resourceName === record.name);
            return <ButtonGroup>
                {user.role == '数据消费者' ? null :
                    <>
                        <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>
                    </>
                }

                {user.role == '系统管理员' ? '' : resourceApplicationsRecords.length === 0 ?
                    <a style={{ marginLeft: 10 }} onClick={() => applyResources(record)}>申请资源</a> :
                    <span style={{ marginLeft: 10, color: "#c0c0c0" }} title='已存在资源申请'>申请资源</span>}
            </ButtonGroup>
        }
    }];

    const onSearch = () => {
        setCurrentPage(1);
        initData({ limit, offset: 0 });
    }
    //新建、修改
    const onConfirm = (values) => {
        let obj = {}
        if (editData.add) {
            obj = { createBy: user.id, catalog: resourceCatalogId, catalogKey: resourceCatalogKey, ...values }
            dispatch(metadataManagement.postMetadataRestapis(obj)).then(res => {
                if (res.success) {
                    onSearch(); setModalVisible(false);
                }
            });
        } else {
            obj = { catalog: resourceCatalogId, catalogKey: resourceCatalogKey, ...values }
            dispatch(metadataManagement.putMetadataRestapis(editData.record.id, obj)).then(res => {
                if (res.success) {
                    onSearch(); setModalVisible(false);
                }
            });
        }
    }
    return <Spin spinning={isRequesting}>
        <Row style={{ marginBottom: 16 }}>
            <Col span={12}>
                {user.role == '数据消费者' ? null : <>  <Button type='primary' onClick={() => {
                    dispatch(metadataManagement.getMetadataModels({ modelTypes: '接口' })).then(res => {
                        if (res.success) {
                            setEditData({ add: true, title: '新建接口元数据', record: {} });
                            setModalVisible(true);
                        }
                    })
                }}>新建</Button></>}
            </Col>
            <Col span={12} style={{ display: 'flex', justifyContent: 'flex-end' }}>
                <Input style={{ width: 220 }} placeholder="名称"
                    allowClear onPressEnter={onSearch} onChange={e => setKeywords(e.target.value || '')} />
                <Button type='primary' style={{ marginLeft: 16 }} onClick={onSearch}>查询</Button>
            </Col>
        </Row>

        <Table
            scroll={{ y: clientHeight - 320 }}
            rowKey='id'
            columns={columns}
            dataSource={tableData}
            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) => {
                    setCurrentPage(page);
                    setLimit(pageSize);
                    let queryParams = {
                        offset: page - 1,
                        limit: pageSize
                    };
                    initData(queryParams);
                }
            }}
        >
        </Table>
        {
            modalVisible ?
                <MetadataRestapiModal
                    metadataModels={metadataModels.filter(m => m.modelType === '接口')}
                    editData={editData}
                    onCancel={() => {
                        setModalVisible(false);
                    }}
                    onConfirm={onConfirm} /> : ''
        }
        {
            tagModalVisible ?
                <MetadataTagModal
                    tagList={tagList}
                    editData={editTagData}
                    onCancel={() => setTagModalVisible(false)}
                    onConfirm={onConfirmTag} /> : ''
        }
        {
            resourceModalVisible ?
                <MetadataResourceModal
                    editData={editResourceData}
                    onCancel={() => setResourceModalVisible(false)}
                    onConfirm={onConfirmResource} /> : ''
        }
    </Spin >
}
function mapStateToProps(state) {
    const { global, auth, metadataRestapis, metadataModels, tagList, tagMetadata, metadataResourceApplications } = state;
    return {
        user: auth.user,
        actions: global.actions,
        clientHeight: global.clientHeight,
        isRequesting: metadataRestapis.isRequesting || metadataModels.isRequesting || tagList.isRequesting
            || tagMetadata.isRequesting || metadataResourceApplications.isRequesting,
        metadataModels: metadataModels.data,
        tagList: tagList.data || [],
        metadataResourceApplications: metadataResourceApplications.data || []
    };
}
export default connect(mapStateToProps)(RestapisTable)