feats

package.json

@@ -61,8 +61,6 @@
     "omit.js": "^2.0.2",
     "react": "17.0.0",
     "react-dev-inspector": "^1.1.1",
-    "react-dnd": "^14.0.2",
-    "react-dnd-html5-backend": "^14.0.0",
     "react-dom": "^17.0.0",
     "react-helmet-async": "^1.0.4",
     "react-player": "^2.9.0",

src/components/DndRow/Provider.jsx

@@ -1,9 +0,0 @@
-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/DndRow/index.jsx

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

src/components/DragTable/DraggableRow.jsx

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

src/components/DragTable/style.less

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

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

@@ -1,25 +1,43 @@
-import React, { useRef, useCallback, useState } from 'react';
+import React, { useRef, useCallback, 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 { PlusOutlined } 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 { DraggableContainer, withDraggableRow, DragHandle } from '@/components/DragTable'
 
 const typeList = { post: '科普' };
-// const stateList = { post: '科普' };
 
 const BannerList = () => {
-  const [, setLoading] = useState(false);
-  const [dataSource, setDataSource] = useState([]);
-  const ref = useRef();
+  const list = useRef([])
+  const actRef = useRef();
+  
+  const handleDragEnd = useCallback(
+    ({oldIndex, newIndex}) => {
+      if (oldIndex === newIndex) {
+        return
+      }
+
+      const from = list.current[oldIndex]?.serialNo
+      const to = list.current[newIndex]?.serialNo
+  
+      request('/sort/banner', { method: 'PUT', data: { from, to } }).then(() => {
+        actRef.current.reload()
+      }).catch((e) => {
+        notification.error({ message: e.message })
+      })
+    },
+    [],
+  );
+  
+  const tableWrapper = useMemo(() => ({
+    body: {
+      wrapper: (props) => <DraggableContainer {...props} onSortEnd={handleDragEnd} />,
+      row: withDraggableRow(list, { rowKey: 'serialNo' }),
+    },
+  }), [handleDragEnd]);
+
   const handleBannerClick = useCallback((id) => {
     history.push(id ? `/cms/banner/edit?id=${id}` : '/cms/banner/edit');
   }, []);
@@ -31,34 +49,27 @@ const BannerList = () => {
   ];
 
   const deleteBannerClick = (id) => {
-    setLoading(true);
-
     request(`/banner/${id}`, { method: 'delete' })
       .then(() => {
         notification.success({ message: '删除成功' });
-        ref.current.submit();
+        actRef.current.reload()
       })
       .catch((e) => {
-        setLoading(false);
         notification.error({ message: e.message });
       });
   };
 
   const changeStatus = (row) => {
-    setLoading(true);
-
     request(`/banner/${row.serialNo}`, {
       method: 'put',
       data: { ...row, status: row.status === 1 ? 0 : 1 },
     })
       .then(() => {
         notification.info({ message: '修改成功' });
-        setLoading(false);
-        ref.current.submit();
+        actRef.current.reload();
       })
       .catch((e) => {
         notification.error({ message: e.message });
-        setLoading(false);
         return Promise.reject(e.message);
       });
   };
@@ -131,61 +142,26 @@ const BannerList = () => {
     },
   ];
 
-  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 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('/banner')(params, sort, filter).then((res) => {
-      setDataSource(res.data);
-      return res;
-    });
-  };
+  const requestWrapper = (...args) => {
+    return new Promise((resolve, reject) => {
+      queryTable('/banner')(...args).then((res) => {
+        resolve(res)
+        list.current = res.data
+      }).catch(reject)
+    })
+  }
 
   return (
     <PageContainer>
       <ProTable
+        pagination={false}
         columns={columns}
-        dataSource={dataSource}
-        request={getData}
-        postData={(data) => data}
-        formRef={ref}
+        actionRef={actRef}
+        request={requestWrapper}
         rowKey="serialNo"
-        headerTitle="科普列表"
-        search={{
-          labelWidth: '4em',
-        }}
-        components={{
-          body: {
-            wrapper: DraggableContainer,
-            row: DraggableBodyRow,
-          },
-        }}
+        headerTitle="Banner列表"
+        search={{ labelWidth: '4em' }}
+        components={tableWrapper}
         toolBarRender={() => actions}
       />
     </PageContainer>

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

@@ -1,8 +1,8 @@
-import React, { useRef, useCallback, useMemo, useState } from 'react';
+import React, { useRef, useCallback, 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 { PlusOutlined } from '@ant-design/icons';
 import { Button, Popconfirm, Image, Space, notification } from 'antd';
 import request, { queryTable } from '@/utils/request';
 import { DraggableContainer, withDraggableRow, DragHandle } from '@/components/DragTable'
@@ -21,8 +21,6 @@ const HotList = () => {
 
       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()
@@ -36,9 +34,9 @@ const HotList = () => {
   const tableWrapper = useMemo(() => ({
     body: {
       wrapper: (props) => <DraggableContainer {...props} onSortEnd={handleDragEnd} />,
-      row: withDraggableRow(list),
+      row: withDraggableRow(list, { rowKey: 'serialNo' }),
     },
-  }), [handleDragEnd])
+  }), [handleDragEnd]);
 
   const handleHotClick = useCallback((id) => {
     history.push(id ? `/cms/hot/edit?id=${id}` : '/cms/hot/edit');
@@ -54,7 +52,7 @@ const HotList = () => {
     request(`/topic/${id}`, { method: 'delete' })
       .then(() => {
         notification.success({ message: '删除成功' });
-        // ref.current.submit();
+        actRef.current.reload();
       })
       .catch((e) => {
         notification.error({ message: e.message });
@@ -68,7 +66,7 @@ const HotList = () => {
     })
       .then(() => {
         notification.info({ message: '修改成功' });
-        // ref.current.submit();
+        actRef.current.reload();
       })
       .catch((e) => {
         notification.error({ message: e.message });
@@ -159,7 +157,7 @@ const HotList = () => {
         actionRef={actRef}
         request={requestWrapper}
         rowKey="serialNo"
-        headerTitle="科普列表"
+        headerTitle="热门列表"
         search={{ labelWidth: '4em' }}
         components={tableWrapper}
         toolBarRender={() => actions}

src/utils/hooks/useDnD.js

@@ -1,38 +0,0 @@
-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,
-  }
-}