Merge branch 'master' of https://gitea.anxinyun.cn/free-sun/GovernmentDataResourceCenter

2 years ago · 493412cdbc
3 changed files with 220 additions and 5 deletions
--- a/web/client/src/layout/containers/layout/index.js
+++ b/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 }}>
--- a/web/client/src/sections/metadataManagement/components/tagSetModal.js
+++ b/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;
--- a/web/client/src/sections/metadataManagement/containers/tagManagement.js
+++ b/web/client/src/sections/metadataManagement/containers/tagManagement.js
@ -1,7 +1,152 @@
-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 { PlusOutlined, EditOutlined, CloseOutlined } from '@ant-design/icons';
+import TagSetModal from '../components/tagSetModal';
+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('');
+    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) {
+                    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={() => {
+                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, 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 = [];
+        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('');
+    }
+    //新建、修改
+    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={() => {
+                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 || '')} />
+        </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>
+                    )}
+                    <Tag className='tags'>{tag(null, ts.tagSetId)}</Tag>
+                </Panel>)}
+        </Collapse>
+        {
+            modalVisible ?
+                <TagSetModal
+                    tagList={tagList}
+                    editData={editData}
+                    onCancel={() => setModalVisible(false)}
+                    onConfirm={onConfirm} /> : ''
+        }
+    </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)