From b2d7ac467b4cf38946fba5813408daea093748e5 Mon Sep 17 00:00:00 2001
From: zhangminghua <zhang.minghua@free-sun.com.cn>
Date: Tue, 14 Mar 2023 13:47:25 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=87=E7=AD=BE=E7=AE=A1=E7=90=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=B1=95=E7=A4=BA=E6=9F=A5=E8=AF=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../containers/tagManagement.js               | 98 ++++++++++++++++++-
 1 file changed, 94 insertions(+), 4 deletions(-)

diff --git a/web/client/src/sections/metadataManagement/containers/tagManagement.js b/web/client/src/sections/metadataManagement/containers/tagManagement.js
index 277791c..94c3587 100644
--- a/web/client/src/sections/metadataManagement/containers/tagManagement.js
+++ b/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
\ No newline at end of file
+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)
\ No newline at end of file