完成表格编辑与拖动排序

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

 import React, { useState, useCallback, useRef } from 'react';
-import { Table, Input, InputNumber, Popconfirm, Form, Typography } from 'antd';
+import { Table, Input, InputNumber, Popconfirm, Form, Typography, Radio, Divider, Alert } from 'antd';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import update from 'immutability-helper';
@@ -18,6 +18,42 @@ for (let i = 0; i < 20; i++) {
   });
 }
 
+const EditableCell = ({
+  editing,
+  dataIndex,
+  title,
+  inputType,
+  record,
+  index,
+  children,
+  ...restProps
+}) => {
+  const inputNode = inputType === 'number' ? <InputNumber /> : <Input />
+
+  return (
+    <td {...restProps}>
+      {editing ? (
+        <Form.Item
+          name={dataIndex}
+          style={{
+            margin: 0,
+          }}
+          rules={[
+            {
+              required: true,
+              message: `请输入${title}!`,
+            },
+          ]}
+        >
+          {inputNode}
+        </Form.Item>
+      ) : (
+        children
+      )}
+    </td>
+  );
+};
+
 const DragableBodyRow = ({ index, moveRow, className, style, ...restProps }) => {
   const ref = useRef();
   const [{ isOver, dropClassName }, drop] = useDrop(
@@ -61,45 +97,11 @@ const DragableBodyRow = ({ index, moveRow, className, style, ...restProps }) =>
   );
 };
 
-const EditableCell = ({
-  editing,
-  dataIndex,
-  title,
-  inputType,
-  record,
-  index,
-  children,
-  ...restProps
-}) => {
-  const inputNode = inputType === 'number' ? <InputNumber /> : <Input />;
-  return (
-    <td {...restProps}>
-      {editing ? (
-        <Form.Item
-          name={dataIndex}
-          style={{
-            margin: 0,
-          }}
-          rules={[
-            {
-              required: true,
-              message: `Please Input ${title}!`,
-            },
-          ]}
-        >
-          {inputNode}
-        </Form.Item>
-      ) : (
-        children
-      )}
-    </td>
-  );
-};
-
 const ImportAction = () => {
   const [form] = Form.useForm();
   const [data, setData] = useState(originData);
   const [editingKey, setEditingKey] = useState('');
+  const [recommends, setRecommends] = useState([]);
   const dataRef = useRef();
   dataRef.current = data;
   
@@ -108,8 +110,10 @@ const ImportAction = () => {
   const edit = (record) => {
     form.setFieldsValue({
       name: '',
-      age: '',
-      address: '',
+      cnName: '',
+      type: '',
+      length: 0,
+      desc: '',
       ...record,
     });
     setEditingKey(record.key);
@@ -201,6 +205,7 @@ const ImportAction = () => {
       },
     },
   ];
+
   const mergedColumns = columns.map((col) => {
     if (!col.editable) {
       return col;
@@ -235,29 +240,92 @@ 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 (
-    <DndProvider backend={HTML5Backend}>
-      <Form form={form} component={false}>
+    <>
+      <Alert
+        message="表格可以通过拖拽来排序"
+        type="info"
+        closable
+        className='mb-3'
+      />
+      <DndProvider backend={HTML5Backend} >
+        <Form form={form} component={false} onValuesChange={onValuesChange}>
           <Table
             components={{
               body: {
                 cell: EditableCell,
-              row: DragableBodyRow,
+                //编辑状态下不允许拖动
+                row: editingKey===''?DragableBodyRow:null,
               },
             }}
             onRow={(record, index) => ({
               index,
               moveRow,
             })}
-          bordered
             dataSource={data}
             columns={mergedColumns}
             size='small'
             rowClassName="editable-row"
             pagination={false}
+            expandable={{
+              expandedRowRender: record => (
+                <>
+                  <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>
+                </>
+              ),
+              expandIcon: ({ expanded, onExpand, record }) => {
+                return <></>;
+              },
+              rowExpandable: record => isEditing(record) && (recommends||[]).length>0,
+              expandedRowKeys: [editingKey]
+            }}
           />
         </Form>
       </DndProvider>
+    </>
   );
 };