学员新建，编辑初步

src/api/user.ts

@@ -57,7 +57,7 @@ export function updateUser(
   idCard: string,
   depIds: number[]
 ) {
-  return client.post(`/backend/v1/user/${id}`, {
+  return client.put(`/backend/v1/user/${id}`, {
     email,
     nickname,
     name,

src/index.less

@@ -12,6 +12,14 @@ code {
     monospace;
 }
 
+.mt-10{
+  margin-top: 10px;
+}
+
+.ml-15 {
+  margin-left: 15px;
+}
+
 .mr-16 {
   margin-right: 16px;
 }
@@ -68,7 +76,6 @@ code {
 .c-flex {
   display: flex;
   flex-direction: column;
-  align-items: center;
 }
 
 .primary {
@@ -79,6 +86,11 @@ code {
   color: #ff4d4f;
 }
 
+.form-avatar {
+  width: 100px;
+  height: 100px;
+}
+
 .playedu-main-body {
   width: 100%;
   height: auto;
@@ -128,7 +140,3 @@ code {
 textarea.ant-input {
   vertical-align: middle;
 }
-
-
-
-

src/pages/index.ts

@@ -4,4 +4,6 @@ export * from "./dashboard";
 export * from "./error";
 export * from "./test";
 export * from "./course/vod";
-export * from "./member"
+export * from "./member/index"
+export * from "./member/create"
+export * from "./member/update"

src/pages/member/create.tsx

@@ -0,0 +1,161 @@
+import React, { useState, useEffect } from "react";
+import { Row, Col, Form, Input, Cascader, Button, message } from "antd";
+import styles from "./create.module.less";
+import { user, department } from "../../api/index";
+import { useNavigate } from "react-router-dom";
+import { UploadImageButton } from "../../compenents";
+
+export const MemberCreatePage: React.FC = () => {
+  const navigate = useNavigate();
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState<boolean>(true);
+  const [departments, setDepartments] = useState<any>([]);
+  const [avatar, setAvatar] = useState<string>("");
+
+  useEffect(() => {
+    getParams();
+  }, []);
+
+  const getParams = () => {
+    department.departmentList().then((res: any) => {
+      const departments = res.data.departments;
+      const new_arr = checkArr(departments, 0);
+      console.log(new_arr);
+      setDepartments(new_arr);
+    });
+  };
+
+  const checkArr = (departments: any[], id: number) => {
+    const arr = [];
+    for (let i = 0; i < departments[id].length; i++) {
+      if (!departments[departments[id][i].id]) {
+        arr.push({
+          label: departments[id][i].name,
+          value: departments[id][i].id,
+        });
+      } else {
+        const new_arr: any[] = checkArr(departments, departments[id][i].id);
+        arr.push({
+          label: departments[id][i].name,
+          value: departments[id][i].id,
+          children: new_arr,
+        });
+      }
+    }
+    return arr;
+  };
+
+  const onFinish = (values: any) => {
+    console.log("Success:", values);
+    user
+      .storeUser(
+        values.email,
+        values.name,
+        values.avatar,
+        values.password,
+        values.idCard,
+        values.depIds
+      )
+      .then((res: any) => {
+        message.success("保存成功！");
+        navigate(-1);
+      });
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log("Failed:", errorInfo);
+  };
+
+  const onChange = (value: any) => {
+    console.log(value);
+  };
+
+  return (
+    <>
+      <Row className="playedu-main-body">
+        <Col>
+          <Form
+            form={form}
+            name="basic"
+            labelCol={{ span: 8 }}
+            wrapperCol={{ span: 16 }}
+            style={{ maxWidth: 600 }}
+            initialValues={{ remember: true }}
+            onFinish={onFinish}
+            onFinishFailed={onFinishFailed}
+            autoComplete="off"
+          >
+            <Form.Item
+              label="学员姓名"
+              name="name"
+              rules={[{ required: true, message: "请输入学员姓名!" }]}
+            >
+              <Input placeholder="请输入学员姓名" />
+            </Form.Item>
+            <Form.Item
+              label="学员头像"
+              name="avatar"
+              rules={[{ required: true, message: "请上传学员头像!" }]}
+            >
+              <UploadImageButton
+                onSelected={(url) => {
+                  setAvatar(url);
+                  form.setFieldsValue({ avatar: url });
+                }}
+              ></UploadImageButton>
+              {avatar && (
+                <img className="form-avatar mt-10" src={avatar} alt="" />
+              )}
+            </Form.Item>
+            <Form.Item
+              label="登录密码"
+              name="password"
+              rules={[{ required: true, message: "请输入登录密码!" }]}
+            >
+              <Input.Password placeholder="请输入登录密码" />
+            </Form.Item>
+            <Form.Item
+              label="学员邮箱"
+              name="email"
+              rules={[{ required: true, message: "请输入学员邮箱!" }]}
+            >
+              <Input placeholder="请输入学员邮箱" />
+            </Form.Item>
+            <Form.Item
+              label="身份证号"
+              name="idCard"
+              rules={[{ required: true, message: "请输入身份证号!" }]}
+            >
+              <Input placeholder="请输入身份证号" />
+            </Form.Item>
+            <Form.Item
+              label="学员部门"
+              name="dep_ids"
+              rules={[{ required: true, message: "请选择学员部门!" }]}
+            >
+              <Cascader
+                options={departments}
+                onChange={onChange}
+                multiple
+                maxTagCount="responsive"
+                placeholder="请选择学员部门"
+              />
+            </Form.Item>
+            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+              <Button type="primary" htmlType="submit">
+                保存
+              </Button>
+              <Button
+                className="ml-15"
+                htmlType="button"
+                onClick={() => navigate(-1)}
+              >
+                取消
+              </Button>
+            </Form.Item>
+          </Form>
+        </Col>
+      </Row>
+    </>
+  );
+};

src/pages/member/index.tsx

@@ -15,12 +15,13 @@ import type { ColumnsType } from "antd/es/table";
 import styles from "./index.module.less";
 import { PlusOutlined, ReloadOutlined } from "@ant-design/icons";
 import { user } from "../../api/index";
-import { TreeDepartment } from "../../compenents";
 import { dateFormat } from "../../utils/index";
+import { Link, useNavigate } from "react-router-dom";
 
 interface DataType {
   id: React.Key;
   nickname: string;
+  name: string;
   email: string;
   created_at: string;
   credit1: number;
@@ -28,6 +29,7 @@ interface DataType {
 }
 
 export const MemberPage: React.FC = () => {
+  const navigate = useNavigate();
   const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [page, setPage] = useState<number>(1);
@@ -51,6 +53,11 @@ export const MemberPage: React.FC = () => {
       dataIndex: "nickname",
       render: (text: string) => <span>{text}</span>,
     },
+    {
+      title: "学员姓名",
+      dataIndex: "name",
+      render: (text: string) => <span>{text}</span>,
+    },
     {
       title: "邮箱",
       dataIndex: "email",
@@ -69,7 +76,12 @@ export const MemberPage: React.FC = () => {
       key: "action",
       render: (_, record) => (
         <Space size="middle">
-          <Button type="link" danger className="c-red">
+          <Button
+            type="link"
+            danger
+            className="c-red"
+            onClick={() => navigate(`/member/update/${record.id}`)}
+          >
             详情
           </Button>
           <Popconfirm
@@ -157,17 +169,6 @@ export const MemberPage: React.FC = () => {
   return (
     <>
       <Row>
-        <Col span={4}>
-          <TreeDepartment
-            defaultExpandedKeys={["0-0-0", "0-0-1"]}
-            defaultSelectedKeys={["0-0-0", "0-0-1"]}
-            defaultCheckedKeys={["0-0-0", "0-0-1"]}
-            onUpdate={() => {
-              console.log(111);
-            }}
-          ></TreeDepartment>
-        </Col>
-        <Col span={20}>
         <div className="playedu-main-body mb-24">
           <div className="float-left d-flex">
             <div className="d-flex mr-24">
@@ -219,9 +220,12 @@ export const MemberPage: React.FC = () => {
             </div>
           </div>
         </div>
+        <Col span={4}></Col>
+        <Col span={20}>
           <div className="playedu-main-body">
             <div className="float-left j-b-flex mb-24">
               <div className="d-flex">
+                <Link style={{ textDecoration: "none" }} to={`/member/create`}>
                   <Button
                     icon={<PlusOutlined />}
                     className="mr-16"
@@ -229,6 +233,7 @@ export const MemberPage: React.FC = () => {
                   >
                     新建
                   </Button>
+                </Link>
               </div>
               <div className="d-flex">
                 <Button

src/pages/member/update.tsx

@@ -0,0 +1,189 @@
+import React, { useState, useEffect } from "react";
+import { Row, Col, Form, Input, Cascader, Button, message } from "antd";
+import styles from "./update.module.less";
+import { user, department } from "../../api/index";
+import { useParams, useNavigate } from "react-router-dom";
+import { UploadImageButton } from "../../compenents";
+
+export const MemberUpdatePage: React.FC = () => {
+  const params = useParams();
+  const navigate = useNavigate();
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState<boolean>(true);
+  const [departments, setDepartments] = useState<any>([]);
+  const [avatar, setAvatar] = useState<string>("");
+
+  useEffect(() => {
+    getParams();
+  }, []);
+  useEffect(() => {
+    getDetail();
+  }, [params.memberId]);
+
+  const getParams = () => {
+    department.departmentList().then((res: any) => {
+      const departments = res.data.departments;
+      const new_arr = checkArr(departments, 0);
+      console.log(new_arr);
+      setDepartments(new_arr);
+    });
+  };
+
+  const getDetail = () => {
+    user.user(Number(params.memberId)).then((res: any) => {
+      let user = res.data.user;
+      setAvatar(user.avatar);
+      form.setFieldsValue({
+        email: user.email,
+        name: user.name,
+        nickname: user.nickname,
+        avatar: user.avatar,
+        idCard: user.id_card,
+      });
+    });
+  };
+
+  const checkArr = (departments: any[], id: number) => {
+    const arr = [];
+    for (let i = 0; i < departments[id].length; i++) {
+      if (!departments[departments[id][i].id]) {
+        arr.push({
+          label: departments[id][i].name,
+          value: departments[id][i].id,
+        });
+      } else {
+        const new_arr: any[] = checkArr(departments, departments[id][i].id);
+        arr.push({
+          label: departments[id][i].name,
+          value: departments[id][i].id,
+          children: new_arr,
+        });
+      }
+    }
+    return arr;
+  };
+
+  const onFinish = (values: any) => {
+    console.log("Success:", values);
+    let id = Number(params.memberId);
+    user
+      .updateUser(
+        id,
+        values.email,
+        values.name,
+        values.nickname,
+        values.avatar,
+        values.password,
+        values.idCard,
+        values.depIds
+      )
+      .then((res: any) => {
+        message.success("保存成功！");
+        navigate(-1);
+      });
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log("Failed:", errorInfo);
+  };
+
+  const onChange = (value: any) => {
+    console.log(value);
+  };
+
+  return (
+    <>
+      <Row className="playedu-main-body">
+        <Col>
+          <Form
+            form={form}
+            name="basic"
+            labelCol={{ span: 8 }}
+            wrapperCol={{ span: 16 }}
+            style={{ maxWidth: 600 }}
+            initialValues={{ remember: true }}
+            onFinish={onFinish}
+            onFinishFailed={onFinishFailed}
+            autoComplete="off"
+          >
+            <Form.Item
+              label="学员姓名"
+              name="name"
+              rules={[{ required: true, message: "请输入学员姓名!" }]}
+            >
+              <Input placeholder="请输入学员姓名" />
+            </Form.Item>
+            <Form.Item
+              label="学员昵称"
+              name="nickname"
+              rules={[{ required: true, message: "请输入学员昵称!" }]}
+            >
+              <Input placeholder="请输入学员昵称" />
+            </Form.Item>
+            <Form.Item
+              label="学员头像"
+              name="avatar"
+              rules={[{ required: true, message: "请上传学员头像!" }]}
+            >
+              <UploadImageButton
+                onSelected={(url) => {
+                  setAvatar(url);
+                  form.setFieldsValue({ avatar: url });
+                }}
+              ></UploadImageButton>
+              {avatar && (
+                <img className="form-avatar mt-10" src={avatar} alt="" />
+              )}
+            </Form.Item>
+            <Form.Item
+              label="登录密码"
+              name="password"
+              rules={[{ required: true, message: "请输入登录密码!" }]}
+            >
+              <Input.Password placeholder="请输入登录密码" />
+            </Form.Item>
+            <Form.Item
+              label="学员邮箱"
+              name="email"
+              rules={[{ required: true, message: "请输入学员邮箱!" }]}
+            >
+              <Input placeholder="请输入学员邮箱" />
+            </Form.Item>
+            <Form.Item
+              label="身份证号"
+              name="idCard"
+              rules={[{ required: true, message: "请输入身份证号!" }]}
+            >
+              <Input placeholder="请输入身份证号" />
+            </Form.Item>
+            <Form.Item
+              label="学员部门"
+              name="dep_ids"
+              rules={[{ required: true, message: "请选择学员部门!" }]}
+            >
+              <Cascader
+                options={departments}
+                onChange={onChange}
+                multiple
+                maxTagCount="responsive"
+                placeholder="请选择学员部门"
+              />
+            </Form.Item>
+            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+              <Button type="primary" htmlType="submit">
+                保存
+              </Button>
+              <Button
+                className="ml-15"
+                htmlType="button"
+                onClick={() => navigate(-1)}
+              >
+                取消
+              </Button>
+            </Form.Item>
+          </Form>
+        </Col>
+      </Row>
+    </>
+  );
+};

src/router/routes.tsx

@@ -7,6 +7,8 @@ import {
   VodListPage,
   TestPage,
   MemberPage,
+  MemberCreatePage,
+  MemberUpdatePage
 } from "../pages";
 
 const routes: RouteObject[] = [
@@ -26,6 +28,14 @@ const routes: RouteObject[] = [
         path: "/member",
         element: <MemberPage />,
       },
+      {
+        path: "/member/create",
+        element: <MemberCreatePage />,
+      },
+      {
+        path: "/member/update/:memberId",
+        element: <MemberUpdatePage />,
+      },
     ],
   },
   {