主数据定义

src/App.js

@@ -27,7 +27,7 @@ const ImportAction = loadable(()=> import('./view/Manage/Model/Component/ImportA
 const EditModel = loadable(()=> import('./view/Manage/Model/Component/EditModel'));
 const EditTemplate = loadable(()=> import('./view/Manage/ModelConfig/Component/EditTemplate'));
 const AssetTree = loadable(()=> import('./view/Manage/AssetManage/Component/AssetManageTree'));
-const DataMaster = loadable(()=> import('./view/Manage/DataMaster'));
+const DataMasterDefine = loadable(()=> import('./view/Manage/DataMaster/Define'));
 
 export class App extends React.Component {
   constructor() {
@@ -154,7 +154,7 @@ export class App extends React.Component {
             <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-recycle'} component={AssetRecycle} exact />  
-            <Route path={'/center-home/menu/data-master'} component={DataMaster} exact /> 
+            <Route path={'/center-home/menu/data-master-define'} component={DataMasterDefine} exact /> 
             <Route path={'/center-home/data-model-action'} component={EditModel} exact />
             <Route path={'/center-home/asset-detail'} component={AssetDetailPage} exact />
           </Switch>

src/routes.js

@@ -40,9 +40,13 @@ export const routes = [
         text: '未挂载资产',
       },
       {
-        name: 'data-master',
-        text: '主数据'
-      }
+        name: 'data-master-define',
+        text: '主数据定义'
+      },
+      {
+        name: 'data-master-manage',
+        text: '主数据管理'
+      },
     ]
   }
 ];

src/view/Manage/DataMaster/Component/UpdateTemplateModal.jsx

-import { Modal, Form } from "antd";
-
-import UpdateBasicInfo from "./UpdateBasicInfo";
-import UpdateField from "./UpdateField";
-import './UpdateTemplateModal.less';
-
-const UpdateTemplateModal = (props) => {
-  const { visible, onCancel } = props;
-  const [form] = Form.useForm();
-
-  const onFormFinish = async() => {
-    try {
-      await form.validateFields();
-      // const row = await form.validateFields();
-      onCancel && onCancel();
-    } catch (errInfo) {
-      console.log('Validate Failed:', errInfo);
-    }
-  }
-
-  return (
-    <Modal
-      className='update-template-modal'
-      width='80%'
-      title='新建模版'
-      visible={visible}
-      onCancel={onCancel}
-      onOk={onFormFinish}
-    >
-      <UpdateBasicInfo form={form} />
-      <UpdateField />
-    </Modal>
-  );
-}
-
-export default UpdateTemplateModal;
\ No newline at end of file

src/view/Manage/DataMaster/Component/DataMasterExpandedTable.jsx → src/view/Manage/DataMaster/Define/Component/DataMasterExpandedTable.jsx

 import { useMemo } from 'react';
 
-import ResizeableTable from '../../ResizeableTable';
+import ResizeableTable from '../../../ResizeableTable';
 import { expandedTableData } from './Mock';
 
 const DataMasterExpandedTable = (props) => {

src/view/Manage/DataMaster/Component/DataMasterTable.jsx → src/view/Manage/DataMaster/Define/Component/DataMasterTable.jsx

@@ -2,11 +2,11 @@ import { useMemo, useState } from 'react';
 import { Space, Button, Input } 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 ResizeableTable from '../../../ResizeableTable';
+import DebounceInput from '../../../Model/Component/DebounceInput';
+import { UpdateTemplateModal } from './UpdateTemplateModal';
 import UpdateDataMasterModal from './UpdateDataMasterModal';
-import { inputWidth } from '../../../../util';
+import { inputWidth } from '../../../../../util';
 import DataMasterExpandedTable from './DataMasterExpandedTable';
 import { tableData } from './Mock';
 
@@ -21,6 +21,7 @@ const DataMasterTable = (props) => {
   const [isTemplateModalVisible, setIsTemplateModalVisible] = useState(false);
   const [isDataMasterModalVisible, setIsDataMasterModalVisible] = useState(false);
   const [currentTemplate, setCurrentTemplate] = useState({});
+  const [action, setAction] = useState('');
 
   const columns = useMemo(() => {
     return ([
@@ -38,6 +39,9 @@ const DataMasterTable = (props) => {
         dataIndex: 'name',
         width: 200,
         ellipsis: true,
+        render: (text, record, index) => {
+          return <a onClick={() => {onItemClick(record);}}>{text}</a>
+        },
       },
       {
         title: '模版英文名称',
@@ -78,6 +82,12 @@ const DataMasterTable = (props) => {
   });
 
   const onAddClick = () => {
+    setAction('add');
+    setIsTemplateModalVisible(true);
+  }
+
+  const onItemClick = () => {
+    setAction('detail');
     setIsTemplateModalVisible(true);
   }
 
@@ -102,6 +112,9 @@ const DataMasterTable = (props) => {
 
     if (key === 'add') {
       setIsDataMasterModalVisible(true);
+    } else if (key === 'update') {
+      setAction('update');
+      setIsTemplateModalVisible(true);
     }
   }
 
@@ -157,6 +170,7 @@ const DataMasterTable = (props) => {
       </div>
 
       <UpdateTemplateModal
+        action={action}
         visible={isTemplateModalVisible}
         onCancel={onTemplateModalCancel}
       />
@@ -171,6 +185,9 @@ const DataMasterTable = (props) => {
         <RcItem id="add" onClick={handleItemClick}>
           新增主数据
         </RcItem>
+        <RcItem id="update" onClick={handleItemClick}>
+          编辑
+        </RcItem>
       </RcMenu>
     </div>
   );

src/view/Manage/DataMaster/Component/DataMasterTree.jsx → src/view/Manage/DataMaster/Define/Component/DataMasterTree.jsx

@@ -2,7 +2,7 @@ import {useEffect, useMemo, useState} from 'react';
 import {Tooltip, Spin, AutoComplete, Tree} from 'antd';
 import {PlusOutlined, ReloadOutlined} from '@ant-design/icons';
 
-import {highlightSearchContentByTerms} from '../../../../util';
+import {highlightSearchContentByTerms} from '../../../../../util';
 import {treeData} from './Mock';
 
 import './DataMasterTree.less';

src/view/Manage/DataMaster/Component/DataMasterTree.less → src/view/Manage/DataMaster/Define/Component/DataMasterTree.less

-@import '../../../../variables.less';
+@import '../../../../../variables.less';
 
 .data-master-tree {
   height: 100%;

src/view/Manage/DataMaster/Component/UpdateBasicInfo.jsx → src/view/Manage/DataMaster/Define/Component/UpdateBasicInfo.jsx

-import { Form, Input, Divider, Row, Col } from "antd";
+import { Form, Input, Divider, Row, Col, Descriptions } from "antd";
 
 const { TextArea } = Input;
 
 const UpdateBasicInfo = (props) => {
-  const { form } = props;
+  const { form, editable } = props;
 
   const formItemLayout = {
     labelCol: {
@@ -19,28 +19,34 @@ const UpdateBasicInfo = (props) => {
   return (
     <div>
       <h3>基本信息</h3>
-      <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='desc'>
-              <TextArea row={4} />
-            </Form.Item>
-          </Col>
-        </Row>  
-      </Form>
+      {
+        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='desc'>
+                <TextArea row={4} />
+              </Form.Item>
+            </Col>
+          </Row>  
+        </Form> : <Descriptions column={2}>
+          <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>中文名称</div>} >中文</Descriptions.Item>
+          <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>英文名称</div>}>英文</Descriptions.Item>
+          <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>模版描述</div>}>描述</Descriptions.Item>
+        </Descriptions>    
+      }
     </div>    
   );
 }

src/view/Manage/DataMaster/Component/UpdateField.jsx → src/view/Manage/DataMaster/Define/Component/UpdateField.jsx

-import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import React, { useState, useRef, useEffect, useMemo, useCallback, useContext } from "react";
 import { Tooltip, Table, Space, Popover, Input, Button, Form } from "antd";
 import { QuestionCircleOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons';
 import { useClickAway } from 'ahooks';
@@ -6,11 +6,12 @@ import update from 'immutability-helper';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 
-import DebounceInput from "../../Model/Component/DebounceInput";
+import DebounceInput from "../../../Model/Component/DebounceInput";
 import { templateFileds } from "./Mock";
-import { inputWidth, generateUUID } from "../../../../util";
-import { DatatypeInput, EditableCell, DragableBodyRow } from "../../Model/Component/ImportActionTable";
-import { dispatch } from "../../../../model";
+import { inputWidth, generateUUID } from "../../../../../util";
+import { DatatypeInput, EditableCell, DragableBodyRow } from "../../../Model/Component/ImportActionTable";
+import { dispatch } from "../../../../../model";
+import { EditTemplateContext } from "./UpdateTemplateModal";
 
 const InputDebounce = DebounceInput(300)(Input);
 
@@ -23,6 +24,7 @@ const UpdateField = (props) => {
   const [supportedDatatypes, setSupportedDatatypes] = useState([]);
   const [form] = Form.useForm();
   const tableRef = useRef(null);
+  const { attrIsEditingFunction } = useContext(EditTemplateContext);
 
   const columns = [
     {
@@ -146,10 +148,6 @@ const UpdateField = (props) => {
     },
   ];
 
-  const filterData = useMemo(() => {
-    return (data||[]).filter(item => (item?.name||'').indexOf(keyword)!==-1 || (item.cnName).indexOf(keyword)!==-1);
-  }, [keyword, data])
-
   useClickAway(() => {
     save();
   }, tableRef);
@@ -158,6 +156,15 @@ const UpdateField = (props) => {
     getSupportedDatatypes();
   }, [])
 
+  useEffect(() => {
+    attrIsEditingFunction && attrIsEditingFunction(editingKey!=='');
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ editingKey ])
+
+  const filterData = useMemo(() => {
+    return (data||[]).filter(item => (item?.name||'').indexOf(keyword)!==-1 || (item.cnName).indexOf(keyword)!==-1);
+  }, [keyword, data])
+
   const isEditing = (record) => record?.iid === editingKey;
 
   const getSupportedDatatypes = () => {
@@ -232,12 +239,9 @@ const UpdateField = (props) => {
 
   const removeItem = (record) => {
     if (record.iid !== editingKey) {
-      save().then(result => {
-        if (result) {
-          removeItemLogic(record);
-        }
-      });
+      removeItemLogic(record);
     } else {
+      setEditingKey('');
       removeItemLogic(record);
     }
   }
@@ -246,7 +250,7 @@ const UpdateField = (props) => {
     save().then(result => {
       if (result) {
         setKeyword(value);
-      }
+      } 
     });
   }
 
@@ -389,7 +393,7 @@ const UpdateField = (props) => {
         </Space>
         <Space>
           { 
-            editable && <Button onClick={onAddClick} >新建</Button>
+            editable && <Button onClick={onAddClick}>新建</Button>
           }
           <div className='d-flex' style={{ alignItems: 'center' }}>
             <InputDebounce 

src/view/Manage/DataMaster/Define/Component/UpdateTemplateModal.jsx

+import React, { useMemo, useRef } from 'react';
+import { Modal, Form, Button } from "antd";
+
+import UpdateBasicInfo from "./UpdateBasicInfo";
+import UpdateField from "./UpdateField";
+import { showMessage } from '../../../../../util';
+import './UpdateTemplateModal.less';
+
+export const EditTemplateContext = React.createContext({
+  attrIsEditingFunction: null,
+});
+
+export const UpdateTemplateModal = (props) => {
+  const { visible, onCancel, action = 'add' } = props;
+  const [form] = Form.useForm();
+  const attrIsEditingRef = useRef(false);
+
+  const title = useMemo(() => {
+    if (action === 'add') {
+      return '新建模版';
+    }
+    if (action === 'detail') {
+      return '模版详情';
+    }
+
+    if (action === 'update') {
+      return '编辑模版';
+    }
+  }, [action])
+
+  const attrIsEditingFunction = (value) => {
+    attrIsEditingRef.current = value;
+  }
+
+  const save = (e) => {
+    e.stopPropagation();
+
+    if (attrIsEditingRef.current) {
+      showMessage("warn", '还有字段正在编辑，需先保存该字段!');
+    } else {
+      saveLogic();
+    }
+  }
+
+  const saveLogic = async () => {
+    try {
+      await form.validateFields();
+      // const row = await form.validateFields();
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
+  }
+
+  return (
+    <EditTemplateContext.Provider value={{
+      attrIsEditingFunction,
+    }}>
+      <Modal
+        className='update-template-modal'
+        width='80%'
+        title={title}
+        visible={visible}
+        onCancel={onCancel}
+        onOk={save}
+        footer={[
+          <Button key="cancel" onClick={onCancel}>
+            取消
+          </Button>,
+          action!=='detail' && <Button
+            key="ok"
+            type="primary"
+            onClick={save}
+          >
+            确定
+          </Button>,
+        ]}
+      >
+        <UpdateBasicInfo form={form} editable={action!=='detail'} />
+        <UpdateField editable={action!=='detail'} />
+      </Modal>
+    </EditTemplateContext.Provider>
+  );
+}

src/view/Manage/DataMaster/index.jsx → src/view/Manage/DataMaster/Define/index.jsx

@@ -8,7 +8,7 @@ import DataMasterTree from './Component/DataMasterTree';
 import './index.less';
 import DataMasterTable from './Component/DataMasterTable';
 
-const DataMaster = (props) => {
+const DataMasterDefine = (props) => {
 
   const [collapse, setCollapse] = useState(false);
 
@@ -45,4 +45,4 @@ const DataMaster = (props) => {
   )
 }
 
-export default DataMaster;
+export default DataMasterDefine;
\ No newline at end of file

src/view/Manage/index.jsx

@@ -12,7 +12,7 @@ import AssetManage from './AssetManage';
 import AssetResourceBrowse from './AssetResourceBrowse';
 import AssetBrowse from './AssetBrowse';
 import AssetRecycle from './AssetRecycle';
-import DataMaster from "./DataMaster";
+import DataMasterDefine from "./DataMaster/Define";
 
 class Manage extends Component {
 
@@ -34,7 +34,7 @@ class Manage extends Component {
                 <Route path={`${match.path}/asset-resource-browse`} component={AssetResourceBrowse} />
                 <Route path={`${match.path}/asset-browse`} component={AssetBrowse} />
                 <Route path={`${match.path}/asset-recycle`} component={AssetRecycle} />
-                <Route path={`${match.path}/data-master`} component={DataMaster} />
+                <Route path={`${match.path}/data-master-define`} component={DataMasterDefine} />
               </Switch>
             ) : (
               <GetSession {...this.props} />