You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
287 lines
13 KiB
287 lines
13 KiB
import React, { useEffect, useState } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Spin, Row, Col, Tree, Button, Tooltip, Popconfirm, Input } from 'antd';
|
|
import { PlusCircleOutlined, EditOutlined, MinusCircleOutlined } from '@ant-design/icons';
|
|
import theStyle from './style.css';
|
|
import ResourceCatalogModal from '../components/resourceCatalogModal';
|
|
import MetadataTab from './metadataTab';
|
|
import MetadataDetails from './metadataDetails';
|
|
let expandedKeysData = [];
|
|
let allTreeNodeKeys = [];
|
|
let resourceCatalogRawData = [];
|
|
|
|
const LatestMetadata = (props) => {
|
|
const { user, dispatch, actions, history, clientHeight, resourceCatalog, isRequesting, location, match, organization } = props;
|
|
const { metadataManagement } = actions;
|
|
const [isAdmin, setIsAdmin] = useState(false);
|
|
const [resourceCatalogData, setResourceCatalogData] = useState([]);
|
|
const [selectedKeys, setSelectedKeys] = useState([]);
|
|
const [expandedKeys, setExpandedKeys] = useState([]);
|
|
const [modalVisible, setModalVisible] = useState(false);
|
|
const [editData, setEditData] = useState({});
|
|
const [resourceCatalogId, setResourceCatalogId] = useState('');
|
|
const [resourceCatalogKey, setResourceCatalogKey] = useState('');
|
|
const [resourceCatalogPath, setResourceCatalogPath] = useState([]);
|
|
const params = GetRequest(location?.search);
|
|
|
|
useEffect(() => {
|
|
const jumpSelectedKey = sessionStorage.getItem('jumpSelectedKey') || null;
|
|
initData(true, jumpSelectedKey);
|
|
}, [location?.search])
|
|
|
|
useEffect(() => {
|
|
const jumpSelectedKey = sessionStorage.getItem('jumpSelectedKey') || null;
|
|
initData(true, jumpSelectedKey);
|
|
dispatch(actions.organization.getOrganizationList());
|
|
}, [])
|
|
const initData = (configRefresh, jumpSelectedKey) => {
|
|
dispatch(metadataManagement.getResourceCatalog()).then(res => {
|
|
const { data } = res.payload;
|
|
if (res.success) {
|
|
resourceCatalogRawData = data;
|
|
allTreeNodeKeys = []
|
|
const resourceCatalogData = getTreeNodeData(data, null, 'rc', [], null);
|
|
setResourceCatalogData(resourceCatalogData);
|
|
if (data.length) {
|
|
if (configRefresh) {
|
|
if (jumpSelectedKey || selectedKeys.length)
|
|
expandedKeysData = jumpSelectedKey ? [jumpSelectedKey] : selectedKeys;
|
|
let expandedKeys = getExpandKeys(expandedKeysData);
|
|
params?.catalogKey ? setSelectedKeys([params?.catalogKey]) : setSelectedKeys(expandedKeysData);
|
|
params?.catalogKey ? setExpandedKeys(getExpandKeys([params?.catalogKey])) : setExpandedKeys(expandedKeys);
|
|
params?.treeId && setResourceCatalogId(params?.treeId);
|
|
params?.treeId && params?.treeId && setIsAdmin(user?.username === 'SuperAdmin'
|
|
|| (user?.role === '系统管理员' && user?.orgId == resourceCatalogRawData.find(a => a.id == params?.treeId)?.orgId));
|
|
expandedKeysData = [];
|
|
}
|
|
} else {
|
|
setExpandedKeys([]);
|
|
setSelectedKeys([]);
|
|
};
|
|
}
|
|
})
|
|
}
|
|
const getExpandKeys = (selectedData) => {
|
|
const keyArr = selectedData[0].split('-');
|
|
keyArr.shift();//['rc-2-5']->返回'rc';keyArr:['2','5']
|
|
const allExpandedKeys = allTreeNodeKeys.filter(k => keyArr.includes(k.id.toString()));
|
|
const resourceCatalogId = keyArr.pop();
|
|
!params?.treeId && setResourceCatalogId(resourceCatalogId);
|
|
!params?.treeId && setIsAdmin(user?.username === 'SuperAdmin'
|
|
|| (user?.role === '系统管理员' && user?.orgId == resourceCatalogRawData.find(a => a.id == resourceCatalogId)?.orgId));
|
|
setResourceCatalogKey(selectedData[0]);
|
|
const resourceCatalogPath = allExpandedKeys.map(a => a.name);
|
|
setResourceCatalogPath(resourceCatalogPath);
|
|
return allExpandedKeys.map(a => a.key);
|
|
}
|
|
const getTreeNodeData = (dataSource, parent, key, searchKeys, searchvalue) => {
|
|
let treeData = [];
|
|
let data = [];
|
|
if (!parent) {
|
|
data = dataSource.filter(ds => !ds.parent);
|
|
if (!expandedKeysData.length && data.length) {
|
|
if (searchKeys && searchKeys.includes(`rc-${data[0].id}`) || !searchvalue)
|
|
expandedKeysData.push(`rc-${data[0].id}`);
|
|
}
|
|
} else {
|
|
data = dataSource.filter(ds => ds.parent == parent);
|
|
}
|
|
data.map(ds => {
|
|
if (!searchvalue)
|
|
allTreeNodeKeys.push({ name: ds.name, key: `${key}-${ds.id}`, id: ds.id })
|
|
if (searchKeys && searchKeys.includes(`${key}-${ds.id}`) || !searchvalue) {
|
|
treeData.push({ title: renderTreeNode(ds, dataSource), key: `${key}-${ds.id}`, id: ds.id })
|
|
}
|
|
});
|
|
for (let d of treeData) {
|
|
d.children = getTreeNodeData(dataSource, d.id, d.key, searchKeys, searchvalue);
|
|
}
|
|
return treeData
|
|
}
|
|
|
|
const setTreeNodeTitle = (name) => {
|
|
let content = <span>{name}</span>
|
|
if (name.length > 6) {
|
|
content = <Tooltip title={name}>
|
|
{name.substring(0, 6) + '...'}
|
|
</Tooltip>
|
|
}
|
|
return content;
|
|
}
|
|
|
|
const renderTreeNode = (ds, dataSource) => {
|
|
return <div className={theStyle.icon} style={{ width: 180 }}>
|
|
{setTreeNodeTitle(ds.name)}
|
|
{(user?.username === 'SuperAdmin' || (user?.role === '系统管理员' && user?.orgId == ds?.orgId)) && <>
|
|
<EditOutlined title='修改' className={theStyle.tip} onClick={() => {
|
|
let record = JSON.parse(JSON.stringify(ds));
|
|
let parentData = dataSource.filter(rc => rc.id === record.parent);
|
|
record.parentName = parentData.length ? parentData[0].name : '';
|
|
setEditData({ record: record, title: '修改子类', child: ds.parent ? true : false, });
|
|
setModalVisible(true);
|
|
}} />
|
|
<Popconfirm placement="top" title={'确定删除该资源目录吗？'} onConfirm={() => {
|
|
dispatch(metadataManagement.delResourceCatalog(ds.id)).then((res) => {
|
|
if (res.success) {
|
|
expandedKeysData = []; initData(true);
|
|
}
|
|
setModalVisible(false);
|
|
});
|
|
}} okText="确定" cancelText="取消">
|
|
<MinusCircleOutlined title='删除' className={theStyle.tip} />
|
|
</Popconfirm>
|
|
<PlusCircleOutlined title='新建' className={theStyle.tip} onClick={() => {
|
|
setEditData({ record: { parent: ds.id, parentName: ds.name, orgId: ds?.orgId }, title: '新建子类', child: true, add: true });
|
|
setModalVisible(true);
|
|
}} />
|
|
</>}
|
|
</div >
|
|
};
|
|
//新建、修改
|
|
const onConfirm = (values) => {
|
|
let obj = { ...values }
|
|
if (editData.add) {
|
|
obj = { ...values, ...editData.record || {} }
|
|
dispatch(metadataManagement.postResourceCatalog(obj)).then(() => {
|
|
initData(); setModalVisible(false);
|
|
});
|
|
} else {
|
|
dispatch(metadataManagement.putResourceCatalog(editData.record.id, obj)).then(() => {
|
|
initData(); setModalVisible(false);
|
|
});
|
|
}
|
|
}
|
|
const onSearch = value => {
|
|
let searchKeys = [];
|
|
let selectedKeys = [];
|
|
//allTreeNodeKeys map遍历每个节点，找出所有相关节点及父节点
|
|
allTreeNodeKeys.map(item => {
|
|
if (item.name.indexOf(value) > -1) {
|
|
let arr = item.key.split('-')
|
|
if (arr.length) {
|
|
let str = '';
|
|
for (let i = 1; i < arr.length - 1; i++) {
|
|
if (str) {
|
|
str += '-' + arr[i];
|
|
}
|
|
else {
|
|
str += 'rc-' + arr[i];
|
|
}
|
|
if (!searchKeys.includes(str))
|
|
searchKeys.push(str);
|
|
}
|
|
}
|
|
if (!searchKeys.includes(item.key))
|
|
searchKeys.push(item.key);
|
|
if (!selectedKeys.length)
|
|
selectedKeys.push(item.key);
|
|
}
|
|
});
|
|
const resourceCatalogData = getTreeNodeData(resourceCatalog, null, 'rc', searchKeys, value);
|
|
setResourceCatalogData(resourceCatalogData);
|
|
if (selectedKeys.length) {
|
|
let expandedKeys = getExpandKeys(selectedKeys);
|
|
setSelectedKeys(selectedKeys);
|
|
setExpandedKeys(expandedKeys);
|
|
} else {
|
|
setSelectedKeys([]);
|
|
setExpandedKeys([]);
|
|
setResourceCatalogId('');
|
|
setResourceCatalogKey('');
|
|
setResourceCatalogPath([]);
|
|
}
|
|
};
|
|
const onChangeSearch = e => {
|
|
const { value } = e.target;
|
|
onSearch(value);
|
|
};
|
|
|
|
|
|
return <Spin spinning={isRequesting}>
|
|
<Row>
|
|
<Col style={{ width: 240 }}>
|
|
<Input style={{ width: 220, marginBottom: 8 }} placeholder="输入资源目录关键字搜索"
|
|
allowClear onChange={onChangeSearch}
|
|
onKeyPress={onChangeSearch} />
|
|
{user?.role == '系统管理员' && <Button type='primary' style={{ marginBottom: 16 }} onClick={() => {
|
|
setEditData({ title: '新建资源目录', add: true, record: { orgId: user?.orgId } });
|
|
setModalVisible(true);
|
|
}}>新建资源目录</Button>}
|
|
<Tree
|
|
// showLine
|
|
height={clientHeight - 180}
|
|
expandedKeys={expandedKeys}
|
|
selectedKeys={selectedKeys}
|
|
onSelect={(keys, e) => {
|
|
history.push(`/metadataManagement/latestMetadata`);
|
|
if (e.selected) {
|
|
setSelectedKeys(keys);
|
|
getExpandKeys(keys);
|
|
}
|
|
sessionStorage.setItem('jumpSelectedKey', keys.length ? keys[0] : selectedKeys && selectedKeys[0]);
|
|
history.push(`/metadataManagement/latestMetadata`);
|
|
}}
|
|
onExpand={(keys) => {
|
|
setExpandedKeys(keys);
|
|
}}
|
|
treeData={resourceCatalogData}
|
|
/>
|
|
</Col>
|
|
<Col style={{ width: 'calc(100% - 240px)' }}>
|
|
{location.pathname.indexOf('detail') > -1 ?
|
|
<MetadataDetails resourceCatalogId={resourceCatalogId}
|
|
resourceCatalogKey={resourceCatalogKey}
|
|
resourceCatalogPath={resourceCatalogPath}
|
|
match={match}
|
|
isAdmin={isAdmin} /> :
|
|
<MetadataTab resourceCatalogId={resourceCatalogId}
|
|
resourceCatalogKey={resourceCatalogKey}
|
|
resourceCatalogPath={resourceCatalogPath}
|
|
params={params}
|
|
isAdmin={isAdmin}
|
|
/>
|
|
// <MetadataTab resourceCatalogId={params?.treeId}
|
|
// resourceCatalogKey={params?.catalogKey}
|
|
// resourceCatalogPath={resourceCatalogPath}
|
|
// initTab={params?.type}
|
|
// />
|
|
}
|
|
</Col>
|
|
</Row>
|
|
{
|
|
modalVisible ?
|
|
<ResourceCatalogModal
|
|
resourceCatalog={resourceCatalog}
|
|
editData={editData}
|
|
onCancel={() => setModalVisible(false)}
|
|
onConfirm={onConfirm}
|
|
organization={organization}
|
|
/> : ''
|
|
}
|
|
</Spin>
|
|
}
|
|
function mapStateToProps(state) {
|
|
const { global, auth, resourceCatalog, organization } = state;
|
|
return {
|
|
user: auth.user,
|
|
actions: global.actions,
|
|
clientHeight: global.clientHeight,
|
|
resourceCatalog: resourceCatalog?.data || [],
|
|
isRequesting: resourceCatalog.isRequesting,
|
|
organization: organization?.data?.rows || [],
|
|
};
|
|
}
|
|
export default connect(mapStateToProps)(LatestMetadata)
|
|
|
|
function GetRequest(search) {
|
|
let url = search; //获取url中"?“符后的字串
|
|
let theRequest = new Object();
|
|
if (url.indexOf("?") != -1) {
|
|
let str = url.substr(1);
|
|
let strs = str.split("&");
|
|
for (let i = 0; i < strs.length; i++) {
|
|
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
|
|
}
|
|
}
|
|
return theRequest;
|
|
}
|