upp

houtai/src/pages/A6Swpage/SwAdd/index.module.scss

@@ -0,0 +1,102 @@
+.SwAdd {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  background-color: #fff;
+  border-radius: 10px;
+
+  :global {
+    .myFromBox {
+      padding-top: 20px;
+      width: 1200px;
+      padding-right: 400px;
+      height: calc(100% - 50px);
+
+      .myformBox {
+        .ant-btn-default {
+          width: 100px;
+        }
+
+        display: flex;
+        margin-bottom: 20px;
+
+        .label {
+          width: 100px;
+          text-align: right;
+
+          &>span {
+            position: relative;
+            top: 2px;
+            color: #ff4d4f;
+          }
+        }
+
+        .fileBoxRow_r {
+          position: relative;
+
+          .fileBoxRow_up {
+            color: #a6a6a6;
+            border-radius: 3px;
+            cursor: pointer;
+            font-size: 30px;
+            width: 100px;
+            height: 100px;
+            border: 1px dashed #797979;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+
+          }
+
+          .fileBoxRow_r_img {
+            width: 100px;
+            height: 100px;
+            position: relative;
+
+            .clearCover {
+              cursor: pointer;
+              z-index: 10;
+              position: absolute;
+              width: 50px;
+              height: 50px;
+              top: 50%;
+              transform: translateY(-50%);
+              right: -50px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              font-size: 24px;
+            }
+          }
+
+          .fileBoxRow_r_tit {
+            height: 46px;
+            margin-top: 5px;
+            font-size: 14px;
+            color: rgb(126, 124, 124);
+
+
+          }
+        }
+
+        .noUpThumb {
+          position: relative;
+          overflow: hidden;
+          opacity: 0;
+          transition: top .2s;
+          color: #ff4d4f;
+          top: -10px;
+        }
+
+        .noUpThumbAc {
+          top: 0;
+          opacity: 1;
+        }
+      }
+    }
+  }
+}

houtai/src/pages/A6Swpage/SwAdd/index.tsx

@@ -0,0 +1,228 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import styles from "./index.module.scss";
+import { Button, Form, FormInstance, Input, Popconfirm, Select } from "antd";
+import TextArea from "antd/es/input/TextArea";
+import { MessageFu } from "@/utils/message";
+import {
+  A6_APIgetInfo,
+  A6_APIsave,
+  A6_APIupImg,
+} from "@/store/action/A6Swpage";
+import { fileDomInitialFu } from "@/utils/domShow";
+import ImageLazy from "@/components/ImageLazy";
+import classNames from "classnames";
+import { PlusOutlined, CloseCircleOutlined } from "@ant-design/icons";
+
+type Props = {
+  id: number;
+  closeMoalFu: () => void;
+  addModelFu: () => void;
+};
+
+function SwAdd({ id, closeMoalFu, addModelFu }: Props) {
+  // 设置表单初始数据（区分编辑和新增）
+  const FormBoxRef = useRef<FormInstance>(null);
+
+  const getInfoFu = useCallback(async (id: number) => {
+    const res = await A6_APIgetInfo(id);
+    FormBoxRef.current?.setFieldsValue(res.data);
+    setCover(res.data.thumb);
+  }, []);
+
+  useEffect(() => {
+    if (id > 0) {
+      // 编辑
+      getInfoFu(id);
+    } else {
+      FormBoxRef.current?.setFieldsValue({ display: 1 });
+      // 新增
+    }
+  }, [getInfoFu, id]);
+
+  const [typeOk, setTypeOk] = useState(false);
+  const [cover, setCover] = useState("");
+  const myInput = useRef<HTMLInputElement>(null);
+
+  // 没有通过校验
+  const onFinishFailed = useCallback(() => {
+    setTypeOk(true);
+    // return MessageFu.warning("有表单不符号规则!");
+  }, []);
+
+  // 通过校验点击确定
+  const onFinish = useCallback(
+    async (values: any) => {
+      setTypeOk(true);
+
+      if (!cover) return;
+
+      const obj = {
+        ...values,
+        id: id > 0 ? id : null,
+        thumb: cover,
+      };
+
+      const res = await A6_APIsave(obj);
+      if (res.code === 0) {
+        MessageFu.success(id > 0 ? "编辑成功!" : "新增成功!");
+        addModelFu();
+        closeMoalFu();
+      }
+    },
+    [addModelFu, closeMoalFu, cover, id]
+  );
+
+  // 上传封面图
+  const handeUpPhoto = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files) {
+        // 拿到files信息
+        const filesInfo = e.target.files[0];
+        // 校验格式
+        const type = ["image/jpeg", "image/png"];
+        if (!type.includes(filesInfo.type)) {
+          e.target.value = "";
+          return MessageFu.warning("只支持jpg、png格式!");
+        }
+        // 校验大小
+        if (filesInfo.size > 10 * 1024 * 1024) {
+          e.target.value = "";
+          return MessageFu.warning("最大支持10M!");
+        }
+        // 创建FormData对象
+        const fd = new FormData();
+        // 把files添加进FormData对象（‘photo’为后端需要的字段）
+        fd.append("type", "thumb");
+        fd.append("file", filesInfo);
+
+        e.target.value = "";
+
+        try {
+          const res = await A6_APIupImg(fd);
+          if (res.code === 0) {
+            MessageFu.success("上传成功!");
+            setCover(res.data.filePath);
+          }
+          fileDomInitialFu();
+        } catch (error) {
+          fileDomInitialFu();
+        }
+      }
+    },
+    []
+  );
+
+  return (
+    <div className={styles.SwAdd}>
+      <div className="pageTitle">{id > 0 ? "编辑轮播图" : "新增轮播图"}</div>
+      <div className="myFromBox mySorrl">
+        <Form
+          ref={FormBoxRef}
+          name="basic"
+          labelCol={{ span: 3 }}
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+          autoComplete="off"
+        >
+          <Form.Item label="标题" name="name">
+            <Input maxLength={20} showCount placeholder="请输入内容" />
+          </Form.Item>
+          <Form.Item label="正文" name="description">
+            <TextArea
+              rows={8}
+              placeholder="请输入内容"
+              showCount
+              maxLength={1000}
+            />
+          </Form.Item>
+
+          {/* -----上传封面图片 */}
+          <div className="myformBox">
+            <input
+              id="upInput"
+              type="file"
+              accept=".png,.jpg,.jpeg"
+              ref={myInput}
+              onChange={(e) => handeUpPhoto(e)}
+            />
+
+            <div className="label">
+              <span>*</span> 图片：
+            </div>
+            <div className="fileBoxRow_r">
+              <div
+                hidden={cover !== ""}
+                className="fileBoxRow_up"
+                onClick={() => myInput.current?.click()}
+              >
+                <PlusOutlined />
+              </div>
+              <div className="fileBoxRow_r_img" hidden={cover === ""}>
+                {cover ? (
+                  <ImageLazy width={100} height={100} src={cover} />
+                ) : null}
+
+                <Popconfirm
+                  title="删除后无法恢复，是否删除?"
+                  okText="删除"
+                  cancelText="取消"
+                  onConfirm={() => setCover("")}
+                >
+                  <div className="clearCover">
+                    <CloseCircleOutlined />
+                  </div>
+                </Popconfirm>
+              </div>
+              <div className="fileBoxRow_r_tit">
+                支持png、jpg和jpeg的图片格式；最大支持10M.
+                <br />
+                <div
+                  className={classNames(
+                    "noUpThumb",
+                    !cover && typeOk ? "noUpThumbAc" : ""
+                  )}
+                >
+                  请上传图片!
+                </div>
+              </div>
+            </div>
+          </div>
+          <Form.Item
+            label="展示状态"
+            name="display"
+            rules={[{ required: true, message: "请选择展示状态!" }]}
+          >
+            <Select
+              placeholder="请选择"
+              style={{ width: 400 }}
+              options={[
+                { value: 1, label: "展示" },
+                { value: 0, label: "不展示" },
+              ]}
+            />
+          </Form.Item>
+          {/* 确定和取消按钮 */}
+          <br />
+          <Form.Item wrapperCol={{ offset: 9, span: 16 }}>
+            <Button type="primary" htmlType="submit">
+              提交
+            </Button>
+            &emsp;
+            <Popconfirm
+              title="放弃编辑后，信息将不会保存!"
+              okText="放弃"
+              cancelText="取消"
+              onConfirm={closeMoalFu}
+            >
+              <Button>取消</Button>
+            </Popconfirm>
+          </Form.Item>
+        </Form>
+      </div>
+    </div>
+  );
+}
+
+const MemoSwAdd = React.memo(SwAdd);
+
+export default MemoSwAdd;

houtai/src/pages/A6Swpage/index.module.scss

@@ -0,0 +1,51 @@
+.A6Swpage {
+  position: relative;
+
+  :global {
+    .titleBtn {
+      position: absolute;
+      left: 240px;
+      top: -3px;
+    }
+
+    .mainBox {
+      margin-top: 20px;
+      width: 100%;
+      height: calc(100% - 70px);
+      overflow-y: auto;
+      background-color: #fff;
+      border-radius: 10px;
+
+      .incoTitle {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .hotTitleInco1 {
+          cursor: pointer;
+          width: 16px;
+          height: 16px;
+          border-radius: 50%;
+          background-color: #696969;
+          margin-left: 8px;
+          text-align: center;
+          line-height: 16px;
+          color: #fff;
+          font-size: 12px;
+        }
+      }
+
+      .ant-table-body {
+        height: 680px;
+        overflow-y: auto !important;
+
+        .ant-table-row {
+          .ant-table-cell {
+            padding: 8px;
+          }
+        }
+      }
+
+    }
+  }
+}

houtai/src/pages/A6Swpage/index.tsx

@@ -0,0 +1,252 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import styles from "./index.module.scss";
+import { ExclamationOutlined } from "@ant-design/icons";
+
+// 表格拖动排序-----------------
+import { DndProvider, useDrag, useDrop } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { MessageFu } from "@/utils/message";
+import { Button, Popconfirm, Table, Tooltip } from "antd";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "@/store";
+import { A6TableType } from "@/types";
+import { A6_APIdel, A6_APIgetList, A6_APIsort } from "@/store/action/A6Swpage";
+import SwAdd from "./SwAdd";
+import ImageLazy from "@/components/ImageLazy";
+
+function A6Swpage() {
+  const dispatch = useDispatch();
+
+  // 发送请求获取列表数据
+  const getList = useCallback(() => {
+    dispatch(A6_APIgetList());
+  }, [dispatch]);
+
+  useEffect(() => {
+    getList();
+  }, [getList]);
+
+  // 点击删除
+  const delTableFu = useCallback(
+    async (id: number) => {
+      const res = await A6_APIdel(id);
+      if (res.code === 0) {
+        MessageFu.success("删除成功!");
+        getList();
+      }
+    },
+    [getList]
+  );
+
+  // 有关表格数据
+  const { tableInfo: results } = useSelector(
+    (state: RootState) => state.swpageReducer
+  );
+
+  const columns = useMemo(() => {
+    return [
+      {
+        title: () => (
+          <div className="incoTitle">
+            序号
+            {results.length >= 2 ? (
+              <Tooltip title="按住鼠标可拖动表格调整顺序">
+                <div className="hotTitleInco1">
+                  <ExclamationOutlined />
+                </div>
+              </Tooltip>
+            ) : null}
+          </div>
+        ),
+        width: 100,
+        render: (text: any, item: any, index: number) => index + 1,
+      },
+      {
+        title: "标题",
+        render: (item: A6TableType) => (item.name ? item.name : "（空）"),
+      },
+      {
+        title: "正文",
+        render: (item: A6TableType) =>
+          item.description ? (
+            item.description.length > 35 ? (
+              <span style={{ cursor: "pointer" }} title={item.description}>
+                {item.description.substring(0, 35) + "..."}
+              </span>
+            ) : (
+              item.description
+            )
+          ) : (
+            "（空）"
+          ),
+      },
+      {
+        title: "图片",
+        render: (item: A6TableType) => (
+          <div className="tableImgAuto">
+            <ImageLazy width={60} height={60} src={item.thumb!} />
+          </div>
+        ),
+      },
+      {
+        title: "最近编辑时间",
+        dataIndex: "updateTime",
+      },
+      {
+        title: "展示状态",
+        width: 100,
+        render: (item: A6TableType) => (item.display === 1 ? "展示" : "不展示"),
+      },
+      {
+        title: "操作",
+        render: (item: A6TableType) => (
+          <>
+            <Button size="small" type="text" onClick={() => setEditId(item.id)}>
+              编辑
+            </Button>
+            <Popconfirm
+              title="删除后无法恢复，是否删除?"
+              okText="删除"
+              cancelText="取消"
+              onConfirm={() => delTableFu(item.id!)}
+            >
+              <Button size="small" type="text" danger>
+                删除
+              </Button>
+            </Popconfirm>
+          </>
+        ),
+      },
+    ];
+  }, [delTableFu, results.length]);
+
+  // 表格拖动排序-----------------
+  interface DraggableBodyRowProps
+    extends React.HTMLAttributes<HTMLTableRowElement> {
+    index: number;
+    moveRow: (dragIndex: number, hoverIndex: number) => void;
+  }
+
+  const type = "DraggableBodyRow";
+
+  const DraggableBodyRow = useCallback(
+    ({
+      index,
+      moveRow,
+      className,
+      style,
+      ...restProps
+    }: DraggableBodyRowProps) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const ref = useRef<HTMLTableRowElement>(null);
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const [{ isOver, dropClassName }, drop] = useDrop({
+        accept: type,
+        collect: (monitor) => {
+          const { index: dragIndex } = monitor.getItem() || {};
+          if (dragIndex === index) {
+            return {};
+          }
+          return {
+            isOver: monitor.isOver(),
+            dropClassName:
+              dragIndex < index ? " drop-over-downward" : " drop-over-upward",
+          };
+        },
+        drop: (item: { index: number }) => {
+          moveRow(item.index, index);
+        },
+      });
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const [, drag] = useDrag({
+        type,
+        item: { index },
+        collect: (monitor) => ({
+          isDragging: monitor.isDragging(),
+        }),
+      });
+      drop(drag(ref));
+
+      return (
+        <tr
+          ref={ref}
+          className={`${className}${isOver ? dropClassName : ""}`}
+          style={{ cursor: "move", ...style }}
+          {...restProps}
+        />
+      );
+    },
+    []
+  );
+
+  const components = {
+    body: {
+      row: DraggableBodyRow,
+    },
+  };
+
+  const moveRow = useCallback(
+    async (dragIndex: number, hoverIndex: number) => {
+      if (dragIndex === hoverIndex) return;
+      // 交互位置-之前的id
+      const beforeId = results[dragIndex].id;
+      const afterId = results[hoverIndex].id;
+
+      const res = await A6_APIsort(beforeId, afterId);
+
+      if (res.code === 0) getList();
+    },
+    [getList, results]
+  );
+
+  // 点击新增/编辑出来的页面
+  const [editId, setEditId] = useState(0);
+
+  return (
+    <div className={styles.A6Swpage}>
+      <div className="pageTitle">
+        轮播图管理
+        <div className="titleBtn" onClick={() => setEditId(-1)}>
+          <Button type="primary">新增</Button>
+        </div>
+      </div>
+      <div className="mainBox">
+        <DndProvider backend={HTML5Backend}>
+          <Table
+            scroll={{ y: 680 }}
+            dataSource={results}
+            columns={columns}
+            rowKey="id"
+            pagination={false}
+            components={components}
+            onRow={(_, index) => {
+              const attr = {
+                index,
+                moveRow,
+              };
+              return attr as React.HTMLAttributes<any>;
+            }}
+          />
+        </DndProvider>
+      </div>
+
+      {editId ? (
+        <SwAdd
+          id={editId}
+          closeMoalFu={() => setEditId(0)}
+          addModelFu={() => getList()}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+const MemoA6Swpage = React.memo(A6Swpage);
+
+export default MemoA6Swpage;

houtai/src/pages/Layout/index.tsx

@@ -23,11 +23,13 @@ import inco2 from "@/assets/img/inco2.png";
 import inco3 from "@/assets/img/inco3.png";
 import inco4 from "@/assets/img/inco4.png";
 import inco5 from "@/assets/img/inco5.png";
+import inco6 from "@/assets/img/inco6.png";
 import inco1Ac from "@/assets/img/inco1Ac.png";
 import inco2Ac from "@/assets/img/inco2Ac.png";
 import inco3Ac from "@/assets/img/inco3Ac.png";
 import inco4Ac from "@/assets/img/inco4Ac.png";
 import inco5Ac from "@/assets/img/inco5Ac.png";
+import inco6Ac from "@/assets/img/inco6Ac.png";
 import logonImg from "@/assets/img/logo2.png";
 import { MessageFu } from "@/utils/message";
 
@@ -78,6 +80,14 @@ function Layout() {
         inco: inco5,
         incoAc: inco5Ac,
       },
+      {
+        id: 600,
+        name: "轮播图管理",
+        path: "/swpage",
+        Com: React.lazy(() => import("../A6Swpage")),
+        inco: inco6,
+        incoAc: inco6Ac,
+      },
     ];
   }, []);
 

houtai/src/store/action/A6Swpage.ts

@@ -0,0 +1,70 @@
+import http from "@/utils/http";
+import store, { AppDispatch } from "..";
+import { domShowFu, progressDomFu } from "@/utils/domShow";
+import axios from "axios";
+
+/**
+ * 获取列表数据
+ */
+export const A6_APIgetList = () => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.get("cms/slideshow/getList");
+    if (res.code === 0) {
+      dispatch({ type: "swpage/getList", payload: res.data });
+    }
+  };
+};
+
+/**
+ * 上传封面图
+ */
+
+const CancelToken = axios.CancelToken;
+
+export const A6_APIupImg = (data: any) => {
+  domShowFu("#UpAsyncLoding", true);
+
+  return http.post("cms/slideshow/upload", data, {
+    timeout: 0,
+    // 显示进度条
+    onUploadProgress: (e: any) => {
+      const complete = (e.loaded / e.total) * 100 || 0;
+      progressDomFu(complete + "%");
+    },
+    // 取消上传
+    cancelToken: new CancelToken(function executor(c) {
+      store.dispatch({
+        type: "layout/closeUpFile",
+        payload: { fu: c, state: true },
+      });
+    }),
+  });
+};
+
+/**
+ * 新增和修改
+ */
+export const A6_APIsave = (data: any) => {
+  return http.post("cms/slideshow/save", data);
+};
+
+/**
+ * 删除
+ */
+export const A6_APIdel = (id: number) => {
+  return http.get(`cms/slideshow/remove/${id}`);
+};
+
+/**
+ * 详情
+ */
+export const A6_APIgetInfo = (id: number) => {
+  return http.get(`cms/slideshow/detail/${id}`);
+};
+
+/**
+ * 拖动排序
+ */
+export const A6_APIsort = (id1: number, id2: number) => {
+  return http.get(`cms/slideshow/sort/${id1}/${id2}`);
+};

houtai/src/store/reducer/A6Swpage.ts

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

houtai/src/store/reducer/index.ts

@@ -1,19 +1,21 @@
 // 导入合并reducer的依赖
-import { combineReducers } from 'redux'
-import newsReducer from './A2News'
-import goodsReducer from './A3Goods'
-import venueReducer from './A4Venue'
+import { combineReducers } from "redux";
+import newsReducer from "./A2News";
+import goodsReducer from "./A3Goods";
+import venueReducer from "./A4Venue";
+import swpageReducer from "./A6Swpage";
 
 // 导入 登录 模块的 reducer
-import layoutReducer from './layout'
+import layoutReducer from "./layout";
 
 // 合并 reducer
 const rootReducer = combineReducers({
   layoutStore: layoutReducer,
-  newsReducer:newsReducer,
-  goodsReducer:goodsReducer,
-  venueReducer:venueReducer
-})
+  newsReducer: newsReducer,
+  goodsReducer: goodsReducer,
+  venueReducer: venueReducer,
+  swpageReducer: swpageReducer,
+});
 
 // 默认导出
-export default rootReducer
+export default rootReducer;

houtai/src/types/api/A6Swpage.d.ts

@@ -0,0 +1,12 @@
+export type A6TableType = {
+  createTime: string;
+  creatorId: number;
+  creatorName: string;
+  description: string;
+  display: number;
+  id: number;
+  name: string;
+  sort: number;
+  thumb: string;
+  updateTime: string;
+};

houtai/src/types/index.d.ts

@@ -1,6 +1,7 @@
-export * from './api/layot'
-export * from './api/A1Hot'
+export * from "./api/layot";
+export * from "./api/A1Hot";
 
-export * from './api/A2News'
-export * from './api/A3Goods'
-export * from './api/A4Venue'
+export * from "./api/A2News";
+export * from "./api/A3Goods";
+export * from "./api/A4Venue";
+export * from "./api/A6Swpage";

houtai/src/utils/http.ts

@@ -7,10 +7,10 @@ import { domShowFu } from "./domShow";
 // 请求基地址
 export const baseURL =
   // 线下的图片地址需要加上/api/
-  // process.env.NODE_ENV === "development"
-  //   ? "http://192.168.20.55:8042/api/"
-  //   : "";
-  process.env.NODE_ENV === "development" ? "https://bengbubwg.4dage.com" : "";
+  process.env.NODE_ENV === "development"
+    ? "http://192.168.20.55:8042/api/"
+    : "";
+  // process.env.NODE_ENV === "development" ? "https://bengbubwg.4dage.com" : "";
 
 // 处理  类型“AxiosResponse<any, any>”上不存在属性“code”
 declare module "axios" {
@@ -23,10 +23,10 @@ declare module "axios" {
 // 创建 axios 实例
 const http = axios.create({
   // --------线下的地址不用加/api/
-  // baseURL: baseURL,
+  baseURL: baseURL,
 
   // --------打包或线上环境接口需要加上api/
-  baseURL: baseURL + "/api/",
+  // baseURL: baseURL + "/api/",
   timeout: 5000,
 });