upp

src/pages/System/index.module.scss

@@ -1,5 +1,4 @@
 .System{
-  background-color: rebeccapurple;
   :global{
     
   }

src/pages/System/index.tsx

@@ -1,9 +1,62 @@
+import AuthRoute from "@/components/AuthRoute";
+import LeftBar from "@/components/LeftBar";
+import NotFound from "@/components/NotFound";
+import SpinLoding from "@/components/SpinLoding";
+import React from "react";
+import { useMemo } from "react";
+import { Route, Switch } from "react-router-dom";
 import styles from "./index.module.scss";
 export default function System() {
-  
+  const data = useMemo(() => {
+    return [
+      {
+        id: 1,
+        name: "用户管理",
+        Com: React.lazy(() => import("../SystemSon/System1")),
+        path: "/system",
+      },
+      {
+        id: 2,
+        name: "角色管理",
+        Com: React.lazy(() => import("../SystemSon/System2")),
+        path: "/system/2",
+      },
+      {
+        id: 3,
+        name: "系统日志",
+        Com: React.lazy(() => import("../SystemSon/System3")),
+        path: "/system/3",
+      },
+    ];
+  }, []);
   return (
     <div className={styles.System}>
-      <h1>System</h1>
+      <div className="leftBar">
+        <LeftBar data={data} />
+      </div>
+      {/* 三级路由页面 */}
+      <div className="rightMain">
+        <React.Suspense fallback={<SpinLoding />}>
+          <Switch>
+            {data.map((v, i) => (
+              <AuthRoute
+                exact
+                // exact={i === 0 ? true : false}
+                key={v.id}
+                path={v.path}
+                component={v.Com}
+              />
+            ))}
+            {/* 查看页面，无需权限 */}
+            {/* <AuthRoute path="/stores/3/look" component={LookStores3} /> */}
+            {/* 新增 */}
+            {/* {dataIn.map((v) => (
+              <AuthRoute key={v.id} path={v.path} component={v.Com} />
+            ))} */}
+            <Route path="*" component={NotFound} />
+          </Switch>
+        </React.Suspense>
+      </div>
     </div>
-  )
+  );
 }

src/pages/SystemSon/System1/index.css

@@ -0,0 +1,33 @@
+.systemUser .ant-modal {
+  width: 1000px !important;
+}
+.systemUser .systemTit {
+  border-top: 1px solid #999999;
+  padding-top: 15px;
+  width: 100%;
+  margin-bottom: 15px;
+}
+.systemUser .systemTit .systemTitRow {
+  position: relative;
+  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+}
+.systemUser .systemTit .systemTitRow > span {
+  display: inline-block;
+  width: 80px;
+  text-align: right;
+}
+.systemUser .systemTit .systemTitRow .bs {
+  position: absolute;
+  top: 7px;
+  left: 0px;
+  z-index: 10;
+  color: #ff4d4f;
+}
+.systemUser .systemTit .systemTitRow .bs2 {
+  left: 26px;
+}
+.systemRole .ant-modal {
+  width: 800px !important;
+}

src/pages/SystemSon/System1/index.less

@@ -0,0 +1,39 @@
+.systemUser {
+  .ant-modal {
+    width: 1000px !important;
+  }
+
+  .systemTit {
+    border-top: 1px solid #999999;
+    padding-top: 15px;
+    width: 100%;
+    margin-bottom: 15px;
+    .systemTitRow {
+      position: relative;
+      margin-bottom: 15px;
+      display: flex;
+      align-items: center;
+      &>span{
+        display: inline-block;
+        width: 80px;
+        text-align: right;
+      }
+      .bs {
+        position: absolute;
+        top: 7px;
+        left: 0px;
+        z-index: 10;
+        color: #ff4d4f;
+      }
+      .bs2{
+        left: 26px;
+      }
+    }
+  }
+}
+
+.systemRole {
+  .ant-modal {
+    width: 800px !important;
+  }
+}

src/pages/SystemSon/System1/index.module.scss

@@ -0,0 +1,20 @@
+.System1 {
+  :global {
+    .objectSonMain {
+      padding: 10px 30px;
+
+      .tableSelectBox {
+        margin-bottom: 20px;
+        width: 100%;
+        height: 40px;
+        display: flex;
+        align-items: center;
+
+        .row {
+          margin-right: 30px;
+        }
+      }
+
+    }
+  }
+}

src/pages/SystemSon/System1/index.tsx

@@ -0,0 +1,164 @@
+import BreadTit from "@/components/BreadTit";
+import { RootState } from "@/store";
+import { getUserListAPI } from "@/store/action/system";
+import { Button, Input, Modal, Table } from "antd";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import styles from "./index.module.scss";
+import "./index.css";
+function System1() {
+  const dispatch = useDispatch();
+
+  const pageNumRef = useRef(1);
+  const pagePageRef = useRef(10);
+  // 筛选和分页
+  const [tableSelect, setTableSelect] = useState({
+    searchKey: "",
+    pageSize: 10,
+    pageNum: 1,
+  });
+
+  // 账号的输入
+  const nameTime = useRef(-1);
+  const nameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    clearTimeout(nameTime.current);
+    nameTime.current = window.setTimeout(() => {
+      setTableSelect({ ...tableSelect, searchKey: e.target.value, pageNum: 1 });
+    }, 500);
+  };
+
+  useEffect(() => {
+    pageNumRef.current = tableSelect.pageNum;
+    pagePageRef.current = tableSelect.pageSize;
+    dispatch(getUserListAPI(tableSelect));
+  }, [dispatch, tableSelect]);
+
+  // 点击新增或者编辑按钮
+  const addSystem = (id?: any) => {
+    if (id) {
+      console.log("点了编辑");
+    } else {
+      console.log("点了新增");
+    }
+  };
+
+  // ---------关于表格
+
+  // 页码变化
+  const paginationChange = (pageNum: number, pageSize: number) => {
+    pageNumRef.current = pageNum;
+    pagePageRef.current = pageSize;
+    setTableSelect({ ...tableSelect, pageNum, pageSize });
+  };
+
+  const results = useSelector(
+    (state: RootState) => state.systemStore.tableList
+  );
+
+  const columns = useMemo(() => {
+    return [
+      {
+        title: "序号",
+        render: (text: any, record: any, index: any) =>
+          index + 1 + (pageNumRef.current - 1) * pagePageRef.current,
+      },
+      {
+        title: "账号",
+        dataIndex: "userName",
+      },
+      {
+        title: "角色",
+        dataIndex: "creatorName",
+      },
+      {
+        title: "手机号",
+        dataIndex: "phone",
+      },
+
+      {
+        title: "状态",
+        render: (item: any) => (item.day && item.status === 3 ? item.day : "-"),
+      },
+
+      {
+        title: "操作",
+        render: (item: any) => (
+          <>
+            <Button type="text" danger>
+              查看
+            </Button>
+          </>
+        ),
+      },
+    ];
+  }, []);
+
+  // 关于弹窗
+  const [open, setOpen] = useState(false);
+  const editRef = useRef("add");
+
+  return (
+    <div className={styles.System1}>
+      <div className="breadTit">
+        <BreadTit>
+          <div className="breadTitRow active">用户管理</div>
+        </BreadTit>
+      </div>
+      <div className="objectSonMain">
+        <div className="tableSelectBox">
+          <div className="row">
+            <span>账号：</span>
+            <Input
+              maxLength={10}
+              style={{ width: 150 }}
+              placeholder="请输入"
+              allowClear
+              onChange={(e) => nameChange(e)}
+            />
+          </div>
+          <div className="row">
+            <Button type="primary" onClick={() => addSystem()}>
+              新增用户
+            </Button>
+          </div>
+        </div>
+        {/* 表格主体 */}
+        <div className="tableMain">
+          <Table
+            scroll={{ y: 480 }}
+            dataSource={results.list}
+            columns={columns}
+            rowKey="id"
+            pagination={{
+              showQuickJumper: true,
+              position: ["bottomCenter"],
+              showSizeChanger: true,
+              current: tableSelect.pageNum,
+              pageSize: tableSelect.pageSize,
+              total: results.total,
+              onChange: paginationChange,
+            }}
+          />
+        </div>
+      </div>
+
+      {/* 点击新增或者编辑出来的弹窗 */}
+      <Modal
+        wrapClassName="systemUser"
+        destroyOnClose
+        open={open}
+        title={editRef.current === "add" ? "新增用户" : "编辑用户"}
+        onCancel={() => setOpen(false)}
+        footer={
+          [] // 设置footer为空，去掉 取消 确定默认按钮
+        }
+      >
+        <div className="systemTit"></div>
+      </Modal>
+    </div>
+  );
+}
+
+const MemoSystem1 = React.memo(System1);
+
+export default MemoSystem1;

src/pages/SystemSon/System2/index.module.scss

@@ -0,0 +1,20 @@
+.System2{
+  :global{
+    .objectSonMain {
+      padding: 10px 30px;
+
+      .tableSelectBox {
+        margin-bottom: 20px;
+        width: 100%;
+        height: 40px;
+        display: flex;
+        align-items: center;
+
+        .row {
+          margin-right: 30px;
+        }
+      }
+
+    }
+  }
+}

src/pages/SystemSon/System2/index.tsx

@@ -0,0 +1,205 @@
+import BreadTit from "@/components/BreadTit";
+import { RootState } from "@/store";
+import { getRoleListAPI } from "@/store/action/system";
+import { Button, Input, Modal, Popconfirm, Table } from "antd";
+import TextArea from "antd/es/input/TextArea";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useDispatch, useSelector } from "react-redux";
+import styles from "./index.module.scss";
+import "../System1/index.css";
+function System2() {
+  const dispatch = useDispatch();
+
+  // 筛选和分页
+  const [tableSelect, setTableSelect] = useState({
+    searchKey: "",
+    pageSize: 10,
+    pageNum: 1,
+  });
+
+  // 账号的输入
+  const nameTime = useRef(-1);
+  const nameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    clearTimeout(nameTime.current);
+    nameTime.current = window.setTimeout(() => {
+      setTableSelect({ ...tableSelect, searchKey: e.target.value, pageNum: 1 });
+    }, 500);
+  };
+  useEffect(() => {
+    dispatch(getRoleListAPI(tableSelect));
+  }, [dispatch, tableSelect]);
+
+  // 点击新增或者编辑按钮
+  const addRole = useCallback((id?: any) => {
+    if (id) {
+      editRef.current = "edit";
+      console.log("点了编辑");
+    } else {
+      editRef.current = "add";
+      console.log("点了新增");
+    }
+    setOpen(true);
+  }, []);
+  // 点击删除
+  const delOne = useCallback((id: number) => {
+    console.log(id);
+  }, []);
+
+  // ---------关于表格
+
+  // 页码变化
+  const paginationChange = (pageNum: number, pageSize: number) => {
+    setTableSelect({ ...tableSelect, pageNum, pageSize });
+  };
+  const results = useSelector(
+    (state: RootState) => state.systemStore.tableList
+  );
+  const columns = useMemo(() => {
+    return [
+      {
+        title: "角色名称",
+        dataIndex: "roleName",
+      },
+      {
+        title: "描述",
+        dataIndex: "roleDesc",
+      },
+      {
+        title: "成语数量",
+        dataIndex: "sort",
+      },
+
+      {
+        title: "状态",
+        render: (item: any) => (item.day && item.status === 3 ? item.day : "-"),
+      },
+
+      {
+        title: "操作",
+        render: (item: any) => (
+          <>
+            <Button type="text" danger onClick={() => addRole(item.id)}>
+              编辑
+            </Button>
+            &emsp;
+            <Popconfirm
+              title="确定删除吗?"
+              okText="确定"
+              cancelText="取消"
+              onConfirm={() => delOne(item.id)}
+            >
+              <Button type="text" danger>
+                删除
+              </Button>
+            </Popconfirm>
+          </>
+        ),
+      },
+    ];
+  }, [addRole, delOne]);
+
+  // --------关于弹窗
+  const [open, setOpen] = useState(true);
+  const editRef = useRef("add");
+
+  // 角色名称
+  const [roleName, setRoleName] = useState("");
+  // 描述
+  const [roleDesc, setRoleDesc] = useState("");
+
+  return (
+    <div className={styles.System2}>
+      <div className="breadTit">
+        <BreadTit>
+          <div className="breadTitRow active">角色管理</div>
+        </BreadTit>
+      </div>
+      <div className="objectSonMain">
+        <div className="tableSelectBox">
+          <div className="row">
+            <span>账号：</span>
+            <Input
+              maxLength={10}
+              style={{ width: 150 }}
+              placeholder="请输入"
+              allowClear
+              onChange={(e) => nameChange(e)}
+            />
+          </div>
+          <div className="row">
+            <Button type="primary" onClick={() => addRole()}>
+              新增角色
+            </Button>
+          </div>
+        </div>
+        {/* 表格主体 */}
+        <div className="tableMain">
+          <Table
+            scroll={{ y: 480 }}
+            dataSource={results.list}
+            columns={columns}
+            rowKey="id"
+            pagination={{
+              showQuickJumper: true,
+              position: ["bottomCenter"],
+              showSizeChanger: true,
+              current: tableSelect.pageNum,
+              pageSize: tableSelect.pageSize,
+              total: results.total,
+              onChange: paginationChange,
+            }}
+          />
+        </div>
+      </div>
+      {/* 点击新增或者编辑出来的弹窗 */}
+      <Modal
+        wrapClassName="systemUser systemRole"
+        destroyOnClose
+        open={open}
+        title={editRef.current === "add" ? "新增角色" : "编辑角色"}
+        onCancel={() => setOpen(false)}
+        footer={
+          [] // 设置footer为空，去掉 取消 确定默认按钮
+        }
+      >
+        <div className="systemTit">
+          <div className="systemTitRow">
+            <div className="bs">*</div>
+            <span>角色名称：</span>
+            <Input
+              maxLength={15}
+              showCount
+              style={{ width: 500 }}
+              placeholder="请输入"
+              value={roleName}
+              onChange={(e) => setRoleName(e.target.value.trim())}
+            />
+          </div>
+          <div className="systemTitRow">
+            <div className="bs bs2">*</div>
+            <span>描述：</span>
+            <TextArea
+              style={{ width: 500 }}
+              value={roleDesc}
+              onChange={(e) => setRoleDesc(e.target.value)}
+              rows={3}
+              placeholder="请输入"
+              showCount
+              maxLength={255}
+            />
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+}
+
+const MemoSystem2 = React.memo(System2);
+
+export default MemoSystem2;

src/pages/SystemSon/System3/index.module.scss

@@ -0,0 +1,20 @@
+.System3{
+  :global{
+    .objectSonMain {
+      padding: 10px 30px;
+
+      .tableSelectBox {
+        margin-bottom: 20px;
+        width: 100%;
+        height: 40px;
+        display: flex;
+        align-items: center;
+
+        .row {
+          margin-right: 30px;
+        }
+      }
+
+    }
+  }
+}

src/pages/SystemSon/System3/index.tsx

@@ -0,0 +1,139 @@
+import BreadTit from "@/components/BreadTit";
+import { RootState } from "@/store";
+import { getLogListAPI } from "@/store/action/system";
+import { Input, DatePicker, Table } from "antd";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+import styles from "./index.module.scss";
+
+const { RangePicker } = DatePicker;
+
+function System3() {
+  const dispatch = useDispatch();
+
+  const pageNumRef = useRef(1);
+  const pagePageRef = useRef(10);
+  // 筛选和分页
+  const [tableSelect, setTableSelect] = useState({
+    searchKey: "",
+    pageSize: 10,
+    pageNum: 1,
+    startTime: "",
+    endTime: "",
+  });
+
+  // 账号的输入
+  const nameTime = useRef(-1);
+  const nameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    clearTimeout(nameTime.current);
+    nameTime.current = window.setTimeout(() => {
+      setTableSelect({ ...tableSelect, searchKey: e.target.value, pageNum: 1 });
+    }, 500);
+  };
+  // 时间选择器改变
+  const timeChange = (date: any, dateString: any) => {
+    let startTime = "";
+    let endTime = "";
+    if (dateString[0] && dateString[1]) {
+      startTime = dateString[0] + " 00:00:00";
+      endTime = dateString[1] + " 23:59:59";
+    }
+    setTableSelect({ ...tableSelect, startTime, endTime, pageNum: 1 });
+  };
+
+  useEffect(() => {
+    pageNumRef.current = tableSelect.pageNum;
+    pagePageRef.current = tableSelect.pageSize;
+    dispatch(getLogListAPI(tableSelect));
+  }, [dispatch, tableSelect]);
+
+  // ---------关于表格
+
+  // 页码变化
+  const paginationChange = (pageNum: number, pageSize: number) => {
+    pageNumRef.current = pageNum;
+    pagePageRef.current = pageSize;
+    setTableSelect({ ...tableSelect, pageNum, pageSize });
+  };
+
+  const results = useSelector(
+    (state: RootState) => state.systemStore.tableList
+  );
+
+  const columns = useMemo(() => {
+    return [
+      {
+        title: "序号",
+        render: (text: any, record: any, index: any) =>
+          index + 1 + (pageNumRef.current - 1) * pagePageRef.current,
+      },
+      {
+        title: "操作者",
+        dataIndex: "userName",
+      },
+      {
+        title: "操作日期",
+        dataIndex: "createTime",
+      },
+      {
+        title: "IP记录",
+        dataIndex: "ip",
+      },
+      {
+        title: "操作记录",
+        dataIndex: "type",
+      },
+    ];
+  }, []);
+
+  return (
+    <div className={styles.System3}>
+      <div className="breadTit">
+        <BreadTit>
+          <div className="breadTitRow active">系统日志</div>
+        </BreadTit>
+      </div>
+      <div className="objectSonMain">
+        <div className="tableSelectBox">
+          <div className="row">
+            <span>账号：</span>
+            <Input
+              maxLength={10}
+              style={{ width: 150 }}
+              placeholder="请输入"
+              allowClear
+              onChange={(e) => nameChange(e)}
+            />
+          </div>
+          <div className="row">
+            <span>操作日期：</span>
+            <RangePicker onChange={timeChange} />
+          </div>
+        </div>
+        {/* 表格主体 */}
+        <div className="tableMain">
+          <Table
+            scroll={{ y: 480 }}
+            dataSource={results.list}
+            columns={columns}
+            rowKey="id"
+            pagination={{
+              showQuickJumper: true,
+              position: ["bottomCenter"],
+              showSizeChanger: true,
+              current: tableSelect.pageNum,
+              pageSize: tableSelect.pageSize,
+              total: results.total,
+              onChange: paginationChange,
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const MemoSystem3 = React.memo(System3);
+
+export default MemoSystem3;

src/store/action/system.ts

@@ -0,0 +1,51 @@
+import http from "@/utils/http";
+import { AppDispatch } from "..";
+
+/**
+ * 获取用户列表信息
+ */
+export const getUserListAPI = (data: any) => {
+  return async (dispatch: AppDispatch) => {
+    // 获取列表数据
+    const res: any = await http.post("sys/user/list", data);
+    const list = res.data.records;
+    const obj = {
+      list,
+      total: res.data.total,
+    };
+    dispatch({ type: "system/getTableList", payload: obj });
+  };
+};
+
+
+/**
+ * 获取系统日志列表
+ */
+export const getLogListAPI = (data: any) => {
+  return async (dispatch: AppDispatch) => {
+    // 获取列表数据
+    const res: any = await http.post("sys/log/list", data);
+    const list = res.data.records;
+    const obj = {
+      list,
+      total: res.data.total,
+    };
+    dispatch({ type: "system/getTableList", payload: obj });
+  };
+};
+
+/**
+ * 获取角色管理列表
+ */
+export const getRoleListAPI = (data: any) => {
+  return async (dispatch: AppDispatch) => {
+    // 获取列表数据
+    const res: any = await http.post("sys/role/list", data);
+    const list = res.data.records;
+    const obj = {
+      list,
+      total: res.data.total,
+    };
+    dispatch({ type: "system/getTableList", payload: obj });
+  };
+};

src/store/reducer/index.ts

@@ -8,6 +8,7 @@ import object5Reducer from "./object5";
 import object6Reducer from "./object6";
 import stores1Reducer from "./stores1";
 import stores3Reducer from "./stores3";
+import systemReducer from "./system";
 
 // 合并 reducer
 const rootReducer = combineReducers({
@@ -20,6 +21,7 @@ const rootReducer = combineReducers({
   object6Store: object6Reducer,
   stores1Store: stores1Reducer,
   stores3Store: stores3Reducer,
+  systemStore: systemReducer,
 });
 
 export default rootReducer;

src/store/reducer/system.ts

@@ -0,0 +1,21 @@
+// 初始化状态应用注解
+const initState = {
+  // 三个模块的表格信息
+  tableList: {
+    list: [] as any,
+    total: 0,
+  },
+};
+
+type ActionType = { type: "system/getTableList"; payload: any };
+
+export default function systemReducer(state = initState, action: ActionType) {
+  switch (action.type) {
+    // 用户管理表格信息
+    case "system/getTableList":
+      return { ...state, tableList: action.payload };
+
+    default:
+      return state;
+  }
+}