标签集、标签--新建、修改

web/client/src/layout/containers/layout/index.js

@@ -66,7 +66,7 @@ const LayoutContainer = props => {
             dom.scrollTop = 0;
         }
     })
-    console.log(FS_API_ROOT);
+    // console.log(FS_API_ROOT);
     return (
         <Layout id="layout">
             <Layout.Header style={{ padding: 0 }}>

web/client/src/sections/metadataManagement/components/tagSetModal.js

@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, Input, Form, message } from 'antd';
+const TagSetModal = (props) => {
+    const { tagList, onConfirm, onCancel, editData } = props;
+    const [form] = Form.useForm();
+    useEffect(() => {
+    }, []);
+    const handleOk = () => {
+        form.validateFields().then(values => {
+            if (onConfirm) {
+                if (editData.setEditData) {
+                    //标签集新建、修改
+                    let exist = false;
+                    if (editData.name) {
+                        exist = tagList.find(m => m.tagSetName === values.name && m.tagSetId != editData.id);
+                    } else {
+                        exist = tagList.find(m => m.tagSetName === values.name);
+                    }
+                    if (exist) {
+                        message.error('该标签集名称已存在');
+                        return false;
+                    }
+                } else {
+                    let exist = false;
+                    if (editData.name) {
+                        tagList.map(tl => {
+                            if (!exist)
+                                exist = tl.tags.find(t => t.name === values.name && t.id != editData.id);
+                        })
+                    } else {
+                        tagList.map(tl => {
+                            if (!exist)
+                                exist = tl.tags.find(t => t.name === values.name);
+                        })
+                    }
+                    if (exist) {
+                        message.error('该标签名称已存在');
+                        return false;
+                    }
+                }
+                onConfirm(values)
+            }
+        })
+    }
+    const validatorNull = (rule, value, getFieldValue, validateFields) => {
+        if (!value || !value.trim().length) {
+            return Promise.reject(new Error(`${editData.label}不可空字符串`));
+        }
+        return Promise.resolve();
+    }
+    return (
+        <Modal title={editData.title} visible={true} destroyOnClose
+            okText='保存' width={800}
+            onOk={() => handleOk(null)}
+            onCancel={onCancel}>
+            <Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} initialValues={editData || {}}>
+                <Form.Item
+                    label={editData.label}
+                    name='name'
+                    rules={[{ required: true, message: '' }, { max: 50, message: `${editData.label}不超过50个字` },
+                    ({ getFieldValue, validateFields }) => ({
+                        validator(_, value) { return validatorNull(_, value, getFieldValue, validateFields) }
+                    })]}>
+                    <Input style={{ width: '90%' }} placeholder={`请输入${editData.label}`} />
+                </Form.Item>
+            </Form>
+        </Modal>
+    )
+}
+export default TagSetModal;

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

@@ -1,7 +1,8 @@
 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 { PlusOutlined, EditOutlined, CloseOutlined } from '@ant-design/icons';
+import TagSetModal from '../components/tagSetModal';
 import './style.less'
 const { Panel } = Collapse;
 
@@ -9,38 +10,58 @@ const TagManagement = (props) => {
     const { user, dispatch, actions, tagList, isRequesting } = props;
     const { metadataManagement } = actions;
     const [tagData, setTagData] = useState([]);
-    const [activeKey, setActiveKey] = useState();
+    const [activeKey, setActiveKey] = useState('');
     const [keywords, setKeywords] = useState('');
+    const [modalVisible, setModalVisible] = useState(false)
+    const [editData, setEditData] = useState({ title: '', lable: '', setTagSet: null })
 
     useEffect(() => {
+        initData();
+    }, [])
+    const initData = (configRefresh) => {
         dispatch(metadataManagement.getTagList()).then(res => {
             const { data } = res.payload;
             if (res.success) {
+                if (configRefresh)
+                    setModalVisible(false);
                 setTagData(data);
                 if (data.length) {
-                    setActiveKey(`tagSet-${data[0].tagSetId}`)
-                }
+                    if (!configRefresh)
+                        setActiveKey(`tagSet-${data[0].tagSetId}`)
+                } else setActiveKey('');
             }
         })
-    }, [])
+    }
     const onChange = (key) => {
         setActiveKey(key);
     };
     const header = (ts) => {
         return <div > {ts.tagSetName}
-            <EditOutlined style={{ marginLeft: 20 }} onClick={() => { }} />
+            <EditOutlined style={{ marginLeft: 20 }} onClick={() => {
+                setEditData({ setEditData: true, title: '编辑标签集', label: '标签集名称', name: ts.tagSetName, id: ts.tagSetId });
+                setModalVisible(true);
+            }} />
             <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 tag = (t, tagSetId) => {
+        if (t)
+            return <div >{t.name}
+                <EditOutlined style={{ marginLeft: 20 }} onClick={() => {
+                    setEditData({ setEditData: false, title: '编辑标签', label: '标签名称', name: t.name, id: t.id });
+                    setModalVisible(true);
+                }} />
+                <Popconfirm placement="top" title={'确定删除该标签吗？'} onConfirm={() => { }} okText="确定" cancelText="取消">
+                    <CloseOutlined style={{ marginLeft: 10 }} />
+                </Popconfirm>
+            </div>
+        else
+            return <div style={{ cursor: 'pointer' }} onClick={() => {
+                setEditData({ setEditData: false, title: '新建标签', label: '标签名称', tagSetId: tagSetId });
+                setModalVisible(true);
+            }}><PlusOutlined style={{ margin: '0px 10px' }} /></div>
     }
     const onSearch = () => {
         let data = [];
@@ -66,10 +87,35 @@ const TagManagement = (props) => {
         if (data.length === 0)
             setActiveKey('');
     }
+    //新建、修改
+    const onConfirm = (values) => {
+        if (editData.setEditData) {//标签集
+            if (editData.name)//修改
+                dispatch(metadataManagement.putTagSets(editData.id, { ...values })).then(() => {
+                    initData(true);
+                });
+            else//新建
+                dispatch(metadataManagement.postTagSets({ ...values })).then(() => {
+                    initData(true);
+                });
+        } else {
+            if (editData.name)//修改
+                dispatch(metadataManagement.putTags(editData.id, { ...values })).then(() => {
+                    initData(true);
+                });
+            else//新建
+                dispatch(metadataManagement.postTags({ tagSetId: editData.tagSetId, ...values })).then(() => {
+                    initData(true);
+                });
+        }
+    }
     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 }} onClick={() => {
+                setEditData({ setEditData: true, title: '新建标签集', label: '标签集名称' });
+                setModalVisible(true);
+            }}>新建标签集</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 || '')} />
@@ -80,9 +126,18 @@ const TagManagement = (props) => {
                     {ts.tags.map(t =>
                         <Tag className='tags'>{tag(t)}</Tag>
                     )}
+                    <Tag className='tags'>{tag(null, ts.tagSetId)}</Tag>
                 </Panel>)}
         </Collapse>
-    </Spin>
+        {
+            modalVisible ?
+                <TagSetModal
+                    tagList={tagList}
+                    editData={editData}
+                    onCancel={() => setModalVisible(false)}
+                    onConfirm={onConfirm} /> : ''
+        }
+    </Spin >
 }
 
 function mapStateToProps(state) {