新增行

src/view/Manage/Model/Component/ImportAction.jsx

 import React, { useState, useCallback, useRef } from 'react';
-import { Table, Input, InputNumber, Popconfirm, Form, Typography, Radio, Divider, Alert } from 'antd';
+import { Table, Input, InputNumber, Form, Typography, Radio, Divider, Alert, Button } from 'antd';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import update from 'immutability-helper';
@@ -55,11 +55,13 @@ const EditableCell = ({
 };
 
 const DragableBodyRow = ({ index, moveRow, className, style, ...restProps }) => {
+
   const ref = useRef();
   const [{ isOver, dropClassName }, drop] = useDrop(
     () => ({
       accept: type,
       collect: monitor => {
+
         const { index: dragIndex } = monitor.getItem() || {};
         if (dragIndex === index) {
           return {};
@@ -70,7 +72,11 @@ const DragableBodyRow = ({ index, moveRow, className, style, ...restProps }) =>
         };
       },
       drop: item => {
+        if (className === 'ant-table-expanded-row') return;
+
+        if (moveRow) {
           moveRow(item.index, index);
+        }
       },
     }),
     [index],
@@ -102,11 +108,23 @@ const ImportAction = () => {
   const [data, setData] = useState(originData);
   const [editingKey, setEditingKey] = useState('');
   const [recommends, setRecommends] = useState([]);
+  const [suggests, setSuggests] = useState([]);
   const dataRef = useRef();
   dataRef.current = data;
   
   const isEditing = (record) => record.key === editingKey;
 
+  const onAddClick = () => {
+    const newData = [{}, ...data];
+
+    (newData||[]).forEach((item, index) => {
+      item.key = index.toString();
+    })
+    
+    setData(newData);
+    edit(newData[0]);
+  }
+
   const edit = (record) => {
     form.setFieldsValue({
       name: '',
@@ -119,36 +137,93 @@ const ImportAction = () => {
     setEditingKey(record.key);
   };
 
+  const remove = (record) => {
+    const newData = [...data];
+    const index = newData.findIndex((item) => record.key === item.key);
+    newData.splice(index, 1);
+    setData(newData);
+  }
+
   const cancel = () => {
     setEditingKey('');
+    setRecommends([]);
   };
 
-  const save = async (key) => {
+  const save = () => {
     try {
+      setRecommends([]);
+
+      const _suggests = [
+        {
+          name: '建议1'
+        },
+        {
+          name: '建议2'
+        }
+      ];
+      setSuggests(_suggests)
+
+      if (_suggests.length === 0) {
+        constraintSave();
+      }
+      
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
+  };
+
+  const constraintSave = async () => {
     const row = await form.validateFields();
     const newData = [...data];
-      const index = newData.findIndex((item) => key === item.key);
+    const index = newData.findIndex((item) => editingKey === item.key);
 
     if (index > -1) {
       const item = newData[index];
       newData.splice(index, 1, { ...item, ...row });
       setData(newData);
-        setEditingKey('');
-
       dataRef.current = newData;
 
     } else {
       newData.push(row);
       setData(newData);
-        setEditingKey('');
-
       dataRef.current = newData;
 
     }
 
-    } catch (errInfo) {
-      console.log('Validate Failed:', errInfo);
+    setEditingKey('');
+    setSuggests([]);
+  }
+
+  const onValuesChange = (changedValues, allValues) => {
+    // console.log('changed values', changedValues);
+    // console.log('all values', allValues);
+
+    setRecommends([
+      {
+        name: '流水交易',
+        cnName: 'trade_id',
+        type: 'varchar',
+        length: 32,
+        desc: '流水交易'
+      },
+      {
+        key: 0,
+        name: `流水交易交易`,
+        cnName: 'trade_id',
+        type: 'varchar',
+        length: 32,
+        desc: '流水单号'
       }
+    ])
+  };
+
+  const onRecommendChange = (e) => {
+
+    form.setFieldsValue({ 
+      ...recommends[e.target.value]
+    });
+
+    setRecommends([]);
   };
 
   const columns = [
@@ -183,24 +258,23 @@ const ImportAction = () => {
       render: (_, record) => {
         const editable = isEditing(record);
         return editable ? (
-          <span>
-            <a
-              href="javascript:;"
-              onClick={() => save(record.key)}
-              style={{
-                marginRight: 8,
-              }}
-            >
+          <>
+          <Typography.Link className='mr-3' disabled={editingKey === ''} onClick={() => save()}>
               保存
-            </a>
-            <Popconfirm title="Sure to cancel?" onConfirm={cancel}>
-              <a>取消</a>
-            </Popconfirm>
-          </span>
+            </Typography.Link>
+            <Typography.Link disabled={editingKey === ''} onClick={() => {cancel()}}>
+              取消
+            </Typography.Link>
+            </>
         ) : (
-          <Typography.Link disabled={editingKey !== ''} onClick={() => edit(record)}>
+          <>
+            <Typography.Link className='mr-3' disabled={editingKey !== ''} onClick={() => edit(record)}>
               编辑
             </Typography.Link>
+            <Typography.Link disabled={editingKey !== ''} onClick={() => remove(record)}>
+              删除
+            </Typography.Link>
+          </>
         );
       },
     },
@@ -215,7 +289,7 @@ const ImportAction = () => {
       ...col,
       onCell: (record) => ({
         record,
-        inputType: col.dataIndex === 'age' ? 'number' : 'text',
+        inputType: 'text',
         dataIndex: col.dataIndex,
         title: col.title,
         editing: isEditing(record),
@@ -240,38 +314,6 @@ const ImportAction = () => {
     [data],
   );
   
-  const onValuesChange = (changedValues, allValues) => {
-    // console.log('changed values', changedValues);
-    // console.log('all values', allValues);
-
-    setRecommends([
-      {
-        name: '流水交易',
-        cnName: 'trade_id',
-        type: 'varchar',
-        length: 32,
-        desc: '流水交易'
-      },
-      {
-        key: 0,
-        name: `流水交易交易`,
-        cnName: 'trade_id',
-        type: 'varchar',
-        length: 32,
-        desc: '流水单号'
-      }
-    ])
-  };
-
-  const onRecommendChange = (e) => {
-
-    form.setFieldsValue({ 
-      ...recommends[e.target.value]
-    });
-
-    setRecommends([]);
-  };
-
   return (
     <>
       <Alert
@@ -280,6 +322,9 @@ const ImportAction = () => {
         closable
         className='mb-3'
       />
+      <div className='d-flex mb-3'>
+        <Button type="primary" onClick={onAddClick} style={{ marginLeft: 'auto' }} disabled={ editingKey!=='' } >新增行</Button>
+      </div>
       <DndProvider backend={HTML5Backend} >
         <Form form={form} component={false} onValuesChange={onValuesChange}>
           <Table
@@ -302,6 +347,28 @@ const ImportAction = () => {
             expandable={{
               expandedRowRender: record => (
                 <>
+                {
+                  editingKey!=='' && <>
+                  {
+                    suggests && suggests.length>0 && (
+                      <>
+                        <Divider orientation="left">建议</Divider>
+                        <div className='mb-3 ml-7'>
+                        {
+                          suggests && suggests.map((suggest, index) => {
+                            return (
+                              <div className='mt-3'>{suggest.name||''}</div>
+                            )
+                          })
+                        }
+                        </div>
+                        <Button className='mb-3 ml-7' type='primary' onClick={constraintSave}>强制保存</Button>
+                      </>
+                    )
+                  }
+                  {
+                    recommends && recommends.length>0 && (
+                      <>
                       <Divider orientation="left">智能推荐</Divider>
                       <Radio.Group onChange={onRecommendChange} className='mb-3 ml-7'>
                       {
@@ -315,11 +382,16 @@ const ImportAction = () => {
                       }
                       </Radio.Group>
                       </>
+                    )
+                  }
+                  </>
+                }
+                </>
               ),
               expandIcon: ({ expanded, onExpand, record }) => {
                 return <></>;
               },
-              rowExpandable: record => isEditing(record) && (recommends||[]).length>0,
+              rowExpandable: record => (editingKey!==''&&((recommends||[]).length>0||(suggests||[]).length>0)),
               expandedRowKeys: [editingKey]
             }}
           />