upp

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

@@ -66,7 +66,7 @@ function ZA_Table({ myType, setEditId, tableInfo }: Props, ref: any) {
     (e: React.ChangeEvent<HTMLInputElement>) => {
       clearTimeout(nameTime.current);
       nameTime.current = window.setTimeout(() => {
-        setGetData({ ...getData, searchKey: e.target.value });
+        setGetData({ ...getData, searchKey: e.target.value, pageNum: 1 });
       }, 500);
     },
     [getData]

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

@@ -54,7 +54,7 @@ function B2Goods() {
     (e: React.ChangeEvent<HTMLInputElement>) => {
       clearTimeout(nameTime.current);
       nameTime.current = window.setTimeout(() => {
-        setFromData({ ...fromData, searchKey: e.target.value });
+        setFromData({ ...fromData, searchKey: e.target.value, pageNum: 1 });
       }, 500);
     },
     [fromData]

后台/src/pages/C1Message/index.module.scss

@@ -1,5 +1,30 @@
-.C1Message{
-  :global{
-    
+.C1Message {
+  :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;
+          }
+        }
+      }
+    }
   }
 }

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

@@ -1,9 +1,147 @@
-import React from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import styles from "./index.module.scss";
+import { Button, DatePicker, Popconfirm, Table } from "antd";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "@/store";
+import { C1_APIdel, C1_APIgetList } from "@/store/action/C1Message";
+import { C1TableType } from "@/types/api/C1Message";
+import { MessageFu } from "@/utils/message";
+
+const { RangePicker } = DatePicker;
+
 function C1Message() {
+  const dispatch = useDispatch();
+
+  const [fromData, setFromData] = useState({
+    pageNum: 1,
+    pageSize: 10,
+    startTime: "",
+    endTime: "",
+  });
+
+  useEffect(() => {
+    dispatch(C1_APIgetList(fromData));
+  }, [dispatch, fromData]);
+
+  // 时间选择器改变
+  const timeChange = (_: any, dateString: any) => {
+    let startTime = "";
+    let endTime = "";
+    if (dateString[0] && dateString[1]) {
+      startTime = dateString[0] + " 00:00:00";
+      endTime = dateString[1] + " 23:59:59";
+    }
+    setFromData({ ...fromData, startTime, endTime, pageNum: 1 });
+  };
+
+  // 点击重置
+  const [inputKey, setInputKey] = useState(1);
+  const resetSelectFu = useCallback(() => {
+    // 把2个输入框和时间选择器清空
+    setInputKey(Date.now());
+    setFromData({
+      pageNum: 1,
+      pageSize: 10,
+      startTime: "",
+      endTime: "",
+    });
+  }, []);
+
+  // 点击删除
+  const delTableFu = useCallback(
+    async (id: number) => {
+      const res = await C1_APIdel(id);
+      if (res.code === 0) {
+        MessageFu.success("删除成功!");
+        dispatch(C1_APIgetList(fromData));
+      }
+    },
+    [dispatch, fromData]
+  );
+
+  const { tableInfo } = useSelector((state: RootState) => state.C1Message);
+
+  const columns = useMemo(() => {
+    return [
+      {
+        title: "留言时间",
+        dataIndex: "createTime",
+      },
+      {
+        title: "用户名",
+        dataIndex: "nickName",
+      },
+      {
+        title: "留言内容",
+        render: (item: C1TableType) =>
+          item.content.length >= 50 ? (
+            <span style={{ cursor: "pointer" }} title={item.content}>
+              {item.content.substring(0, 50) + "..."}
+            </span>
+          ) : (
+            item.content
+          ),
+      },
+
+      {
+        title: "操作",
+        render: (item: C1TableType) => (
+          <Popconfirm
+            title="删除后无法恢复，是否删除?"
+            okText="删除"
+            cancelText="取消"
+            onConfirm={() => delTableFu(item.id!)}
+          >
+            <Button size="small" type="text" danger>
+              删除
+            </Button>
+          </Popconfirm>
+        ),
+      },
+    ];
+  }, [delTableFu]);
+
+  // 页码变化
+  const paginationChange = useCallback(
+    () => (pageNum: number, pageSize: number) => {
+      setFromData({ ...fromData, pageNum, pageSize });
+    },
+    [fromData]
+  );
+
   return (
     <div className={styles.C1Message}>
       <div className="pageTitle">留言</div>
+      {/* 顶部搜索 */}
+      <div className="top">
+        <span>留言日期：</span>
+        <RangePicker
+          style={{ width: 300 }}
+          key={inputKey}
+          onChange={timeChange}
+        />
+        &emsp;&emsp;
+        <Button onClick={resetSelectFu}>重置</Button>
+      </div>
+
+      {/* 表格主体 */}
+      <div className="tableBox">
+        <Table
+          scroll={{ y: 586 }}
+          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>
   );
 }

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

@@ -0,0 +1,25 @@
+import http from "@/utils/http";
+import { AppDispatch } from "..";
+
+/**
+ * 获取 留言 列表
+ */
+export const C1_APIgetList = (data: any) => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.post("cms/message/pageList", data);
+    if (res.code === 0) {
+      const { records, total } = res.data;
+      dispatch({
+        type: "C1Message/getList",
+        payload: { list: records, total: total },
+      });
+    }
+  };
+};
+
+/**
+ * 删除用户
+ */
+export const C1_APIdel = (id: number) => {
+  return http.get(`cms/message/del/${id}`);
+};

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

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

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

@@ -12,6 +12,7 @@ import A6Custom from "./A6Custom";
 import A7Project from "./A7Project";
 import B1Plate from "./B1Plate";
 import B2Goods from "./B2Goods";
+import C1Message from "./C1Message";
 import D1User from "./D1User";
 import D2Log from "./D2Log";
 
@@ -27,6 +28,7 @@ const rootReducer = combineReducers({
   A7Project,
   B1Plate,
   B2Goods,
+  C1Message,
   D1User,
   D2Log,
 });

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

@@ -0,0 +1,10 @@
+export type C1TableType = {
+  content: string;
+  createTime: string;
+  creatorId?: any;
+  creatorName: string;
+  id: number;
+  nickName: string;
+  updateTime: string;
+  wxUserId: number;
+};