完善资讯表格和编辑滚动

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

@@ -3,7 +3,7 @@ import VideoLook from "@/components/VideoLook";
 import { RootState } from "@/store";
 import { NewsTableType } from "@/types";
 import { Button, Table, Tooltip } from "antd";
-import React, { useCallback, useMemo, useRef } from "react";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { useSelector } from "react-redux";
 import { ExclamationOutlined } from "@ant-design/icons";
 import styles from "./index.module.scss";
@@ -13,16 +13,33 @@ import { DndProvider, useDrag, useDrop } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 
 type Porps = {
+  sroolNum: number;
   tableType: string;
-  editInfoFu: (id: number) => void;
+  editInfoFu: (id: number, num: number) => void;
 };
 
-function NewsTable({ tableType, editInfoFu }: Porps) {
+function NewsTable({ tableType, editInfoFu, sroolNum }: Porps) {
   // 有关表格数据
   const results = useSelector(
     (state: RootState) => state.newsReducer.tableInfo
   );
 
+  useEffect(() => {
+    if (sroolNum > 0) {
+      const dom: any = document.querySelector("#NewsTable .ant-table-body");
+      dom.scrollTop = sroolNum;
+    }
+  }, [sroolNum]);
+
+  // 点击编辑的时候存入当前表格的滚动位置
+  const editInfoFuTemp = useCallback(
+    (id: number) => {
+      const dom: any = document.querySelector("#NewsTable .ant-table-body");
+      editInfoFu(id, dom.scrollTop);
+    },
+    [editInfoFu]
+  );
+
   const columns = useMemo(() => {
     return [
       {
@@ -50,7 +67,7 @@ function NewsTable({ tableType, editInfoFu }: Porps) {
           tableType === "news"
             ? "正文"
             : tableType === "video"
-            ? "视频封面"
+            ? "视频"
             : "图片",
         render: (item: NewsTableType) => {
           if (tableType === "news") {
@@ -91,7 +108,7 @@ function NewsTable({ tableType, editInfoFu }: Porps) {
             <Button
               size="small"
               type="text"
-              onClick={() => editInfoFu(item.id)}
+              onClick={() => editInfoFuTemp(item.id)}
             >
               编辑
             </Button>
@@ -102,7 +119,7 @@ function NewsTable({ tableType, editInfoFu }: Porps) {
         ),
       },
     ];
-  }, [editInfoFu, results.length, tableType]);
+  }, [editInfoFuTemp, results.length, tableType]);
 
   // 表格拖动排序-----------------
   interface DraggableBodyRowProps
@@ -185,7 +202,7 @@ function NewsTable({ tableType, editInfoFu }: Porps) {
   );
 
   return (
-    <div className={styles.NewsTable}>
+    <div className={styles.NewsTable} id="NewsTable">
       <DndProvider backend={HTML5Backend}>
         <Table
           scroll={{ y: 615 }}

houtai/src/pages/A2News/index.tsx

@@ -76,11 +76,16 @@ function News() {
     (state: RootState) => state.newsReducer.tableInfo
   );
 
+  const scrollRef = useRef(0);
+
   // 点击新增或者编辑
   const addInfoFu = useCallback(
-    (id: number) => {
+    (id: number, num?: number) => {
       if (id === -1 && results.length >= 50)
         return MessageFu.warning("最多可录入50条信息!");
+      // 点击的是编辑，把滚动距离存起来
+      if (id !== -1) scrollRef.current = num!;
+      else scrollRef.current = 0;
       setEditId(id);
     },
     [results.length]
@@ -144,13 +149,14 @@ function News() {
           id={editId}
           tableType={tableSelect.type}
           closePageFu={() => setEditId(0)}
-          editTableFu={() => console.log("编辑了数据")}
+          editTableFu={() => console.log("编辑完成")}
           addTableFu={resetSelectFu}
         />
       ) : (
         <NewsTable
+          sroolNum={scrollRef.current}
           tableType={tableSelect.type}
-          editInfoFu={(id) => addInfoFu(id)}
+          editInfoFu={(id, num) => addInfoFu(id, num)}
         />
       )}
     </div>

houtai/src/pages/A5Guest/index.tsx

@@ -21,10 +21,12 @@ function Guest() {
   });
 
   const txt1 = useMemo(() => {
+    if(value1.txt.replaceAll(" ", "").replaceAll("\n", "")==='') return ''
     return value1.txt.replaceAll(" ", "&emsp;").replaceAll("\n", "<br/>");
   }, [value1.txt]);
 
   const txt2 = useMemo(() => {
+    if(value2.txt.replaceAll(" ", "").replaceAll("\n", "")==='') return ''
     return value2.txt.replaceAll(" ", "&emsp;").replaceAll("\n", "<br/>");
   }, [value2.txt]);
 
@@ -36,6 +38,20 @@ function Guest() {
     [value1.txt, value2.txt]
   );
 
+  const btnOk = useCallback(
+    (val: number) => {
+      if (val === 1) {
+        setEdit1({ txt: "", show: false });
+        setValue1({ ...value1, txt: edit1.txt });
+      } else {
+        setEdit2({ txt: "", show: false });
+
+        setValue2({ ...value2, txt: edit2.txt });
+      }
+    },
+    [edit1.txt, edit2.txt, value1, value2]
+  );
+
   return (
     <div className={styles.Guest}>
       <div className="pageTitle">游客服务</div>
@@ -45,7 +61,10 @@ function Guest() {
             参观指南：&emsp;
             {edit1.show ? (
               <>
-                <Button type="primary">保存</Button>&emsp;
+                <Button type="primary" onClick={() => btnOk(1)}>
+                  保存
+                </Button>
+                &emsp;
                 <Popconfirm
                   title="放弃编辑后，信息将不会保存!"
                   okText="放弃"
@@ -87,7 +106,10 @@ function Guest() {
             参观须知：&emsp;
             {edit2.show ? (
               <>
-                <Button type="primary">保存</Button>&emsp;
+                <Button type="primary" onClick={() => btnOk(2)}>
+                  保存
+                </Button>
+                &emsp;
                 <Popconfirm
                   title="放弃编辑后，信息将不会保存!"
                   okText="放弃"