更换部门功能

src/main.scss

@@ -124,3 +124,14 @@ code {
     display: none;
   }
 }
+
+.adm-radio-content {
+  font-size: 16px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.88);
+  line-height: 16px;
+  padding-left: 15px !important;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

src/pages/change-department/index.module.scss

@@ -0,0 +1,29 @@
+.info {
+  width: 100%;
+  float: left;
+  height: 54px;
+  font-size: 16px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.3);
+  line-height: 54px;
+  margin-top: 20px;
+}
+
+.radio-box {
+  width: 100%;
+  float: left;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 20px;
+  .radio-item {
+    width: 100%;
+    height: 76px;
+    background: #fafafa;
+    border-radius: 7px;
+    margin-bottom: 20px;
+    box-sizing: border-box;
+    padding: 30px 20px;
+  }
+}

src/pages/change-department/index.tsx

@@ -0,0 +1,61 @@
+import { useState } from "react";
+import { Radio, Image } from "antd-mobile";
+import styles from "./index.module.scss";
+import { useNavigate } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import { saveCurrentDepId } from "../../store/user/loginUserSlice";
+import { setDepKey, setDepName } from "../../utils/index";
+import backIcon from "../../assets/images/commen/icon-back.png";
+
+const ChangeDepartmentPage = () => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState<boolean>(false);
+  const departments = useSelector(
+    (state: any) => state.loginUser.value.departments
+  );
+  const currentDepId = useSelector(
+    (state: any) => state.loginUser.value.currentDepId
+  );
+  console.log(currentDepId);
+
+  const onDepClick = (value: any) => {
+    let it = departments.find((o: any) => o.id === value);
+    if (it) {
+      dispatch(saveCurrentDepId(Number(value)));
+      setDepKey(value);
+      setDepName(it.name);
+      navigate("/", { replace: true });
+    }
+  };
+
+  return (
+    <div className="main-body">
+      <div className="main-header">
+        <Image
+          className="back-icon"
+          src={backIcon}
+          onClick={() => navigate(-1)}
+        />
+        <div className="main-title">切换部门</div>
+      </div>
+      <div className={styles["info"]}>点击部门名称切换部门</div>
+      <div className={styles["radio-box"]}>
+        <Radio.Group onChange={onDepClick} defaultValue={currentDepId}>
+          {departments.map((item: any) => (
+            <Radio
+              key={item.id}
+              value={item.id}
+              block
+              className={styles["radio-item"]}
+            >
+              {item.name}
+            </Radio>
+          ))}
+        </Radio.Group>
+      </div>
+    </div>
+  );
+};
+
+export default ChangeDepartmentPage;

src/routes/index.tsx

@@ -8,6 +8,7 @@ import IndexPage from "../pages/index/index";
 import LoginPage from "../pages/login";
 import MemberPage from "../pages/member/index";
 import ChangePasswordPage from "../pages/change-password/index";
+import ChangeDepartmentPage from "../pages/change-department/index";
 import StudyPage from "../pages/study/index";
 import PrivateRoute from "../components/private-route";
 
@@ -57,6 +58,10 @@ const routes: RouteObject[] = [
         path: "/study",
         element: <PrivateRoute Component={<StudyPage />} />,
       },
+      {
+        path: "/change-department",
+        element: <PrivateRoute Component={<ChangeDepartmentPage />} />,
+      },
     ],
   },
 ];