完善资讯表格新增编辑取消滚动问题

houtai/src/pages/A2News/NewsTable/index.tsx

@@ -13,15 +13,14 @@ import { DndProvider, useDrag, useDrop } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 
 type Porps = {
-  sroolNum: number;
   tableType: string;
-  editInfoFu: (id: number, num: number) => void;
+  editInfoFu: (id: number) => void;
 };
 
-function NewsTable({ tableType, editInfoFu, sroolNum }: Porps) {
+function NewsTable({ tableType, editInfoFu }: Porps) {
   // 有关表格数据
-  const results = useSelector(
-    (state: RootState) => state.newsReducer.tableInfo
+  const { tableInfo: results, sroolNum } = useSelector(
+    (state: RootState) => state.newsReducer
   );
 
   useEffect(() => {
@@ -31,15 +30,6 @@ function NewsTable({ tableType, editInfoFu, sroolNum }: Porps) {
     }
   }, [sroolNum]);
 
-  // 点击编辑的时候存入当前表格的滚动位置
-  const editInfoFuTemp = useCallback(
-    (id: number) => {
-      const dom: any = document.querySelector("#NewsTable .ant-table-body");
-      editInfoFu(id, dom.scrollTop);
-    },
-    [editInfoFu]
-  );
-
   const columns = useMemo(() => {
     return [
       {
@@ -108,7 +98,7 @@ function NewsTable({ tableType, editInfoFu, sroolNum }: Porps) {
             <Button
               size="small"
               type="text"
-              onClick={() => editInfoFuTemp(item.id)}
+              onClick={() => editInfoFu(item.id)}
             >
               编辑
             </Button>
@@ -119,7 +109,7 @@ function NewsTable({ tableType, editInfoFu, sroolNum }: Porps) {
         ),
       },
     ];
-  }, [editInfoFuTemp, results.length, tableType]);
+  }, [editInfoFu, results.length, tableType]);
 
   // 表格拖动排序-----------------
   interface DraggableBodyRowProps

houtai/src/pages/A2News/index.tsx

@@ -1,4 +1,4 @@
-import { RootState } from "@/store";
+import store, { RootState } from "@/store";
 import { MessageFu } from "@/utils/message";
 import { Button, Input, Select } from "antd";
 import React, {
@@ -57,6 +57,9 @@ function News() {
   // 点击重置
   const [inputKey, setInputKey] = useState(1);
   const resetSelectFu = useCallback(() => {
+    // 新增成功把表格滚动到顶部
+    store.dispatch({ type: "news/setSroolNum", payload: 0 });
+
     // 把2个输入框和时间选择器清空
     setInputKey(Date.now());
     setTableSelect({
@@ -76,16 +79,16 @@ function News() {
     (state: RootState) => state.newsReducer.tableInfo
   );
 
-  const scrollRef = useRef(0);
-
   // 点击新增或者编辑
   const addInfoFu = useCallback(
-    (id: number, num?: number) => {
+    (id: number) => {
       if (id === -1 && results.length >= 50)
         return MessageFu.warning("最多可录入50条信息!");
-      // 点击的是编辑，把滚动距离存起来
-      if (id !== -1) scrollRef.current = num!;
-      else scrollRef.current = 0;
+
+      const dom: any = document.querySelector("#NewsTable .ant-table-body");
+      // 设置当前表格滚动位置
+      store.dispatch({ type: "news/setSroolNum", payload: dom.scrollTop });
+
       setEditId(id);
     },
     [results.length]
@@ -154,9 +157,8 @@ function News() {
         />
       ) : (
         <NewsTable
-          sroolNum={scrollRef.current}
           tableType={tableSelect.type}
-          editInfoFu={(id, num) => addInfoFu(id, num)}
+          editInfoFu={(id) => addInfoFu(id)}
         />
       )}
     </div>

houtai/src/store/reducer/A2News.ts

@@ -10,8 +10,8 @@ const initState = {
       txt: "正文666666",
       time1: "2020-02-02 12:12",
       state: "展示",
-      img:'/wall/img/20230209_1519270201.gif',
-      video:'/wall/video/4.mp4'
+      img: "/wall/img/20230209_1519270201.gif",
+      video: "/wall/video/4.mp4",
     },
     {
       id: 2,
@@ -27,18 +27,75 @@ const initState = {
       time1: "2020-02-02 12:12",
       state: "展示",
     },
+    {
+      id: 4,
+      title: "标题4",
+      txt: "正文666666",
+      time1: "2020-02-02 12:12",
+      state: "展示",
+    },
+    {
+      id: 5,
+      title: "标题5",
+      txt: "正文666666",
+      time1: "2020-02-02 12:12",
+      state: "展示",
+    },
+    {
+      id: 6,
+      title: "标题6",
+      txt: "正文666666",
+      time1: "2020-02-02 12:12",
+      state: "展示",
+    },
+    {
+      id: 7,
+      title: "标题7",
+      txt: "正文666666",
+      time1: "2020-02-02 12:12",
+      state: "展示",
+    },
+    {
+      id: 8,
+      title: "标题8",
+      txt: "正文666666",
+      time1: "2020-02-02 12:12",
+      state: "展示",
+    },
+    {
+      id: 9,
+      title: "标题9",
+      txt: "正文666666",
+      time1: "2020-02-02 12:12",
+      state: "展示",
+    },
+    {
+      id: 10,
+      title: "标题10",
+      txt: "正文666666",
+      time1: "2020-02-02 12:12",
+      state: "展示",
+    },
   ] as NewsTableType[],
+
+  // 表格的滚动位置
+  sroolNum: 0,
 };
 
 // 定义 action 类型
-type NewsActionType = { type: "news/getList"; payload: NewsTableType[] };
-
+type NewsActionType =
+  | { type: "news/getList"; payload: NewsTableType[] }
+  | { type: "news/setSroolNum"; payload: number };
 // 频道 reducer
 export default function newsReducer(state = initState, action: NewsActionType) {
   switch (action.type) {
     // 表格数据
     case "news/getList":
       return { ...state, tableInfo: action.payload };
+    // 表格的滚动位置
+    case "news/setSroolNum":
+      return { ...state, sroolNum: action.payload };
+
     default:
       return state;
   }