From b2d7ac467b4cf38946fba5813408daea093748e5 Mon Sep 17 00:00:00 2001 From: zhangminghua Date: Tue, 14 Mar 2023 13:47:25 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E6=A0=87=E7=AD=BE=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E9=A1=B5=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
{ts.tagSetName} + { }} /> + { }} okText="确定" cancelText="取消"> + + +
+ } + const tag = (t) => { + return
{t.name} + { }} /> + { }} okText="确定" cancelText="取消"> + + +
+ } + 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 +
+ {/* */} + + + setKeywords(e.target.value || '')} /> +
+ + {tagData.map(ts => + + {ts.tags.map(t => + {tag(t)} + )} + )} + + } -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 From fab42bd743da57137ca78b8dda8c57779eb2acdd Mon Sep 17 00:00:00 2001 From: zhangminghua Date: Tue, 14 Mar 2023 17:35:39 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E6=A0=87=E7=AD=BE=E9=9B=86=E3=80=81?= =?UTF-8?q?=E6=A0=87=E7=AD=BE--=E6=96=B0=E5=BB=BA=E3=80=81=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/layout/containers/layout/index.js | 2 +- .../components/tagSetModal.js | 70 +++++++++++++++ .../containers/tagManagement.js | 85 +++++++++++++++---- 3 files changed, 141 insertions(+), 16 deletions(-) create mode 100644 web/client/src/sections/metadataManagement/components/tagSetModal.js diff --git a/web/client/src/layout/containers/layout/index.js b/web/client/src/layout/containers/layout/index.js index 25a75e3..cbade91 100644 --- 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 ( diff --git a/web/client/src/sections/metadataManagement/components/tagSetModal.js b/web/client/src/sections/metadataManagement/components/tagSetModal.js new file mode 100644 index 0000000..e9d06eb --- /dev/null +++ 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 ( + handleOk(null)} + onCancel={onCancel}> +
+ ({ + validator(_, value) { return validatorNull(_, value, getFieldValue, validateFields) } + })]}> + + +
+ + ) +} +export default TagSetModal; \ No newline at end of file diff --git a/web/client/src/sections/metadataManagement/containers/tagManagement.js b/web/client/src/sections/metadataManagement/containers/tagManagement.js index 94c3587..26f74e0 100644 --- a/web/client/src/sections/metadataManagement/containers/tagManagement.js +++ b/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
{ts.tagSetName} - { }} /> + { + setEditData({ setEditData: true, title: '编辑标签集', label: '标签集名称', name: ts.tagSetName, id: ts.tagSetId }); + setModalVisible(true); + }} /> { }} okText="确定" cancelText="取消">
} - const tag = (t) => { - return
{t.name} - { }} /> - { }} okText="确定" cancelText="取消"> - - -
+ const tag = (t, tagSetId) => { + if (t) + return
{t.name} + { + setEditData({ setEditData: false, title: '编辑标签', label: '标签名称', name: t.name, id: t.id }); + setModalVisible(true); + }} /> + { }} okText="确定" cancelText="取消"> + + +
+ else + return
{ + setEditData({ setEditData: false, title: '新建标签', label: '标签名称', tagSetId: tagSetId }); + setModalVisible(true); + }}>
} 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
{/* */} - + setKeywords(e.target.value || '')} /> @@ -80,9 +126,18 @@ const TagManagement = (props) => { {ts.tags.map(t => {tag(t)} )} + {tag(null, ts.tagSetId)} )} - + { + modalVisible ? + setModalVisible(false)} + onConfirm={onConfirm} /> : '' + } + } function mapStateToProps(state) {