upp

后台管理/src/pages/A2Gallery/A2Edit/index.module.scss

@@ -12,13 +12,19 @@
 
   :global {
     .A2E_topInfo {
+      position: relative;
       width: 800px;
 
       .A2E_btn {
-        position: fixed;
+        position: absolute;
         z-index: 998;
-        top: 105px;
-        right: 100px;
+        top: 0px;
+        left: 900px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
       }
     }
 

后台管理/src/pages/A2Gallery/A2Edit/index.tsx

@@ -37,6 +37,8 @@ function A2Edit({ editInfo, editFu, closeFu }: Props) {
     (state: RootState) => state.A2Gallery.inTableInfo
   );
 
+  // 防止每次进页面  placeholder 回显 跳动问题
+
   // 自己的id
   const [pid, setPid] = useState(0);
 
@@ -74,7 +76,7 @@ function A2Edit({ editInfo, editFu, closeFu }: Props) {
         id: editInfo.id,
       });
       if (res.code === 0) {
-        MessageFu.success("提交成功!");
+        MessageFu.success("保存成功!");
         editFu();
         closeFu();
       }
@@ -194,7 +196,12 @@ function A2Edit({ editInfo, editFu, closeFu }: Props) {
 
   return (
     <div className={styles.A2Edit}>
-      <div className={classNames("A2E_topInfo",editInfo.type==='look'?'nolyLookMain':'')}>
+      <div
+        className={classNames(
+          "A2E_topInfo",
+          editInfo.type === "look" ? "nolyLookMain" : ""
+        )}
+      >
         <Form
           scrollToFirstError={true}
           ref={FormBoxRef}
@@ -212,15 +219,29 @@ function A2Edit({ editInfo, editFu, closeFu }: Props) {
             />
           </Form.Item>
           <Form.Item label="地址" name="address">
-            <Input placeholder="请输入内容" maxLength={50} showCount />
+            <Input
+              placeholder={
+                pid ? (editInfo.type === "look" ? "（空）" : "请输入内容") : ""
+              }
+              maxLength={50}
+              showCount
+            />
           </Form.Item>
           <Form.Item label="开放时间" name="openTime">
-            <Input placeholder="请输入内容" maxLength={50} showCount />
+            <Input
+              placeholder={
+                pid ? (editInfo.type === "look" ? "（空）" : "请输入内容") : ""
+              }
+              maxLength={50}
+              showCount
+            />
           </Form.Item>
           <Form.Item label="展馆简介" name="description">
             <TextArea
               autoSize
-              placeholder="请输入内容"
+              placeholder={
+                pid ? (editInfo.type === "look" ? "（空）" : "请输入内容") : ""
+              }
               showCount
               maxLength={500}
             />
@@ -232,7 +253,7 @@ function A2Edit({ editInfo, editFu, closeFu }: Props) {
             ) : (
               <>
                 <Button type="primary" htmlType="submit">
-                  提交
+                  保存
                 </Button>
                 &emsp;&emsp;
                 <Popconfirm
@@ -263,6 +284,7 @@ function A2Edit({ editInfo, editFu, closeFu }: Props) {
         </div>
         <div className="A2E_table">
           <Table
+            scroll={{ y: 500 }}
             dataSource={inTableInfo}
             columns={columns}
             rowKey="id"

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

@@ -127,6 +127,13 @@ function A2Gallery() {
     setEditInfo({ type: "", id: 0 });
   }, []);
 
+  useEffect(() => {
+    return () => {
+      // 离开页面也清空 二级的仓库 表格数据，防止闪动
+      store.dispatch({ type: "A2/inGetList", payload: [] });
+    };
+  }, []);
+
   return (
     <div className={styles.A2Gallery}>
       <div className="pageTitle">

后台管理/src/pages/A3Fliqlo/A3Modal/index.module.scss

@@ -0,0 +1,34 @@
+.A3FliqloModal {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+
+    .e_row {
+      border-top: 1px solid #999999;
+      padding-top: 30px;
+      display: flex;
+      font-size: 14px;
+
+      .e_rowL {
+        width: 70px;
+        text-align: right;
+
+        &>span {
+          color: #ff4d4f;
+          position: relative;
+          top: 3px;
+        }
+      }
+
+      .e_rowR {
+        width: calc(100% - 94px);
+      }
+    }
+
+    .A3_fileBtn {
+      margin-top: 30px;
+      text-align: center;
+    }
+  }
+}

后台管理/src/pages/A3Fliqlo/A3Modal/index.tsx

@@ -0,0 +1,87 @@
+import React, { useCallback, useState } from "react";
+import styles from "./index.module.scss";
+import UpFileOne from "@/components/Z_upFileOne";
+import { Button, Modal, Popconfirm } from "antd";
+import { A3_APIaddTable } from "@/store/action/A3Fliqlo";
+import { MessageFu } from "@/utils/message";
+
+type Props = {
+  pid: number;
+  closeFu: () => void;
+  addTableFu: () => void;
+};
+
+function A3Modal({ pid, closeFu, addTableFu }: Props) {
+  // 封面图
+  const [cover, setCover] = useState("");
+
+  // 校验
+  const [fromCheck, setFromCheck] = useState(false);
+
+  // 点击上传图片的提交
+  const btnImgOk = useCallback(async () => {
+    setFromCheck(true);
+    if (!cover) return;
+
+    const obj = {
+      parentId: pid,
+      thumb: cover,
+    };
+
+    const res = await A3_APIaddTable(obj);
+
+    if (res.code === 0) {
+      MessageFu.success("新增成功!");
+      addTableFu();
+      closeFu();
+    }
+  }, [addTableFu, closeFu, cover, pid]);
+
+  return (
+    <Modal
+      wrapClassName={styles.A3FliqloModal}
+      destroyOnClose
+      open={true}
+      title="上传图片"
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className="e_row">
+        <div className="e_rowL">
+          <span>* </span>图片：
+        </div>
+        <div className="e_rowR">
+          <UpFileOne
+            myUrl="cms/screen/upload"
+            cover={cover}
+            setCover={(val) => setCover(val)}
+            isLook={false}
+            coverCheck={fromCheck}
+            size={5}
+            dirCode={"pingBao"}
+          />
+        </div>
+      </div>
+
+      <div className="A3_fileBtn">
+        <Button type="primary" onClick={btnImgOk}>
+          提交
+        </Button>
+        &emsp;
+        <Popconfirm
+          title="放弃编辑后，信息将不会保存!"
+          okText="放弃"
+          cancelText="取消"
+          onConfirm={() => closeFu()}
+        >
+          <Button>取消</Button>
+        </Popconfirm>
+      </div>
+    </Modal>
+  );
+}
+
+const MemoA3Modal = React.memo(A3Modal);
+
+export default MemoA3Modal;

后台管理/src/pages/A3Fliqlo/index.module.scss

@@ -1,5 +1,72 @@
-.A3Fliqlo{
-  :global{
-    
+.A3Fliqlo {
+  :global {
+
+    .A3_title {
+      font-size: 16px;
+      font-weight: 700;
+
+    }
+
+
+    .A3_top {
+      border-radius: 10px;
+      padding: 20px 15px 0px;
+      background-color: #fff;
+      position: relative;
+      height: 110px;
+
+
+      .A3_timeTxt {
+        width: 80px;
+
+      }
+
+      .A3_tit {
+        font-size: 16px;
+
+        margin-top: 15px;
+        display: flex;
+        align-items: center;
+      }
+
+      .A3_time {
+        margin-left: 50px;
+        display: flex;
+        align-items: center;
+
+
+
+      }
+
+      .A3_topBtn {
+        position: absolute;
+        top: 10px;
+        left: 400px;
+      }
+    }
+
+    .tableBox {
+      margin-top: 15px;
+      border-radius: 10px;
+      padding: 20px 15px 0px;
+      background-color: #fff;
+      position: relative;
+      height: calc(100% - 118px);
+
+      .A3_title2 {
+        margin-bottom: 15px;
+      }
+
+      .A3_Fbtn {
+        position: absolute;
+        top: 10px;
+        left: 400px;
+      }
+
+      .ant-table-cell {
+        padding: 10px !important;
+      }
+    }
+
   }
 }

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

@@ -1,9 +1,276 @@
-import React from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import styles from "./index.module.scss";
+import { Button, Input, Popconfirm, Switch, Table } from "antd";
+import { MessageFu } from "@/utils/message";
+import {
+  A3_APIdel,
+  A3_APIdisplay,
+  A3_APIgetConfig,
+  A3_APIgetList,
+  A3_APIsort,
+  A3_APIupdateConfig,
+} from "@/store/action/A3Fliqlo";
+
+import { RootState } from "@/store";
+import A3Modal from "./A3Modal";
+import { useDispatch, useSelector } from "react-redux";
+import { A3TableType } from "@/types";
+import ImageLazy from "@/components/ImageLazy";
+
 function A3Fliqlo() {
+  const dispatch = useDispatch();
+
+  const [edit, setEdit] = useState(false);
+
+  const [open1, setOpen1] = useState(false);
+  const [open2, setOpen2] = useState(false);
+
+  const [time1, setTime1] = useState("");
+  const [time2, setTime2] = useState("");
+
+  const time2ChangeFu = useCallback((val: string) => {
+    if (Number(val) > 600) val = "600";
+    setTime2(val.replace(/^(0+)|[^\d]+/g, ""));
+  }, []);
+
+  useEffect(() => {
+    if (edit) {
+      setOpen2(open1);
+      setTime2(time1);
+    }
+  }, [edit, open1, time1]);
+
+  const btnOk = useCallback(async () => {
+    if (!time2) return MessageFu.warning("请输入时间!");
+    const obj = {
+      autoPlay: open2 ? "true" : "false",
+      time: time2,
+    };
+
+    const res = await A3_APIupdateConfig(JSON.stringify(obj));
+
+    if (res.code === 0) {
+      MessageFu.success("修改成功!");
+      setOpen1(open2);
+      setTime1(time2);
+      setEdit(false);
+    }
+  }, [open2, time2]);
+
+  const [pid, setPid] = useState(0);
+
+  // 获取配置
+  const getConfigFu = useCallback(async () => {
+    const res = await A3_APIgetConfig();
+    if (res.code === 0) {
+      setPid(res.data.id);
+      const data = JSON.parse(res.data.content);
+      setOpen1(data.autoPlay);
+      setTime1(data.time);
+    }
+  }, []);
+
+  useEffect(() => {
+    getConfigFu();
+  }, [getConfigFu]);
+
+  // 获取表格列表
+  const getListFu = useCallback(() => {
+    if (pid) dispatch(A3_APIgetList(pid));
+  }, [dispatch, pid]);
+
+  useEffect(() => {
+    getListFu();
+  }, [getListFu]);
+
+  const [open, setOpen] = useState(false);
+
+  // 切换表格中的启用停用状态
+  const isEnabledClickFu = useCallback(
+    async (val: boolean, id: number) => {
+      const isDisable = val ? 1 : 0;
+      const res: any = await A3_APIdisplay(id, isDisable);
+      if (res.code === 0) getListFu();
+    },
+    [getListFu]
+  );
+
+  // 点击上移和下移动
+  const moveTableFu = useCallback(
+    async (id1: number, id2: number) => {
+      const res = await A3_APIsort(id1, id2);
+      if (res.code === 0) getListFu();
+    },
+    [getListFu]
+  );
+
+  // 点击删除
+  const delTableFu = useCallback(
+    async (id: number) => {
+      const res: any = await A3_APIdel(id);
+      if (res.code === 0) {
+        MessageFu.success("删除成功!");
+        getListFu();
+      }
+    },
+    [getListFu]
+  );
+
+  // 获取表格数据
+  const tableInfo = useSelector((state: RootState) => state.A3Fliqlo.tableInfo);
+
+  const columns = useMemo(() => {
+    return [
+      {
+        title: "序号",
+        render: (_: any, __: any, index: number) => index + 1,
+      },
+      {
+        title: "图片",
+        render: (item: A3TableType) => (
+          <div className="tableImgAuto">
+            <ImageLazy width={60} height={60} src={item.thumb} />
+          </div>
+        ),
+      },
+      {
+        title: "启用状态",
+        render: (item: A3TableType) => (
+          <Switch
+            checkedChildren="启用"
+            unCheckedChildren="停用"
+            checked={item.display === 1}
+            onChange={(val) => isEnabledClickFu(val, item.id!)}
+          />
+        ),
+      },
+      {
+        title: "操作",
+        render: (item: A3TableType, record: any, index: number) => (
+          <>
+            <Button
+              size="small"
+              type="text"
+              onClick={() => moveTableFu(item.id, tableInfo[index - 1].id)}
+              disabled={index === 0}
+            >
+              上移
+            </Button>
+            <Button
+              size="small"
+              type="text"
+              onClick={() => moveTableFu(item.id, tableInfo[index + 1].id)}
+              disabled={index === tableInfo.length - 1}
+            >
+              下移
+            </Button>
+
+            <Popconfirm
+              title="删除后无法恢复，是否删除?"
+              okText="删除"
+              cancelText="取消"
+              onConfirm={() => delTableFu(item.id)}
+            >
+              <Button size="small" type="text" danger>
+                删除
+              </Button>
+            </Popconfirm>
+          </>
+        ),
+      },
+    ];
+  }, [delTableFu, isEnabledClickFu, moveTableFu, tableInfo]);
+
+  // 点击上传图片
+  const addClickFu = useCallback(() => {
+    if (tableInfo.length >= 5) return MessageFu.warning("最多增加5条数据!");
+    setOpen(true);
+  }, [tableInfo.length]);
+
   return (
     <div className={styles.A3Fliqlo}>
       <div className="pageTitle">屏保管理</div>
+      <div className="A3_top">
+        <div className="A3_title">自动播放管理</div>
+
+        <div className="A3_tit">
+          <div>自动播放：</div>
+
+          {edit ? (
+            <Switch
+              checkedChildren="开启"
+              unCheckedChildren="关闭"
+              checked={open2}
+              onChange={(val) => setOpen2(val)}
+            />
+          ) : (
+            <span>{open1 ? "开启" : "关闭"}</span>
+          )}
+          {edit ? (
+            <div className="A3_time">
+              <div className="A3_timeTxt">时间设置：</div>
+              <Input
+                style={{ width: 210 }}
+                value={time2}
+                onChange={(e) => time2ChangeFu(e.target.value)}
+                addonAfter="秒"
+                placeholder="请输入数字，不超过600"
+              />
+            </div>
+          ) : (
+            <div className="A3_time">超过 {time1} 秒时自动播放</div>
+          )}
+        </div>
+        <div className="A3_topBtn">
+          {edit ? (
+            <>
+              <Popconfirm
+                title="放弃编辑后，信息将不会保存!"
+                okText="放弃"
+                cancelText="取消"
+                onConfirm={() => setEdit(false)}
+              >
+                <Button>取消</Button>
+              </Popconfirm>
+              &emsp;
+              <Button type="primary" onClick={btnOk}>
+                提交
+              </Button>
+            </>
+          ) : (
+            <Button type="primary" onClick={() => setEdit(true)}>
+              修改
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* 关于表格 */}
+
+      <div className="tableBox">
+        <div className="A3_title A3_title2">
+          内容管理
+          <div className="A3_Fbtn" onClick={addClickFu}>
+            <Button type="primary">上传图片</Button>
+          </div>
+        </div>
+
+        <Table
+          dataSource={tableInfo}
+          columns={columns}
+          rowKey="id"
+          pagination={false}
+        />
+      </div>
+
+      {/* 点击上传图片出来的弹窗 */}
+      {open ? (
+        <A3Modal
+          pid={pid}
+          closeFu={() => setOpen(false)}
+          addTableFu={() => getListFu()}
+        />
+      ) : null}
     </div>
   );
 }

后台管理/src/pages/A4User/index.module.scss

@@ -19,7 +19,6 @@
       .ant-table-body {
         height: 617px;
         overflow-y: auto !important;
-        overflow-y: overlay !important;
 
         .ant-table-row {
           .ant-table-cell {

后台管理/src/pages/A5Log/index.module.scss

@@ -24,7 +24,6 @@
       .ant-table-body {
         height: 630px;
         overflow-y: auto !important;
-        overflow-y: overlay !important;
 
       }
     }

后台管理/src/pages/Login/index.module.scss

@@ -65,6 +65,8 @@
           width: 100%;
           margin: 0 auto 40px;
 
+
+
           .ant-input-suffix .ant-input-password-icon {
             color: #fff;
             font-size: 22px;
@@ -92,6 +94,8 @@
           height: 60px;
           line-height: 60px;
           background-clip: content-box;
+          color: #fff;
+
         }
 
         input:-webkit-autofill {

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

@@ -0,0 +1,56 @@
+import http from "@/utils/http";
+import { AppDispatch } from "..";
+
+/**
+ * 获取列表
+ */
+export const A3_APIgetList = (parentId: number) => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.get(`cms/screen/getList/${parentId}`);
+    if (res.code === 0) {
+      dispatch({ type: "A3/getList", payload: res.data });
+    }
+  };
+};
+
+/**
+ * 获取配置
+ */
+export const A3_APIgetConfig = () => {
+  return http.get("cms/screen/getConfig");
+};
+
+/**
+ * 修改配置
+ */
+export const A3_APIupdateConfig = (content: string) => {
+  return http.post("cms/screen/updateConfig", { moduleKey: "goods", content });
+};
+
+/**
+ * 新增图片列表
+ */
+export const A3_APIaddTable = (data: unknown) => {
+  return http.post("cms/screen/save", data);
+};
+
+/**
+ * 是否显示
+ */
+export const A3_APIdisplay = (id: number, display: 0 | 1) => {
+  return http.get(`cms/screen/display/${id}/${display}`);
+};
+
+/**
+ * 排序
+ */
+export const A3_APIsort = (id1: number, id2: number) => {
+  return http.get(`cms/screen/sort/${id1}/${id2}`);
+};
+
+/**
+ * 删除
+ */
+export const A3_APIdel = (id: number) => {
+  return http.get(`cms/screen/remove/${id}`);
+};

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

@@ -0,0 +1,22 @@
+import { A3TableType } from "@/types";
+
+// 初始化状态
+const initState = {
+  // 表格数据
+  tableInfo: [] as A3TableType[],
+};
+
+// 定义 action 类型
+type Props = { type: "A3/getList"; payload: A3TableType[] };
+
+// 频道 reducer
+export default function A1Reducer(state = initState, action: Props) {
+  switch (action.type) {
+    // 获取列表数据
+    case "A3/getList":
+      return { ...state, tableInfo: action.payload };
+
+    default:
+      return state;
+  }
+}

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

@@ -5,6 +5,7 @@ import { combineReducers } from "redux";
 import A0Layout from "./layout";
 import A1Order from "./A1Order";
 import A2Gallery from "./A2Gallery";
+import A3Fliqlo from "./A3Fliqlo";
 import A4User from "./A4User";
 import A5Log from "./A5Log";
 
@@ -13,6 +14,7 @@ const rootReducer = combineReducers({
   A0Layout,
   A1Order,
   A2Gallery,
+  A3Fliqlo,
   A4User,
   A5Log,
 });

后台管理/src/types/api/A3Fliqlo.ts

@@ -0,0 +1,15 @@
+export type A3TableType = {
+	content: string;
+	createTime: string;
+	creatorId: number;
+	creatorName: string;
+	description: string;
+	display?: any;
+	id: number;
+	moduleKey: string;
+	parentId: number;
+	sort: number;
+	thumb: string;
+	updateTime: string;
+}
+ 

后台管理/src/types/index.d.ts

@@ -1,5 +1,6 @@
 export * from './api/layot'
 export * from './api/A1Order'
 export * from './api/A2Gallery'
+export * from './api/A3Fliqlo'
 export * from './api/A4User'
 export * from './api/A5Log'