feat: ✨ 新增用户模块

anyone-yuren · Jan 10, 2024 · 9733845 · 9733845
1 parent bc6b6cf
commit 9733845
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 25 deletions.
diff --git a/apps/admin/src/views/compo/image-upload.tsx b/apps/admin/src/views/compo/image-upload.tsx
@@ -1,7 +1,5 @@
 import { CloudUploadOutlined, PlusOutlined } from '@ant-design/icons';
-import {
-  Button, Card, Col, Modal, Row, Upload,
-} from 'antd';
+import { Button, Card, Col, Modal, Row, Upload } from 'antd';
 import React, { useState } from 'react';
 
 import { PageWrapper } from '@/components/Page';
@@ -48,12 +46,13 @@ const ImageUpload: React.FC = () => {
     setPreviewTitle(file.name || file.url!.substring(file.url!.lastIndexOf('/') + 1));
   };
 
-  const getBase64 = (file: RcFile): Promise<string> => new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onload = () => resolve(reader.result as string);
-    reader.onerror = (error) => reject(error);
-  });
+  const getBase64 = (file: RcFile): Promise<string> =>
+    new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result as string);
+      reader.onerror = (error) => reject(error);
+    });
 
   const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) => setListImgs(newFileList);
 
@@ -73,11 +72,13 @@ const ImageUpload: React.FC = () => {
               accept='.jpg, .jpeg, .gif, .png, .bmp'
               multiple
             >
-              <p className="ant-upload-drag-icon" style={{ marginBottom: 0 }}>
+              <p className='ant-upload-drag-icon' style={{ marginBottom: 0 }}>
                 <CloudUploadOutlined rev={undefined} />
               </p>
-              <p>将图片拖到此处, 或<span style={{ color: '#1890ff;' }}>点击上传</span></p>
-              <p className="ant-upload-hint">只能上传jpg、jpeg、gif、png、bmp文件, 且不超过500kb</p>
+              <p>
+                将图片拖到此处, 或<span style={{ color: '#1890ff' }}>点击上传</span>
+              </p>
+              <p className='ant-upload-hint'>只能上传jpg、jpeg、gif、png、bmp文件, 且不超过500kb</p>
             </Dragger>
           </Card>
         </Col>
@@ -94,7 +95,7 @@ const ImageUpload: React.FC = () => {
                 <CloudUploadOutlined rev={undefined} />
                 <span>点击上传</span>
               </Button>
-              <p className="ant-upload-hint">只能上传jpg、jpeg、gif、png、bmp文件, 且不超过500kb</p>
+              <p className='ant-upload-hint'>只能上传jpg、jpeg、gif、png、bmp文件, 且不超过500kb</p>
             </Upload>
           </Card>
         </Col>
@@ -115,12 +116,7 @@ const ImageUpload: React.FC = () => {
               </div>
             </Upload>
           </Card>
-          <Modal
-            open={previewVisible}
-            title={previewTitle}
-            footer={null}
-            onCancel={handleCancle}
-          >
+          <Modal open={previewVisible} title={previewTitle} footer={null} onCancel={handleCancle}>
             <img src={previewImage} style={{ width: '100%' }} />
           </Modal>
         </Col>

diff --git a/apps/admin/src/views/user/addUser/index.tsx b/apps/admin/src/views/user/addUser/index.tsx
@@ -1,17 +1,63 @@
-import { Card, Col, Flex, Row, Upload } from 'antd';
+import { Card, Col, Flex, Row, Tag, Upload } from 'antd';
+import { GButton, GForm } from 'gbeata';
+import { useNavigate } from 'react-router-dom';
 import { SvgIcon, Translatex } from 'ui';
 
 import useStyles from './style';
 
+import type { FormValues } from 'gbeata/lib/types/FormValues';
 import type { FC } from 'react';
 
 interface PAddUser {
   onAdd?: (user: any) => void;
 }
 
-const AddUser: FC<PAddUser> = ({ onAdd = () => {} }) => {
+const AddUser: FC<PAddUser> = () => {
+  const navigate = useNavigate();
   const { Dragger } = Upload;
   const { styles } = useStyles();
+  const fields = [
+    {
+      title: '全名',
+      key: 'input',
+      required: true,
+      defaultValue: 'Gbeata',
+    },
+    {
+      title: '密码',
+      type: 'password',
+      key: 'password',
+      defaultValue: 'gbeata',
+    },
+    {
+      title: '城市',
+      type: 'select',
+      key: 'select',
+      defaultValue: 1,
+      options: [
+        { label: <Tag>选项A</Tag>, value: 1 },
+        { label: '选项2', value: 2 },
+      ],
+    },
+    {
+      title: '电话号码',
+      key: 'number',
+      required: true,
+      defaultValue: 15305999999,
+    },
+    {
+      title: '地址',
+      type: 'textarea',
+      key: 'textarea',
+      defaultValue: '广东省深圳市南山区科技园',
+      span: 24,
+    },
+  ];
+
+  const onFinish = (form: FormValues) => {
+    console.log(form);
+    navigate('/user/user-list');
+  };
   return (
     <Translatex direction='left' run={true} delay={100}>
       <Row gutter={[16, 16]}>
@@ -31,13 +77,23 @@ const AddUser: FC<PAddUser> = ({ onAdd = () => {} }) => {
                 </Flex>
               </div>
               <p>
-                将图片拖到此处, 或<span style={{ color: '#1890ff;' }}>点击上传</span>
+                将图片拖到此处, 或<span style={{ color: '#1890ff' }}>点击上传</span>
               </p>
               <p className='ant-upload-hint'>只能上传jpg、jpeg、gif、png、bmp文件, 且不超过500kb</p>
             </Dragger>
           </Card>
         </Col>
-        <Col span={16}>2</Col>
+        <Col span={16}>
+          <Card>
+            <GForm fields={fields} span={12} onConfirm={onFinish}>
+              <Flex justify='end' className={styles['btn-submit']}>
+                <GButton type='primary' htmlType='submit'>
+                  创建用户
+                </GButton>
+              </Flex>
+            </GForm>
+          </Card>
+        </Col>
       </Row>
     </Translatex>
   );

diff --git a/apps/admin/src/views/user/addUser/style.ts b/apps/admin/src/views/user/addUser/style.ts
@@ -45,6 +45,9 @@ const useStyles = createStyles(({ token }) => ({
       borderRadius: token.borderRadiusLG,
     },
   },
+  'btn-submit': {
+    width: '100%',
+  },
 }));
 
 export default useStyles;
diff --git a/apps/admin/src/views/user/list/index.tsx b/apps/admin/src/views/user/list/index.tsx
@@ -2,6 +2,7 @@ import { PlusOutlined } from '@ant-design/icons';
 import { useRequest } from 'ahooks';
 import { Button, Col, Flex, Row } from 'antd';
 import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import UserCard from '@/components/UserCard';
 
@@ -23,6 +24,7 @@ interface PUSerList {
 
 const UserList: FC<PUSerList> = () => {
   const { styles, theme, cx } = useStyles();
+  const navigate = useNavigate();
 
   const [tableTableData, setTableTableData] = useState<UserItemType[]>([]);
   const { data: user, loading } = useRequest<ListResult, any>(getUsersList);
@@ -33,7 +35,12 @@ const UserList: FC<PUSerList> = () => {
   return (
     <Flex gap={16} vertical>
       <Flex justify={'end'}>
-        <Button className={cx(styles['add-button'])} type='primary' icon={<PlusOutlined />}>
+        <Button
+          className={cx(styles['add-button'])}
+          type='primary'
+          icon={<PlusOutlined />}
+          onClick={() => navigate('/user/add-user')}
+        >
           新建
         </Button>
       </Flex>

diff --git a/packages/gbeata/package.json b/packages/gbeata/package.json
@@ -15,7 +15,7 @@
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
-  "types": "dist/index.d.ts",
+  "types": "dist/esm/index.d.ts",
   "typings": "lib/index.d.ts",
   "files": [
     "dist",