雷闳焜:完成部门页面开发

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/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,7 +1,586 @@
-import React from "react";
+import React, { useState, createContext, 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;
+// const Dayjs=dayjs.Dayjs
+export default function Role() {
+  const { confirm } = Modal;
+  //提示组件
+  const [messageApi, contextHolder] = message.useMessage();
+  const [isAllExpend, setIsAllExpend] = useState(true);
+  //搜索框内所有内容
+  let [searchValue, setSearchValue] = useState<searchValueType>({
+    deptName: undefined,
+    state: undefined,
+  });
+  // const is
+  //树列表数据
 
-export default function Dept() {
+  // const [isTreeAnyId,setIsTreeAnyId]=useState(false)
-  return(
+  const [treeAnyId, setTreeAnyId] = useState<number[]>([]);
-    <div>dept</div>
+  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 = () => {
+    // console.log("搜索框", searchValue);
+    // setSearchValue({ ...searchValue });
+    searchValue = formSearch.getFieldsValue();
+    console.log(searchValue);
+    // queryTableDataParams={...searchValue}
+    setQueryTableDataParams({ ...searchValue });
+  };
+  const handleReset = () => {
+    formSearch.resetFields();
+    searchValue = formSearch.getFieldsValue();
+
+    setQueryTableDataParams({ ...searchValue });
+    // setSearchValue({ ...searchValue });
+    // setCount(1)
+  };
+  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);
+    // formModal.setFieldsValue({...thisDept});
+    // formModal.setFieldsValue({...thisDept,parentId:dept.deptName});
+  };
+  const handleNewAdd = (deptId?: string) => {
+    setModalTitle("新增角色");
+    setIsModalOpen(true);
+    if (deptId) {
+      formModal.setFieldsValue({
+        parentId: deptId,
+        deptName: undefined,
+        orderNum: 0,
+        leader: undefined,
+        phone: undefined,
+        email: undefined,
+        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) => {
+        // form.resetFields();
+        console.log("add", values);
+        // onCreate(values);
+        // setSelectedKeys([])
+        // setIsModalOpen(false);
+        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);
+      }
+    }
+    // treeData=tree
+  };
+  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 {
+      console.log(thisDept);
+
+      console.log({ ...thisDept, ...dept });
+
+      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);
+        }
+        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);
+    // console.log(queryParams);
+    console.log(tableData);
+  }, [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" }}
+              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/role/index.scss

@@ -3,39 +3,48 @@
     height: 100%;
     background-color: white;
     padding: 15px;
-    .SearchBox{
+    // display: flex;
-        display: flex;
+    // flex-wrap: wrap;
-        flex-wrap: wrap;
+    // .SearchBox{
-        .ipt{
+    //     display: flex;
-            margin-top: 10px;
+    //     flex-wrap: wrap;
-            margin-right: 10px;
+    //     .ipt{
-            height: 32px;
+    //         margin-top: 10px;
-            line-height: 32px;
+    //         margin-right: 10px;
-            display: flex;
+    //         height: 32px;
-            span{
+    //         line-height: 32px;
-                font-weight: 700;
+    //         display: flex;
-                // line-height: 32px;
+    //         span{
-                padding-right: 12px;
+    //             font-weight: 700;
-                // color: #606266;
+    //             // line-height: 32px;
-            }
+    //             padding-right: 12px;
-            .item,input{
+    //             // color: #606266;
-                flex: 1;
+    //         }
-                font-weight: 400;
+    //         .item,input{
-                // width: 300px;
+    //             flex: 1;
-                margin-right: 40px;
+    //             font-weight: 400;
-                .ant-space-item{
+    //             // width: 300px;
-                    // margin-left: 500px;
+    //             margin-right: 40px;
-                    width: 500px;
+    //             .ant-space-item{
-                }
+    //                 // margin-left: 500px;
-            }
+    //                 width: 500px;
-        }
+    //             }
-        .btn{
+    //         }
-            button{
+    //     }
-                margin-right: 15px;
+    //     .btn{
-            }
+    //         button{
-            margin-top: 10px;
+    //             margin-right: 15px;
-        }
+    //         }
-    }
+    //         margin-top: 10px;
+    //     }
+    // }
+    // .btn{
+        
+    //     button{
+    //         margin-right: 15px;
+    //     }
+    //     margin-top: 10px;
+    // }
     .tablebox{
         table{
             thead{

src/view/system/role/index.tsx

@@ -26,9 +26,9 @@ import {
   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 dataLocale from "antd/es/date-picker/locale/zh_CN";
-import 'dayjs/locale/zh-cn';
+import "dayjs/locale/zh-cn";
-import dayjs,{Dayjs} from "dayjs";
+import dayjs, { Dayjs } from "dayjs";
 // import 'moment/locale/zh-cn';
 import "./index.scss";
 import {
@@ -40,20 +40,8 @@ import {
   getMenuLiseAPI,
 } from "../../../api/system/role";
 import { useForm } from "antd/es/form/Form";
-interface getSearchValueType {
-  getSearchValue: (value: any) => void;
-}
-type FieldType = {
-  username?: string;
-  password?: string;
-  remember?: string;
-};
-interface Values {
-  title: string;
-  description: string;
-  modifier: string;
-}
 interface searchValueType {
+  dateTime: string[] | undefined;
   roleName: string | undefined;
   roleKey: string | undefined;
   state: string | undefined;
@@ -82,17 +70,16 @@ const fieldNames = {
   children: "children",
 };
 let thisrole: any = {};
-let treeIds:number[]=[]
+let treeIds: number[] = [];
 // const Dayjs=dayjs.Dayjs
 export default function Role() {
   const { confirm } = Modal;
   const { RangePicker } = DatePicker;
-  //时间值
-  const [selectedDate, setSelectedDate] = useState<[Date:null,Date:null]>([null,null]);
   //提示组件
   const [messageApi, contextHolder] = message.useMessage();
   //搜索框内所有内容
   let [searchValue, setSearchValue] = useState<searchValueType>({
+    dateTime: undefined,
     roleName: undefined,
     roleKey: undefined,
     startTime: undefined,
@@ -102,7 +89,7 @@ export default function Role() {
   //树列表数据
   const [menuTreeData, setMenuTreeData] = useState([]);
   //父子联动
-  const [checkStrictly,setCheckStrictly]=useState(false)
+  const [checkStrictly, setCheckStrictly] = useState(false);
   //树所有节点IDs
   //树是否自动展开
   const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
@@ -114,6 +101,8 @@ export default function Role() {
   const [modalTitle, setModalTitle] = useState("");
   //表单区域
   const [form] = Form.useForm();
+  //serach
+  const [formSearch] = Form.useForm();
   //当前页面页数
   let [count, setCount] = useState(1);
   //表格内数据
@@ -214,28 +203,26 @@ export default function Role() {
   const onCheckExpand = (e: CheckboxChangeEvent) => {
     console.log(`checked = ${e.target.checked}`);
     console.log(treeIds);
-    if(e.target.checked) setExpandedKeys(treeIds)
+    if (e.target.checked) setExpandedKeys(treeIds);
-    else setExpandedKeys([])
+    else setExpandedKeys([]);
     console.log(expandedKeys);
-    
   };
   const onCheckAll = (e: CheckboxChangeEvent) => {
     console.log(`checked = ${e.target.checked}`);
-    if(e.target.checked) setCheckedKeys(treeIds)
+    if (e.target.checked) setCheckedKeys(treeIds);
-    else setCheckedKeys([])
+    else setCheckedKeys([]);
   };
   const onCheckFaSon = (e: CheckboxChangeEvent) => {
     console.log(`checked = ${e.target.checked}`);
-    setCheckStrictly(!e.target.checked)
+    setCheckStrictly(!e.target.checked);
   };
   const onTreeCheck = (checkedKeysValue: any) => {
     console.log("onCheck", checkedKeysValue.checked);
     console.log("onCheck", checkedKeysValue);
-    if(checkStrictly===false){
+    if (checkStrictly === false) {
       form.setFieldsValue({ menuIds: checkedKeysValue });
       setCheckedKeys(checkedKeysValue);
-    }
+    } else {
-    else{
       form.setFieldsValue({ menuIds: checkedKeysValue.checked });
       setCheckedKeys(checkedKeysValue.checked);
     }
@@ -272,21 +259,31 @@ export default function Role() {
     });
   };
   const handleSerach = () => {
-    console.log("搜索框", searchValue);
+    // console.log("搜索框", searchValue);
-    setSearchValue({ ...searchValue });
+    // setSearchValue({ ...searchValue });
+    searchValue = formSearch.getFieldsValue();
+    if (typeof searchValue.dateTime !== "undefined") {
+      searchValue.startTime = (searchValue.dateTime as string[])[0];
+      searchValue.endTime = (searchValue.dateTime as string[])[1];
+    } 
+
+    console.log(searchValue);
     count = 1;
+    // queryTableDataParams={...searchValue}
     setQueryTableDataParams({ ...searchValue });
   };
-  const handleSerachNew = () => {
+  const handleReset = () => {
-    searchValue = {
+    formSearch.resetFields();
-      roleName: undefined,
+    searchValue =formSearch.getFieldsValue()
-      roleKey: undefined,
+    // searchValue = {
-      startTime: undefined,
+    //   roleName: undefined,
-      state: undefined,
+    //   roleKey: undefined,
-      endTime: undefined,
+    //   startTime: undefined,
-    };
+    //   state: undefined,
+    //   endTime: undefined,
+    // };
     setQueryTableDataParams({ ...searchValue });
-    setSearchValue({ ...searchValue });
+    // setSearchValue({ ...searchValue });
     // setCount(1)
   };
   //Modal区域
@@ -313,7 +310,6 @@ export default function Role() {
           thisrole = { ...thisrole, ...values, menuIds: checkedKeys };
           editRoleData({ ...thisrole });
         }
-        
       })
       .catch((info) => {
         console.log("Validate Failed:", info);
@@ -334,7 +330,7 @@ export default function Role() {
       dataScope: "1",
       roleSort: "0",
     });
-    
+
     setCheckedKeys([]);
     setIsModalOpen(true);
   };
@@ -346,31 +342,17 @@ export default function Role() {
     console.log(valueDate);
     searchValue.startTime = dateString[0];
     searchValue.endTime = dateString[1];
+    formSearch.setFieldsValue({ dateTime: [dateString[0], dateString[1]] });
     console.log("time:", searchValue.endTime, searchValue.startTime);
     // setSearchValue({ ...searchValue })
   };
-  const onDataChangeOk = (
-    value: DatePickerProps["value"] | RangePickerProps["value"]
-  ) => {
-    console.log("onOk: ", value);
-  };
   const filterOption = (
     input: string,
     option?: { label: string; value: string }
   ) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
-  const onStateChange = (value: string) => {
-    searchValue.state = value;
-    // setSearchValue({ ...searchValue, state: value })
-    // searchValue.state = values
-    // console.log(value);
-  };
-  const onSearch = (value: string) => {
-    console.log("search:", value);
-  };
   //表格函数
   //从服务器获取数据
 
-  
   //页码改变
   const pageChange = (page: number, pageSize: number) => {
     console.log(page, pageSize);
@@ -387,14 +369,14 @@ export default function Role() {
     del(roleId);
   };
   //遍历菜单树获取所有节点ID
-  const getTreeIds=function(tree:any){
+  const getTreeIds = function (tree: any) {
     // console.log('Ids:',tree);
-    tree.forEach((item:any) => {
+    tree.forEach((item: any) => {
       // console.log(item);
-      treeIds.push(item.menuId)
+      treeIds.push(item.menuId);
-      if(item.children!=null) getTreeIds(item.children)
+      if (item.children != null) getTreeIds(item.children);
     });
-  }
+  };
   //获取单个角色详细信息
   const getRoleData = async (role: any) => {
     // const {roleId,roleKey,roleName,roleSort,dataScope,state,meunIds}=role
@@ -418,12 +400,11 @@ export default function Role() {
     try {
       let menul = await getMenuLiseAPI();
       console.log("tree", menul.data);
-      if(treeIds.length==0) getTreeIds(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);
     }
@@ -532,9 +513,10 @@ export default function Role() {
     // setQueryParams({...queryParams,...valueSch})
     queryTableDataParams = {
       ...queryTableDataParams,
-      ...searchValue,
+      // ...searchValue,
       pageNum: count,
     };
+    // setQueryTableDataPaams(queryTableDataParams)
     // setCount(1)
     getRolesData(queryTableDataParams);
     // console.log(queryParams);
@@ -545,86 +527,91 @@ export default function Role() {
   return (
     <ConfigProvider locale={zh_CN}>
       <div className="roleBox">
-        <div className="SearchBox">
+        
-          <div className="ipt">
+        <Form
-            <span>角色名称</span>
+          layout="inline"
-            <div className="item">
+          // labelCol={{ span: 8 }}
-              <Input
+          // wrapperCol={{ span: 18 }}
-                placeholder="请输入角色名称"
+          initialValues={undefined}
-                allowClear
+          form={formSearch}
-                value={searchValue.roleName}
+          onFinish={handleSerach}
-                onChange={(e) => {
+          style={{fontWeight:'700'}}
-                  setSearchValue({ ...searchValue, roleName: e.target.value });
+        >
-                }}
+          <Form.Item  label="角色名称" name="roleName" style={{width:300+'px',marginTop:'10px'}}>
+            <Input
+              // maxLength={250}
+              placeholder="请输入角色名称"
+              allowClear
+              // value={searchValue.roleName}
+              // onChange={(e) => {
+              //   setSearchValue({ ...searchValue, roleName: e.target.value });
+              // }}
+            />
+          </Form.Item>
+          <Form.Item label="权限字符" name="roleKey" style={{width:300+'px',marginTop:'10px'}}>
+            <Input
+              allowClear
+              placeholder="请输入权限字符"
+              // value={searchValue.roleKey}
+              // onChange={(e) => {
+              //   setSearchValue({ ...searchValue, roleKey: e.target.value });
+              // }}
+            />
+          </Form.Item>
+          <Form.Item  label="状态" name="state"  wrapperCol={{ span: 22 }} style={{marginTop:'10px'}}>
+            <Select
+              style={{ width: 300 + "px" }}
+              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}
+                // allowClear
+                // value={[null, null]}
+                showTime
+                format="YYYY-MM-DD HH:mm:ss"
+                onChange={onDateChange}
+                // onOk={onDataChangeOk}
               />
-            </div>
+            </Space>
-          </div>
+          </Form.Item>
-          <div className="ipt">
+          <Form.Item style={{marginTop:'10px'}}>
-            <span>权限字符</span>
+            <Button
-            <div className="item">
+              type="primary"
-              <Input
+              htmlType="submit"
-                allowClear
+              style={{marginLeft:20+'px'}}
-                placeholder="请输入权限字符"
+              onClick={() => handleSerach()}
-                value={searchValue.roleKey}
+            >
-                onChange={(e) => {
-                  setSearchValue({ ...searchValue, roleKey: e.target.value });
-                }}
-              />
-            </div>
-          </div>
-          <div className="ipt">
-            <span>状态</span>
-            <div className="item">
-              <Select
-                style={{ width:300+'px' }}
-                allowClear
-                showSearch
-                placeholder="请选择角色状态"
-                optionFilterProp="lable"
-                onChange={onStateChange}
-                onSearch={onSearch}
-                filterOption={filterOption}
-                value={searchValue.state}
-                options={[
-                  {
-                    value: "0",
-                    label: "正常",
-                  },
-                  {
-                    value: "1",
-                    label: "停用",
-                  },
-                ]}
-              />
-            </div>
-          </div>
-          <div className="ipt">
-            <span>登陆时间</span>
-            <div className="item">
-              <Space direction="vertical" size={12}>
-                <RangePicker
-                  locale={dataLocale}
-                  // allowClear
-                  // value={[null,null]}
-                  showTime
-                  format="YYYY-MM-DD HH:mm:ss"
-                  onChange={onDateChange}
-                  onOk={onDataChangeOk}
-                />
-              </Space>
-            </div>
-          </div>
-          <div className="btn">
-            <Button type="primary" onClick={() => handleSerach()}>
               <SearchOutlined />
               搜索
             </Button>
-            <Button onClick={() => handleSerachNew()}>
+          </Form.Item>
+          <Form.Item style={{marginTop:'10px'}}>
+            <Button onClick={() => handleReset()}>
               <SyncOutlined />
               重置
             </Button>
-          </div>
+          </Form.Item>
-        </div>
+        </Form>
         {/* 新增 */}
         <div className="newadd">
           <Button type="primary" onClick={handleNewAdd}>