feats

src/components/DndTr/Provider.jsx

+import React from 'react'
+import { DndProvider } from 'react-dnd'
+import { HTML5Backend } from 'react-dnd-html5-backend'
+
+export default (props) => {
+  return (
+    <DndProvider backend={HTML5Backend}><tbody>{props.children}</tbody></DndProvider>
+  )
+}

src/components/DndTr/index.jsx

+import React, { useRef } from 'react'
+import useDnd from '@/utils/hooks/useDnd'
+
+export default (props) => {
+  const ref = useRef();
+  const { index, bizId, moveRow, ...restProps } = props;
+  const { dragPreview, dragSource, dropTarget, onDrop } = useDnd({
+    item: { index, id: bizId },
+  });
+
+  onDrop((item) => {
+    moveRow({
+      source: item,
+      target: { index, id: bizId }
+    });
+  });
+
+  dragPreview(ref)
+  dragSource(dropTarget(ref))
+
+  return (
+    <tr ref={ref} {...restProps} />
+  )
+}

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

-import React, { useRef, useCallback, useState } from 'react';
+import React, { useRef, useCallback, useState, useMemo } 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 { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc';
 import request, { queryTable } from '@/utils/request';
-import arrayMove from 'array-move';
-
-const DragHandle = sortableHandle(() => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />);
-
-const SortableItem = sortableElement((props) => <tr {...props} />);
-const SortableContainer = sortableContainer((props) => <tbody {...props} />);
+import DnDProvider from '@/components/DndTr/Provider';
+import DndTr from '@/components/DndTr';
 
 const typeList = { post: '科普' };
-// const stateList = { post: '科普' };
 
 const HotList = () => {
-  const [, setLoading] = useState(false);
-  const [dataSource, setDataSource] = useState([]);
-  const ref = useRef();
+  const [forceUpdate, setForceUpdate] = useState(1)
+  const actRef = useRef()
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const RowWrapper = useMemo(() => DndTr, [forceUpdate])
+
+  const tableWrapper = useMemo(() => ({
+    body: {
+      wrapper: DnDProvider,
+      row: RowWrapper,
+    },
+  // 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 })
+    })
+  }
+
   const handleHotClick = useCallback((id) => {
     history.push(id ? `/cms/hot/edit?id=${id}` : '/cms/hot/edit');
   }, []);
     request(`/topic/${id}`, { method: 'delete' })
       .then(() => {
         notification.success({ message: '删除成功' });
-        ref.current.submit();
+        // ref.current.submit();
       })
       .catch((e) => {
         setLoading(false);
       .then(() => {
         notification.info({ message: '修改成功' });
         setLoading(false);
-        ref.current.submit();
+        // ref.current.submit();
       })
       .catch((e) => {
         notification.error({ message: e.message });
       title: '排序',
       dataIndex: 'sort',
       width: 60,
-      className: 'drag-visible',
       hideInSearch: true,
       align: 'center',
-      render: () => <DragHandle />,
+      render: () => (<MenuOutlined style={{ cursor: 'grab', color: '#999' }} />),
     },
     {
       title: '主图',
       hideInSearch: true,
       render: (text, record) => (
         <Space size="middle">
-           <a key="status" onClick={() => changeStatus(record)}>
-            {record.status === 1 ? '弃用' : '启用'}
+          <a key="status" onClick={() => changeStatus(record)}>
+            {record.status === 1 ? '禁用' : '启用'}
           </a>
           <a onClick={() => handleHotClick(record.serialNo)}>编辑</a>
           <Popconfirm
     },
   ];
 
-  const onSortEnd = ({ oldIndex, newIndex }) => {
-    // 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 handleRow = useCallback((record) => ({
+    index: record.sortNo,
+    bizId: record.serialNo,
+    moveRow,
 
-  const DraggableContainer = (props) => (
-    <SortableContainer
-      useDragHandle
-      disableAutoscroll
-      helperClass="row-dragging"
-      onSortEnd={onSortEnd}
-      {...props}
-    />
-  );
-
-  const DraggableBodyRow = ({ className, style, ...restProps }) => {
-    // const { dataSource } = this.state;
-    // function findIndex base on Table rowKey props and should always be a right array index
-    console.log(restProps, dataSource, 'restProps');
-    const index = dataSource?.findIndex((x) => x.serialNo === restProps['data-row-key']);
-    return <SortableItem index={index} {...restProps} />;
-  };
-
-  const getData = (params, sort, filter) => {
-    return queryTable('/topic')(params, sort, filter).then((res) => {
-      setDataSource(res.data);
-      return res;
-    });
-  };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), [forceUpdate])
 
   return (
     <PageContainer>
       <ProTable
+        pagination={false}
         columns={columns}
-        dataSource={dataSource}
-        request={getData}
-        postData={(data) => data}
-        formRef={ref}
+        actionRef={actRef}
+        request={queryTable('/topic')}
         rowKey="serialNo"
         headerTitle="科普列表"
-        search={{
-          labelWidth: '4em',
-        }}
-        components={{
-          body: {
-            wrapper: DraggableContainer,
-            row: DraggableBodyRow,
-          },
-        }}
+        search={{ labelWidth: '4em' }}
+        components={tableWrapper}
+        onRow={handleRow}
         toolBarRender={() => actions}
       />
     </PageContainer>

src/utils/hooks/useDnD.js

+import { useRef } from "react";
+import { useDrag, useDrop } from "react-dnd";
+
+export default function useDnD(options, deps) {
+  const dndType = 'dnd_item';
+  const handleDrop = useRef(x => x);
+
+  const [{ isDragging }, dragSource, dragPreview ] = useDrag(() => ({
+    type: options.type || dndType,
+    item: options.item,
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  }), deps)
+
+  const [{ isOver }, dropTarget ]  = useDrop(() => ({
+    accept: options.type || dndType,
+    collect: (monitor) => ({
+      isOver: monitor.isOver(),
+    }),
+    drop: (item) => {
+      handleDrop.current(item)
+    }
+  }), deps)
+
+  const onDrop = (cb) => {
+    handleDrop.current = cb
+  }
+
+  return {
+    dragSource,
+    dragPreview,
+    dropTarget,
+    isDragging,
+    isOver,
+    onDrop,
+  }
+}