From 0de1f85174cb918c7d26f92b8a0ba3bd988a5f2b Mon Sep 17 00:00:00 2001 From: chizhehui Date: Sat, 13 Jul 2024 11:08:21 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E9=98=BF=E9=87=8C?= =?UTF-8?q?=E4=BA=91=E9=85=8D=E7=BD=AE=E8=A1=A8=E3=80=81minio=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E8=A1=A8=E3=80=81=E8=85=BE=E8=AE=AF=E4=BA=91=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E8=A1=A8=E3=80=81=E4=B8=83=E7=89=9B=E4=BA=91=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E8=A1=A8=E3=80=81up=E9=85=8D=E7=BD=AE=E8=A1=A8?= =?UTF-8?q?=E3=80=81sftp=E9=85=8D=E7=BD=AE=E8=A1=A8=E7=9A=84=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E8=AE=BE=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Ali/components/CreateForm.tsx | 26 ++ src/pages/Ali/components/UpdateForm.tsx | 26 ++ src/pages/Ali/index.tsx | 305 +++++++++++++++++ src/pages/Minio/components/CreateForm.tsx | 26 ++ src/pages/Minio/components/UpdateForm.tsx | 26 ++ src/pages/Minio/index.tsx | 298 +++++++++++++++++ .../Permission/components/CreateForm.tsx | 26 ++ .../Permission/components/UpdateForm.tsx | 26 ++ src/pages/Qiniu/components/CreateForm.tsx | 26 ++ src/pages/Qiniu/components/UpdateForm.tsx | 26 ++ src/pages/Qiniu/index.tsx | 307 +++++++++++++++++ src/pages/Role/components/CreateForm.tsx | 26 ++ src/pages/Role/components/UpdateForm.tsx | 26 ++ src/pages/Role/index.tsx | 277 ++++++++++++++++ src/pages/Sftp/components/CreateForm.tsx | 26 ++ src/pages/Sftp/components/UpdateForm.tsx | 26 ++ src/pages/Sftp/index.tsx | 309 +++++++++++++++++ src/pages/Social/components/CreateForm.tsx | 26 ++ src/pages/Social/components/UpdateForm.tsx | 26 ++ src/pages/Social/index.tsx | 304 +++++++++++++++++ src/pages/Tencent/components/CreateForm.tsx | 26 ++ src/pages/Tencent/components/UpdateForm.tsx | 26 ++ src/pages/Tencent/index.tsx | 311 ++++++++++++++++++ src/pages/Up/components/CreateForm.tsx | 26 ++ src/pages/Up/components/UpdateForm.tsx | 26 ++ src/pages/Up/index.tsx | 308 +++++++++++++++++ 26 files changed, 2887 insertions(+) create mode 100644 src/pages/Ali/components/CreateForm.tsx create mode 100644 src/pages/Ali/components/UpdateForm.tsx create mode 100644 src/pages/Ali/index.tsx create mode 100644 src/pages/Minio/components/CreateForm.tsx create mode 100644 src/pages/Minio/components/UpdateForm.tsx create mode 100644 src/pages/Minio/index.tsx create mode 100644 src/pages/Permission/components/CreateForm.tsx create mode 100644 src/pages/Permission/components/UpdateForm.tsx create mode 100644 src/pages/Qiniu/components/CreateForm.tsx create mode 100644 src/pages/Qiniu/components/UpdateForm.tsx create mode 100644 src/pages/Qiniu/index.tsx create mode 100644 src/pages/Role/components/CreateForm.tsx create mode 100644 src/pages/Role/components/UpdateForm.tsx create mode 100644 src/pages/Role/index.tsx create mode 100644 src/pages/Sftp/components/CreateForm.tsx create mode 100644 src/pages/Sftp/components/UpdateForm.tsx create mode 100644 src/pages/Sftp/index.tsx create mode 100644 src/pages/Social/components/CreateForm.tsx create mode 100644 src/pages/Social/components/UpdateForm.tsx create mode 100644 src/pages/Social/index.tsx create mode 100644 src/pages/Tencent/components/CreateForm.tsx create mode 100644 src/pages/Tencent/components/UpdateForm.tsx create mode 100644 src/pages/Tencent/index.tsx create mode 100644 src/pages/Up/components/CreateForm.tsx create mode 100644 src/pages/Up/components/UpdateForm.tsx create mode 100644 src/pages/Up/index.tsx diff --git a/src/pages/Ali/components/CreateForm.tsx b/src/pages/Ali/components/CreateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/Ali/components/CreateForm.tsx @@ -0,0 +1,26 @@ +import { Modal } from 'antd'; +import React, { PropsWithChildren } from 'react'; + +interface CreateFormProps { + modalVisible: boolean; + onCancel: () => void; +} + +const CreateForm: React.FC> = (props) => { + const { modalVisible, onCancel } = props; + + return ( + onCancel()} + footer={null} + > + {props.children} + + ); +}; + +export default CreateForm; diff --git a/src/pages/Ali/components/UpdateForm.tsx b/src/pages/Ali/components/UpdateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/Ali/components/UpdateForm.tsx @@ -0,0 +1,26 @@ +import { Modal } from 'antd'; +import React, { PropsWithChildren } from 'react'; + +interface CreateFormProps { + modalVisible: boolean; + onCancel: () => void; +} + +const CreateForm: React.FC> = (props) => { + const { modalVisible, onCancel } = props; + + return ( + onCancel()} + footer={null} + > + {props.children} + + ); +}; + +export default CreateForm; diff --git a/src/pages/Ali/index.tsx b/src/pages/Ali/index.tsx new file mode 100644 index 0000000..2df473e --- /dev/null +++ b/src/pages/Ali/index.tsx @@ -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 = () => { + const [createModalVisible, handleModalVisible] = useState(false); + const [updateModalVisible, handleUpdateModalVisible] = + useState(false); + const [stepFormValues, setStepFormValues] = useState({}); + const actionRef = useRef(); + const [row, setRow] = useState(); + const [selectedRowsState, setSelectedRows] = useState([]); + const columns: ProDescriptionsItemProps[] = [ + { + 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) => ( + <> + { + handleUpdateModalVisible(true); + setStepFormValues(record); + }} + > + 编辑 + + + 删除 + + ), + }, + ]; + + return ( + + + headerTitle="阿里云配置表格" + actionRef={actionRef} + rowKey="id" + search={{ + labelWidth: 120, + }} + toolBarRender={() => [ + , + ]} + 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 && ( + + 已选择{' '} + {selectedRowsState.length}{' '} + 项   + + } + > + + + + )} + handleModalVisible(false)} + modalVisible={createModalVisible} + > + + onSubmit={async (value) => { + const success = await handleAdd(value); + if (success) { + handleModalVisible(false); + if (actionRef.current) { + actionRef.current.reload(); + } + } + }} + rowKey="id" + type="form" + columns={columns} + /> + + {stepFormValues && Object.keys(stepFormValues).length ? ( + { + 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} + + { + setRow(undefined); + }} + closable={false} + > + {row?.name && ( + + column={2} + title={row?.name} + request={async () => ({ + data: row || {}, + })} + params={{ + id: row?.name, + }} + columns={columns} + /> + )} + + + ); +}; + +export default User; diff --git a/src/pages/Minio/components/CreateForm.tsx b/src/pages/Minio/components/CreateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/Minio/components/CreateForm.tsx @@ -0,0 +1,26 @@ +import { Modal } from 'antd'; +import React, { PropsWithChildren } from 'react'; + +interface CreateFormProps { + modalVisible: boolean; + onCancel: () => void; +} + +const CreateForm: React.FC> = (props) => { + const { modalVisible, onCancel } = props; + + return ( + onCancel()} + footer={null} + > + {props.children} + + ); +}; + +export default CreateForm; diff --git a/src/pages/Minio/components/UpdateForm.tsx b/src/pages/Minio/components/UpdateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/Minio/components/UpdateForm.tsx @@ -0,0 +1,26 @@ +import { Modal } from 'antd'; +import React, { PropsWithChildren } from 'react'; + +interface CreateFormProps { + modalVisible: boolean; + onCancel: () => void; +} + +const CreateForm: React.FC> = (props) => { + const { modalVisible, onCancel } = props; + + return ( + onCancel()} + footer={null} + > + {props.children} + + ); +}; + +export default CreateForm; diff --git a/src/pages/Minio/index.tsx b/src/pages/Minio/index.tsx new file mode 100644 index 0000000..e36ffb9 --- /dev/null +++ b/src/pages/Minio/index.tsx @@ -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 = () => { + const [createModalVisible, handleModalVisible] = useState(false); + const [updateModalVisible, handleUpdateModalVisible] = + useState(false); + const [stepFormValues, setStepFormValues] = useState({}); + const actionRef = useRef(); + const [row, setRow] = useState(); + const [selectedRowsState, setSelectedRows] = useState([]); + const columns: ProDescriptionsItemProps[] = [ + { + 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) => ( + <> + { + handleUpdateModalVisible(true); + setStepFormValues(record); + }} + > + 编辑 + + + 删除 + + ), + }, + ]; + + return ( + + + headerTitle="minio配置表格" + actionRef={actionRef} + rowKey="id" + search={{ + labelWidth: 120, + }} + toolBarRender={() => [ + , + ]} + 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 && ( + + 已选择{' '} + {selectedRowsState.length}{' '} + 项   + + } + > + + + + )} + handleModalVisible(false)} + modalVisible={createModalVisible} + > + + onSubmit={async (value) => { + const success = await handleAdd(value); + if (success) { + handleModalVisible(false); + if (actionRef.current) { + actionRef.current.reload(); + } + } + }} + rowKey="id" + type="form" + columns={columns} + /> + + {stepFormValues && Object.keys(stepFormValues).length ? ( + { + 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} + + { + setRow(undefined); + }} + closable={false} + > + {row?.name && ( + + column={2} + title={row?.name} + request={async () => ({ + data: row || {}, + })} + params={{ + id: row?.name, + }} + columns={columns} + /> + )} + + + ); +}; + +export default User; diff --git a/src/pages/Permission/components/CreateForm.tsx b/src/pages/Permission/components/CreateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/Permission/components/CreateForm.tsx @@ -0,0 +1,26 @@ +import { Modal } from 'antd'; +import React, { PropsWithChildren } from 'react'; + +interface CreateFormProps { + modalVisible: boolean; + onCancel: () => void; +} + +const CreateForm: React.FC> = (props) => { + const { modalVisible, onCancel } = props; + + return ( + onCancel()} + footer={null} + > + {props.children} + + ); +}; + +export default CreateForm; diff --git a/src/pages/Permission/components/UpdateForm.tsx b/src/pages/Permission/components/UpdateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/Permission/components/UpdateForm.tsx @@ -0,0 +1,26 @@ +import { Modal } from 'antd'; +import React, { PropsWithChildren } from 'react'; + +interface CreateFormProps { + modalVisible: boolean; + onCancel: () => void; +} + +const CreateForm: React.FC> = (props) => { + const { modalVisible, onCancel } = props; + + return ( + onCancel()} + footer={null} + > + {props.children} + + ); +}; + +export default CreateForm; diff --git a/src/pages/Qiniu/components/CreateForm.tsx b/src/pages/Qiniu/components/CreateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/Qiniu/components/CreateForm.tsx @@ -0,0 +1,26 @@ +import { Modal } from 'antd'; +import React, { PropsWithChildren } from 'react'; + +interface CreateFormProps { + modalVisible: boolean; + onCancel: () => void; +} + +const CreateForm: React.FC> = (props) => { + const { modalVisible, onCancel } = props; + + return ( + onCancel()} + footer={null} + > + {props.children} + + ); +}; + +export default CreateForm; diff --git a/src/pages/Qiniu/components/UpdateForm.tsx b/src/pages/Qiniu/components/UpdateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/Qiniu/components/UpdateForm.tsx @@ -0,0 +1,26 @@ +import { Modal } from 'antd'; +import React, { PropsWithChildren } from 'react'; + +interface CreateFormProps { + modalVisible: boolean; + onCancel: () => void; +} + +const CreateForm: React.FC> = (props) => { + const { modalVisible, onCancel } = props; + + return ( + onCancel()} + footer={null} + > + {props.children} + + ); +}; + +export default CreateForm; diff --git a/src/pages/Qiniu/index.tsx b/src/pages/Qiniu/index.tsx new file mode 100644 index 0000000..4f48df1 --- /dev/null +++ b/src/pages/Qiniu/index.tsx @@ -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 = () => { + const [createModalVisible, handleModalVisible] = useState(false); + const [updateModalVisible, handleUpdateModalVisible] = + useState(false); + const [stepFormValues, setStepFormValues] = useState({}); + const actionRef = useRef(); + const [row, setRow] = useState(); + const [selectedRowsState, setSelectedRows] = useState([]); + const columns: ProDescriptionsItemProps[] = [ + { + 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) => ( + <> + { + handleUpdateModalVisible(true); + setStepFormValues(record); + }} + > + 编辑 + + + 删除 + + ), + }, + ]; + + return ( + + + headerTitle="七牛云配置表格" + actionRef={actionRef} + rowKey="id" + search={{ + labelWidth: 120, + }} + toolBarRender={() => [ + , + ]} + 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 && ( + + 已选择{' '} + {selectedRowsState.length}{' '} + 项   + + } + > + + + + )} + handleModalVisible(false)} + modalVisible={createModalVisible} + > + + onSubmit={async (value) => { + const success = await handleAdd(value); + if (success) { + handleModalVisible(false); + if (actionRef.current) { + actionRef.current.reload(); + } + } + }} + rowKey="id" + type="form" + columns={columns} + /> + + {stepFormValues && Object.keys(stepFormValues).length ? ( + { + 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} + + { + setRow(undefined); + }} + closable={false} + > + {row?.name && ( + + column={2} + title={row?.name} + request={async () => ({ + data: row || {}, + })} + params={{ + id: row?.name, + }} + columns={columns} + /> + )} + + + ); +}; + +export default User; diff --git a/src/pages/Role/components/CreateForm.tsx b/src/pages/Role/components/CreateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/Role/components/CreateForm.tsx @@ -0,0 +1,26 @@ +import { Modal } from 'antd'; +import React, { PropsWithChildren } from 'react'; + +interface CreateFormProps { + modalVisible: boolean; + onCancel: () => void; +} + +const CreateForm: React.FC> = (props) => { + const { modalVisible, onCancel } = props; + + return ( + onCancel()} + footer={null} + > + {props.children} + + ); +}; + +export default CreateForm; diff --git a/src/pages/Role/components/UpdateForm.tsx b/src/pages/Role/components/UpdateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/Role/components/UpdateForm.tsx @@ -0,0 +1,26 @@ +import { Modal } from 'antd'; +import React, { PropsWithChildren } from 'react'; + +interface CreateFormProps { + modalVisible: boolean; + onCancel: () => void; +} + +const CreateForm: React.FC> = (props) => { + const { modalVisible, onCancel } = props; + + return ( + onCancel()} + footer={null} + > + {props.children} + + ); +}; + +export default CreateForm; diff --git a/src/pages/Role/index.tsx b/src/pages/Role/index.tsx new file mode 100644 index 0000000..f7500bb --- /dev/null +++ b/src/pages/Role/index.tsx @@ -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 = () => { + const [createModalVisible, handleModalVisible] = useState(false); + const [updateModalVisible, handleUpdateModalVisible] = + useState(false); + const [stepFormValues, setStepFormValues] = useState({}); + const actionRef = useRef(); + const [row, setRow] = useState(); + const [selectedRowsState, setSelectedRows] = useState([]); + const columns: ProDescriptionsItemProps[] = [ + { + 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) => ( + <> + { + handleUpdateModalVisible(true); + setStepFormValues(record); + }} + > + 编辑 + + + 删除 + + ), + }, + ]; + + return ( + + + headerTitle="角色表格" + actionRef={actionRef} + rowKey="id" + search={{ + labelWidth: 120, + }} + toolBarRender={() => [ + , + ]} + 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 && ( + + 已选择{' '} + {selectedRowsState.length}{' '} + 项   + + } + > + + + + )} + handleModalVisible(false)} + modalVisible={createModalVisible} + > + + onSubmit={async (value) => { + const success = await handleAdd(value); + if (success) { + handleModalVisible(false); + if (actionRef.current) { + actionRef.current.reload(); + } + } + }} + rowKey="id" + type="form" + columns={columns} + /> + + {stepFormValues && Object.keys(stepFormValues).length ? ( + { + 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} + + { + setRow(undefined); + }} + closable={false} + > + {row?.name && ( + + column={2} + title={row?.name} + request={async () => ({ + data: row || {}, + })} + params={{ + id: row?.name, + }} + columns={columns} + /> + )} + + + ); +}; + +export default User; diff --git a/src/pages/Sftp/components/CreateForm.tsx b/src/pages/Sftp/components/CreateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/Sftp/components/CreateForm.tsx @@ -0,0 +1,26 @@ +import { Modal } from 'antd'; +import React, { PropsWithChildren } from 'react'; + +interface CreateFormProps { + modalVisible: boolean; + onCancel: () => void; +} + +const CreateForm: React.FC> = (props) => { + const { modalVisible, onCancel } = props; + + return ( + onCancel()} + footer={null} + > + {props.children} + + ); +}; + +export default CreateForm; diff --git a/src/pages/Sftp/components/UpdateForm.tsx b/src/pages/Sftp/components/UpdateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/Sftp/components/UpdateForm.tsx @@ -0,0 +1,26 @@ +import { Modal } from 'antd'; +import React, { PropsWithChildren } from 'react'; + +interface CreateFormProps { + modalVisible: boolean; + onCancel: () => void; +} + +const CreateForm: React.FC> = (props) => { + const { modalVisible, onCancel } = props; + + return ( + onCancel()} + footer={null} + > + {props.children} + + ); +}; + +export default CreateForm; diff --git a/src/pages/Sftp/index.tsx b/src/pages/Sftp/index.tsx new file mode 100644 index 0000000..bbafc12 --- /dev/null +++ b/src/pages/Sftp/index.tsx @@ -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 = () => { + const [createModalVisible, handleModalVisible] = useState(false); + const [updateModalVisible, handleUpdateModalVisible] = + useState(false); + const [stepFormValues, setStepFormValues] = useState({}); + const actionRef = useRef(); + const [row, setRow] = useState(); + const [selectedRowsState, setSelectedRows] = useState([]); + const columns: ProDescriptionsItemProps[] = [ + { + 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) => ( + <> + { + handleUpdateModalVisible(true); + setStepFormValues(record); + }} + > + 编辑 + + + 删除 + + ), + }, + ]; + + return ( + + + headerTitle="Sftp配置表格" + actionRef={actionRef} + rowKey="id" + search={{ + labelWidth: 120, + }} + toolBarRender={() => [ + , + ]} + 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 && ( + + 已选择{' '} + {selectedRowsState.length}{' '} + 项   + + } + > + + + + )} + handleModalVisible(false)} + modalVisible={createModalVisible} + > + + onSubmit={async (value) => { + const success = await handleAdd(value); + if (success) { + handleModalVisible(false); + if (actionRef.current) { + actionRef.current.reload(); + } + } + }} + rowKey="id" + type="form" + columns={columns} + /> + + {stepFormValues && Object.keys(stepFormValues).length ? ( + { + 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} + + { + setRow(undefined); + }} + closable={false} + > + {row?.name && ( + + column={2} + title={row?.name} + request={async () => ({ + data: row || {}, + })} + params={{ + id: row?.name, + }} + columns={columns} + /> + )} + + + ); +}; + +export default User; diff --git a/src/pages/Social/components/CreateForm.tsx b/src/pages/Social/components/CreateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/Social/components/CreateForm.tsx @@ -0,0 +1,26 @@ +import { Modal } from 'antd'; +import React, { PropsWithChildren } from 'react'; + +interface CreateFormProps { + modalVisible: boolean; + onCancel: () => void; +} + +const CreateForm: React.FC> = (props) => { + const { modalVisible, onCancel } = props; + + return ( + onCancel()} + footer={null} + > + {props.children} + + ); +}; + +export default CreateForm; diff --git a/src/pages/Social/components/UpdateForm.tsx b/src/pages/Social/components/UpdateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/Social/components/UpdateForm.tsx @@ -0,0 +1,26 @@ +import { Modal } from 'antd'; +import React, { PropsWithChildren } from 'react'; + +interface CreateFormProps { + modalVisible: boolean; + onCancel: () => void; +} + +const CreateForm: React.FC> = (props) => { + const { modalVisible, onCancel } = props; + + return ( + onCancel()} + footer={null} + > + {props.children} + + ); +}; + +export default CreateForm; diff --git a/src/pages/Social/index.tsx b/src/pages/Social/index.tsx new file mode 100644 index 0000000..bd7ffe7 --- /dev/null +++ b/src/pages/Social/index.tsx @@ -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 = () => { + const [createModalVisible, handleModalVisible] = useState(false); + const [updateModalVisible, handleUpdateModalVisible] = + useState(false); + const [stepFormValues, setStepFormValues] = useState({}); + const actionRef = useRef(); + const [row, setRow] = useState(); + const [selectedRowsState, setSelectedRows] = useState([]); + const columns: ProDescriptionsItemProps[] = [ + { + 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) => ( + <> + { + handleUpdateModalVisible(true); + setStepFormValues(record); + }} + > + 编辑 + + + 删除 + + ), + }, + ]; + + return ( + + + headerTitle="社会用户表格" + actionRef={actionRef} + rowKey="id" + search={{ + labelWidth: 120, + }} + toolBarRender={() => [ + , + ]} + 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 && ( + + 已选择{' '} + {selectedRowsState.length}{' '} + 项   + + } + > + + + + )} + handleModalVisible(false)} + modalVisible={createModalVisible} + > + + onSubmit={async (value) => { + const success = await handleAdd(value); + if (success) { + handleModalVisible(false); + if (actionRef.current) { + actionRef.current.reload(); + } + } + }} + rowKey="id" + type="form" + columns={columns} + /> + + {stepFormValues && Object.keys(stepFormValues).length ? ( + { + 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} + + { + setRow(undefined); + }} + closable={false} + > + {row?.name && ( + + column={2} + title={row?.name} + request={async () => ({ + data: row || {}, + })} + params={{ + id: row?.name, + }} + columns={columns} + /> + )} + + + ); +}; + +export default User; diff --git a/src/pages/Tencent/components/CreateForm.tsx b/src/pages/Tencent/components/CreateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/Tencent/components/CreateForm.tsx @@ -0,0 +1,26 @@ +import { Modal } from 'antd'; +import React, { PropsWithChildren } from 'react'; + +interface CreateFormProps { + modalVisible: boolean; + onCancel: () => void; +} + +const CreateForm: React.FC> = (props) => { + const { modalVisible, onCancel } = props; + + return ( + onCancel()} + footer={null} + > + {props.children} + + ); +}; + +export default CreateForm; diff --git a/src/pages/Tencent/components/UpdateForm.tsx b/src/pages/Tencent/components/UpdateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/Tencent/components/UpdateForm.tsx @@ -0,0 +1,26 @@ +import { Modal } from 'antd'; +import React, { PropsWithChildren } from 'react'; + +interface CreateFormProps { + modalVisible: boolean; + onCancel: () => void; +} + +const CreateForm: React.FC> = (props) => { + const { modalVisible, onCancel } = props; + + return ( + onCancel()} + footer={null} + > + {props.children} + + ); +}; + +export default CreateForm; diff --git a/src/pages/Tencent/index.tsx b/src/pages/Tencent/index.tsx new file mode 100644 index 0000000..f0efa75 --- /dev/null +++ b/src/pages/Tencent/index.tsx @@ -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 = () => { + const [createModalVisible, handleModalVisible] = useState(false); + const [updateModalVisible, handleUpdateModalVisible] = + useState(false); + const [stepFormValues, setStepFormValues] = useState({}); + const actionRef = useRef(); + const [row, setRow] = useState(); + const [selectedRowsState, setSelectedRows] = useState([]); + const columns: ProDescriptionsItemProps[] = [ + { + 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) => ( + <> + { + handleUpdateModalVisible(true); + setStepFormValues(record); + }} + > + 编辑 + + + 删除 + + ), + }, + ]; + + return ( + + + headerTitle="腾讯云配置表格" + actionRef={actionRef} + rowKey="id" + search={{ + labelWidth: 120, + }} + toolBarRender={() => [ + , + ]} + 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 && ( + + 已选择{' '} + {selectedRowsState.length}{' '} + 项   + + } + > + + + + )} + handleModalVisible(false)} + modalVisible={createModalVisible} + > + + onSubmit={async (value) => { + const success = await handleAdd(value); + if (success) { + handleModalVisible(false); + if (actionRef.current) { + actionRef.current.reload(); + } + } + }} + rowKey="id" + type="form" + columns={columns} + /> + + {stepFormValues && Object.keys(stepFormValues).length ? ( + { + 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} + + { + setRow(undefined); + }} + closable={false} + > + {row?.name && ( + + column={2} + title={row?.name} + request={async () => ({ + data: row || {}, + })} + params={{ + id: row?.name, + }} + columns={columns} + /> + )} + + + ); +}; + +export default User; diff --git a/src/pages/Up/components/CreateForm.tsx b/src/pages/Up/components/CreateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/Up/components/CreateForm.tsx @@ -0,0 +1,26 @@ +import { Modal } from 'antd'; +import React, { PropsWithChildren } from 'react'; + +interface CreateFormProps { + modalVisible: boolean; + onCancel: () => void; +} + +const CreateForm: React.FC> = (props) => { + const { modalVisible, onCancel } = props; + + return ( + onCancel()} + footer={null} + > + {props.children} + + ); +}; + +export default CreateForm; diff --git a/src/pages/Up/components/UpdateForm.tsx b/src/pages/Up/components/UpdateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/Up/components/UpdateForm.tsx @@ -0,0 +1,26 @@ +import { Modal } from 'antd'; +import React, { PropsWithChildren } from 'react'; + +interface CreateFormProps { + modalVisible: boolean; + onCancel: () => void; +} + +const CreateForm: React.FC> = (props) => { + const { modalVisible, onCancel } = props; + + return ( + onCancel()} + footer={null} + > + {props.children} + + ); +}; + +export default CreateForm; diff --git a/src/pages/Up/index.tsx b/src/pages/Up/index.tsx new file mode 100644 index 0000000..7445345 --- /dev/null +++ b/src/pages/Up/index.tsx @@ -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 = () => { + const [createModalVisible, handleModalVisible] = useState(false); + const [updateModalVisible, handleUpdateModalVisible] = + useState(false); + const [stepFormValues, setStepFormValues] = useState({}); + const actionRef = useRef(); + const [row, setRow] = useState(); + const [selectedRowsState, setSelectedRows] = useState([]); + const columns: ProDescriptionsItemProps[] = [ + { + 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) => ( + <> + { + handleUpdateModalVisible(true); + setStepFormValues(record); + }} + > + 编辑 + + + 删除 + + ), + }, + ]; + + return ( + + + headerTitle="又拍云配置表格" + actionRef={actionRef} + rowKey="id" + search={{ + labelWidth: 120, + }} + toolBarRender={() => [ + , + ]} + 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 && ( + + 已选择{' '} + {selectedRowsState.length}{' '} + 项   + + } + > + + + + )} + handleModalVisible(false)} + modalVisible={createModalVisible} + > + + onSubmit={async (value) => { + const success = await handleAdd(value); + if (success) { + handleModalVisible(false); + if (actionRef.current) { + actionRef.current.reload(); + } + } + }} + rowKey="id" + type="form" + columns={columns} + /> + + {stepFormValues && Object.keys(stepFormValues).length ? ( + { + 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} + + { + setRow(undefined); + }} + closable={false} + > + {row?.name && ( + + column={2} + title={row?.name} + request={async () => ({ + data: row || {}, + })} + params={{ + id: row?.name, + }} + columns={columns} + /> + )} + + + ); +}; + +export default User;