upp

后台/src/components/ZA_Table/index.module.scss

@@ -0,0 +1,55 @@
+.ZA_Table {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  :global {
+    .top {
+      display: flex;
+      align-items: center;
+      background-color: #fff;
+      border-radius: 10px;
+      padding: 20px 15px;
+    }
+
+    .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;
+          }
+        }
+      }
+
+      .moveTit {
+        position: relative;
+        display: flex;
+
+        .inco {
+          cursor: pointer;
+          margin-left: 10px;
+          font-size: 14px;
+          color: #7e8293;
+        }
+      }
+    }
+
+    // 表头拖拽样式
+    .drop-over-downward td {
+      border-bottom: 2px dashed var(--themeColor) !important;
+    }
+
+    .drop-over-upward td {
+      border-top: 2px dashed var(--themeColor) !important;
+    }
+  }
+}

后台/src/components/ZA_Table/index.tsx

@@ -0,0 +1,291 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import styles from "./index.module.scss";
+import { Button, Input, Popconfirm, Table, Tooltip } from "antd";
+import { useDispatch } from "react-redux";
+import { A2_APIgetList, A2_APIsort } from "@/store/action/A2Country";
+import { A2TableType } from "@/types";
+import { ExclamationCircleFilled } from "@ant-design/icons";
+
+// 表格拖动排序-----------------
+import { DndProvider, useDrag, useDrop } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+
+type Props = {
+  setEditId: (id: number, flag: boolean) => void; //点击新增/编辑/查看
+  myType: "national" | "history" | "custom" | "project"; //区分各个不同板块
+  tableInfo: any; //表格数据
+};
+
+function ZA_Table({ myType, setEditId, tableInfo }: Props) {
+  const dispatch = useDispatch();
+
+  // 发送请求的数据
+  const [getData, setGetData] = useState({
+    pageNum: 1,
+    pageSize: 10,
+    searchKey: "",
+    myType,
+  });
+
+  // 每次数据变化的时候发送请求
+
+  const getListFu = useCallback(
+    (data: any) => {
+      if (myType === "custom") dispatch(A2_APIgetList(data));
+    },
+    [dispatch, myType]
+  );
+
+  useEffect(() => {
+    getListFu(getData);
+  }, [getData, getListFu]);
+
+  const [inputKey, setInputKey] = useState(1);
+
+  // 标题的输入
+  const nameTime = useRef(-1);
+  const nameChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      clearTimeout(nameTime.current);
+      nameTime.current = window.setTimeout(() => {
+        setGetData({ ...getData, searchKey: e.target.value });
+      }, 500);
+    },
+    [getData]
+  );
+
+  // 点击重置
+  const resetSelectFu = useCallback(() => {
+    setInputKey(Date.now());
+    setGetData({
+      pageNum: 1,
+      pageSize: 10,
+      searchKey: "",
+      myType,
+    });
+  }, [myType]);
+
+  // 点击删除
+  const delTableFu = useCallback((id: number) => {}, []);
+
+  // 页码变化
+  const paginationChange = useCallback(
+    () => (pageNum: number, pageSize: number) => {
+      setGetData({ ...getData, pageNum, pageSize });
+    },
+    [getData]
+  );
+  const columns = useMemo(() => {
+    return [
+      {
+        width: 100,
+        title: (
+          <div className="moveTit">
+            序号
+            <Tooltip title="按住鼠标可拖动表格调整顺序">
+              <div className="inco" hidden={tableInfo.list.length < 2}>
+                <ExclamationCircleFilled />
+              </div>
+            </Tooltip>
+          </div>
+        ),
+        render: (_1: any, _2: any, index: number) =>
+          index + 1 + (getData.pageNum - 1) * getData.pageSize,
+      },
+      {
+        title: "账号名",
+        dataIndex: "userName",
+      },
+      {
+        title: "用户昵称",
+        dataIndex: "nickName",
+      },
+
+      {
+        title: "真实姓名",
+        dataIndex: "realName",
+      },
+      {
+        title: "注册时间",
+        dataIndex: "createTime",
+      },
+
+      {
+        title: "操作",
+        render: (item: A2TableType) => (
+          <>
+            <>
+              <Button
+                size="small"
+                type="text"
+                onClick={() => setEditId(item.id, false)}
+              >
+                编辑
+              </Button>
+              <Popconfirm
+                title="删除后无法恢复，是否删除?"
+                okText="删除"
+                cancelText="取消"
+                onConfirm={() => delTableFu(item.id!)}
+              >
+                <Button size="small" type="text" danger>
+                  删除
+                </Button>
+              </Popconfirm>
+            </>
+          </>
+        ),
+      },
+    ];
+  }, [
+    delTableFu,
+    getData.pageNum,
+    getData.pageSize,
+    setEditId,
+    tableInfo.list.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 }) => {
+          console.log("pppppppppp", moveRow);
+          if (moveRow) 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 = tableInfo.list[dragIndex].id;
+      const afterId = tableInfo.list[hoverIndex].id;
+      console.log("交换位置", beforeId, afterId);
+
+      const res = await A2_APIsort(beforeId, afterId);
+
+      if (res.code === 0) {
+        if (myType === "custom") dispatch(A2_APIgetList(getData));
+      }
+    },
+    [dispatch, getData, myType, tableInfo.list]
+  );
+
+  return (
+    <div className={styles.ZA_Table}>
+      {/* 顶部搜索 */}
+      <div className="top">
+        <span>标题：</span>
+        <Input
+          key={inputKey}
+          maxLength={50}
+          style={{ width: 300 }}
+          placeholder="请输入关键字"
+          allowClear
+          onChange={(e) => nameChange(e)}
+        />
+        &emsp;&emsp;
+        <Button onClick={resetSelectFu}>重置</Button>
+        &emsp;&emsp;
+        <Button type="primary" onClick={() => setEditId(-1, false)}>
+          新增
+        </Button>
+      </div>
+      {/* 表格主体 */}
+      <div className="tableBox">
+        <DndProvider backend={HTML5Backend}>
+          <Table
+            scroll={{ y: 617 }}
+            columns={columns}
+            dataSource={tableInfo.list}
+            components={components}
+            rowKey="id"
+            pagination={{
+              showQuickJumper: true,
+              position: ["bottomCenter"],
+              showSizeChanger: true,
+              current: getData.pageNum,
+              pageSize: getData.pageSize,
+              total: tableInfo.total,
+              onChange: paginationChange(),
+            }}
+            onRow={(_, index) => {
+              const attr = {
+                index,
+                moveRow,
+              };
+              return attr as React.HTMLAttributes<any>;
+            }}
+          />
+        </DndProvider>
+      </div>
+    </div>
+  );
+}
+
+const MemoZA_Table = React.memo(ZA_Table);
+
+export default MemoZA_Table;

后台/src/pages/A1Plate/PlateEdit/index.tsx

@@ -100,8 +100,8 @@ function PlateEdit({ editId, isLook, closeFu, editFu }: Props) {
                 editId === 1
                   ? "350 x 670"
                   : editId === 2 || editId === 7
-                  ? "780 x 376"
-                  : "335 x 350"
+                  ? "781 x 376"
+                  : "334 x 349"
               }
             />
           </div>
@@ -122,7 +122,7 @@ function PlateEdit({ editId, isLook, closeFu, editFu }: Props) {
                 fileCheck={fromCheck}
                 size={5}
                 dirCode={dirCode}
-                sizeTxt="430 x 280"
+                sizeTxt="428 x 282"
               />
             </div>
           </div>

后台/src/pages/A1Plate/index.tsx

@@ -103,7 +103,7 @@ function A1Plate() {
       </div>
       {/* 顶部搜索 */}
       <div className="top">
-        <span>用户昵称：</span>
+        <span>标题：</span>
         <Input
           key={inputKey}
           maxLength={50}

后台/src/pages/A2Country/A2Edit/index.module.scss

@@ -0,0 +1,19 @@
+.A2Edit {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 99;
+  padding: 30px 20px;
+  background-color: #fff;
+  border-radius: 10px;
+
+  :global {
+    .A2Main{
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+    }
+  }
+}

后台/src/pages/A2Country/A2Edit/index.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import styles from "./index.module.scss";
+
+type Props = {
+  editId: number;
+  isLook: boolean;
+  closeFu: () => void;
+  editFu: () => void;
+  addFu: () => void;
+};
+
+function A2Edit({ editId, isLook, closeFu, editFu, addFu }: Props) {
+  return (
+    <div className={styles.A2Edit}>
+      <div className="A2Main mySorrl">
+        <div onClick={addFu}> 新增</div>
+        <div onClick={editFu}> 编辑</div>
+      </div>
+    </div>
+  );
+}
+
+const MemoA2Edit = React.memo(A2Edit);
+
+export default MemoA2Edit;

后台/src/pages/A2Country/index.tsx

@@ -1,12 +1,53 @@
-import React from "react";
+import React, { useCallback, useState } from "react";
 import styles from "./index.module.scss";
- function A2Country() {
-  
+import ZATable from "@/components/ZA_Table";
+import { useSelector } from "react-redux";
+import { RootState } from "@/store";
+import A2Edit from "./A2Edit";
+
+function A2Country() {
+  //点击新增/编辑/查看
+  const [editId, setEditId] = useState(0);
+  const [isLook, setIsLook] = useState(false);
+  const openPageFu = useCallback((id: number, flag: boolean) => {
+    setIsLook(flag);
+    setEditId(id);
+  }, []);
+
+  // 从仓库中获取数据
+  const { tableInfo } = useSelector((state: RootState) => state.A2Country);
+
+  // 编辑完成
+  const editFu = useCallback(() => {}, []);
+
+  // 新增完成
+  const addFu = useCallback(() => {}, []);
+
   return (
     <div className={styles.A2Country}>
-      <div className="pageTitle">国礼</div>
+      <div className="pageTitle">
+        {editId ? (isLook ? "查看" : "编辑") : "国礼"}
+      </div>
+
+      {/* 内容主体 */}
+      <ZATable
+        setEditId={(id, flag) => openPageFu(id, flag)}
+        myType="custom"
+        tableInfo={tableInfo}
+      />
+
+      {/* 新增/编辑/查看 */}
+      {editId ? (
+        <A2Edit
+          editId={editId}
+          isLook={isLook}
+          closeFu={() => setEditId(0)}
+          editFu={editFu}
+          addFu={addFu}
+        />
+      ) : null}
     </div>
-  )
+  );
 }
 
 const MemoA2Country = React.memo(A2Country);

后台/src/store/action/A2Country.ts

@@ -0,0 +1,27 @@
+import http from "@/utils/http";
+import store, { AppDispatch } from "..";
+import { domShowFu, progressDomFu } from "@/utils/domShow";
+import axios from "axios";
+
+/**
+ * 获取 国礼-历史-定制-工程 列表
+ */
+export const A2_APIgetList = (data: any) => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.post("cms/block/pageList", data);
+    if (res.code === 0) {
+      const { orders, total } = res.data;
+      dispatch({
+        type: "A2Country/getList",
+        payload: { list: orders, total: total },
+      });
+    }
+  };
+};
+
+/**
+ * 排序
+ */
+export const A2_APIsort = (id1: number, id2: number) => {
+  return http.get(`cms/block/sort/${id1}/${id2}`);
+};

后台/src/store/reducer/A2Country.ts

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

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

@@ -4,6 +4,7 @@ import { combineReducers } from "redux";
 // 导入 登录 模块的 reducer
 import A0Layout from "./layout";
 import A1Plate from "./A1Plate";
+import A2Country from "./A2Country";
 import D1User from "./D1User";
 import D2Log from "./D2Log";
 
@@ -11,6 +12,7 @@ import D2Log from "./D2Log";
 const rootReducer = combineReducers({
   A0Layout,
   A1Plate,
+  A2Country,
   D1User,
   D2Log,
 });

后台/src/types/api/A2Country.d.ts

@@ -0,0 +1 @@
+export type A2TableType = any;

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

@@ -1,4 +1,5 @@
 export * from './api/layot'
 export * from './api/A1Plate'
+export * from './api/A2Country'
 export * from './api/D1User'
 export * from './api/D2Log'