唐简：增加新增，修改，查询功能，完成用户管理页面开发

.eslintrc.cjs

@@ -14,7 +14,5 @@ module.exports = {
       "warn",
       { allowConstantExport: true },
     ],
-    "@typescript-eslint/no-unused-vars": "off",
-    "@typescript-eslint/no-explicit-any": "off",
   },
 };

src/api/system/users.ts

@@ -17,16 +17,46 @@ export const getDeptTreeApi = () => {
   });
 };
 
-export const getUserListApi = (data?: userListParams) => {
+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 {
+    userName,
+    phoneNumber,
+    state,
+    startTime,
+    endTime,
+    pageNum,
+    pageSize,
+  } = data;
   const params = data
     ? {
-        userName: data.userName,
+        userName,
-        phoneNumber: data.phoneNumber,
+        phoneNumber,
-        state: data.state,
+        state,
-        startTime: data.startTime,
+        startTime,
-        endTime: data.endTime,
+        endTime,
-        pageNum: data.pageNum,
+        pageNum,
-        pageSize: 13,
+        pageSize: 500,
       }
     : undefined;
 
@@ -36,3 +66,26 @@ export const getUserListApi = (data?: userListParams) => {
     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/user/comps/user-bottom-list/index.tsx

@@ -1,13 +1,18 @@
-import React, { useState, useEffect } from "react";
-import { Table, Space, Tag } from "antd";
-import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
 import "./index.scss";
-import { getUserListApi } from "../../../../../api/system/users";
+import {
+  EditOutlined,
+  DeleteOutlined,
+  ExclamationCircleFilled,
+} from "@ant-design/icons";
+import React, { useState, useEffect } from "react";
+import { Table, Space, Tag, message, Modal } from "antd";
+import { getUserListApi, deleteUserApi } from "../../../../../api/system/users";
 
 interface AddButtonClickType {
-  clickFromChild: (type: string) => void;
+  clickFromChild: (type: string, echoData?: number) => void;
   searchValues: any;
 }
+
 interface QueryParamsType {
   userName?: string;
   phoneNumber?: string;
@@ -22,7 +27,10 @@ const UserBottomList: React.FC<AddButtonClickType> = ({
   clickFromChild,
   searchValues,
 }) => {
+  const [listData, setListData] = useState([]);
+  const [update, setUpdate] = useState<any>("");
   const [currentPage, setCurrentPage] = useState<number>(1);
+  const [messageApi, contextHolder] = message.useMessage();
   const [queryParams, setQueryParams] = useState<QueryParamsType>({
     userName: undefined,
     phoneNumber: undefined,
@@ -32,39 +40,6 @@ const UserBottomList: React.FC<AddButtonClickType> = ({
     pageNum: undefined,
     pageSize: undefined,
   });
-  const handlePageChange = (page: number) => {
-    setCurrentPage(page);
-    setQueryParams({
-      ...queryParams,
-      pageNum: page,
-    });
-  };
-
-  const handleAddClick = () => {
-    clickFromChild("FIX");
-  };
-
-  const getUserList = async () => {
-    try {
-      const { userName, phoneNumber, state, startTime, endTime } = searchValues;
-      setQueryParams({
-        ...queryParams,
-        userName,
-        phoneNumber,
-        state,
-        startTime,
-        endTime,
-      });
-      const { code, data } = await getUserListApi(queryParams);
-      if (code === 1000) {
-        setListData(data.rows);
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  };
-
-  const [listData, setListData] = useState([]);
   const columns = [
     {
       title: "序号",
@@ -86,7 +61,7 @@ const UserBottomList: React.FC<AddButtonClickType> = ({
     },
     {
       title: "部门",
-      key: "deptName",
+      key: "deptId",
       dataIndex: "deptName",
       render: (text: string) => <>{text ? text : "null"}</>,
     },
@@ -120,19 +95,23 @@ const UserBottomList: React.FC<AddButtonClickType> = ({
       title: "操作",
       key: "operate",
       dataIndex: "operate",
-      render: () => (
+      render: (_: string, record: object) => (
         <div style={{ color: "#58aaff" }}>
           <Space>
             <EditOutlined />
             <a
               href="#"
-              onClick={() => handleAddClick()}
+              onClick={() => handleEditClick(record)}
               style={{ color: " #58aaff" }}
             >
               编辑
             </a>
             <DeleteOutlined />
-            <a href="#" style={{ color: " #58aaff" }}>
+            <a
+              href="#"
+              onClick={() => handleDeleteClick(record)}
+              style={{ color: " #58aaff" }}
+            >
               删除
             </a>
           </Space>
@@ -141,25 +120,93 @@ const UserBottomList: React.FC<AddButtonClickType> = ({
     },
   ];
 
+  const getUserList = async () => {
+    try {
+      const { pageNum, pageSize } = queryParams;
+      let newQueryParams = {};
+      newQueryParams = {
+        ...searchValues,
+        pageNum,
+        pageSize,
+      };
+      // console.log(newQueryParams);
+
+      const { code, data } = await getUserListApi(newQueryParams);
+      if (code === 1000) {
+        setListData(data.rows);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+    setQueryParams({
+      ...queryParams,
+      pageNum: page,
+    });
+  };
+
+  const handleEditClick = (echoData: any) => {
+    clickFromChild("EDIT", echoData.userId);
+  };
+
+  const handleDeleteClick = 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: "删除成功",
+            });
+            setUpdate({
+              ...update,
+            });
+          } else {
+            messageApi.open({
+              type: "error",
+              content: "删除失败",
+            });
+          }
+        } catch (err) {
+          console.log(err);
+        }
+      },
+      onCancel() {
+        messageApi.open({
+          type: "warning",
+          content: "取消成功",
+        });
+      },
+    });
+  };
+
   useEffect(() => {
     getUserList();
-    console.log(searchValues);
+  }, [searchValues, update]);
-  }, [searchValues]);
 
   return (
-    <div className="tree-content">
+    <>
-      <Table
+      <div className="tree-content">
-        columns={columns}
+        {contextHolder}
-        dataSource={listData}
+        <Table
-        className="article-table"
+          columns={columns}
-        pagination={{
+          dataSource={listData}
-          onChange: handlePageChange,
+          className="article-table"
-          showQuickJumper: true,
+          pagination={{
-          showTotal: (total, range) =>
+            onChange: handlePageChange,
-            `第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
+            showQuickJumper: true,
-        }}
+            showTotal: (total, range) =>
-      />
+              `第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
-    </div>
+          }}
+        />
+      </div>
+    </>
   );
 };
 

src/view/system/user/comps/user-dept-tree/index.tsx

@@ -1,15 +1,15 @@
-import React, { useMemo, useState, useEffect } from "react";
+import "./index.scss";
 import { Input, Tree } from "antd";
+import React, { useMemo, useState, useEffect } from "react";
 import { SearchOutlined } from "@ant-design/icons";
 import { getDeptTreeApi } from "../../../../../api/system/users";
-import "./index.scss";
 
 const MyDeptTree: React.FC = () => {
-  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
+  const [myData, setMyData] = useState<any[]>([]);
   const [searchValue, setSearchValue] = useState("");
   const [autoExpandParent, setAutoExpandParent] = useState(true);
+  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
 
-  const [myData, setMyData] = useState<any[]>([]);
   const getDeptTreeData = async () => {
     try {
       const res = await getDeptTreeApi();
@@ -24,24 +24,6 @@ const MyDeptTree: React.FC = () => {
     setAutoExpandParent(false);
   };
 
-  // const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-  //   const { value } = e.target;
-  //   const newExpandedKeys = dataList
-  //     .map((item) => {
-  //       if (item.title.indexOf(value) > -1) {
-  //         return getParentKey(item.key, defaultData);
-  //       }
-  //       return null;
-  //     })
-  //     .filter(
-  //       (item, i, self): item is React.Key =>
-  //         !!(item && self.indexOf(item) === i)
-  //     );
-  //   setExpandedKeys(newExpandedKeys);
-  //   setSearchValue(value);
-  //   setAutoExpandParent(true);
-  // };
-
   const treeData = useMemo(() => {
     const loop = (data: any[]): any[] =>
       data.map((item) => {

src/view/system/user/comps/user-from-modal/index.tsx

@@ -8,31 +8,83 @@ import {
   Select,
   TreeSelect,
   Radio,
+  message,
 } from "antd";
 import type { RadioChangeEvent } from "antd";
 import React, { useEffect, useState } from "react";
-import { getDeptTreeApi } from "../../../../../api/system/users";
+import {
+  getDeptTreeApi,
+  addUserApi,
+  getRoleListApi,
+  getUserInfoApi,
+  editUserApi,
+} from "../../../../../api/system/users";
 
-interface ShowModal {
+interface ShowModalType {
   isShowModal: boolean;
-  clickFromChild: () => void;
+  clickFromChild: (UPDATE?: string) => void;
   modalTitle: string;
+  echoId: any;
+  buttonType: string;
 }
-type FieldType = {
-  username?: string;
-  password?: string;
-  remember?: string;
-};
 
-const UserFromModal: React.FC<ShowModal> = (props) => {
+interface AddUserType {
+  deptId: number | null;
+  email: string;
+  nickName: string;
+  password: string;
+  phoneNumber: string;
+  postIds: number[];
+  roleIds: number[];
+  sex: string;
+  state: string;
+  userName: string;
+}
+
+const UserFromModal: React.FC<ShowModalType> = ({
+  isShowModal,
+  clickFromChild,
+  modalTitle,
+  echoId,
+  buttonType,
+}) => {
+  const [form] = Form.useForm();
+  const [radioValue, setRadioValue] = useState(1);
   const [deptList, setDeptList] = useState<any[]>();
-  const [value, setValue] = useState<string>();
+  const [roleList, setRoleList] = useState<any[]>([]);
+  const [treeValue, setTreeValue] = useState<string>();
+  const [messageApi, contextHolder] = message.useMessage();
+  // 用于自定义TreeSelect内容
   const fieldNames = {
     label: "deptName",
     title: "deptName",
-    value: "deptName",
+    value: "deptId",
     key: "deptName",
-  }; // 用于自定义TreeSelect内容
+  };
+  // 用于新增用户参数
+  let addUserParams: AddUserType = {
+    deptId: null,
+    email: "",
+    nickName: "",
+    password: "",
+    phoneNumber: "",
+    postIds: [],
+    roleIds: [],
+    sex: "",
+    state: "",
+    userName: "",
+  };
+
+  const getUserInfo = async () => {
+    try {
+      const { code, data } = await getUserInfoApi(echoId);
+      if (code === 1000) {
+        handleEchoForm(data);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
 
   const getDeptTreeData = async () => {
     try {
@@ -43,158 +95,254 @@ const UserFromModal: React.FC<ShowModal> = (props) => {
     }
   };
 
-  const onChange = (newValue: string) => {
+  const getRoleList = async () => {
-    setValue(newValue);
+    try {
+      const { code, data } = await getRoleListApi();
+      if (code === 1000) {
+        console.log(data.rows);
+        setRoleList(data.rows);
+      }
+    } catch (err) {
+      console.log(err);
+    }
   };
 
-  const handleOk = () => {
+  const handleEchoForm = (data: any) => {
-    props.clickFromChild();
+    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 handleAddConfirm = () => {
+    form.validateFields().then((values) => {
+      Object.keys(values).forEach(
+        (key) => values[key] === undefined && delete values[key]
+      );
+      addUserParams = {
+        ...addUserParams,
+        ...values,
+        userId: echoId,
+      };
+      console.log(buttonType);
+      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) {
+        clickFromChild("UPDATE");
+        messageApi.open({
+          type: "success",
+          content: "创建成功",
+        });
+        handleClearForm();
+      } else {
+        messageApi.open({
+          type: "error",
+          content: "用户名已经存在",
+        });
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  const handleEditUser = async () => {
+    console.log(addUserParams);
+
+    const { code } = await editUserApi(addUserParams);
+    try {
+      if (code === 1000) {
+        clickFromChild("UPDATE");
+        messageApi.open({
+          type: "success",
+          content: "修改成功",
+        });
+        handleClearForm();
+      } else {
+        messageApi.open({
+          type: "error",
+          content: "修改失败",
+        });
+      }
+    } catch (err) {
+      console.log(err);
+    }
   };
 
   const handleCancel = () => {
-    props.clickFromChild();
+    clickFromChild();
+    handleClearForm();
   };
 
-  const onFinish = (values: any) => {
+  const handleClearForm = () => {
-    console.log("Success:", values);
+    form.resetFields();
   };
 
-  const onFinishFailed = (errorInfo: any) => {
-    console.log("Failed:", errorInfo);
-  };
-  const [radioValue, setRadioValue] = useState(1);
-
   const onRadioChange = (e: RadioChangeEvent) => {
     setRadioValue(e.target.value);
   };
 
+  const onTreeSelectChange = (newValue: string) => {
+    setTreeValue(newValue);
+  };
+
   useEffect(() => {
     getDeptTreeData();
-  }, []);
+    getRoleList();
+    getUserInfo();
+  }, [echoId]);
 
   return (
     <>
+      {contextHolder}
       <Modal
-        title={props.modalTitle}
+        title={modalTitle}
         width={700}
-        open={props.isShowModal}
+        open={isShowModal}
-        onOk={handleOk}
+        onOk={handleAddConfirm}
         onCancel={handleCancel}
       >
         <Form
+          form={form}
           name="basic"
           initialValues={{ remember: true }}
           labelCol={{ span: 6 }}
-          onFinish={onFinish}
+          onFinish={handleAddConfirm}
-          onFinishFailed={onFinishFailed}
           autoComplete="off"
           className="modal-form"
         >
           <Row>
             <Col span={12}>
-              <Form.Item<FieldType>
+              <Form.Item
                 label="用户名称"
-                name="用户名称"
+                name="userName"
                 rules={[{ required: true, message: "请输入用户名称" }]}
               >
-                <Input placeholder="请输入用户名称" />
+                <Input defaultValue={""} placeholder="请输入用户名称" />
               </Form.Item>
             </Col>
             <Col span={12}>
-              <Form.Item<FieldType>
+              <Form.Item
                 label="用户昵称"
-                name="用户昵称"
+                name="nickName"
                 rules={[{ required: true, message: "请输入用户昵称" }]}
               >
-                <Input placeholder="请输入用户昵称" />
+                <Input defaultValue={""} placeholder="请输入用户昵称" />
               </Form.Item>
             </Col>
             <Col span={12}>
-              <Form.Item<FieldType>
+              <Form.Item
                 label="用户性别"
-                name="用户性别"
+                name="sex"
                 rules={[{ required: false }]}
               >
                 <Select
+                  defaultValue={""}
                   options={[
-                    { value: "男", label: "男" },
+                    { value: "0", label: "男" },
-                    { value: "女", label: "女" },
+                    { value: "1", label: "女" },
-                    { value: "未知", label: "未知" },
+                    { value: "2", label: "未知" },
                   ]}
                   placeholder="请选择用户性别"
                 />
               </Form.Item>
             </Col>
             <Col span={12}>
-              <Form.Item<FieldType>
+              <Form.Item
                 label="用户密码"
-                name="用户密码"
+                name="password"
                 rules={[{ required: true, message: "请输入用户密码" }]}
               >
-                <Input.Password placeholder="请输入密码" />
+                <Input.Password defaultValue={""} placeholder="请输入密码" />
               </Form.Item>
             </Col>
             <Col span={12}>
-              <Form.Item<FieldType>
+              <Form.Item
                 label="归属部门"
-                name="归属部门"
+                name="deptId"
                 rules={[{ required: false }]}
               >
                 <TreeSelect
                   showSearch
+                  defaultValue={""}
                   style={{ width: "100%" }}
-                  value={value}
+                  value={treeValue}
                   dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
                   placeholder="请选择"
                   allowClear
                   fieldNames={fieldNames}
                   treeDefaultExpandAll
-                  onChange={onChange}
+                  onChange={onTreeSelectChange}
                   treeData={deptList}
                 />
               </Form.Item>
             </Col>
             <Col span={12}>
-              <Form.Item<FieldType>
+              <Form.Item
                 label="手机号码"
-                name="手机号码"
+                name="phoneNumber"
                 rules={[{ required: false }]}
               >
                 <Input placeholder="请输入手机号码" />
               </Form.Item>
             </Col>
             <Col span={12}>
-              <Form.Item<FieldType>
+              <Form.Item
                 label="邮箱"
-                name="邮箱"
+                name="email"
                 rules={[{ required: false }]}
               >
-                <Input placeholder="请输入邮箱" />
+                <Input defaultValue={""} placeholder="请输入邮箱" />
               </Form.Item>
             </Col>
             <Col span={12}>
-              <Form.Item<FieldType>
+              <Form.Item
                 label="状态"
-                name="状态"
+                name="state"
                 rules={[
                   { required: false, message: "Please input your password!" },
                 ]}
               >
                 <Radio.Group onChange={onRadioChange} value={radioValue}>
-                  <Radio value={1}>正常</Radio>
+                  <Radio value="1">正常</Radio>
-                  <Radio value={2}>停用</Radio>
+                  <Radio value="0">停用</Radio>
                 </Radio.Group>
               </Form.Item>
             </Col>
             <Col span={12}>
-              <Form.Item<FieldType>
+              <Form.Item
                 label="岗位"
-                name="岗位"
+                name="postIds"
                 rules={[
                   { required: false, message: "Please input your password!" },
                 ]}
               >
                 <Select
+                  mode="multiple"
+                  defaultValue={[]}
                   options={[
                     { value: "董事长", label: "董事长" },
                     { value: "项目经理", label: "项目经理" },
@@ -206,27 +354,26 @@ const UserFromModal: React.FC<ShowModal> = (props) => {
               </Form.Item>
             </Col>
             <Col span={12}>
-              <Form.Item<FieldType>
+              <Form.Item
                 label="角色"
-                name="角色"
+                name="roleIds"
                 rules={[
                   { required: false, message: "Please input your password!" },
                 ]}
               >
-                <Select
+                <Select mode="multiple" placeholder="请选择角色">
-                  options={[
+                  {roleList.map((item) => (
-                    { value: "超级管理员", label: "超级管理员" },
+                    <Select.Option key={item.roleId} value={item.roleId}>
-                    { value: "普通角色", label: "普通角色" },
+                      {item.roleName}
-                  ]}
+                    </Select.Option>
-                  placeholder="请选择岗位"
+                  ))}
-                />
+                </Select>
               </Form.Item>
             </Col>
             <Col span={24}>
-              <Form.Item<FieldType>
+              <Form.Item
                 label="备注"
                 labelCol={{ span: 3 }}
-                name="备注"
                 rules={[
                   { required: false, message: "Please input your password!" },
                 ]}

src/view/system/user/comps/user-mid-add-button/index.tsx

@@ -4,7 +4,7 @@ import { PlusOutlined } from "@ant-design/icons";
 import "./index.scss";
 
 interface AddButtonClick {
-  clickFromChild: (type: string) => void;
+  clickFromChild: (type: string, echoData?: number) => void;
 }
 
 const UserMidAddButton: React.FC<AddButtonClick> = ({ clickFromChild }) => {

src/view/system/user/comps/user-top-search/index.tsx

@@ -1,9 +1,8 @@
-import React, { useState, useEffect, Children } from "react";
 import "./index.scss";
-
 import { Input, Select, DatePicker, Button } from "antd";
-import { SearchOutlined, RedoOutlined } from "@ant-design/icons";
 import FormatData from "../../../../../utils/formatData";
+import React, { useState, useEffect } from "react";
+import { SearchOutlined, RedoOutlined } from "@ant-design/icons";
 
 interface SearchParamsType {
   userName?: string;
@@ -36,7 +35,6 @@ const UserTopSearch: React.FC<SearchClick> = ({ clickFromChild }) => {
 
   const handleInputValues = (e: any) => {
     const { name, value } = e.target;
-    console.log(value);
 
     setSearchValues({ ...searchValues, [name]: value });
   };
@@ -45,7 +43,7 @@ const UserTopSearch: React.FC<SearchClick> = ({ clickFromChild }) => {
     clickFromChild(searchValues);
   };
   const handleReset = () => {
-    clickFromChild(null);
+    clickFromChild("RESET");
     setSearchValues({
       ...searchValues,
       userName: undefined,
@@ -56,9 +54,7 @@ const UserTopSearch: React.FC<SearchClick> = ({ clickFromChild }) => {
     });
   };
 
-  useEffect(() => {
+  useEffect(() => {}, [searchValues]);
-    console.log(searchValues);
-  }, [searchValues]);
 
   return (
     <div className="search-content">
@@ -105,6 +101,7 @@ const UserTopSearch: React.FC<SearchClick> = ({ clickFromChild }) => {
         <div className="time-selector">
           <div>创建时间</div>
           <DatePicker.RangePicker
+            showTime
             className="time-picker"
             placeholder={["开始时间", "结束时间"]}
             onChange={(dates) => {

src/view/system/user/index.scss

@@ -13,8 +13,7 @@
     height: 190px;
     display: flex;
     flex-direction: column;
-    .user-top-search {
+
-    }
     .user-mid-button {
       display: flex;
       margin-left: 12px;

src/view/system/user/index.tsx

@@ -8,21 +8,38 @@ import UserBottomList from "./comps/user-bottom-list";
 import UserFromModal from "./comps/user-from-modal";
 
 export default function User() {
-  const [isShowModal, setIsShowModal] = useState<boolean>(false);
+  const [echoId, setEchoId] = useState<number>();
   const [modalTitle, setModalTitle] = useState<string>("");
+  const [buttonType, setButtonType] = useState<string>("");
   const [searchValues, setSearchValues] = useState<any>({});
+  const [isShowModal, setIsShowModal] = useState<boolean>(false);
 
-  const handleSearch = (searchValues: any) => {
+  const handleSearch = (value: any) => {
+    if (value === "RESET") return setSearchValues({});
     setSearchValues({
       ...searchValues,
+      ...value,
     });
   };
 
-  const handleAddClick = (type: string) => {
+  const handleAddClick = (type: string, echoData?: number) => {
     type === "ADD" ? setModalTitle("新增用户") : setModalTitle("修改用户");
-    setIsShowModal(true);
+    if (type === "EDIT") {
+      setEchoId(echoData);
+      setButtonType(type);
+      setIsShowModal(true);
+    } else {
+      setButtonType(type);
+      setIsShowModal(true);
+    }
   };
-  const handleAddOff = () => {
+
+  const handleAddOff = (value?: string) => {
+    if (value === "UPDATE")
+      setSearchValues({
+        ...searchValues,
+      });
+
     setIsShowModal(false);
   };
 
@@ -39,6 +56,8 @@ export default function User() {
         <UserFromModal
           isShowModal={isShowModal}
           modalTitle={modalTitle}
+          echoId={echoId}
+          buttonType={buttonType}
           clickFromChild={handleAddOff}
         ></UserFromModal>
       </div>