主数据管理

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

@@ -29,6 +29,7 @@ const DefineTable = (props) => {
   const {pageNum, pageSize} = pagination;
 
   useEffect(() => {
+    setCheckedKeys([]);
     setPagination({...pagination, pageNum: 1});
   }, [nodeId])
 

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

 import { useMemo, useState, useEffect } from 'react';
-import { Space, Button, Input, Pagination } from 'antd';
+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 { inputWidth } from '../../../../../util';
+import { inputWidth, showMessage } from '../../../../../util';
 import { dispatch } from '../../../../../model';
 
 import '../../Define/Component/DefineTable.less';
@@ -30,7 +30,7 @@ const ManageTable = (props) => {
   const {pageNum, pageSize} = pagination;
 
   const columns = useMemo(() => {
-    return ([
+    const newColumns = [
       {
         title: '序号',
         dataIndex: 'key',
@@ -39,44 +39,18 @@ const ManageTable = (props) => {
         },
         width: 60,
         ellipsis: true,
-      },
-      {
-        title: '属性1',
-        dataIndex: 'attr1',
-        width: 200,
-        ellipsis: true,
-      },
-      {
-        title: '属性2',
-        dataIndex: 'attr2',
-        width: 200,
-        ellipsis: true,
-      },
-      {
-        title: '属性3',
-        dataIndex: 'attr3',
-        width: 200,
-        ellipsis: true,
-      },
-      {
-        title: '属性4',
-        dataIndex: 'attr4',
-        width: 200,
-        ellipsis: true,
-      },
-      {
-        title: '属性5',
-        dataIndex: 'attr5',
-        width: 200,
-        ellipsis: true,
-      },
-      {
-        title: '属性6',
-        dataIndex: 'attr6',
+      }
+    ];
+    (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';
@@ -85,6 +59,7 @@ const ManageTable = (props) => {
   });
 
   useEffect(() => {
+    setCheckedKeys([]);
     setPagination({...pagination, pageNum: 1});
   }, [nodeId])
 
@@ -163,7 +138,21 @@ const ManageTable = (props) => {
   }
 
   const onBatchDeleteClick = () => {
-
+    setDeleteLoading(true);
+    dispatch({
+      type: 'msd.deleteDatas',
+      payload: {
+        data: checkedKeys||[]
+      },
+      callback: (data) => {
+        setDeleteLoading(false);
+        showMessage('success', '删除成功');
+        getFiledsAndDatas();
+      }, 
+      error: () => {
+        setDeleteLoading(false);
+      }
+    });
   }
 
   const onSearchInputChange = (value) => {
@@ -177,7 +166,10 @@ const ManageTable = (props) => {
   const handleItemClick = ({ event, props, data, triggerEvent }) => {
     const key = event.currentTarget.id;
 
-    if (key === 'update') {
+    if (key === 'detail') {
+      setAction('detail');
+      setIsDataMasterModalVisible(true);
+    } if (key === 'update') {
       setAction('update');
       setIsDataMasterModalVisible(true);
     }
@@ -201,11 +193,13 @@ const ManageTable = (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 
-          placeholder="通过主数据名称搜索" 
+          placeholder="请输入关键字" 
           allowClear 
           value={keyword}
           onChange={onSearchInputChange} 
@@ -214,7 +208,7 @@ const ManageTable = (props) => {
       </div>
       <div className='data-master-content p-3'>
         <ResizeableTable 
-          rowKey='id'
+          rowKey='_id'
           rowSelection={rowSelection}
           columns={columns}
           dataSource={tableData}
@@ -254,6 +248,9 @@ const ManageTable = (props) => {
       />
 
       <RcMenu id={MENU_ID}>
+        <RcItem id="detail" onClick={handleItemClick}>
+          详情
+        </RcItem>
         <RcItem id="update" onClick={handleItemClick}>
           编辑
         </RcItem>

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

-import { Modal, Form, Input } from "antd";
-import { useEffect } from "react";
+import { useEffect, useState, useMemo } from "react";
+import { Modal, Form, Input, Button, Descriptions } from "antd";
+
+import { dispatch } from "../../../../../model";
 
 import './UpdateDataMasterModal.less';
 
@@ -60,9 +62,9 @@ const UpdateDataMasterModal = (props) => {
         type: url,
         payload: {
           params: {
-            modelId: id
+            modelId: nodeId,
           },
-          data: fields
+          data: row
         },
         callback: () => {
           setConfirmLoading(false);
@@ -82,10 +84,24 @@ const UpdateDataMasterModal = (props) => {
       className='update-data-master-modal'
       title={title}
       visible={visible}
-      onCancel={onCancel}
+      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>,
+      ]}
     >
-      <Form 
+    {
+      (action!=='detail') ? <Form 
         form={form}
         {...formItemLayout}
       >
@@ -98,7 +114,16 @@ const UpdateDataMasterModal = (props) => {
             )
           })
         }
-      </Form>
+      </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>
   );
 }