diff --git a/web/client/src/components/buttonGroup/index.js b/web/client/src/components/buttonGroup/index.js new file mode 100644 index 0000000..d0335ad --- /dev/null +++ b/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 = () => { + + } + + render_ = () => { + const { children } = this.props + return ( +
+ + + +
+ ) + } + + 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); \ No newline at end of file diff --git a/web/client/src/components/index.js b/web/client/src/components/index.js index 13a1672..c20bafa 100644 --- a/web/client/src/components/index.js +++ b/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 }; diff --git a/web/client/src/sections/metadataManagement/containers/databasesTable.js b/web/client/src/sections/metadataManagement/containers/databasesTable.js index 33cec0b..1446c40 100644 --- a/web/client/src/sections/metadataManagement/containers/databasesTable.js +++ b/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
+ return onView(id)}>查看 -    - onEdit(record)}>编辑 -    + onEdit(record)}>编辑 confirmDelete(record.id)} - > 删除 -    - marking(record.id)}>打标 -    - applyResources(record.id)}>申请资源 -
+ > 删除 + marking(record.id)}>打标 + applyResources(record.id)}>申请资源 + } }]; const onSearch = () => { + setSelectedRowKeys([]); + setSelectedRows([]); setCurrentPage(1); initData({ limit, offset: 0, orderDirection: SortValues[createAtSort] }); } const handleExport = (isAll = false) => { - + let tableHeader = ``; + columns.filter(c => c.dataIndex != 'action').map(c => { tableHeader += `
${c.title}
`; }); + tableHeader += ''; + 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 += ``; + tableContent += `
${cd.name}
`; + tableContent += `
${cd.code}
`; + tableContent += `
${cd.type}
`; + let tagName = cd.tagDatabases.map(tagSet => tagSet.tag.name); + tableContent += `
${tagName.join(',')}
`; + tableContent += `
${cd.user.username}
`; + tableContent += `
${moment(cd.createAt).format('YYYY-MM-DD HH:mm:ss')}
`; + tableContent += ``; + }) + let exportTable = `\uFEFF + ${tableHeader} + ${tableContent} +
`; + let tempStr = new Blob([exportTable], { type: 'text/plain;charset=utf-8' }); + FileSaver.saveAs(tempStr, `库表元数据导出.xls`); } return
@@ -124,11 +167,12 @@ const DatabaseTable = (props) => { setEditData({ title: '新建库表元数据' }); setModalVisible(true); }}>新建 - {selectedRowKeys && selectedRowKeys.length ? - - : handleExport(true)} okText="确定" cancelText="取消"> - - + {tableDataCount == 0 ? : + selectedRowKeys && selectedRowKeys.length ? + + : handleExport(true)} okText="确定" cancelText="取消"> + + } {
{ 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 }}