feat(projects): perfect user interface

mufeng889 · Aug 8, 2024 · 1cc8a60 · 1cc8a60
1 parent 9138d77
commit 1cc8a60
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -3,7 +3,6 @@
   "type": "module",
   "version": "0.1.0",
   "private": false,
-  "homepage": "https://github.com/soybeanjs/soybean-admin-antd",
   "packageManager": "pnpm@9.1.1",
   "scripts": {
     "build": "vite build --mode prod",
@@ -74,7 +73,6 @@
     "@unocss/transformer-variant-group": "0.61.9",
     "@unocss/vite": "0.61.9",
     "@vitejs/plugin-react": "4.3.1",
-    "@vitejs/plugin-react-swc": "3.7.0",
     "eslint": "9.8.0",
     "eslint-plugin-react": "7.35.0",
     "eslint-plugin-react-hooks": "4.6.2",

diff --git a/src/hooks/common/table.ts b/src/hooks/common/table.ts
@@ -1,5 +1,4 @@
 import type { TablePaginationConfig, TableProps } from 'antd';
-import { cloneDeep } from 'lodash-es';
 import { useBoolean, useHookTable } from '@sa/hooks';
 import { Form } from 'antd';
 import { getIsMobile } from '@/store/slice/app';
@@ -148,12 +147,12 @@ export function useTableOperate<T extends TableData = TableData>(
   }
 
   /** the editing row data */
-  const [editingData, setEditingData] = useState<T | null>(null);
+  const [editingData, setEditingData] = useState<T | undefined>(undefined);
 
   function handleEdit(id: T['id']) {
     setOperateType('edit');
-    const findItem = data.find(item => item.id === id) || null;
-    setEditingData(cloneDeep(findItem));
+    const findItem = data.find(item => item.id === id);
+    setEditingData(findItem);
     openDrawer();
   }
 

diff --git a/src/pages/manage/user/index.tsx b/src/pages/manage/user/index.tsx
@@ -138,8 +138,18 @@ export function Component() {
       { showQuickJumper: true }
     );
 
-  const { checkedRowKeys, rowSelection, onBatchDeleted, onDeleted, handleEdit, handleAdd, drawerVisible, closeDrawer } =
-    useTableOperate(data, run);
+  const {
+    checkedRowKeys,
+    rowSelection,
+    onBatchDeleted,
+    onDeleted,
+    handleEdit,
+    handleAdd,
+    drawerVisible,
+    closeDrawer,
+    operateType,
+    editingData
+  } = useTableOperate(data, run);
   useWhyDidYouUpdate('Component', {
     columns,
     columnChecks,
@@ -202,6 +212,9 @@ export function Component() {
         ></Table>
         <UserOperateDrawer
           open={drawerVisible}
+          rowData={editingData}
+          submitted={run}
+          operateType={operateType}
           closeDrawer={closeDrawer}
         />
       </Card>

diff --git a/src/pages/manage/user/modules/UserOperateDrawer.tsx b/src/pages/manage/user/modules/UserOperateDrawer.tsx
@@ -5,27 +5,88 @@ import { fetchGetAllRoles } from '@/service/api';
 
 interface Props {
   open: boolean;
+  /** the type of operation */
+  operateType: AntDesign.TableOperateType;
   closeDrawer: () => void;
+  submitted: () => void;
+  /** the edit row data */
+  rowData?: Api.SystemManage.User;
 }
 
-const UserOperateDrawer: FC<Props> = ({ open, closeDrawer }) => {
+type Model = Pick<
+  Api.SystemManage.User,
+  'userName' | 'userGender' | 'nickName' | 'userPhone' | 'userEmail' | 'userRoles' | 'status'
+>;
+
+interface OptionsProps {
+  label: string;
+  value: string;
+}
+
+const UserOperateDrawer: FC<Props> = ({ open, closeDrawer, submitted, operateType, rowData }) => {
   const { t } = useTranslation();
 
+  const [roleOptions, setRoleOptions] = useState<OptionsProps[]>([]);
+
+  const [form] = Form.useForm<Model>();
+
   const onClose = () => {
     closeDrawer();
   };
+
+  async function getRoleOptions() {
+    const { error, data } = await fetchGetAllRoles();
+
+    if (!error) {
+      const options = data.map(item => ({
+        label: item.roleName,
+        value: item.roleCode
+      }));
+
+      // end
+      setRoleOptions(options);
+    }
+  }
+
+  async function handleSubmit() {
+    const data = await form.validateFields();
+    console.log(data);
+
+    // request
+    window.$message?.success(t('common.updateSuccess'));
+    closeDrawer();
+    submitted();
+  }
+
+  useUpdateEffect(() => {
+    if (open) {
+      form.resetFields();
+      getRoleOptions();
+    }
+  }, [open]);
+
   return (
     <Drawer
       onClose={onClose}
+      title={operateType === 'add' ? t('page.manage.user.addUser') : t('page.manage.user.editUser')}
       open={open}
       footer={
         <Flex justify="space-between">
           <Button onClick={onClose}>{t('common.cancel')}</Button>
-          <Button type="primary">{t('common.confirm')}</Button>
+          <Button
+            onClick={handleSubmit}
+            type="primary"
+          >
+            {t('common.confirm')}
+          </Button>
         </Flex>
       }
     >
-      <Form layout="vertical">
+      <Form
+        form={form}
+        initialValues={operateType === 'edit' ? rowData : undefined}
+        layout="vertical"
+      >
         <Form.Item
           label={t('page.manage.user.userName')}
           name="userName"
@@ -90,7 +151,10 @@ const UserOperateDrawer: FC<Props> = ({ open, closeDrawer }) => {
           label={t('page.manage.user.userRole')}
           name="roles"
         >
-          <Select placeholder={t('page.manage.user.form.userRole')} />
+          <Select
+            options={roleOptions}
+            placeholder={t('page.manage.user.form.userRole')}
+          />
         </Form.Item>
       </Form>
     </Drawer>