添加列表操作按钮组件；库表元数据导出功能

web/client/src/components/buttonGroup/index.js

@@ -0,0 +1,51 @@
+'use strict';
+
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { Button, Popover, Icon } from 'antd';
+import { EllipsisOutlined } from '@ant-design/icons';
+
+class ButtonGroup extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+
+        };
+    }
+
+    content = () => {
+        <Button></Button>
+    }
+
+    render_ = () => {
+        const { children } = this.props
+        return (
+            <div style={{ cursor: 'pointer' }}>
+                <Popover placement="bottomRight" content={children} arrowPointAtCenter>
+                    <EllipsisOutlined style={{ fontSize: 20, fontWeight: 'bolder' }} />
+                </Popover>
+            </div >
+        )
+    }
+
+    render() {
+        const { children } = this.props
+        if (children) {
+            if (Array.isArray(children)) {
+                if (children.some(c => c)) {
+                    return this.render_()
+                }
+            } else {
+                return this.render_()
+            }
+        }
+        return ''
+    }
+}
+
+function mapStateToProps(state) {
+    return {
+    }
+}
+
+export default connect(mapStateToProps)(ButtonGroup);

web/client/src/components/index.js

@@ -4,11 +4,13 @@
 import Upload from './Upload';
 import Uploads from './Uploads';
 import NoResource from './no-resource';
-import ExportAndImport from './export'
+import ExportAndImport from './export';
+import ButtonGroup from './buttonGroup';
 
 export {
     Upload,
     Uploads,
     NoResource,
     ExportAndImport,
+    ButtonGroup
 };

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

@@ -1,7 +1,9 @@
 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';
 
 const DatabaseTable = (props) => {
     const { user, dispatch, actions, clientHeight, resourceCatalogId, isRequesting } = props;
@@ -14,6 +16,7 @@ const DatabaseTable = (props) => {
     const [limit, setLimit] = useState(10);
     const [currentPage, setCurrentPage] = useState(1);
     const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+    const [selectedRows, setSelectedRows] = useState([]);
 
     useEffect(() => {
         setCreateAtSort('descend');
@@ -44,18 +47,22 @@ const DatabaseTable = (props) => {
             query.orderDirection = SortValues[sorter.order];
             setCreateAtSort(sorter.order);
         }
+        setSelectedRowKeys([]);
+        setSelectedRows([]);
         initData(query);
     }
     const columns = [{
         title: '名称',
         dataIndex: 'name',
         key: 'name',
-        width: '15%'
+        width: '16%',
+        ellipsis: true
     }, {
         title: '代码',
         dataIndex: 'code',
         key: 'code',
-        width: '15%'
+        width: '16%',
+        ellipsis: true
     }, {
         title: '元数据类型',
         dataIndex: 'type',
@@ -65,7 +72,8 @@ const DatabaseTable = (props) => {
         title: '标签',
         dataIndex: 'tags',
         key: 'tags',
-        width: '13%',
+        width: '18%',
+        ellipsis: true,
         render: (text, record, index) => {
             let tagName = record.tagDatabases.map(tagSet => tagSet.tag.name);
             return tagName.join(',');
@@ -74,15 +82,15 @@ const DatabaseTable = (props) => {
         title: '创建者',
         dataIndex: 'createBy',
         key: 'createBy',
-        width: '10%',
+        width: '14%',
         render: (text, record, index) => {
-            return record.user.username || ''
+            return record.user.username
         }
     }, {
         title: '创建时间',
         dataIndex: 'createAt',
         key: 'createAt',
-        width: '17%',
+        width: '18%',
         sortOrder: createAtSort,
         sorter: (a, b) => moment(a.createAt).valueOf() - moment(b.createAt).valueOf(),
         sortDirections: ['descend', 'ascend', 'descend'],
@@ -92,31 +100,66 @@ const DatabaseTable = (props) => {
     }, {
         title: '操作',
         dataIndex: 'action',
-        width: '20%',
+        width: '8%',
         render: (text, record) => {
-            return <div>
+            return <ButtonGroup>
                 <a onClick={() => onView(id)}>查看</a>
-                &nbsp;&nbsp;
-                <a onClick={() => onEdit(record)}>编辑</a>
-                &nbsp;&nbsp;
+                <a style={{ marginLeft: 10 }} onClick={() => onEdit(record)}>编辑</a>
                 <Popconfirm
                     title="是否确认删除该元数据？若确认删除则关联的数据将一并删除！"
                     onConfirm={() => confirmDelete(record.id)}
-                > <a>删除</a></Popconfirm>
-                &nbsp;&nbsp;
-                <a onClick={() => marking(record.id)}>打标</a>
-                &nbsp;&nbsp;
-                <a onClick={() => applyResources(record.id)}>申请资源</a>
-            </div>
+                > <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`);
     }
     return <Spin spinning={isRequesting}>
         <div style={{ marginBottom: 16 }}>
@@ -124,7 +167,8 @@ const DatabaseTable = (props) => {
                 setEditData({ title: '新建库表元数据' });
                 setModalVisible(true);
             }}>新建</Button>
-            {selectedRowKeys && selectedRowKeys.length ?
+            {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>
@@ -136,7 +180,7 @@ const DatabaseTable = (props) => {
         </div>
         <Table
             scroll={{ y: clientHeight - 320 }}
-            rowKey='databaseId'
+            rowKey='id'
             columns={columns}
             dataSource={tableData}
             onChange={onTableChange}
@@ -152,6 +196,8 @@ const DatabaseTable = (props) => {
                     setLimit(pageSize);
                 },
                 onChange: (page, pageSize) => {
+                    setSelectedRowKeys([]);
+                    setSelectedRows([]);
                     setCurrentPage(page);
                     setLimit(pageSize);
                     let queryParams = {
@@ -165,6 +211,7 @@ const DatabaseTable = (props) => {
             rowSelection={{
                 onChange: (selectedRowKeys, selectedRows) => {
                     setSelectedRowKeys(selectedRowKeys)
+                    setSelectedRows(selectedRows);
                 },
                 selectedRowKeys: selectedRowKeys
             }}