Merge branch 'leeiNew' of http://git.feashow.cn/wenhua/fateverse-react into leeiNew

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,
-  dataScope?: string,
-  deptIds?: any[],
-  menuIds?: any[],
-  roleId?: number,
-  roleKey?: string,
-  roleName?: string,
-  state?: string,
-  endTime?: string,
-  startTime?: string,
-  pageNum?: number,
-  pageSize?: number
+  createTime?: string;
+  dataScope?: string;
+  deptIds?: any[];
+  menuIds?: any[];
+  roleId?: number;
+  roleKey?: string;
+  roleName?: string;
+  state?: string;
+  endTime?: string;
+  startTime?: string;
+  pageNum?: 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',
-    method: 'get',
+    url: "/admin/role",
+    method: "get",
     params: {
       endTime,
       roleKey,
@@ -27,51 +28,48 @@ export const getRolesDataAPI = (params: paramsType) => {
       startTime,
       state,
       pageNum,
-      pageSize
-    }
-  })
-}
-export const delRoleAPI = (params: paramsType) => {
-  let { roleId } = params
+      pageSize,
+    },
+  });
+};
+export const delRoleAPI = (roleId: paramsType) => {
   // console.log(roleId);
 
   return request({
     url: `/admin/role/${roleId}`,
-    method: 'delete',
-  })
-}
+    method: "delete",
+  });
+};
 export const getMenuLiseAPI = () => {
-  
   return request({
-    url: '/admin/menu',
-    method: 'get',
-    
-  })
-}
-export const addRoleAPI = (data:any) => {
+    url: "/admin/menu",
+    method: "get",
+  });
+};
+export const addRoleAPI = (data: any) => {
   // console.log('addAPI',data);
   return request({
     url: `/admin/role`,
-    method: 'post',
-    data
-  })
-}
-export const getRoleAPI = (params:paramsType) => {
-  const {roleId}=params
+    method: "post",
+    data,
+  });
+};
+export const getRoleAPI = (params: paramsType) => {
+  const { roleId } = params;
 
   return request({
     url: `/admin/role/${roleId}`,
-    method: 'get',
-  })
-}
-export const setRoleDataAPI = (data:any) => {
+    method: "get",
+  });
+};
+export const setRoleDataAPI = (data: any) => {
   // data.menuIds=[]
   // const {roleId}=params
-  console.log('修改',data);
+  console.log("修改", data);
 
   return request({
     url: `/admin/role`,
-    method: 'put',
-    data:data
-  })
-}
+    method: "put",
+    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(
-    <div>公告1</div>
-  )
+  const [noticeInfo, setNoticeInfo] = useState<string>("");
+  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

@@ -86,16 +86,16 @@ let thisrole: any = {};
 export default function Inform() {
   const editorInit = {
     // selector:'textarea',
-    min_width: 600,
-    min_height: 500,
     language: "zh_CN",
     plugins:
       "print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave bdmap indent2em autoresize formatpainter axupimgs",
     toolbar:
-      ["code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link | anchor | alignleft aligncenter alignright alignjustify outdent indent | \
+      "code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link |  anchor | alignleft aligncenter alignright alignjustify outdent indent | \
     styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
-    table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs"],
-    
+    table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs",
+    width: "100%",
+    height: 650,
+    min_height: 400,
     importcss_append: true,
     //自定义文件选择器的回调内容
     // file_picker_callback: function (callback, value, meta) {
@@ -254,7 +254,6 @@ export default function Inform() {
   };
   const onEditorChange=(Value:string)=>{
     setEditorValue(Value)
-    
   }
   //   let thisrole: any = {roleId:'s'};
   const handleDetail = (text: any) => {
@@ -745,16 +744,14 @@ export default function Inform() {
 
             <Form.Item name="noticeContent" label="公告内容">
               <Row>
-                <div style={{width:'800px'}}>
+                
                 <Editor
                   apiKey="v4zo4n22oanvco29ws5drh0pecuf3gh53clx53cccj3grjwg"
                   initialValue=""
                   init={editorInit}
-                  // value={editorValue}
+                  value={editorValue}
                   onEditorChange={(Value)=>onEditorChange(Value)}
                 ></Editor>
-                </div>
-                
               </Row>
             </Form.Item>
           </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){
-      setAllChecked(false)
-    }
-    else {
-      setAllChecked(true)
+    if (checkedKeysValue.length != treeIds.length) {
+      setAllChecked(false);
+    } else {
+      setAllChecked(true);
     }
     if (checkStrictly === false) {
       form.setFieldsValue({ menuIds: checkedKeysValue });
@@ -274,14 +270,14 @@ export default function Role() {
       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()
-    setSearchValue(searchValue)
+    searchValue = formSearch.getFieldsValue();
+    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'}}>
-            <Input
-              placeholder="请输入角色名称"
-              allowClear
-            />
+          <Form.Item
+            label="角色名称"
+            name="roleName"
+            style={{ width: 300 + "px", marginTop: "10px" }}
+          >
+            <Input placeholder="请输入角色名称" allowClear />
           </Form.Item>
-          <Form.Item label="权限字符" name="roleKey" style={{width:300+'px',marginTop:'10px'}}>
-            <Input
-              allowClear
-              placeholder="请输入权限字符"
-            />
+          <Form.Item
+            label="权限字符"
+            name="roleKey"
+            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'}}>
-            <Space direction="vertical" style={{width:400+'px'}}>
+          <Form.Item
+            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(
-    <div>user</div>
-  )
+  const postIdList: number[] = [];
+  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>
+  );
 }