Skip to content

S
szse
Commit 19e3afba by zhaochengxiang
Options

增加主数据

parent e438fccc
Showing with 2092 additions and 1 deletion
package.json
...@@ -77,6 +77,6 @@ ...@@ -77,6 +77,6 @@
"last 1 safari version" "last 1 safari version"
] ]
}, },
"proxy": "http://139.198.126.96:8089", "proxy": "http://192.168.0.111:8189",
"homepage": "http://myhost/data-govern" "homepage": "http://myhost/data-govern"
} }
src/App.js
...@@ -27,6 +27,8 @@ const AssetTree = loadable(()=> import('./view/Manage/AssetManage/Component/Asse ...@@ -27,6 +27,8 @@ const AssetTree = loadable(()=> import('./view/Manage/AssetManage/Component/Asse
const DataService = loadable(()=> import('./view/Manage/Model')); const DataService = loadable(()=> import('./view/Manage/Model'));
const DataServiceDetail = loadable(()=> import('./view/Manage/Model/Component/ServiceDetail')); const DataServiceDetail = loadable(()=> import('./view/Manage/Model/Component/ServiceDetail'));
const GrantedDataServiceList = loadable(()=> import('./view/Manage/Model/Component/GrantedList')); const GrantedDataServiceList = loadable(()=> import('./view/Manage/Model/Component/GrantedList'));
const DataMasterDefine = loadable(()=> import('./view/Manage/DataMaster/Define'));
const DataMasterManage = loadable(()=> import('./view/Manage/DataMaster/Manage'));
export class App extends React.Component { export class App extends React.Component {
constructor() { constructor() {
...@@ -177,6 +179,8 @@ export class App extends React.Component { ...@@ -177,6 +179,8 @@ export class App extends React.Component {
<Route path={'/center-home/menu/asset-resource-browse'} component={AssetResourceBrowse} exact /> <Route path={'/center-home/menu/asset-resource-browse'} component={AssetResourceBrowse} exact />
<Route path={'/center-home/menu/asset-browse'} component={AssetBrowse} exact /> <Route path={'/center-home/menu/asset-browse'} component={AssetBrowse} exact />
<Route path={'/center-home/menu/asset-recycle'} component={AssetRecycle} exact /> <Route path={'/center-home/menu/asset-recycle'} component={AssetRecycle} exact />
<Route path={'/center-home/menu/msd-define'} component={DataMasterDefine} exact />
<Route path={'/center-home/menu/msd-manage'} component={DataMasterManage} exact />
<Route path={'/center-home/asset-detail'} component={AssetDetailPage} exact /> <Route path={'/center-home/asset-detail'} component={AssetDetailPage} exact />
</Switch> </Switch>
</Router> </Router>
......
src/routes.js
...@@ -35,6 +35,14 @@ export const routes = [ ...@@ -35,6 +35,14 @@ export const routes = [
name: 'data-service', name: 'data-service',
text: '服务管理', text: '服务管理',
}, },
{
name: 'msd-define',
text: '主数据定义'
},
{
name: 'msd-manage',
text: '主数据管理'
},
] ]
} }
]; ];
......
src/view/Manage/DataMaster/Define/Component/DefineTable.jsx 0 → 100644
import { useEffect, useMemo, useState } from 'react';
import { Space, Button, Input, Pagination, Tooltip } from 'antd';
import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
import ResizeableTable from '../../../ResizeableTable';
import DebounceInput from '../../../Model/Component/DebounceInput';
import { UpdateTemplateModal } from './UpdateTemplateModal';
import { inputWidth, showMessage } from '../../../../../util';
import './DefineTable.less';
import 'react-contexify/dist/ReactContexify.css';
import { dispatch } from '../../../../../model';
const InputDebounce = DebounceInput(300)(Input);
const DefineTable = (props) => {
const {nodeId} = props;
const [keyword, setKeyword] = useState('');
const [checkedKeys, setCheckedKeys] = useState([]);
const [isTemplateModalVisible, setIsTemplateModalVisible] = useState(false);
const [currentTemplate, setCurrentTemplate] = useState({});
const [action, setAction] = useState('');
const [loading, setLoading] = useState(false);
const [deleteLoading, setDeleteLoading] = useState(false);
const [tableData, setTableData] = useState([]);
const [total, setTotal] = useState(0);
const [pagination, setPagination] = useState({pageNum: 1, pageSize: 20});
const {pageNum, pageSize} = pagination;
useEffect(() => {
setCheckedKeys([]);
setPagination({...pagination, pageNum: 1});
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [nodeId])
useEffect(() => {
if (!nodeId || nodeId==='') {
setTableData([]);
setTotal(0);
} else {
getTemplates();
}
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [keyword, pagination])
const columns = useMemo(() => {
return ([
{
title: '序号',
dataIndex: 'key',
render: (text, record, index) => {
return (index+1).toString();
},
width: 60,
ellipsis: true,
},
{
title: '模版名称',
dataIndex: 'name',
width: 200,
ellipsis: true,
render: (text, record, index) => {
return <a onClick={() => {onItemClick(record);}}>{text}</a>
},
},
{
title: '模版中文名称',
dataIndex: 'cnName',
width: 200,
ellipsis: true,
},
{
title: '修改时间',
dataIndex: 'lastUpdateTime',
width: 200,
ellipsis: true,
},
{
title: '模版描述',
dataIndex: 'comment',
width: 200,
ellipsis: true,
}
]);
}, []);
const MENU_ID = 'data-master-table-contextmenu';
const { show } = useContextMenu({
id: MENU_ID,
});
const getTemplates = () => {
setLoading(true);
dispatch({
type: 'msd.getModels',
payload: {
params: {
nodeId,
keyword,
pageNum,
pageSize
}
},
callback: (data) => {
setLoading(false);
setTableData(data?.content||[]);
setTotal(data?.totalElements||0);
},
error: () => {
setLoading(false);
}
});
}
const onAddClick = () => {
setAction('add');
setCurrentTemplate(null);
setIsTemplateModalVisible(true);
}
const onItemClick = (record) => {
setAction('detail');
setCurrentTemplate(record);
setIsTemplateModalVisible(true);
}
const onTemplateModalCancel = (refresh = false) => {
setIsTemplateModalVisible(false);
if (refresh) {
getTemplates();
}
}
const onBatchDeleteClick = () => {
setDeleteLoading(true);
dispatch({
type: 'msd.deleteModels',
payload: {
params: {
modelIds: (checkedKeys||[]).join(',')
}
},
callback: (data) => {
setDeleteLoading(false);
showMessage('success', '删除成功');
getTemplates();
},
error: () => {
setDeleteLoading(false);
}
});
}
const onSearchInputChange = (value) => {
setKeyword(value);
}
const onTableSelectChange = keys => {
setCheckedKeys(keys);
};
const handleItemClick = ({ event, props, data, triggerEvent }) => {
const key = event.currentTarget.id;
if (key === 'update') {
setAction('update');
setIsTemplateModalVisible(true);
}
}
const changeCurrent = (page,size) => {
setCheckedKeys([]);
setPagination({ pageNum: page, pageSize: size });
}
const rowSelection = {
selectedRowKeys: checkedKeys,
onChange: onTableSelectChange,
};
return (
<div className='data-master-table'>
<div className='data-master-header px-3'>
<Space>
<Space>
<Button onClick={onAddClick}>新建</Button>
</Space>
<Space>
<Tooltip title={(checkedKeys||[]).length===0?'请先选择模版':''}>
<Button onClick={onBatchDeleteClick} disabled={(checkedKeys||[]).length===0} loading={deleteLoading}>删除</Button>
</Tooltip>
</Space>
</Space>
<InputDebounce
placeholder="请输入关键字"
allowClear
value={keyword}
onChange={onSearchInputChange}
style={{ width: inputWidth, marginLeft: 'auto' }}
/>
</div>
<div className='data-master-content p-3'>
<ResizeableTable
loading={loading}
rowKey='_id'
rowSelection={rowSelection}
columns={columns}
dataSource={tableData}
onRow={(record) => {
return {
onContextMenu: event => {
setCurrentTemplate(record);
show(event);
},
};
}}
pagination={false}
scroll={{ y: 'calc(100vh - 94px - 32px - 57px - 24px - 39px - 36px)' }}
/>
<Pagination
size="small"
className="text-center mt-3"
showSizeChanger
showQuickJumper
onChange={changeCurrent}
onShowSizeChange={changeCurrent}
current={pageNum}
pageSize={pageSize}
defaultCurrent={1}
total={total}
showTotal={total => `共 ${total} 条`}
/>
</div>
<UpdateTemplateModal
action={action}
nodeId={nodeId}
template={currentTemplate}
visible={isTemplateModalVisible}
onCancel={onTemplateModalCancel}
/>
<RcMenu id={MENU_ID}>
<RcItem id="update" onClick={handleItemClick}>
编辑
</RcItem>
</RcMenu>
</div>
);
}
export default DefineTable;
\ No newline at end of file
src/view/Manage/DataMaster/Define/Component/DefineTable.less 0 → 100644
.data-master-table {
height: 100%;
.data-master-header {
display: flex;
flex: none;
height: 57px;
border-bottom: 1px solid #EFEFEF;
justify-content: space-between;
align-items: center;
}
}
\ No newline at end of file
src/view/Manage/DataMaster/Define/Component/DefineTree.jsx 0 → 100644
import {useEffect, useMemo, useState, useRef} from 'react';
import {Tooltip, Spin, AutoComplete, Tree, Modal} from 'antd';
import {PlusOutlined, ReloadOutlined} from '@ant-design/icons';
import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
import { dispatch } from '../../../../../model';
import {highlightSearchContentByTerms, showMessage} from '../../../../../util';
import UpdateDefineTreeNodeModal from './UpdateDefineTreeNodeModal';
import 'react-contexify/dist/ReactContexify.css';
import './DefineTree.less';
const {Option} = AutoComplete;
const DefineTree = (props) => {
const {onClick} = props;
const [loading, setLoading] = useState(false);
const [data, setData] = useState();
const [options, setOptions] = useState([]);
const [keyword, setKeyword] = useState('');
const [expandedKeys, setExpandedKeys] = useState([]);
const [selectedKeys, setSelectedKeys] = useState([]);
const [autoExpandParent, setAutoExpandParent] = useState(false);
const [updateNodeModalVisible, setUpdateNodeModalVisible] = useState(false);
const [updateNodeType, setUpdateNodeType] = useState('');
const [rightSelectNode, setRightSelectNode] = useState({});
const selectedKeysRef = useRef([]);
const [modal, contextHolder] = Modal.useModal();
const MENU_ID = 'msd-define-tree';
const { show } = useContextMenu({
id: MENU_ID,
});
useEffect(() => {
getTreeNodes();
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
const treeData = useMemo(() => {
const loop = (data) =>
(data||[]).map((item) => {
if (item.children) {
return {
title: item.name||'',
key: item._id||'',
origin: item,
children: loop(item.children),
};
}
return {
title: item.name||'',
key: item._id||'',
};
});
return loop(data);
}, [data])
const treeList = useMemo(() => {
const generateList = (data, list, path = null) => {
(data||[]).forEach(node => {
const {_id, name} = node;
const currentPath = path ? `${path}/${name}` : name;
list.push({key: _id, title: currentPath});
if (node.children) {
generateList(node.children, list, currentPath);
}
});
};
const newTreeList = [];
generateList(data, newTreeList);
return newTreeList;
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [data])
const selectNode = useMemo(() => {
const generateList = (data, list) => {
(data||[]).forEach(node => {
list.push({...node});
if (node.children) {
generateList(node.children, list);
}
});
};
const newTreeList = [];
generateList(data, newTreeList);
const filterNodes = newTreeList.filter(item => selectedKeys.indexOf(item._id)!==-1);
return (filterNodes||[]).length>0 ? filterNodes[0]:{};
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [data, selectedKeys])
const getTreeNodes = () => {
setLoading(true);
dispatch({
type: 'msd.getTreeNodes',
callback: (data) => {
setLoading(false);
setData(data||[]);
if ((selectedKeysRef.current||[]).length===0 && (data||[]).length>0) {
onTreeSelect([data[0]._id]);
}
if ((expandedKeys||[]).length===0 && (data||[]).length>0) {
setExpandedKeys([data[0]._id]);
} else {
setExpandedKeys(Array.from(new Set([...expandedKeys, ...selectedKeysRef.current])));
setAutoExpandParent(true);
}
},
error: () => {
setLoading(false);
}
})
}
const onAddClick = () => {
setUpdateNodeType('add');
setUpdateNodeModalVisible(true);
}
const onRefreshClick = () => {
getTreeNodes();
}
const updateNode = () => {
setUpdateNodeType('update');
setUpdateNodeModalVisible(true);
}
const upOrDownNode = (steps = 1) => {
setLoading(true);
dispatch({
type: 'msd.treeNodeSeq',
payload: {
params: {
id: rightSelectNode?._id||'',
steps
}
},
callback: () => {
rightSelectNode?._id && onTreeSelect([rightSelectNode?._id]);
getTreeNodes();
},
error: () => {
setLoading(false);
}
})
}
const deleteNode = () => {
modal.confirm({
title: '提示!',
content: '删除目录会删除相关的模版,您确定删除吗?',
onOk: () => {
setLoading(true);
dispatch({
type: 'msd.deleteTreeNode',
payload: {
params: {
nodeId: rightSelectNode?._id
}
},
callback: () => {
showMessage('success', '删除目录成功');
setLoading(false);
if (selectedKeysRef.current.indexOf(rightSelectNode?._id)!==-1) {
setSelectedKeys([]);
selectedKeysRef.current = [];
}
getTreeNodes();
},
error: () => {
setLoading(false);
}
});
}
});
}
const onAutoCompleteSearch = (searchText) => {
setKeyword(searchText);
setOptions(treeList.filter(item => item.title.indexOf(searchText)!==-1));
};
const onAutoCompleteSelect = (value, option) => {
const paths = value.split('/');
setKeyword(paths[paths.length-1]);
onTreeSelect([option.key]);
setExpandedKeys(Array.from(new Set([...expandedKeys, option.key])));
setAutoExpandParent(true);
};
const onAutoCompleteClear = () => {
setKeyword('');
}
const onTreeExpand = (expandedKeys) => {
setExpandedKeys(expandedKeys);
setAutoExpandParent(false);
}
const onTreeSelect = (selectedKeys) => {
if (selectedKeys.length === 0) {
return;
}
setSelectedKeys(selectedKeys);
selectedKeysRef.current = selectedKeys;
onClick && onClick(selectedKeys[0]);
}
const onUpdateNodeModalCancel = (refresh = false, nodeId = null) => {
setUpdateNodeModalVisible(false);
if (refresh) {
nodeId && onTreeSelect([nodeId]);
getTreeNodes();
}
}
return (
<div className='data-master-tree'>
<div className='header p-3'>
<Tooltip title="新增目录">
<PlusOutlined
className='default'
onClick={onAddClick}
style={{
fontSize:16,
cursor:'pointer',
flex: 1
}}
/>
</Tooltip>
<Tooltip title="刷新目录" className='ml-2'>
<ReloadOutlined
className='default'
onClick={onRefreshClick}
style={{
fontSize:16,
cursor:'pointer',
flex: 1
}}
/>
</Tooltip>
<div style={{flex: 3}} />
</div>
<div className='content p-3'>
<Spin spinning={loading}>
<AutoComplete
className='content-search'
allowClear
value={keyword}
onSelect={onAutoCompleteSelect}
onSearch={onAutoCompleteSearch}
onClear={onAutoCompleteClear}
>
{
(options||[]).map((item, index) => {
return (
<Option key={item.key} value={item.title}>
<div style={{ whiteSpace: 'normal' }}>
{highlightSearchContentByTerms(item.title, [keyword])}
</div>
</Option>
);
})
}
</AutoComplete>
<Tree
className='content-tree'
showLine
showIcon={false}
autoExpandParent={autoExpandParent}
treeData={treeData}
onExpand={onTreeExpand}
onSelect={onTreeSelect}
expandedKeys={expandedKeys}
selectedKeys={selectedKeys}
onRightClick={({event, node}) => {
setRightSelectNode(node?.origin);
show(event, {
position: {
x: event.clientX + 30,
y: event.clientY - 10
}
});
}}
/>
</Spin>
</div>
<UpdateDefineTreeNodeModal
visible={updateNodeModalVisible}
onCancel={onUpdateNodeModalCancel}
type={updateNodeType}
node={(updateNodeType==='add')?selectNode:rightSelectNode}
/>
<RcMenu id={MENU_ID}>
<RcItem id="edit" onClick={updateNode}>
修改目录
</RcItem>
<RcItem id="up" onClick={() => { upOrDownNode(-1); }}>
上移目录
</RcItem>
<RcItem id="down" onClick={() => { upOrDownNode(1); }}>
下移目录
</RcItem>
<RcItem id="delete" onClick={deleteNode}>
删除目录
</RcItem>
</RcMenu>
{contextHolder}
</div>
);
}
export default DefineTree;
\ No newline at end of file
src/view/Manage/DataMaster/Define/Component/DefineTree.less 0 → 100644
@import '../../../../../variables.less';
.data-master-tree {
height: 100%;
.header {
display: inline-flex;
flex: none;
width: 100%;
height: 57px;
justify-content: flex-start;
align-items: center;
border-bottom: 1px solid #EFEFEF;
}
.content-search {
margin-bottom: 10px;
width: 100%;
}
.content-tree {
height: calc(100vh - @header-height - @breadcrumb-height - 25px - 57px - 66px);
overflow: auto;
}
}
\ No newline at end of file
src/view/Manage/DataMaster/Define/Component/UpdateBasicInfo.jsx 0 → 100644
import { Form, Input, Row, Col, Descriptions } from "antd";
const { TextArea } = Input;
const UpdateBasicInfo = (props) => {
const {form, editable, template} = props;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 18 },
},
};
return (
<div>
<h3>基本信息</h3>
{
editable ? <Form
form={form}
{...formItemLayout}
>
<Row gutter={10}>
<Col xs={24} sm={24} lg={12}>
<Form.Item label='中文名称' name='cnName' rules={[{ required: true, message: '请填写模版中文名称' }]}>
<Input />
</Form.Item>
</Col>
<Col xs={24} sm={24} lg={12}>
<Form.Item label='英文名称' name='name' rules={[{ required: true, message: '请填写模版名称' }]}>
<Input />
</Form.Item>
</Col>
<Col xs={24} sm={24} lg={12}>
<Form.Item label='模版描述' name='comment'>
<TextArea rows={4} />
</Form.Item>
</Col>
</Row>
</Form> : <Descriptions column={2}>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>中文名称</div>} >{template?.cnName||''}</Descriptions.Item>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>英文名称</div>}>{template?.name||''}</Descriptions.Item>
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>模版描述</div>}>{template?.comment||''}</Descriptions.Item>
</Descriptions>
}
</div>
);
}
export default UpdateBasicInfo;
\ No newline at end of file
src/view/Manage/DataMaster/Define/Component/UpdateDefineTreeNodeModal.jsx 0 → 100644
import { useState, useEffect } from 'react';
import { Modal, Form } from 'antd';
import UpdateNodeForm from './UpdateNodeForm';
import { dispatch } from '../../../../../model';
const UpdateDefineTreeNodeModal = (props) => {
const {visible, onCancel, type, node} = props;
const [confirmLoading, setConfirmLoading] = useState(false);
const [form] = Form.useForm();
useEffect(() => {
if (visible) {
if (type === 'add') {
form.setFieldsValue({action: node ? 'sub' : 'root', name: '', comment: ''});
} else {
form.setFieldsValue({action: '', name: node?.name||'', comment: node?.comment||''});
}
}
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [visible, node, type])
const handleCancel = () => {
setConfirmLoading(false);
form.setFields([{ name: 'name', errors: [] }, { name: 'comment', errors: [] }]);
onCancel && onCancel();
}
const handleOk = async () => {
setConfirmLoading(true);
try {
const values = await form.validateFields();
let payload = null;
if (type === 'add') {
payload = {
name: values.name||'',
comment: values.comment||'',
parentId: (values.action==='root')?'root':node?._id
};
} else {
payload = {
...node,
name: values.name||'',
comment: values.comment||'',
}
}
let url = (type === 'add')?'msd.addTreeNode':'msd.updateTreeNode';
dispatch({
type: url,
payload: {
data: payload
},
callback: id => {
setConfirmLoading(false);
onCancel && onCancel(true, id);
},
error: () => {
setConfirmLoading(false);
}
});
} catch (errInfo) {
setConfirmLoading(false);
}
}
return (
<Modal
confirmLoading={confirmLoading}
visible={visible}
title={type==='add'?"新增目录":"更新目录"}
onOk={handleOk}
onCancel={handleCancel}
>
<UpdateNodeForm type={type} node={node} form={form} />
</Modal>
);
}
export default UpdateDefineTreeNodeModal;
\ No newline at end of file
src/view/Manage/DataMaster/Define/Component/UpdateNodeForm.jsx 0 → 100644
import { useMemo } from "react";
import { Form, Input, Radio } from 'antd';
const UpdateNodeForm = (props) => {
const {form, type, node} = props;
const radioDisable = useMemo(() => {
return !node;
}, [node])
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 18 },
},
};
return (
<Form
{...formItemLayout}
form={form}
>
{
type==='add'&&<Form.Item label="目录类型" name="action">
<Radio.Group disabled={radioDisable} >
<Radio value='root'>根目录</Radio>
<Radio value='sub'>子目录</Radio>
</Radio.Group>
</Form.Item>
}
<Form.Item
label="名称"
name="name"
rules={[{ required: true, message: '请输入名称!' }]}
>
<Input />
</Form.Item>
<Form.Item
label="描述"
name="comment"
rules={[{ required: true, message: '请输入描述!' }]}
>
<Input />
</Form.Item>
</Form>
);
}
export default UpdateNodeForm;
\ No newline at end of file
src/view/Manage/DataMaster/Define/Component/UpdateTemplateModal.jsx 0 → 100644
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { Modal, Form, Button } from "antd";
import UpdateBasicInfo from "./UpdateBasicInfo";
import UpdateField from "./UpdateField";
import { showMessage } from '../../../../../util';
import { dispatch } from '../../../../../model';
import './UpdateTemplateModal.less';
export const EditTemplateContext = React.createContext({
attrIsEditingFunction: null,
});
export const UpdateTemplateModal = (props) => {
const { visible, onCancel, action = 'add', template, nodeId } = props;
const [form] = Form.useForm();
const [fields, setFields] = useState([]);
const [confirmLoading, setConfirmLoading] = useState(false);
const attrIsEditingRef = useRef(false);
useEffect(() => {
if (visible) {
form?.setFieldsValue({name: template?.name||'', cnName: template?.cnName||'', comment: template?.comment||''});
setFields([]);
}
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [visible])
const title = useMemo(() => {
if (action === 'add') {
return '新建模版';
}
if (action === 'detail') {
return '模版详情';
}
if (action === 'update') {
return '编辑模版';
}
return '';
}, [action])
const attrIsEditingFunction = (value) => {
attrIsEditingRef.current = value;
}
const onFieldChange = (values) => {
setFields(values);
}
const save = (e) => {
e.stopPropagation();
if (attrIsEditingRef.current) {
showMessage("warn", '还有字段正在编辑，需先保存该字段!');
} else {
saveLogic();
}
}
const saveLogic = async () => {
try {
const row = await form.validateFields();
if ((fields||[]).length === 0) {
showMessage('warn', '请新增字段');
return;
}
setConfirmLoading(true);
let url = '', newTemplate = {};
if (action === 'add') {
url = 'msd.addModel';
newTemplate = {...row, nodeId: nodeId||''};
} else {
url = 'msd.updateModel';
newTemplate = {...template, ...row}
}
dispatch({
type: url,
payload: {
data: newTemplate
},
callback: id => {
(fields||[]).forEach((field, index) => {
field.parentId = id;
field.seq = index;
});
dispatch({
type: 'msd.saveColumns',
payload: {
params: {
modelId: id
},
data: fields
},
callback: () => {
setConfirmLoading(false);
onCancel && onCancel(true);
},
error: () => {
setConfirmLoading(false);
}
});
},
error: () => {
setConfirmLoading(false);
}
});
} catch (errInfo) {
console.log('Validate Failed:', errInfo);
}
}
return (
<EditTemplateContext.Provider value={{
attrIsEditingFunction,
}}>
<Modal
forceRender
className='update-template-modal'
width='80%'
title={title}
visible={visible}
onCancel={() => {onCancel && onCancel();}}
onOk={save}
footer={[
<Button key="cancel" onClick={() => {onCancel && onCancel();}}>
取消
</Button>,
action!=='detail' && <Button
key="ok"
type="primary"
loading={confirmLoading}
onClick={save}
>
确定
</Button>,
]}
>
<UpdateBasicInfo form={form} editable={action!=='detail'} template={template} />
<UpdateField editable={action!=='detail'} template={template} onChange={onFieldChange} visible={visible} />
</Modal>
</EditTemplateContext.Provider>
);
}
src/view/Manage/DataMaster/Define/Component/UpdateTemplateModal.less 0 → 100644
.update-template-modal {
.yy-modal-body {
max-height: 70vh;
overflow: auto;
}
.dynamic-delete-button {
position: relative;
top: 4px;
margin: 0 8px;
color: #999;
font-size: 24px;
cursor: pointer;
transition: all 0.3s;
}
.dynamic-delete-button:hover {
color: #777;
}
}
\ No newline at end of file
src/view/Manage/DataMaster/Define/index.jsx 0 → 100644
import { useMemo, useState } from 'react';
import classNames from 'classnames';
import { ResizableBox } from 'react-resizable';
import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
import DefineTree from './Component/DefineTree';
import DefineTable from './Component/DefineTable';
import './index.less';
const DataMasterDefine = (props) => {
const [collapse, setCollapse] = useState(false);
const [nodeId, setNodeId] = useState('');
const classes = useMemo(() => {
return classNames('data-master', {
'data-master-collapse': collapse,
});
}, [collapse]);
const onTreeClick = (value) => {
setNodeId(value);
}
const onCollapseClick = () => {
setCollapse(!collapse);
}
return (
<div className={classes}>
<ResizableBox
className='left-wrap'
width={230}
height={Infinity}
axis='x'
minConstraints={[230, Infinity]} maxConstraints={[Infinity, Infinity]}
>
<DefineTree onClick={onTreeClick} />
</ResizableBox>
<div className='left-collapse-wrap'>
<div className='left-collapse' onClick={onCollapseClick}>
{ collapse ? <CaretRightOutlined /> : <CaretLeftOutlined /> }
</div>
</div>
<div className='right-wrap'>
<DefineTable nodeId={nodeId} />
</div>
</div>
)
}
export default DataMasterDefine;
\ No newline at end of file
src/view/Manage/DataMaster/Define/index.less 0 → 100644
.data-master {
display: flex;
flex: auto;
height: 100%;
background-color: #fff;
.left-wrap {
flex: none;
overflow: hidden;
height: 100%;
border-right: 1px solid #EFEFEF;
}
.left-collapse-wrap {
flex: none;
position: relative;
width: 20px;
height: 100%;
.left-collapse {
display: inline-flex;
justify-content: center;
align-items: center;
left: 0;
right: 0;
background: #f2f5fc;
position: absolute;
top: calc(50% - 40px);
width: 12px;
height: 80px;
border-radius: 0 12px 12px 0;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
}
}
.right-wrap {
flex: 1;
overflow: hidden;
height: 100%;
}
}
.data-master-collapse {
.left-wrap {
width: 0 !important;
}
}
\ No newline at end of file
src/view/Manage/DataMaster/Manage/Component/ImportDataDrawer.jsx 0 → 100644
import React, { useState, useEffect } from 'react';
import { Button, Upload, Drawer, Pagination, Form, Spin } from 'antd';
import { UploadOutlined, DownloadOutlined } from '@ant-design/icons';
import ResizeableTable from '../../../ResizeableTable';
import { dispatch, dispatchLatest } from '../../../../../model';
import { showMessage, formatDate } from '../../../../../util';
const ExpandedRow = (props) => {
const {data} = props;
const [loading, setLoading] = useState(false);
const [log, setLog] = useState({});
useEffect(() => {
getLog();
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [data])
const getLog = () => {
setLoading(true);
dispatch({
type: 'msd.importLog',
payload: {
logId: data?.id
},
callback: data => {
setLoading(false);
setLog(data||{});
},
error: () => {
setLoading(false);
}
})
}
return <Spin spinning={loading}>
<p style={{ margin: 0 }}>{log?.message||''}</p>
</Spin>
}
const ImportDataDrawer = (props) => {
const { onCancel, onSuccess, visible, nodeId } = props;
const [ fileList, setFileList ] = useState([]);
const [ confirmLoading, setConfirmLoading ] = useState(false);
const [ loading, setLoading ] = useState(false);
const [ logs, setLogs ] = useState([]);
const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } );
const { pageNum, pageSize } = pagination;
const [ total, setTotal ] = useState(0);
const columns = [
{
title: '序号',
dataIndex: 'key',
render: (text, record, index) => {
return (index+1).toString();
},
width: 60,
ellipsis: true,
},
{
title: '开始时间',
dataIndex: 'startTime',
width: 170,
ellipsis: true,
render: (_, record, __) => {
return formatDate(record.startTime);
}
},
{
title: '结束时间',
dataIndex: 'endTime',
width: 170,
ellipsis: true,
render: (_, record, __) => {
return formatDate(record.endTime);
}
},
{
title: '耗时',
dataIndex: 'costTime',
width: 100,
ellipsis: true,
render: (_, record, __) => {
return record.costTime?`${Number(record.costTime/1000)}秒`:'';
}
},
{
title: '导入人',
dataIndex: 'operator',
width: 100,
ellipsis: true,
render: (text, record, __) => {
return text.split(':')[0];
}
},
{
title: '导入状态',
dataIndex: 'state',
width: 100,
ellipsis: true,
}
]
useEffect(() => {
if (visible) {
setPagination({ pageNum: 1, pageSize: 20 });
}
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [visible])
useEffect(() => {
if (visible) {
getLogs();
}
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [pagination])
const getLogs = () => {
setLoading(true);
dispatch({
type: 'msd.importLogs',
payload: {
modelId: nodeId,
page: pageNum,
size: pageSize
},
callback: data => {
setLoading(false);
setTotal(data.totalElements);
setLogs(data.content||[]);
},
error: () => {
setLoading(false);
}
})
}
const onRefreshClick = () => {
getLogs();
}
const changeCurrent = (page,size) => {
setPagination({ pageNum: page, pageSize: size });
}
const downloadTemplate = () => {
window.open(`/api/metadatarepo/rest/msdMgr/exportTemplate?modelId=${nodeId}`);
}
const uploadProps = {
onRemove: file => {
const index = fileList.indexOf(file);
const newFileList = fileList.slice();
newFileList.splice(index, 1);
setFileList(newFileList);
},
beforeUpload: file => {
setFileList([file]);
return false;
},
fileList: fileList || [],
accept: ".xlsx",
};
const handleOk = () => {
if ((fileList || []).length === 0) {
showMessage('info', '请先选择Excel文件上传');
return;
}
setConfirmLoading(true);
dispatchLatest({
type: 'msd.importData',
payload: {
params: {
modelId: nodeId,
},
fileList
},
callback: data => {
setConfirmLoading(false);
setFileList([]);
getLogs();
onSuccess && onSuccess();
},
error: () => {
setConfirmLoading(false);
}
})
}
const reset = () => {
setConfirmLoading(false);
setFileList([]);
}
return (
<Drawer
forceRender
visible={ visible }
title='主数据导入'
width={1000}
placement="right"
closable={ true }
onClose={() => {
reset();
onCancel && onCancel();
}}
>
<div className='mt-3'>
<Form layout='inline'>
<Form.Item label='Excel上传:'>
<Upload style={{ display: 'inline' }} {...uploadProps }>
<Button icon={
<UploadOutlined />}>
选择文件上传
</Button>
</Upload>
</Form.Item>
<Form.Item>
<Button type='primary' onClick={handleOk} loading={confirmLoading}>确定导入</Button>
</Form.Item>
<Form.Item>
<Button icon={<DownloadOutlined />} onClick={downloadTemplate }>
模版下载
</Button>
</Form.Item>
</Form>
</div>
<div className='d-flex my-3' style={{ justifyContent: 'space-between', alignItems: 'center' }}>
<h3 style={{ marginBottom: 0 }}>导入日志</h3>
<Button onClick={onRefreshClick}>刷新</Button>
</div>
<ResizeableTable
className='mt-3'
columns={columns}
rowKey={'id'}
dataSource={logs||[]}
pagination={false}
loading={loading}
expandable={{
expandedRowRender: record => <ExpandedRow data={record} />
}}
sticky
/>
<Pagination
className="text-center mt-3"
showSizeChanger
showQuickJumper
onChange={changeCurrent}
onShowSizeChange={changeCurrent}
current={pageNum}
pageSize={pageSize}
defaultCurrent={1}
total={total}
pageSizeOptions={[10,20]}
showTotal={total => `共 ${total} 条`}
/>
</Drawer>
)
}
export default ImportDataDrawer;
\ No newline at end of file
src/view/Manage/DataMaster/Manage/Component/ManageTable.jsx 0 → 100644
import { useMemo, useState, useEffect } from 'react';
import { Space, Button, Input, Pagination, Tooltip } from 'antd';
import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
import ResizeableTable from '../../../ResizeableTable';
import DebounceInput from '../../../Model/Component/DebounceInput';
import UpdateDataMasterModal from './UpdateDataMasterModal';
import ImportDataDrawer from './ImportDataDrawer';
import { inputWidth, showMessage } from '../../../../../util';
import { dispatch } from '../../../../../model';
import '../../Define/Component/DefineTable.less';
import 'react-contexify/dist/ReactContexify.css';
const InputDebounce = DebounceInput(300)(Input);
const ManageTable = (props) => {
const {nodeId} = props;
const [keyword, setKeyword] = useState('');
const [checkedKeys, setCheckedKeys] = useState([]);
const [isDataMasterModalVisible, setIsDataMasterModalVisible] = useState(false);
const [currentData, setCurrentData] = useState(null);
const [action, setAction] = useState('');
const [loading, setLoading] = useState(false);
const [deleteLoading, setDeleteLoading] = useState(false);
const [fields, setFields] = useState([]);
const [tableData, setTableData] = useState([]);
const [total, setTotal] = useState(0);
const [pagination, setPagination] = useState({pageNum: 1, pageSize: 20});
const [importDataDrawerVisible, setImportDataDrawerVisible] = useState(false);
const {pageNum, pageSize} = pagination;
const columns = useMemo(() => {
const newColumns = [
{
title: '序号',
dataIndex: 'key',
render: (text, record, index) => {
return (index+1).toString();
},
width: 60,
ellipsis: true,
}
];
(fields||[]).forEach(item => {
newColumns.push({
title: item.name,
dataIndex: item.name,
width: 200,
ellipsis: true,
});
})
return newColumns;
}, [fields]);
const MENU_ID = 'data-master-manage-table-contextmenu';
const { show } = useContextMenu({
id: MENU_ID,
});
useEffect(() => {
setCheckedKeys([]);
setPagination({...pagination, pageNum: 1});
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [nodeId])
useEffect(() => {
if (!nodeId || nodeId==='') {
setFields([]);
setTableData([]);
setTotal(0);
} else {
getFiledsAndDatas();
}
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [keyword, pagination])
const getFiledsAndDatas = () => {
setLoading(true);
dispatch({
type: 'msd.getColumns',
payload: {
params: {
modelId: nodeId
}
},
callback: (data) => {
setFields(data||[]);
const newKeyList = [];
(data||[]).forEach(item => {
newKeyList.push(item.name||'');
});
dispatch({
type: 'msd.getDatas',
payload: {
params: {
modelId: nodeId,
keyList: newKeyList.join(','),
keyword,
pageNum,
pageSize
}
},
callback: (data) => {
setLoading(false);
setTableData(data?.content||[]);
setTotal(data?.totalElements||0);
},
error: () => {
setLoading(false);
}
});
},
error: () => {
setLoading(false);
}
});
}
const onAddClick = () => {
setAction('add');
setCurrentData(null);
setIsDataMasterModalVisible(true);
}
const onImportClick = () => {
setImportDataDrawerVisible(true);
}
const onDataMasterModalCancel = (refresh = false) => {
setIsDataMasterModalVisible(false);
if (refresh) {
getFiledsAndDatas();
}
}
const onBatchDeleteClick = () => {
setDeleteLoading(true);
dispatch({
type: 'msd.deleteDatas',
payload: {
data: checkedKeys||[]
},
callback: (data) => {
setDeleteLoading(false);
showMessage('success', '删除成功');
getFiledsAndDatas();
},
error: () => {
setDeleteLoading(false);
}
});
}
const onSearchInputChange = (value) => {
setKeyword(value);
}
const onTableSelectChange = keys => {
setCheckedKeys(keys);
};
const handleItemClick = ({ event, props, data, triggerEvent }) => {
const key = event.currentTarget.id;
if (key === 'detail') {
setAction('detail');
setIsDataMasterModalVisible(true);
} if (key === 'update') {
setAction('update');
setIsDataMasterModalVisible(true);
}
}
const changeCurrent = (page,size) => {
setCheckedKeys([]);
setPagination({ pageNum: page, pageSize: size });
}
const onImportDataDrawerCancel = () => {
setImportDataDrawerVisible(false);
}
const onImportDataSuccess = () => {
getFiledsAndDatas();
}
const rowSelection = {
selectedRowKeys: checkedKeys,
onChange: onTableSelectChange,
};
return (
<div className='data-master-table'>
<div className='data-master-header px-3'>
<Space>
<Space>
<Button onClick={onAddClick}>新建</Button>
</Space>
<Space>
<Button onClick={onImportClick}>导入</Button>
</Space>
<Space>
<Tooltip title={(checkedKeys||[]).length===0?'请先选择主数据':''}>
<Button onClick={onBatchDeleteClick} disabled={(checkedKeys||[]).length===0} loading={deleteLoading}>删除</Button>
</Tooltip>
</Space>
</Space>
<InputDebounce
placeholder="请输入关键字"
allowClear
value={keyword}
onChange={onSearchInputChange}
style={{ width: inputWidth, marginLeft: 'auto' }}
/>
</div>
<div className='data-master-content p-3'>
<ResizeableTable
rowKey='_id'
loading={loading}
rowSelection={rowSelection}
columns={columns}
dataSource={tableData}
onRow={(record) => {
return {
onContextMenu: event => {
setCurrentData(record);
show(event);
},
};
}}
pagination={false}
scroll={{ y: 'calc(100vh - 94px - 32px - 57px - 24px - 39px - 36px)' }}
/>
<Pagination
size="small"
className="text-center m-3"
showSizeChanger
showQuickJumper
onChange={changeCurrent}
onShowSizeChange={changeCurrent}
current={pageNum}
pageSize={pageSize}
defaultCurrent={1}
total={total}
showTotal={total => `共 ${total} 条`}
/>
</div>
<UpdateDataMasterModal
action={action}
data={currentData}
fields={fields}
nodeId={nodeId}
visible={isDataMasterModalVisible}
onCancel={onDataMasterModalCancel}
/>
<ImportDataDrawer
visible={importDataDrawerVisible}
nodeId={nodeId}
onCancel={onImportDataDrawerCancel}
onSuccess={onImportDataSuccess}
/>
<RcMenu id={MENU_ID}>
<RcItem id="detail" onClick={handleItemClick}>
详情
</RcItem>
<RcItem id="update" onClick={handleItemClick}>
编辑
</RcItem>
</RcMenu>
</div>
);
}
export default ManageTable;
\ No newline at end of file
src/view/Manage/DataMaster/Manage/Component/ManageTree.jsx 0 → 100644
import {useEffect, useMemo, useState, useRef} from 'react';
import {Tooltip, Spin, AutoComplete, Tree} from 'antd';
import {ReloadOutlined} from '@ant-design/icons';
import { dispatch } from '../../../../../model';
import {highlightSearchContentByTerms} from '../../../../../util';
import '../../Define/Component/DefineTree.less';
const {Option} = AutoComplete;
const ManageTree = (props) => {
const {onClick} = props;
const [loading, setLoading] = useState(false);
const [data, setData] = useState();
const [options, setOptions] = useState([]);
const [keyword, setKeyword] = useState('');
const [expandedKeys, setExpandedKeys] = useState([]);
const [selectedKeys, setSelectedKeys] = useState([]);
const [autoExpandParent, setAutoExpandParent] = useState(false);
const selectedKeysRef = useRef([]);
useEffect(() => {
getTreeNodes();
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
const treeData = useMemo(() => {
const loop = (data) =>
(data||[]).map((item) => {
if (item.children) {
return {
title: item.name||'',
key: item._id||'',
origin: item,
children: loop(item.children),
};
}
return {
title: item.name||'',
key: item._id||'',
};
});
return loop(data);
}, [data])
const treeList = useMemo(() => {
const generateList = (data, list, path = null) => {
(data||[]).forEach(node => {
const {_id, name} = node;
const currentPath = path ? `${path}/${name}` : name;
list.push({key: _id, title: currentPath});
if (node.children) {
generateList(node.children, list, currentPath);
}
});
};
const newTreeList = [];
generateList(data, newTreeList);
return newTreeList;
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [data])
const getTreeNodes = () => {
setLoading(true);
dispatch({
type: 'msd.getMgrTreeNodes',
callback: (data) => {
setLoading(false);
setData(data||[]);
const firstModelNodeId = findFirstModelNode(data||[]);
if ((selectedKeysRef.current||[]).length===0 && (data||[]).length>0) {
onTreeSelect([firstModelNodeId]);
}
if ((expandedKeys||[]).length===0 && (data||[]).length>0) {
setExpandedKeys([firstModelNodeId]);
setAutoExpandParent(true);
} else {
setExpandedKeys(Array.from(new Set([...expandedKeys, ...selectedKeysRef.current])));
setAutoExpandParent(true);
}
},
error: () => {
setLoading(false);
}
})
}
const onRefreshClick = () => {
getTreeNodes();
}
const onAutoCompleteSearch = (searchText) => {
setKeyword(searchText);
setOptions(treeList.filter(item => item.title.indexOf(searchText)!==-1));
};
const onAutoCompleteSelect = (value, option) => {
const paths = value.split('/');
setKeyword(paths[paths.length-1]);
if (isModelNode(option.key)) {
onTreeSelect([option.key]);
}
setExpandedKeys(Array.from(new Set([...expandedKeys, option.key])));
setAutoExpandParent(true);
};
const onAutoCompleteClear = () => {
setKeyword('');
}
const onTreeExpand = (expandedKeys) => {
setExpandedKeys(expandedKeys);
setAutoExpandParent(false);
}
const onTreeSelect = (selectedKeys, e = null) => {
if (selectedKeys.length === 0) {
return;
}
if (e && e?.node && !isModelNode(e?.node?.key)) {
return;
}
setSelectedKeys(selectedKeys);
selectedKeysRef.current = selectedKeys;
onClick && onClick(selectedKeys[0]);
}
const isModelNode = (value) => {
return ((value||'').indexOf('Model=') !== -1);
}
const findFirstModelNode = (values) => {
const generateList = (data, list) => {
(data||[]).forEach(node => {
list.push(node);
if (node.children) {
generateList(node.children, list);
}
});
};
const newTreeList = [];
generateList(values, newTreeList);
let firstModelNodeId = '';
newTreeList.some(item => {
if (isModelNode(item._id)) {
firstModelNodeId = item._id;
}
return isModelNode(item._id);
})
return firstModelNodeId;
}
return (
<div className='data-master-tree'>
<div className='header p-3'>
<Tooltip title="刷新目录" className='ml-2'>
<ReloadOutlined
className='default'
onClick={onRefreshClick}
style={{
fontSize:16,
cursor:'pointer',
flex: 1
}}
/>
</Tooltip>
<div style={{flex: 3}} />
</div>
<div className='content p-3'>
<Spin spinning={loading}>
<AutoComplete
className='content-search'
allowClear
value={keyword}
onSelect={onAutoCompleteSelect}
onSearch={onAutoCompleteSearch}
onClear={onAutoCompleteClear}
>
{
(options||[]).map((item, index) => {
return (
<Option key={item.key} value={item.title}>
<div style={{ whiteSpace: 'normal' }}>
{highlightSearchContentByTerms(item.title, [keyword])}
</div>
</Option>
);
})
}
</AutoComplete>
<Tree
className='content-tree'
showLine
showIcon={false}
autoExpandParent={autoExpandParent}
treeData={treeData}
onExpand={onTreeExpand}
onSelect={onTreeSelect}
expandedKeys={expandedKeys}
selectedKeys={selectedKeys}
/>
</Spin>
</div>
</div>
);
}
export default ManageTree;
\ No newline at end of file
src/view/Manage/DataMaster/Manage/Component/UpdateDataMasterModal.jsx 0 → 100644
import { useEffect, useState, useMemo } from "react";
import { Modal, Form, Input, Button, Descriptions } from "antd";
import { dispatch } from "../../../../../model";
import './UpdateDataMasterModal.less';
const UpdateDataMasterModal = (props) => {
const {visible, onCancel, data, fields, action = 'add', nodeId} = props;
const [confirmLoading, setConfirmLoading] = useState(false);
const [form] = Form.useForm();
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 18 },
},
};
useEffect(() => {
if (visible) {
let newFieldsValue = {};
(fields||[]).forEach(item => {
newFieldsValue[item.name] = data?data[item.name]:'';
});
form?.setFieldsValue(newFieldsValue);
}
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [visible, data, fields])
const title = useMemo(() => {
if (action === 'add') {
return '新建主数据';
}
if (action === 'detail') {
return '主数据详情';
}
if (action === 'update') {
return '编辑主数据';
}
return '';
}, [action])
const onFormFinish = async() => {
try {
const row = await form.validateFields();
setConfirmLoading(true);
let url = '', newData = {};
if (action === 'add') {
url = 'msd.addData';
newData = row;
} else {
url = 'msd.updateData';
newData = {...data, ...row};
}
dispatch({
type: url,
payload: {
params: {
modelId: nodeId,
},
data: newData
},
callback: () => {
setConfirmLoading(false);
onCancel && onCancel(true);
},
error: () => {
setConfirmLoading(false);
}
});
} catch (errInfo) {
console.log('Validate Failed:', errInfo);
}
}
return (
<Modal
className='update-data-master-modal'
title={title}
visible={visible}
onCancel={() => { onCancel && onCancel(false); }}
onOk={onFormFinish}
footer={[
<Button key="cancel" onClick={() => {onCancel && onCancel();}}>
取消
</Button>,
action!=='detail' && <Button
key="ok"
type="primary"
loading={confirmLoading}
onClick={onFormFinish}
>
确定
</Button>,
]}
>
{
(action!=='detail') ? <Form
form={form}
{...formItemLayout}
>
{
(fields||[]).map((item, index) => {
return (
<Form.Item key={index} label={item.name} name={item.name} rules={[{ required: false }]}>
<Input />
</Form.Item>
)
})
}
</Form> : <Descriptions column={1}>
{
(fields||[]).map((item, index) => {
return (
<Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>{item.name||''}</div>} >{data?data[item.name||'']:''}</Descriptions.Item>
);
})
}
</Descriptions>
}
</Modal>
);
}
export default UpdateDataMasterModal;
\ No newline at end of file
src/view/Manage/DataMaster/Manage/Component/UpdateDataMasterModal.less 0 → 100644
.update-data-master-modal {
.yy-modal-body {
max-height: 70vh;
overflow: auto;
}
}
\ No newline at end of file
src/view/Manage/DataMaster/Manage/index.jsx 0 → 100644
import { useMemo, useState } from 'react';
import classNames from 'classnames';
import { ResizableBox } from 'react-resizable';
import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
import ManageTree from './Component/ManageTree';
import ManageTable from './Component/ManageTable';
import '../Define/index.less';
const DataMasterManage = (props) => {
const [collapse, setCollapse] = useState(false);
const [nodeId, setNodeId] = useState('');
const classes = useMemo(() => {
return classNames('data-master', {
'data-master-collapse': collapse,
});
}, [collapse]);
const onTreeClick = (value) => {
setNodeId(value);
}
const onCollapseClick = () => {
setCollapse(!collapse);
}
return (
<div className={classes}>
<ResizableBox
className='left-wrap'
width={230}
height={Infinity}
axis='x'
minConstraints={[230, Infinity]} maxConstraints={[Infinity, Infinity]}
>
<ManageTree onClick={onTreeClick} />
</ResizableBox>
<div className='left-collapse-wrap'>
<div className='left-collapse' onClick={onCollapseClick}>
{ collapse ? <CaretRightOutlined /> : <CaretLeftOutlined /> }
</div>
</div>
<div className='right-wrap'>
<ManageTable nodeId={nodeId} />
</div>
</div>
)
}
export default DataMasterManage;
\ No newline at end of file
src/view/Manage/index.jsx
...@@ -11,6 +11,8 @@ import AssetResourceBrowse from './AssetResourceBrowse'; ...@@ -11,6 +11,8 @@ import AssetResourceBrowse from './AssetResourceBrowse';
import AssetBrowse from './AssetBrowse'; import AssetBrowse from './AssetBrowse';
import AssetRecycle from './AssetRecycle'; import AssetRecycle from './AssetRecycle';
import DataService from './Model'; import DataService from './Model';
import DataMasterDefine from "./DataMaster/Define";
import DataMasterManage from "./DataMaster/Manage";
class Manage extends Component { class Manage extends Component {
...@@ -31,6 +33,8 @@ class Manage extends Component { ...@@ -31,6 +33,8 @@ class Manage extends Component {
<Route path={`${match.path}/asset-browse`} component={AssetBrowse} /> <Route path={`${match.path}/asset-browse`} component={AssetBrowse} />
<Route path={`${match.path}/asset-recycle`} component={AssetRecycle} /> <Route path={`${match.path}/asset-recycle`} component={AssetRecycle} />
<Route path={`${match.path}/data-service`} component={DataService} /> <Route path={`${match.path}/data-service`} component={DataService} />
<Route path={`${match.path}/msd-define`} component={DataMasterDefine} />
<Route path={`${match.path}/msd-manage`} component={DataMasterManage} />
</Switch> </Switch>
) : ( ) : (
<GetSession {...this.props} /> <GetSession {...this.props} />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment