4-25万物墙模块更新

管理后台/src/pages/A2Wall/WallAdd/index.tsx

@@ -1,5 +1,13 @@
 import { MessageFu } from "@/utils/message";
-import { Button, Form, FormInstance, Input, Popconfirm, Radio } from "antd";
+import {
+  Button,
+  Form,
+  FormInstance,
+  Input,
+  Popconfirm,
+  Radio,
+  Select,
+} from "antd";
 import React, {
   useCallback,
   useEffect,
@@ -34,20 +42,21 @@ import { ReactSortable } from "react-sortablejs";
 type Props = {
   id: number;
   closeMoalFu: (txt: string) => void;
+  tableType: "img" | "video";
 };
 
-function WallAdd({ id, closeMoalFu }: Props) {
+function WallAdd({ id, closeMoalFu, tableType }: Props) {
   const getInfoFu = useCallback(async (id: number) => {
     const res = await getWallDetailAPI(id);
-    FormBoxRef.current?.setFieldsValue({ name: res.data.entity.name });
-    setImgNum(Number(res.data.entity.layout) as 1 | 2);
-
+    FormBoxRef.current?.setFieldsValue({
+      name: res.data.entity.name,
+      display: res.data.entity.display,
+    });
     setTopType(res.data.entity.type);
 
     if (res.data.entity.type === "img") {
       const imgListRes = res.data.file;
       setImgList(imgListRes);
-      imgListRef.current = imgListRes;
     } else setVideoFile(res.data.file[0]);
 
     // 设置封面图回显
@@ -56,7 +65,11 @@ function WallAdd({ id, closeMoalFu }: Props) {
 
   useEffect(() => {
     if (id > 0) getInfoFu(id);
-  }, [getInfoFu, id]);
+    else {
+      setTopType(tableType);
+      FormBoxRef.current?.setFieldsValue({ display: 1 });
+    }
+  }, [getInfoFu, id, tableType]);
 
   // 类型的选择
   const [topType, setTopType] = useState<"img" | "video">("img");
@@ -77,32 +90,17 @@ function WallAdd({ id, closeMoalFu }: Props) {
   const myInput2 = useRef<HTMLInputElement>(null);
   const [cover, setCover] = useState("");
 
-  // 版式的选择
-  const [imgNum, setImgNum] = useState<1 | 2>(1);
-
   // 上传图片的校验
   const [imgCheck, setImgCheck] = useState(false);
 
-  // 上传图片的全部数据（最多8张来进行切割）
-  const imgListRef = useRef<ImgListType[]>([]);
-
   // 在页面展示的图片
   const [imgList, setImgList] = useState<ImgListType[]>([]);
 
-  // 版式的选择改变，切割数组
-  useEffect(() => {
-    if (imgListRef.current.length) {
-      const newData = imgListRef.current.slice(0, imgNum);
-      setImgList(newData);
-    }
-  }, [imgNum]);
-
   // 删除某一张图片
   const delImgListFu = useCallback(
     (id: number) => {
       const newItems = imgList.filter((v) => v.id !== id);
       setImgList(newItems);
-      imgListRef.current = imgListRef.current.filter((v) => v.id !== id);
     },
     [imgList]
   );
@@ -111,12 +109,12 @@ function WallAdd({ id, closeMoalFu }: Props) {
   const btnOkCheck = useMemo(() => {
     let flag = false;
     if (topType === "img") {
-      if (imgList.length < imgNum) flag = true;
+      if (imgList.length <= 0) flag = true;
     } else {
       if (!videoFile.filePath) flag = true;
     }
     return flag;
-  }, [imgList.length, imgNum, topType, videoFile.filePath]);
+  }, [imgList.length, topType, videoFile.filePath]);
 
   // 没有通过校验
   const onFinishFailed = useCallback(() => {
@@ -166,7 +164,6 @@ function WallAdd({ id, closeMoalFu }: Props) {
             MessageFu.success("上传成功!");
             if (topType === "img") {
               setImgList([...imgList, res.data]);
-              imgListRef.current.unshift(res.data);
             } else setVideoFile(res.data);
           }
           fileDomInitialFu();
@@ -219,11 +216,11 @@ function WallAdd({ id, closeMoalFu }: Props) {
 
   // 通过校验点击确定
   const onFinish = useCallback(
-    async (value: { name: string }) => {
+    async (value: { name: string; display: 1 | 0 }) => {
       console.log("通过校验，点击确定");
       setImgCheck(true);
 
-      if (topType === "img" && imgList.length < imgNum) return;
+      if (topType === "img" && imgList.length <= 0) return;
       if (topType === "video" && !videoFile.filePath) return;
 
       if (cover === "") return;
@@ -238,8 +235,9 @@ function WallAdd({ id, closeMoalFu }: Props) {
         fileIds,
         name: value.name,
         type: topType,
-        layout: imgNum,
+        layout: imgList.length,
         thumb: cover,
+        display: value.display,
       };
 
       const res = await setWallSave(obj);
@@ -249,16 +247,7 @@ function WallAdd({ id, closeMoalFu }: Props) {
         closeMoalFu(id > 0 ? "编辑" : "新增");
       }
     },
-    [
-      closeMoalFu,
-      cover,
-      id,
-      imgList,
-      imgNum,
-      topType,
-      videoFile.filePath,
-      videoFile.id,
-    ]
+    [closeMoalFu, cover, id, imgList, topType, videoFile.filePath, videoFile.id]
   );
 
   // 点击预览效果
@@ -275,7 +264,7 @@ function WallAdd({ id, closeMoalFu }: Props) {
           onFinishFailed={onFinishFailed}
           autoComplete="off"
         >
-          <div className="myformBox">
+          <div className="myformBox" hidden>
             <div className="label">
               <span>*</span> 类型：
             </div>
@@ -289,11 +278,11 @@ function WallAdd({ id, closeMoalFu }: Props) {
               </Radio.Group>
             </div>
           </div>
-
+          <br />
           <Form.Item
             label="名称"
             name="name"
-            // rules={[{ required: true, message: "请输入名称!" }]}
+            rules={[{ required: true, message: "请输入名称!" }]}
             getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
           >
             <Input maxLength={25} showCount placeholder="请输入内容" />
@@ -381,29 +370,16 @@ function WallAdd({ id, closeMoalFu }: Props) {
 
           {topType === "img" ? (
             <>
-              <div className="myformBox">
-                <div className="label">
-                  <span>*</span> 版式：
-                </div>
-                <div className="myformBoxR">
-                  <Radio.Group
-                    onChange={(e) => setImgNum(e.target.value)}
-                    value={imgNum}
-                  >
-                    <Radio value={1}>1</Radio>
-                    <Radio value={2}>2</Radio>
-                  </Radio.Group>
-                </div>
-              </div>
-
               {/* 图片上传 */}
               <div className="myformBox myformBox0">
-                <div className="label"></div>
+                <div className="label">
+                  <span>*</span> 图片：
+                </div>
                 <div className="myformBoxR">
                   <div className="fileBoxRow_r">
                     <div className="upImgBox">
                       <div
-                        hidden={imgList.length >= imgNum}
+                        hidden={imgList.length >= 9}
                         className="fileBoxRow_up"
                         onClick={() => myInput.current?.click()}
                       >
@@ -470,7 +446,7 @@ function WallAdd({ id, closeMoalFu }: Props) {
                         </>
                       ) : null}
                       {/* 建议尺寸：{12960 / imgNum}*1920 */}
-                      支持png、jpg和jpeg的图片格式；最大支持30M。
+                      支持png、jpg和jpeg的图片格式；最大支持30M。最多支持9张。
                     </div>
                   </div>
                 </div>
@@ -557,9 +533,24 @@ function WallAdd({ id, closeMoalFu }: Props) {
               btnOkCheck && imgCheck ? "noUpThumbAc" : ""
             )}
           >
-            {topType === "img" ? `请上传 ${imgNum} 张图片!` : "请上传附件"}
+            {topType === "img" ? `请上传图片!` : "请上传附件"}
           </div>
 
+          <Form.Item
+            label="展示"
+            name="display"
+            rules={[{ required: true, message: "请选择展示!" }]}
+          >
+            <Select
+              placeholder="请选择"
+              style={{ width: 84 }}
+              options={[
+                { value: 1, label: "启用" },
+                { value: 0, label: "停用" },
+              ]}
+            />
+          </Form.Item>
+
           {/* 确定和取消按钮 */}
           <br />
           <Form.Item wrapperCol={{ offset: 9, span: 16 }}>

管理后台/src/pages/A2Wall/WallTable/index.module.scss

@@ -15,8 +15,15 @@
         top: 50%;
         transform: translateY(-50%);
       }
+      .tableTypeBox{
+        position: absolute;
+        left: 120px;
+        top: 50%;
+        transform: translateY(-50%);
+      }
     }
 
+
     .table {
       margin-top: 20px;
       width: 1000px;

管理后台/src/pages/A2Wall/WallTable/index.tsx

@@ -37,6 +37,17 @@ type Props = {
 function WallTable({ tablePageIdFu, scrollNumInfo }: Props) {
   const dispatch = useDispatch();
 
+  // 从仓库获取 表格 的type
+  const { A2TableType } = useSelector((state: RootState) => state.A2Wall);
+
+  // 每次切换的时候把表格滚动位置变成0
+  useEffect(() => {
+    const dom: HTMLDivElement | null = document.querySelector(
+      "#wallTable .ant-table-body"
+    );
+    if (dom) dom.scrollTop = 0;
+  }, [A2TableType]);
+
   useEffect(() => {
     // 如果是编辑，或者是进新增/编辑页面点击了取消。控制表格滚动到之前的位置
     if (scrollNumInfo.txt === "取消" || scrollNumInfo.txt === "编辑") {
@@ -46,8 +57,8 @@ function WallTable({ tablePageIdFu, scrollNumInfo }: Props) {
       }
     }
 
-    dispatch(getWallTableListAPI());
-  }, [dispatch, scrollNumInfo]);
+    dispatch(getWallTableListAPI(A2TableType));
+  }, [A2TableType, dispatch, scrollNumInfo]);
 
   // 从仓库中获取列表数据
   const results = useSelector((state: RootState) => state.A2Wall.list);
@@ -70,10 +81,10 @@ function WallTable({ tablePageIdFu, scrollNumInfo }: Props) {
       const res: any = await wallRemoveAPI(id);
       if (res.code === 0) {
         MessageFu.success("删除成功!");
-        dispatch(getWallTableListAPI());
+        dispatch(getWallTableListAPI(A2TableType));
       }
     },
-    [dispatch]
+    [A2TableType, dispatch]
   );
 
   // 点击预览
@@ -99,9 +110,9 @@ function WallTable({ tablePageIdFu, scrollNumInfo }: Props) {
     async (val: boolean, id: number) => {
       const isDisable = val ? 1 : 0;
       const res: any = await awllDisplayAPI(id, isDisable);
-      if (res.code === 0) dispatch(getWallTableListAPI());
+      if (res.code === 0) dispatch(getWallTableListAPI(A2TableType));
     },
-    [dispatch]
+    [A2TableType, dispatch]
   );
 
   const columns = useMemo(() => {
@@ -119,11 +130,11 @@ function WallTable({ tablePageIdFu, scrollNumInfo }: Props) {
           </div>
         ),
       },
-      {
-        title: "内容类型",
-        render: (item: WallTableListType) =>
-          item.type === "img" ? "海报" : "视频",
-      },
+      // {
+      //   title: "内容类型",
+      //   render: (item: WallTableListType) =>
+      //     item.type === "img" ? "海报" : "视频",
+      // },
       {
         title: "名称",
         render: (item: WallTableListType) => (item.name ? item.name : "（空）"),
@@ -247,14 +258,23 @@ function WallTable({ tablePageIdFu, scrollNumInfo }: Props) {
 
       const res = await wallSortAPI(beforeId, afterId);
 
-      if (res.code === 0) dispatch(getWallTableListAPI());
+      if (res.code === 0) dispatch(getWallTableListAPI(A2TableType));
     },
-    [dispatch, results]
+    [A2TableType, dispatch, results]
   );
 
   // 点击预览
   const [lookImgId, setLookImgId] = useState(0);
 
+  // 点击切换 表格的 type
+  const cutTableTypeFu = useCallback(
+    (val: "img" | "video") => {
+      if (A2TableType === val) return;
+      store.dispatch({ type: "wall/setTableType", payload: val });
+    },
+    [A2TableType]
+  );
+
   return (
     <div className={styles.WallTable}>
       <div className="titleTxt">
@@ -269,6 +289,22 @@ function WallTable({ tablePageIdFu, scrollNumInfo }: Props) {
             新增
           </Button>
         </div>
+        {/* 表格的type切换 */}
+        <div className="tableTypeBox">
+          <Button
+            onClick={() => cutTableTypeFu("video")}
+            type={A2TableType === "video" ? "primary" : "default"}
+          >
+            视频
+          </Button>
+          &emsp;
+          <Button
+            onClick={() => cutTableTypeFu("img")}
+            type={A2TableType === "img" ? "primary" : "default"}
+          >
+            图片
+          </Button>
+        </div>
       </div>
 
       {/* 表格主体 */}

管理后台/src/pages/A2Wall/index.tsx

@@ -1,13 +1,19 @@
-import { Button, Radio, Tooltip, DatePicker, Popconfirm } from "antd";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Button, Radio, Tooltip, Popconfirm, Select } from "antd";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { ExclamationCircleFilled } from "@ant-design/icons";
 import styles from "./index.module.scss";
-import dayjs from "dayjs";
 import { editWallAutoApi, getWallAutoApi } from "@/store/action/A2Wall";
 import { MessageFu } from "@/utils/message";
 import WallTable from "./WallTable";
 import WallAdd from "./WallAdd";
-const { RangePicker } = DatePicker;
+import { useSelector } from "react-redux";
+import { RootState } from "@/store";
 
 function A2Wall() {
   // 获取自动播放信息
@@ -16,7 +22,7 @@ function A2Wall() {
     if (res.code === 0) {
       const data = JSON.parse(res.data.content);
       setValue0(data.isAuto);
-      setTime0(data.startTime + "," + data.endTime);
+      setSelect0(data.playType);
     }
   }, []);
 
@@ -33,29 +39,23 @@ function A2Wall() {
   // 自动轮播开启关闭的修改
   const [value1, setValue1] = useState(0);
 
-  // 自动轮播时间的展示
-  const [time0, setTime0] = useState(" , ");
+  // 播放板块的展示
+  const [select0, setSelect0] = useState("");
 
-  // 自动轮播时间的修改
-  const [time1, setTime1] = useState<string[]>([]);
+  // 播放板块的修改
+  const [select1, setSelect1] = useState("文物");
 
   // 点击修改
   const editAutoPlay = useCallback(() => {
     setValue1(value0);
-    setTime1(time0.split(","));
+    setSelect1(select0);
     setEdit(true);
-  }, [time0, value0]);
-
-  // 时间选择器改变
-  const timeChange = (date: any, dateString: any) => {
-    setTime1(dateString);
-  };
+  }, [select0, value0]);
 
   // 点击确定
   const btnOk = useCallback(async () => {
     const obj = {
-      endTime: time1[1],
-      startTime: time1[0],
+      playType: select1,
       isAuto: value1,
     };
 
@@ -65,7 +65,7 @@ function A2Wall() {
       getWallAutoApiFu();
     }
     setEdit(false);
-  }, [getWallAutoApiFu, time1, value1]);
+  }, [getWallAutoApiFu, select1, value1]);
 
   // 点击新增或者编辑
   const [editId, setEditId] = useState(0);
@@ -86,11 +86,26 @@ function A2Wall() {
     setEditId(0);
   }, []);
 
+  // 从仓库获取 表格 的type
+  const { A2TableType } = useSelector((state: RootState) => state.A2Wall);
+
+  // 左上方的标题 动态改变
+  const A2Title = useMemo(() => {
+    let txt = "";
+    if (editId === 0) txt = "万物墙管理";
+    else if (editId > 0) {
+      if (A2TableType === "img") txt = "编辑图片";
+      else txt = "编辑视频";
+    } else {
+      if (A2TableType === "img") txt = "新增图片";
+      else txt = "新增视频";
+    }
+    return txt;
+  }, [A2TableType, editId]);
+
   return (
     <div className={styles.A2Wall}>
-      <div className="pageTitle">
-        {editId === 0 ? "万物墙管理" : editId > 0 ? "编辑海报" : "新增海报"}
-      </div>
+      <div className="pageTitle">{A2Title}</div>
 
       {editId === 0 ? (
         // 初始页面盒子
@@ -116,13 +131,18 @@ function A2Wall() {
                   <Radio value={1}>开启</Radio>
                 </Radio.Group>
                 &emsp;
-                <RangePicker
-                  allowClear={false}
-                  defaultValue={[
-                    dayjs(time1[0], "YYYY/MM/DD"),
-                    dayjs(time1[1], "YYYY/MM/DD"),
+                <div>播放板块：</div>
+                <Select
+                  placeholder="请选择"
+                  style={{ width: 84 }}
+                  value={select1}
+                  onChange={(e) => setSelect1(e)}
+                  options={[
+                    { value: "文物", label: "文物" },
+                    { value: "图片", label: "图片" },
+                    { value: "视频", label: "视频" },
+                    { value: "场景", label: "场景" },
                   ]}
-                  onChange={timeChange}
                 />
                 &emsp;
                 <Button type="primary" onClick={btnOk}>
@@ -142,10 +162,12 @@ function A2Wall() {
               // 展示信息
               <div className="txt">
                 <div>自动播放：</div>
-                <div>{value0 ? "开启" : "关闭"}&emsp;|&emsp;</div>
                 <div>
-                  {time0.split(",")[0]} 至 {time0.split(",")[1]}
+                  {value0 === 1 ? "开启" : value0 === 0 ? "关闭" : ""}
+                  &emsp;|&emsp;
                 </div>
+                <div>播放板块：</div>
+                <div>{select0}</div>
                 &emsp;&emsp;
                 <Button type="primary" onClick={editAutoPlay}>
                   修改
@@ -160,7 +182,11 @@ function A2Wall() {
           />
         </>
       ) : (
-        <WallAdd id={editId} closeMoalFu={closeWallAddFu} />
+        <WallAdd
+          tableType={A2TableType}
+          id={editId}
+          closeMoalFu={closeWallAddFu}
+        />
       )}
     </div>
   );

管理后台/src/store/action/A2Wall.ts

@@ -21,9 +21,9 @@ export const editWallAutoApi = (data: { content: string }) => {
 /**
  * 获取列表数据
  */
-export const getWallTableListAPI = () => {
+export const getWallTableListAPI = (type: "img" | "video") => {
   return async (dispatch: AppDispatch) => {
-    const res = await http.get("cms/wall/list");
+    const res = await http.get(`cms/wall/list?type=${type}`);
     if (res.code === 0) dispatch({ type: "wall/getList", payload: res.data });
   };
 };
@@ -103,7 +103,6 @@ export const wallUploadCoverAPI = (data: any) => {
   });
 };
 
-
 /**
  * 内容-新增|编辑
  */

管理后台/src/store/reducer/A2Wall.ts

@@ -4,10 +4,14 @@ import { WallTableListType } from "@/types";
 const initState = {
   // 列表数据
   list: [] as WallTableListType[],
+  // 列表的tab切换
+  A2TableType: "video" as "video" | "img",
 };
 
 // 定义 action 类型
-type Props = { type: "wall/getList"; payload: WallTableListType[] };
+type Props =
+  | { type: "wall/getList"; payload: WallTableListType[] }
+  | { type: "wall/setTableType"; payload: "video" | "img" };
 
 // 频道 reducer
 export default function wallReducer(state = initState, action: Props) {
@@ -15,6 +19,9 @@ export default function wallReducer(state = initState, action: Props) {
     // 获取列表数据
     case "wall/getList":
       return { ...state, list: action.payload };
+    // 列表的tab切换
+    case "wall/setTableType":
+      return { ...state, A2TableType: action.payload };
     default:
       return state;
   }

管理后台/src/types/api/A2Wall.d.ts

@@ -32,7 +32,8 @@ export type WallSaveAPIType ={
   fileIds:string
   id?:number|null
   name:string
-  layout:1|2
+  layout:number
   type:'img'|'video'
   thumb:string
+  display:0|1
 }