feat: add edit user
This commit is contained in:
parent
81eb9e3f11
commit
7e12cbdefc
@ -7,6 +7,7 @@ import { App as CodeEditorApp } from './pages/code-editor';
|
||||
import { App as MapApp } from './pages/map';
|
||||
import { App as PromptApp } from './pages/prompt';
|
||||
import { App as AiAgentApp } from './pages/ai-agent';
|
||||
import { App as UserApp } from './pages/user';
|
||||
import '@abearxiong/container/dist/container.css';
|
||||
|
||||
export const App = () => {
|
||||
@ -26,6 +27,7 @@ export const App = () => {
|
||||
<Route path='/map/*' element={<MapApp />} />
|
||||
<Route path='/prompt/*' element={<PromptApp />} />
|
||||
<Route path='/agent/*' element={<AiAgentApp />} />
|
||||
<Route path='/user/*' element={<UserApp />} />
|
||||
<Route path='/404' element={<div>404</div>} />
|
||||
<Route path='*' element={<div>404</div>} />
|
||||
</Routes>
|
||||
|
||||
198
src/pages/user/edit/List.tsx
Normal file
198
src/pages/user/edit/List.tsx
Normal file
@ -0,0 +1,198 @@
|
||||
import { Button, Input, message, Modal, Table } from 'antd';
|
||||
import { Fragment, useEffect, useMemo, useState } from 'react';
|
||||
import { useUserStore } from '../store';
|
||||
import { useShallow } from 'zustand/react/shallow';
|
||||
import { Form } from 'antd';
|
||||
import { useNavigate } from 'react-router';
|
||||
import { EditOutlined, SettingOutlined, LinkOutlined, SaveOutlined, DeleteOutlined, LeftOutlined } from '@ant-design/icons';
|
||||
import clsx from 'clsx';
|
||||
import { isObjectNull } from '@/utils/is-null';
|
||||
import { CardBlank } from '@/components/card/CardBlank';
|
||||
|
||||
const FormModal = () => {
|
||||
const [form] = Form.useForm();
|
||||
const userStore = useUserStore(
|
||||
useShallow((state) => {
|
||||
return {
|
||||
showEdit: state.showEdit,
|
||||
setShowEdit: state.setShowEdit,
|
||||
formData: state.formData,
|
||||
updateData: state.updateData,
|
||||
setFormData: state.setFormData,
|
||||
};
|
||||
}),
|
||||
);
|
||||
useEffect(() => {
|
||||
const open = userStore.showEdit;
|
||||
if (open) {
|
||||
const isNull = isObjectNull(userStore.formData);
|
||||
if (isNull) {
|
||||
form.setFieldsValue({});
|
||||
} else form.setFieldsValue(userStore.formData);
|
||||
}
|
||||
}, [userStore.showEdit]);
|
||||
const onFinish = async (values: any) => {
|
||||
userStore.updateData(values);
|
||||
};
|
||||
const onClose = () => {
|
||||
userStore.setShowEdit(false);
|
||||
form.setFieldsValue({});
|
||||
userStore.setFormData({});
|
||||
};
|
||||
const isEdit = userStore.formData.id;
|
||||
return (
|
||||
<Modal
|
||||
title={isEdit ? 'Edit' : 'Add'}
|
||||
open={userStore.showEdit}
|
||||
onClose={() => userStore.setShowEdit(false)}
|
||||
destroyOnClose
|
||||
footer={false}
|
||||
width={800}
|
||||
onCancel={onClose}>
|
||||
<Form
|
||||
form={form}
|
||||
onFinish={onFinish}
|
||||
labelCol={{
|
||||
span: 4,
|
||||
}}
|
||||
wrapperCol={{
|
||||
span: 20,
|
||||
}}>
|
||||
<Form.Item name='id' hidden>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name='username' label='username'>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name='description' label='description'>
|
||||
<Input.TextArea rows={4} />
|
||||
</Form.Item>
|
||||
<Form.Item label=' ' colon={false}>
|
||||
<Button type='primary' htmlType='submit'>
|
||||
Submit
|
||||
</Button>
|
||||
<Button className='ml-2' htmlType='reset' onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
export const List = () => {
|
||||
const navicate = useNavigate();
|
||||
const userStore = useUserStore(
|
||||
useShallow((state) => {
|
||||
return {
|
||||
setFormData: state.setFormData,
|
||||
setShowEdit: state.setShowEdit,
|
||||
list: state.list,
|
||||
deleteData: state.deleteData,
|
||||
getList: state.getList,
|
||||
loading: state.loading,
|
||||
updateData: state.updateData,
|
||||
formData: state.formData,
|
||||
};
|
||||
}),
|
||||
);
|
||||
const [codeEdit, setCodeEdit] = useState(false);
|
||||
const [code, setCode] = useState('');
|
||||
useEffect(() => {
|
||||
userStore.getList();
|
||||
}, []);
|
||||
|
||||
const onAdd = () => {
|
||||
userStore.setFormData({});
|
||||
userStore.setShowEdit(true);
|
||||
};
|
||||
return (
|
||||
<div className='w-full h-full flex flex-col'>
|
||||
<div className='flex flex-grow overflow-hidden h-full'>
|
||||
<div className='flex-grow overflow-auto scrollbar bg-gray-100'>
|
||||
<div className='flex flex-wrap gap-x-10 gap-y-4 rounded pt-10 justify-center'>
|
||||
{userStore.list.length > 0 &&
|
||||
userStore.list.map((item) => {
|
||||
return (
|
||||
<Fragment key={item.id}>
|
||||
<div
|
||||
className='flex text-sm gap flex-col w-[400px] max-h-[400px] bg-white p-4 rounded-lg'
|
||||
key={item.id}
|
||||
onClick={() => {
|
||||
setCode(item.code);
|
||||
userStore.setFormData(item);
|
||||
setCodeEdit(true);
|
||||
}}>
|
||||
<div className='px-4 cursor-pointer'>
|
||||
<div
|
||||
className='font-bold'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
// message.success('copy code success');
|
||||
}}>
|
||||
{item.username || '-'}
|
||||
</div>
|
||||
<div className='font-light text-xs mt-2'>{item.description ? item.description : '-'}</div>
|
||||
</div>
|
||||
<div className='flex mt-2 '>
|
||||
<Button.Group>
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
userStore.setFormData(item);
|
||||
userStore.setShowEdit(true);
|
||||
setCodeEdit(false);
|
||||
e.stopPropagation();
|
||||
}}
|
||||
icon={<EditOutlined />}></Button>
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
userStore.deleteData(item.id);
|
||||
e.stopPropagation();
|
||||
}}
|
||||
icon={<DeleteOutlined />}></Button>
|
||||
</Button.Group>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
<CardBlank className='w-[400px]' />
|
||||
{userStore.list.length == 0 && (
|
||||
<div className='text-center' key={'no-data'}>
|
||||
No Data
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={clsx('bg-gray-100 border-l border-bg-slate-300 w-[600px] flex-shrink-0', !codeEdit && 'hidden', 'hidden')}>
|
||||
<div className='bg-white p-2'>
|
||||
<div className='mt-2 ml-2 flex gap-2'>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setCodeEdit(false);
|
||||
userStore.setFormData({});
|
||||
}}
|
||||
icon={<LeftOutlined />}></Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
console.log('save', userStore.formData);
|
||||
userStore.updateData({ ...userStore.formData, code });
|
||||
}}
|
||||
icon={<SaveOutlined />}></Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-[94%] p-2 rounded-2 shadow-sm'>
|
||||
<Input.TextArea
|
||||
value={code}
|
||||
onChange={(value) => {
|
||||
// setCode(value);
|
||||
}}
|
||||
className='h-full max-h-full scrollbar'
|
||||
style={{ overflow: 'auto' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FormModal />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
14
src/pages/user/index.tsx
Normal file
14
src/pages/user/index.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import { Navigate, Route, Routes } from 'react-router-dom';
|
||||
import { List } from './edit/List';
|
||||
import { Main } from './layouts';
|
||||
export const App = () => {
|
||||
return (
|
||||
<Routes>
|
||||
<Route element={<Main />}>
|
||||
<Route path='/' element={<Navigate to='/user/edit/list' />}></Route>
|
||||
<Route path='edit/list' element={<List />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
);
|
||||
};
|
||||
|
||||
46
src/pages/user/layouts/index.tsx
Normal file
46
src/pages/user/layouts/index.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import { Button } from 'antd';
|
||||
import { Outlet, useLocation } from 'react-router';
|
||||
import { useUserStore } from '../store';
|
||||
import { useEffect } from 'react';
|
||||
import { useShallow } from 'zustand/react/shallow';
|
||||
|
||||
export const Main = () => {
|
||||
const containerStore = useUserStore(
|
||||
useShallow((state) => {
|
||||
return {
|
||||
setFormData: state.setFormData,
|
||||
setShowEdit: state.setShowEdit,
|
||||
};
|
||||
}),
|
||||
);
|
||||
const location = useLocation();
|
||||
const isEdit = location.pathname.includes('edit/list');
|
||||
return (
|
||||
<div className='flex w-full h-full flex-col'>
|
||||
<div className='layout-menu'>
|
||||
User
|
||||
<Button
|
||||
className={!isEdit ? 'hidden' : 'hidden'}
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => {
|
||||
console.log('add');
|
||||
containerStore.setFormData({});
|
||||
containerStore.setShowEdit(true);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className='flex'
|
||||
style={{
|
||||
height: 'calc(100vh - 3rem)',
|
||||
}}>
|
||||
<div className='flex-grow overflow-hidden'>
|
||||
<div className='w-full h-full rounded-lg'>
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
69
src/pages/user/store/index.ts
Normal file
69
src/pages/user/store/index.ts
Normal file
@ -0,0 +1,69 @@
|
||||
import { create } from 'zustand';
|
||||
import { query } from '@/modules';
|
||||
import { message } from 'antd';
|
||||
type UserStore = {
|
||||
showEdit: boolean;
|
||||
setShowEdit: (showEdit: boolean) => void;
|
||||
formData: any;
|
||||
setFormData: (formData: any) => void;
|
||||
loading: boolean;
|
||||
setLoading: (loading: boolean) => void;
|
||||
list: any[];
|
||||
getList: () => Promise<void>;
|
||||
updateData: (data: any) => Promise<void>;
|
||||
deleteData: (id: string) => Promise<void>;
|
||||
};
|
||||
export const useUserStore = create<UserStore>((set, get) => {
|
||||
return {
|
||||
showEdit: false,
|
||||
setShowEdit: (showEdit) => set({ showEdit }),
|
||||
formData: {},
|
||||
setFormData: (formData) => set({ formData }),
|
||||
loading: false,
|
||||
setLoading: (loading) => set({ loading }),
|
||||
list: [],
|
||||
getList: async () => {
|
||||
set({ loading: true });
|
||||
|
||||
const res = await query.post({
|
||||
path: 'user',
|
||||
key: 'list',
|
||||
});
|
||||
set({ loading: false });
|
||||
if (res.code === 200) {
|
||||
set({ list: res.data });
|
||||
} else {
|
||||
message.error(res.msg || 'Request failed');
|
||||
}
|
||||
},
|
||||
updateData: async (data) => {
|
||||
const { getList } = get();
|
||||
const res = await query.post({
|
||||
path: 'user',
|
||||
key: 'update',
|
||||
data,
|
||||
});
|
||||
if (res.code === 200) {
|
||||
message.success('Success');
|
||||
set({ showEdit: false, formData: [] });
|
||||
getList();
|
||||
} else {
|
||||
message.error(res.msg || 'Request failed');
|
||||
}
|
||||
},
|
||||
deleteData: async (id) => {
|
||||
const { getList } = get();
|
||||
const res = await query.post({
|
||||
path: 'user',
|
||||
key: 'delete',
|
||||
id,
|
||||
});
|
||||
if (res.code === 200) {
|
||||
getList();
|
||||
message.success('Success');
|
||||
} else {
|
||||
message.error(res.msg || 'Request failed');
|
||||
}
|
||||
},
|
||||
};
|
||||
});
|
||||
2
theme
2
theme
@ -1 +1 @@
|
||||
Subproject commit 6f6d64b06574609f5b468f2011d2c21600261419
|
||||
Subproject commit 36f865b026b70cd8f90a44f4d3b5f9dced9709af
|
||||
Loading…
x
Reference in New Issue
Block a user