主数据定义

src/model/msd.js

@@ -15,4 +15,32 @@ export function* updateTreeNode(payload) {
 
 export function* deleteTreeNode(payload) {
   return yield call(service.deleteTreeNode, payload);
+}
+
+export function* getTypes() {
+  return yield call(service.getTypes);
+}
+
+export function* getModels(payload) {
+  return yield call(service.getModels, payload);
+}
+
+export function* addModel(payload) {
+  return yield call(service.addModel, payload);
+}
+
+export function* updateModel(payload) {
+  return yield call(service.updateModel, payload);
+}
+
+export function* deleteModels(payload) {
+  return yield call(service.deleteModels, payload);
+}
+
+export function* getColumns(payload) {
+  return yield call(service.getColumns, payload);
+}
+
+export function* saveColumns(payload) {
+  return yield call(service.saveColumns, payload);
 }
\ No newline at end of file

src/service/msd.js

@@ -14,4 +14,32 @@ export function updateTreeNode(payload) {
 
 export function deleteTreeNode(payload) {
   return PostJSON("/metadatarepo/rest/msdDefinition/deleteTreeNode", payload);
+}
+
+export function getTypes() {
+  return GetJSON("/metadatarepo/rest/msdDefinition/getTypes");
+}
+
+export function getModels(payload) {
+  return PostJSON("/metadatarepo/rest/msdDefinition/getModelByNodeId", payload);
+}
+
+export function addModel(payload) {
+  return Post("/metadatarepo/rest/msdDefinition/addModel", payload);
+}
+
+export function updateModel(payload) {
+  return Post("/metadatarepo/rest/msdDefinition/updateModel", payload);
+}
+
+export function deleteModels(payload) {
+  return PostJSON("/metadatarepo/rest/msdDefinition/deleteModel", payload);
+}
+
+export function getColumns(payload) {
+  return PostJSON("/metadatarepo/rest/msdDefinition/getColumnByModelId", payload);
+}
+
+export function saveColumns(payload) {
+  return PostJSON("/metadatarepo/rest/msdDefinition/batchSaveColumn", payload);
 }
\ No newline at end of file

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

-import { useMemo, useState } from 'react';
-import { Space, Button, Input } from 'antd';
+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 } from '../../../../../util';
-import { tableData } from './Mock';
+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(() => {
+    setPagination({...pagination, pageNum: 1});
+  }, [nodeId])
+
+  useEffect(() => {
+    if (!nodeId || nodeId==='') {
+      setTableData([]);
+      setTotal(0);
+    } else {
+      getTemplates();
+    }
+  }, [keyword, pagination])
 
   const columns = useMemo(() => {
     return ([
@@ -47,29 +68,17 @@ const DefineTable = (props) => {
         ellipsis: true,
       },
       {
-        title: '创建人',
-        dataIndex: 'creator',
-        width: 200,
-        ellipsis: true,
-      },
-      {
-        title: '创建时间',
-        dataIndex: 'createTime',
-        width: 200,
-        ellipsis: true,
-      },
-      {
-        title: '修改人',
-        dataIndex: 'modifier',
+        title: '修改时间',
+        dataIndex: 'lastUpdateTime',
         width: 200,
         ellipsis: true,
       },
       {
-        title: '修改时间',
-        dataIndex: 'modifyTime',
+        title: '模版描述',
+        dataIndex: 'comment',
         width: 200,
         ellipsis: true,
-      },
+      }
     ]);
   }, []);
 
@@ -78,22 +87,66 @@ const DefineTable = (props) => {
     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?.numberOfElements||0);
+      }, 
+      error: () => {
+        setLoading(false);
+      }
+    });
+  }
+
   const onAddClick = () => {
     setAction('add');
+    setCurrentTemplate(null);
     setIsTemplateModalVisible(true);
   }
 
-  const onItemClick = () => {
+  const onItemClick = (record) => {
     setAction('detail');
+    setCurrentTemplate(record);
     setIsTemplateModalVisible(true);
   }
 
-  const onTemplateModalCancel = () => {
+  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) => {
@@ -113,6 +166,11 @@ const DefineTable = (props) => {
     }
   }
 
+  const changeCurrent = (page,size) => {
+    setCheckedKeys([]);
+    setPagination({ pageNum: page, pageSize: size });
+  }
+
   const rowSelection = {
     selectedRowKeys: checkedKeys,
     onChange: onTableSelectChange,
@@ -126,7 +184,9 @@ const DefineTable = (props) => {
             <Button onClick={onAddClick}>新建</Button>
           </Space>
           <Space>
-            <Button onClick={onBatchDeleteClick}>删除</Button>
+            <Tooltip title={(checkedKeys||[]).length===0?'请先选择模版':''}>
+            <Button onClick={onBatchDeleteClick} disabled={(checkedKeys||[]).length===0} loading={deleteLoading}>删除</Button>
+            </Tooltip>
           </Space>
         </Space>
         <InputDebounce 
@@ -139,7 +199,8 @@ const DefineTable = (props) => {
       </div>
       <div className='data-master-content p-3'>
         <ResizeableTable 
-          rowKey='id'
+          loading={loading}
+          rowKey='_id'
           rowSelection={rowSelection}
           columns={columns}
           dataSource={tableData}
@@ -152,12 +213,27 @@ const DefineTable = (props) => {
             };
           }}
           pagination={false}
-          scroll={{ y: 'calc(100vh - 94px - 37px - 57px - 24px - 32px)' }}
+          scroll={{ y: 'calc(100vh - 94px - 37px - 57px - 24px - 32px - 48px)' }}
+        />
+        <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>
 
       <UpdateTemplateModal
         action={action}
+        nodeId={nodeId}
+        template={currentTemplate}
         visible={isTemplateModalVisible}
         onCancel={onTemplateModalCancel}
       />

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

@@ -3,7 +3,7 @@ import { Form, Input, Row, Col, Descriptions } from "antd";
 const { TextArea } = Input;
 
 const UpdateBasicInfo = (props) => {
-  const { form, editable } = props;
+  const {form, editable, template} = props;
 
   const formItemLayout = {
     labelCol: {
@@ -36,15 +36,15 @@ const UpdateBasicInfo = (props) => {
               </Form.Item>
             </Col>
             <Col xs={24} sm={24} lg={12}>
-              <Form.Item label='模版描述' name='desc'>
+              <Form.Item label='模版描述' name='comment'>
                 <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.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>    

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

-import React, { useMemo, useRef } from 'react';
+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({
@@ -11,10 +12,19 @@ export const EditTemplateContext = React.createContext({
 });
 
 export const UpdateTemplateModal = (props) => {
-  const { visible, onCancel, action = 'add' } = 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([]);
+    }
+  }, [visible])
+
   const title = useMemo(() => {
     if (action === 'add') {
       return '新建模版';
@@ -32,6 +42,10 @@ export const UpdateTemplateModal = (props) => {
     attrIsEditingRef.current = value;
   }
 
+  const onFieldChange = (values) => {
+    setFields(values);
+  }
+
   const save = (e) => {
     e.stopPropagation();
 
@@ -44,8 +58,52 @@ export const UpdateTemplateModal = (props) => {
 
   const saveLogic = async () => {
     try {
-      await form.validateFields();
-      // const row = await form.validateFields();
+      const row = await form.validateFields();
+      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);
     }
@@ -56,27 +114,29 @@ export const UpdateTemplateModal = (props) => {
       attrIsEditingFunction,
     }}>
       <Modal
+        forceRender
         className='update-template-modal'
         width='80%'
         title={title}
         visible={visible}
-        onCancel={onCancel}
+        onCancel={() => {onCancel && onCancel();}}
         onOk={save}
         footer={[
-          <Button key="cancel" onClick={onCancel}>
+          <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'} />
-        <UpdateField editable={action!=='detail'} />
+        <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/index.jsx

@@ -11,6 +11,7 @@ import './index.less';
 const DataMasterDefine = (props) => {
 
   const [collapse, setCollapse] = useState(false);
+  const [nodeId, setNodeId] = useState('');
 
   const classes = useMemo(() => {
     return classNames('data-master', {
@@ -18,6 +19,10 @@ const DataMasterDefine = (props) => {
     }); 
   }, [collapse]);
 
+  const onTreeClick = (value) => {
+    setNodeId(value);
+  }
+
   const onCollapseClick = () => {
     setCollapse(!collapse);
   }
@@ -31,7 +36,7 @@ const DataMasterDefine = (props) => {
         axis='x'
         minConstraints={[230, Infinity]} maxConstraints={[Infinity, Infinity]}          
       >
-        <DefineTree />
+        <DefineTree onClick={onTreeClick} />
       </ResizableBox>
       <div className='left-collapse-wrap'>
         <div className='left-collapse' onClick={onCollapseClick}>
@@ -39,7 +44,7 @@ const DataMasterDefine = (props) => {
         </div>
       </div>
       <div className='right-wrap'>
-        <DefineTable />
+        <DefineTable nodeId={nodeId} />
       </div>
     </div>
   )