diff --git a/.umirc.ts b/.umirc.ts index b3d250c..8b22404 100644 --- a/.umirc.ts +++ b/.umirc.ts @@ -44,28 +44,28 @@ export default defineConfig({ { name: ' 用户表', path: '/user/users', - component: "./Users", - layout:true, + component: './Users', + layout: true, }, { name: ' 角色表', path: '/user/role', - component: "./Role", - layout:true, + component: './Role', + layout: true, }, { name: ' 权限表', path: '/user/permission', - component: "./Permission", - layout:true, + component: './Permission', + layout: true, }, { name: ' 社会用户表', path: '/user/social', - component: "./Social", - layout:true, + component: './Social', + layout: true, }, - ] + ], }, { name: ' 存储配置', @@ -74,40 +74,112 @@ export default defineConfig({ { name: ' 阿里云配置表', path: '/storage/ali', - component: "./Ali", - layout:true, + component: './Ali', + layout: true, }, { name: ' minio配置表', path: '/storage/minio', - component: "./Minio", - layout:true, + component: './Minio', + layout: true, }, { name: ' 七牛云配置表', path: '/storage/qiniu', - component: "./Qiniu", - layout:true, + component: './Qiniu', + layout: true, }, { name: ' 腾讯云配置表', path: '/storage/tencent', - component: "./Tencent", - layout:true, + component: './Tencent', + layout: true, }, { name: ' 又拍云配置表', path: '/storage/up', - component: "./Up", - layout:true, + component: './Up', + layout: true, }, { name: ' sftp配置表', path: '/storage/sftp', - component: "./Sftp", - layout:true, + component: './Sftp', + layout: true, }, - ] + ], + }, + { + name: '分享配置', + path: '/share', + routes: [ + { + name: '分享圈', + path: '/share/share-circle', + component: './Share/Share-circle', + layout: true, + }, + { + name: '评论回复表', + path: '/share/remark-answer', + component: './Share/Remark-answer', + layout: true, + }, + { + name: '分享详情表', + path: '/share/detail', + component: './Share/Detail', + layout: true, + }, + { + name: '详情/标签映射表', + path: '/share/detail-tag', + component: './Share/Detail-tag', + layout: true, + }, + { + name: '消息表', + path: '/share/message', + component: './Share/Message', + layout: true, + }, + { + name: '分享详情标签表', + path: '/share/tags', + component: './Share/Tags', + layout: true, + }, + { + name: '分享链接', + path: '/share/url', + component: './Share/Url', + layout: true, + }, + ], + }, + { + name: '系统配置', + path: '/system', + routes: [ + { + name: '系统设置表', + path: '/system/config', + component: './System/Config', + layout: true, + }, + { + name: '系统日志表', + path: '/system/log', + component: './System/Log', + layout: true, + }, + { + name: '第三方登录配置表', + path: '/system/oauth', + component: './System/Oauth', + layout: true, + }, + ], }, ], npmClient: 'yarn', diff --git a/src/pages/Share/Detail-tag/component/CreateForm.tsx b/src/pages/Share/Detail-tag/component/CreateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/Share/Detail-tag/component/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/Share/Detail-tag/component/UpdateForm.tsx b/src/pages/Share/Detail-tag/component/UpdateForm.tsx new file mode 100644 index 0000000..32fecde --- /dev/null +++ b/src/pages/Share/Detail-tag/component/UpdateForm.tsx @@ -0,0 +1,138 @@ +import { + ProFormDateTimePicker, + ProFormRadio, + ProFormSelect, + ProFormText, + ProFormTextArea, + StepsForm, +} from '@ant-design/pro-components'; +import { Modal } from 'antd'; +import React from 'react'; + +export interface FormValueType extends Partial { + target?: string; + template?: string; + type?: string; + time?: string; + frequency?: string; +} + +export interface UpdateFormProps { + onCancel: (flag?: boolean, formVals?: FormValueType) => void; + onSubmit: (values: FormValueType) => Promise; + updateModalVisible: boolean; + values: Partial; +} + +const UpdateForm: React.FC = (props) => ( + { + return ( + props.onCancel()} + > + {dom} + + ); + }} + onFinish={props.onSubmit} + > + + + + + + + + + + + + + + +); + +export default UpdateForm; diff --git a/src/pages/Share/Detail-tag/index.tsx b/src/pages/Share/Detail-tag/index.tsx new file mode 100644 index 0000000..8cab170 --- /dev/null +++ b/src/pages/Share/Detail-tag/index.tsx @@ -0,0 +1,268 @@ +import CreateForm from '@/pages/Table/components/CreateForm'; +import UpdateForm, { FormValueType } from '@/pages/Table/components/UpdateForm'; +import { + addUser, + deleteUser, + modifyUser, + queryUserList, +} from '@/services/demo/UserController'; +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'; + +/** + * 添加节点 + * @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 Detail_tag: 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: 'id', + tip: 'id是唯一的 key', + formItemProps: { + rules: [ + { + required: true, + message: 'id为必填项', + }, + ], + }, + }, + { + title: '详情id', + dataIndex: 'detail_id', + valueType: 'text', + }, + { + title: '标签id', + dataIndex: 'tag_id', + valueType: 'text', + }, + { + 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 Detail_tag; diff --git a/src/pages/Share/Detail/component/CreateForm.tsx b/src/pages/Share/Detail/component/CreateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/Share/Detail/component/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/Share/Detail/component/UpdateForm.tsx b/src/pages/Share/Detail/component/UpdateForm.tsx new file mode 100644 index 0000000..32fecde --- /dev/null +++ b/src/pages/Share/Detail/component/UpdateForm.tsx @@ -0,0 +1,138 @@ +import { + ProFormDateTimePicker, + ProFormRadio, + ProFormSelect, + ProFormText, + ProFormTextArea, + StepsForm, +} from '@ant-design/pro-components'; +import { Modal } from 'antd'; +import React from 'react'; + +export interface FormValueType extends Partial { + target?: string; + template?: string; + type?: string; + time?: string; + frequency?: string; +} + +export interface UpdateFormProps { + onCancel: (flag?: boolean, formVals?: FormValueType) => void; + onSubmit: (values: FormValueType) => Promise; + updateModalVisible: boolean; + values: Partial; +} + +const UpdateForm: React.FC = (props) => ( + { + return ( + props.onCancel()} + > + {dom} + + ); + }} + onFinish={props.onSubmit} + > + + + + + + + + + + + + + + +); + +export default UpdateForm; diff --git a/src/pages/Share/Detail/index.tsx b/src/pages/Share/Detail/index.tsx new file mode 100644 index 0000000..4767d4c --- /dev/null +++ b/src/pages/Share/Detail/index.tsx @@ -0,0 +1,288 @@ +import CreateForm from '@/pages/Table/components/CreateForm'; +import UpdateForm, { FormValueType } from '@/pages/Table/components/UpdateForm'; +import { + addUser, + deleteUser, + modifyUser, + queryUserList, +} from '@/services/demo/UserController'; +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'; + +/** + * 添加节点 + * @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 Detail: 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: 'name', + tip: 'id是唯一的 key', + formItemProps: { + rules: [ + { + required: true, + message: 'id为必填项', + }, + ], + }, + }, + { + title: '分享圈id', + dataIndex: 'circle_id', + valueType: 'text', + }, + { + title: '用户id', + dataIndex: 'user_id', + valueType: 'text', + }, + { + title: '标题', + dataIndex: 'title', + valueType: 'text', + }, + { + title: '内容', + dataIndex: 'description', + valueType: 'text', + }, + { + title: '创建者', + dataIndex: 'created_by', + valueType: 'text', + }, + { + title: '创建时间', + dataIndex: 'created_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 Detail; diff --git a/src/pages/Share/Message/component/CreateForm.tsx b/src/pages/Share/Message/component/CreateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/Share/Message/component/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/Share/Message/component/UpdateForm.tsx b/src/pages/Share/Message/component/UpdateForm.tsx new file mode 100644 index 0000000..32fecde --- /dev/null +++ b/src/pages/Share/Message/component/UpdateForm.tsx @@ -0,0 +1,138 @@ +import { + ProFormDateTimePicker, + ProFormRadio, + ProFormSelect, + ProFormText, + ProFormTextArea, + StepsForm, +} from '@ant-design/pro-components'; +import { Modal } from 'antd'; +import React from 'react'; + +export interface FormValueType extends Partial { + target?: string; + template?: string; + type?: string; + time?: string; + frequency?: string; +} + +export interface UpdateFormProps { + onCancel: (flag?: boolean, formVals?: FormValueType) => void; + onSubmit: (values: FormValueType) => Promise; + updateModalVisible: boolean; + values: Partial; +} + +const UpdateForm: React.FC = (props) => ( + { + return ( + props.onCancel()} + > + {dom} + + ); + }} + onFinish={props.onSubmit} + > + + + + + + + + + + + + + + +); + +export default UpdateForm; diff --git a/src/pages/Share/Message/index.tsx b/src/pages/Share/Message/index.tsx new file mode 100644 index 0000000..d0c27e3 --- /dev/null +++ b/src/pages/Share/Message/index.tsx @@ -0,0 +1,273 @@ +import CreateForm from '@/pages/Table/components/CreateForm'; +import UpdateForm, { FormValueType } from '@/pages/Table/components/UpdateForm'; +import { + addUser, + deleteUser, + modifyUser, + queryUserList, +} from '@/services/demo/UserController'; +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'; + +/** + * 添加节点 + * @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 Message: 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: 'id', + tip: 'id是唯一的 key', + formItemProps: { + rules: [ + { + required: true, + message: 'id为必填项', + }, + ], + }, + }, + { + title: '创建者', + dataIndex: 'created_by', + valueType: 'text', + }, + { + title: '创建时间', + dataIndex: 'created_time', + valueType: 'dateTime', + }, + { + title: '内容', + dataIndex: 'content', + valueType: 'text', + }, + { + 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 Message; diff --git a/src/pages/Share/Remark-answer/component/CreateForm.tsx b/src/pages/Share/Remark-answer/component/CreateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/Share/Remark-answer/component/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/Share/Remark-answer/component/UpdateForm.tsx b/src/pages/Share/Remark-answer/component/UpdateForm.tsx new file mode 100644 index 0000000..32fecde --- /dev/null +++ b/src/pages/Share/Remark-answer/component/UpdateForm.tsx @@ -0,0 +1,138 @@ +import { + ProFormDateTimePicker, + ProFormRadio, + ProFormSelect, + ProFormText, + ProFormTextArea, + StepsForm, +} from '@ant-design/pro-components'; +import { Modal } from 'antd'; +import React from 'react'; + +export interface FormValueType extends Partial { + target?: string; + template?: string; + type?: string; + time?: string; + frequency?: string; +} + +export interface UpdateFormProps { + onCancel: (flag?: boolean, formVals?: FormValueType) => void; + onSubmit: (values: FormValueType) => Promise; + updateModalVisible: boolean; + values: Partial; +} + +const UpdateForm: React.FC = (props) => ( + { + return ( + props.onCancel()} + > + {dom} + + ); + }} + onFinish={props.onSubmit} + > + + + + + + + + + + + + + + +); + +export default UpdateForm; diff --git a/src/pages/Share/Remark-answer/index.tsx b/src/pages/Share/Remark-answer/index.tsx new file mode 100644 index 0000000..f9d3404 --- /dev/null +++ b/src/pages/Share/Remark-answer/index.tsx @@ -0,0 +1,283 @@ +import CreateForm from '@/pages/Table/components/CreateForm'; +import UpdateForm, { FormValueType } from '@/pages/Table/components/UpdateForm'; +import { + addUser, + deleteUser, + modifyUser, + queryUserList, +} from '@/services/demo/UserController'; +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'; + +/** + * 添加节点 + * @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 Remark_answer: 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: 'name', + tip: 'id是唯一的 key', + formItemProps: { + rules: [ + { + required: true, + message: 'id为必填项', + }, + ], + }, + }, + { + title: '详情id', + dataIndex: 'detail_id', + valueType: 'text', + }, + { + title: '评论类型', + dataIndex: 'reply_type', + valueType: 'text', + }, + { + title: '评论内容', + dataIndex: 'content', + valueType: 'text', + }, + { + title: '评论者', + dataIndex: 'reply_author', + valueType: 'text', + }, + { + title: '创建时间', + dataIndex: 'created_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 Remark_answer; diff --git a/src/pages/Share/Share-circle/components/CreateForm.tsx b/src/pages/Share/Share-circle/components/CreateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/Share/Share-circle/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/Share/Share-circle/components/UpdateForm.tsx b/src/pages/Share/Share-circle/components/UpdateForm.tsx new file mode 100644 index 0000000..32fecde --- /dev/null +++ b/src/pages/Share/Share-circle/components/UpdateForm.tsx @@ -0,0 +1,138 @@ +import { + ProFormDateTimePicker, + ProFormRadio, + ProFormSelect, + ProFormText, + ProFormTextArea, + StepsForm, +} from '@ant-design/pro-components'; +import { Modal } from 'antd'; +import React from 'react'; + +export interface FormValueType extends Partial { + target?: string; + template?: string; + type?: string; + time?: string; + frequency?: string; +} + +export interface UpdateFormProps { + onCancel: (flag?: boolean, formVals?: FormValueType) => void; + onSubmit: (values: FormValueType) => Promise; + updateModalVisible: boolean; + values: Partial; +} + +const UpdateForm: React.FC = (props) => ( + { + return ( + props.onCancel()} + > + {dom} + + ); + }} + onFinish={props.onSubmit} + > + + + + + + + + + + + + + + +); + +export default UpdateForm; diff --git a/src/pages/Share/Share-circle/index.tsx b/src/pages/Share/Share-circle/index.tsx new file mode 100644 index 0000000..e165636 --- /dev/null +++ b/src/pages/Share/Share-circle/index.tsx @@ -0,0 +1,283 @@ +import { + addUser, + deleteUser, + modifyUser, + queryUserList, +} from '@/services/demo/UserController'; +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'; + +/** + * 添加节点 + * @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 Share_circle: 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: 'id', + tip: 'id是唯一的 key', + formItemProps: { + rules: [ + { + required: true, + message: 'id为必填项', + }, + ], + }, + }, + { + title: '名称', + dataIndex: 'name', + valueType: 'text', + }, + { + title: '描述', + dataIndex: 'description', + valueType: 'text', + }, + { + title: '创建者', + dataIndex: 'created_by', + valueType: 'text', + }, + { + title: '创建时间', + dataIndex: 'created_time', + valueType: 'dateTime', + }, + { + title: '更新时间', + dataIndex: 'updata_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 Share_circle; diff --git a/src/pages/Share/Tags/component/CreateForm.tsx b/src/pages/Share/Tags/component/CreateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/Share/Tags/component/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/Share/Tags/component/UpdateForm.tsx b/src/pages/Share/Tags/component/UpdateForm.tsx new file mode 100644 index 0000000..32fecde --- /dev/null +++ b/src/pages/Share/Tags/component/UpdateForm.tsx @@ -0,0 +1,138 @@ +import { + ProFormDateTimePicker, + ProFormRadio, + ProFormSelect, + ProFormText, + ProFormTextArea, + StepsForm, +} from '@ant-design/pro-components'; +import { Modal } from 'antd'; +import React from 'react'; + +export interface FormValueType extends Partial { + target?: string; + template?: string; + type?: string; + time?: string; + frequency?: string; +} + +export interface UpdateFormProps { + onCancel: (flag?: boolean, formVals?: FormValueType) => void; + onSubmit: (values: FormValueType) => Promise; + updateModalVisible: boolean; + values: Partial; +} + +const UpdateForm: React.FC = (props) => ( + { + return ( + props.onCancel()} + > + {dom} + + ); + }} + onFinish={props.onSubmit} + > + + + + + + + + + + + + + + +); + +export default UpdateForm; diff --git a/src/pages/Share/Tags/index.tsx b/src/pages/Share/Tags/index.tsx new file mode 100644 index 0000000..a9110a1 --- /dev/null +++ b/src/pages/Share/Tags/index.tsx @@ -0,0 +1,273 @@ +import CreateForm from '@/pages/Table/components/CreateForm'; +import UpdateForm, { FormValueType } from '@/pages/Table/components/UpdateForm'; +import { + addUser, + deleteUser, + modifyUser, + queryUserList, +} from '@/services/demo/UserController'; +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'; + +/** + * 添加节点 + * @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 Tags: 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: 'id', + tip: 'id是唯一的 key', + formItemProps: { + rules: [ + { + required: true, + message: 'id为必填项', + }, + ], + }, + }, + { + title: '标签名', + dataIndex: 'tag_name', + valueType: 'text', + }, + { + title: '创建者', + dataIndex: 'created_by', + valueType: 'text', + }, + { + title: '创建时间', + dataIndex: 'created_date', + 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 Tags; diff --git a/src/pages/Share/Url/component/CreateForm.tsx b/src/pages/Share/Url/component/CreateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/Share/Url/component/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/Share/Url/component/UpdateForm.tsx b/src/pages/Share/Url/component/UpdateForm.tsx new file mode 100644 index 0000000..32fecde --- /dev/null +++ b/src/pages/Share/Url/component/UpdateForm.tsx @@ -0,0 +1,138 @@ +import { + ProFormDateTimePicker, + ProFormRadio, + ProFormSelect, + ProFormText, + ProFormTextArea, + StepsForm, +} from '@ant-design/pro-components'; +import { Modal } from 'antd'; +import React from 'react'; + +export interface FormValueType extends Partial { + target?: string; + template?: string; + type?: string; + time?: string; + frequency?: string; +} + +export interface UpdateFormProps { + onCancel: (flag?: boolean, formVals?: FormValueType) => void; + onSubmit: (values: FormValueType) => Promise; + updateModalVisible: boolean; + values: Partial; +} + +const UpdateForm: React.FC = (props) => ( + { + return ( + props.onCancel()} + > + {dom} + + ); + }} + onFinish={props.onSubmit} + > + + + + + + + + + + + + + + +); + +export default UpdateForm; diff --git a/src/pages/Share/Url/index.tsx b/src/pages/Share/Url/index.tsx new file mode 100644 index 0000000..57b119f --- /dev/null +++ b/src/pages/Share/Url/index.tsx @@ -0,0 +1,288 @@ +import CreateForm from '@/pages/Table/components/CreateForm'; +import UpdateForm, { FormValueType } from '@/pages/Table/components/UpdateForm'; +import { + addUser, + deleteUser, + modifyUser, + queryUserList, +} from '@/services/demo/UserController'; +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'; + +/** + * 添加节点 + * @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 Url: 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: 'id', + tip: 'id是唯一的 key', + formItemProps: { + rules: [ + { + required: true, + message: 'id为必填项', + }, + ], + }, + }, + { + title: '链接', + dataIndex: 'url', + valueType: 'text', + }, + { + title: '类型', + dataIndex: 'type', + valueType: 'text', + }, + { + title: '密码', + dataIndex: 'password', + valueType: 'text', + }, + { + title: '描述', + dataIndex: 'description', + valueType: 'text', + }, + { + title: '创建者', + dataIndex: 'created_by', + valueType: 'text', + }, + { + title: '创建时间', + dataIndex: 'created_date', + valueType: 'dateTime', + }, + { + title: '操作', + dataIndex: 'option', + valueType: 'option', + render: (_, record) => ( + <> + { + handleUpdateModalVisible(true); + setStepFormValues(record); + }} + > + 编辑 + + + 删除f + + ), + }, + ]; + + 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 Url; diff --git a/src/pages/System/Config/component/CreateForm.tsx b/src/pages/System/Config/component/CreateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/System/Config/component/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/System/Config/component/UpdateForm.tsx b/src/pages/System/Config/component/UpdateForm.tsx new file mode 100644 index 0000000..32fecde --- /dev/null +++ b/src/pages/System/Config/component/UpdateForm.tsx @@ -0,0 +1,138 @@ +import { + ProFormDateTimePicker, + ProFormRadio, + ProFormSelect, + ProFormText, + ProFormTextArea, + StepsForm, +} from '@ant-design/pro-components'; +import { Modal } from 'antd'; +import React from 'react'; + +export interface FormValueType extends Partial { + target?: string; + template?: string; + type?: string; + time?: string; + frequency?: string; +} + +export interface UpdateFormProps { + onCancel: (flag?: boolean, formVals?: FormValueType) => void; + onSubmit: (values: FormValueType) => Promise; + updateModalVisible: boolean; + values: Partial; +} + +const UpdateForm: React.FC = (props) => ( + { + return ( + props.onCancel()} + > + {dom} + + ); + }} + onFinish={props.onSubmit} + > + + + + + + + + + + + + + + +); + +export default UpdateForm; diff --git a/src/pages/System/Config/index.tsx b/src/pages/System/Config/index.tsx new file mode 100644 index 0000000..04ba972 --- /dev/null +++ b/src/pages/System/Config/index.tsx @@ -0,0 +1,273 @@ +import CreateForm from '@/pages/Table/components/CreateForm'; +import UpdateForm, { FormValueType } from '@/pages/Table/components/UpdateForm'; +import { + addUser, + deleteUser, + modifyUser, + queryUserList, +} from '@/services/demo/UserController'; +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'; + +/** + * 添加节点 + * @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 Config: 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: 'config_name', + tip: '配置名称是唯一的 key', + formItemProps: { + rules: [ + { + required: true, + message: '配置名称为必填项', + }, + ], + }, + }, + { + title: '设置值', + dataIndex: 'config_value', + valueType: 'text', + }, + { + title: '创建者', + dataIndex: 'create_by', + valueType: 'text', + }, + { + title: '创建时间', + dataIndex: 'creat_date', + 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 Config; diff --git a/src/pages/System/Log/component/CreateForm.tsx b/src/pages/System/Log/component/CreateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/System/Log/component/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/System/Log/component/UpdateForm.tsx b/src/pages/System/Log/component/UpdateForm.tsx new file mode 100644 index 0000000..32fecde --- /dev/null +++ b/src/pages/System/Log/component/UpdateForm.tsx @@ -0,0 +1,138 @@ +import { + ProFormDateTimePicker, + ProFormRadio, + ProFormSelect, + ProFormText, + ProFormTextArea, + StepsForm, +} from '@ant-design/pro-components'; +import { Modal } from 'antd'; +import React from 'react'; + +export interface FormValueType extends Partial { + target?: string; + template?: string; + type?: string; + time?: string; + frequency?: string; +} + +export interface UpdateFormProps { + onCancel: (flag?: boolean, formVals?: FormValueType) => void; + onSubmit: (values: FormValueType) => Promise; + updateModalVisible: boolean; + values: Partial; +} + +const UpdateForm: React.FC = (props) => ( + { + return ( + props.onCancel()} + > + {dom} + + ); + }} + onFinish={props.onSubmit} + > + + + + + + + + + + + + + + +); + +export default UpdateForm; diff --git a/src/pages/System/Log/index.tsx b/src/pages/System/Log/index.tsx new file mode 100644 index 0000000..1bf757c --- /dev/null +++ b/src/pages/System/Log/index.tsx @@ -0,0 +1,278 @@ +import CreateForm from '@/pages/Table/components/CreateForm'; +import UpdateForm, { FormValueType } from '@/pages/Table/components/UpdateForm'; +import { + addUser, + deleteUser, + modifyUser, + queryUserList, +} from '@/services/demo/UserController'; +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'; + +/** + * 添加节点 + * @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 Log: 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: 'Log_title', + tip: '日志名称是唯一的 key', + formItemProps: { + rules: [ + { + required: true, + message: '日志名称为必填项', + }, + ], + }, + }, + { + title: '日志类型', + dataIndex: 'log_type', + valueType: 'text', + }, + { + title: '创建者', + dataIndex: 'create_by', + valueType: 'text', + }, + { + title: '创建时间', + dataIndex: 'creat_date', + valueType: 'dateTime', + }, + { + title: '配置信息', + dataIndex: 'remark', + valueType: 'text', + }, + { + 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 Log; diff --git a/src/pages/System/Oauth/component/CreateForm.tsx b/src/pages/System/Oauth/component/CreateForm.tsx new file mode 100644 index 0000000..e5233db --- /dev/null +++ b/src/pages/System/Oauth/component/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/System/Oauth/component/UpdateForm.tsx b/src/pages/System/Oauth/component/UpdateForm.tsx new file mode 100644 index 0000000..32fecde --- /dev/null +++ b/src/pages/System/Oauth/component/UpdateForm.tsx @@ -0,0 +1,138 @@ +import { + ProFormDateTimePicker, + ProFormRadio, + ProFormSelect, + ProFormText, + ProFormTextArea, + StepsForm, +} from '@ant-design/pro-components'; +import { Modal } from 'antd'; +import React from 'react'; + +export interface FormValueType extends Partial { + target?: string; + template?: string; + type?: string; + time?: string; + frequency?: string; +} + +export interface UpdateFormProps { + onCancel: (flag?: boolean, formVals?: FormValueType) => void; + onSubmit: (values: FormValueType) => Promise; + updateModalVisible: boolean; + values: Partial; +} + +const UpdateForm: React.FC = (props) => ( + { + return ( + props.onCancel()} + > + {dom} + + ); + }} + onFinish={props.onSubmit} + > + + + + + + + + + + + + + + +); + +export default UpdateForm; diff --git a/src/pages/System/Oauth/index.tsx b/src/pages/System/Oauth/index.tsx new file mode 100644 index 0000000..2eee777 --- /dev/null +++ b/src/pages/System/Oauth/index.tsx @@ -0,0 +1,283 @@ +import CreateForm from '@/pages/Table/components/CreateForm'; +import UpdateForm, { FormValueType } from '@/pages/Table/components/UpdateForm'; +import { + addUser, + deleteUser, + modifyUser, + queryUserList, +} from '@/services/demo/UserController'; +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'; + +/** + * 添加节点 + * @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 Oauth: 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: 'client_type', + tip: '协议方是唯一的 key', + formItemProps: { + rules: [ + { + required: true, + message: '协议方为必填项', + }, + ], + }, + }, + { + title: '第三方id', + dataIndex: 'client_id', + valueType: 'text', + }, + { + title: '第三方密码', + dataIndex: 'client_secret', + valueType: 'text', + }, + { + title: '网址导航', + dataIndex: 'redirect_uri', + valueType: 'text', + }, + { + title: '创建者', + dataIndex: 'created_by', + valueType: 'text', + }, + { + title: '创建时间', + dataIndex: 'created_date', + 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 Oauth;