唐简：提交新分支

src/api/system/notice.ts

@@ -0,0 +1,23 @@
+import request from "../../utils/request";
+
+export const getNoticeListApi = (params: any) => {
+  return request({
+    url: "/notice/notify",
+    method: "get",
+    params,
+  });
+};
+
+export const getNoticeInfoApi = (id: number) => {
+  return request({
+    url: "/notice/notify/" + id,
+    method: "get",
+  });
+};
+
+export const deleteNoticeInfoApi = (id: number) => {
+  return request({
+    url: "/notice/notify/" + id,
+    method: "delete",
+  });
+};

src/api/system/post.ts

@@ -0,0 +1,51 @@
+import request from "../../utils/request";
+
+interface postListParams {
+  postCode?: string;
+  postName?: string;
+  state?: string;
+  pageNum?: string;
+  pageSize?: string;
+}
+
+export const getPostListApi = (data: postListParams) => {
+  const { postCode, postName, state, pageNum } = data;
+  const params = data
+    ? {
+        postCode,
+        postName,
+        state,
+        pageNum,
+        pageSize: 500,
+      }
+    : undefined;
+
+  return request({
+    url: "/admin/post",
+    method: "get",
+    params,
+  });
+};
+
+export const addPostApi = (data: any) => {
+  return request({
+    url: "/admin/post",
+    method: "post",
+    data,
+  });
+};
+
+export const editPostApi = (data: any) => {
+  return request({
+    url: "/admin/post",
+    method: "put",
+    data,
+  });
+};
+
+export const deletePostApi = (postId: any) => {
+  return request({
+    url: "/admin/post/" + postId,
+    method: "delete",
+  });
+};

src/api/system/role.ts

@@ -1,25 +1,26 @@
 import request from "@/utils/request";
 interface paramsType {
-  createTime?: string,
+  createTime?: string;
-  dataScope?: string,
+  dataScope?: string;
-  deptIds?: any[],
+  deptIds?: any[];
-  menuIds?: any[],
+  menuIds?: any[];
-  roleId?: number,
+  roleId?: number;
-  roleKey?: string,
+  roleKey?: string;
-  roleName?: string,
+  roleName?: string;
-  state?: string,
+  state?: string;
-  endTime?: string,
+  endTime?: string;
-  startTime?: string,
+  startTime?: string;
-  pageNum?: number,
+  pageNum?: number;
-  pageSize?: number
+  pageSize?: number;
 }
 export const getRolesDataAPI = (params: paramsType) => {
-  const { endTime, roleKey, roleName, startTime, state, pageNum, pageSize } = params
+  const { endTime, roleKey, roleName, startTime, state, pageNum, pageSize } =
+    params;
   // console.log('API',params);
-  
+
   return request({
-    url: '/admin/role',
+    url: "/admin/role",
-    method: 'get',
+    method: "get",
     params: {
       endTime,
       roleKey,
@@ -27,51 +28,48 @@ export const getRolesDataAPI = (params: paramsType) => {
       startTime,
       state,
       pageNum,
-      pageSize
+      pageSize,
-    }
+    },
-  })
+  });
-}
+};
-export const delRoleAPI = (params: paramsType) => {
+export const delRoleAPI = (roleId: paramsType) => {
-  let { roleId } = params
   // console.log(roleId);
 
   return request({
     url: `/admin/role/${roleId}`,
-    method: 'delete',
+    method: "delete",
-  })
+  });
-}
+};
 export const getMenuLiseAPI = () => {
-  
   return request({
-    url: '/admin/menu',
+    url: "/admin/menu",
-    method: 'get',
+    method: "get",
-    
+  });
-  })
+};
-}
+export const addRoleAPI = (data: any) => {
-export const addRoleAPI = (data:any) => {
   // console.log('addAPI',data);
   return request({
     url: `/admin/role`,
-    method: 'post',
+    method: "post",
-    data
+    data,
-  })
+  });
-}
+};
-export const getRoleAPI = (params:paramsType) => {
+export const getRoleAPI = (params: paramsType) => {
-  const {roleId}=params
+  const { roleId } = params;
-  
+
   return request({
     url: `/admin/role/${roleId}`,
-    method: 'get',
+    method: "get",
-  })
+  });
-}
+};
-export const setRoleDataAPI = (data:any) => {
+export const setRoleDataAPI = (data: any) => {
   // data.menuIds=[]
   // const {roleId}=params
-  console.log('修改',data);
+  console.log("修改", data);
-  
+
   return request({
     url: `/admin/role`,
-    method: 'put',
+    method: "put",
-    data:data
+    data: data,
-  })
+  });
-}
+};

src/api/system/users.ts

@@ -0,0 +1,86 @@
+import request from "../../utils/request";
+
+interface userListParams {
+  deptId?: string;
+  userName?: string;
+  phoneNumber?: string;
+  state?: string;
+  startTime?: string;
+  endTime?: string;
+  pageNum?: number;
+  pageSize?: number;
+}
+
+export const getDeptTreeApi = () => {
+  return request({
+    url: "/admin/dept",
+    method: "get",
+  });
+};
+
+export const getUserInfoApi = (userId: string) => {
+  return request({
+    url: "/admin/user/info/" + userId,
+    method: "get",
+  });
+};
+
+export const getRoleListApi = () => {
+  return request({
+    url: "/admin/role",
+    method: "get",
+  });
+};
+
+export const getPostListApi = () => {
+  return request({
+    url: "/admin/post",
+    method: "get",
+  });
+};
+
+export const getUserListApi = (data: userListParams) => {
+  const { deptId, userName, phoneNumber, state, startTime, endTime, pageNum } =
+    data;
+  const params = data
+    ? {
+        deptId,
+        userName,
+        phoneNumber,
+        state,
+        startTime,
+        endTime,
+        pageNum,
+        pageSize: 500,
+      }
+    : undefined;
+
+  return request({
+    url: "/admin/user",
+    method: "get",
+    params,
+  });
+};
+
+export const addUserApi = (data: any) => {
+  return request({
+    url: "/admin/user",
+    method: "post",
+    data,
+  });
+};
+
+export const editUserApi = (data: any) => {
+  return request({
+    url: "/admin/user",
+    method: "put",
+    data,
+  });
+};
+
+export const deleteUserApi = (userId: any) => {
+  return request({
+    url: "/admin/user/" + userId,
+    method: "delete",
+  });
+};

src/view/system/notice/inform/index.scss

@@ -0,0 +1,60 @@
+#content {
+  display: flex;
+  border-top: 1px solid black;
+  .dept-content {
+    flex: 20%;
+    padding: 35px 12px 0 0;
+    height: calc(100vh - 85px);
+  }
+
+  .left-dept {
+    flex: 20%;
+    padding: 35px 12px 0 0;
+    height: calc(100vh - 85px);
+    border: 1px solid red;
+    border-top: 1px solid black;
+  }
+  .right {
+    flex: 80%;
+    height: 190px;
+    display: flex;
+    flex-direction: column;
+
+    .search-content {
+      display: flex;
+      width: 500px;
+      justify-content: space-around;
+      padding: 35px 12px 0 0;
+      margin-left: 20px;
+    }
+  }
+  .table-content {
+    margin: 12px 0 0 12px;
+
+    .ant-table-thead > tr > th {
+      color: #909399;
+      text-align: center;
+    }
+    .ant-table-tbody > tr > td {
+      text-align: center;
+    }
+  }
+  .add-content {
+    display: flex;
+    margin-left: 12px;
+    margin-top: 20px;
+    button:focus,
+    button:focus-visible {
+      outline: none;
+    }
+  }
+  .user-mid-button {
+    display: flex;
+    margin-left: 12px;
+    margin-top: 20px;
+    button:focus,
+    button:focus-visible {
+      outline: none;
+    }
+  }
+}

src/view/system/notice/inform/index.tsx

@@ -1,5 +1,242 @@
+import "./index.scss";
+import { Select, Button, Table, Space, Tag, message, Modal } from "antd";
+
+import {
+  EditOutlined,
+  DeleteOutlined,
+  ExclamationCircleFilled,
+} from "@ant-design/icons";
+
+import {
+  getNoticeListApi,
+  deleteNoticeInfoApi,
+} from "../../../../api/system/notice";
+
+import { useEffect, useState } from "react";
+import { SearchOutlined, RedoOutlined } from "@ant-design/icons";
+
 export default function Inform() {
-  return(
+  const [noticeInfo, setNoticeInfo] = useState<string>("");
-    <div>公告1</div>
+  const [isNoticeOpen, setIsNoticeOpen] = useState<boolean>(false);
-  )
+  const [listData, setListData] = useState([]);
-}
+  const [messageApi, contextHolder] = message.useMessage();
+  const [queryParams, setQueryParams] = useState<QueryParamsType>({
+    state: undefined,
+    pageSize: undefined,
+    pageNum: undefined,
+  });
+  const columns = [
+    {
+      title: "序号",
+      dataIndex: "noticeId",
+      key: "noticeId",
+      render: (text: string) => <>{text ? text : "null"}</>,
+    },
+    {
+      title: "公告标题",
+      dataIndex: "noticeTitle",
+      key: "noticeTitle",
+      render: (text: string) => <>{text ? text : "null"}</>,
+    },
+    {
+      title: "阅读状态",
+      key: "state",
+      dataIndex: "state",
+      render: (text: string) => (
+        <>
+          {text === "1" ? (
+            <Tag color="warning">已读</Tag>
+          ) : (
+            <Tag color="error">未读</Tag>
+          )}
+        </>
+      ),
+    },
+    {
+      title: "操作",
+      key: "operate",
+      dataIndex: "operate",
+      render: (_: string, record: object) => (
+        <div style={{ color: "#58aaff" }}>
+          <Space>
+            <EditOutlined />
+            <a
+              href="#"
+              onClick={() => handleInfo(record)}
+              style={{ color: " #58aaff" }}
+            >
+              详情
+            </a>
+            <DeleteOutlined />
+            <a
+              href="#"
+              onClick={() => handleDel(record)}
+              style={{ color: " #58aaff" }}
+            >
+              删除
+            </a>
+          </Space>
+        </div>
+      ),
+    },
+  ];
+
+  interface QueryParamsType {
+    state?: string;
+    pageSize?: number;
+    pageNum?: number;
+  }
+
+  const getList = async (newQueryParams: object) => {
+    try {
+      const { code, data } = await getNoticeListApi(newQueryParams);
+      if (code === 1000) {
+        setListData(data.rows);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  const handleReset = async () => {
+    setQueryParams({});
+    getList({});
+  };
+
+  const handleSearch = () => {
+    getList(queryParams);
+  };
+
+  const handleInfo = (record: any) => {
+    setIsNoticeOpen(true);
+    setNoticeInfo(record.noticeTitle);
+  };
+
+  const handleInfoOk = () => {
+    setIsNoticeOpen(false);
+  };
+
+  const handleInfoCancel = () => {
+    setIsNoticeOpen(false);
+  };
+
+  const handleDel = async (record: any) => {
+    Modal.confirm({
+      title: `确定删除Id为-${record.noticeId}-, 名称为-${record.noticeTitle}-的岗位吗?`,
+      icon: <ExclamationCircleFilled />,
+      async onOk() {
+        const { code } = await deleteNoticeInfoApi(record.noticeId);
+        try {
+          if (code === 1000) {
+            messageApi.open({
+              type: "success",
+              content: "删除成功",
+            });
+            getList({});
+          } else {
+            messageApi.open({
+              type: "error",
+              content: "删除失败",
+            });
+          }
+        } catch (err) {
+          console.log(err);
+        }
+      },
+      onCancel() {
+        messageApi.open({
+          type: "warning",
+          content: "取消成功",
+        });
+      },
+    });
+  };
+
+  const handlePageChange = (page: number) => {
+    setQueryParams({
+      ...queryParams,
+      pageNum: page,
+    });
+  };
+
+  useEffect(() => {
+    getList(queryParams);
+  }, []);
+
+  return (
+    <div id="content">
+      <>
+        <div className="right">
+          <div className="search-content">
+            <>
+              <Space>
+                <div>状态</div>
+                <Select
+                  style={{ width: 220 }}
+                  placeholder="请选择状态"
+                  allowClear
+                  options={[
+                    { value: "1", label: "已读" },
+                    { value: "0", label: "未读" },
+                  ]}
+                  value={queryParams.state}
+                  onChange={(value: any) =>
+                    setQueryParams({
+                      ...queryParams,
+                      state: value,
+                    })
+                  }
+                />
+              </Space>
+              <Space>
+                <div className="search-button">
+                  <Button type="primary" onClick={handleSearch}>
+                    <SearchOutlined />
+                    搜索
+                  </Button>
+                </div>
+              </Space>
+              <Space>
+                <div className="reset-button" onClick={handleReset}>
+                  <Button>
+                    <RedoOutlined />
+                    重置
+                  </Button>
+                </div>
+              </Space>
+            </>
+          </div>
+          <Modal
+            title="通知弹框"
+            open={isNoticeOpen}
+            onOk={handleInfoOk}
+            onCancel={handleInfoCancel}
+            footer={null}
+          >
+            <h1>{noticeInfo}</h1>
+          </Modal>
+          <div className="table-content">
+            <>
+              {contextHolder}
+              <Table
+                columns={columns}
+                dataSource={listData}
+                className="article-table"
+                pagination={{
+                  onChange: handlePageChange,
+                  locale: {
+                    jump_to: "跳至",
+                    page: "页",
+                  },
+                  showQuickJumper: true,
+                  showTotal: (total, range) =>
+                    `第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
+                }}
+              />
+            </>
+          </div>
+        </div>
+      </>
+    </div>
+  );
+}

src/view/system/notice/publish/index.tsx

@@ -3,7 +3,6 @@ import {
   Button,
   Input,
   Select,
-  DatePicker,
   message,
   Table,
   Tag,
@@ -86,7 +85,7 @@ export default function Inform() {
     endTime: undefined,
   });
 
-  const [thisNotice,setThisNotice]=useState<any>({})
+  const [thisNotice, setThisNotice] = useState<any>({});
   //Modal
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
@@ -204,8 +203,8 @@ export default function Inform() {
     }
   };
   //   let thisrole: any = {roleId:'s'};
-  const handleDetail = (text:any) => {
+  const handleDetail = (text: any) => {
-    getData(text.noticeId)
+    getData(text.noticeId);
     setIsDetailModalOpen(true);
   };
   const handleDelete = (text: any) => {
@@ -240,14 +239,14 @@ export default function Inform() {
   };
   const handleSerach = () => {
     searchValue = formSearch.getFieldsValue();
-    setSearchValue(searchValue)
+    setSearchValue(searchValue);
     count = 1;
     setQueryTableDataParams({ ...searchValue });
   };
   const handleReset = () => {
     formSearch.resetFields();
     searchValue = formSearch.getFieldsValue();
-    setSearchValue(searchValue)
+    setSearchValue(searchValue);
     setQueryTableDataParams({ ...searchValue });
   };
   //Modal区域
@@ -328,17 +327,16 @@ export default function Inform() {
       }
     } catch (error) {}
   };
-  const getData =async(noticeId:number)=>{
+  const getData = async (noticeId: number) => {
     try {
-      const {data,code}=await getDataAPI(noticeId);
+      const { data, code } = await getDataAPI(noticeId);
-      if(code===1000){
+      if (code === 1000) {
-        setThisNotice({...data})
+        setThisNotice({ ...data });
       }
     } catch (error) {
       console.log(error);
-      
     }
-  }
+  };
   const getTree = function (tree: any) {
     tree.title = tree.deptName;
     tree.value = tree.deptId;
@@ -704,57 +702,67 @@ export default function Inform() {
           >
             <Row>
               <Col span={8}>
-                <Form.Item 
+                <Form.Item
-                name='noticeTitle'
+                  name="noticeTitle"
-                label='公告标题'
+                  label="公告标题"
-                // initialValue={'ssss'}
+                  // initialValue={'ssss'}
                 >
                   <span> {thisNotice.noticeTitle}</span>
                 </Form.Item>
               </Col>
               <Col span={8}>
-              <Form.Item 
+                <Form.Item
-                name='sendType'
+                  name="sendType"
-                label='发送类型'
+                  label="发送类型"
-                // initialValue={'ssss'}
+                  // initialValue={'ssss'}
                 >
-                  <span> {thisNotice.sendType==='user'?'用户':thisNotice.sendType==='role'?'角色':
+                  <span>
-                  thisNotice.sendType==='dept'?'部门':'全发'}</span>
+                    {" "}
+                    {thisNotice.sendType === "user"
+                      ? "用户"
+                      : thisNotice.sendType === "role"
+                      ? "角色"
+                      : thisNotice.sendType === "dept"
+                      ? "部门"
+                      : "全发"}
+                  </span>
                 </Form.Item>
               </Col>
               <Col span={8}>
-                <Form.Item
+                <Form.Item name="sendIds" label="发送对象">
-                  name='sendIds'
-                  label='发送对象'
-                >
                   <span></span>
                 </Form.Item>
               </Col>
             </Row>
             <Row>
               <Col span={8}>
-                <Form.Item 
+                <Form.Item name="noticeType" label="公告类型">
-                  name='noticeType'
+                  <span>
-                  label='公告类型'
+                    {thisNotice.noticeType === "1" ? (
-                >
+                      <Tag color="processing">通知</Tag>
-                  <span>{thisNotice.noticeType==='1'?<Tag color="processing">通知</Tag>:<Tag color="processing">公告</Tag>}</span>
+                    ) : (
+                      <Tag color="processing">公告</Tag>
+                    )}
+                  </span>
                 </Form.Item>
               </Col>
               <Col span={8}>
-                <Form.Item
+                <Form.Item name="contentType" label="内容类型">
-                  name='contentType'
+                  <span>
-                  label='内容类型'
+                    {thisNotice.contentType === "html" ? (
-                >
+                      <Tag color="success">富文本</Tag>
-                  <span>{thisNotice.contentType==='html'?<Tag color="success">富文本</Tag>:<Tag>文本</Tag>}</span>
+                    ) : (
+                      <Tag>文本</Tag>
+                    )}
+                  </span>
                 </Form.Item>
               </Col>
             </Row>
             <Row>
-              <Form.Item
+              <Form.Item name="noticeContent" label="公告内容">
-                name='noticeContent'
+                <span
-                label='公告内容'
+                  dangerouslySetInnerHTML={{ __html: thisNotice.noticeContent }}
-              >
+                ></span>
-                <span dangerouslySetInnerHTML={{ __html: thisNotice.noticeContent }}></span>
               </Form.Item>
             </Row>
           </Form>

src/view/system/post/index.scss

@@ -0,0 +1,103 @@
+#content {
+  display: flex;
+  border-top: 1px solid black;
+  .dept-content {
+    flex: 20%;
+    padding: 35px 12px 0 0;
+    height: calc(100vh - 85px);
+  }
+
+  .left-dept {
+    flex: 20%;
+    padding: 35px 12px 0 0;
+    height: calc(100vh - 85px);
+    border: 1px solid red;
+    border-top: 1px solid black;
+  }
+  .right {
+    flex: 80%;
+    height: 190px;
+    display: flex;
+    flex-direction: column;
+
+    .search-content {
+      display: flex;
+      flex-direction: column;
+      padding: 35px 12px 0 0;
+      .content-top {
+        display: flex;
+        .input-item {
+          display: flex;
+          align-items: center;
+          margin-right: 20px;
+          width: 270px;
+          div {
+            width: 120px;
+            font-weight: bold;
+          }
+        }
+        :nth-child(3) {
+          div {
+            margin-right: -30px;
+          }
+        }
+      }
+      .content-bottom {
+        display: flex;
+        margin-left: 12px;
+        margin-top: 20px;
+        div {
+          margin-right: 10px;
+        }
+        .time-selector {
+          display: flex;
+          align-items: center;
+
+          div {
+            width: 120px;
+            font-weight: bold;
+          }
+          .time-picker {
+            width: 400px;
+            text-align: center;
+            margin-left: -30px;
+            margin-right: 25px;
+          }
+        }
+        button:focus,
+        button:focus-visible {
+          outline: none;
+        }
+      }
+    }
+    .table-content {
+      margin: 12px 0 0 12px;
+
+      .ant-table-thead > tr > th {
+        color: #909399;
+        text-align: center;
+      }
+      .ant-table-tbody > tr > td {
+        text-align: center;
+      }
+    }
+    .add-content {
+      display: flex;
+      margin-left: 12px;
+      margin-top: 20px;
+      button:focus,
+      button:focus-visible {
+        outline: none;
+      }
+    }
+    .user-mid-button {
+      display: flex;
+      margin-left: 12px;
+      margin-top: 20px;
+      button:focus,
+      button:focus-visible {
+        outline: none;
+      }
+    }
+  }
+}

src/view/system/post/index.tsx

@@ -0,0 +1,472 @@
+import "./index.scss";
+import {
+  Input,
+  Select,
+  Button,
+  Table,
+  Space,
+  Tag,
+  message,
+  Modal,
+  Form,
+  Row,
+  Col,
+  Radio,
+  InputNumber,
+} from "antd";
+
+import {
+  EditOutlined,
+  DeleteOutlined,
+  ExclamationCircleFilled,
+} from "@ant-design/icons";
+
+import {
+  getPostListApi,
+  addPostApi,
+  editPostApi,
+  deletePostApi,
+} from "../../../api/system/post";
+
+import { useEffect, useState } from "react";
+import { SearchOutlined, RedoOutlined, PlusOutlined } from "@ant-design/icons";
+
+export default function Post() {
+  const [form] = Form.useForm();
+  const [echoData, setEchoData] = useState<QueryParamsType>({});
+  const [listData, setListData] = useState([]);
+  const [radioValue, setRadioValue] = useState(1);
+  const [messageApi, contextHolder] = message.useMessage();
+  const [modalTitle, setModalTitle] = useState<string>("");
+  const [buttonType, setButtonType] = useState<string>("");
+  const [isShowModal, setIsShowModal] = useState<boolean>(false);
+  const [queryParams, setQueryParams] = useState<QueryParamsType>({
+    postName: undefined,
+    postCode: undefined,
+    state: undefined,
+    postSort: undefined,
+    pageSize: undefined,
+    pageNum: undefined,
+  });
+  const columns = [
+    {
+      title: "序号",
+      dataIndex: "postId",
+      key: "Id",
+      render: (text: string) => <>{text ? text : "null"}</>,
+    },
+    {
+      title: "岗位名称",
+      dataIndex: "postName",
+      key: "postName",
+      render: (text: string) => <>{text ? text : "null"}</>,
+    },
+    {
+      title: "岗位编码",
+      dataIndex: "postCode",
+      key: "postCode",
+      render: (text: string) => <>{text ? text : "null"}</>,
+    },
+    {
+      title: "排序",
+      key: "postSort",
+      dataIndex: "postSort",
+      render: (text: string) => <>{text ? text : "--"}</>,
+    },
+    {
+      title: "状态",
+      key: "state",
+      dataIndex: "state",
+      render: (text: string) => (
+        <>
+          {text === "0" ? (
+            <Tag color="processing">停用</Tag>
+          ) : (
+            <Tag color="processing">正常</Tag>
+          )}
+        </>
+      ),
+    },
+    {
+      title: "创建时间",
+      key: "createTime",
+      dataIndex: "createTime",
+      render: (text: string) => <>{text ? text : "null"}</>,
+    },
+    {
+      title: "操作",
+      key: "operate",
+      dataIndex: "operate",
+      render: (_: string, record: object) => (
+        <div style={{ color: "#58aaff" }}>
+          <Space>
+            <EditOutlined />
+            <a
+              href="#"
+              onClick={() => handleEdit(record)}
+              style={{ color: " #58aaff" }}
+            >
+              编辑
+            </a>
+            <DeleteOutlined />
+            <a
+              href="#"
+              onClick={() => handleDel(record)}
+              style={{ color: " #58aaff" }}
+            >
+              删除
+            </a>
+          </Space>
+        </div>
+      ),
+    },
+  ];
+
+  interface QueryParamsType {
+    postName?: string;
+    postCode?: string;
+    state?: string;
+    postSort?: string;
+    postId?: string;
+    pageSize?: number;
+    pageNum?: number;
+  }
+
+  const getPostList = async (newQueryParams: object) => {
+    try {
+      const { code, data } = await getPostListApi(newQueryParams);
+      if (code === 1000) {
+        setListData(data.rows);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  const handleAdd = () => {
+    setModalTitle("新增用户");
+    setButtonType("ADD");
+    setIsShowModal(true);
+  };
+
+  const handleEdit = (data: any) => {
+    setModalTitle("修改用户");
+    setButtonType("EDIT");
+    setIsShowModal(true);
+    console.log(data);
+    setEchoData({
+      postId: data.postId,
+    });
+    handleEcho(data);
+  };
+
+  const handleConfirm = () => {
+    form.validateFields().then((values) => {
+      console.log(values);
+      console.log(buttonType);
+
+      if (buttonType === "ADD") {
+        handleConfirmAdd(values);
+      } else if (buttonType === "EDIT") {
+        handleConfirmEdit(values);
+      } else {
+        messageApi.open({
+          type: "error",
+          content: "系统异常，请刷新后重试",
+        });
+      }
+    });
+  };
+
+  const handleConfirmAdd = async (data: object) => {
+    console.log(data);
+    const { code } = await addPostApi(data);
+    try {
+      if (code === 1000) {
+        messageApi.open({
+          type: "success",
+          content: "创建成功",
+        });
+        setQueryParams({});
+        handleClear();
+      } else {
+        messageApi.open({
+          type: "error",
+          content: "岗位名称已经存在",
+        });
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  const handleConfirmEdit = async (data: object) => {
+    const editData = {
+      ...data,
+      postId: echoData.postId,
+    };
+    console.log(editData);
+    const { code } = await editPostApi(editData);
+    try {
+      if (code === 1000) {
+        messageApi.open({
+          type: "success",
+          content: "修改成功",
+        });
+        setQueryParams({});
+        handleClear();
+      } else {
+        messageApi.open({
+          type: "error",
+          content: "修改失败",
+        });
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  const handleReset = async () => {
+    setQueryParams({});
+    getPostList({});
+  };
+
+  const handleSearch = () => {
+    getPostList(queryParams);
+  };
+
+  const handleDel = async (record: any) => {
+    Modal.confirm({
+      title: `确定删除Id为-${record.postId}-, 岗位名称为-${record.postName}-的岗位吗?`,
+      icon: <ExclamationCircleFilled />,
+      async onOk() {
+        const { code } = await deletePostApi(record.postId);
+        try {
+          if (code === 1000) {
+            messageApi.open({
+              type: "success",
+              content: "删除成功",
+            });
+            setQueryParams({});
+          } else {
+            messageApi.open({
+              type: "error",
+              content: "删除失败",
+            });
+          }
+        } catch (err) {
+          console.log(err);
+        }
+      },
+      onCancel() {
+        messageApi.open({
+          type: "warning",
+          content: "取消成功",
+        });
+      },
+    });
+  };
+
+  const handleSearchValues = (e: any) => {
+    const { name, value } = e.target;
+    setQueryParams({ ...queryParams, [name]: value });
+  };
+
+  const handlePageChange = (page: number) => {
+    setQueryParams({
+      ...queryParams,
+      pageNum: page,
+    });
+  };
+
+  const handleEcho = (data: any) => {
+    const { postName, postCode, state, postSort } = data;
+    form.setFieldsValue({
+      postName,
+      postCode,
+      state,
+      postSort,
+    });
+  };
+
+  const handleCancel = () => {
+    handleClear();
+  };
+
+  const handleClear = () => {
+    form.resetFields();
+    setIsShowModal(false);
+  };
+
+  const onRadio = (e: any) => {
+    setRadioValue(e.target.value);
+  };
+
+  useEffect(() => {
+    getPostList(queryParams);
+  }, []);
+
+  return (
+    <div id="content">
+      <>
+        <div className="right">
+          <div className="search-content">
+            <>
+              <div className="content-top">
+                <div className="input-item">
+                  <div>岗位名称</div>
+                  <Input
+                    placeholder="请输入岗位名称"
+                    name="postName"
+                    allowClear
+                    value={queryParams.postName}
+                    onChange={handleSearchValues}
+                  />
+                </div>
+                <div className="input-item">
+                  <div>岗位编码</div>
+                  <Input
+                    placeholder="请输入岗位编码"
+                    name="postCode"
+                    allowClear
+                    value={queryParams.postCode}
+                    onChange={handleSearchValues}
+                  />
+                </div>
+                <div className="input-item">
+                  <div>状态</div>
+                  <Select
+                    style={{ width: 120 }}
+                    placeholder="用户状态"
+                    allowClear
+                    options={[
+                      { value: "1", label: "正常" },
+                      { value: "0", label: "停用" },
+                    ]}
+                    value={queryParams.state}
+                    onChange={(value: any) =>
+                      setQueryParams({
+                        ...queryParams,
+                        state: value,
+                      })
+                    }
+                  />
+                </div>
+              </div>
+              <div className="content-bottom">
+                <div className="search-button">
+                  <Button type="primary" onClick={handleSearch}>
+                    <SearchOutlined />
+                    搜索
+                  </Button>
+                </div>
+                <div className="reset-button" onClick={handleReset}>
+                  <Button>
+                    <RedoOutlined />
+                    重置
+                  </Button>
+                </div>
+              </div>
+            </>
+          </div>
+          <div className="add-content">
+            <>
+              <Button type="primary" onClick={handleAdd}>
+                <PlusOutlined />
+                新增
+              </Button>
+            </>
+          </div>
+          <div className="table-content">
+            <>
+              {contextHolder}
+              <Table
+                columns={columns}
+                dataSource={listData}
+                className="article-table"
+                pagination={{
+                  onChange: handlePageChange,
+                  locale: {
+                    jump_to: "跳至",
+                    page: "页",
+                  },
+                  showQuickJumper: true,
+                  showTotal: (total, range) =>
+                    `第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
+                }}
+              />
+            </>
+          </div>
+          <>
+            {contextHolder}
+            <Modal
+              title={modalTitle}
+              width={600}
+              okText="确认"
+              cancelText="取消"
+              open={isShowModal}
+              onOk={handleConfirm}
+              onCancel={handleCancel}
+            >
+              <Form
+                form={form}
+                name="basic"
+                initialValues={{ remember: true }}
+                onFinish={handleConfirm}
+                labelCol={{ span: 4 }}
+                autoComplete="off"
+                className="modal-form"
+              >
+                <Row>
+                  <Col span={24}>
+                    <Form.Item
+                      label="岗位名称"
+                      name="postName"
+                      rules={[{ required: true, message: "请输入岗位名称" }]}
+                    >
+                      <Input defaultValue={""} placeholder="请输入岗位名称" />
+                    </Form.Item>
+                  </Col>
+                  <Col span={24}>
+                    <Form.Item
+                      label="岗位编码"
+                      name="postCode"
+                      rules={[{ required: true, message: "请输入岗位编码" }]}
+                    >
+                      <Input defaultValue={""} placeholder="请输入岗位编码" />
+                    </Form.Item>
+                  </Col>
+                  <Col span={24}>
+                    <Form.Item
+                      label="显示顺序"
+                      name="postSort"
+                      rules={[{ required: false }]}
+                    >
+                      <InputNumber />
+                    </Form.Item>
+                  </Col>
+                  <Col span={24}>
+                    <Form.Item
+                      label="状态"
+                      name="state"
+                      rules={[
+                        {
+                          required: false,
+                        },
+                      ]}
+                    >
+                      <Radio.Group onChange={onRadio} value={radioValue}>
+                        <Radio value="1">正常</Radio>
+                        <Radio value="0">停用</Radio>
+                      </Radio.Group>
+                    </Form.Item>
+                  </Col>
+                </Row>
+              </Form>
+            </Modal>
+          </>
+        </div>
+      </>
+    </div>
+  );
+}

src/view/system/role/index.tsx

@@ -71,7 +71,6 @@ const fieldNames = {
 let thisrole: any = {};
 let treeIds: number[] = [];
 export default function Role() {
-  
   const { confirm } = Modal;
   const { RangePicker } = DatePicker;
   //提示组件
@@ -94,7 +93,6 @@ export default function Role() {
   const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
   const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
   const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
-  const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
   //Modal
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [modalTitle, setModalTitle] = useState("");
@@ -194,11 +192,10 @@ export default function Role() {
     pageNum: undefined,
     pageSize: undefined,
   });
-  const [allChecked,setAllChecked]=useState(false)
+  const [allChecked, setAllChecked] = useState(false);
   const onTreeExpand = (expandedKeysValue: React.Key[]) => {
     // console.log("onExpand", expandedKeysValue);
     setExpandedKeys(expandedKeysValue);
-    setAutoExpandParent(false);
   };
   const onCheckExpand = (e: CheckboxChangeEvent) => {
     console.log(`checked = ${e.target.checked}`);
@@ -209,7 +206,7 @@ export default function Role() {
   };
   const onCheckAll = (e: CheckboxChangeEvent) => {
     console.log(`checked = ${e.target.checked}`);
-    setAllChecked(!allChecked)
+    setAllChecked(!allChecked);
     if (!allChecked) setCheckedKeys(treeIds);
     else setCheckedKeys([]);
   };
@@ -220,13 +217,12 @@ export default function Role() {
   const onTreeCheck = (checkedKeysValue: any) => {
     // console.log("onCheck", checkedKeysValue.checked);
     console.log("onCheck", checkedKeysValue);
-    console.log('treeIds',treeIds);
+    console.log("treeIds", treeIds);
-    
+
-    if(checkedKeysValue.length!=treeIds.length){
+    if (checkedKeysValue.length != treeIds.length) {
-      setAllChecked(false)
+      setAllChecked(false);
-    }
+    } else {
-    else {
+      setAllChecked(true);
-      setAllChecked(true)
     }
     if (checkStrictly === false) {
       form.setFieldsValue({ menuIds: checkedKeysValue });
@@ -269,19 +265,19 @@ export default function Role() {
   };
   const handleSerach = () => {
     searchValue = formSearch.getFieldsValue();
-    
+
     if (typeof searchValue.dateTime !== "undefined") {
       searchValue.startTime = (searchValue.dateTime as string[])[0];
       searchValue.endTime = (searchValue.dateTime as string[])[1];
-    } 
+    }
-    setSearchValue(searchValue)
+    setSearchValue(searchValue);
     count = 1;
     setQueryTableDataParams({ ...searchValue });
   };
   const handleReset = () => {
     formSearch.resetFields();
-    searchValue =formSearch.getFieldsValue()
+    searchValue = formSearch.getFieldsValue();
-    setSearchValue(searchValue)
+    setSearchValue(searchValue);
     setQueryTableDataParams({ ...searchValue });
     // setSearchValue({ ...searchValue });
     // setCount(1)
@@ -336,7 +332,7 @@ export default function Role() {
     searchValue.startTime = dateString[0];
     searchValue.endTime = dateString[1];
     formSearch.setFieldsValue({ dateTime: [dateString[0], dateString[1]] });
-    setSearchValue(searchValue)
+    setSearchValue(searchValue);
     // setSearchValue({ ...searchValue })
   };
   const filterOption = (
@@ -515,29 +511,35 @@ export default function Role() {
   return (
     <ConfigProvider locale={zh_CN}>
       <div className="roleBox">
-        
         <Form
           layout="inline"
           initialValues={undefined}
           form={formSearch}
           onFinish={handleSerach}
-          style={{fontWeight:'700'}}
+          style={{ fontWeight: "700" }}
         >
-          <Form.Item  label="角色名称" name="roleName" style={{width:300+'px',marginTop:'10px'}}>
+          <Form.Item
-            <Input
+            label="角色名称"
-              placeholder="请输入角色名称"
+            name="roleName"
-              allowClear
+            style={{ width: 300 + "px", marginTop: "10px" }}
-            />
+          >
+            <Input placeholder="请输入角色名称" allowClear />
           </Form.Item>
-          <Form.Item label="权限字符" name="roleKey" style={{width:300+'px',marginTop:'10px'}}>
+          <Form.Item
-            <Input
+            label="权限字符"
-              allowClear
+            name="roleKey"
-              placeholder="请输入权限字符"
+            style={{ width: 300 + "px", marginTop: "10px" }}
-            />
+          >
+            <Input allowClear placeholder="请输入权限字符" />
           </Form.Item>
-          <Form.Item  label="状态:" name="state"  wrapperCol={{ span: 22 }} style={{marginTop:'10px'}}>
+          <Form.Item
+            label="状态:"
+            name="state"
+            wrapperCol={{ span: 22 }}
+            style={{ marginTop: "10px" }}
+          >
             <Select
-              style={{ width: 300 + "px" ,textAlign:"left"}}
+              style={{ width: 300 + "px", textAlign: "left" }}
               allowClear
               showSearch
               placeholder="请选择角色状态"
@@ -558,8 +560,12 @@ export default function Role() {
               ]}
             />
           </Form.Item>
-          <Form.Item label="登陆时间" name="dateTime" style={{marginTop:'10px'}}>
+          <Form.Item
-            <Space direction="vertical" style={{width:400+'px'}}>
+            label="登陆时间"
+            name="dateTime"
+            style={{ marginTop: "10px" }}
+          >
+            <Space direction="vertical" style={{ width: 400 + "px" }}>
               <RangePicker
                 locale={dataLocale}
                 showTime
@@ -568,18 +574,18 @@ export default function Role() {
               />
             </Space>
           </Form.Item>
-          <Form.Item style={{marginTop:'10px'}}>
+          <Form.Item style={{ marginTop: "10px" }}>
             <Button
               type="primary"
               htmlType="submit"
-              style={{marginLeft:20+'px'}}
+              style={{ marginLeft: 20 + "px" }}
               onClick={() => handleSerach()}
             >
               <SearchOutlined />
               搜索
             </Button>
           </Form.Item>
-          <Form.Item style={{marginTop:'10px'}}>
+          <Form.Item style={{ marginTop: "10px" }}>
             <Button onClick={() => handleReset()}>
               <SyncOutlined />
               重置
@@ -660,10 +666,15 @@ export default function Role() {
               {/* <input type="text" /> */}
               <div className="checkBox">
                 <Checkbox onChange={onCheckExpand}>展开</Checkbox>
-                <Checkbox onChange={onCheckAll} checked={allChecked}>全选</Checkbox>
+                <Checkbox onChange={onCheckAll} checked={allChecked}>
+                  全选
+                </Checkbox>
                 <Checkbox onChange={onCheckFaSon}>父子联动</Checkbox>
               </div>
-              <div className="myTree" style={{maxHeight:'250px',overflowY:"auto"}}>
+              <div
+                className="myTree"
+                style={{ maxHeight: "250px", overflowY: "auto" }}
+              >
                 <Tree
                   fieldNames={fieldNames}
                   checkable

src/view/system/user/index.scss

@@ -0,0 +1,104 @@
+#content {
+  display: flex;
+  border-top: 1px solid black;
+  .dept-content {
+    flex: 20%;
+    padding: 35px 12px 0 0;
+    height: calc(100vh - 85px);
+  }
+
+  .left-dept {
+    flex: 20%;
+    padding: 35px 12px 0 0;
+    height: calc(100vh - 85px);
+    border: 1px solid red;
+    border-top: 1px solid black;
+  }
+  .right-user {
+    flex: 80%;
+    height: 190px;
+    display: flex;
+    flex-direction: column;
+
+    .search-content {
+      display: flex;
+      flex-direction: column;
+      padding: 35px 12px 0 0;
+      .content-top {
+        display: flex;
+        .input-item {
+          display: flex;
+          align-items: center;
+          margin-right: 20px;
+          width: 270px;
+          div {
+            width: 120px;
+            font-weight: bold;
+          }
+        }
+        :nth-child(3) {
+          div {
+            margin-right: -30px;
+          }
+        }
+      }
+      .content-bottom {
+        display: flex;
+        margin-left: -20px;
+        margin-top: 20px;
+        div {
+          margin-right: 10px;
+        }
+        .time-selector {
+          display: flex;
+          align-items: center;
+
+          div {
+            width: 120px;
+            font-weight: bold;
+          }
+          .time-picker {
+            width: 400px;
+            text-align: center;
+            margin-left: -30px;
+            margin-right: 25px;
+          }
+        }
+        button:focus,
+        button:focus-visible {
+          outline: none;
+        }
+      }
+    }
+    .table-content {
+      margin: 12px 0 0 12px;
+
+      .ant-table-thead > tr > th {
+        color: #909399;
+        text-align: center;
+      }
+      .ant-table-tbody > tr > td {
+        text-align: center;
+      }
+    }
+    .add-content {
+      display: flex;
+      margin-left: 12px;
+      margin-top: 20px;
+      button:focus,
+      button:focus-visible {
+        outline: none;
+      }
+    }
+
+    .user-mid-button {
+      display: flex;
+      margin-left: 12px;
+      margin-top: 20px;
+      button:focus,
+      button:focus-visible {
+        outline: none;
+      }
+    }
+  }
+}

src/view/system/user/index.tsx

@@ -1,7 +1,807 @@
+import "./index.scss";
+import {
+  Input,
+  Tree,
+  Select,
+  DatePicker,
+  Button,
+  Table,
+  Space,
+  Tag,
+  message,
+  Modal,
+  Form,
+  Row,
+  Col,
+  TreeSelect,
+  Radio,
+} from "antd";
 
+import {
+  EditOutlined,
+  DeleteOutlined,
+  ExclamationCircleFilled,
+} from "@ant-design/icons";
+
+import {
+  getUserListApi,
+  deleteUserApi,
+  getDeptTreeApi,
+  addUserApi,
+  getRoleListApi,
+  getUserInfoApi,
+  editUserApi,
+} from "../../../api/system/users";
+import dataLocale from "antd/es/date-picker/locale/zh_CN";
+import React, { useEffect, useState, useMemo } from "react";
+import { SearchOutlined, PlusOutlined } from "@ant-design/icons";
 
 export default function User() {
-  return(
+  const postIdList: number[] = [];
-    <div>user</div>
+  const [form] = Form.useForm();
-  )
+  const [searchForm] = Form.useForm();
-}
+  const [echoId, setEchoId] = useState<any>();
+  const [myTreeData, setMyTreeData] = useState<[]>([]);
+  const [listData, setListData] = useState([]);
+  const [radioValue, setRadioValue] = useState(1);
+  const [searchTreeValue, setSearchTreeValue] = useState("");
+  const [roleList, setRoleList] = useState<any[]>([]);
+  const [messageApi, contextHolder] = message.useMessage();
+  const [modalTitle, setModalTitle] = useState<string>("");
+  const [buttonType, setButtonType] = useState<string>("");
+  const [isShowModal, setIsShowModal] = useState<boolean>(false);
+  const [autoExpandParent, setAutoExpandParent] = useState(true);
+  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([
+    100, 102, 101, 104,
+  ]);
+  const [treeValue, setTreeValue] = useState<string>();
+  const fieldNames = {
+    label: "deptName",
+    title: "deptName",
+    value: "deptId",
+    key: "deptName",
+  };
+  const [queryParams, setQueryParams] = useState<QueryParamsType>({
+    deptId: undefined,
+    userName: undefined,
+    phoneNumber: undefined,
+    state: undefined,
+    startTime: undefined,
+    endTime: undefined,
+    pageNum: undefined,
+    pageSize: undefined,
+  });
+  const columns = [
+    {
+      title: "序号",
+      dataIndex: "userId",
+      key: "Id",
+      render: (text: string) => <>{text ? text : "null"}</>,
+    },
+    {
+      title: "用户名称",
+      dataIndex: "userName",
+      key: "userName",
+      render: (text: string) => <>{text ? text : "null"}</>,
+    },
+    {
+      title: "用户昵称",
+      dataIndex: "nickName",
+      key: "nikeName",
+      render: (text: string) => <>{text ? text : "null"}</>,
+    },
+    {
+      title: "部门",
+      key: "deptId",
+      dataIndex: "deptName",
+      render: (text: string) => <>{text ? text : "--"}</>,
+    },
+    {
+      title: "手机号码",
+      key: "phoneNumber",
+      dataIndex: "phoneNumber",
+      render: (text: string) => <>{text ? text : "--"}</>,
+    },
+    {
+      title: "状态",
+      key: "state",
+      dataIndex: "state",
+      render: (text: string) => (
+        <>
+          {text === "0" ? (
+            <Tag color="processing">停用</Tag>
+          ) : (
+            <Tag color="processing">正常</Tag>
+          )}
+        </>
+      ),
+    },
+    {
+      title: "创建时间",
+      key: "createTime",
+      dataIndex: "createTime",
+      render: (text: string) => <>{text ? text : "null"}</>,
+    },
+    {
+      title: "操作",
+      key: "operate",
+      dataIndex: "operate",
+      render: (_: string, record: object) => (
+        <div style={{ color: "#58aaff" }}>
+          <Space>
+            <EditOutlined />
+            <a
+              href="#"
+              onClick={() => handleEdit(record)}
+              style={{ color: " #58aaff" }}
+            >
+              编辑
+            </a>
+            <DeleteOutlined />
+            <a
+              href="#"
+              onClick={() => handleDel(record)}
+              style={{ color: " #58aaff" }}
+            >
+              删除
+            </a>
+          </Space>
+        </div>
+      ),
+    },
+  ];
+
+  interface AddUserType {
+    email: string;
+    nickName: string;
+    password: string;
+    phoneNumber: string;
+    postIds: number[];
+    roleIds: number[];
+    sex: string;
+    state: string;
+    userName: string;
+  }
+
+  interface QueryParamsType {
+    deptId?: number;
+    userName?: string;
+    phoneNumber?: string;
+    state?: string;
+    startTime?: string | any;
+    endTime?: string | any;
+    pageNum?: number;
+    pageSize?: number;
+  }
+
+  let addUserParams: AddUserType = {
+    email: "",
+    nickName: "",
+    password: "",
+    phoneNumber: "",
+    postIds: [],
+    roleIds: [],
+    sex: "",
+    state: "",
+    userName: "",
+  };
+
+  const getDeptTreeData = async () => {
+    try {
+      const { code, data } = await getDeptTreeApi();
+      if (code === 1000) {
+        setMyTreeData(data);
+        handleLoopPostList(data);
+        setExpandedKeys(postIdList);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const getUserList = async (newQueryParams: object) => {
+    try {
+      const { code, data } = await getUserListApi(newQueryParams);
+      if (code === 1000) {
+        setListData(data.rows);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  const getUserInfo = async () => {
+    try {
+      const { code, data } = await getUserInfoApi(echoId);
+      if (code === 1000) {
+        handleEcho(data);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const getRoleList = async () => {
+    try {
+      const { code, data } = await getRoleListApi();
+      if (code === 1000) {
+        setRoleList(data.rows);
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  const handleAdd = () => {
+    setModalTitle("新增用户");
+    setButtonType("ADD");
+    setIsShowModal(true);
+  };
+
+  const handleEdit = (echoData: any) => {
+    setModalTitle("修改用户");
+    setButtonType("EDIT");
+    setIsShowModal(true);
+    setEchoId(echoData.userId);
+  };
+
+  const handleConfirm = () => {
+    form.validateFields().then((values) => {
+      Object.keys(values).forEach(
+        (key) => values[key] === undefined && delete values[key]
+      );
+      addUserParams = {
+        ...addUserParams,
+        ...values,
+        userId: echoId,
+      };
+      if (buttonType === "ADD") {
+        handleAddUser();
+      } else if (buttonType === "EDIT") {
+        handleEditUser();
+      } else {
+        messageApi.open({
+          type: "error",
+          content: "系统异常，请刷新后重试",
+        });
+      }
+    });
+  };
+
+  const handleAddUser = async () => {
+    const { code } = await addUserApi(addUserParams);
+    try {
+      if (code === 1000) {
+        messageApi.open({
+          type: "success",
+          content: "创建成功",
+        });
+        setQueryParams({});
+        handleClear();
+      } else {
+        messageApi.open({
+          type: "error",
+          content: "用户名已经存在",
+        });
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  const handleEditUser = async () => {
+    const { code } = await editUserApi(addUserParams);
+    try {
+      if (code === 1000) {
+        messageApi.open({
+          type: "success",
+          content: "修改成功",
+        });
+        setQueryParams({});
+        handleClear();
+      } else {
+        messageApi.open({
+          type: "error",
+          content: "修改失败",
+        });
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  const handleReset = async () => {
+    searchForm.resetFields();
+    setQueryParams({});
+    getUserList({});
+  };
+
+  const handleSearch = () => {
+    getUserList(queryParams);
+  };
+
+  const handleDel = async (record: any) => {
+    Modal.confirm({
+      title: `确定删除Id为-${record.userId}-, 用户名为-${record.userName}-的用户吗?`,
+      icon: <ExclamationCircleFilled />,
+      async onOk() {
+        const { code } = await deleteUserApi(record.userId);
+        try {
+          if (code === 1000) {
+            messageApi.open({
+              type: "success",
+              content: "删除成功",
+            });
+            setQueryParams({});
+          } else {
+            messageApi.open({
+              type: "error",
+              content: "删除失败",
+            });
+          }
+        } catch (err) {
+          console.log(err);
+        }
+      },
+      onCancel() {
+        messageApi.open({
+          type: "warning",
+          content: "取消成功",
+        });
+      },
+    });
+  };
+
+  const handleTimePikerValue = (_: any, dates: string[]) => {
+    setQueryParams({
+      ...queryParams,
+      startTime: dates[0],
+      endTime: dates[1],
+    });
+    searchForm.setFieldsValue({ dataTime: [dates[0], dates[1]] });
+  };
+
+  const handleSearchValues = (e: any) => {
+    const { name, value } = e.target;
+    setQueryParams({ ...queryParams, [name]: value });
+  };
+
+  const handlePageChange = (page: number) => {
+    setQueryParams({
+      ...queryParams,
+      pageNum: page,
+    });
+  };
+
+  const handleTreeSelect = (deptId: any) => {
+    console.log(queryParams);
+    getUserList({
+      ...queryParams,
+      deptId: deptId[0],
+    });
+  };
+
+  const handleEcho = (data: any) => {
+    const { userName, nickName, sex, state, phoneNumber, deptId, email } =
+      data.user;
+    const { postIds, roleIds } = data;
+    form.setFieldsValue({
+      userName,
+      nickName,
+      state,
+      phoneNumber,
+      sex,
+      deptId,
+      email,
+      postIds,
+      roleIds,
+    });
+  };
+
+  const handleCancel = () => {
+    handleClear();
+  };
+
+  const handleClear = () => {
+    form.resetFields();
+    setIsShowModal(false);
+  };
+
+  const handleExpandKeys = (key: string, data: object[]) => {
+    const filterRes = new RegExp(key, "i");
+    data.forEach((item: any) => {
+      if (filterRes.test(item?.title?.props?.children)) {
+        postIdList.push(item.key);
+      }
+      item.children ? handleExpandKeys(key, item.children) : "";
+    });
+  };
+
+  const handleLoopPostList = (loopData: object[]) => {
+    loopData.forEach((item: any) => {
+      if (item?.deptId) {
+        const flag = postIdList.some((someItem) => {
+          someItem === item.deptId;
+        });
+        if (!flag) {
+          postIdList.push(item.deptId);
+        }
+      }
+      item.children ? handleLoopPostList(item.children) : "";
+    });
+  };
+
+  const onRadio = (e: any) => {
+    setRadioValue(e.target.value);
+  };
+
+  const onTreeSelect = (newValue: string) => {
+    setTreeValue(newValue);
+  };
+
+  const onTreeSearch = (e?: any) => {
+    const { value } = e.target ? e.target : null;
+    setSearchTreeValue(value);
+    handleExpandKeys(value, treeData);
+    setExpandedKeys(postIdList);
+    setAutoExpandParent(true);
+  };
+
+  const onExpand = (newExpandedKeys: React.Key[]) => {
+    console.log(newExpandedKeys);
+    setExpandedKeys(newExpandedKeys);
+    setAutoExpandParent(false);
+  };
+
+  const treeData = useMemo(() => {
+    const loop = (data: any[]): any[] =>
+      data.map((item) => {
+        const strTitle = item.deptName as string;
+        const index = strTitle.indexOf(searchTreeValue);
+        const beforeStr = strTitle.substring(0, index);
+        const afterStr = strTitle.slice(index + searchTreeValue.length);
+        const title =
+          index > -1 ? (
+            <span>
+              {beforeStr}
+              <span className="site-tree-search-value">{searchTreeValue}</span>
+              {afterStr}
+            </span>
+          ) : (
+            <span>{strTitle}</span>
+          );
+        if (item.children) {
+          return { title, key: item.deptId, children: loop(item.children) };
+        }
+        return {
+          title,
+          key: item.deptId,
+        };
+      });
+    return loop(myTreeData);
+  }, [myTreeData]);
+
+  useEffect(() => {
+    getDeptTreeData();
+    getRoleList();
+    getUserInfo();
+  }, [echoId]);
+
+  useEffect(() => {
+    getUserList({});
+  }, []);
+
+  return (
+    <div id="content">
+      <div className="dept-content">
+        <Input
+          allowClear
+          style={{ marginBottom: 8 }}
+          prefix={<SearchOutlined />}
+          placeholder="请输入部门名称"
+          onChange={onTreeSearch}
+        />
+        <Tree
+          onExpand={onExpand}
+          defaultExpandAll={true}
+          expandedKeys={expandedKeys}
+          autoExpandParent={autoExpandParent}
+          treeData={treeData}
+          onSelect={handleTreeSelect}
+        />
+      </div>
+      <>
+        <div className="right-user">
+          <Form
+            layout="inline"
+            form={searchForm}
+            onFinish={handleSearch}
+            style={{ fontWeight: "700", marginLeft: 12, marginTop: 23 }}
+          >
+            <Form.Item
+              label="用户名称"
+              name="userName"
+              style={{ width: 300 + "px", marginTop: "10px" }}
+            >
+              <Input
+                placeholder="请输入用户名称"
+                name="userName"
+                allowClear
+                value={queryParams.userName}
+                onChange={handleSearchValues}
+              />
+            </Form.Item>
+            <Form.Item
+              label="手机号码"
+              name="phoneNumber"
+              style={{ width: 300 + "px", marginTop: "10px" }}
+            >
+              <Input
+                placeholder="请输入手机号码"
+                name="phoneNumber"
+                allowClear
+                value={queryParams.phoneNumber}
+                onChange={handleSearchValues}
+              />
+            </Form.Item>
+            <Form.Item label="状态" name="state" style={{ marginTop: "10px" }}>
+              <Select
+                style={{ width: 250 }}
+                placeholder="用户状态"
+                allowClear
+                options={[
+                  { value: "1", label: "正常" },
+                  { value: "0", label: "停用" },
+                ]}
+                value={queryParams.state}
+                onChange={(value: any) =>
+                  setQueryParams({
+                    ...queryParams,
+                    state: value,
+                  })
+                }
+              />
+            </Form.Item>
+            <Form.Item
+              label="创建时间"
+              name="dateTime"
+              style={{ marginTop: "10px" }}
+            >
+              <DatePicker.RangePicker
+                locale={dataLocale}
+                showTime
+                format="YYYY-MM-DD HH:mm:ss"
+                onChange={handleTimePikerValue}
+              />
+            </Form.Item>
+            <Form.Item style={{ marginTop: "10px" }}>
+              <Button
+                type="primary"
+                htmlType="submit"
+                style={{ marginLeft: 20 + "px" }}
+              >
+                搜索
+              </Button>
+            </Form.Item>
+            <Form.Item style={{ marginTop: "10px" }}>
+              <Button onClick={handleReset}>重置</Button>
+            </Form.Item>
+          </Form>
+
+          <div className="add-content">
+            <>
+              <Button type="primary" onClick={handleAdd}>
+                <PlusOutlined />
+                新增
+              </Button>
+            </>
+          </div>
+          <div className="table-content">
+            <>
+              {contextHolder}
+              <Table
+                columns={columns}
+                dataSource={listData}
+                className="article-table"
+                pagination={{
+                  onChange: handlePageChange,
+                  locale: {
+                    jump_to: "跳至",
+                    page: "页",
+                  },
+                  showQuickJumper: true,
+                  showTotal: (total, range) =>
+                    `第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
+                }}
+              />
+            </>
+          </div>
+          <>
+            {contextHolder}
+            <Modal
+              title={modalTitle}
+              width={700}
+              okText="确认"
+              cancelText="取消"
+              open={isShowModal}
+              onOk={handleConfirm}
+              onCancel={handleCancel}
+            >
+              <Form
+                form={form}
+                name="basic"
+                initialValues={{ remember: true }}
+                labelCol={{ span: 6 }}
+                onFinish={handleConfirm}
+                autoComplete="off"
+                className="modal-form"
+              >
+                <Row>
+                  <Col span={12}>
+                    <Form.Item
+                      label="用户名称"
+                      name="userName"
+                      rules={[{ required: true, message: "请输入用户名称" }]}
+                    >
+                      <Input defaultValue={""} placeholder="请输入用户名称" />
+                    </Form.Item>
+                  </Col>
+                  <Col span={12}>
+                    <Form.Item
+                      label="用户昵称"
+                      name="nickName"
+                      rules={[{ required: true, message: "请输入用户昵称" }]}
+                    >
+                      <Input defaultValue={""} placeholder="请输入用户昵称" />
+                    </Form.Item>
+                  </Col>
+                  <Col span={12}>
+                    <Form.Item
+                      label="用户性别"
+                      name="sex"
+                      rules={[{ required: false }]}
+                    >
+                      <Select
+                        placeholder="请选择用户性别"
+                        options={[
+                          { value: "0", label: "男" },
+                          { value: "1", label: "女" },
+                          { value: "2", label: "未知" },
+                        ]}
+                      />
+                    </Form.Item>
+                  </Col>
+                  <Col span={12}>
+                    <Form.Item
+                      label="用户密码"
+                      name="password"
+                      rules={[{ required: true, message: "请输入用户密码" }]}
+                    >
+                      <Input.Password
+                        defaultValue={""}
+                        placeholder="请输入密码"
+                      />
+                    </Form.Item>
+                  </Col>
+                  <Col span={12}>
+                    <Form.Item
+                      label="归属部门"
+                      name="deptId"
+                      rules={[{ required: false }]}
+                    >
+                      <TreeSelect
+                        showSearch
+                        style={{ width: "100%" }}
+                        value={treeValue}
+                        dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
+                        placeholder="请选择"
+                        allowClear
+                        fieldNames={fieldNames}
+                        treeDefaultExpandAll
+                        onChange={onTreeSelect}
+                        treeData={myTreeData}
+                      />
+                    </Form.Item>
+                  </Col>
+                  <Col span={12}>
+                    <Form.Item
+                      label="手机号码"
+                      name="phoneNumber"
+                      rules={[{ required: false }]}
+                    >
+                      <Input placeholder="请输入手机号码" />
+                    </Form.Item>
+                  </Col>
+                  <Col span={12}>
+                    <Form.Item
+                      label="邮箱"
+                      name="email"
+                      rules={[{ required: false }]}
+                    >
+                      <Input defaultValue={""} placeholder="请输入邮箱" />
+                    </Form.Item>
+                  </Col>
+                  <Col span={12}>
+                    <Form.Item
+                      label="状态"
+                      name="state"
+                      rules={[
+                        {
+                          required: false,
+                          message: "Please input your password!",
+                        },
+                      ]}
+                    >
+                      <Radio.Group onChange={onRadio} value={radioValue}>
+                        <Radio value="1">正常</Radio>
+                        <Radio value="0">停用</Radio>
+                      </Radio.Group>
+                    </Form.Item>
+                  </Col>
+                  <Col span={12}>
+                    <Form.Item
+                      label="岗位"
+                      name="postIds"
+                      rules={[
+                        {
+                          required: false,
+                          message: "Please input your password!",
+                        },
+                      ]}
+                    >
+                      <Select
+                        mode="multiple"
+                        defaultValue={[]}
+                        options={[
+                          { value: "董事长", label: "董事长" },
+                          { value: "项目经理", label: "项目经理" },
+                          { value: "人力资源", label: "人力资源" },
+                          { value: "普通员工", label: "普通员工" },
+                        ]}
+                        placeholder="请选择岗位"
+                      />
+                    </Form.Item>
+                  </Col>
+                  <Col span={12}>
+                    <Form.Item
+                      label="角色"
+                      name="roleIds"
+                      rules={[
+                        {
+                          required: false,
+                          message: "Please input your password!",
+                        },
+                      ]}
+                    >
+                      <Select mode="multiple" placeholder="请选择角色">
+                        {roleList.map((item) => (
+                          <Select.Option key={item.roleId} value={item.roleId}>
+                            {item.roleName}
+                          </Select.Option>
+                        ))}
+                      </Select>
+                    </Form.Item>
+                  </Col>
+                  <Col span={24}>
+                    <Form.Item
+                      label="备注"
+                      labelCol={{ span: 3 }}
+                      rules={[
+                        {
+                          required: false,
+                          message: "Please input your password!",
+                        },
+                      ]}
+                    >
+                      <Input.TextArea placeholder="请输入内容" />
+                    </Form.Item>
+                  </Col>
+                </Row>
+              </Form>
+            </Modal>
+          </>
+        </div>
+      </>
+    </div>
+  );
+}