新增主数据

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

 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 UpdateDataMasterModal from './UpdateDataMasterModal';
 import { inputWidth } from '../../../../util';
 import DataMasterExpandedTable from './DataMasterExpandedTable';
 import { tableData } from './Mock';
 
 import './DataMasterTable.less';
+import 'react-contexify/dist/ReactContexify.css';
 
 const InputDebounce = DebounceInput(300)(Input);
 
@@ -16,6 +19,8 @@ const DataMasterTable = (props) => {
   const [keyword, setKeyword] = useState('');
   const [checkedKeys, setCheckedKeys] = useState([]);
   const [isTemplateModalVisible, setIsTemplateModalVisible] = useState(false);
+  const [isDataMasterModalVisible, setIsDataMasterModalVisible] = useState(false);
+  const [currentTemplate, setCurrentTemplate] = useState({});
 
   const columns = useMemo(() => {
     return ([
@@ -67,6 +72,11 @@ const DataMasterTable = (props) => {
     ]);
   }, []);
 
+  const MENU_ID = 'data-master-table-contextmenu';
+  const { show } = useContextMenu({
+    id: MENU_ID,
+  });
+
   const onAddClick = () => {
     setIsTemplateModalVisible(true);
   }
@@ -87,6 +97,18 @@ const DataMasterTable = (props) => {
     setCheckedKeys(keys);
   };
 
+  const handleItemClick = ({ event, props, data, triggerEvent }) => {
+    const key = event.currentTarget.id;
+
+    if (key === 'add') {
+      setIsDataMasterModalVisible(true);
+    }
+  }
+
+  const onDataMasterModalCancel = () => {
+    setIsDataMasterModalVisible(false);
+  }
+
   const rowSelection = {
     selectedRowKeys: checkedKeys,
     onChange: onTableSelectChange,
@@ -122,6 +144,14 @@ const DataMasterTable = (props) => {
             expandedRowRender: record => <DataMasterExpandedTable />,
             rowExpandable: record => true,
           }}
+          onRow={(record) => {
+            return {
+              onContextMenu: event => {
+                setCurrentTemplate(record);
+                show(event);
+              },
+            };
+          }}
           scroll={{ y: 'calc(100vh - 94px - 37px - 57px - 24px - 32px)' }}
         />
       </div>
@@ -130,6 +160,18 @@ const DataMasterTable = (props) => {
         visible={isTemplateModalVisible}
         onCancel={onTemplateModalCancel}
       />
+
+      <UpdateDataMasterModal 
+        visible={isDataMasterModalVisible}
+        template={currentTemplate}
+        onCancel={onDataMasterModalCancel}
+      />
+
+      <RcMenu id={MENU_ID}>
+        <RcItem id="add" onClick={handleItemClick}>
+          新增主数据
+        </RcItem>
+      </RcMenu>
     </div>
   );
 }

src/view/Manage/DataMaster/Component/Mock.js

@@ -139,6 +139,15 @@ export const tableData = [
   },
 ];
 
+export const attrs = [
+  'attr1',
+  'attr2',
+  'attr3',
+  'attr4',
+  'attr5',
+  'attr6',
+];
+
 export const expandedTableData = [
   {
     id: '1',

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

+import { Modal, Form, Input } from "antd";
+
+import { attrs } from "./Mock";
+import './UpdateDataMasterModal.less';
+
+const UpdateTemplateModal = (props) => {
+  const {visible, onCancel, template} = props;
+  const [form] = Form.useForm();
+
+  const formItemLayout = {
+    labelCol: {
+      xs: { span: 24 },
+      sm: { span: 6 },
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 18 },
+    },
+  };
+
+  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-data-master-modal'
+      title='新建主数据'
+      visible={visible}
+      onCancel={onCancel}
+      onOk={onFormFinish}
+    >
+      <Form 
+        form={form}
+        {...formItemLayout}
+      >
+        {
+          attrs.map((item, index) => {
+            return (
+              <Form.Item key={index} label={item} name={item} rules={[{ required: true }]}>
+                <Input />
+              </Form.Item>
+            )
+          })
+        }
+      </Form>
+    </Modal>
+  );
+}
+
+export default UpdateTemplateModal;
\ No newline at end of file