Merge pull request 'dev' (#28) from dev into dev_wenhua_plus

Reviewed-on: http://git.feashow.cn/wenhua/fateverse-react/pulls/28

.drone.yml

@@ -7,36 +7,18 @@ steps:
     volumes:
       - name: cache
         path: /drone/src/node_modules
-      - name: build
-        path: /app/build
     commands:
       - export CI=false
-      - mkdir -p /app/build/$DRONE_REPO_NAME
-      - rm -rf /app/build/$DRONE_REPO_NAME/*
-      - cp deployment.yml /app/build/$DRONE_REPO_NAME/
-      - cp Dockerfile /app/build/$DRONE_REPO_NAME/
-      - cp .dockerignore /app/build/$DRONE_REPO_NAME/
-#      - cp default.conf /app/build/$DRONE_REPO_NAME/
-      - cp docker.sh /app/build/$DRONE_REPO_NAME/
-      - cp nginx.conf /app/build/$DRONE_REPO_NAME/
-      - npm -v
       - mkdir -p ./node_modules
       - export NODE_MODULES_PATH=`pwd`/node_modules
       - npm config set registry https://registry.npm.taobao.org
       - set NODE_OPTIONS=--openssl-legacy-provider
       - npm install
       - npm run build
-      - ls /app/build/$DRONE_REPO_NAME/
-      - echo $NODE_MODULES_PATH
-      - cp -r dist /app/build/$DRONE_REPO_NAME
-
-
 
   - name: build-docker # 制作docker镜像
     image: docker # 使用官方docker镜像
     volumes: # 将容器内目录挂载到宿主机
-      - name: build
-        path: /app/build
       - name: docker
         path: /var/run/docker.sock # 挂载宿主机的docker
       - name: config
@@ -51,14 +33,10 @@ steps:
       REGISTRY_NAMESPACE:
         from_secret: registry_namespace
     commands: # 定义在Docker容器中执行的shell命令
-      - cd /app/build/$DRONE_REPO_NAME/
-      - cat Dockerfile
       - sed -i 's/$REGISTRY/'"$REGISTRY"'/' deployment.yml
       - sed -i 's/$REGISTRY_NAMESPACE/'"$REGISTRY_NAMESPACE"'/' deployment.yml
       - sed -i 's/$DRONE_REPO_NAME/'"$DRONE_REPO_NAME"'/' deployment.yml
       - sed -i 's/$DRONE_COMMIT/'"$DRONE_COMMIT"'/' deployment.yml
-      #      - sed -i 's/$DRONE_COMMIT/'"$DRONE_COMMIT"'/' docker.sh
-      #      - sed -i 's/$DRONE_REPO_NAME/'"$DRONE_REPO_NAME"'/' docker.sh
       # docker登录,不能在脚本中登录,并且不能使用docker login -u -p
       - echo $DOCKER_PASSWORD | docker login $REGISTRY --username $DOCKER_USERNAME --password-stdin
       - chmod +x docker.sh
@@ -67,29 +45,19 @@ steps:
       # 执行完脚本删除本次制作的docker镜像,避免多次后当前runner空间不足
       - docker rmi -f $(docker images | grep $DRONE_REPO_NAME | awk '{print $3}')
 
-
   - name: drone-rancher # rancher运行
     image: registry.cn-chengdu.aliyuncs.com/claywang/kubectl #阿里云的kubectl镜像,里面包含kubectl命令行工具
     volumes: # 将容器内目录挂载到宿主机
-      - name: build
-        path: /app/build # 将应用打包好的Jar和执行脚本挂载出来
       - name: config
         path: /app/config # 将kubectl 配置文件挂载出来
     commands: # 定义在Docker容器中执行的shell命令
-      - cd /app/build/$DRONE_REPO_NAME/
-      # 将deployment中定义的变量替换为drone中的内置变量
-      - cat deployment.yml
       # 通过kubectl指令运行deployment.yml,并指定授权文件kubectl_conf.yml
-      # - kubectl apply -f deployment.yml -n $DRONE_COMMIT_BRANCH --kubeconfig=/app/config/kubectl_conf.yml
       - kubectl apply -f deployment.yml -n dev --kubeconfig=/app/config/hcy-text-kubectl.yml
 
 volumes:
-  - name: build
-    host:
-      path: /home/build
   - name: cache
     host:
-      path: /home/npm/cache
+      path: /home/npm/fateverse-react
   - name: config # k8s对接的配置文件
     host:
       path: /home/kubect
@@ -102,6 +70,7 @@ volumes:
 
 trigger:
   branch:
+  #    - prod
     - dev
   event:
     - push

src/api/system/dept.ts

@@ -0,0 +1,59 @@
+import request from "@/utils/request";
+interface queryParamsType {
+  deptName?: string;
+  state?: number;
+}
+interface addParamsType {
+    deptName: string;
+    leader:string;
+    leaderId:number;
+    parentId?:number;
+    ancestors?:string
+    delFlag?:string
+    deptId?:number
+    email?:string
+    phone?:string
+    state?:string
+  }
+export const getDatasAPI = (params: queryParamsType) => {
+  console.log(params);
+
+  return request({
+    url: "/admin/dept",
+    method: "get",
+    params: params,
+  });
+};
+export const editDataAPI = (params: addParamsType) => {
+  console.log(params);
+  params.leaderId=0
+  return request({
+    url: "/admin/dept",
+    method: "put",
+    data:params
+  });
+};
+export const delDataAPI=(deptId:number)=>{
+    console.log(deptId);
+    
+    return request({
+        url:`admin/dept/${deptId}`,
+        method:'delete'
+    })
+}
+export const addDataAPI=(dept:addParamsType)=>{
+    console.log(dept);
+    dept.leaderId=0
+    return request({
+
+        url:`admin/dept`,
+        method:'post',
+        data:dept
+    })
+}
+export const getDataAPI=(deptId:number)=>{
+  return request({
+    url:`/admin/dept/${deptId}`,
+    method:'get'
+  })
+}

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/publish.ts

@@ -0,0 +1,67 @@
+import request from "@/utils/request";
+interface paramsType {
+  cluster?: string;
+  contentType?: string;
+  noticeTitle?: string;
+  noticeType?: string;
+  publishId?: number;
+  sendType?: string;
+  pageNum?: number;
+  pageSize?: number;
+}
+
+interface addParamsType {
+  action?: string;
+  cluster?: string;
+  contentType?: string;
+  noticeContent?: string;
+  noticeTitle?: string;
+  noticeType?: string;
+  remark?: string;
+  sendType?: string;
+  senderIds?: number[];
+}
+export const getDataListAPI = (params: paramsType) => {
+  return request({
+    url: "/notice/notice",
+    method: "get",
+    params: params,
+  });
+};
+export const getUserListAPI = () => {
+  return request({
+    url: "/admin/user",
+    method: "get",
+  });
+};
+export const getRolesListAPI = () => {
+  return request({
+    url: "/admin/role",
+    method: "get",
+  });
+};
+export const getDeptsListAPI = () => {
+  return request({
+    url: "/admin/dept",
+    method: "get",
+  });
+};
+export const addDataAPI = (addParams: addParamsType) => {
+  return request({
+    url: `/notice/notice`,
+    method: "post",
+    data: addParams,
+  });
+};
+export const deleteDataAPI = (noticeId: number) => {
+  return request({
+    url: `/notice/notice/${noticeId}`,
+    method: "delete",
+  });
+};
+export const getDataAPI = (noticeId: number) => {
+  return request({
+    url: `/notice/notice/${noticeId}`,
+    method: "get",
+  });
+};

src/api/system/role.ts

@@ -0,0 +1,75 @@
+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;
+}
+export const getRolesDataAPI = (params: paramsType) => {
+  const { endTime, roleKey, roleName, startTime, state, pageNum, pageSize } =
+    params;
+  // console.log('API',params);
+
+  return request({
+    url: "/admin/role",
+    method: "get",
+    params: {
+      endTime,
+      roleKey,
+      roleName,
+      startTime,
+      state,
+      pageNum,
+      pageSize,
+    },
+  });
+};
+export const delRoleAPI = (roleId: paramsType) => {
+  // console.log(roleId);
+
+  return request({
+    url: `/admin/role/${roleId}`,
+    method: "delete",
+  });
+};
+export const getMenuLiseAPI = () => {
+  return request({
+    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;
+
+  return request({
+    url: `/admin/role/${roleId}`,
+    method: "get",
+  });
+};
+export const setRoleDataAPI = (data: any) => {
+  // data.menuIds=[]
+  // const {roleId}=params
+  console.log("修改", data);
+
+  return request({
+    url: `/admin/role`,
+    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/dept/index.scss

@@ -0,0 +1,48 @@
+.deptBox{
+    background: white;
+    padding: 20px;
+    
+    .tablebox{
+        table{
+            thead{
+                th::before{
+                    
+                }
+                tr{
+                    .ant-table-cell{
+                        background: white;
+                        color:#909399
+                    }
+    
+                }
+            }
+            tbody{
+                tr{
+                    .ant-table-cell{
+                        background: white;
+                        color:#606266
+                    }
+    
+                }
+            }
+        }
+        .ant-table-cell{
+            button:focus
+            {
+                outline: none;
+            }
+            button:hover
+            {
+                border: 0px rgb(250, 250, 250);
+            }
+        }
+    }
+    .newAdd{
+        
+        display: flex;
+        margin-top: 15px;
+        button{
+            margin-left: 15px;
+        }
+    }
+}

src/view/system/dept/index.tsx

@@ -1,5 +1,575 @@
-export default function Dept() {
-  return(
-    <div>dept</div>
-  )
+import { useState,useEffect } from "react";
+import {
+  Button,
+  Input,
+  Select,
+  message,
+  Table,
+  Tag,
+  Modal,
+  Form,
+  InputNumber,
+  Radio,
+  ConfigProvider,
+  TreeSelect,
+  Row,
+  Col,
+  // Icon
+} from "antd";
+import type { ColumnsType } from "antd/es/table";
+import {
+  SyncOutlined,
+  SearchOutlined,
+  ExclamationCircleFilled,
+  SwapOutlined,
+} from "@ant-design/icons";
+import zh_CN from "antd/es/locale/zh_CN";
+import "dayjs/locale/zh-cn";
+// import 'moment/locale/zh-cn';
+import {
+  getDatasAPI,
+  delDataAPI,
+  addDataAPI,
+  editDataAPI,
+  getDataAPI,
+} from "../../../api/system/dept";
+import "./index.scss";
+// import { useForm } from "antd/es/form/Form";
+interface searchValueType {
+  deptName: string | undefined;
+  state: string | undefined;
+}
+//表格单项数据类型
+interface TableDataType {
+  children: number[];
+  createTime: string;
+  deptId: number;
+  deptName: string;
+  orderNum: string;
+  state: string;
+}
+let thisDept = {};
+let treeData: any = [];
+let isTreeAnyId = false;
+export default function Dept() {
+
+  const { confirm } = Modal;
+  //提示组件
+  const [messageApi, contextHolder] = message.useMessage();
+  const [isAllExpend, setIsAllExpend] = useState(true);
+  //搜索框内所有内容
+  let [searchValue, setSearchValue] = useState<searchValueType>({
+    deptName: undefined,
+    state: undefined,
+  });
+  // const is
+  //树列表数据
+
+  // const [isTreeAnyId,setIsTreeAnyId]=useState(false)
+  const [treeAnyId, setTreeAnyId] = useState<number[]>([]);
+  const [expandedRowKeys, setExpandedRowKeys] = useState<number[]>([]);
+  //Modal
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalTitle, setModalTitle] = useState('');
+  //表单区域
+  const [isDisbaled, setIsDisbaled] = useState<boolean>(false);
+  //serach
+  const [formSearch] = Form.useForm();
+  const [formModal] = Form.useForm();
+  //当前页面页数
+  //表格内数据
+  let [tableData, setTableData] = useState<TableDataType[]>([]);
+  //表格格式
+  const columns: ColumnsType<TableDataType> = [
+    {
+      title: "部门名称",
+      dataIndex: "deptName",
+      key: "deptName",
+    },
+    {
+      title: "排序",
+      dataIndex: "orderNum",
+      key: "orderNum",
+    },
+    {
+      title: "状态",
+      key: "state",
+      dataIndex: "state",
+      render: (text) => (
+        <>
+          {text === "0" ? (
+            <Tag color="success">正常</Tag>
+          ) : (
+            <Tag color="error">停用</Tag>
+          )}
+        </>
+      ),
+    },
+    {
+      title: "创建时间",
+      key: "createTime",
+      dataIndex: "createTime",
+    },
+    {
+      title: "操作",
+      key: "",
+      dataIndex: "",
+      render: (text) => (
+        <>
+          <Button type="link" onClick={() => handleNewAdd(text.deptId)}>
+            {"新增"}
+          </Button>
+          {/* <Button type='link' danger onClick={() => handleClickDel(text)}>{'删除'}</Button> */}
+          <Button type="link" onClick={() => handleEdit(text)}>
+            {"修改"}
+          </Button>
+          {text.parentId !== 0 ? (
+            <Button type="link" onClick={() => handleDelete(text)}>
+              {"删除"}
+            </Button>
+          ) : null}
+        </>
+      ),
+    },
+  ];
+  //请求表格内容参数
+  let [queryTableDataParams, setQueryTableDataParams] = useState<any>({
+    deptName: undefined,
+    state: undefined,
+  });
+  const handleDelete = (dept: any) => {
+    confirm({
+      title: "系统提示",
+      icon: <ExclamationCircleFilled />,
+      content: `确定删除部门名称为${dept.deptName}的数据吗`,
+      okText: "确定",
+      okType: "danger",
+      cancelText: "取消",
+      onOk() {
+        (async () => {
+          try {
+            let { code } = await delDataAPI(dept.deptId);
+            if (code === 1000) {
+              console.log("del", dept.deptId);
+              messageApi.open({
+                type: "success",
+                content: "操作成功",
+              });
+              getDatas({});
+            }
+          } catch (error) {
+            console.log(error);
+          }
+        })();
+      },
+      onCancel() {
+        console.log("Cancel");
+      },
+    });
+  };
+  const handleSerach = () => {
+    searchValue = formSearch.getFieldsValue();
+    setSearchValue(searchValue)
+    console.log(searchValue);
+    setQueryTableDataParams({ ...searchValue });
+  };
+  const handleReset = () => {
+    formSearch.resetFields();
+    searchValue = formSearch.getFieldsValue();
+    setSearchValue(searchValue)
+    setQueryTableDataParams({ ...searchValue });
+  };
+  const handleEdit = async (dept: any) => {
+    if (dept.parentId === 0) {
+      setIsDisbaled(true);
+      formModal.setFieldsValue({ ...thisDept, parentId: dept.deptName });
+    } else {
+      setIsDisbaled(false);
+      // formModal.setFieldsValue({...thisDept});
+    }
+    await getData(dept.deptId);
+    if (dept.parentId === 0) {
+      setIsDisbaled(true);
+      formModal.setFieldsValue({ ...thisDept, parentId: dept.deptName });
+    } else {
+      setIsDisbaled(false);
+      formModal.setFieldsValue({ ...thisDept });
+    }
+    console.log(thisDept);
+    setModalTitle("修改部门");
+    setIsModalOpen(true);
+  };
+  const handleNewAdd = (deptId?: string) => {
+    setModalTitle("新增部门");
+    setIsModalOpen(true);
+    if (deptId) {
+      formModal.setFieldsValue({
+        parentId: deptId,
+        deptName: '',
+        orderNum: 0,
+        leader: '',
+        phone: '',
+        email: '',
+        state: "0",
+      });
+    } else
+      formModal.setFieldsValue({
+        parentId: undefined,
+        deptName: undefined,
+        orderNum: 0,
+        leader: undefined,
+        phone: undefined,
+        email: undefined,
+        state: "0",
+      });
+  };
+  const handleModalOk = () => {
+    formModal
+      .validateFields()
+      .then((values) => {
+        console.log("add", values);
+        if (modalTitle == "新增部门") {
+          console.log(values);
+          postAdd(values);
+        } else if (modalTitle == "修改部门") {
+          editData(values);
+        }
+      })
+      .catch((info) => {
+        console.log("Validate Failed:", info);
+      });
+  };
+  //遍历菜单树获取所有节点ID
+  const getTree = function (tree: any) {
+    tree.title = tree.deptName;
+    tree.value = tree.deptId;
+    if (!isTreeAnyId) {
+      treeAnyId.push(tree.deptId);
+      setTreeAnyId([...treeAnyId]);
+    }
+    if (tree.children) {
+      for (let child of tree.children) {
+        getTree(child);
+      }
+    }
+    setExpandedRowKeys([...treeAnyId])
+  };
+  const handleModalCanle = () => {
+    setIsModalOpen(false);
+  };
+  //获取详细数据
+  const getData = async (deptId: number) => {
+    try {
+      const { code, data } = await getDataAPI(deptId);
+      if (code === 1000) {
+        thisDept = data;
+        // console.log(thisDept);
+      }
+    } catch (error) {}
+  };
+  //修改数据
+  const editData = async (dept: any) => {
+    try {
+      const { code } = await editDataAPI({ ...thisDept, ...dept });
+      if (code === 1000) {
+        messageApi.open({
+          type: "success",
+          content: "操作成功",
+        });
+        setIsModalOpen(false);
+        getDatas(queryTableDataParams);
+      } else {
+        messageApi.open({
+          type: "error",
+          content: "操作失败",
+        });
+      }
+    } catch (error) {}
+  };
+  //获取部门数据
+  const getDatas = async (queryTableDataParams: any) => {
+    console.log("参数:", queryTableDataParams);
+    try {
+      const { code, data } = await getDatasAPI(queryTableDataParams);
+      console.log(data);
+
+      if (code === 1000) {
+        console.log(isTreeAnyId);
+
+        for (let child of data) {
+          getTree(child);
+        }
+        console.log(treeAnyId);
+        
+        setExpandedRowKeys([...treeAnyId]);
+        // console.log(treeAnyId);
+        console.log(data);
+
+        setTableData(data);
+        treeData = data;
+        console.log(treeData);
+
+        // setTotal(data.total);
+      }
+    } catch (err: any) {
+      console.log("555", err);
+    }
+    isTreeAnyId = true;
+  };
+  //新增
+  const postAdd = async (dept: any) => {
+    try {
+      let { code } = await addDataAPI(dept);
+      console.log(code);
+      if (code === 1000) {
+        console.log("success");
+        messageApi.open({
+          type: "success",
+          content: "操作成功",
+        });
+        formModal.setFieldsValue({});
+        getDatas({ ...queryTableDataParams });
+        setIsModalOpen(false);
+      } else {
+        messageApi.open({
+          type: "error",
+          content: "部门名称已存在",
+        });
+      }
+    } catch (error) {}
+  };
+  useEffect(() => {
+    queryTableDataParams = {
+      ...queryTableDataParams,
+    };
+
+    getDatas(queryTableDataParams);
+    return ()=>{
+      setIsAllExpend(true),
+      isTreeAnyId=false
+    }
+  }, [queryTableDataParams]);
+  return (
+    <ConfigProvider locale={zh_CN}>
+      <div className="deptBox">
+        <Form
+          layout="inline"
+          initialValues={undefined}
+          form={formSearch}
+          onFinish={handleSerach}
+          style={{ fontWeight: "700" }}
+        >
+          <Form.Item
+            label="部门名称"
+            name="deptName"
+            style={{ width: 300 + "px", marginTop: "10px" }}
+          >
+            <Input placeholder="请输入部门名称" allowClear />
+          </Form.Item>
+          <Form.Item
+            label="状态"
+            name="state"
+            wrapperCol={{ span: 22 }}
+            style={{ marginTop: "10px" }}
+          >
+            <Select
+              style={{ width: 300 + "px",textAlign:"left" }}
+              allowClear
+              showSearch
+              placeholder="请选择部门状态"
+              optionFilterProp="lable"
+              options={[
+                {
+                  value: 0,
+                  label: "正常",
+                },
+                {
+                  value: 1,
+                  label: "停用",
+                },
+              ]}
+            />
+          </Form.Item>
+          <Form.Item style={{ marginTop: "10px" }}>
+            <Button
+              type="primary"
+              htmlType="submit"
+              style={{ marginLeft: 20 + "px" }}
+              onClick={() => handleSerach()}
+            >
+              <SearchOutlined />
+              搜索
+            </Button>
+          </Form.Item>
+          <Form.Item style={{ marginTop: "10px" }}>
+            <Button onClick={() => handleReset()}>
+              <SyncOutlined />
+              重置
+            </Button>
+          </Form.Item>
+        </Form>
+        {/* 新增 */}
+        <div className="newAdd">
+          <Button type="primary" onClick={() => handleNewAdd()}>
+            +新增
+          </Button>
+          <Button
+            type="primary"
+            style={{ backgroundColor: "rgb(144,147,153)" }}
+            onClick={() => {
+              setIsAllExpend(!isAllExpend);
+              if (isAllExpend) {
+                setExpandedRowKeys([]);
+              } else setExpandedRowKeys(treeAnyId);
+            }}
+          >
+            <SwapOutlined rotate={90} />
+            {isAllExpend ? "全部收起" : "全部展开"}
+          </Button>
+        </div>
+        {/* 弹出 */}
+        <Modal
+          open={isModalOpen}
+          title={modalTitle}
+          okText="确定"
+          cancelText="取消"
+          onCancel={handleModalCanle}
+          onOk={handleModalOk}
+          width={"700px"}
+        >
+          <Form
+            form={formModal}
+            // layout="inline"
+            name="form_in_modal"
+            initialValues={{ state: "0" }}
+            labelAlign="right"
+            // labelCol={{span:12}}
+            wrapperCol={{ span: 16 }}
+          >
+            <Row>
+              <Col span={24}>
+                <Form.Item
+                  name="parentId"
+                  label="上级部门"
+                  rules={[{ required: true, message: "请选择上级部门" }]}
+                  // style={{ width: 100 + "%" }}
+                >
+                  <TreeSelect
+                    disabled={isDisbaled}
+                    // showSearch
+                    style={{ width: "559px" }}
+                    // value={value}
+                    dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
+                    placeholder="请选择上级部门"
+                    allowClear
+                    // treeDefaultExpandAll
+                    // onChange={onChange}
+                    treeData={treeData}
+                    //
+                  />
+                </Form.Item>
+              </Col>
+            </Row>
+
+            <Row>
+              <Col span={12}>
+                <Form.Item
+                  name="deptName"
+                  label="部门名称"
+                  rules={[{ required: true, message: "请输入部门名称" }]}
+                  // style={{ width: 45 + "%", marginTop: "20px" }}
+                >
+                  <Input placeholder="请输入部门名称" />
+                </Form.Item>
+              </Col>
+              <Col span={12}>
+                <Form.Item
+                  required
+                  name="orderNum"
+                  label="显示顺序"
+                  rules={[{ required: true, message: "请输入部门显示顺序" }]}
+                  // style={{ width: 40 + "%", marginTop: "20px" }}
+                >
+                  <InputNumber min={0} controls={true} />
+                </Form.Item>
+              </Col>
+            </Row>
+            <Row style={{translate:'25px'}}>
+              <Col  span={12}>
+                <Form.Item
+                  name="leader"
+                  label="负责人"
+                  // style={{ width: 40 + "%", marginTop: "20px", marginLeft: "10px" }}
+                >
+                  <Input placeholder="请输入负责人" />
+                </Form.Item>
+              </Col>
+              <Col span={12}>
+                <Form.Item
+                  name="phone"
+                  label="联系电话"
+                  // style={{ width: 40 + "%", marginTop: "20px" }}
+                >
+                  <Input placeholder="请输入联系电话" />
+                </Form.Item>
+              </Col>
+            </Row>
+
+            <Row style={{translate:'38px'}}>
+              <Col span={12}>
+                <Form.Item
+                  name="email"
+                  label="邮箱"
+                  // style={{ width: 40 + "%", marginTop: "20px", marginLeft: "10px" }}
+                >
+                  <Input placeholder="请输入邮箱" />
+                </Form.Item>
+              </Col>
+              <Col span={12}>
+                <Form.Item
+                  name="state"
+                  label="状态"
+                  className="collection-create-form_last-form-item"
+                  // style={{ width: 40 + "%", marginTop: "20px", marginLeft: "10px" }}
+                >
+                  <Radio.Group>
+                    <Radio defaultChecked={true} value="0">
+                      正常
+                    </Radio>
+                    <Radio value="1">停用</Radio>
+                  </Radio.Group>
+                </Form.Item>
+              </Col>
+            </Row>
+          </Form>
+        </Modal>
+        {/* 表格 */}
+        <div className="tablebox">
+          {contextHolder}
+          <Table
+            expandedRowKeys={expandedRowKeys}
+            onExpand={(expanded, record) => {
+              // console.log(expanded, record);
+
+              if (expanded) {
+                setExpandedRowKeys([record.deptId, ...expandedRowKeys]);
+              } else {
+                const newEx = expandedRowKeys.filter((element) => {
+                  return element != record.deptId;
+                });
+                // console.log(expandedRowKeys);
+
+                setExpandedRowKeys(newEx);
+              }
+              console.log(expandedRowKeys);
+            }}
+            columns={columns}
+            rowKey={"deptId"}
+            dataSource={tableData}
+            pagination={false}
+          />
+        </div>
+      </div>
+    </ConfigProvider>
+  );
 }

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.scss

@@ -0,0 +1,61 @@
+.Box{
+    width: 100%;
+    height: 100%;
+    background-color: white;
+    padding: 15px;
+    .tablebox{
+        table{
+            thead{
+                th::before{
+                    
+                }
+                tr{
+                    .ant-table-cell{
+                        background: white;
+                        color:#909399
+                    }
+    
+                }
+            }
+            tbody{
+                tr{
+                    .ant-table-cell{
+                        background: white;
+                        color:#606266
+                    }
+    
+                }
+            }
+        }
+        .ant-table-cell{
+            button:focus
+            {
+                outline: none;
+            }
+            button:hover
+            {
+                border: 0px rgb(250, 250, 250);
+            }
+        }
+    }
+    .newadd{
+        width: 60px;
+        height: 40px;
+        margin-top: 15px;
+    }
+    
+}
+.myTree{
+    margin-top: 10px;
+    border: 1px solid rgb(173, 131, 131);
+    width: 250px;
+}
+.checkBox{
+    margin-top: 5px;
+    width: 250px;
+    display: flex;
+    label{
+        height: 20px;
+        margin-right: 10px;
+    }
+}

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

@@ -1,5 +1,790 @@
-export default function Inform() {
-  return(
-    <div>公告2</div>
-  )
+import { useState, useEffect } from "react";
+import {
+  Button,
+  Input,
+  Select,
+  message,
+  Table,
+  Tag,
+  Modal,
+  Pagination,
+  Form,
+  Radio,
+  ConfigProvider,
+  Row,
+  Col,
+  TreeSelect,
+} from "antd";
+import type { ColumnsType } from "antd/es/table";
+import {
+  SyncOutlined,
+  SearchOutlined,
+  ExclamationCircleFilled,
+} from "@ant-design/icons";
+import zh_CN from "antd/es/locale/zh_CN";
+import "dayjs/locale/zh-cn";
+import "./index.scss";
+import {
+  getDataListAPI,
+  getUserListAPI,
+  getRolesListAPI,
+  getDeptsListAPI,
+  addDataAPI,
+  deleteDataAPI,
+  getDataAPI,
+} from "../../../../api/system/publish";
+
+interface searchValueType {
+  dateTime: string[] | undefined;
+  roleName: string | undefined;
+  roleKey: string | undefined;
+  state: string | undefined;
+  startTime: string | undefined;
+  endTime: string | undefined;
+}
+
+//表格单项数据类型
+interface TableDataType {
+  createTime: string;
+  dataScope: string;
+  deptIds: any[];
+  menuIds: any[];
+  roleId: number;
+  roleKey: string;
+  roleName: string;
+  roleSort: string;
+  state: string;
+  updateTime: string;
+  key?: number;
+  total?: number;
+}
+
+//当前选择的角色信息
+interface queryParamsType {
+  cluster?: string;
+  contentType?: string;
+  noticeTitle?: string;
+  noticeType?: string;
+  publishId?: number;
+  sendType?: string;
+  pageNum?: number;
+  pageSize?: number;
+}
+let thisrole: any = {};
+export default function Inform() {
+  const { confirm } = Modal;
+  //提示组件
+  const [messageApi, contextHolder] = message.useMessage();
+  //搜索框内所有内容
+  let [searchValue, setSearchValue] = useState<searchValueType>({
+    dateTime: undefined,
+    roleName: undefined,
+    roleKey: undefined,
+    startTime: undefined,
+    state: undefined,
+    endTime: undefined,
+  });
+
+  const [thisNotice, setThisNotice] = useState<any>({});
+  //Modal
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
+  const [modalTitle, setModalTitle] = useState("");
+  //表单区域
+  const [addForm] = Form.useForm();
+  const [detailForm] = Form.useForm();
+  //serach
+  const [formSearch] = Form.useForm();
+  //当前页面页数
+  let [count, setCount] = useState(1);
+  //表格内数据
+  let [tableData, setTableData] = useState<TableDataType[]>([]);
+  //发送对象数据
+  const [senderIds, setSenderIds] = useState<any>(undefined);
+
+  //表格数据总条数
+  let [total, setTotal] = useState<number>(0);
+  //表格格式
+  const columns: ColumnsType<TableDataType> = [
+    {
+      title: "序号",
+      dataIndex: "key",
+      key: "key",
+    },
+    {
+      title: "公告标题",
+      dataIndex: "noticeTitle",
+      key: "noticeTitle",
+    },
+    {
+      title: "公告类型",
+      dataIndex: "noticeType",
+      key: "noticeType",
+      render: (text) => {
+        switch (text) {
+          case "1":
+            return <Tag color="processing">通知</Tag>;
+          case "2":
+            return <Tag color="processing">公告</Tag>;
+        }
+      },
+    },
+    {
+      title: "内容类型",
+      key: "contentType",
+      dataIndex: "contentType",
+      render: (text) => {
+        switch (text) {
+          case "text":
+            return <Tag color="">文本</Tag>;
+          case "html":
+            return <Tag color="success">富文本</Tag>;
+        }
+      },
+    },
+    {
+      title: "发送类型",
+      key: "sendType",
+      dataIndex: "sendType",
+      render: (text) => {
+        switch (text) {
+          case "user":
+            return <>用户</>;
+          case "role":
+            return <>角色</>;
+          case "dept":
+            return <>部门</>;
+          case "all":
+            return <>全发</>;
+        }
+      },
+    },
+    {
+      title: "创建时间",
+      key: "createTime",
+      dataIndex: "createTime",
+    },
+    {
+      title: "操作",
+      key: "",
+      dataIndex: "",
+      render: (text) => (
+        <>
+          <Button type="link" onClick={() => handleDetail(text)}>
+            {"详情"}
+          </Button>
+          <Button type="link" danger onClick={() => handleDelete(text)}>
+            {"删除"}
+          </Button>
+        </>
+      ),
+    },
+  ];
+  //请求表格内容参数
+  let [queryTableDataParams, setQueryTableDataParams] = useState<any>({
+    cluster: undefined,
+    contentType: undefined,
+    noticeTitle: undefined,
+    noticeType: undefined,
+    publishId: undefined,
+    sendType: undefined,
+    pageSize: undefined,
+    pageNum: undefined,
+  });
+
+  const onSendTypeChange = (value: string) => {
+    console.log(value);
+    if (value === "user") {
+      getUserList();
+    } else if (value === "role") {
+      getRolesList();
+    } else if (value === "dept") {
+      getDeptsList();
+    }
+  };
+  //   let thisrole: any = {roleId:'s'};
+  const handleDetail = (text: any) => {
+    getData(text.noticeId);
+    setIsDetailModalOpen(true);
+  };
+  const handleDelete = (text: any) => {
+    console.log(text);
+    confirm({
+      title: "系统提示",
+      icon: <ExclamationCircleFilled />,
+      content: `确定删除部门名称为${text.noticeTitle}的数据吗`,
+      okText: "确定",
+      okType: "danger",
+      cancelText: "取消",
+      onOk() {
+        (async () => {
+          try {
+            let { code } = await deleteDataAPI(text.noticeId);
+            if (code === 1000) {
+              messageApi.open({
+                type: "success",
+                content: "操作成功",
+              });
+              getDataList({});
+            }
+          } catch (error) {
+            console.log(error);
+          }
+        })();
+      },
+      onCancel() {
+        console.log("Cancel");
+      },
+    });
+  };
+  const handleSerach = () => {
+    searchValue = formSearch.getFieldsValue();
+    setSearchValue(searchValue);
+    count = 1;
+    setQueryTableDataParams({ ...searchValue });
+  };
+  const handleReset = () => {
+    formSearch.resetFields();
+    searchValue = formSearch.getFieldsValue();
+    setSearchValue(searchValue);
+    setQueryTableDataParams({ ...searchValue });
+  };
+  //Modal区域
+  const handleModalOk = () => {
+    addForm
+      .validateFields()
+      .then((values) => {
+        // form.resetFields();
+        console.log("add", values);
+        if (modalTitle == "新增公告") {
+          postAdd({ ...values, cluster: "notice", action: "SEND" });
+        }
+      })
+      .catch((info) => {
+        console.log("Validate Failed:", info);
+      });
+
+    console.log("modal thisrole", thisrole);
+  };
+  const handleModalCanle = () => {
+    setIsModalOpen(false);
+  };
+  const handleDetailCanle = () => {
+    setIsDetailModalOpen(false);
+  };
+  //新增
+  const handleNewAdd = () => {
+    setModalTitle("新增公告");
+    addForm.setFieldsValue({
+      noticeTitle: undefined,
+      noticeType: "1",
+      sendType: undefined,
+      senderIds: undefined,
+      contentType: "html",
+    });
+    setIsModalOpen(true);
+  };
+  const filterOption = (
+    input: string,
+    option?: { label: string; value: string }
+  ) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
+  //表格函数
+  //从服务器获取数据
+
+  //页码改变
+  const pageChange = (page: number, pageSize: number) => {
+    console.log(page, pageSize);
+    queryTableDataParams = { ...queryTableDataParams, pageNum: page, pageSize };
+    // setQueryParams({...queryParams,pageNum:page,pageSize})
+    console.log(queryTableDataParams);
+    getDataList(queryTableDataParams);
+    setCount(page);
+  };
+  //新增请求
+  const postAdd = async (value: any) => {
+    try {
+      let { code } = await addDataAPI(value);
+      if (code === 1000) {
+        console.log("success");
+        messageApi.open({
+          type: "success",
+          content: "操作成功",
+        });
+        addForm.setFieldsValue({
+          noticeTitle: undefined,
+          noticeType: "1",
+          sendType: undefined,
+          senderIds: undefined,
+          contentType: "html",
+        });
+        getDataList({ ...queryTableDataParams, pageNum: count });
+        setIsModalOpen(false);
+      } else {
+        messageApi.open({
+          type: "error",
+          content: "角色名称已存在",
+        });
+      }
+    } catch (error) {}
+  };
+  const getData = async (noticeId: number) => {
+    try {
+      const { data, code } = await getDataAPI(noticeId);
+      if (code === 1000) {
+        setThisNotice({ ...data });
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  const getTree = function (tree: any) {
+    tree.title = tree.deptName;
+    tree.value = tree.deptId;
+    if (tree.children) {
+      for (let child of tree.children) {
+        getTree(child);
+      }
+    }
+  };
+  const getUserList = async () => {
+    try {
+      const { code, data } = await getUserListAPI();
+      if (code === 1000) {
+        let userIds: any = [];
+        console.log(data.rows);
+        data.rows.forEach((item: any) => {
+          userIds.push({ value: item.userId, label: item.userName });
+        });
+
+        setSenderIds([...userIds]);
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  const getRolesList = async () => {
+    try {
+      const { code, data } = await getRolesListAPI();
+      if (code === 1000) {
+        let RolesIds: any = [];
+        console.log(data.rows);
+
+        data.rows.forEach((item: any) => {
+          RolesIds.push({ value: item.roleId, label: item.roleName });
+        });
+
+        setSenderIds([...RolesIds]);
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  const getDeptsList = async () => {
+    try {
+      const { code, data } = await getDeptsListAPI();
+      if (code === 1000) {
+        for (let child of data) {
+          getTree(child);
+        }
+        console.log(data);
+        setSenderIds([...data]);
+        // setTotal(data.total);
+      }
+    } catch (err: any) {
+      console.log("555", err);
+    }
+  };
+  const getDataList = async (queryTableDataParams: queryParamsType) => {
+    console.log("参数:", queryTableDataParams);
+    try {
+      const { code, data } = await getDataListAPI(queryTableDataParams);
+      if (code === 1000) {
+        const sortData = data.rows.sort(
+          (a: TableDataType, b: TableDataType) =>
+            parseInt(a.roleSort) - parseInt(b.roleSort)
+        );
+        sortData.forEach((element: TableDataType, i: number) => {
+          element.key = i + 1;
+        });
+        setTableData(sortData);
+        setTotal(data.total);
+      }
+    } catch (err: any) {
+      console.log("555", err);
+    }
+  };
+  useEffect(() => {
+    // setQueryParams({...queryParams,...valueSch})
+    queryTableDataParams = {
+      ...queryTableDataParams,
+      // ...searchValue,
+      pageNum: count,
+    };
+    getDataList(queryTableDataParams);
+    // console.log(queryParams);
+  }, [queryTableDataParams]);
+  return (
+    <ConfigProvider locale={zh_CN}>
+      <div className="Box">
+        <Form
+          layout="inline"
+          initialValues={undefined}
+          form={formSearch}
+          onFinish={handleSerach}
+          style={{ fontWeight: "700" }}
+        >
+          <Form.Item
+            label="公告标题"
+            name="noticeTitle"
+            style={{ width: 350 + "px", marginTop: "10px" }}
+          >
+            <Input placeholder="请输入公告标题" allowClear />
+          </Form.Item>
+          <Form.Item
+            label="公告类型"
+            name="noticeType"
+            style={{ width: 350 + "px", marginTop: "10px" }}
+          >
+            <Select
+              style={{ textAlign: "left" }}
+              allowClear
+              showSearch
+              placeholder="请选择公告类型"
+              optionFilterProp="lable"
+              filterOption={filterOption}
+              options={[
+                {
+                  value: "1",
+                  label: "通知",
+                },
+                {
+                  value: "2",
+                  label: "公告",
+                },
+              ]}
+            />
+          </Form.Item>
+          <Form.Item
+            label="内容类型"
+            name="contentType"
+            style={{ width: 350 + "px", marginTop: "10px" }}
+          >
+            <Select
+              style={{ textAlign: "left" }}
+              allowClear
+              showSearch
+              placeholder="请选择内容类型"
+              optionFilterProp="lable"
+              filterOption={filterOption}
+              options={[
+                {
+                  value: "text",
+                  label: "文本",
+                },
+                {
+                  value: "html",
+                  label: "富文本",
+                },
+              ]}
+            />
+          </Form.Item>
+          <Form.Item
+            label="发送类型"
+            name="sendType"
+            style={{ width: 350 + "px", marginTop: "10px" }}
+          >
+            <Select
+              style={{ textAlign: "left" }}
+              allowClear
+              showSearch
+              placeholder="请选择发送类型"
+              optionFilterProp="lable"
+              filterOption={filterOption}
+              options={[
+                {
+                  value: "user",
+                  label: "用户",
+                },
+                {
+                  value: "role",
+                  label: "角色",
+                },
+                {
+                  value: "dept",
+                  label: "部门",
+                },
+                {
+                  value: "all",
+                  label: "全发",
+                },
+              ]}
+            />
+          </Form.Item>
+          <Form.Item style={{ marginTop: "10px" }}>
+            <Button
+              type="primary"
+              htmlType="submit"
+              style={{ marginLeft: 20 + "px" }}
+              onClick={() => handleSerach()}
+            >
+              <SearchOutlined />
+              搜索
+            </Button>
+          </Form.Item>
+          <Form.Item style={{ marginTop: "10px" }}>
+            <Button onClick={() => handleReset()}>
+              <SyncOutlined />
+              重置
+            </Button>
+          </Form.Item>
+        </Form>
+        {/* 新增 */}
+        <div className="newadd">
+          <Button type="primary" onClick={handleNewAdd}>
+            +新增
+          </Button>
+        </div>
+        {/* 弹出 */}
+        <Modal
+          open={isModalOpen}
+          title={modalTitle}
+          width={800}
+          okText="确定"
+          cancelText="取消"
+          onCancel={handleModalCanle}
+          onOk={handleModalOk}
+        >
+          <Form
+            form={addForm}
+            layout="horizontal"
+            name="form_in_modal"
+            initialValues={{ noticeType: "1", contentType: "1" }}
+            labelAlign="right"
+            wrapperCol={{ span: 16 }}
+          >
+            <Row>
+              <Col span={12}>
+                <Form.Item
+                  name="noticeTitle"
+                  label="公告标题"
+                  rules={[{ required: true, message: "请输入公告标题" }]}
+                >
+                  <Input placeholder="请输入公告标题" />
+                </Form.Item>
+              </Col>
+              <Col span={12}>
+                <Form.Item
+                  name="noticeType"
+                  label="公告类型"
+                  rules={[{ required: true }]}
+                >
+                  <Radio.Group>
+                    <Radio defaultChecked={true} value="1">
+                      通知
+                    </Radio>
+                    <Radio value="2">公告</Radio>
+                  </Radio.Group>
+                </Form.Item>
+              </Col>
+            </Row>
+            <Row>
+              <Col span={12}>
+                <Form.Item
+                  required
+                  name="sendType"
+                  label="发送类型"
+                  rules={[{ required: true, message: "选择发送类型" }]}
+                >
+                  <Select
+                    style={{ textAlign: "left" }}
+                    allowClear
+                    showSearch
+                    placeholder="请选择发送类型"
+                    optionFilterProp="lable"
+                    filterOption={filterOption}
+                    onChange={(value) => onSendTypeChange(value)}
+                    options={[
+                      {
+                        value: "user",
+                        label: "用户",
+                      },
+                      {
+                        value: "role",
+                        label: "角色",
+                      },
+                      {
+                        value: "dept",
+                        label: "部门",
+                      },
+                      {
+                        value: "all",
+                        label: "全发",
+                      },
+                    ]}
+                  />
+                </Form.Item>
+              </Col>
+              <Col span={12}>
+                <Form.Item
+                  name="senderIds"
+                  label="发送对象"
+                  rules={[{ required: true, message: "选择发送对象" }]}
+                >
+                  {senderIds === undefined ? (
+                    <Select
+                      mode="multiple"
+                      style={{ textAlign: "left" }}
+                      allowClear
+                      showSearch
+                      placeholder="请选择发送对象"
+                      optionFilterProp="lable"
+                      filterOption={filterOption}
+                    />
+                  ) : senderIds[0].children === undefined ? (
+                    <Select
+                      mode="multiple"
+                      style={{ textAlign: "left" }}
+                      allowClear
+                      showSearch
+                      placeholder="请选择发送对象"
+                      optionFilterProp="lable"
+                      filterOption={filterOption}
+                      options={senderIds}
+                    />
+                  ) : (
+                    <TreeSelect
+                      multiple
+                      style={{ textAlign: "left" }}
+                      dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
+                      placeholder="请选择发送对象"
+                      allowClear
+                      treeData={senderIds}
+                      //
+                    />
+                  )}
+                </Form.Item>
+              </Col>
+            </Row>
+
+            <Form.Item
+              name="contentType"
+              label="内容类型"
+              rules={[{ required: true, message: "选择发送类型" }]}
+            >
+              <Radio.Group>
+                <Radio defaultChecked={true} value="html">
+                  富文本
+                </Radio>
+                <Radio value="text">文本</Radio>
+              </Radio.Group>
+            </Form.Item>
+            <Form.Item
+              name="menuIds"
+              label="菜单权限"
+              className="collection-create-form_last-form-item"
+            ></Form.Item>
+          </Form>
+        </Modal>
+        <Modal
+          open={isDetailModalOpen}
+          title={"公告详情"}
+          width={1200}
+          footer={null}
+          onCancel={handleDetailCanle}
+        >
+          <Form
+            form={detailForm}
+            layout="horizontal"
+            name="form_in_modal"
+            initialValues={{}}
+            labelAlign="right"
+            wrapperCol={{ span: 16 }}
+          >
+            <Row>
+              <Col span={8}>
+                <Form.Item
+                  name="noticeTitle"
+                  label="公告标题"
+                  // initialValue={'ssss'}
+                >
+                  <span> {thisNotice.noticeTitle}</span>
+                </Form.Item>
+              </Col>
+              <Col span={8}>
+                <Form.Item
+                  name="sendType"
+                  label="发送类型"
+                  // initialValue={'ssss'}
+                >
+                  <span>
+                    {" "}
+                    {thisNotice.sendType === "user"
+                      ? "用户"
+                      : thisNotice.sendType === "role"
+                      ? "角色"
+                      : thisNotice.sendType === "dept"
+                      ? "部门"
+                      : "全发"}
+                  </span>
+                </Form.Item>
+              </Col>
+              <Col span={8}>
+                <Form.Item name="sendIds" label="发送对象">
+                  <span></span>
+                </Form.Item>
+              </Col>
+            </Row>
+            <Row>
+              <Col span={8}>
+                <Form.Item name="noticeType" label="公告类型">
+                  <span>
+                    {thisNotice.noticeType === "1" ? (
+                      <Tag color="processing">通知</Tag>
+                    ) : (
+                      <Tag color="processing">公告</Tag>
+                    )}
+                  </span>
+                </Form.Item>
+              </Col>
+              <Col span={8}>
+                <Form.Item name="contentType" label="内容类型">
+                  <span>
+                    {thisNotice.contentType === "html" ? (
+                      <Tag color="success">富文本</Tag>
+                    ) : (
+                      <Tag>文本</Tag>
+                    )}
+                  </span>
+                </Form.Item>
+              </Col>
+            </Row>
+            <Row>
+              <Form.Item name="noticeContent" label="公告内容">
+                <span
+                  dangerouslySetInnerHTML={{ __html: thisNotice.noticeContent }}
+                ></span>
+              </Form.Item>
+            </Row>
+          </Form>
+        </Modal>
+        {/* 表格 */}
+        <div className="tablebox">
+          {contextHolder}
+          <Table columns={columns} dataSource={tableData} pagination={false} />
+          <Pagination
+            style={{
+              float: "right",
+              marginTop: "10px",
+            }}
+            total={total}
+            current={count}
+            showSizeChanger
+            showQuickJumper
+            onChange={(page, pageSize) => pageChange(page, pageSize)}
+            showTotal={(total) => `共 ${total} 条`}
+          />
+        </div>
+      </div>
+    </ConfigProvider>
+  );
 }

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.scss

@@ -0,0 +1,103 @@
+.roleBox{
+    width: 100%;
+    height: 100%;
+    background-color: white;
+    padding: 15px;
+    // display: flex;
+    // flex-wrap: wrap;
+    // .SearchBox{
+    //     display: flex;
+    //     flex-wrap: wrap;
+    //     .ipt{
+    //         margin-top: 10px;
+    //         margin-right: 10px;
+    //         height: 32px;
+    //         line-height: 32px;
+    //         display: flex;
+    //         span{
+    //             font-weight: 700;
+    //             // line-height: 32px;
+    //             padding-right: 12px;
+    //             // color: #606266;
+    //         }
+    //         .item,input{
+    //             flex: 1;
+    //             font-weight: 400;
+    //             // width: 300px;
+    //             margin-right: 40px;
+    //             .ant-space-item{
+    //                 // margin-left: 500px;
+    //                 width: 500px;
+    //             }
+    //         }
+    //     }
+    //     .btn{
+    //         button{
+    //             margin-right: 15px;
+    //         }
+    //         margin-top: 10px;
+    //     }
+    // }
+    // .btn{
+        
+    //     button{
+    //         margin-right: 15px;
+    //     }
+    //     margin-top: 10px;
+    // }
+    .tablebox{
+        table{
+            thead{
+                th::before{
+                    
+                }
+                tr{
+                    .ant-table-cell{
+                        background: white;
+                        color:#909399
+                    }
+    
+                }
+            }
+            tbody{
+                tr{
+                    .ant-table-cell{
+                        background: white;
+                        color:#606266
+                    }
+    
+                }
+            }
+        }
+        .ant-table-cell{
+            button:focus
+            {
+                outline: none;
+            }
+            button:hover
+            {
+                border: 0px rgb(250, 250, 250);
+            }
+        }
+    }
+    .newadd{
+        width: 60px;
+        height: 40px;
+        margin-top: 15px;
+    }
+    
+}
+.myTree{
+    margin-top: 10px;
+    border: 1px solid rgb(173, 131, 131);
+    width: 250px;
+}
+.checkBox{
+    margin-top: 5px;
+    width: 250px;
+    display: flex;
+    label{
+        height: 20px;
+        margin-right: 10px;
+    }
+}

src/view/system/role/index.tsx

@@ -0,0 +1,715 @@
+import { useState, useEffect } from "react";
+import {
+  Button,
+  Input,
+  Select,
+  DatePicker,
+  Space,
+  message,
+  Table,
+  Tag,
+  Modal,
+  Pagination,
+  Form,
+  Checkbox,
+  InputNumber,
+  Radio,
+  Tree,
+  ConfigProvider,
+} from "antd";
+import type { CheckboxChangeEvent } from "antd/es/checkbox";
+import type { DatePickerProps, RangePickerProps } from "antd/es/date-picker";
+import type { ColumnsType } from "antd/es/table";
+import {
+  SyncOutlined,
+  SearchOutlined,
+  ExclamationCircleFilled,
+} from "@ant-design/icons";
+import zh_CN from "antd/es/locale/zh_CN";
+import dataLocale from "antd/es/date-picker/locale/zh_CN";
+import "dayjs/locale/zh-cn";
+import "./index.scss";
+import {
+  getRolesDataAPI,
+  delRoleAPI,
+  getRoleAPI,
+  addRoleAPI,
+  setRoleDataAPI,
+  getMenuLiseAPI,
+} from "../../../api/system/role";
+// import { useForm } from "antd/es/form/Form";
+interface searchValueType {
+  dateTime: string[] | undefined;
+  roleName: string | undefined;
+  roleKey: string | undefined;
+  state: string | undefined;
+  startTime: string | undefined;
+  endTime: string | undefined;
+}
+//表格单项数据类型
+interface TableDataType {
+  createTime: string;
+  dataScope: string;
+  deptIds: any[];
+  menuIds: any[];
+  roleId: number;
+  roleKey: string;
+  roleName: string;
+  roleSort: string;
+  state: string;
+  updateTime: string;
+  key?: number;
+  total?: number;
+}
+//当前选择的角色信息
+const fieldNames = {
+  title: "menuName",
+  key: "menuId",
+  children: "children",
+};
+
+let thisrole: any = {};
+let treeIds: number[] = [];
+export default function Role() {
+  const { confirm } = Modal;
+  const { RangePicker } = DatePicker;
+  //提示组件
+  const [messageApi, contextHolder] = message.useMessage();
+  //搜索框内所有内容
+  let [searchValue, setSearchValue] = useState<searchValueType>({
+    dateTime: undefined,
+    roleName: undefined,
+    roleKey: undefined,
+    startTime: undefined,
+    state: undefined,
+    endTime: undefined,
+  });
+  //树列表数据
+  const [menuTreeData, setMenuTreeData] = useState([]);
+  //父子联动
+  const [checkStrictly, setCheckStrictly] = useState(false);
+  //树所有节点IDs
+  //树是否自动展开
+  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
+  const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
+  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
+  //Modal
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalTitle, setModalTitle] = useState("");
+  //表单区域
+  const [form] = Form.useForm();
+  //serach
+  const [formSearch] = Form.useForm();
+  //当前页面页数
+  let [count, setCount] = useState(1);
+  //表格内数据
+  let [tableData, setTableData] = useState<TableDataType[]>([]);
+  //表格数据总条数
+  let [total, setTotal] = useState<number>(0);
+  //表格格式
+  const columns: ColumnsType<TableDataType> = [
+    {
+      title: "序号",
+      dataIndex: "key",
+      key: "key",
+    },
+    {
+      title: "角色名称",
+      dataIndex: "roleName",
+      key: "roleName",
+    },
+    {
+      title: "角色权限",
+      dataIndex: "roleKey",
+      key: "roleKey",
+    },
+    {
+      title: "数据范围",
+      key: "dataScope",
+      dataIndex: "dataScope",
+      render: (text) => {
+        switch (text) {
+          case "1":
+            return <>所有数据权限</>;
+          case "2":
+            return <>自定义数据权限</>;
+          case "3":
+            return <>本部门数据权限</>;
+          default:
+            return <>本部门及以下数据权限</>;
+        }
+      },
+    },
+    {
+      title: "显示顺序",
+      key: "roleSort",
+      dataIndex: "roleSort",
+    },
+    {
+      title: "状态",
+      key: "state",
+      dataIndex: "state",
+      render: (text) => (
+        <>
+          {text === "0" ? (
+            <Tag color="success">正常</Tag>
+          ) : (
+            <Tag color="error">停用</Tag>
+          )}
+        </>
+      ),
+    },
+    {
+      title: "创建时间",
+      key: "createTime",
+      dataIndex: "createTime",
+    },
+    {
+      title: "操作",
+      key: "",
+      dataIndex: "",
+      render: (text) => (
+        <>
+          <Button type="link" onClick={() => handleEdit(text)}>
+            {"修改"}
+          </Button>
+          {/* <Button type='link' danger onClick={() => handleClickDel(text)}>{'删除'}</Button> */}
+          <Button type="link" danger onClick={() => handleDelete(text)}>
+            {"删除"}
+          </Button>
+          <Button type="link">{"分配用户"}</Button>
+        </>
+      ),
+    },
+  ];
+  //请求表格内容参数
+  let [queryTableDataParams, setQueryTableDataParams] = useState<any>({
+    roleKey: undefined,
+    roleName: undefined,
+    state: undefined,
+    endTime: undefined,
+    startTime: undefined,
+    pageNum: undefined,
+    pageSize: undefined,
+  });
+  const [allChecked, setAllChecked] = useState(false);
+  const onTreeExpand = (expandedKeysValue: React.Key[]) => {
+    // console.log("onExpand", expandedKeysValue);
+    setExpandedKeys(expandedKeysValue);
+  };
+  const onCheckExpand = (e: CheckboxChangeEvent) => {
+    console.log(`checked = ${e.target.checked}`);
+    console.log(treeIds);
+    if (e.target.checked) setExpandedKeys(treeIds);
+    else setExpandedKeys([]);
+    console.log(expandedKeys);
+  };
+  const onCheckAll = (e: CheckboxChangeEvent) => {
+    console.log(`checked = ${e.target.checked}`);
+    setAllChecked(!allChecked);
+    if (!allChecked) setCheckedKeys(treeIds);
+    else setCheckedKeys([]);
+  };
+  const onCheckFaSon = (e: CheckboxChangeEvent) => {
+    console.log(`checked = ${e.target.checked}`);
+    setCheckStrictly(!e.target.checked);
+  };
+  const onTreeCheck = (checkedKeysValue: any) => {
+    // console.log("onCheck", checkedKeysValue.checked);
+    console.log("onCheck", checkedKeysValue);
+    console.log("treeIds", treeIds);
+
+    if (checkedKeysValue.length != treeIds.length) {
+      setAllChecked(false);
+    } else {
+      setAllChecked(true);
+    }
+    if (checkStrictly === false) {
+      form.setFieldsValue({ menuIds: checkedKeysValue });
+      setCheckedKeys(checkedKeysValue);
+    } else {
+      form.setFieldsValue({ menuIds: checkedKeysValue.checked });
+      setCheckedKeys(checkedKeysValue.checked);
+    }
+  };
+  const onTreeSelect = (selectedKeysValue: React.Key[], info: any) => {
+    console.log("onSelect", info);
+    // setExpandedKeys([...expandedKeys,...selectedKeysValue])
+    setSelectedKeys(selectedKeysValue);
+  };
+  //当前角色的数据
+
+  //   let thisrole: any = {roleId:'s'};
+  const handleEdit = async (role: any) => {
+    await getRoleData(role);
+    setModalTitle("修改角色");
+    // setCheckedKeys(role)
+    setIsModalOpen(true);
+  };
+  const handleDelete = (role: any) => {
+    console.log(role);
+    confirm({
+      title: "系统提示",
+      icon: <ExclamationCircleFilled />,
+      content: `确定删除角色名称为${role.roleName}的数据吗`,
+      okText: "确定",
+      okType: "danger",
+      cancelText: "取消",
+      onOk() {
+        handleClickDel(role);
+      },
+      onCancel() {
+        console.log("Cancel");
+      },
+    });
+  };
+  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);
+    count = 1;
+    setQueryTableDataParams({ ...searchValue });
+  };
+  const handleReset = () => {
+    formSearch.resetFields();
+    searchValue = formSearch.getFieldsValue();
+    setSearchValue(searchValue);
+    setQueryTableDataParams({ ...searchValue });
+    // setSearchValue({ ...searchValue });
+    // setCount(1)
+  };
+  //Modal区域
+  const handleModalOk = () => {
+    form
+      .validateFields()
+      .then((values) => {
+        // form.resetFields();
+        console.log("add", values);
+        if (modalTitle == "新增角色") {
+          postAdd({ ...values, menuIds: checkedKeys });
+        } else if (modalTitle == "修改角色") {
+          console.log(thisrole);
+          console.log(checkedKeys);
+          console.log("now", { ...thisrole, ...values, menuIds: checkedKeys });
+          // console.log({ ...thisrole, ...values,menuIds:setCheckedKeys });
+          thisrole = { ...thisrole, ...values, menuIds: checkedKeys };
+          editRoleData({ ...thisrole });
+        }
+      })
+      .catch((info) => {
+        console.log("Validate Failed:", info);
+      });
+
+    console.log("modal thisrole", thisrole);
+  };
+  const handleModalCanle = () => {
+    setIsModalOpen(false);
+  };
+  //新增
+  const handleNewAdd = () => {
+    setModalTitle("新增角色");
+    form.setFieldsValue({
+      roleName: "",
+      roleKey: "",
+      state: "0",
+      dataScope: "1",
+      roleSort: "0",
+    });
+
+    setCheckedKeys([]);
+    setIsModalOpen(true);
+  };
+  const onDateChange = (
+    valueDate: DatePickerProps["value"] | RangePickerProps["value"],
+    dateString: [string, string] | string
+  ) => {
+    // setSelectedDate(valueDate)
+    console.log(valueDate);
+    searchValue.startTime = dateString[0];
+    searchValue.endTime = dateString[1];
+    formSearch.setFieldsValue({ dateTime: [dateString[0], dateString[1]] });
+    setSearchValue(searchValue);
+    // setSearchValue({ ...searchValue })
+  };
+  const filterOption = (
+    input: string,
+    option?: { label: string; value: string }
+  ) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
+  //表格函数
+  //从服务器获取数据
+
+  //页码改变
+  const pageChange = (page: number, pageSize: number) => {
+    console.log(page, pageSize);
+    queryTableDataParams = { ...queryTableDataParams, pageNum: page, pageSize };
+    // setQueryParams({...queryParams,pageNum:page,pageSize})
+    console.log(queryTableDataParams);
+    getRolesData(queryTableDataParams);
+    setCount(page);
+  };
+  //删除单项
+  const handleClickDel = (role: TableDataType) => {
+    console.log(role);
+    let { roleId } = role;
+    del(roleId);
+  };
+  //遍历菜单树获取所有节点ID
+  const getTreeIds = function (tree: any) {
+    // console.log('Ids:',tree);
+    tree.forEach((item: any) => {
+      // console.log(item);
+      treeIds.push(item.menuId);
+      if (item.children != null) getTreeIds(item.children);
+    });
+  };
+  //获取单个角色详细信息
+  const getRoleData = async (role: any) => {
+    // const {roleId,roleKey,roleName,roleSort,dataScope,state,meunIds}=role
+    // thisrole=role
+    try {
+      let { code, data } = await getRoleAPI(role);
+      if (code === 1000) {
+        console.log("role:", data);
+        thisrole = data;
+        console.log("thisrole", thisrole);
+        form.setFieldsValue(thisrole);
+        setCheckedKeys(data.menuIds);
+      }
+    } catch (error) {
+      console.log(error);
+    }
+    // setOpen(true);
+  };
+  //获取菜单权限树
+  const getMenuList = async () => {
+    try {
+      let menul = await getMenuLiseAPI();
+      console.log("tree", menul.data);
+      if (treeIds.length == 0) getTreeIds(menul.data);
+      console.log(treeIds);
+      setMenuTreeData(menul.data);
+      // treeData = menul.data
+      // setMenulist(menul.data)
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  //新增请求
+  const postAdd = async (value: any) => {
+    try {
+      let { code } = await addRoleAPI(value);
+      console.log(code);
+
+      if (code === 1000) {
+        console.log("success");
+        messageApi.open({
+          type: "success",
+          content: "操作成功",
+        });
+        form.setFieldsValue({
+          roleName: "",
+          roleKey: "",
+          state: "0",
+          dataScope: "1",
+        });
+        getRolesData({ ...queryTableDataParams, pageNum: count });
+        setIsModalOpen(false);
+      } else {
+        messageApi.open({
+          type: "error",
+          content: "角色名称已存在",
+        });
+      }
+    } catch (error) {}
+  };
+  const getRolesData = async (queryTableDataParams: any) => {
+    console.log("参数:", queryTableDataParams);
+    try {
+      const { code, data } = await getRolesDataAPI(queryTableDataParams);
+      if (code === 1000) {
+        const sortData = data.rows.sort(
+          (a: TableDataType, b: TableDataType) =>
+            parseInt(a.roleSort) - parseInt(b.roleSort)
+        );
+        sortData.forEach((element: TableDataType, i: number) => {
+          element.key = i + 1;
+        });
+        setTableData(sortData);
+        setTotal(data.total);
+      }
+    } catch (err: any) {
+      console.log("555", err);
+    }
+  };
+  //服务器删除角色
+  const del = async (roleId: number) => {
+    try {
+      let { code } = await delRoleAPI({ roleId });
+      if (code === 1000) {
+        console.log("del", roleId);
+        messageApi.open({
+          type: "success",
+          content: "操作成功",
+        });
+        getRolesData({ pageNum: count });
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  //修改角色信息
+  const editRoleData = async (role: any) => {
+    console.log(role);
+    try {
+      let { code, data } = await setRoleDataAPI(thisrole);
+      // let a = await setRoleDataAPI(role);
+      if (code === 1000) {
+        thisrole = { ...thisrole, ...data };
+        getRolesData({ ...queryTableDataParams, pageNum: count });
+        messageApi.open({
+          type: "success",
+          content: "操作成功",
+        });
+        setIsModalOpen(false);
+        form.setFieldsValue({
+          roleName: "",
+          roleKey: "",
+          state: "0",
+          dataScope: "1",
+        });
+      } else {
+        messageApi.open({
+          type: "error",
+          content: "角色名称已存在！",
+        });
+      }
+    } catch (error) {
+      messageApi.open({
+        type: "error",
+        content: "系统未知错误",
+      });
+      console.log(error);
+    }
+  };
+  useEffect(() => {
+    // setQueryParams({...queryParams,...valueSch})
+    queryTableDataParams = {
+      ...queryTableDataParams,
+      // ...searchValue,
+      pageNum: count,
+    };
+    getRolesData(queryTableDataParams);
+    // console.log(queryParams);
+  }, [queryTableDataParams]);
+  useEffect(() => {
+    getMenuList();
+  }, []);
+  return (
+    <ConfigProvider locale={zh_CN}>
+      <div className="roleBox">
+        <Form
+          layout="inline"
+          initialValues={undefined}
+          form={formSearch}
+          onFinish={handleSerach}
+          style={{ fontWeight: "700" }}
+        >
+          <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>
+          <Form.Item
+            label="状态:"
+            name="state"
+            wrapperCol={{ span: 22 }}
+            style={{ marginTop: "10px" }}
+          >
+            <Select
+              style={{ width: 300 + "px", textAlign: "left" }}
+              allowClear
+              showSearch
+              placeholder="请选择角色状态"
+              optionFilterProp="lable"
+              // onChange={onStateChange}
+              // onSearch={onSearch}
+              filterOption={filterOption}
+              // value={searchValue.state}
+              options={[
+                {
+                  value: "0",
+                  label: "正常",
+                },
+                {
+                  value: "1",
+                  label: "停用",
+                },
+              ]}
+            />
+          </Form.Item>
+          <Form.Item
+            label="登陆时间"
+            name="dateTime"
+            style={{ marginTop: "10px" }}
+          >
+            <Space direction="vertical" style={{ width: 400 + "px" }}>
+              <RangePicker
+                locale={dataLocale}
+                showTime
+                format="YYYY-MM-DD HH:mm:ss"
+                onChange={onDateChange}
+              />
+            </Space>
+          </Form.Item>
+          <Form.Item style={{ marginTop: "10px" }}>
+            <Button
+              type="primary"
+              htmlType="submit"
+              style={{ marginLeft: 20 + "px" }}
+              onClick={() => handleSerach()}
+            >
+              <SearchOutlined />
+              搜索
+            </Button>
+          </Form.Item>
+          <Form.Item style={{ marginTop: "10px" }}>
+            <Button onClick={() => handleReset()}>
+              <SyncOutlined />
+              重置
+            </Button>
+          </Form.Item>
+        </Form>
+        {/* 新增 */}
+        <div className="newadd">
+          <Button type="primary" onClick={handleNewAdd}>
+            +新增
+          </Button>
+        </div>
+        {/* 弹出 */}
+        <Modal
+          open={isModalOpen}
+          title={modalTitle}
+          okText="确定"
+          cancelText="取消"
+          onCancel={handleModalCanle}
+          onOk={handleModalOk}
+        >
+          <Form
+            form={form}
+            layout="horizontal"
+            name="form_in_modal"
+            initialValues={{ dataScope: "1", state: "0" }}
+          >
+            <Form.Item
+              name="roleName"
+              label="角色名称"
+              rules={[{ required: true, message: "请输入角色名称" }]}
+            >
+              <Input placeholder="请输入角色名称" />
+            </Form.Item>
+            <Form.Item
+              name="roleKey"
+              label="角色权限"
+              rules={[{ required: true, message: "请输入角色权限" }]}
+            >
+              <Input placeholder="请输入角色权限" />
+            </Form.Item>
+
+            <Form.Item
+              required
+              name="roleSort"
+              label="显示顺序"
+              rules={[{ required: true, message: "请输入角色显示顺序" }]}
+            >
+              <InputNumber min={0} max={10} controls={true} />
+            </Form.Item>
+            <Form.Item name="dataScope" label="数据范围">
+              <Radio.Group>
+                <Radio value="1" defaultChecked={true}>
+                  所有数据权限
+                </Radio>
+                <Radio value="2">自定义数据权限</Radio>
+                <Radio value="3">本部门数据权限</Radio>
+                <Radio value="4">本部门及以下数据权限</Radio>
+              </Radio.Group>
+            </Form.Item>
+            <Form.Item
+              name="state"
+              label="状态"
+              className="collection-create-form_last-form-item"
+            >
+              <Radio.Group>
+                <Radio defaultChecked={true} value="0">
+                  正常
+                </Radio>
+                <Radio value="1">停用</Radio>
+              </Radio.Group>
+            </Form.Item>
+            <Form.Item
+              name="menuIds"
+              label="菜单权限"
+              className="collection-create-form_last-form-item"
+            >
+              {/* <input type="text" /> */}
+              <div className="checkBox">
+                <Checkbox onChange={onCheckExpand}>展开</Checkbox>
+                <Checkbox onChange={onCheckAll} checked={allChecked}>
+                  全选
+                </Checkbox>
+                <Checkbox onChange={onCheckFaSon}>父子联动</Checkbox>
+              </div>
+              <div
+                className="myTree"
+                style={{ maxHeight: "250px", overflowY: "auto" }}
+              >
+                <Tree
+                  fieldNames={fieldNames}
+                  checkable
+                  onExpand={onTreeExpand}
+                  expandedKeys={expandedKeys}
+                  autoExpandParent={true}
+                  onCheck={onTreeCheck}
+                  checkedKeys={checkedKeys}
+                  checkStrictly={checkStrictly}
+                  onSelect={onTreeSelect}
+                  selectedKeys={selectedKeys}
+                  treeData={menuTreeData}
+                />
+              </div>
+            </Form.Item>
+          </Form>
+        </Modal>
+        {/* 表格 */}
+        <div className="tablebox">
+          {contextHolder}
+          <Table columns={columns} dataSource={tableData} pagination={false} />
+          <Pagination
+            style={{
+              float: "right",
+              marginTop: "10px",
+            }}
+            total={total}
+            current={count}
+            showSizeChanger
+            showQuickJumper
+            onChange={(page, pageSize) => pageChange(page, pageSize)}
+            showTotal={(total) => `共 ${total} 条`}
+          />
+        </div>
+      </div>
+    </ConfigProvider>
+  );
+}

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>
+  );
 }