主数据管理

src/util/index.js

@@ -11,7 +11,7 @@ import { DataModelerRoleAdmin, DataModelerRoleUser, DataModelerRoleReader } from
 
 //内网深交所环境 isSzseEnv true
 //元曜公网环境 isSzseEnv false
-export const isSzseEnv = false;
+export const isSzseEnv = true;
 
 export const inputWidth = isSzseEnv?360:240;
 

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

@@ -36,6 +36,7 @@ export const UpdateTemplateModal = (props) => {
     if (action === 'update') {
       return '编辑模版';
     }
+    return '';
   }, [action])
 
   const attrIsEditingFunction = (value) => {

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

-import { useMemo, useState } from 'react';
-import { Space, Button, Input } from 'antd';
+import { useMemo, useState, useEffect } from 'react';
+import { Space, Button, Input, Pagination } 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 { inputWidth } from '../../../../../util';
-import { expandedTableData } from '../../Define/Component/Mock';
+import { dispatch } from '../../../../../model';
 
 import '../../Define/Component/DefineTable.less';
 import 'react-contexify/dist/ReactContexify.css';
@@ -14,11 +14,20 @@ 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 [currentTemplate, setCurrentTemplate] = useState({});
+  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 {pageNum, pageSize} = pagination;
 
   const columns = useMemo(() => {
     return ([
@@ -68,25 +77,89 @@ const ManageTable = (props) => {
         ellipsis: true,
       },
     ]);
-  }, []);
+  }, [fields]);
 
   const MENU_ID = 'data-master-manage-table-contextmenu';
   const { show } = useContextMenu({
     id: MENU_ID,
   });
 
+  useEffect(() => {
+    setPagination({...pagination, pageNum: 1});
+  }, [nodeId])
+
+  useEffect(() => {
+    if (!nodeId || nodeId==='') {
+      setFields([]);
+      setTableData([]);
+      setTotal(0);
+    } else {
+      getFiledsAndDatas();
+    }
+  }, [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?.numberOfElements||0);
+          }, 
+          error: () => {
+            setLoading(false);
+          }
+        });
+      }, 
+      error: () => {
+        setLoading(false);
+      }
+    });
+  }
+
   const onAddClick = () => {
     setAction('add');
+    setCurrentData(null);
     setIsDataMasterModalVisible(true);
   }
 
-  const onItemClick = () => {
+  const onItemClick = (record) => {
     setAction('detail');
+    setCurrentData(record);
     setIsDataMasterModalVisible(true);
   }
 
-  const onDataMasterModalCancel = () => {
+  const onDataMasterModalCancel = (refresh = false) => {
     setIsDataMasterModalVisible(false);
+
+    if (refresh) {
+      getFiledsAndDatas();
+    }
   }
 
   const onBatchDeleteClick = () => {
@@ -110,6 +183,11 @@ const ManageTable = (props) => {
     }
   }
 
+  const changeCurrent = (page,size) => {
+    setCheckedKeys([]);
+    setPagination({ pageNum: page, pageSize: size });
+  }
+
   const rowSelection = {
     selectedRowKeys: checkedKeys,
     onChange: onTableSelectChange,
@@ -139,22 +217,38 @@ const ManageTable = (props) => {
           rowKey='id'
           rowSelection={rowSelection}
           columns={columns}
-          dataSource={expandedTableData}
+          dataSource={tableData}
           onRow={(record) => {
             return {
               onContextMenu: event => {
-                setCurrentTemplate(record);
+                setCurrentData(record);
                 show(event);
               },
             };
           }}
           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>
 
       <UpdateDataMasterModal
         action={action}
+        data={currentData}
+        fields={fields}
+        nodeId={nodeId}
         visible={isDataMasterModalVisible}
         onCancel={onDataMasterModalCancel}
       />

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

 import { Modal, Form, Input } from "antd";
+import { useEffect } from "react";
 
-import { attrs } from "../../Define/Component/Mock";
 import './UpdateDataMasterModal.less';
 
 const UpdateDataMasterModal = (props) => {
-  const {visible, onCancel} = props;
+  const {visible, onCancel, data, fields, action = 'add', nodeId} = props;
+  const [confirmLoading, setConfirmLoading] = useState(false);
   const [form] = Form.useForm();
 
   const formItemLayout = {
@@ -18,11 +19,59 @@ const UpdateDataMasterModal = (props) => {
     },
   };
 
+  useEffect(() => {
+    if (visible) {
+      let newFieldsValue = {};
+      (fields||[]).forEach(item => {
+        newFieldsValue[item.name] = data?data[item.name]:'';
+      });
+
+      form?.setFieldsValue(newFieldsValue);    
+    }
+  }, [visible, data, fields])
+
+  const title = useMemo(() => {
+    if (action === 'add') {
+      return '新建主数据';
+    }
+    if (action === 'detail') {
+      return '主数据详情';
+    }
+    if (action === 'update') {
+      return '编辑主数据';
+    }
+
+    return '';
+  }, [action])
+
   const onFormFinish = async() => {
     try {
-      await form.validateFields();
-      // const row = await form.validateFields();
-      onCancel && onCancel();
+      const row = await form.validateFields();
+
+      setConfirmLoading(true);
+      let url = '';
+      if (action === 'add') {
+        url = 'msd.addData';
+      } else {
+        url = 'msd.updateData';
+      }
+
+      dispatch({
+        type: url,
+        payload: {
+          params: {
+            modelId: id
+          },
+          data: fields
+        },
+        callback: () => {
+          setConfirmLoading(false);
+          onCancel && onCancel(true);  
+        },
+        error: () => {
+          setConfirmLoading(false);
+        }
+      });
     } catch (errInfo) {
       console.log('Validate Failed:', errInfo);
     }
@@ -31,7 +80,7 @@ const UpdateDataMasterModal = (props) => {
   return (
     <Modal
       className='update-data-master-modal'
-      title='新建主数据'
+      title={title}
       visible={visible}
       onCancel={onCancel}
       onOk={onFormFinish}
@@ -41,9 +90,9 @@ const UpdateDataMasterModal = (props) => {
         {...formItemLayout}
       >
         {
-          attrs.map((item, index) => {
+          (fields||[]).map((item, index) => {
             return (
-              <Form.Item key={index} label={item} name={item} rules={[{ required: true }]}>
+              <Form.Item key={index} label={item.name} name={item.name} rules={[{ required: false }]}>
                 <Input />
               </Form.Item>
             )

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

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