up-增加展览排序功能

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

@@ -0,0 +1,51 @@
+.A2ZSort {
+  :global {
+    .pageTop {
+      border-radius: 10px;
+      padding: 20px 15px 20px;
+      background-color: #fff;
+      display: flex;
+      align-items: center;
+    }
+
+    .tableBox {
+      border-radius: 10px;
+      overflow: hidden;
+      margin-top: 15px;
+      height: calc(100% - 80px);
+      background-color: #fff;
+
+      .ant-table-body {
+        height: 617px;
+        overflow-y: auto !important;
+
+        .ant-table-row {
+          .ant-table-cell {
+            padding: 10px;
+          }
+        }
+      }
+
+      .sortBox {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        input {
+          padding-left: 3px;
+          width: 80px;
+          height: 22px;
+          line-height: 22px;
+
+          &:focus {
+            outline: none;
+          }
+        }
+      }
+
+    }
+
+  }
+}

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

@@ -0,0 +1,244 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import styles from "./index.module.scss";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  A2_APIgetListSort,
+  A2_APIgetListSortAll,
+  A2_APIsort,
+} from "@/store/action/A2Gallery";
+import { RootState } from "@/store";
+import { Input, Table } from "antd";
+import { A2TableType } from "@/types";
+import ImageLazy from "@/components/ImageLazy";
+
+import { SortAscendingOutlined } from "@ant-design/icons";
+import { MessageFu } from "@/utils/message";
+
+function A2ZSort() {
+  const dispatch = useDispatch();
+
+  const [fromData, setFromData] = useState({
+    pageNum: 1,
+    pageSize: 10,
+    searchKey: "",
+  });
+
+  const getListFu = useCallback(() => {
+    dispatch(A2_APIgetListSort(fromData));
+  }, [dispatch, fromData]);
+
+  useEffect(() => {
+    getListFu();
+  }, [getListFu]);
+
+  // 名称的输入
+  const nameTime = useRef(-1);
+  const nameChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      clearTimeout(nameTime.current);
+      nameTime.current = window.setTimeout(() => {
+        setFromData({
+          ...fromData,
+          searchKey: e.target.value,
+          pageNum: 1,
+        });
+      }, 500);
+    },
+    [fromData]
+  );
+
+  // 从仓库获取表格数据
+  const tableInfo = useSelector(
+    (state: RootState) => state.A2Gallery.sortTableInfo
+  );
+  // 页码变化
+  const paginationChange = useCallback(
+    () => (pageNum: number, pageSize: number) => {
+      setFromData({ ...fromData, pageNum, pageSize });
+    },
+    [fromData]
+  );
+
+  // 所有数据
+  const [dataAll, setDataAll] = useState({
+    list: [] as A2TableType[],
+    total: 0,
+  });
+
+  const getListAll = useCallback(async () => {
+    const res = await A2_APIgetListSortAll();
+    if (res.code === 0) {
+      setDataAll({ list: res.data.records, total: res.data.total });
+    }
+  }, []);
+
+  useEffect(() => {
+    getListAll();
+  }, [getListAll]);
+
+  // 有关排序的操作：
+
+  const showInpRef = useRef<HTMLInputElement>(null);
+  const [sortClickNum, setSortClickNum] = useState(-1);
+
+  const [sortValue, setSortValue] = useState("");
+
+  //  点击排序
+  const sortShowFu = useCallback((sort: number) => {
+    setSortClickNum(sort);
+    setSortValue(sort + "");
+    setTimeout(() => {
+      if (showInpRef.current) showInpRef.current.focus();
+    }, 100);
+  }, []);
+
+  const sortValueChange = useCallback(
+    (val: string) => {
+      if (Number(val) > dataAll.total) val = dataAll.total + "";
+      setSortValue(val.replace(/^(0+)|[^\d]+/g, ""));
+    },
+    [dataAll.total]
+  );
+
+  const sortOkFu = useCallback(
+    async (sort: number) => {
+      if (!sortValue) return MessageFu.warning("请输入序号值!");
+
+      let oldId = 0;
+      let newId = 0;
+
+      dataAll.list.forEach((v) => {
+        if (v.sort === sort) oldId = v.id;
+        if (Number(sortValue) === v.sort) newId = v.id;
+      });
+
+      if (oldId === newId) return MessageFu.warning("不能和之前的序号一样!");
+
+      const res = await A2_APIsort(oldId, newId);
+
+      if (res.code === 0) {
+        MessageFu.success("修改序号成功!");
+        setSortClickNum(-1);
+        getListFu();
+      }
+    },
+    [dataAll.list, getListFu, sortValue]
+  );
+
+  const inputKeyFu = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>, sort: number) => {
+      if (e.key === "Enter") {
+        sortOkFu(sort);
+        e.preventDefault();
+      }
+    },
+    [sortOkFu]
+  );
+
+  const columns = useMemo(() => {
+    return [
+      {
+        title: "序号",
+        width: 100,
+        dataIndex: "sort",
+        // render: (text: any, record: any, index: any) =>
+        //   index + 1 + (fromData.pageNum - 1) * fromData.pageSize,
+      },
+      {
+        title: "展览名称",
+        dataIndex: "name",
+      },
+      {
+        title: "封面图",
+        render: (item: A2TableType) => (
+          <div className="tableImgAuto">
+            <ImageLazy width={60} height={60} src={item.thumb} />
+          </div>
+        ),
+      },
+      {
+        title: "标签",
+        render: (item: A2TableType) => (item.tag ? item.tag : "（空）"),
+      },
+      {
+        title: "展览地点",
+        dataIndex: "address",
+      },
+      {
+        title: "操作",
+        width: 200,
+        render: (item: A2TableType) => (
+          <div className="sortBox">
+            <SortAscendingOutlined
+              hidden={sortClickNum === item.sort}
+              onClick={() => sortShowFu(item.sort)}
+            />
+            &emsp;
+            {sortClickNum === item.sort ? (
+              <input
+                onBlur={() => setSortClickNum(-1)}
+                onKeyDown={(e) => inputKeyFu(e, item.sort)}
+                ref={showInpRef}
+                maxLength={5}
+                type="text"
+                value={sortValue}
+                onChange={(e) => sortValueChange(e.target.value)}
+              />
+            ) : null}
+          </div>
+        ),
+      },
+    ];
+  }, [inputKeyFu, sortClickNum, sortShowFu, sortValue, sortValueChange]);
+
+  return (
+    <div className={styles.A2ZSort}>
+      <div className="pageTitle">展览排序</div>
+
+      <div className="pageTop">
+        <span>展览名称：</span>
+        <Input
+          maxLength={50}
+          style={{ width: 200 }}
+          placeholder="请输入关键字"
+          allowClear
+          onChange={(e) => nameChange(e)}
+        />
+        <span hidden={!dataAll.total}>
+          &emsp;&emsp;点击 &nbsp;
+          <SortAscendingOutlined /> &nbsp;输入&nbsp;1-{dataAll.total}
+          &nbsp; 的整数，按Enter交换序号排序
+        </span>
+      </div>
+
+      {/* 表格主体 */}
+      <div className="tableBox">
+        <Table
+          scroll={{ y: 617 }}
+          dataSource={tableInfo.list}
+          columns={columns}
+          rowKey="id"
+          pagination={{
+            showQuickJumper: true,
+            position: ["bottomCenter"],
+            showSizeChanger: true,
+            current: fromData.pageNum,
+            pageSize: fromData.pageSize,
+            total: tableInfo.total,
+            onChange: paginationChange(),
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+const MemoA2ZSort = React.memo(A2ZSort);
+
+export default MemoA2ZSort;

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

@@ -19,7 +19,7 @@ import { passWordEditAPI } from "@/store/action/layout";
 import { getTokenInfo, removeTokenInfo } from "@/utils/storage";
 import { MessageFu } from "@/utils/message";
 import { RouterType } from "@/types";
-import logoImg from '@/assets/img/logo.png'
+import logoImg from "@/assets/img/logo.png";
 
 const NotFound = React.lazy(() => import("@/components/NotFound"));
 
@@ -39,12 +39,17 @@ function Layout() {
         Com: React.lazy(() => import("../A2Gallery")),
       },
       {
+        id: 4,
+        name: "展览排序",
+        path: "/sort",
+        Com: React.lazy(() => import("../A2ZSort")),
+      },
+      {
         id: 3,
         name: "屏保管理",
         path: "/fliqlo",
         Com: React.lazy(() => import("../A3Fliqlo")),
       },
-
     ];
     return arr;
   }, []);

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

@@ -18,7 +18,6 @@ export const A2_APIgetList = (data: any, flag?: boolean) => {
   };
 };
 
-
 /**
  * 通过id获取详情
  */
@@ -46,3 +45,36 @@ export const A2_APIdelItem = (id: number) => {
 export const A2_APIupdateIndex = (id: number, parentId: number) => {
   return http.get(`cms/exhibition/updateIndex/${id}/${parentId}`);
 };
+
+/**
+ * 排序-----------展览列表
+ */
+export const A2_APIgetListSort = (data: any) => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.post("cms/exhibition/exhibition/pageCityList", data);
+    if (res.code === 0) {
+      const obj = {
+        list: res.data.records,
+        total: res.data.total,
+      };
+      dispatch({ type: "A2/sortGetList", payload: obj });
+    }
+  };
+};
+
+/**
+ * 排序-----------展览列表所有
+ */
+export const A2_APIgetListSortAll = () => {
+  return http.post("cms/exhibition/exhibition/pageCityList", {
+    pageNum: 1,
+    pageSize: 99999,
+  });
+};
+
+/**
+ * 排序-----------交换位置
+ */
+export const A2_APIsort = (id1: number, id2: number) => {
+  return http.get(`cms/exhibition/sort/${id1}/${id2}`);
+};

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

@@ -54,3 +54,4 @@ export const A3_APIsort = (id1: number, id2: number) => {
 export const A3_APIdel = (id: number) => {
   return http.get(`cms/screen/remove/${id}`);
 };
+

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

@@ -9,12 +9,19 @@ const initState = {
   },
   // 里程数据
   inTableInfo: [] as A2TableType[],
+
+  // 排序列表的数据
+  sortTableInfo: {
+    list: [] as A2TableType[],
+    total: 0,
+  },
 };
 
 // 定义 action 类型
 type Props =
   | { type: "A2/getList"; payload: { list: A2TableType[]; total: number } }
-  | { type: "A2/inGetList"; payload: A2TableType[] };
+  | { type: "A2/inGetList"; payload: A2TableType[] }
+  | { type: "A2/sortGetList"; payload: { list: A2TableType[]; total: number } };
 
 // 频道 reducer
 export default function A1Reducer(state = initState, action: Props) {
@@ -25,6 +32,9 @@ export default function A1Reducer(state = initState, action: Props) {
     // 里程获取列表数据
     case "A2/inGetList":
       return { ...state, inTableInfo: action.payload };
+    // 排序列表的数据
+    case "A2/sortGetList":
+      return { ...state, sortTableInfo: action.payload };
 
     default:
       return state;

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

@@ -4,6 +4,7 @@ import { A3TableType } from "@/types";
 const initState = {
   // 表格数据
   tableInfo: [] as A3TableType[],
+
 };
 
 // 定义 action 类型

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

@@ -16,5 +16,6 @@ export type A2TableType = {
 	thumb: string;
 	type: string;
 	updateTime: string;
+	sort:number
 }