标签管理页面展示查询

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

@@ -1,7 +1,97 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
+import { Spin, Button, Collapse, Input, Popconfirm, Tag } from 'antd';
+import { SearchOutlined, EditOutlined, CloseOutlined } from '@ant-design/icons';
+import './style.less'
+const { Panel } = Collapse;
 
-function TagManagement (props) {
-    return <>标签管理</>
+const TagManagement = (props) => {
+    const { user, dispatch, actions, tagList, isRequesting } = props;
+    const { metadataManagement } = actions;
+    const [tagData, setTagData] = useState([]);
+    const [activeKey, setActiveKey] = useState();
+    const [keywords, setKeywords] = useState('');
+
+    useEffect(() => {
+        dispatch(metadataManagement.getTagList()).then(res => {
+            const { data } = res.payload;
+            if (res.success) {
+                setTagData(data);
+                if (data.length) {
+                    setActiveKey(`tagSet-${data[0].tagSetId}`)
+                }
+            }
+        })
+    }, [])
+    const onChange = (key) => {
+        setActiveKey(key);
+    };
+    const header = (ts) => {
+        return <div > {ts.tagSetName}
+            <EditOutlined style={{ marginLeft: 20 }} onClick={() => { }} />
+            <Popconfirm placement="top" title={'确定删除该标签集吗？'} onConfirm={() => { }} okText="确定" cancelText="取消">
+                <CloseOutlined style={{ marginLeft: 10 }} />
+            </Popconfirm>
+        </div>
+    }
+    const tag = (t) => {
+        return <div >{t.name}
+            <EditOutlined style={{ marginLeft: 20 }} onClick={() => { }} />
+            <Popconfirm placement="top" title={'确定删除该标签吗？'} onConfirm={() => { }} okText="确定" cancelText="取消">
+                <CloseOutlined style={{ marginLeft: 10 }} />
+            </Popconfirm>
+        </div>
+    }
+    const onSearch = () => {
+        let data = [];
+        const dataSource = JSON.parse(JSON.stringify(tagList));
+        dataSource.map(td => {
+            if (td.tagSetName.includes(keywords)) {
+                td.tags = td.tags.filter(tag => tag.name.includes(keywords));
+                if (data.length === 0)
+                    setActiveKey(`tagSet-${td.tagSetId}`);
+                data.push(td);
+            }
+            else {
+                let tags = td.tags.filter(tag => tag.name.includes(keywords))
+                if (tags.length) {
+                    td.tags = tags;
+                    if (data.length === 0)
+                        setActiveKey(`tagSet-${td.tagSetId}`);
+                    data.push(td);
+                }
+            }
+        })
+        setTagData(data);
+        if (data.length === 0)
+            setActiveKey('');
+    }
+    return <Spin spinning={isRequesting}>
+        <div style={{ marginBottom: 12 }}>
+            {/* <Button type='primary' onClick={() => { }}>刷新</Button> */}
+            <Button type='primary' style={{ marginLeft: 16 }} onClick={() => { }}>新建标签集</Button>
+            <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>
+        <Collapse defaultActiveKey={activeKey} activeKey={activeKey} onChange={onChange} collapsible={'icon'}>
+            {tagData.map(ts =>
+                <Panel header={header(ts)} key={`tagSet-${ts.tagSetId}`}>
+                    {ts.tags.map(t =>
+                        <Tag className='tags'>{tag(t)}</Tag>
+                    )}
+                </Panel>)}
+        </Collapse>
+    </Spin>
 }
 
-export default TagManagement
+function mapStateToProps(state) {
+    const { global, auth, tagList } = state;
+    return {
+        user: auth.user,
+        actions: global.actions,
+        tagList: tagList.data || [],
+        isRequesting: tagList.isRequesting
+    };
+}
+export default connect(mapStateToProps)(TagManagement)