Commit 0bc59ceb authored by littleforest's avatar littleforest

feat: add Modal

parent 6ed561ee
.isActive {
display: inline-flex;
align-items: center;
justify-content: center;
}
.dot {
display: inline-block;
width: 6px;
height: 6px;
margin-right: 5px;
border-radius: 50%;
}
.green {
background-color: #52c41a;
}
.red {
background-color: #f5222d;
}
import { CreatedAccount, getRole, getUserMessage } from '@/services/chatGLM/api'; import {
CreatedAccount,
getRole,
getUserMessage,
postDelete,
postDeleteUser,
} from '@/services/chatGLM/api';
import { PlusOutlined } from '@ant-design/icons'; import { PlusOutlined } from '@ant-design/icons';
import type { ActionType } from '@ant-design/pro-components'; import type { ActionType } from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-components'; import { PageContainer } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components'; import { ProTable } from '@ant-design/pro-components';
import { Button, Col, Divider, Form, Input, Modal, Radio, Row, Switch, message } from 'antd'; import { Button, Col, Divider, Form, Input, Modal, Radio, Row, Switch, message } from 'antd';
import classNames from 'classnames';
import { isEmpty } from 'lodash'; import { isEmpty } from 'lodash';
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
import request from 'umi-request'; import styles from './index.less';
const { Item } = Form; const { Item } = Form;
const columns: any[] = [
{
title: '用户',
dataIndex: 'name',
ellipsis: true,
},
{
title: '用户账号',
dataIndex: 'username',
ellipsis: true,
},
{
title: '角色',
dataIndex: 'role',
hideInSearch: true,
ellipsis: true,
},
{
title: '账号状态',
dataIndex: 'iaActive',
hideInSearch: true,
},
{
title: '创建时间',
dataIndex: 'creationTime',
hideInSearch: true,
valueType: 'date',
},
{
title: '备注',
hideInSearch: true,
dataIndex: 'creationTime',
valueType: 'date',
},
{
title: '操作',
valueType: 'option',
key: 'option',
render: (text, record, _, action) => [
<a
key="editable"
onClick={() => {
action?.startEditable?.(record.id);
}}
>
编辑
</a>,
<a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
重置
</a>,
<a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
删除
</a>,
],
},
];
const UserManage = () => { const UserManage = () => {
const actionRef = useRef<ActionType>(); const actionRef = useRef<ActionType>();
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalAccountOpen, setIsModalAccountOpen] = useState(false);
const [accountForm] = useState({
id: '',
Name: '',
Phone: '',
Role: '',
IsActive: true,
Password: '',
});
const [roles, setRoles] = useState([]); const [roles, setRoles] = useState([]);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [accountModalName, setAccountModalName] = useState('新建账号'); const [accountModalName, setAccountModalName] = useState('新建账号');
const [form] = Form.useForm(); const [accountForm] = Form.useForm();
const layout = { const layout = {
labelCol: { span: 4 }, labelCol: { span: 4 },
wrapperCol: { span: 18 }, wrapperCol: { span: 18 },
}; };
const showModal = () => { const showModal = () => {
getRole() getRole()
.then((res) => { .then((res) => {
console.log(res);
if (!isEmpty(res)) { if (!isEmpty(res)) {
setRoles(res); setRoles(res);
setIsModalOpen(true); setIsModalAccountOpen(true);
} }
}) })
.catch((err) => { .catch((err) => {
...@@ -100,13 +43,103 @@ const UserManage = () => { ...@@ -100,13 +43,103 @@ const UserManage = () => {
}); });
}; };
const columns: any[] = [
{
title: '用户',
dataIndex: 'name',
ellipsis: true,
},
{
title: '用户账号',
dataIndex: 'userName',
ellipsis: true,
},
{
title: '角色',
dataIndex: 'roles',
hideInSearch: true,
ellipsis: true,
},
{
title: '账号状态',
dataIndex: 'iaActive',
hideInSearch: true,
render(text, record) {
return (
<div className={styles.isActive}>
<span className={classNames(styles.dot, record.isActive ? styles.green : styles.red)} />
<div>{record.isActive ? '启动' : '禁用'}</div>
</div>
);
},
},
{
title: '创建时间',
dataIndex: 'creationTime',
hideInSearch: true,
valueType: 'date',
},
{
title: '备注',
hideInSearch: true,
dataIndex: 'creationTime',
valueType: 'date',
},
{
title: '操作',
valueType: 'option',
key: 'option',
render: (text, record, _, action) => [
<a
key="editable"
onClick={() => {
setAccountModalName('编辑账号');
showModal();
const data = {
id: record.id,
Name: record.userName,
Phone: record.phoneNumber,
Role: record.roles,
isActive: record.isActive,
};
accountForm.setFieldsValue(data);
console.log(data);
}}
>
编辑
</a>,
<a
onClick={() => {
// postDeleteUser({
// id: record.id,
// Password:
// });
}}
key="reset"
>
重置
</a>,
<a
key="remove"
onClick={() => {
postDeleteUser({
id: record.id,
});
}}
>
删除
</a>,
],
},
];
const handleOk = () => { const handleOk = () => {
setIsModalOpen(false); setIsModalAccountOpen(false);
}; };
const handleModalCancel = () => { const handleModalCancel = () => {
form.resetFields(); accountForm.resetFields();
setIsModalOpen(false); setIsModalAccountOpen(false);
}; };
const createdAccount = (values: any) => { const createdAccount = (values: any) => {
...@@ -125,10 +158,17 @@ const UserManage = () => { ...@@ -125,10 +158,17 @@ const UserManage = () => {
}); });
}; };
const editAccountFinish = (values: any) => {
setLoading(true);
};
const onHandleClickAccountFinish = (values: any) => { const onHandleClickAccountFinish = (values: any) => {
if (accountModalName === '添加账号') { if (accountModalName === '添加账号') {
createdAccount(values); createdAccount(values);
} }
if (accountModalName === '编辑账号') {
editAccountFinish(values);
}
}; };
const onHandleClickAccountChange = (values: any) => { const onHandleClickAccountChange = (values: any) => {
...@@ -163,7 +203,7 @@ const UserManage = () => { ...@@ -163,7 +203,7 @@ const UserManage = () => {
<PageContainer> <PageContainer>
<Modal <Modal
title={`${accountModalName}`} title={`${accountModalName}`}
open={isModalOpen} open={isModalAccountOpen}
onOk={handleOk} onOk={handleOk}
onCancel={handleModalCancel} onCancel={handleModalCancel}
footer={null} footer={null}
...@@ -171,12 +211,11 @@ const UserManage = () => { ...@@ -171,12 +211,11 @@ const UserManage = () => {
> >
<Form <Form
{...layout} {...layout}
form={form} form={accountForm}
onFinish={onHandleClickAccountFinish} onFinish={onHandleClickAccountFinish}
onValuesChange={onHandleClickAccountChange} onValuesChange={onHandleClickAccountChange}
labelAlign="right" labelAlign="right"
name="accountSetting" name="accountSetting"
initialValues={accountForm}
> >
<Item <Item
name={'Phone'} name={'Phone'}
...@@ -188,13 +227,15 @@ const UserManage = () => { ...@@ -188,13 +227,15 @@ const UserManage = () => {
> >
<Input /> <Input />
</Item> </Item>
<Item {accountModalName === '添加账号' && (
name={'Password'} <Item
label="密码" name={'Password'}
rules={[{ required: true, message: '请输入密码!' }, { validator: validatePassword }]} label="密码"
> rules={[{ required: true, message: '请输入密码!' }, { validator: validatePassword }]}
<Input /> >
</Item> <Input />
</Item>
)}
<Item name={'Role'} label="角色" rules={[{ required: true, message: '请设置你的角色' }]}> <Item name={'Role'} label="角色" rules={[{ required: true, message: '请设置你的角色' }]}>
<Radio.Group> <Radio.Group>
{roles.map((item) => { {roles.map((item) => {
...@@ -237,12 +278,17 @@ const UserManage = () => { ...@@ -237,12 +278,17 @@ const UserManage = () => {
cardBordered cardBordered
request={async (params = {}, sort, filter) => { request={async (params = {}, sort, filter) => {
const defaultParams = { const defaultParams = {
Name: '', Name: null,
Enabled: null, Enabled: null,
PageSize: 10, PageSize: 10,
PageIndex: 1, PageIndex: 0,
};
const response = await getUserMessage(defaultParams);
return {
data: response.items,
total: response.totalCount,
success: true,
}; };
return getUserMessage(defaultParams);
}} }}
rowKey="id" rowKey="id"
pagination={{ pagination={{
......
...@@ -69,3 +69,16 @@ export const getUserMessage = (params?: any): Promise<string> => { ...@@ -69,3 +69,16 @@ export const getUserMessage = (params?: any): Promise<string> => {
}); });
} }
export const postDeleteUser = (params?: any): Promise<string>=> {
return request('https://glm-mangement-api.baibaomen.com/User/delete', {
method: 'POST',
data: params
})
};
export const postResetUser = (params?: any): Promise<string> => {
return request('https://glm-mangement-api.baibaomen.com/User/delete', {
method: 'POST',
data: params
})
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment