From fab42bd743da57137ca78b8dda8c57779eb2acdd Mon Sep 17 00:00:00 2001 From: zhangminghua Date: Tue, 14 Mar 2023 17:35:39 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=87=E7=AD=BE=E9=9B=86=E3=80=81=E6=A0=87?= =?UTF-8?q?=E7=AD=BE--=E6=96=B0=E5=BB=BA=E3=80=81=E4=BF=AE=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) {