chore: user apikeys

src/pages/users/apis/index.ts

@@ -1,5 +1,5 @@
 import { request } from '@umijs/max';
-import { ListItem } from '../config/types';
+import { FormData, ListItem } from '../config/types';
 
 export const USERS_API = '/users';
 
@@ -20,7 +20,7 @@ export async function createUser(params: { data: FormData }) {
 }
 
 export async function updateUser(params: { data: FormData }) {
-  return request(`${USERS_API}`, {
+  return request(`${USERS_API}/${params.data.id}`, {
     method: 'PUT',
     data: params.data
   });

src/pages/users/components/add-modal.tsx

@@ -1,17 +1,20 @@
 import ModalFooter from '@/components/modal-footer';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
+import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import { SyncOutlined } from '@ant-design/icons';
 import { Form, Modal } from 'antd';
-import { UserRolesOptions } from '../config';
-import { FormData } from '../config/types';
+import { useEffect } from 'react';
+import { UserRoles, UserRolesOptions } from '../config';
+import { FormData, ListItem } from '../config/types';
 
 type AddModalProps = {
   title: string;
   action: PageActionType;
   open: boolean;
   onOk: (values: FormData) => void;
+  data?: ListItem;
   onCancel: () => void;
 };
 const AddModal: React.FC<AddModalProps> = ({
@@ -19,12 +22,9 @@ const AddModal: React.FC<AddModalProps> = ({
   action,
   open,
   onOk,
+  data,
   onCancel
 }) => {
-  if (!open) {
-    return null;
-  }
-
   const [form] = Form.useForm();
   const suffix = (
     <SyncOutlined
@@ -34,11 +34,23 @@ const AddModal: React.FC<AddModalProps> = ({
       }}
     />
   );
+  const initFormValue = () => {
+    if (action === PageAction.EDIT && open) {
+      form.setFieldsValue({
+        ...data,
+        is_admin: data?.is_admin ? UserRoles.ADMIN : UserRoles.USER
+      });
+    }
+  };
 
   const handleSumit = () => {
     form.submit();
   };
 
+  useEffect(() => {
+    initFormValue();
+  }, [open]);
+
   return (
     <Modal
       title={title}
@@ -56,18 +68,18 @@ const AddModal: React.FC<AddModalProps> = ({
       }
     >
       <Form name="addUserForm" form={form} onFinish={onOk} preserve={false}>
-        <Form.Item<FormData> name="name" rules={[{ required: true }]}>
-          <SealInput.Input label="Name"></SealInput.Input>
+        <Form.Item<FormData> name="username" rules={[{ required: true }]}>
+          <SealInput.Input label="Name" required></SealInput.Input>
         </Form.Item>
-        <Form.Item<FormData> name="full_name" rules={[{ required: true }]}>
+        <Form.Item<FormData> name="full_name" rules={[{ required: false }]}>
           <SealInput.Input label="FullName"></SealInput.Input>
         </Form.Item>
-        <Form.Item<FormData> name="is_admin" rules={[{ required: true }]}>
+        <Form.Item<FormData> name="is_admin" rules={[{ required: false }]}>
           <SealSelect label="Role" options={UserRolesOptions}></SealSelect>
         </Form.Item>
 
         <Form.Item<FormData> name="password" rules={[{ required: true }]}>
-          <SealInput.Input label="Password"></SealInput.Input>
+          <SealInput.Password label="Password" required></SealInput.Password>
         </Form.Item>
       </Form>
     </Modal>

src/pages/users/config/types.ts

@@ -8,7 +8,8 @@ export interface ListItem {
 }
 
 export interface FormData {
-  name: string;
+  username: string;
+  id?: number;
   is_admin: boolean;
   full_name: string;
   password: string;

src/pages/users/index.tsx

@@ -3,6 +3,7 @@ import { PageAction } from '@/config';
 import type { PageActionType } from '@/config/types';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
+import { handleBatchRequest } from '@/utils';
 import {
   DeleteOutlined,
   EditOutlined,
@@ -16,7 +17,7 @@ import { Button, Input, Modal, Space, Table, Tooltip, message } from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
 import { useEffect, useState } from 'react';
-import { createUser, deleteUser, queryUsersList } from './apis';
+import { createUser, deleteUser, queryUsersList, updateUser } from './apis';
 import AddModal from './components/add-modal';
 import { FormData, ListItem } from './config/types';
 const { Column } = Table;
@@ -32,6 +33,9 @@ const Models: React.FC = () => {
   const [dataSource, setDataSource] = useState<ListItem[]>([]);
   const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
   const [title, setTitle] = useState<string>('');
+  const [currentData, setCurrentData] = useState<ListItem | undefined>(
+    undefined
+  );
   const [queryParams, setQueryParams] = useState({
     page: 1,
     perPage: 10,
@@ -102,9 +106,22 @@ const Models: React.FC = () => {
       ...data,
       is_admin: data.is_admin === 'admin'
     };
-    await createUser({ data: params });
-    setOpenAddModal(false);
-    message.success('successfully!');
+    try {
+      if (action === PageAction.EDIT) {
+        await updateUser({
+          data: {
+            ...params,
+            id: currentData?.id
+          }
+        });
+      } else {
+        await createUser({ data: params });
+      }
+      setOpenAddModal(false);
+      message.success('successfully!');
+    } catch (error) {
+      setOpenAddModal(false);
+    }
   };
 
   const handleModalCancel = () => {
@@ -132,9 +149,10 @@ const Models: React.FC = () => {
     Modal.confirm({
       title: '',
       content: 'Are you sure you want to delete the selected users?',
-      onOk() {
-        console.log('OK');
+      async onOk() {
+        await handleBatchRequest(rowSelection.selectedRowKeys, deleteUser);
         message.success('successfully!');
+        fetchData();
       },
       onCancel() {
         console.log('Cancel');
@@ -142,7 +160,8 @@ const Models: React.FC = () => {
     });
   };
 
-  const handleEditUser = () => {
+  const handleEditUser = (row: ListItem) => {
+    setCurrentData(row);
     setOpenAddModal(true);
     setAction(PageAction.EDIT);
     setTitle('Edit User');
@@ -214,7 +233,7 @@ const Models: React.FC = () => {
             onChange: handlePageChange
           }}
         >
-          <Column title="Name" dataIndex="name" key="name" width={200} />
+          <Column title="Name" dataIndex="username" key="name" width={200} />
           <Column
             title="Create Time"
             dataIndex="created_at"
@@ -231,15 +250,32 @@ const Models: React.FC = () => {
             title="Role"
             dataIndex="role"
             key="role"
-            width={400}
             render={(text, record: ListItem) => {
               return record.is_admin ? (
-                <UserSwitchOutlined className="size-16" />
+                <>
+                  <UserSwitchOutlined className="size-16" />
+                  <span className="m-l-5">管理员</span>
+                </>
               ) : (
-                <UserOutlined className="size-16" />
+                <>
+                  <UserOutlined className="size-16" />
+                  <span className="m-l-5">普通用户</span>
+                </>
               );
             }}
           />
+          <Column
+            title="Update Time"
+            dataIndex="updated_at"
+            key="updateTime"
+            defaultSortOrder="descend"
+            sortOrder={sortOrder}
+            showSorterTooltip={false}
+            sorter={true}
+            render={(text, record) => {
+              return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
+            }}
+          />
           <Column
             title="Operation"
             key="operation"
@@ -251,7 +287,7 @@ const Models: React.FC = () => {
                     <Button
                       size="small"
                       type="primary"
-                      onClick={handleEditUser}
+                      onClick={() => handleEditUser(record)}
                       icon={<EditOutlined></EditOutlined>}
                     ></Button>
                   </Tooltip>
@@ -274,6 +310,7 @@ const Models: React.FC = () => {
         open={openAddModal}
         action={action}
         title={title}
+        data={currentData}
         onCancel={handleModalCancel}
         onOk={handleModalOk}
       ></AddModal>