新增行

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 => {
-        moveRow(item.index, index);
+        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,31 +137,34 @@ 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 {
-      const row = await form.validateFields();
-      const newData = [...data];
-      const index = newData.findIndex((item) => key === item.key);
-
-      if (index > -1) {
-        const item = newData[index];
-        newData.splice(index, 1, { ...item, ...row });
-        setData(newData);
-        setEditingKey('');
+      setRecommends([]);
 
-        dataRef.current = newData;
-
-      } else {
-        newData.push(row);
-        setData(newData);
-        setEditingKey('');
-
-        dataRef.current = newData;
+      const _suggests = [
+        {
+          name: '建议1'
+        },
+        {
+          name: '建议2'
+        }
+      ];
+      setSuggests(_suggests)
 
+      if (_suggests.length === 0) {
+        constraintSave();
       }
       
     } catch (errInfo) {
@@ -151,6 +172,60 @@ const ImportAction = () => {
     }
   };
 
+  const constraintSave = async () => {
+    const row = await form.validateFields();
+    const newData = [...data];
+    const index = newData.findIndex((item) => editingKey === item.key);
+
+    if (index > -1) {
+      const item = newData[index];
+      newData.splice(index, 1, { ...item, ...row });
+      setData(newData);
+      dataRef.current = newData;
+
+    } else {
+      newData.push(row);
+      setData(newData);
+      dataRef.current = newData;
+
+    }
+
+    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 = [
     {
       title: '中文名称',
@@ -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>
+          <>
+            <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),
@@ -239,39 +313,7 @@ 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,24 +347,51 @@ const ImportAction = () => {
             expandable={{
               expandedRowRender: record => (
                 <>
-                  <Divider orientation="left">智能推荐</Divider>
-                  <Radio.Group onChange={onRecommendChange} className='mb-3 ml-7'>
+                {
+                  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.map((recommend, index) => {
-                      return (
-                        <Radio key={index} value={index} className='mt-3' style={{ display: 'block' }}>
-                        {`${recommend.name||''}`}
-                        </Radio>
-                      )
-                    })
+                    recommends && recommends.length>0 && (
+                      <>
+                      <Divider orientation="left">智能推荐</Divider>
+                      <Radio.Group onChange={onRecommendChange} className='mb-3 ml-7'>
+                      {
+                        recommends && recommends.map((recommend, index) => {
+                          return (
+                            <Radio key={index} value={index} className='mt-3' style={{ display: 'block' }}>
+                            {`${recommend.name||''}`}
+                            </Radio>
+                          )
+                        })
+                      }
+                      </Radio.Group>
+                      </>
+                    )
                   }
-                  </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]
             }}
           />