Merge pull request 'dev' (#1) from dev into master
Reviewed-on: https://git.landaiqing.space/Schisandra-Cloud-Storage/schisandra-cloud-storage-front-umi/pulls/1
This commit is contained in:
75
.umirc.ts
75
.umirc.ts
@@ -1,5 +1,4 @@
|
|||||||
import { defineConfig } from '@umijs/max';
|
import { defineConfig } from '@umijs/max';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
antd: {},
|
antd: {},
|
||||||
access: {},
|
access: {},
|
||||||
@@ -12,7 +11,6 @@ export default defineConfig({
|
|||||||
title: '五味子云存储',
|
title: '五味子云存储',
|
||||||
},
|
},
|
||||||
base: '/',
|
base: '/',
|
||||||
browserslist: ['> 1%', 'last 2 versions'],
|
|
||||||
routes: [
|
routes: [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
@@ -38,6 +36,79 @@ export default defineConfig({
|
|||||||
path: '/table',
|
path: '/table',
|
||||||
component: './Table',
|
component: './Table',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: ' 用户配置',
|
||||||
|
path: '/user',
|
||||||
|
// redirect: "/users",
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
name: ' 用户表',
|
||||||
|
path: '/user/users',
|
||||||
|
component: "./Users",
|
||||||
|
layout:true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: ' 角色表',
|
||||||
|
path: '/user/role',
|
||||||
|
component: "./Role",
|
||||||
|
layout:true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: ' 权限表',
|
||||||
|
path: '/user/permission',
|
||||||
|
component: "./Permission",
|
||||||
|
layout:true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: ' 社会用户表',
|
||||||
|
path: '/user/social',
|
||||||
|
component: "./Social",
|
||||||
|
layout:true,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: ' 存储配置',
|
||||||
|
path: '/storage',
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
name: ' 阿里云配置表',
|
||||||
|
path: '/storage/ali',
|
||||||
|
component: "./Ali",
|
||||||
|
layout:true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: ' minio配置表',
|
||||||
|
path: '/storage/minio',
|
||||||
|
component: "./Minio",
|
||||||
|
layout:true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: ' 七牛云配置表',
|
||||||
|
path: '/storage/qiniu',
|
||||||
|
component: "./Qiniu",
|
||||||
|
layout:true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: ' 腾讯云配置表',
|
||||||
|
path: '/storage/tencent',
|
||||||
|
component: "./Tencent",
|
||||||
|
layout:true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: ' 又拍云配置表',
|
||||||
|
path: '/storage/up',
|
||||||
|
component: "./Up",
|
||||||
|
layout:true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: ' sftp配置表',
|
||||||
|
path: '/storage/sftp',
|
||||||
|
component: "./Sftp",
|
||||||
|
layout:true,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
],
|
],
|
||||||
npmClient: 'yarn',
|
npmClient: 'yarn',
|
||||||
});
|
});
|
||||||
|
|||||||
18612
package-lock.json
generated
Normal file
18612
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -14,7 +14,8 @@
|
|||||||
"@ant-design/icons": "^5.0.1",
|
"@ant-design/icons": "^5.0.1",
|
||||||
"@ant-design/pro-components": "^2.4.4",
|
"@ant-design/pro-components": "^2.4.4",
|
||||||
"@umijs/max": "^4.3.1",
|
"@umijs/max": "^4.3.1",
|
||||||
"antd": "^5.4.0"
|
"antd": "^5.4.0",
|
||||||
|
"yarn": "^1.22.22"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/react": "^18.0.33",
|
"@types/react": "^18.0.33",
|
||||||
|
|||||||
26
src/pages/Ali/components/CreateForm.tsx
Normal file
26
src/pages/Ali/components/CreateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import { Modal } from 'antd';
|
||||||
|
import React, { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
interface CreateFormProps {
|
||||||
|
modalVisible: boolean;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||||
|
const { modalVisible, onCancel } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
destroyOnClose
|
||||||
|
title="新建"
|
||||||
|
width={420}
|
||||||
|
open={modalVisible}
|
||||||
|
onCancel={() => onCancel()}
|
||||||
|
footer={null}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CreateForm;
|
||||||
26
src/pages/Ali/components/UpdateForm.tsx
Normal file
26
src/pages/Ali/components/UpdateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import { Modal } from 'antd';
|
||||||
|
import React, { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
interface CreateFormProps {
|
||||||
|
modalVisible: boolean;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||||
|
const { modalVisible, onCancel } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
destroyOnClose
|
||||||
|
title="新建"
|
||||||
|
width={420}
|
||||||
|
open={modalVisible}
|
||||||
|
onCancel={() => onCancel()}
|
||||||
|
footer={null}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CreateForm;
|
||||||
305
src/pages/Ali/index.tsx
Normal file
305
src/pages/Ali/index.tsx
Normal file
@@ -0,0 +1,305 @@
|
|||||||
|
import services from '@/services/demo';
|
||||||
|
import {
|
||||||
|
ActionType,
|
||||||
|
FooterToolbar,
|
||||||
|
PageContainer,
|
||||||
|
ProDescriptions,
|
||||||
|
ProDescriptionsItemProps,
|
||||||
|
ProTable,
|
||||||
|
} from '@ant-design/pro-components';
|
||||||
|
import { Button, Divider, Drawer, message } from 'antd';
|
||||||
|
import React, { useRef, useState } from 'react';
|
||||||
|
import CreateForm from './components/CreateForm';
|
||||||
|
//import UpdateForm, { FormValueType } from './components/UpdateForm';
|
||||||
|
|
||||||
|
const { addUser, queryUserList, deleteUser, modifyUser } =
|
||||||
|
services.UserController;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 添加节点
|
||||||
|
* @param fields
|
||||||
|
*/
|
||||||
|
const handleAdd = async (fields: API.UserInfo) => {
|
||||||
|
const hide = message.loading('正在添加');
|
||||||
|
try {
|
||||||
|
await addUser({ ...fields });
|
||||||
|
hide();
|
||||||
|
message.success('添加成功');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('添加失败请重试！');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新节点
|
||||||
|
* @param fields
|
||||||
|
*/
|
||||||
|
const handleUpdate = async (fields: FormValueType) => {
|
||||||
|
const hide = message.loading('正在配置');
|
||||||
|
try {
|
||||||
|
await modifyUser(
|
||||||
|
{
|
||||||
|
userId: fields.id || '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: fields.name || '',
|
||||||
|
nickName: fields.nickName || '',
|
||||||
|
email: fields.email || '',
|
||||||
|
},
|
||||||
|
);
|
||||||
|
hide();
|
||||||
|
|
||||||
|
message.success('编辑成功');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('编辑失败请重试！');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除节点
|
||||||
|
* @param selectedRows
|
||||||
|
*/
|
||||||
|
const handleRemove = async (selectedRows: API.UserInfo[]) => {
|
||||||
|
const hide = message.loading('正在删除');
|
||||||
|
if (!selectedRows) return true;
|
||||||
|
try {
|
||||||
|
await deleteUser({
|
||||||
|
userId: selectedRows.find((row) => row.id)?.id || '',
|
||||||
|
});
|
||||||
|
hide();
|
||||||
|
message.success('删除成功，即将刷新');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('删除失败，请重试');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const User: React.FC<unknown> = () => {
|
||||||
|
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
|
||||||
|
const [updateModalVisible, handleUpdateModalVisible] =
|
||||||
|
useState<boolean>(false);
|
||||||
|
const [stepFormValues, setStepFormValues] = useState({});
|
||||||
|
const actionRef = useRef<ActionType>();
|
||||||
|
const [row, setRow] = useState<API.UserInfo>();
|
||||||
|
const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
|
||||||
|
const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
|
||||||
|
{
|
||||||
|
title: '用户id',
|
||||||
|
dataIndex: 'user_id',
|
||||||
|
tip: '用户id是唯一的 key',
|
||||||
|
formItemProps: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '用户id为必填项',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'OSS地址',
|
||||||
|
dataIndex: 'endpoint',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'access_key_id',
|
||||||
|
dataIndex: 'AccessKey ID',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'access_key_secret',
|
||||||
|
dataIndex: 'AccessKey Secret',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'security_token',
|
||||||
|
dataIndex: 'security Token',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Bucket名称',
|
||||||
|
dataIndex: 'bucket_name',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '数据存储路径',
|
||||||
|
dataIndex: 'base_path',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '用户代理',
|
||||||
|
dataIndex: 'user_agent',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '失败后最大重试次数',
|
||||||
|
dataIndex: 'max_error_retry',
|
||||||
|
default: '3',
|
||||||
|
tip: '请求失败后最大的重试次数。默认3次。',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '注册时间',
|
||||||
|
dataIndex: 'create_time',
|
||||||
|
valueType: 'dateTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'option',
|
||||||
|
valueType: 'option',
|
||||||
|
render: (_, record) => (
|
||||||
|
<>
|
||||||
|
<a
|
||||||
|
onClick={() => {
|
||||||
|
handleUpdateModalVisible(true);
|
||||||
|
setStepFormValues(record);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</a>
|
||||||
|
<Divider type="vertical" />
|
||||||
|
<a href="">删除</a>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageContainer
|
||||||
|
header={{
|
||||||
|
title: '阿里云存储对象配置表',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ProTable<API.UserInfo>
|
||||||
|
headerTitle="阿里云配置表格"
|
||||||
|
actionRef={actionRef}
|
||||||
|
rowKey="id"
|
||||||
|
search={{
|
||||||
|
labelWidth: 120,
|
||||||
|
}}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Button
|
||||||
|
key="1"
|
||||||
|
type="primary"
|
||||||
|
onClick={() => handleModalVisible(true)}
|
||||||
|
>
|
||||||
|
新建
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
request={async (params, sorter, filter) => {
|
||||||
|
const { data, success } = await queryUserList({
|
||||||
|
...params,
|
||||||
|
// FIXME: remove @ts-ignore
|
||||||
|
// @ts-ignore
|
||||||
|
sorter,
|
||||||
|
filter,
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
data: data?.list || [],
|
||||||
|
success,
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
columns={columns}
|
||||||
|
rowSelection={{
|
||||||
|
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{selectedRowsState?.length > 0 && (
|
||||||
|
<FooterToolbar
|
||||||
|
extra={
|
||||||
|
<div>
|
||||||
|
已选择{' '}
|
||||||
|
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||||
|
项
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
onClick={async () => {
|
||||||
|
await handleRemove(selectedRowsState);
|
||||||
|
setSelectedRows([]);
|
||||||
|
actionRef.current?.reloadAndRest?.();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
批量删除
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
</FooterToolbar>
|
||||||
|
)}
|
||||||
|
<CreateForm
|
||||||
|
onCancel={() => handleModalVisible(false)}
|
||||||
|
modalVisible={createModalVisible}
|
||||||
|
>
|
||||||
|
<ProTable<API.UserInfo, API.UserInfo>
|
||||||
|
onSubmit={async (value) => {
|
||||||
|
const success = await handleAdd(value);
|
||||||
|
if (success) {
|
||||||
|
handleModalVisible(false);
|
||||||
|
if (actionRef.current) {
|
||||||
|
actionRef.current.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
rowKey="id"
|
||||||
|
type="form"
|
||||||
|
columns={columns}
|
||||||
|
/>
|
||||||
|
</CreateForm>
|
||||||
|
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||||
|
<UpdateForm
|
||||||
|
onSubmit={async (value) => {
|
||||||
|
const success = await handleUpdate(value);
|
||||||
|
if (success) {
|
||||||
|
handleUpdateModalVisible(false);
|
||||||
|
setStepFormValues({});
|
||||||
|
if (actionRef.current) {
|
||||||
|
actionRef.current.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onCancel={() => {
|
||||||
|
handleUpdateModalVisible(false);
|
||||||
|
setStepFormValues({});
|
||||||
|
}}
|
||||||
|
updateModalVisible={updateModalVisible}
|
||||||
|
values={stepFormValues}
|
||||||
|
/>
|
||||||
|
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<Drawer
|
||||||
|
width={600}
|
||||||
|
open={!!row}
|
||||||
|
onClose={() => {
|
||||||
|
setRow(undefined);
|
||||||
|
}}
|
||||||
|
closable={false}
|
||||||
|
>
|
||||||
|
{row?.name && (
|
||||||
|
<ProDescriptions<API.UserInfo>
|
||||||
|
column={2}
|
||||||
|
title={row?.name}
|
||||||
|
request={async () => ({
|
||||||
|
data: row || {},
|
||||||
|
})}
|
||||||
|
params={{
|
||||||
|
id: row?.name,
|
||||||
|
}}
|
||||||
|
columns={columns}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Drawer>
|
||||||
|
</PageContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default User;
|
||||||
26
src/pages/Minio/components/CreateForm.tsx
Normal file
26
src/pages/Minio/components/CreateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import { Modal } from 'antd';
|
||||||
|
import React, { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
interface CreateFormProps {
|
||||||
|
modalVisible: boolean;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||||
|
const { modalVisible, onCancel } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
destroyOnClose
|
||||||
|
title="新建"
|
||||||
|
width={420}
|
||||||
|
open={modalVisible}
|
||||||
|
onCancel={() => onCancel()}
|
||||||
|
footer={null}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CreateForm;
|
||||||
26
src/pages/Minio/components/UpdateForm.tsx
Normal file
26
src/pages/Minio/components/UpdateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import { Modal } from 'antd';
|
||||||
|
import React, { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
interface CreateFormProps {
|
||||||
|
modalVisible: boolean;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||||
|
const { modalVisible, onCancel } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
destroyOnClose
|
||||||
|
title="新建"
|
||||||
|
width={420}
|
||||||
|
open={modalVisible}
|
||||||
|
onCancel={() => onCancel()}
|
||||||
|
footer={null}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CreateForm;
|
||||||
298
src/pages/Minio/index.tsx
Normal file
298
src/pages/Minio/index.tsx
Normal file
@@ -0,0 +1,298 @@
|
|||||||
|
import services from '@/services/demo';
|
||||||
|
import {
|
||||||
|
ActionType,
|
||||||
|
FooterToolbar,
|
||||||
|
PageContainer,
|
||||||
|
ProDescriptions,
|
||||||
|
ProDescriptionsItemProps,
|
||||||
|
ProTable,
|
||||||
|
} from '@ant-design/pro-components';
|
||||||
|
import { Button, Divider, Drawer, message } from 'antd';
|
||||||
|
import React, { useRef, useState } from 'react';
|
||||||
|
import CreateForm from './components/CreateForm';
|
||||||
|
//import UpdateForm, { FormValueType } from './components/UpdateForm';
|
||||||
|
|
||||||
|
const { addUser, queryUserList, deleteUser, modifyUser } =
|
||||||
|
services.UserController;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 添加节点
|
||||||
|
* @param fields
|
||||||
|
*/
|
||||||
|
const handleAdd = async (fields: API.UserInfo) => {
|
||||||
|
const hide = message.loading('正在添加');
|
||||||
|
try {
|
||||||
|
await addUser({ ...fields });
|
||||||
|
hide();
|
||||||
|
message.success('添加成功');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('添加失败请重试！');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新节点
|
||||||
|
* @param fields
|
||||||
|
*/
|
||||||
|
const handleUpdate = async (fields: FormValueType) => {
|
||||||
|
const hide = message.loading('正在配置');
|
||||||
|
try {
|
||||||
|
await modifyUser(
|
||||||
|
{
|
||||||
|
userId: fields.id || '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: fields.name || '',
|
||||||
|
nickName: fields.nickName || '',
|
||||||
|
email: fields.email || '',
|
||||||
|
},
|
||||||
|
);
|
||||||
|
hide();
|
||||||
|
|
||||||
|
message.success('编辑成功');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('编辑失败请重试！');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除节点
|
||||||
|
* @param selectedRows
|
||||||
|
*/
|
||||||
|
const handleRemove = async (selectedRows: API.UserInfo[]) => {
|
||||||
|
const hide = message.loading('正在删除');
|
||||||
|
if (!selectedRows) return true;
|
||||||
|
try {
|
||||||
|
await deleteUser({
|
||||||
|
userId: selectedRows.find((row) => row.id)?.id || '',
|
||||||
|
});
|
||||||
|
hide();
|
||||||
|
message.success('删除成功，即将刷新');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('删除失败，请重试');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const User: React.FC<unknown> = () => {
|
||||||
|
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
|
||||||
|
const [updateModalVisible, handleUpdateModalVisible] =
|
||||||
|
useState<boolean>(false);
|
||||||
|
const [stepFormValues, setStepFormValues] = useState({});
|
||||||
|
const actionRef = useRef<ActionType>();
|
||||||
|
const [row, setRow] = useState<API.UserInfo>();
|
||||||
|
const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
|
||||||
|
const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
|
||||||
|
{
|
||||||
|
title: '用户id',
|
||||||
|
dataIndex: 'user_id',
|
||||||
|
tip: '用户id是唯一的 key',
|
||||||
|
formItemProps: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '用户id为必填项',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'OSS地址',
|
||||||
|
dataIndex: 'endpoint',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'access_key',
|
||||||
|
dataIndex: 'accessKey',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'secret_key',
|
||||||
|
dataIndex: 'secretKey',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Bucket名称',
|
||||||
|
dataIndex: 'bucketName',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '数据存储路径',
|
||||||
|
dataIndex: 'base_path',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'file_host',
|
||||||
|
dataIndex: 'file_host',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'download_host',
|
||||||
|
dataIndex: 'download_host',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '注册时间',
|
||||||
|
dataIndex: 'create_time',
|
||||||
|
valueType: 'dateTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'option',
|
||||||
|
valueType: 'option',
|
||||||
|
render: (_, record) => (
|
||||||
|
<>
|
||||||
|
<a
|
||||||
|
onClick={() => {
|
||||||
|
handleUpdateModalVisible(true);
|
||||||
|
setStepFormValues(record);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</a>
|
||||||
|
<Divider type="vertical" />
|
||||||
|
<a href="">删除</a>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageContainer
|
||||||
|
header={{
|
||||||
|
title: 'minio存储对象配置表',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ProTable<API.UserInfo>
|
||||||
|
headerTitle="minio配置表格"
|
||||||
|
actionRef={actionRef}
|
||||||
|
rowKey="id"
|
||||||
|
search={{
|
||||||
|
labelWidth: 120,
|
||||||
|
}}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Button
|
||||||
|
key="1"
|
||||||
|
type="primary"
|
||||||
|
onClick={() => handleModalVisible(true)}
|
||||||
|
>
|
||||||
|
新建
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
request={async (params, sorter, filter) => {
|
||||||
|
const { data, success } = await queryUserList({
|
||||||
|
...params,
|
||||||
|
// FIXME: remove @ts-ignore
|
||||||
|
// @ts-ignore
|
||||||
|
sorter,
|
||||||
|
filter,
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
data: data?.list || [],
|
||||||
|
success,
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
columns={columns}
|
||||||
|
rowSelection={{
|
||||||
|
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{selectedRowsState?.length > 0 && (
|
||||||
|
<FooterToolbar
|
||||||
|
extra={
|
||||||
|
<div>
|
||||||
|
已选择{' '}
|
||||||
|
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||||
|
项
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
onClick={async () => {
|
||||||
|
await handleRemove(selectedRowsState);
|
||||||
|
setSelectedRows([]);
|
||||||
|
actionRef.current?.reloadAndRest?.();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
批量删除
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
</FooterToolbar>
|
||||||
|
)}
|
||||||
|
<CreateForm
|
||||||
|
onCancel={() => handleModalVisible(false)}
|
||||||
|
modalVisible={createModalVisible}
|
||||||
|
>
|
||||||
|
<ProTable<API.UserInfo, API.UserInfo>
|
||||||
|
onSubmit={async (value) => {
|
||||||
|
const success = await handleAdd(value);
|
||||||
|
if (success) {
|
||||||
|
handleModalVisible(false);
|
||||||
|
if (actionRef.current) {
|
||||||
|
actionRef.current.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
rowKey="id"
|
||||||
|
type="form"
|
||||||
|
columns={columns}
|
||||||
|
/>
|
||||||
|
</CreateForm>
|
||||||
|
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||||
|
<UpdateForm
|
||||||
|
onSubmit={async (value) => {
|
||||||
|
const success = await handleUpdate(value);
|
||||||
|
if (success) {
|
||||||
|
handleUpdateModalVisible(false);
|
||||||
|
setStepFormValues({});
|
||||||
|
if (actionRef.current) {
|
||||||
|
actionRef.current.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onCancel={() => {
|
||||||
|
handleUpdateModalVisible(false);
|
||||||
|
setStepFormValues({});
|
||||||
|
}}
|
||||||
|
updateModalVisible={updateModalVisible}
|
||||||
|
values={stepFormValues}
|
||||||
|
/>
|
||||||
|
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<Drawer
|
||||||
|
width={600}
|
||||||
|
open={!!row}
|
||||||
|
onClose={() => {
|
||||||
|
setRow(undefined);
|
||||||
|
}}
|
||||||
|
closable={false}
|
||||||
|
>
|
||||||
|
{row?.name && (
|
||||||
|
<ProDescriptions<API.UserInfo>
|
||||||
|
column={2}
|
||||||
|
title={row?.name}
|
||||||
|
request={async () => ({
|
||||||
|
data: row || {},
|
||||||
|
})}
|
||||||
|
params={{
|
||||||
|
id: row?.name,
|
||||||
|
}}
|
||||||
|
columns={columns}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Drawer>
|
||||||
|
</PageContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default User;
|
||||||
26
src/pages/Permission/components/CreateForm.tsx
Normal file
26
src/pages/Permission/components/CreateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import { Modal } from 'antd';
|
||||||
|
import React, { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
interface CreateFormProps {
|
||||||
|
modalVisible: boolean;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||||
|
const { modalVisible, onCancel } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
destroyOnClose
|
||||||
|
title="新建"
|
||||||
|
width={420}
|
||||||
|
open={modalVisible}
|
||||||
|
onCancel={() => onCancel()}
|
||||||
|
footer={null}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CreateForm;
|
||||||
26
src/pages/Permission/components/UpdateForm.tsx
Normal file
26
src/pages/Permission/components/UpdateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import { Modal } from 'antd';
|
||||||
|
import React, { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
interface CreateFormProps {
|
||||||
|
modalVisible: boolean;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||||
|
const { modalVisible, onCancel } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
destroyOnClose
|
||||||
|
title="新建"
|
||||||
|
width={420}
|
||||||
|
open={modalVisible}
|
||||||
|
onCancel={() => onCancel()}
|
||||||
|
footer={null}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CreateForm;
|
||||||
290
src/pages/Permission/index.tsx
Normal file
290
src/pages/Permission/index.tsx
Normal file
@@ -0,0 +1,290 @@
|
|||||||
|
import services from '@/services/demo';
|
||||||
|
import {
|
||||||
|
ActionType,
|
||||||
|
FooterToolbar,
|
||||||
|
PageContainer,
|
||||||
|
ProDescriptions,
|
||||||
|
ProDescriptionsItemProps,
|
||||||
|
ProTable,
|
||||||
|
} from '@ant-design/pro-components';
|
||||||
|
import { Button, Divider, Drawer, message } from 'antd';
|
||||||
|
import React, { useRef, useState } from 'react';
|
||||||
|
import CreateForm from './components/CreateForm';
|
||||||
|
//import UpdateForm, { FormValueType } from './components/UpdateForm';
|
||||||
|
|
||||||
|
const { addUser, queryUserList, deleteUser, modifyUser } =
|
||||||
|
services.UserController;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 添加节点
|
||||||
|
* @param fields
|
||||||
|
*/
|
||||||
|
const handleAdd = async (fields: API.UserInfo) => {
|
||||||
|
const hide = message.loading('正在添加');
|
||||||
|
try {
|
||||||
|
await addUser({ ...fields });
|
||||||
|
hide();
|
||||||
|
message.success('添加成功');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('添加失败请重试！');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新节点
|
||||||
|
* @param fields
|
||||||
|
*/
|
||||||
|
const handleUpdate = async (fields: FormValueType) => {
|
||||||
|
const hide = message.loading('正在配置');
|
||||||
|
try {
|
||||||
|
await modifyUser(
|
||||||
|
{
|
||||||
|
userId: fields.id || '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: fields.name || '',
|
||||||
|
nickName: fields.nickName || '',
|
||||||
|
email: fields.email || '',
|
||||||
|
},
|
||||||
|
);
|
||||||
|
hide();
|
||||||
|
|
||||||
|
message.success('编辑成功');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('编辑失败请重试！');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除节点
|
||||||
|
* @param selectedRows
|
||||||
|
*/
|
||||||
|
const handleRemove = async (selectedRows: API.UserInfo[]) => {
|
||||||
|
const hide = message.loading('正在删除');
|
||||||
|
if (!selectedRows) return true;
|
||||||
|
try {
|
||||||
|
await deleteUser({
|
||||||
|
userId: selectedRows.find((row) => row.id)?.id || '',
|
||||||
|
});
|
||||||
|
hide();
|
||||||
|
message.success('删除成功，即将刷新');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('删除失败，请重试');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const User: React.FC<unknown> = () => {
|
||||||
|
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
|
||||||
|
const [updateModalVisible, handleUpdateModalVisible] =
|
||||||
|
useState<boolean>(false);
|
||||||
|
const [stepFormValues, setStepFormValues] = useState({});
|
||||||
|
const actionRef = useRef<ActionType>();
|
||||||
|
const [row, setRow] = useState<API.UserInfo>();
|
||||||
|
const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
|
||||||
|
const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
|
||||||
|
{
|
||||||
|
title: '权限名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
formItemProps: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '名称为必填项',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '权限关键字',
|
||||||
|
dataIndex: 'permission_key',
|
||||||
|
tip: '权限关键字是唯一的 key',
|
||||||
|
formItemProps: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '权限关键字为必填项',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '路径',
|
||||||
|
dataIndex: 'path',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '类型',
|
||||||
|
dataIndex: 'phone',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '注册时间',
|
||||||
|
dataIndex: 'create_time',
|
||||||
|
valueType: 'dateTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '上次更新',
|
||||||
|
dataIndex: 'update_time',
|
||||||
|
valueType: 'dateTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'option',
|
||||||
|
valueType: 'option',
|
||||||
|
render: (_, record) => (
|
||||||
|
<>
|
||||||
|
<a
|
||||||
|
onClick={() => {
|
||||||
|
handleUpdateModalVisible(true);
|
||||||
|
setStepFormValues(record);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</a>
|
||||||
|
<Divider type="vertical" />
|
||||||
|
<a href="">删除</a>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageContainer
|
||||||
|
header={{
|
||||||
|
title: '权限表',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ProTable<API.UserInfo>
|
||||||
|
headerTitle="权限表格"
|
||||||
|
actionRef={actionRef}
|
||||||
|
rowKey="id"
|
||||||
|
search={{
|
||||||
|
labelWidth: 120,
|
||||||
|
}}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Button
|
||||||
|
key="1"
|
||||||
|
type="primary"
|
||||||
|
onClick={() => handleModalVisible(true)}
|
||||||
|
>
|
||||||
|
新建
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
request={async (params, sorter, filter) => {
|
||||||
|
const { data, success } = await queryUserList({
|
||||||
|
...params,
|
||||||
|
// FIXME: remove @ts-ignore
|
||||||
|
// @ts-ignore
|
||||||
|
sorter,
|
||||||
|
filter,
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
data: data?.list || [],
|
||||||
|
success,
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
columns={columns}
|
||||||
|
rowSelection={{
|
||||||
|
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{selectedRowsState?.length > 0 && (
|
||||||
|
<FooterToolbar
|
||||||
|
extra={
|
||||||
|
<div>
|
||||||
|
已选择{' '}
|
||||||
|
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||||
|
项
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
onClick={async () => {
|
||||||
|
await handleRemove(selectedRowsState);
|
||||||
|
setSelectedRows([]);
|
||||||
|
actionRef.current?.reloadAndRest?.();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
批量删除
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
</FooterToolbar>
|
||||||
|
)}
|
||||||
|
<CreateForm
|
||||||
|
onCancel={() => handleModalVisible(false)}
|
||||||
|
modalVisible={createModalVisible}
|
||||||
|
>
|
||||||
|
<ProTable<API.UserInfo, API.UserInfo>
|
||||||
|
onSubmit={async (value) => {
|
||||||
|
const success = await handleAdd(value);
|
||||||
|
if (success) {
|
||||||
|
handleModalVisible(false);
|
||||||
|
if (actionRef.current) {
|
||||||
|
actionRef.current.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
rowKey="id"
|
||||||
|
type="form"
|
||||||
|
columns={columns}
|
||||||
|
/>
|
||||||
|
</CreateForm>
|
||||||
|
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||||
|
<UpdateForm
|
||||||
|
onSubmit={async (value) => {
|
||||||
|
const success = await handleUpdate(value);
|
||||||
|
if (success) {
|
||||||
|
handleUpdateModalVisible(false);
|
||||||
|
setStepFormValues({});
|
||||||
|
if (actionRef.current) {
|
||||||
|
actionRef.current.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onCancel={() => {
|
||||||
|
handleUpdateModalVisible(false);
|
||||||
|
setStepFormValues({});
|
||||||
|
}}
|
||||||
|
updateModalVisible={updateModalVisible}
|
||||||
|
values={stepFormValues}
|
||||||
|
/>
|
||||||
|
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<Drawer
|
||||||
|
width={600}
|
||||||
|
open={!!row}
|
||||||
|
onClose={() => {
|
||||||
|
setRow(undefined);
|
||||||
|
}}
|
||||||
|
closable={false}
|
||||||
|
>
|
||||||
|
{row?.name && (
|
||||||
|
<ProDescriptions<API.UserInfo>
|
||||||
|
column={2}
|
||||||
|
title={row?.name}
|
||||||
|
request={async () => ({
|
||||||
|
data: row || {},
|
||||||
|
})}
|
||||||
|
params={{
|
||||||
|
id: row?.name,
|
||||||
|
}}
|
||||||
|
columns={columns}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Drawer>
|
||||||
|
</PageContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default User;
|
||||||
26
src/pages/Qiniu/components/CreateForm.tsx
Normal file
26
src/pages/Qiniu/components/CreateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import { Modal } from 'antd';
|
||||||
|
import React, { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
interface CreateFormProps {
|
||||||
|
modalVisible: boolean;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||||
|
const { modalVisible, onCancel } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
destroyOnClose
|
||||||
|
title="新建"
|
||||||
|
width={420}
|
||||||
|
open={modalVisible}
|
||||||
|
onCancel={() => onCancel()}
|
||||||
|
footer={null}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CreateForm;
|
||||||
26
src/pages/Qiniu/components/UpdateForm.tsx
Normal file
26
src/pages/Qiniu/components/UpdateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import { Modal } from 'antd';
|
||||||
|
import React, { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
interface CreateFormProps {
|
||||||
|
modalVisible: boolean;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||||
|
const { modalVisible, onCancel } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
destroyOnClose
|
||||||
|
title="新建"
|
||||||
|
width={420}
|
||||||
|
open={modalVisible}
|
||||||
|
onCancel={() => onCancel()}
|
||||||
|
footer={null}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CreateForm;
|
||||||
307
src/pages/Qiniu/index.tsx
Normal file
307
src/pages/Qiniu/index.tsx
Normal file
@@ -0,0 +1,307 @@
|
|||||||
|
import services from '@/services/demo';
|
||||||
|
import {
|
||||||
|
ActionType,
|
||||||
|
FooterToolbar,
|
||||||
|
PageContainer,
|
||||||
|
ProDescriptions,
|
||||||
|
ProDescriptionsItemProps,
|
||||||
|
ProTable,
|
||||||
|
} from '@ant-design/pro-components';
|
||||||
|
import { Button, Divider, Drawer, message } from 'antd';
|
||||||
|
import React, { useRef, useState } from 'react';
|
||||||
|
import CreateForm from './components/CreateForm';
|
||||||
|
//import UpdateForm, { FormValueType } from './components/UpdateForm';
|
||||||
|
|
||||||
|
const { addUser, queryUserList, deleteUser, modifyUser } =
|
||||||
|
services.UserController;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 添加节点
|
||||||
|
* @param fields
|
||||||
|
*/
|
||||||
|
const handleAdd = async (fields: API.UserInfo) => {
|
||||||
|
const hide = message.loading('正在添加');
|
||||||
|
try {
|
||||||
|
await addUser({ ...fields });
|
||||||
|
hide();
|
||||||
|
message.success('添加成功');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('添加失败请重试！');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新节点
|
||||||
|
* @param fields
|
||||||
|
*/
|
||||||
|
const handleUpdate = async (fields: FormValueType) => {
|
||||||
|
const hide = message.loading('正在配置');
|
||||||
|
try {
|
||||||
|
await modifyUser(
|
||||||
|
{
|
||||||
|
userId: fields.id || '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: fields.name || '',
|
||||||
|
nickName: fields.nickName || '',
|
||||||
|
email: fields.email || '',
|
||||||
|
},
|
||||||
|
);
|
||||||
|
hide();
|
||||||
|
|
||||||
|
message.success('编辑成功');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('编辑失败请重试！');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除节点
|
||||||
|
* @param selectedRows
|
||||||
|
*/
|
||||||
|
const handleRemove = async (selectedRows: API.UserInfo[]) => {
|
||||||
|
const hide = message.loading('正在删除');
|
||||||
|
if (!selectedRows) return true;
|
||||||
|
try {
|
||||||
|
await deleteUser({
|
||||||
|
userId: selectedRows.find((row) => row.id)?.id || '',
|
||||||
|
});
|
||||||
|
hide();
|
||||||
|
message.success('删除成功，即将刷新');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('删除失败，请重试');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const User: React.FC<unknown> = () => {
|
||||||
|
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
|
||||||
|
const [updateModalVisible, handleUpdateModalVisible] =
|
||||||
|
useState<boolean>(false);
|
||||||
|
const [stepFormValues, setStepFormValues] = useState({});
|
||||||
|
const actionRef = useRef<ActionType>();
|
||||||
|
const [row, setRow] = useState<API.UserInfo>();
|
||||||
|
const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
|
||||||
|
const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
|
||||||
|
{
|
||||||
|
title: '用户id',
|
||||||
|
dataIndex: 'user_id',
|
||||||
|
tip: '用户id是唯一的 key',
|
||||||
|
formItemProps: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '用户id为必填项',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'OSS地址',
|
||||||
|
dataIndex: 'endpoint',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'access_key',
|
||||||
|
dataIndex: 'access_key',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'secret_key',
|
||||||
|
dataIndex: 'secret_key',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Bucket名称',
|
||||||
|
dataIndex: 'bucket_name',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '数据存储路径',
|
||||||
|
dataIndex: 'base_path',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '使用的Region',
|
||||||
|
dataIndex: 'region',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '是否使用https',
|
||||||
|
tip: '空间相关上传管理操作是否使用 https , 默认 是',
|
||||||
|
default: '1',
|
||||||
|
dataIndex: 'use_https_domains',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '是否使用代理加速上传',
|
||||||
|
tip: '空间相关上传管理操作是否使用代理加速上传，默认 是',
|
||||||
|
default: '1',
|
||||||
|
dataIndex: 'acc_up_host_first',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '注册时间',
|
||||||
|
dataIndex: 'create_time',
|
||||||
|
valueType: 'dateTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'option',
|
||||||
|
valueType: 'option',
|
||||||
|
render: (_, record) => (
|
||||||
|
<>
|
||||||
|
<a
|
||||||
|
onClick={() => {
|
||||||
|
handleUpdateModalVisible(true);
|
||||||
|
setStepFormValues(record);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</a>
|
||||||
|
<Divider type="vertical" />
|
||||||
|
<a href="">删除</a>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageContainer
|
||||||
|
header={{
|
||||||
|
title: '七牛云存储对象配置表',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ProTable<API.UserInfo>
|
||||||
|
headerTitle="七牛云配置表格"
|
||||||
|
actionRef={actionRef}
|
||||||
|
rowKey="id"
|
||||||
|
search={{
|
||||||
|
labelWidth: 120,
|
||||||
|
}}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Button
|
||||||
|
key="1"
|
||||||
|
type="primary"
|
||||||
|
onClick={() => handleModalVisible(true)}
|
||||||
|
>
|
||||||
|
新建
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
request={async (params, sorter, filter) => {
|
||||||
|
const { data, success } = await queryUserList({
|
||||||
|
...params,
|
||||||
|
// FIXME: remove @ts-ignore
|
||||||
|
// @ts-ignore
|
||||||
|
sorter,
|
||||||
|
filter,
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
data: data?.list || [],
|
||||||
|
success,
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
columns={columns}
|
||||||
|
rowSelection={{
|
||||||
|
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{selectedRowsState?.length > 0 && (
|
||||||
|
<FooterToolbar
|
||||||
|
extra={
|
||||||
|
<div>
|
||||||
|
已选择{' '}
|
||||||
|
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||||
|
项
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
onClick={async () => {
|
||||||
|
await handleRemove(selectedRowsState);
|
||||||
|
setSelectedRows([]);
|
||||||
|
actionRef.current?.reloadAndRest?.();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
批量删除
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
</FooterToolbar>
|
||||||
|
)}
|
||||||
|
<CreateForm
|
||||||
|
onCancel={() => handleModalVisible(false)}
|
||||||
|
modalVisible={createModalVisible}
|
||||||
|
>
|
||||||
|
<ProTable<API.UserInfo, API.UserInfo>
|
||||||
|
onSubmit={async (value) => {
|
||||||
|
const success = await handleAdd(value);
|
||||||
|
if (success) {
|
||||||
|
handleModalVisible(false);
|
||||||
|
if (actionRef.current) {
|
||||||
|
actionRef.current.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
rowKey="id"
|
||||||
|
type="form"
|
||||||
|
columns={columns}
|
||||||
|
/>
|
||||||
|
</CreateForm>
|
||||||
|
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||||
|
<UpdateForm
|
||||||
|
onSubmit={async (value) => {
|
||||||
|
const success = await handleUpdate(value);
|
||||||
|
if (success) {
|
||||||
|
handleUpdateModalVisible(false);
|
||||||
|
setStepFormValues({});
|
||||||
|
if (actionRef.current) {
|
||||||
|
actionRef.current.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onCancel={() => {
|
||||||
|
handleUpdateModalVisible(false);
|
||||||
|
setStepFormValues({});
|
||||||
|
}}
|
||||||
|
updateModalVisible={updateModalVisible}
|
||||||
|
values={stepFormValues}
|
||||||
|
/>
|
||||||
|
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<Drawer
|
||||||
|
width={600}
|
||||||
|
open={!!row}
|
||||||
|
onClose={() => {
|
||||||
|
setRow(undefined);
|
||||||
|
}}
|
||||||
|
closable={false}
|
||||||
|
>
|
||||||
|
{row?.name && (
|
||||||
|
<ProDescriptions<API.UserInfo>
|
||||||
|
column={2}
|
||||||
|
title={row?.name}
|
||||||
|
request={async () => ({
|
||||||
|
data: row || {},
|
||||||
|
})}
|
||||||
|
params={{
|
||||||
|
id: row?.name,
|
||||||
|
}}
|
||||||
|
columns={columns}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Drawer>
|
||||||
|
</PageContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default User;
|
||||||
26
src/pages/Role/components/CreateForm.tsx
Normal file
26
src/pages/Role/components/CreateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import { Modal } from 'antd';
|
||||||
|
import React, { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
interface CreateFormProps {
|
||||||
|
modalVisible: boolean;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||||
|
const { modalVisible, onCancel } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
destroyOnClose
|
||||||
|
title="新建"
|
||||||
|
width={420}
|
||||||
|
open={modalVisible}
|
||||||
|
onCancel={() => onCancel()}
|
||||||
|
footer={null}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CreateForm;
|
||||||
26
src/pages/Role/components/UpdateForm.tsx
Normal file
26
src/pages/Role/components/UpdateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import { Modal } from 'antd';
|
||||||
|
import React, { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
interface CreateFormProps {
|
||||||
|
modalVisible: boolean;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||||
|
const { modalVisible, onCancel } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
destroyOnClose
|
||||||
|
title="新建"
|
||||||
|
width={420}
|
||||||
|
open={modalVisible}
|
||||||
|
onCancel={() => onCancel()}
|
||||||
|
footer={null}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CreateForm;
|
||||||
277
src/pages/Role/index.tsx
Normal file
277
src/pages/Role/index.tsx
Normal file
@@ -0,0 +1,277 @@
|
|||||||
|
import services from '@/services/demo';
|
||||||
|
import {
|
||||||
|
ActionType,
|
||||||
|
FooterToolbar,
|
||||||
|
PageContainer,
|
||||||
|
ProDescriptions,
|
||||||
|
ProDescriptionsItemProps,
|
||||||
|
ProTable,
|
||||||
|
} from '@ant-design/pro-components';
|
||||||
|
import { Button, Divider, Drawer, message } from 'antd';
|
||||||
|
import React, { useRef, useState } from 'react';
|
||||||
|
import CreateForm from './components/CreateForm';
|
||||||
|
//import UpdateForm, { FormValueType } from './components/UpdateForm';
|
||||||
|
|
||||||
|
const { addUser, queryUserList, deleteUser, modifyUser } =
|
||||||
|
services.UserController;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 添加节点
|
||||||
|
* @param fields
|
||||||
|
*/
|
||||||
|
const handleAdd = async (fields: API.UserInfo) => {
|
||||||
|
const hide = message.loading('正在添加');
|
||||||
|
try {
|
||||||
|
await addUser({ ...fields });
|
||||||
|
hide();
|
||||||
|
message.success('添加成功');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('添加失败请重试！');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新节点
|
||||||
|
* @param fields
|
||||||
|
*/
|
||||||
|
const handleUpdate = async (fields: FormValueType) => {
|
||||||
|
const hide = message.loading('正在配置');
|
||||||
|
try {
|
||||||
|
await modifyUser(
|
||||||
|
{
|
||||||
|
userId: fields.id || '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: fields.name || '',
|
||||||
|
nickName: fields.nickName || '',
|
||||||
|
email: fields.email || '',
|
||||||
|
},
|
||||||
|
);
|
||||||
|
hide();
|
||||||
|
|
||||||
|
message.success('编辑成功');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('编辑失败请重试！');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除节点
|
||||||
|
* @param selectedRows
|
||||||
|
*/
|
||||||
|
const handleRemove = async (selectedRows: API.UserInfo[]) => {
|
||||||
|
const hide = message.loading('正在删除');
|
||||||
|
if (!selectedRows) return true;
|
||||||
|
try {
|
||||||
|
await deleteUser({
|
||||||
|
userId: selectedRows.find((row) => row.id)?.id || '',
|
||||||
|
});
|
||||||
|
hide();
|
||||||
|
message.success('删除成功，即将刷新');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('删除失败，请重试');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const User: React.FC<unknown> = () => {
|
||||||
|
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
|
||||||
|
const [updateModalVisible, handleUpdateModalVisible] =
|
||||||
|
useState<boolean>(false);
|
||||||
|
const [stepFormValues, setStepFormValues] = useState({});
|
||||||
|
const actionRef = useRef<ActionType>();
|
||||||
|
const [row, setRow] = useState<API.UserInfo>();
|
||||||
|
const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
|
||||||
|
const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
|
||||||
|
{
|
||||||
|
title: '角色关键字',
|
||||||
|
dataIndex: 'role_key',
|
||||||
|
tip: '角色关键字是唯一的 key',
|
||||||
|
valueType: 'text',
|
||||||
|
formItemProps: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '角色关键字为必填项',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '角色名称',
|
||||||
|
dataIndex: 'role_name',
|
||||||
|
|
||||||
|
formItemProps: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '角色名称为必填项',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '注册时间',
|
||||||
|
dataIndex: 'create_time',
|
||||||
|
valueType: 'dateTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'option',
|
||||||
|
valueType: 'option',
|
||||||
|
render: (_, record) => (
|
||||||
|
<>
|
||||||
|
<a
|
||||||
|
onClick={() => {
|
||||||
|
handleUpdateModalVisible(true);
|
||||||
|
setStepFormValues(record);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</a>
|
||||||
|
<Divider type="vertical" />
|
||||||
|
<a href="">删除</a>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageContainer
|
||||||
|
header={{
|
||||||
|
title: '角色表',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ProTable<API.UserInfo>
|
||||||
|
headerTitle="角色表格"
|
||||||
|
actionRef={actionRef}
|
||||||
|
rowKey="id"
|
||||||
|
search={{
|
||||||
|
labelWidth: 120,
|
||||||
|
}}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Button
|
||||||
|
key="1"
|
||||||
|
type="primary"
|
||||||
|
onClick={() => handleModalVisible(true)}
|
||||||
|
>
|
||||||
|
新建
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
request={async (params, sorter, filter) => {
|
||||||
|
const { data, success } = await queryUserList({
|
||||||
|
...params,
|
||||||
|
// FIXME: remove @ts-ignore
|
||||||
|
// @ts-ignore
|
||||||
|
sorter,
|
||||||
|
filter,
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
data: data?.list || [],
|
||||||
|
success,
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
columns={columns}
|
||||||
|
rowSelection={{
|
||||||
|
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{selectedRowsState?.length > 0 && (
|
||||||
|
<FooterToolbar
|
||||||
|
extra={
|
||||||
|
<div>
|
||||||
|
已选择{' '}
|
||||||
|
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||||
|
项
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
onClick={async () => {
|
||||||
|
await handleRemove(selectedRowsState);
|
||||||
|
setSelectedRows([]);
|
||||||
|
actionRef.current?.reloadAndRest?.();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
批量删除
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
</FooterToolbar>
|
||||||
|
)}
|
||||||
|
<CreateForm
|
||||||
|
onCancel={() => handleModalVisible(false)}
|
||||||
|
modalVisible={createModalVisible}
|
||||||
|
>
|
||||||
|
<ProTable<API.UserInfo, API.UserInfo>
|
||||||
|
onSubmit={async (value) => {
|
||||||
|
const success = await handleAdd(value);
|
||||||
|
if (success) {
|
||||||
|
handleModalVisible(false);
|
||||||
|
if (actionRef.current) {
|
||||||
|
actionRef.current.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
rowKey="id"
|
||||||
|
type="form"
|
||||||
|
columns={columns}
|
||||||
|
/>
|
||||||
|
</CreateForm>
|
||||||
|
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||||
|
<UpdateForm
|
||||||
|
onSubmit={async (value) => {
|
||||||
|
const success = await handleUpdate(value);
|
||||||
|
if (success) {
|
||||||
|
handleUpdateModalVisible(false);
|
||||||
|
setStepFormValues({});
|
||||||
|
if (actionRef.current) {
|
||||||
|
actionRef.current.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onCancel={() => {
|
||||||
|
handleUpdateModalVisible(false);
|
||||||
|
setStepFormValues({});
|
||||||
|
}}
|
||||||
|
updateModalVisible={updateModalVisible}
|
||||||
|
values={stepFormValues}
|
||||||
|
/>
|
||||||
|
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<Drawer
|
||||||
|
width={600}
|
||||||
|
open={!!row}
|
||||||
|
onClose={() => {
|
||||||
|
setRow(undefined);
|
||||||
|
}}
|
||||||
|
closable={false}
|
||||||
|
>
|
||||||
|
{row?.name && (
|
||||||
|
<ProDescriptions<API.UserInfo>
|
||||||
|
column={2}
|
||||||
|
title={row?.name}
|
||||||
|
request={async () => ({
|
||||||
|
data: row || {},
|
||||||
|
})}
|
||||||
|
params={{
|
||||||
|
id: row?.name,
|
||||||
|
}}
|
||||||
|
columns={columns}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Drawer>
|
||||||
|
</PageContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default User;
|
||||||
26
src/pages/Sftp/components/CreateForm.tsx
Normal file
26
src/pages/Sftp/components/CreateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import { Modal } from 'antd';
|
||||||
|
import React, { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
interface CreateFormProps {
|
||||||
|
modalVisible: boolean;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||||
|
const { modalVisible, onCancel } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
destroyOnClose
|
||||||
|
title="新建"
|
||||||
|
width={420}
|
||||||
|
open={modalVisible}
|
||||||
|
onCancel={() => onCancel()}
|
||||||
|
footer={null}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CreateForm;
|
||||||
26
src/pages/Sftp/components/UpdateForm.tsx
Normal file
26
src/pages/Sftp/components/UpdateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import { Modal } from 'antd';
|
||||||
|
import React, { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
interface CreateFormProps {
|
||||||
|
modalVisible: boolean;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||||
|
const { modalVisible, onCancel } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
destroyOnClose
|
||||||
|
title="新建"
|
||||||
|
width={420}
|
||||||
|
open={modalVisible}
|
||||||
|
onCancel={() => onCancel()}
|
||||||
|
footer={null}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CreateForm;
|
||||||
309
src/pages/Sftp/index.tsx
Normal file
309
src/pages/Sftp/index.tsx
Normal file
@@ -0,0 +1,309 @@
|
|||||||
|
import services from '@/services/demo';
|
||||||
|
import {
|
||||||
|
ActionType,
|
||||||
|
FooterToolbar,
|
||||||
|
PageContainer,
|
||||||
|
ProDescriptions,
|
||||||
|
ProDescriptionsItemProps,
|
||||||
|
ProTable,
|
||||||
|
} from '@ant-design/pro-components';
|
||||||
|
import { Button, Divider, Drawer, message } from 'antd';
|
||||||
|
import React, { useRef, useState } from 'react';
|
||||||
|
import CreateForm from './components/CreateForm';
|
||||||
|
//import UpdateForm, { FormValueType } from './components/UpdateForm';
|
||||||
|
|
||||||
|
const { addUser, queryUserList, deleteUser, modifyUser } =
|
||||||
|
services.UserController;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 添加节点
|
||||||
|
* @param fields
|
||||||
|
*/
|
||||||
|
const handleAdd = async (fields: API.UserInfo) => {
|
||||||
|
const hide = message.loading('正在添加');
|
||||||
|
try {
|
||||||
|
await addUser({ ...fields });
|
||||||
|
hide();
|
||||||
|
message.success('添加成功');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('添加失败请重试！');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新节点
|
||||||
|
* @param fields
|
||||||
|
*/
|
||||||
|
const handleUpdate = async (fields: FormValueType) => {
|
||||||
|
const hide = message.loading('正在配置');
|
||||||
|
try {
|
||||||
|
await modifyUser(
|
||||||
|
{
|
||||||
|
userId: fields.id || '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: fields.name || '',
|
||||||
|
nickName: fields.nickName || '',
|
||||||
|
email: fields.email || '',
|
||||||
|
},
|
||||||
|
);
|
||||||
|
hide();
|
||||||
|
|
||||||
|
message.success('编辑成功');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('编辑失败请重试！');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除节点
|
||||||
|
* @param selectedRows
|
||||||
|
*/
|
||||||
|
const handleRemove = async (selectedRows: API.UserInfo[]) => {
|
||||||
|
const hide = message.loading('正在删除');
|
||||||
|
if (!selectedRows) return true;
|
||||||
|
try {
|
||||||
|
await deleteUser({
|
||||||
|
userId: selectedRows.find((row) => row.id)?.id || '',
|
||||||
|
});
|
||||||
|
hide();
|
||||||
|
message.success('删除成功，即将刷新');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('删除失败，请重试');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const User: React.FC<unknown> = () => {
|
||||||
|
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
|
||||||
|
const [updateModalVisible, handleUpdateModalVisible] =
|
||||||
|
useState<boolean>(false);
|
||||||
|
const [stepFormValues, setStepFormValues] = useState({});
|
||||||
|
const actionRef = useRef<ActionType>();
|
||||||
|
const [row, setRow] = useState<API.UserInfo>();
|
||||||
|
const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
|
||||||
|
const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
|
||||||
|
{
|
||||||
|
title: '用户id',
|
||||||
|
dataIndex: 'user_id',
|
||||||
|
tip: '用户id是唯一的 key',
|
||||||
|
formItemProps: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '用户id为必填项',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '密码',
|
||||||
|
dataIndex: 'password',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '用户名称',
|
||||||
|
dataIndex: 'user',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '主机',
|
||||||
|
dataIndex: 'host',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '端口',
|
||||||
|
dataIndex: 'port',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '数据存储路径',
|
||||||
|
dataIndex: 'basePath',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: '编码',
|
||||||
|
dataIndex: 'charset',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '连接超时时长，单位毫秒',
|
||||||
|
dataIndex: 'connection_timeout',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Socket连接超时时长，单位毫秒',
|
||||||
|
dataIndex: 'so_timeout',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '设置服务器语言',
|
||||||
|
dataIndex: 'server_language_code',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '注册时间',
|
||||||
|
dataIndex: 'create_time',
|
||||||
|
valueType: 'dateTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'option',
|
||||||
|
valueType: 'option',
|
||||||
|
render: (_, record) => (
|
||||||
|
<>
|
||||||
|
<a
|
||||||
|
onClick={() => {
|
||||||
|
handleUpdateModalVisible(true);
|
||||||
|
setStepFormValues(record);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</a>
|
||||||
|
<Divider type="vertical" />
|
||||||
|
<a href="">删除</a>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageContainer
|
||||||
|
header={{
|
||||||
|
title: 'Sftp存储对象配置表',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ProTable<API.UserInfo>
|
||||||
|
headerTitle="Sftp配置表格"
|
||||||
|
actionRef={actionRef}
|
||||||
|
rowKey="id"
|
||||||
|
search={{
|
||||||
|
labelWidth: 120,
|
||||||
|
}}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Button
|
||||||
|
key="1"
|
||||||
|
type="primary"
|
||||||
|
onClick={() => handleModalVisible(true)}
|
||||||
|
>
|
||||||
|
新建
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
request={async (params, sorter, filter) => {
|
||||||
|
const { data, success } = await queryUserList({
|
||||||
|
...params,
|
||||||
|
// FIXME: remove @ts-ignore
|
||||||
|
// @ts-ignore
|
||||||
|
sorter,
|
||||||
|
filter,
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
data: data?.list || [],
|
||||||
|
success,
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
columns={columns}
|
||||||
|
rowSelection={{
|
||||||
|
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{selectedRowsState?.length > 0 && (
|
||||||
|
<FooterToolbar
|
||||||
|
extra={
|
||||||
|
<div>
|
||||||
|
已选择{' '}
|
||||||
|
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||||
|
项
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
onClick={async () => {
|
||||||
|
await handleRemove(selectedRowsState);
|
||||||
|
setSelectedRows([]);
|
||||||
|
actionRef.current?.reloadAndRest?.();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
批量删除
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
</FooterToolbar>
|
||||||
|
)}
|
||||||
|
<CreateForm
|
||||||
|
onCancel={() => handleModalVisible(false)}
|
||||||
|
modalVisible={createModalVisible}
|
||||||
|
>
|
||||||
|
<ProTable<API.UserInfo, API.UserInfo>
|
||||||
|
onSubmit={async (value) => {
|
||||||
|
const success = await handleAdd(value);
|
||||||
|
if (success) {
|
||||||
|
handleModalVisible(false);
|
||||||
|
if (actionRef.current) {
|
||||||
|
actionRef.current.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
rowKey="id"
|
||||||
|
type="form"
|
||||||
|
columns={columns}
|
||||||
|
/>
|
||||||
|
</CreateForm>
|
||||||
|
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||||
|
<UpdateForm
|
||||||
|
onSubmit={async (value) => {
|
||||||
|
const success = await handleUpdate(value);
|
||||||
|
if (success) {
|
||||||
|
handleUpdateModalVisible(false);
|
||||||
|
setStepFormValues({});
|
||||||
|
if (actionRef.current) {
|
||||||
|
actionRef.current.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onCancel={() => {
|
||||||
|
handleUpdateModalVisible(false);
|
||||||
|
setStepFormValues({});
|
||||||
|
}}
|
||||||
|
updateModalVisible={updateModalVisible}
|
||||||
|
values={stepFormValues}
|
||||||
|
/>
|
||||||
|
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<Drawer
|
||||||
|
width={600}
|
||||||
|
open={!!row}
|
||||||
|
onClose={() => {
|
||||||
|
setRow(undefined);
|
||||||
|
}}
|
||||||
|
closable={false}
|
||||||
|
>
|
||||||
|
{row?.name && (
|
||||||
|
<ProDescriptions<API.UserInfo>
|
||||||
|
column={2}
|
||||||
|
title={row?.name}
|
||||||
|
request={async () => ({
|
||||||
|
data: row || {},
|
||||||
|
})}
|
||||||
|
params={{
|
||||||
|
id: row?.name,
|
||||||
|
}}
|
||||||
|
columns={columns}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Drawer>
|
||||||
|
</PageContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default User;
|
||||||
26
src/pages/Social/components/CreateForm.tsx
Normal file
26
src/pages/Social/components/CreateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import { Modal } from 'antd';
|
||||||
|
import React, { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
interface CreateFormProps {
|
||||||
|
modalVisible: boolean;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||||
|
const { modalVisible, onCancel } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
destroyOnClose
|
||||||
|
title="新建"
|
||||||
|
width={420}
|
||||||
|
open={modalVisible}
|
||||||
|
onCancel={() => onCancel()}
|
||||||
|
footer={null}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CreateForm;
|
||||||
26
src/pages/Social/components/UpdateForm.tsx
Normal file
26
src/pages/Social/components/UpdateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import { Modal } from 'antd';
|
||||||
|
import React, { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
interface CreateFormProps {
|
||||||
|
modalVisible: boolean;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||||
|
const { modalVisible, onCancel } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
destroyOnClose
|
||||||
|
title="新建"
|
||||||
|
width={420}
|
||||||
|
open={modalVisible}
|
||||||
|
onCancel={() => onCancel()}
|
||||||
|
footer={null}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CreateForm;
|
||||||
304
src/pages/Social/index.tsx
Normal file
304
src/pages/Social/index.tsx
Normal file
@@ -0,0 +1,304 @@
|
|||||||
|
import services from '@/services/demo';
|
||||||
|
import {
|
||||||
|
ActionType,
|
||||||
|
FooterToolbar,
|
||||||
|
PageContainer,
|
||||||
|
ProDescriptions,
|
||||||
|
ProDescriptionsItemProps,
|
||||||
|
ProTable,
|
||||||
|
} from '@ant-design/pro-components';
|
||||||
|
import { Button, Divider, Drawer, message } from 'antd';
|
||||||
|
import React, { useRef, useState } from 'react';
|
||||||
|
import CreateForm from './components/CreateForm';
|
||||||
|
//import UpdateForm, { FormValueType } from './components/UpdateForm';
|
||||||
|
|
||||||
|
const { addUser, queryUserList, deleteUser, modifyUser } =
|
||||||
|
services.UserController;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 添加节点
|
||||||
|
* @param fields
|
||||||
|
*/
|
||||||
|
const handleAdd = async (fields: API.UserInfo) => {
|
||||||
|
const hide = message.loading('正在添加');
|
||||||
|
try {
|
||||||
|
await addUser({ ...fields });
|
||||||
|
hide();
|
||||||
|
message.success('添加成功');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('添加失败请重试！');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新节点
|
||||||
|
* @param fields
|
||||||
|
*/
|
||||||
|
const handleUpdate = async (fields: FormValueType) => {
|
||||||
|
const hide = message.loading('正在配置');
|
||||||
|
try {
|
||||||
|
await modifyUser(
|
||||||
|
{
|
||||||
|
userId: fields.id || '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: fields.name || '',
|
||||||
|
nickName: fields.nickName || '',
|
||||||
|
email: fields.email || '',
|
||||||
|
},
|
||||||
|
);
|
||||||
|
hide();
|
||||||
|
|
||||||
|
message.success('编辑成功');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('编辑失败请重试！');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除节点
|
||||||
|
* @param selectedRows
|
||||||
|
*/
|
||||||
|
const handleRemove = async (selectedRows: API.UserInfo[]) => {
|
||||||
|
const hide = message.loading('正在删除');
|
||||||
|
if (!selectedRows) return true;
|
||||||
|
try {
|
||||||
|
await deleteUser({
|
||||||
|
userId: selectedRows.find((row) => row.id)?.id || '',
|
||||||
|
});
|
||||||
|
hide();
|
||||||
|
message.success('删除成功，即将刷新');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('删除失败，请重试');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const User: React.FC<unknown> = () => {
|
||||||
|
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
|
||||||
|
const [updateModalVisible, handleUpdateModalVisible] =
|
||||||
|
useState<boolean>(false);
|
||||||
|
const [stepFormValues, setStepFormValues] = useState({});
|
||||||
|
const actionRef = useRef<ActionType>();
|
||||||
|
const [row, setRow] = useState<API.UserInfo>();
|
||||||
|
const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
|
||||||
|
const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
|
||||||
|
{
|
||||||
|
title: '用户唯一id',
|
||||||
|
dataIndex: 'uuid',
|
||||||
|
tip: '用户唯一id是唯一的 key',
|
||||||
|
formItemProps: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '用户唯一id为必填项',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '用户id',
|
||||||
|
dataIndex: 'uid',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '用户来源',
|
||||||
|
dataIndex: 'source',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '授权令牌',
|
||||||
|
dataIndex: 'access_token',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '令牌有效期',
|
||||||
|
dataIndex: 'expire_in',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '刷新令牌',
|
||||||
|
dataIndex: 'refresh_token',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '用户open id',
|
||||||
|
required: true,
|
||||||
|
dataIndex: 'password',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '平台授权信息',
|
||||||
|
dataIndex: 'access_code',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '用户授予权限',
|
||||||
|
dataIndex: 'scope',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '注册时间',
|
||||||
|
dataIndex: 'create_time',
|
||||||
|
valueType: 'dateTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'option',
|
||||||
|
valueType: 'option',
|
||||||
|
render: (_, record) => (
|
||||||
|
<>
|
||||||
|
<a
|
||||||
|
onClick={() => {
|
||||||
|
handleUpdateModalVisible(true);
|
||||||
|
setStepFormValues(record);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</a>
|
||||||
|
<Divider type="vertical" />
|
||||||
|
<a href="">删除</a>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageContainer
|
||||||
|
header={{
|
||||||
|
title: '社会用户表',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ProTable<API.UserInfo>
|
||||||
|
headerTitle="社会用户表格"
|
||||||
|
actionRef={actionRef}
|
||||||
|
rowKey="id"
|
||||||
|
search={{
|
||||||
|
labelWidth: 120,
|
||||||
|
}}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Button
|
||||||
|
key="1"
|
||||||
|
type="primary"
|
||||||
|
onClick={() => handleModalVisible(true)}
|
||||||
|
>
|
||||||
|
新建
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
request={async (params, sorter, filter) => {
|
||||||
|
const { data, success } = await queryUserList({
|
||||||
|
...params,
|
||||||
|
// FIXME: remove @ts-ignore
|
||||||
|
// @ts-ignore
|
||||||
|
sorter,
|
||||||
|
filter,
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
data: data?.list || [],
|
||||||
|
success,
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
columns={columns}
|
||||||
|
rowSelection={{
|
||||||
|
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{selectedRowsState?.length > 0 && (
|
||||||
|
<FooterToolbar
|
||||||
|
extra={
|
||||||
|
<div>
|
||||||
|
已选择{' '}
|
||||||
|
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||||
|
项
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
onClick={async () => {
|
||||||
|
await handleRemove(selectedRowsState);
|
||||||
|
setSelectedRows([]);
|
||||||
|
actionRef.current?.reloadAndRest?.();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
批量删除
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
</FooterToolbar>
|
||||||
|
)}
|
||||||
|
<CreateForm
|
||||||
|
onCancel={() => handleModalVisible(false)}
|
||||||
|
modalVisible={createModalVisible}
|
||||||
|
>
|
||||||
|
<ProTable<API.UserInfo, API.UserInfo>
|
||||||
|
onSubmit={async (value) => {
|
||||||
|
const success = await handleAdd(value);
|
||||||
|
if (success) {
|
||||||
|
handleModalVisible(false);
|
||||||
|
if (actionRef.current) {
|
||||||
|
actionRef.current.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
rowKey="id"
|
||||||
|
type="form"
|
||||||
|
columns={columns}
|
||||||
|
/>
|
||||||
|
</CreateForm>
|
||||||
|
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||||
|
<UpdateForm
|
||||||
|
onSubmit={async (value) => {
|
||||||
|
const success = await handleUpdate(value);
|
||||||
|
if (success) {
|
||||||
|
handleUpdateModalVisible(false);
|
||||||
|
setStepFormValues({});
|
||||||
|
if (actionRef.current) {
|
||||||
|
actionRef.current.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onCancel={() => {
|
||||||
|
handleUpdateModalVisible(false);
|
||||||
|
setStepFormValues({});
|
||||||
|
}}
|
||||||
|
updateModalVisible={updateModalVisible}
|
||||||
|
values={stepFormValues}
|
||||||
|
/>
|
||||||
|
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<Drawer
|
||||||
|
width={600}
|
||||||
|
open={!!row}
|
||||||
|
onClose={() => {
|
||||||
|
setRow(undefined);
|
||||||
|
}}
|
||||||
|
closable={false}
|
||||||
|
>
|
||||||
|
{row?.name && (
|
||||||
|
<ProDescriptions<API.UserInfo>
|
||||||
|
column={2}
|
||||||
|
title={row?.name}
|
||||||
|
request={async () => ({
|
||||||
|
data: row || {},
|
||||||
|
})}
|
||||||
|
params={{
|
||||||
|
id: row?.name,
|
||||||
|
}}
|
||||||
|
columns={columns}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Drawer>
|
||||||
|
</PageContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default User;
|
||||||
26
src/pages/Tencent/components/CreateForm.tsx
Normal file
26
src/pages/Tencent/components/CreateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import { Modal } from 'antd';
|
||||||
|
import React, { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
interface CreateFormProps {
|
||||||
|
modalVisible: boolean;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||||
|
const { modalVisible, onCancel } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
destroyOnClose
|
||||||
|
title="新建"
|
||||||
|
width={420}
|
||||||
|
open={modalVisible}
|
||||||
|
onCancel={() => onCancel()}
|
||||||
|
footer={null}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CreateForm;
|
||||||
26
src/pages/Tencent/components/UpdateForm.tsx
Normal file
26
src/pages/Tencent/components/UpdateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import { Modal } from 'antd';
|
||||||
|
import React, { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
interface CreateFormProps {
|
||||||
|
modalVisible: boolean;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||||
|
const { modalVisible, onCancel } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
destroyOnClose
|
||||||
|
title="新建"
|
||||||
|
width={420}
|
||||||
|
open={modalVisible}
|
||||||
|
onCancel={() => onCancel()}
|
||||||
|
footer={null}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CreateForm;
|
||||||
311
src/pages/Tencent/index.tsx
Normal file
311
src/pages/Tencent/index.tsx
Normal file
@@ -0,0 +1,311 @@
|
|||||||
|
import services from '@/services/demo';
|
||||||
|
import {
|
||||||
|
ActionType,
|
||||||
|
FooterToolbar,
|
||||||
|
PageContainer,
|
||||||
|
ProDescriptions,
|
||||||
|
ProDescriptionsItemProps,
|
||||||
|
ProTable,
|
||||||
|
} from '@ant-design/pro-components';
|
||||||
|
import { Button, Divider, Drawer, message } from 'antd';
|
||||||
|
import React, { useRef, useState } from 'react';
|
||||||
|
import CreateForm from './components/CreateForm';
|
||||||
|
//import UpdateForm, { FormValueType } from './components/UpdateForm';
|
||||||
|
|
||||||
|
const { addUser, queryUserList, deleteUser, modifyUser } =
|
||||||
|
services.UserController;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 添加节点
|
||||||
|
* @param fields
|
||||||
|
*/
|
||||||
|
const handleAdd = async (fields: API.UserInfo) => {
|
||||||
|
const hide = message.loading('正在添加');
|
||||||
|
try {
|
||||||
|
await addUser({ ...fields });
|
||||||
|
hide();
|
||||||
|
message.success('添加成功');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('添加失败请重试！');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新节点
|
||||||
|
* @param fields
|
||||||
|
*/
|
||||||
|
const handleUpdate = async (fields: FormValueType) => {
|
||||||
|
const hide = message.loading('正在配置');
|
||||||
|
try {
|
||||||
|
await modifyUser(
|
||||||
|
{
|
||||||
|
userId: fields.id || '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: fields.name || '',
|
||||||
|
nickName: fields.nickName || '',
|
||||||
|
email: fields.email || '',
|
||||||
|
},
|
||||||
|
);
|
||||||
|
hide();
|
||||||
|
|
||||||
|
message.success('编辑成功');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('编辑失败请重试！');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除节点
|
||||||
|
* @param selectedRows
|
||||||
|
*/
|
||||||
|
const handleRemove = async (selectedRows: API.UserInfo[]) => {
|
||||||
|
const hide = message.loading('正在删除');
|
||||||
|
if (!selectedRows) return true;
|
||||||
|
try {
|
||||||
|
await deleteUser({
|
||||||
|
userId: selectedRows.find((row) => row.id)?.id || '',
|
||||||
|
});
|
||||||
|
hide();
|
||||||
|
message.success('删除成功，即将刷新');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('删除失败，请重试');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const User: React.FC<unknown> = () => {
|
||||||
|
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
|
||||||
|
const [updateModalVisible, handleUpdateModalVisible] =
|
||||||
|
useState<boolean>(false);
|
||||||
|
const [stepFormValues, setStepFormValues] = useState({});
|
||||||
|
const actionRef = useRef<ActionType>();
|
||||||
|
const [row, setRow] = useState<API.UserInfo>();
|
||||||
|
const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
|
||||||
|
const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
|
||||||
|
{
|
||||||
|
title: '用户id',
|
||||||
|
dataIndex: 'user_id',
|
||||||
|
tip: '用户id是唯一的 key',
|
||||||
|
formItemProps: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '用户id为必填项',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '采用协议',
|
||||||
|
tip: '连接OSS所采用的协议（HTTP或HTTPS），默认为HTTPS。',
|
||||||
|
default: 'HTTPS',
|
||||||
|
dataIndex: 'http_protocol',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'secret_id',
|
||||||
|
dataIndex: 'secret_id',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'secret_key',
|
||||||
|
dataIndex: 'secret_key',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Bucket名称',
|
||||||
|
dataIndex: 'bucket_name',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '数据存储路径',
|
||||||
|
dataIndex: 'base_path',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '使用的Region',
|
||||||
|
dataIndex: 'region',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '域名后缀',
|
||||||
|
dataIndex: 'end_point_suffix',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'http proxy代理',
|
||||||
|
tip: 'http proxy代理，如果使用http proxy代理，需要设置IP与端口',
|
||||||
|
dataIndex: 'http_proxy_Ip',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '代理服务器端口',
|
||||||
|
dataIndex: 'http_proxy_port',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '注册时间',
|
||||||
|
dataIndex: 'create_time',
|
||||||
|
valueType: 'dateTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'option',
|
||||||
|
valueType: 'option',
|
||||||
|
render: (_, record) => (
|
||||||
|
<>
|
||||||
|
<a
|
||||||
|
onClick={() => {
|
||||||
|
handleUpdateModalVisible(true);
|
||||||
|
setStepFormValues(record);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</a>
|
||||||
|
<Divider type="vertical" />
|
||||||
|
<a href="">删除</a>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageContainer
|
||||||
|
header={{
|
||||||
|
title: '腾讯云存储对象配置表',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ProTable<API.UserInfo>
|
||||||
|
headerTitle="腾讯云配置表格"
|
||||||
|
actionRef={actionRef}
|
||||||
|
rowKey="id"
|
||||||
|
search={{
|
||||||
|
labelWidth: 120,
|
||||||
|
}}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Button
|
||||||
|
key="1"
|
||||||
|
type="primary"
|
||||||
|
onClick={() => handleModalVisible(true)}
|
||||||
|
>
|
||||||
|
新建
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
request={async (params, sorter, filter) => {
|
||||||
|
const { data, success } = await queryUserList({
|
||||||
|
...params,
|
||||||
|
// FIXME: remove @ts-ignore
|
||||||
|
// @ts-ignore
|
||||||
|
sorter,
|
||||||
|
filter,
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
data: data?.list || [],
|
||||||
|
success,
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
columns={columns}
|
||||||
|
rowSelection={{
|
||||||
|
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{selectedRowsState?.length > 0 && (
|
||||||
|
<FooterToolbar
|
||||||
|
extra={
|
||||||
|
<div>
|
||||||
|
已选择{' '}
|
||||||
|
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||||
|
项
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
onClick={async () => {
|
||||||
|
await handleRemove(selectedRowsState);
|
||||||
|
setSelectedRows([]);
|
||||||
|
actionRef.current?.reloadAndRest?.();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
批量删除
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
</FooterToolbar>
|
||||||
|
)}
|
||||||
|
<CreateForm
|
||||||
|
onCancel={() => handleModalVisible(false)}
|
||||||
|
modalVisible={createModalVisible}
|
||||||
|
>
|
||||||
|
<ProTable<API.UserInfo, API.UserInfo>
|
||||||
|
onSubmit={async (value) => {
|
||||||
|
const success = await handleAdd(value);
|
||||||
|
if (success) {
|
||||||
|
handleModalVisible(false);
|
||||||
|
if (actionRef.current) {
|
||||||
|
actionRef.current.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
rowKey="id"
|
||||||
|
type="form"
|
||||||
|
columns={columns}
|
||||||
|
/>
|
||||||
|
</CreateForm>
|
||||||
|
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||||
|
<UpdateForm
|
||||||
|
onSubmit={async (value) => {
|
||||||
|
const success = await handleUpdate(value);
|
||||||
|
if (success) {
|
||||||
|
handleUpdateModalVisible(false);
|
||||||
|
setStepFormValues({});
|
||||||
|
if (actionRef.current) {
|
||||||
|
actionRef.current.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onCancel={() => {
|
||||||
|
handleUpdateModalVisible(false);
|
||||||
|
setStepFormValues({});
|
||||||
|
}}
|
||||||
|
updateModalVisible={updateModalVisible}
|
||||||
|
values={stepFormValues}
|
||||||
|
/>
|
||||||
|
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<Drawer
|
||||||
|
width={600}
|
||||||
|
open={!!row}
|
||||||
|
onClose={() => {
|
||||||
|
setRow(undefined);
|
||||||
|
}}
|
||||||
|
closable={false}
|
||||||
|
>
|
||||||
|
{row?.name && (
|
||||||
|
<ProDescriptions<API.UserInfo>
|
||||||
|
column={2}
|
||||||
|
title={row?.name}
|
||||||
|
request={async () => ({
|
||||||
|
data: row || {},
|
||||||
|
})}
|
||||||
|
params={{
|
||||||
|
id: row?.name,
|
||||||
|
}}
|
||||||
|
columns={columns}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Drawer>
|
||||||
|
</PageContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default User;
|
||||||
26
src/pages/Up/components/CreateForm.tsx
Normal file
26
src/pages/Up/components/CreateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import { Modal } from 'antd';
|
||||||
|
import React, { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
interface CreateFormProps {
|
||||||
|
modalVisible: boolean;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||||
|
const { modalVisible, onCancel } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
destroyOnClose
|
||||||
|
title="新建"
|
||||||
|
width={420}
|
||||||
|
open={modalVisible}
|
||||||
|
onCancel={() => onCancel()}
|
||||||
|
footer={null}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CreateForm;
|
||||||
26
src/pages/Up/components/UpdateForm.tsx
Normal file
26
src/pages/Up/components/UpdateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import { Modal } from 'antd';
|
||||||
|
import React, { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
interface CreateFormProps {
|
||||||
|
modalVisible: boolean;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||||
|
const { modalVisible, onCancel } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
destroyOnClose
|
||||||
|
title="新建"
|
||||||
|
width={420}
|
||||||
|
open={modalVisible}
|
||||||
|
onCancel={() => onCancel()}
|
||||||
|
footer={null}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CreateForm;
|
||||||
308
src/pages/Up/index.tsx
Normal file
308
src/pages/Up/index.tsx
Normal file
@@ -0,0 +1,308 @@
|
|||||||
|
import services from '@/services/demo';
|
||||||
|
import {
|
||||||
|
ActionType,
|
||||||
|
FooterToolbar,
|
||||||
|
PageContainer,
|
||||||
|
ProDescriptions,
|
||||||
|
ProDescriptionsItemProps,
|
||||||
|
ProTable,
|
||||||
|
} from '@ant-design/pro-components';
|
||||||
|
import { Button, Divider, Drawer, message } from 'antd';
|
||||||
|
import React, { useRef, useState } from 'react';
|
||||||
|
import CreateForm from './components/CreateForm';
|
||||||
|
//import UpdateForm, { FormValueType } from './components/UpdateForm';
|
||||||
|
|
||||||
|
const { addUser, queryUserList, deleteUser, modifyUser } =
|
||||||
|
services.UserController;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 添加节点
|
||||||
|
* @param fields
|
||||||
|
*/
|
||||||
|
const handleAdd = async (fields: API.UserInfo) => {
|
||||||
|
const hide = message.loading('正在添加');
|
||||||
|
try {
|
||||||
|
await addUser({ ...fields });
|
||||||
|
hide();
|
||||||
|
message.success('添加成功');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('添加失败请重试！');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新节点
|
||||||
|
* @param fields
|
||||||
|
*/
|
||||||
|
const handleUpdate = async (fields: FormValueType) => {
|
||||||
|
const hide = message.loading('正在配置');
|
||||||
|
try {
|
||||||
|
await modifyUser(
|
||||||
|
{
|
||||||
|
userId: fields.id || '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: fields.name || '',
|
||||||
|
nickName: fields.nickName || '',
|
||||||
|
email: fields.email || '',
|
||||||
|
},
|
||||||
|
);
|
||||||
|
hide();
|
||||||
|
|
||||||
|
message.success('编辑成功');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('编辑失败请重试！');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除节点
|
||||||
|
* @param selectedRows
|
||||||
|
*/
|
||||||
|
const handleRemove = async (selectedRows: API.UserInfo[]) => {
|
||||||
|
const hide = message.loading('正在删除');
|
||||||
|
if (!selectedRows) return true;
|
||||||
|
try {
|
||||||
|
await deleteUser({
|
||||||
|
userId: selectedRows.find((row) => row.id)?.id || '',
|
||||||
|
});
|
||||||
|
hide();
|
||||||
|
message.success('删除成功，即将刷新');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('删除失败，请重试');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const User: React.FC<unknown> = () => {
|
||||||
|
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
|
||||||
|
const [updateModalVisible, handleUpdateModalVisible] =
|
||||||
|
useState<boolean>(false);
|
||||||
|
const [stepFormValues, setStepFormValues] = useState({});
|
||||||
|
const actionRef = useRef<ActionType>();
|
||||||
|
const [row, setRow] = useState<API.UserInfo>();
|
||||||
|
const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
|
||||||
|
const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
|
||||||
|
{
|
||||||
|
title: '用户id',
|
||||||
|
dataIndex: 'user_id',
|
||||||
|
tip: '用户id是唯一的 key',
|
||||||
|
formItemProps: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '用户id为必填项',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '密码',
|
||||||
|
dataIndex: 'password',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '用户名称',
|
||||||
|
dataIndex: 'user_name',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'secret_key',
|
||||||
|
dataIndex: 'secret_key',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Bucket名称',
|
||||||
|
dataIndex: 'bucket_name',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '数据存储路径',
|
||||||
|
dataIndex: 'base_path',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: '分片大小',
|
||||||
|
default: '5',
|
||||||
|
dataIndex: 'part_size',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '超时时间',
|
||||||
|
tip: '默认的超时时间：30秒',
|
||||||
|
default: '30',
|
||||||
|
dataIndex: 'timeout',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '接入点',
|
||||||
|
tip: '默认为自动识别接入点',
|
||||||
|
dataIndex: 'api_domain',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '注册时间',
|
||||||
|
dataIndex: 'create_time',
|
||||||
|
valueType: 'dateTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'option',
|
||||||
|
valueType: 'option',
|
||||||
|
render: (_, record) => (
|
||||||
|
<>
|
||||||
|
<a
|
||||||
|
onClick={() => {
|
||||||
|
handleUpdateModalVisible(true);
|
||||||
|
setStepFormValues(record);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</a>
|
||||||
|
<Divider type="vertical" />
|
||||||
|
<a href="">删除</a>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageContainer
|
||||||
|
header={{
|
||||||
|
title: '又拍云存储对象配置表',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ProTable<API.UserInfo>
|
||||||
|
headerTitle="又拍云配置表格"
|
||||||
|
actionRef={actionRef}
|
||||||
|
rowKey="id"
|
||||||
|
search={{
|
||||||
|
labelWidth: 120,
|
||||||
|
}}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Button
|
||||||
|
key="1"
|
||||||
|
type="primary"
|
||||||
|
onClick={() => handleModalVisible(true)}
|
||||||
|
>
|
||||||
|
新建
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
request={async (params, sorter, filter) => {
|
||||||
|
const { data, success } = await queryUserList({
|
||||||
|
...params,
|
||||||
|
// FIXME: remove @ts-ignore
|
||||||
|
// @ts-ignore
|
||||||
|
sorter,
|
||||||
|
filter,
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
data: data?.list || [],
|
||||||
|
success,
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
columns={columns}
|
||||||
|
rowSelection={{
|
||||||
|
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{selectedRowsState?.length > 0 && (
|
||||||
|
<FooterToolbar
|
||||||
|
extra={
|
||||||
|
<div>
|
||||||
|
已选择{' '}
|
||||||
|
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||||
|
项
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
onClick={async () => {
|
||||||
|
await handleRemove(selectedRowsState);
|
||||||
|
setSelectedRows([]);
|
||||||
|
actionRef.current?.reloadAndRest?.();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
批量删除
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
</FooterToolbar>
|
||||||
|
)}
|
||||||
|
<CreateForm
|
||||||
|
onCancel={() => handleModalVisible(false)}
|
||||||
|
modalVisible={createModalVisible}
|
||||||
|
>
|
||||||
|
<ProTable<API.UserInfo, API.UserInfo>
|
||||||
|
onSubmit={async (value) => {
|
||||||
|
const success = await handleAdd(value);
|
||||||
|
if (success) {
|
||||||
|
handleModalVisible(false);
|
||||||
|
if (actionRef.current) {
|
||||||
|
actionRef.current.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
rowKey="id"
|
||||||
|
type="form"
|
||||||
|
columns={columns}
|
||||||
|
/>
|
||||||
|
</CreateForm>
|
||||||
|
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||||
|
<UpdateForm
|
||||||
|
onSubmit={async (value) => {
|
||||||
|
const success = await handleUpdate(value);
|
||||||
|
if (success) {
|
||||||
|
handleUpdateModalVisible(false);
|
||||||
|
setStepFormValues({});
|
||||||
|
if (actionRef.current) {
|
||||||
|
actionRef.current.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onCancel={() => {
|
||||||
|
handleUpdateModalVisible(false);
|
||||||
|
setStepFormValues({});
|
||||||
|
}}
|
||||||
|
updateModalVisible={updateModalVisible}
|
||||||
|
values={stepFormValues}
|
||||||
|
/>
|
||||||
|
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<Drawer
|
||||||
|
width={600}
|
||||||
|
open={!!row}
|
||||||
|
onClose={() => {
|
||||||
|
setRow(undefined);
|
||||||
|
}}
|
||||||
|
closable={false}
|
||||||
|
>
|
||||||
|
{row?.name && (
|
||||||
|
<ProDescriptions<API.UserInfo>
|
||||||
|
column={2}
|
||||||
|
title={row?.name}
|
||||||
|
request={async () => ({
|
||||||
|
data: row || {},
|
||||||
|
})}
|
||||||
|
params={{
|
||||||
|
id: row?.name,
|
||||||
|
}}
|
||||||
|
columns={columns}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Drawer>
|
||||||
|
</PageContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default User;
|
||||||
26
src/pages/Users/components/CreateForm.tsx
Normal file
26
src/pages/Users/components/CreateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import { Modal } from 'antd';
|
||||||
|
import React, { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
interface CreateFormProps {
|
||||||
|
modalVisible: boolean;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||||
|
const { modalVisible, onCancel } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
destroyOnClose
|
||||||
|
title="新建"
|
||||||
|
width={420}
|
||||||
|
open={modalVisible}
|
||||||
|
onCancel={() => onCancel()}
|
||||||
|
footer={null}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CreateForm;
|
||||||
26
src/pages/Users/components/UpdateForm.tsx
Normal file
26
src/pages/Users/components/UpdateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import { Modal } from 'antd';
|
||||||
|
import React, { PropsWithChildren } from 'react';
|
||||||
|
|
||||||
|
interface CreateFormProps {
|
||||||
|
modalVisible: boolean;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||||
|
const { modalVisible, onCancel } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
destroyOnClose
|
||||||
|
title="新建"
|
||||||
|
width={420}
|
||||||
|
open={modalVisible}
|
||||||
|
onCancel={() => onCancel()}
|
||||||
|
footer={null}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CreateForm;
|
||||||
299
src/pages/Users/index.tsx
Normal file
299
src/pages/Users/index.tsx
Normal file
@@ -0,0 +1,299 @@
|
|||||||
|
import services from '@/services/demo';
|
||||||
|
import {
|
||||||
|
ActionType,
|
||||||
|
FooterToolbar,
|
||||||
|
PageContainer,
|
||||||
|
ProDescriptions,
|
||||||
|
ProDescriptionsItemProps,
|
||||||
|
ProTable,
|
||||||
|
} from '@ant-design/pro-components';
|
||||||
|
import { Button, Divider, Drawer, message } from 'antd';
|
||||||
|
import React, { useRef, useState } from 'react';
|
||||||
|
import CreateForm from './components/CreateForm';
|
||||||
|
//import UpdateForm, { FormValueType } from './components/UpdateForm';
|
||||||
|
|
||||||
|
const { addUser, queryUserList, deleteUser, modifyUser } =
|
||||||
|
services.UserController;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 添加节点
|
||||||
|
* @param fields
|
||||||
|
*/
|
||||||
|
const handleAdd = async (fields: API.UserInfo) => {
|
||||||
|
const hide = message.loading('正在添加');
|
||||||
|
try {
|
||||||
|
await addUser({ ...fields });
|
||||||
|
hide();
|
||||||
|
message.success('添加成功');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('添加失败请重试！');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新节点
|
||||||
|
* @param fields
|
||||||
|
*/
|
||||||
|
const handleUpdate = async (fields: FormValueType) => {
|
||||||
|
const hide = message.loading('正在配置');
|
||||||
|
try {
|
||||||
|
await modifyUser(
|
||||||
|
{
|
||||||
|
userId: fields.id || '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: fields.name || '',
|
||||||
|
nickName: fields.nickName || '',
|
||||||
|
email: fields.email || '',
|
||||||
|
},
|
||||||
|
);
|
||||||
|
hide();
|
||||||
|
|
||||||
|
message.success('编辑成功');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('编辑失败请重试！');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除节点
|
||||||
|
* @param selectedRows
|
||||||
|
*/
|
||||||
|
const handleRemove = async (selectedRows: API.UserInfo[]) => {
|
||||||
|
const hide = message.loading('正在删除');
|
||||||
|
if (!selectedRows) return true;
|
||||||
|
try {
|
||||||
|
await deleteUser({
|
||||||
|
userId: selectedRows.find((row) => row.id)?.id || '',
|
||||||
|
});
|
||||||
|
hide();
|
||||||
|
message.success('删除成功，即将刷新');
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
hide();
|
||||||
|
message.error('删除失败，请重试');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const User: React.FC<unknown> = () => {
|
||||||
|
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
|
||||||
|
const [updateModalVisible, handleUpdateModalVisible] =
|
||||||
|
useState<boolean>(false);
|
||||||
|
const [stepFormValues, setStepFormValues] = useState({});
|
||||||
|
const actionRef = useRef<ActionType>();
|
||||||
|
const [row, setRow] = useState<API.UserInfo>();
|
||||||
|
const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
|
||||||
|
const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
|
||||||
|
{
|
||||||
|
title: '名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
tip: '名称是唯一的 key',
|
||||||
|
formItemProps: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '名称为必填项',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '昵称',
|
||||||
|
dataIndex: 'nickName',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '邮箱',
|
||||||
|
dataIndex: 'email',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '电话',
|
||||||
|
dataIndex: 'phone',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '密码',
|
||||||
|
required: true,
|
||||||
|
dataIndex: 'password',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '性别',
|
||||||
|
dataIndex: 'gender',
|
||||||
|
hideInForm: true,
|
||||||
|
valueEnum: {
|
||||||
|
0: { text: '男', status: 'MALE' },
|
||||||
|
1: { text: '女', status: 'FEMALE' },
|
||||||
|
UNKNOWN: { text: '未知', status: 'UNKNOWN' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '头像',
|
||||||
|
dataIndex: 'avatar',
|
||||||
|
valueType: 'text',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '注册时间',
|
||||||
|
dataIndex: 'create_time',
|
||||||
|
valueType: 'dateTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'option',
|
||||||
|
valueType: 'option',
|
||||||
|
render: (_, record) => (
|
||||||
|
<>
|
||||||
|
<a
|
||||||
|
onClick={() => {
|
||||||
|
handleUpdateModalVisible(true);
|
||||||
|
setStepFormValues(record);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</a>
|
||||||
|
<Divider type="vertical" />
|
||||||
|
<a href="">删除</a>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageContainer
|
||||||
|
header={{
|
||||||
|
title: '用户表',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ProTable<API.UserInfo>
|
||||||
|
headerTitle="用户表格"
|
||||||
|
actionRef={actionRef}
|
||||||
|
rowKey="id"
|
||||||
|
search={{
|
||||||
|
labelWidth: 120,
|
||||||
|
}}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Button
|
||||||
|
key="1"
|
||||||
|
type="primary"
|
||||||
|
onClick={() => handleModalVisible(true)}
|
||||||
|
>
|
||||||
|
新建
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
request={async (params, sorter, filter) => {
|
||||||
|
const { data, success } = await queryUserList({
|
||||||
|
...params,
|
||||||
|
// FIXME: remove @ts-ignore
|
||||||
|
// @ts-ignore
|
||||||
|
sorter,
|
||||||
|
filter,
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
data: data?.list || [],
|
||||||
|
success,
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
columns={columns}
|
||||||
|
rowSelection={{
|
||||||
|
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{selectedRowsState?.length > 0 && (
|
||||||
|
<FooterToolbar
|
||||||
|
extra={
|
||||||
|
<div>
|
||||||
|
已选择{' '}
|
||||||
|
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||||
|
项
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
onClick={async () => {
|
||||||
|
await handleRemove(selectedRowsState);
|
||||||
|
setSelectedRows([]);
|
||||||
|
actionRef.current?.reloadAndRest?.();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
批量删除
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
</FooterToolbar>
|
||||||
|
)}
|
||||||
|
<CreateForm
|
||||||
|
onCancel={() => handleModalVisible(false)}
|
||||||
|
modalVisible={createModalVisible}
|
||||||
|
>
|
||||||
|
<ProTable<API.UserInfo, API.UserInfo>
|
||||||
|
onSubmit={async (value) => {
|
||||||
|
const success = await handleAdd(value);
|
||||||
|
if (success) {
|
||||||
|
handleModalVisible(false);
|
||||||
|
if (actionRef.current) {
|
||||||
|
actionRef.current.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
rowKey="id"
|
||||||
|
type="form"
|
||||||
|
columns={columns}
|
||||||
|
/>
|
||||||
|
</CreateForm>
|
||||||
|
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||||
|
<UpdateForm
|
||||||
|
onSubmit={async (value) => {
|
||||||
|
const success = await handleUpdate(value);
|
||||||
|
if (success) {
|
||||||
|
handleUpdateModalVisible(false);
|
||||||
|
setStepFormValues({});
|
||||||
|
if (actionRef.current) {
|
||||||
|
actionRef.current.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onCancel={() => {
|
||||||
|
handleUpdateModalVisible(false);
|
||||||
|
setStepFormValues({});
|
||||||
|
}}
|
||||||
|
updateModalVisible={updateModalVisible}
|
||||||
|
values={stepFormValues}
|
||||||
|
/>
|
||||||
|
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<Drawer
|
||||||
|
width={600}
|
||||||
|
open={!!row}
|
||||||
|
onClose={() => {
|
||||||
|
setRow(undefined);
|
||||||
|
}}
|
||||||
|
closable={false}
|
||||||
|
>
|
||||||
|
{row?.name && (
|
||||||
|
<ProDescriptions<API.UserInfo>
|
||||||
|
column={2}
|
||||||
|
title={row?.name}
|
||||||
|
request={async () => ({
|
||||||
|
data: row || {},
|
||||||
|
})}
|
||||||
|
params={{
|
||||||
|
id: row?.name,
|
||||||
|
}}
|
||||||
|
columns={columns}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Drawer>
|
||||||
|
</PageContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default User;
|
||||||
Reference in New Issue
Block a user