数据模型

.gitignore

@@ -10,6 +10,8 @@
 
 # production
 /build
+/data-govern
+/data-govern.zip
 
 # misc
 .DS_Store

src/App.js

@@ -8,6 +8,7 @@ import { ContextPath } from './util';
 import Signin from './view/Signin';
 import Home from './view/Home';
 import Manage from './view/Manage';
+import Map from './view/Manage/Map';
 
 export default class App extends React.Component {
   render() {
@@ -17,8 +18,8 @@ export default class App extends React.Component {
           <Switch>
             <Route path={`${ContextPath}/login`} component={Signin} exact />
             <Route path={`${ContextPath}/home`} component={Home} />
+            <Route path={`${ContextPath}/data-map`} component={Map} exact />
             <Route path={`${ContextPath}/manage`} component={Manage} />
-            <Route path={`${ContextPath}/manage`} exact component={() => <Redirect to={`${ContextPath}/manage/map`} />} />
             <Route component={() => <Redirect to={`${ContextPath}/login`} />}/>
           </Switch>
         </Router>

src/index.less

@@ -13,6 +13,10 @@ body {
   background-color: #fff;
 }
 
+#root {
+  height: 100%;
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
@@ -46,6 +50,10 @@ code {
   overflow: hidden;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 .d-flex {
   display: flex;
 }

src/routes.js

@@ -13,8 +13,12 @@ export const routes = [
     children: [
       {
         name: 'map',
-        text: '数据地图'
+        text: '数据地图',
       },
+      {
+        name: 'model',
+        text: '数据模型',
+      }
     ]
   }
 ];

src/view/Manage/Map/Component/Relation.jsx

@@ -169,7 +169,7 @@ class Relation extends React.Component {
             return 20;
           },
           getHGap: () => {
-            return 30;
+            return 40;
           },
           radial: true,
         },

src/view/Manage/Model/Component/Tree.jsx

+import React from "react";
+import { Tooltip, Tree, Spin, Empty, message } from "antd";
+import { PlusOutlined, EditOutlined, SyncOutlined, DeleteOutlined  } from '@ant-design/icons';
+
+import UpdateTreeItemModal from './UpdateTreeItemModal';
+
+const _treeData = [
+  {
+    title: 'parent 1',
+    key: '0-0',
+    children: [
+      {
+        title: 'parent 1-0',
+        key: '0-0-0',
+        children: [
+          {
+            title: 'leaf',
+            key: '0-0-0-0',
+          },
+          {
+            title: 'leaf',
+            key: '0-0-0-1',
+          },
+        ],
+      },
+      {
+        title: 'parent 1-1',
+        key: '0-0-1',
+        children: [
+          {
+            title: 'sss',
+            key: '0-0-1-0',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+class ModelTree extends React.Component {
+
+  constructor() {
+    super();
+    this.state = { 
+      loading: false,
+      treeData: _treeData,
+      item: null,
+      visible: false,
+      type: null
+    };
+  }
+
+  componentDidMount() {
+    this.getTreeData();
+  }
+
+  getTreeData = () => {
+    const { onSelect } = this.props;
+
+    this.setState({ loading: true }, () => {
+
+      this.setState({ loading: false, treeData: _treeData,  item: _treeData[0] }, () => {
+        if (onSelect) {
+          onSelect(_treeData[0].key);
+        }
+      });
+
+    })
+  }
+
+  onTreeSelect = (keys,data) => {
+    const { onSelect } = this.props;
+    const _item = {...data.selectedNodes[0]||[]};
+
+    this.setState({ item: _item }, () => {
+      if (onSelect) {
+        onSelect(_item.key);
+      }
+    });
+  }
+
+  add = () => {
+    this.setState({ visible: true, type: 'add' });
+  }
+
+  update = () => {
+
+    const { item } = this.state;
+    if (!item) {
+      message.info('请先选择目录');
+      return;
+    }
+
+    this.setState({ visible: true, type: 'update' });
+  }
+
+  refresh = () => {
+    this.getTreeData();
+  }
+
+  delete = () => {
+    const { item } = this.state;
+    if (!item) {
+      message.info('请先选择目录');
+      return;
+    }
+
+  }
+
+  onUpdateTreeItemModalOk = () => {
+    this.setState({ visible: false }, () => {
+      this.getTreeData();
+    })
+  }
+
+  onUpdateTreeItemModalCancel = () => {
+    this.setState({ visible: false });
+  }
+
+  render() {
+    const { loading, treeData, visible, type, item } = this.state;
+
+    return (
+      <>
+        <div
+          className='p-3'
+          style={{
+            display: 'flex',
+            borderBottom: "1px solid #EFEFEF",
+          }}
+        >
+          <Tooltip title={"新增目录"} placement="bottom">
+            <PlusOutlined 
+              style={{ fontSize: 18, cursor: "pointer" }}
+              onClick={this.add}
+            />
+          </Tooltip>
+          <Tooltip title={"修改"} placement="bottom">
+            <EditOutlined 
+              className='pl-3'
+              style={{ fontSize: 18, cursor: "pointer" }}
+              onClick={this.update}
+            />
+          </Tooltip>
+          <Tooltip title={"刷新"} placement="bottom">
+            <SyncOutlined 
+              className='pl-3'
+              style={{ fontSize: 18, cursor: "pointer" }}
+              onClick={this.refresh}
+            />
+          </Tooltip>
+          <Tooltip title={"删除"} placement="bottom">
+            <DeleteOutlined 
+              className='pl-3'
+              style={{ fontSize: 18, cursor: "pointer" }}
+              onClick={this.delete}
+            />
+          </Tooltip>
+        </div>
+        <div
+          className='overflow-auto p-3'
+        >
+          <Tree loading={loading} showLine showIcon={false} onSelect={this.onTreeSelect} treeData={treeData} selectedKeys={[item?item.key:'']} /> 
+        </div>
+        <UpdateTreeItemModal 
+          visible={visible} 
+          type={type}
+          item={item}
+          onOk={this.onUpdateTreeItemModalOk} 
+          onCancel={this.onUpdateTreeItemModalCancel} 
+          />
+      </>
+    );
+  }
+}
+
+export default ModelTree;
\ No newline at end of file

src/view/Manage/Model/Component/UpdateTreeItemModal.jsx

+import React from 'react'
+import { Modal, Form, Input, Select } from 'antd'
+
+const { Option } = Select;
+
+class UpdateTreeItemForm extends React.Component {
+
+  constructor(props){
+    super(props);
+    this.state = {
+      itemType: 'sub',
+      itemTypeSelectDisable: false
+    }
+  }
+
+  componentDidMount() {
+    const { type, item } = this.props;
+    if (type === 'add') {
+      if (item) {
+        this.setState({ itemType: 'sub', itemTypeSelectDisable: false });
+      } else {
+        this.setState({ itemType: 'root', itemTypeSelectDisable: true })
+      }
+    } else {
+      this.setState({ itemType: 'sub', itemTypeSelectDisable: true });
+    }
+  }
+
+  TreeItemTypeOnChange = (value) => {
+    this.setState({ itemType: value });
+  }
+
+  render() {
+    const { item, type } = this.props;
+    const { itemType, itemTypeSelectDisable } = this.state;
+
+    const formItemLayout = {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 },
+      },
+    };
+
+    return (
+      <Form 
+        {...formItemLayout}
+        initialValue={
+          type!=='add'?{
+            title: item?item.title:''
+          }:null
+        }
+      >
+        {
+          type==='add'&&<Form.Item label="目录类型">
+            <Select
+              value={itemType}
+              onChange={this.TreeItemTypeOnChange}
+              disabled={itemTypeSelectDisable}
+            >
+              <Option value="root">根目录</Option>
+              <Option value="sub">子目录</Option>
+            </Select>
+          </Form.Item>
+        }
+        <Form.Item 
+          label="名称" 
+          name="title"
+          rules={[{ required: true, message: '请输入名称!' }]}
+          >
+          <Input />
+        </Form.Item>
+      </Form>
+    );
+  }
+}
+
+class UpdateTreeItemModal extends React.Component {
+
+  constructor() {
+    super();
+    this.form = React.createRef();
+    this.state= {
+      confirmLoading: false
+    }
+  }
+
+  handleOk = () => {
+    const { onOk, item, type } = this.props;
+
+    this.setState({ confirmLoading: true }, () => {
+      this.form.current.validateFields((err,values) => {
+        if (!err) {
+          if (type==='add' && values.itemType==='root') {
+            this.setState({ confirmLoading: false });
+            if (onOk) {
+              onOk();
+            }
+          } else if (type==='add' && values.itemType==='sub') {
+            this.setState({ confirmLoading: false });
+            if (onOk) {
+              onOk();
+            }
+          } else {
+            this.setState({ confirmLoading: false });
+            if (onOk) {
+              onOk();
+            }
+          }
+        }
+      })
+    })
+  }
+
+  render() {
+    const { visible, type, item, onCancel } = this.props;
+    const { confirmLoading } = this.state;
+
+    console.log('item', item);
+
+    return (
+      <Modal 
+        confirmLoading={confirmLoading}
+        visible={visible}
+        title={type==='add'?"新增目录":"更新目录"}
+        destroyOnClose
+        onOk={this.handleOk}
+        onCancel={onCancel}
+      >
+        <UpdateTreeItemForm ref={this.form} item={item} type={type} />
+      </Modal>
+    );
+  }
+}
+
+export default UpdateTreeItemModal;
\ No newline at end of file

src/view/Manage/Model/index.jsx

+import React from 'react';
+import { Row, Col } from 'antd';
+
+import Tree from './Component/Tree';
+
+class Model extends React.Component {
+
+
+  render() {
+    return (
+      <div style={{ backgroundColor: '#fff', height: '100%' }}>
+        <Row gutter={10} style={{ height: '100%' }}>
+          <Col span={8}>
+            <Tree />
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+
+}
+
+export default Model;

src/view/Manage/index.jsx

@@ -6,6 +6,7 @@ import { GetSession } from "../../util";
 import { ManageLayout } from "../../layout";
 
 import Map from './Map';
+import Model from './Model';
 
 class Manage extends Component {
   constructor(props) {
@@ -27,6 +28,8 @@ class Manage extends Component {
             session && session.userId ? (
               <Switch>
                 <Route path={`${match.path}/map`} component={Map} />
+                <Route path={`${match.path}/model`} component={Model} />
+
               </Switch>
             ) : (
               <GetSession {...this.props} />