feats

package.json

     "react-dom": "^17.0.0",
     "react-helmet-async": "^1.0.4",
     "react-player": "^2.9.0",
+    "react-sortable-hoc": "^2.0.0",
     "umi": "^3.4.1",
     "umi-request": "^1.0.8",
     "wangeditor": "^4.6.15"

src/components/DndTr/index.jsx → src/components/DndRow/index.jsx

 
 export default (props) => {
   const ref = useRef();
-  const { index, bizId, moveRow, ...restProps } = props;
+  const { id, moveRow, ...restProps } = props;
   const { dragPreview, dragSource, dropTarget, onDrop } = useDnd({
-    item: { index, id: bizId },
+    item: { id },
   });
 
   onDrop((item) => {
     moveRow({
-      source: item,
-      target: { index, id: bizId }
+      from: item.id,
+      to: id,
     });
   });
 

src/components/DragTable/DragHandle.jsx

+import React from 'react';
+import { sortableHandle } from 'react-sortable-hoc';
+import { MenuOutlined } from '@ant-design/icons';
+
+export default sortableHandle(() => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />);

src/components/DragTable/DraggableContainer.jsx

+import React from 'react';
+import { sortableContainer } from 'react-sortable-hoc';
+import Styles from './style.less'
+
+export const SortableContainer = sortableContainer(props => <tbody {...props} />);
+
+export default (props) => (
+  <SortableContainer
+    useDragHandle
+    disableAutoscroll
+    helperClass={Styles['row-dragging']}
+    onSortEnd={props.onSortEnd}
+    {...props}
+  />
+);

src/components/DragTable/DraggableRow.jsx

+import React from 'react';
+import { sortableElement } from 'react-sortable-hoc';
+
+export const SortableItem = sortableElement(props => <tr {...props} />);
+
+export default function withDraggableRow(dataSource) {
+  return (props) => {
+    const index = dataSource.current.findIndex(x => x.serialNo === props['data-row-key']);
+    return  <SortableItem index={index} {...props} />
+  }
+}

src/components/DragTable/index.jsx

+import DraggableContainer, { SortableContainer } from './DraggableContainer';
+import withDraggableRow, { SortableItem } from './DraggableRow';
+import DragHandle from './DragHandle'
+
+export {
+  DraggableContainer,
+  withDraggableRow,
+  SortableContainer,
+  SortableItem,
+  DragHandle,
+}

src/components/DragTable/style.less

+
+.row-dragging {
+  background: #fafafa;
+  border: 1px solid rgba(0, 0, 0, .02);
+
+  td {
+    // padding: 1em;
+  }
+
+  .drag-visible {
+    visibility: visible;
+  }
+}

src/pages/Cms/Banner/List/index.jsx

 import { Button, Popconfirm, Image, Space, notification } from 'antd';
 import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc';
 import request, { queryTable } from '@/utils/request';
-import arrayMove from 'array-move';
+// import arrayMove from 'array-move';
 
 const DragHandle = sortableHandle(() => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />);
 
     // const { dataSource } = this.state;
     console.log('Sorted items: ', dataSource, oldIndex, newIndex);
     if (oldIndex !== newIndex) {
-      const newData = arrayMove([].concat(dataSource), oldIndex, newIndex).filter((el) => !!el);
-      console.log('Sorted items: ', newData);
-      //   this.setState({ dataSource: newData });
-      setDataSource(newData);
+      // const newData = arrayMove([].concat(dataSource), oldIndex, newIndex).filter((el) => !!el);
+      // console.log('Sorted items: ', newData);
+      // //   this.setState({ dataSource: newData });
+      // setDataSource(newData);
     }
   };
 

src/pages/Cms/Hot/List/index.jsx

-import React, { useRef, useCallback, useState, useMemo } from 'react';
+import React, { useRef, useCallback, useMemo, useState } from 'react';
 import { connect, history } from 'umi';
 import { PageContainer } from '@ant-design/pro-layout';
 import ProTable from '@ant-design/pro-table';
 import { PlusOutlined, MenuOutlined } from '@ant-design/icons';
 import { Button, Popconfirm, Image, Space, notification } from 'antd';
 import request, { queryTable } from '@/utils/request';
-import DnDProvider from '@/components/DndTr/Provider';
-import DndTr from '@/components/DndTr';
+import { DraggableContainer, withDraggableRow, DragHandle } from '@/components/DragTable'
 
 const typeList = { post: '科普' };
 
 const HotList = () => {
-  const [forceUpdate, setForceUpdate] = useState(1)
+  const list = useRef([])
   const actRef = useRef()
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const RowWrapper = useMemo(() => DndTr, [forceUpdate])
+  const handleDragEnd = useCallback(
+    ({oldIndex, newIndex}) => {
+      if (oldIndex === newIndex) {
+        return
+      }
+
+      const from = list.current[oldIndex]?.serialNo
+      const to = list.current[newIndex]?.serialNo
+
+      console.log('----------->', from, to)
+  
+      request('/sort/topic', { method: 'PUT', data: { from, to } }).then(() => {
+        actRef.current.reload()
+      }).catch((e) => {
+        notification.error({ message: e.message })
+      })
+    },
+    [],
+  )
 
   const tableWrapper = useMemo(() => ({
     body: {
-      wrapper: DnDProvider,
-      row: RowWrapper,
+      wrapper: (props) => <DraggableContainer {...props} onSortEnd={handleDragEnd} />,
+      row: withDraggableRow(list),
     },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }), [forceUpdate])
-
-  const moveRow = ({ source, target }) => {
-    console.log('--------->', source.index, target.index)
-    if (source.index === target.index) {
-      return
-    }
-
-    request('/sort/topic', { method: 'PUT', data: { from: source.index, to: target.index, id: source.id } }).then(() => {
-      actRef.current.reload()
-      setForceUpdate(forceUpdate + 1)
-    }).catch((e) => {
-      notification.error({ message: e.message })
-    })
-  }
+  }), [handleDragEnd])
 
   const handleHotClick = useCallback((id) => {
     history.push(id ? `/cms/hot/edit?id=${id}` : '/cms/hot/edit');
   ];
 
   const deleteHotClick = (id) => {
-    setLoading(true);
-
     request(`/topic/${id}`, { method: 'delete' })
       .then(() => {
         notification.success({ message: '删除成功' });
         // ref.current.submit();
       })
       .catch((e) => {
-        setLoading(false);
         notification.error({ message: e.message });
       });
   };
 
   const changeStatus = (row) => {
-    setLoading(true);
-
     request(`/topic/${row.serialNo}`, {
       method: 'put',
       data: { ...row, status: row.status === 1 ? 0 : 1 },
     })
       .then(() => {
         notification.info({ message: '修改成功' });
-        setLoading(false);
         // ref.current.submit();
       })
       .catch((e) => {
         notification.error({ message: e.message });
-        setLoading(false);
         return Promise.reject(e.message);
       });
   };
       width: 60,
       hideInSearch: true,
       align: 'center',
-      render: () => (<MenuOutlined style={{ cursor: 'grab', color: '#999' }} />),
+      className: 'drag-visible',
+      render: () => <DragHandle />,
     },
     {
       title: '主图',
       dataIndex: 'poster',
       hideInSearch: true,
-
       align: 'center',
       render: (text) => <Image width={64} height={64} src={text} />,
     },
     },
   ];
 
-  const handleRow = useCallback((record) => ({
-    index: record.sortNo,
-    bizId: record.serialNo,
-    moveRow,
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }), [forceUpdate])
+  const requestWrapper = (...args) => {
+    return new Promise((resolve, reject) => {
+      queryTable('/topic')(...args).then((res) => {
+        resolve(res)
+        list.current = res.data
+      }).catch(reject)
+    })
+  }
 
   return (
     <PageContainer>
         pagination={false}
         columns={columns}
         actionRef={actRef}
-        request={queryTable('/topic')}
+        request={requestWrapper}
         rowKey="serialNo"
         headerTitle="科普列表"
         search={{ labelWidth: '4em' }}
         components={tableWrapper}
-        onRow={handleRow}
         toolBarRender={() => actions}
       />
     </PageContainer>