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 type { ActionType } from '@ant-design/pro-components';
import { PageContainer } 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 classNames from 'classnames';
import { isEmpty } from 'lodash';
import { useRef, useState } from 'react';
import request from 'umi-request';
import styles from './index.less';
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 actionRef = useRef<ActionType>();
const [isModalOpen, setIsModalOpen] = useState(false);
const [accountForm] = useState({
id: '',
Name: '',
Phone: '',
Role: '',
IsActive: true,
Password: '',
});
const [isModalAccountOpen, setIsModalAccountOpen] = useState(false);
const [roles, setRoles] = useState([]);
const [loading, setLoading] = useState(false);
const [accountModalName, setAccountModalName] = useState('新建账号');
const [form] = Form.useForm();
const [accountForm] = Form.useForm();
const layout = {
labelCol: { span: 4 },
wrapperCol: { span: 18 },
};
const showModal = () => {
getRole()
.then((res) => {
console.log(res);
if (!isEmpty(res)) {
setRoles(res);
setIsModalOpen(true);
setIsModalAccountOpen(true);
}
})
.catch((err) => {
......@@ -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 = () => {
setIsModalOpen(false);
setIsModalAccountOpen(false);
};
const handleModalCancel = () => {
form.resetFields();
setIsModalOpen(false);
accountForm.resetFields();
setIsModalAccountOpen(false);
};
const createdAccount = (values: any) => {
......@@ -125,10 +158,17 @@ const UserManage = () => {
});
};
const editAccountFinish = (values: any) => {
setLoading(true);
};
const onHandleClickAccountFinish = (values: any) => {
if (accountModalName === '添加账号') {
createdAccount(values);
}
if (accountModalName === '编辑账号') {
editAccountFinish(values);
}
};
const onHandleClickAccountChange = (values: any) => {
......@@ -163,7 +203,7 @@ const UserManage = () => {
<PageContainer>
<Modal
title={`${accountModalName}`}
open={isModalOpen}
open={isModalAccountOpen}
onOk={handleOk}
onCancel={handleModalCancel}
footer={null}
......@@ -171,12 +211,11 @@ const UserManage = () => {
>
<Form
{...layout}
form={form}
form={accountForm}
onFinish={onHandleClickAccountFinish}
onValuesChange={onHandleClickAccountChange}
labelAlign="right"
name="accountSetting"
initialValues={accountForm}
>
<Item
name={'Phone'}
......@@ -188,13 +227,15 @@ const UserManage = () => {
>
<Input />
</Item>
<Item
name={'Password'}
label="密码"
rules={[{ required: true, message: '请输入密码!' }, { validator: validatePassword }]}
>
<Input />
</Item>
{accountModalName === '添加账号' && (
<Item
name={'Password'}
label="密码"
rules={[{ required: true, message: '请输入密码!' }, { validator: validatePassword }]}
>
<Input />
</Item>
)}
<Item name={'Role'} label="角色" rules={[{ required: true, message: '请设置你的角色' }]}>
<Radio.Group>
{roles.map((item) => {
......@@ -237,12 +278,17 @@ const UserManage = () => {
cardBordered
request={async (params = {}, sort, filter) => {
const defaultParams = {
Name: '',
Name: null,
Enabled: null,
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"
pagination={{
......
......@@ -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