YPZZBWG/houtai/src/pages/B3Wall/index.tsx

import { Button, Radio, Tooltip, DatePicker, Popconfirm } from "antd";
import React, { useCallback, useEffect, useRef, useState } from "react";
import { ExclamationCircleFilled } from "@ant-design/icons";
import styles from "./index.module.scss";
import dayjs from "dayjs";
import {
  editWallAutoApi,
  editWallTypeApi,
  getWallAutoApi,
  getWallCategoryoApi,
  getWallCategoryoListApi,
} from "@/store/action/B3Wall";
import { MessageFu } from "@/utils/message";
import WallTable from "./WallTable";
import WallAdd from "./WallAdd";
const { RangePicker } = DatePicker;

function Wall() {
  // 获取自动播放信息
  const getWallAutoApiFu = useCallback(async () => {
    const res = await getWallAutoApi();
    if (res.code === 0) {
      const data = JSON.parse(res.data.content);
      setValue0(data.isAuto);
      setTime0(data.startTime + "," + data.endTime);
    }
  }, []);

  // 获取文物类别展示信息
  const getWallCategoryApiFu = useCallback(async () => {
    const res = await getWallCategoryoApi();
    if (res.code === 0) {
      const data = JSON.parse(res.data.content);
      console.log(data);
      setValueType(data.isAuto);
      setTimeType0(data.startTime + "," + data.endTime);
      setTypeDisplay(data.type)
    }
  }, []);

  // 获取文物类别列表
  const getWallCategoryListApiFu = useCallback(async () => {
    const res = await getWallCategoryoListApi();
    if (res.code === 0) {
      console.log(res);
      setTypes(res.data);
    }
  }, []);

  useEffect(() => {
    getWallAutoApiFu();
    getWallCategoryApiFu();
    getWallCategoryListApiFu();
  }, [getWallAutoApiFu, getWallCategoryApiFu, getWallCategoryListApiFu]);

  // 场景管理的编辑
  const [edit, setEdit] = useState(false);

  // 自动轮播开启关闭的展示
  const [value0, setValue0] = useState(-1);

  // 自动轮播开启关闭的修改
  const [value1, setValue1] = useState(0);

  // 自动轮播时间的展示
  const [time0, setTime0] = useState(" , ");

  // 自动轮播时间的修改
  const [time1, setTime1] = useState<string[]>([]);

  // 场景管理的编辑
  const [editType, setEditType] = useState(false);

  // 文物类型开启关闭的展示
  const [valueType, setValueType] = useState(-1);

  // 文物类型开启关闭的修改
  const [value2, setValue2] = useState(0);

  // 文物类型时间的展示
  const [timeType0, setTimeType0] = useState(" , ");

  // 文物类型时间的修改
  const [timeType1, setTimeType1] = useState<string[]>([]);

  // 文物类型列表
  const [types, setTypes] = useState([]);

  // 文物类型展示
  const [typeDisplay, setTypeDisplay] = useState([]);

  // 文物类型修改
  const [typeEdit, setTypeEdit] = useState([]);

  // 点击修改(海报/场景)
  const editAutoPlay = useCallback(() => {
    setValue1(value0);
    setTime1(time0.split(","));
    setEdit(true);
  }, [time0, value0]);

  // 点击修改(文物类别)
  const editTypeFu = useCallback(() => {
    setValue2(valueType);
    setTimeType1(timeType0.split(","));
    setEditType(true);
  }, [timeType0, valueType]);

  // 时间选择器改变
  const timeChange = (date: any, dateString: any) => {
    setTime1(dateString);
  };
  // 时间选择器改变
  const timeTypeChange = (date: any, dateString: any) => {
    setTimeType1(dateString);
    console.log(dateString);
  };

  // 点击确定 (海报/场景)
  const btnOk = useCallback(async () => {
    const obj = {
      endTime: time1[1],
      startTime: time1[0],
      isAuto: value1,
    };

    const res: any = await editWallAutoApi({ content: JSON.stringify(obj) });
    if (res.code === 0) {
      MessageFu.success("修改成功!");
      getWallAutoApiFu();
    }
    setEdit(false);
  }, [getWallAutoApiFu, time1, value1]);

  // 点击确定 (类别)
  const btnOkType = useCallback(async () => {
    const obj = {
      endTime: timeType1[1],
      startTime: timeType1[0],
      isAuto: value2,
      type: typeEdit
    };
    const res: any = await editWallTypeApi({ content: JSON.stringify(obj) });
    if (res.code === 0) {
      MessageFu.success("修改成功!");
      getWallCategoryApiFu();
    }
    setEditType(false);
  }, [getWallCategoryApiFu, timeType1, typeEdit, value2]);

  // 点击新增或者编辑
  const [editId, setEditId] = useState(0);

  const scrollRef = useRef({
    txt: "",
    num: 0,
  });

  const tablePageIdFu = useCallback((id: number, scrollNum: number) => {
    scrollRef.current = { ...scrollRef.current, num: scrollNum };
    setEditId(id);
  }, []);

  // 新增海报
  const editTableFu = useCallback(() => {
    // 获取当前表格的滚动位置
    const dom: any = document.querySelector("#wallTable .ant-table-body");
    tablePageIdFu(-1, dom.scrollTop);
  }, [tablePageIdFu]);

  // 从新增/编辑页面点击取消或者提交
  const closeWallAddFu = useCallback((txt: string) => {
    scrollRef.current = { ...scrollRef.current, txt };
    setEditId(0);
  }, []);

  return (
    <div className={styles.Wall}>
      <div className="pageTitlt">
        {editId === 0 ? "万物墙管理" : editId > 0 ? "编辑海报" : "新增海报"}
      </div>

      {editId === 0 ? (
        // 初始页面盒子
        <>
          <div className="wallTopBox">
            <div className="titleTxt">
              海报展示管理
              {/* <Tooltip title="当超过15秒未操作时，将在场景&emsp;&emsp;讲述/游览/赏析/临时展&emsp;&emsp;间循环播放，每个场景播放30秒">
                <div className="inco">
                  <ExclamationCircleFilled />
                </div>
              </Tooltip> */}
            </div>
            {edit ? (
              // 修改信息
              <div className="edit">
                <div>自动轮播：</div>
                <Radio.Group
                  onChange={(e) => setValue1(e.target.value)}
                  value={value1}
                >
                  <Radio value={0}>关闭</Radio>
                  <Radio value={1}>开启</Radio>
                </Radio.Group>
                &emsp;
                <RangePicker
                  allowClear={false}
                  defaultValue={[
                    dayjs(time1[0], "YYYY/MM/DD"),
                    dayjs(time1[1], "YYYY/MM/DD"),
                  ]}
                  onChange={timeChange}
                />
                &emsp;
                <Button type="primary" onClick={btnOk}>
                  确定
                </Button>
                &emsp;
                <Popconfirm
                  title="放弃编辑后，信息将不会保存!"
                  okText="放弃"
                  cancelText="取消"
                  onConfirm={() => setEdit(false)}
                >
                  <Button>取消</Button>
                </Popconfirm>
              </div>
            ) : (
              // 展示信息
              <div className="txt">
                <div>自动轮播：</div>
                <div>{value0 ? "开启" : "关闭"}&emsp;|&emsp;</div>
                <div>
                  {time0.split(",")[0]} 至 {time0.split(",")[1]}
                </div>
                &emsp;&emsp;
                <Button type="primary" onClick={editAutoPlay}>
                  修改
                </Button>
                <Button
                  type="primary"
                  onClick={editTableFu}
                  style={{ marginLeft: "10px" }}
                >
                  新增海报
                </Button>
              </div>
            )}
            {/* 表格相关 */}
            <WallTable
              tablePageIdFu={tablePageIdFu}
              scrollNumInfo={scrollRef.current}
            />
          </div>

          <div className="wallTopBox">
            <div className="titleTxt">
              文物按类别展示
              <Tooltip title="当关闭时，万物墙将展示所有文物。">
                <div className="inco">
                  <ExclamationCircleFilled />
                </div>
              </Tooltip>
            </div>
            {editType ? (
              // 修改信息
              <div>
                <div className="edit">
                  <div>展示日期:</div>
                  <Radio.Group
                    onChange={(e) => setValue2(e.target.value)}
                    value={value2}
                  >
                    <Radio value={0}>关闭</Radio>
                    <Radio value={1}>开启</Radio>
                  </Radio.Group>
                  &emsp;
                  <RangePicker
                    allowClear={false}
                    defaultValue={[
                      dayjs(timeType1[0], "YYYY/MM/DD"),
                      dayjs(timeType1[1], "YYYY/MM/DD"),
                    ]}
                    onChange={timeTypeChange}
                  />
                  &emsp;
                  <Button type="primary" onClick={btnOkType}>
                    确定
                  </Button>
                  &emsp;
                  <Popconfirm
                    title="放弃编辑后，信息将不会保存!"
                    okText="放弃"
                    cancelText="取消"
                    onConfirm={() => setEditType(false)}
                  >
                    <Button>取消</Button>
                  </Popconfirm>
                </div>
                <div className="txt">
                  <div style={{ marginRight: "5px" }}>展示类别:</div>
                  <Radio.Group
                    onChange={(e) => setTypeEdit(e.target.value)}
                    value={typeEdit}
                  >
                    {types.map((item) => {
                      return (
                        <Radio key={item} value={item}>
                          {item}
                        </Radio>
                      );
                    })}
                  </Radio.Group>
                </div>
              </div>
            ) : (
              // 展示信息
              <div>
                <div className="txt">
                  <div style={{ marginRight: "5px" }}>展示日期:</div>
                  <div>{valueType ? "开启" : "关闭"}&emsp;|&emsp;</div>
                  <div>
                    {timeType0.split(",")[0]} 至 {timeType0.split(",")[1]}
                  </div>
                  &emsp;&emsp;
                  <Button type="primary" onClick={editTypeFu}>
                    修改
                  </Button>
                </div>
                <div className="txt">
                  <div style={{ marginRight: "5px" }}>展示类别:</div>
                  <div>{typeDisplay}</div>
                </div>
              </div>
            )}
          </div>
        </>
      ) : (
        <WallAdd id={editId} closeMoalFu={closeWallAddFu} />
      )}
    </div>
  );
}

const MemoWall = React.memo(Wall);

export default MemoWall;