Merge pull request 'dev' (#2) from dev into master
Reviewed-on: https://git.landaiqing.space/Schisandra-Cloud-Storage/schisandra-cloud-storage-front-umi/pulls/2
This commit is contained in:
126
.umirc.ts
126
.umirc.ts
@@ -31,11 +31,11 @@ export default defineConfig({
|
||||
path: '/access',
|
||||
component: './Access',
|
||||
},
|
||||
{
|
||||
name: ' CRUD 示例',
|
||||
path: '/table',
|
||||
component: './Table',
|
||||
},
|
||||
/*{
|
||||
name: ' 系统监控',
|
||||
path: '/redis',
|
||||
component: './Redis',
|
||||
},*/
|
||||
{
|
||||
name: ' 用户配置',
|
||||
path: '/user',
|
||||
@@ -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',
|
||||
|
||||
@@ -11,10 +11,14 @@
|
||||
"start": "npm run dev"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/charts": "^2.1.1",
|
||||
"@ant-design/icons": "^5.0.1",
|
||||
"@ant-design/pro-components": "^2.4.4",
|
||||
"@ant-design/pro-components": "^2.7.10",
|
||||
"@umijs/max": "^4.3.1",
|
||||
"antd": "^5.4.0",
|
||||
"echarts": "^5.5.1",
|
||||
"echarts-for-react": "^3.0.2",
|
||||
"react-calendar-heatmap": "^1.9.0",
|
||||
"yarn": "^1.22.22"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -109,21 +109,6 @@ const User: React.FC<unknown> = () => {
|
||||
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',
|
||||
@@ -139,15 +124,9 @@ const User: React.FC<unknown> = () => {
|
||||
dataIndex: 'user_agent',
|
||||
valueType: 'text',
|
||||
},
|
||||
|
||||
{
|
||||
title: '失败后最大重试次数',
|
||||
dataIndex: 'max_error_retry',
|
||||
default: '3',
|
||||
tip: '请求失败后最大的重试次数。默认3次。',
|
||||
valueType: 'text',
|
||||
},
|
||||
{
|
||||
title: '注册时间',
|
||||
title: '创建时间',
|
||||
dataIndex: 'create_time',
|
||||
valueType: 'dateTime',
|
||||
},
|
||||
|
||||
@@ -1,19 +1,319 @@
|
||||
import Guide from '@/components/Guide';
|
||||
import { trim } from '@/utils/format';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { useModel } from '@umijs/max';
|
||||
import React from 'react';
|
||||
import styles from './index.less';
|
||||
/** @format */
|
||||
import { ProCard, ProList } from '@ant-design/pro-components';
|
||||
import { Avatar, Card, Skeleton, Space, Tag } from 'antd';
|
||||
import Meta from 'antd/es/card/Meta';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
import { FunctionComponent, useEffect, useState } from 'react';
|
||||
import styles from './index.module.less';
|
||||
|
||||
const HomePage: React.FC = () => {
|
||||
const { name } = useModel('global');
|
||||
import aliyun from '@/assets/icons/aliyun.svg';
|
||||
import eye from '@/assets/icons/eye-outline.svg';
|
||||
import share from '@/assets/icons/share.svg';
|
||||
import standard_directory from '@/assets/icons/standard_directory.svg';
|
||||
import userInfo from '@/assets/icons/userInfo.svg';
|
||||
// import * as echarts from "echarts/core";
|
||||
|
||||
import 'react-calendar-heatmap/dist/styles.css';
|
||||
const defaultData = [
|
||||
{
|
||||
id: '1',
|
||||
name: '管理员1',
|
||||
content: '2024-07-01',
|
||||
image: aliyun,
|
||||
desc: 'IP:255.255.255',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '管理员2',
|
||||
content: '2024-06-01',
|
||||
image:
|
||||
'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
|
||||
desc: 'IP:255.255.255',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '管理员3',
|
||||
content: '2024-05-01',
|
||||
image:
|
||||
'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
|
||||
desc: 'IP:255.255.255',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: '管理员4',
|
||||
content: '2024-04-01',
|
||||
image:
|
||||
'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
|
||||
desc: 'IP:255.255.255',
|
||||
},
|
||||
];
|
||||
|
||||
type DataItem = (typeof defaultData)[number];
|
||||
const MainHome: FunctionComponent = () => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [dataSource, setDataSource] = useState<DataItem[]>(defaultData);
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
color: ['#F58080', '#47D8BE', '#F9A589'],
|
||||
data: ['活跃用户数量', '新增分享圈数量'],
|
||||
left: 'center',
|
||||
bottom: 'bottom',
|
||||
},
|
||||
grid: {
|
||||
top: 'middle',
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
height: '80%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [
|
||||
'2024-02-01',
|
||||
'2024-03-01',
|
||||
'2024-04-01',
|
||||
'2024-05-01',
|
||||
'2024-06-01',
|
||||
'2024-07-01',
|
||||
],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#999',
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#DDD',
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#333',
|
||||
},
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#999',
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '活跃用户数量',
|
||||
type: 'line',
|
||||
data: [800, 900, 220, 130, 660, 289],
|
||||
color: '#F58080',
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
color: {
|
||||
type: 'linear',
|
||||
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#FFCAD4', // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.4,
|
||||
color: '#F58080', // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#F58080', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
shadowColor: 'rgba(245,128,128, 0.5)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 7,
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#F58080',
|
||||
borderWidth: 10,
|
||||
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
shadowBlur: 100,*/
|
||||
borderColor: '#F58080',
|
||||
},
|
||||
smooth: true,
|
||||
},
|
||||
{
|
||||
name: '新增分享圈数量',
|
||||
type: 'line',
|
||||
data: [123, 568, 111, 222, 123, 56],
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
color: {
|
||||
type: 'linear',
|
||||
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#AAF487', // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.4,
|
||||
color: '#47D8BE', // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#47D8BE', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
shadowColor: 'rgba(71,216,190, 0.5)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 7,
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#AAF487',
|
||||
borderWidth: 10,
|
||||
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
shadowBlur: 100,*/
|
||||
borderColor: '#AAF487',
|
||||
},
|
||||
smooth: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 2000);
|
||||
}, []);
|
||||
return (
|
||||
<PageContainer ghost>
|
||||
<div className={styles.container}>
|
||||
<Guide name={trim(name)} />
|
||||
<>
|
||||
<div className={styles.home_content_main}>
|
||||
<div className={styles.home_content_head}>
|
||||
<div className={styles.home_content_head_left}>
|
||||
<Card
|
||||
style={{ width: '13.5vw', height: '21vh' }}
|
||||
loading={false}
|
||||
bordered
|
||||
hoverable
|
||||
>
|
||||
<Skeleton loading={loading} active avatar>
|
||||
<Meta
|
||||
avatar={<Avatar shape="square" size="large" src={userInfo} />}
|
||||
title="用户数量"
|
||||
description="This is the description"
|
||||
/>
|
||||
</Skeleton>
|
||||
</Card>
|
||||
<Card
|
||||
style={{ width: '13.5vw', height: '21vh' }}
|
||||
loading={false}
|
||||
bordered
|
||||
hoverable
|
||||
>
|
||||
<Skeleton loading={loading} active avatar>
|
||||
<Meta
|
||||
avatar={<Avatar shape="square" size="large" src={share} />}
|
||||
title="分享圈数量"
|
||||
description="This is the description"
|
||||
/>
|
||||
</Skeleton>
|
||||
</Card>
|
||||
<Card
|
||||
style={{ width: '13.5vw', height: '21vh' }}
|
||||
loading={false}
|
||||
bordered
|
||||
hoverable
|
||||
>
|
||||
<Skeleton loading={loading} active avatar>
|
||||
<Meta
|
||||
avatar={
|
||||
<Avatar
|
||||
shape="square"
|
||||
size="large"
|
||||
src={standard_directory}
|
||||
/>
|
||||
}
|
||||
title="文件总数"
|
||||
description="This is the description"
|
||||
/>
|
||||
</Skeleton>
|
||||
</Card>
|
||||
<Card
|
||||
style={{ width: '13.5vw', height: '21vh' }}
|
||||
loading={false}
|
||||
bordered
|
||||
hoverable
|
||||
>
|
||||
<Skeleton loading={loading} active avatar>
|
||||
<Meta
|
||||
avatar={<Avatar shape="square" size="large" src={eye} />}
|
||||
title="浏览总量"
|
||||
description="This is the description"
|
||||
/>
|
||||
</Skeleton>
|
||||
</Card>
|
||||
</div>
|
||||
<div style={{ width: '55%' }}>
|
||||
<ProCard bordered boxShadow>
|
||||
<Skeleton loading={loading} active>
|
||||
<ReactECharts option={option} />
|
||||
</Skeleton>
|
||||
</ProCard>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.home_content_list}>
|
||||
<ProCard bordered boxShadow style={{ width: '100%' }}>
|
||||
<ProList<DataItem>
|
||||
rowKey="id"
|
||||
headerTitle="管理员日志"
|
||||
dataSource={dataSource}
|
||||
showActions="hover"
|
||||
editable={{
|
||||
onSave: async (key, record, originRow) => {
|
||||
console.log(key, record, originRow);
|
||||
return true;
|
||||
},
|
||||
}}
|
||||
onDataSourceChange={setDataSource}
|
||||
metas={{
|
||||
title: {
|
||||
dataIndex: 'name',
|
||||
},
|
||||
avatar: {
|
||||
dataIndex: 'image',
|
||||
editable: false,
|
||||
},
|
||||
content: {
|
||||
dataIndex: 'content',
|
||||
},
|
||||
description: {
|
||||
dataIndex: 'desc',
|
||||
},
|
||||
subTitle: {
|
||||
render: () => {
|
||||
return (
|
||||
<Space size={0}>
|
||||
<Tag color="blue">Ant Design</Tag>
|
||||
<Tag color="#5BD8A6">TechUI</Tag>
|
||||
</Space>
|
||||
);
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</ProCard>
|
||||
</div>
|
||||
</div>
|
||||
</PageContainer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
export default MainHome;
|
||||
|
||||
@@ -130,17 +130,7 @@ const User: React.FC<unknown> = () => {
|
||||
valueType: 'text',
|
||||
},
|
||||
{
|
||||
title: 'file_host',
|
||||
dataIndex: 'file_host',
|
||||
valueType: 'text',
|
||||
},
|
||||
{
|
||||
title: 'download_host',
|
||||
dataIndex: 'download_host',
|
||||
valueType: 'text',
|
||||
},
|
||||
{
|
||||
title: '注册时间',
|
||||
title: '创建时间',
|
||||
dataIndex: 'create_time',
|
||||
valueType: 'dateTime',
|
||||
},
|
||||
|
||||
@@ -127,7 +127,7 @@ const User: React.FC<unknown> = () => {
|
||||
valueType: 'text',
|
||||
},
|
||||
{
|
||||
title: '注册时间',
|
||||
title: '创建时间',
|
||||
dataIndex: 'create_time',
|
||||
valueType: 'dateTime',
|
||||
},
|
||||
|
||||
@@ -130,26 +130,7 @@ const User: React.FC<unknown> = () => {
|
||||
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: '注册时间',
|
||||
title: '创建时间',
|
||||
dataIndex: 'create_time',
|
||||
valueType: 'dateTime',
|
||||
},
|
||||
|
||||
@@ -119,7 +119,7 @@ const User: React.FC<unknown> = () => {
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '注册时间',
|
||||
title: '创建时间',
|
||||
dataIndex: 'create_time',
|
||||
valueType: 'dateTime',
|
||||
},
|
||||
|
||||
@@ -136,22 +136,7 @@ const User: React.FC<unknown> = () => {
|
||||
valueType: 'text',
|
||||
},
|
||||
{
|
||||
title: '连接超时时长，单位毫秒',
|
||||
dataIndex: 'connection_timeout',
|
||||
valueType: 'text',
|
||||
},
|
||||
{
|
||||
title: 'Socket连接超时时长，单位毫秒',
|
||||
dataIndex: 'so_timeout',
|
||||
valueType: 'text',
|
||||
},
|
||||
{
|
||||
title: '设置服务器语言',
|
||||
dataIndex: 'server_language_code',
|
||||
valueType: 'text',
|
||||
},
|
||||
{
|
||||
title: '注册时间',
|
||||
title: '创建时间',
|
||||
dataIndex: 'create_time',
|
||||
valueType: 'dateTime',
|
||||
},
|
||||
|
||||
26
src/pages/Share/Detail-tag/component/CreateForm.tsx
Normal file
26
src/pages/Share/Detail-tag/component/CreateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import { Modal } from 'antd';
|
||||
import React, { PropsWithChildren } from 'react';
|
||||
|
||||
interface CreateFormProps {
|
||||
modalVisible: boolean;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||
const { modalVisible, onCancel } = props;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="新建"
|
||||
width={420}
|
||||
open={modalVisible}
|
||||
onCancel={() => onCancel()}
|
||||
footer={null}
|
||||
>
|
||||
{props.children}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateForm;
|
||||
138
src/pages/Share/Detail-tag/component/UpdateForm.tsx
Normal file
138
src/pages/Share/Detail-tag/component/UpdateForm.tsx
Normal file
@@ -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<API.UserInfo> {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
}
|
||||
|
||||
export interface UpdateFormProps {
|
||||
onCancel: (flag?: boolean, formVals?: FormValueType) => void;
|
||||
onSubmit: (values: FormValueType) => Promise<void>;
|
||||
updateModalVisible: boolean;
|
||||
values: Partial<API.UserInfo>;
|
||||
}
|
||||
|
||||
const UpdateForm: React.FC<UpdateFormProps> = (props) => (
|
||||
<StepsForm
|
||||
stepsProps={{
|
||||
size: 'small',
|
||||
}}
|
||||
stepsFormRender={(dom, submitter) => {
|
||||
return (
|
||||
<Modal
|
||||
width={640}
|
||||
bodyStyle={{ padding: '32px 40px 48px' }}
|
||||
destroyOnClose
|
||||
title="规则配置"
|
||||
open={props.updateModalVisible}
|
||||
footer={submitter}
|
||||
onCancel={() => props.onCancel()}
|
||||
>
|
||||
{dom}
|
||||
</Modal>
|
||||
);
|
||||
}}
|
||||
onFinish={props.onSubmit}
|
||||
>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
name: props.values.name,
|
||||
nickName: props.values.nickName,
|
||||
}}
|
||||
title="基本信息"
|
||||
>
|
||||
<ProFormText
|
||||
width="md"
|
||||
name="name"
|
||||
label="规则名称"
|
||||
rules={[{ required: true, message: '请输入规则名称！' }]}
|
||||
/>
|
||||
<ProFormTextArea
|
||||
name="desc"
|
||||
width="md"
|
||||
label="规则描述"
|
||||
placeholder="请输入至少五个字符"
|
||||
rules={[
|
||||
{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 },
|
||||
]}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
target: '0',
|
||||
template: '0',
|
||||
}}
|
||||
title="配置规则属性"
|
||||
>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="target"
|
||||
label="监控对象"
|
||||
valueEnum={{
|
||||
0: '表一',
|
||||
1: '表二',
|
||||
}}
|
||||
/>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="template"
|
||||
label="规则模板"
|
||||
valueEnum={{
|
||||
0: '规则模板一',
|
||||
1: '规则模板二',
|
||||
}}
|
||||
/>
|
||||
<ProFormRadio.Group
|
||||
name="type"
|
||||
width="md"
|
||||
label="规则类型"
|
||||
options={[
|
||||
{
|
||||
value: '0',
|
||||
label: '强',
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '弱',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
type: '1',
|
||||
frequency: 'month',
|
||||
}}
|
||||
title="设定调度周期"
|
||||
>
|
||||
<ProFormDateTimePicker
|
||||
name="time"
|
||||
label="开始时间"
|
||||
rules={[{ required: true, message: '请选择开始时间！' }]}
|
||||
/>
|
||||
<ProFormSelect
|
||||
name="frequency"
|
||||
label="监控对象"
|
||||
width="xs"
|
||||
valueEnum={{
|
||||
month: '月',
|
||||
week: '周',
|
||||
}}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
</StepsForm>
|
||||
);
|
||||
|
||||
export default UpdateForm;
|
||||
268
src/pages/Share/Detail-tag/index.tsx
Normal file
268
src/pages/Share/Detail-tag/index.tsx
Normal file
@@ -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<unknown> = () => {
|
||||
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
|
||||
const [updateModalVisible, handleUpdateModalVisible] =
|
||||
useState<boolean>(false);
|
||||
const [stepFormValues, setStepFormValues] = useState({});
|
||||
const actionRef = useRef<ActionType>();
|
||||
const [row, setRow] = useState<API.UserInfo>();
|
||||
const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
|
||||
const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
|
||||
{
|
||||
title: 'id',
|
||||
dataIndex: '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) => (
|
||||
<>
|
||||
<a
|
||||
onClick={() => {
|
||||
handleUpdateModalVisible(true);
|
||||
setStepFormValues(record);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</a>
|
||||
<Divider type="vertical" />
|
||||
<a href="">删除</a>
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<PageContainer
|
||||
header={{
|
||||
title: '详情标签表',
|
||||
}}
|
||||
>
|
||||
<ProTable<API.UserInfo>
|
||||
headerTitle="查询表格"
|
||||
actionRef={actionRef}
|
||||
rowKey="id"
|
||||
search={{
|
||||
labelWidth: 120,
|
||||
}}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="1"
|
||||
type="primary"
|
||||
onClick={() => handleModalVisible(true)}
|
||||
>
|
||||
新建
|
||||
</Button>,
|
||||
]}
|
||||
request={async (params, sorter, filter) => {
|
||||
const { data, success } = await queryUserList({
|
||||
...params,
|
||||
// FIXME: remove @ts-ignore
|
||||
// @ts-ignore
|
||||
sorter,
|
||||
filter,
|
||||
});
|
||||
return {
|
||||
data: data?.list || [],
|
||||
success,
|
||||
};
|
||||
}}
|
||||
columns={columns}
|
||||
rowSelection={{
|
||||
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
|
||||
}}
|
||||
/>
|
||||
{selectedRowsState?.length > 0 && (
|
||||
<FooterToolbar
|
||||
extra={
|
||||
<div>
|
||||
已选择{' '}
|
||||
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||
项
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
await handleRemove(selectedRowsState);
|
||||
setSelectedRows([]);
|
||||
actionRef.current?.reloadAndRest?.();
|
||||
}}
|
||||
>
|
||||
批量删除
|
||||
</Button>
|
||||
<Button type="primary">批量审批</Button>
|
||||
</FooterToolbar>
|
||||
)}
|
||||
<CreateForm
|
||||
onCancel={() => handleModalVisible(false)}
|
||||
modalVisible={createModalVisible}
|
||||
>
|
||||
<ProTable<API.UserInfo, API.UserInfo>
|
||||
onSubmit={async (value) => {
|
||||
const success = await handleAdd(value);
|
||||
if (success) {
|
||||
handleModalVisible(false);
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
rowKey="id"
|
||||
type="form"
|
||||
columns={columns}
|
||||
/>
|
||||
</CreateForm>
|
||||
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||
<UpdateForm
|
||||
onSubmit={async (value) => {
|
||||
const success = await handleUpdate(value);
|
||||
if (success) {
|
||||
handleUpdateModalVisible(false);
|
||||
setStepFormValues({});
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
onCancel={() => {
|
||||
handleUpdateModalVisible(false);
|
||||
setStepFormValues({});
|
||||
}}
|
||||
updateModalVisible={updateModalVisible}
|
||||
values={stepFormValues}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<Drawer
|
||||
width={600}
|
||||
open={!!row}
|
||||
onClose={() => {
|
||||
setRow(undefined);
|
||||
}}
|
||||
closable={false}
|
||||
>
|
||||
{row?.name && (
|
||||
<ProDescriptions<API.UserInfo>
|
||||
column={2}
|
||||
title={row?.name}
|
||||
request={async () => ({
|
||||
data: row || {},
|
||||
})}
|
||||
params={{
|
||||
id: row?.name,
|
||||
}}
|
||||
columns={columns}
|
||||
/>
|
||||
)}
|
||||
</Drawer>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Detail_tag;
|
||||
26
src/pages/Share/Detail/component/CreateForm.tsx
Normal file
26
src/pages/Share/Detail/component/CreateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import { Modal } from 'antd';
|
||||
import React, { PropsWithChildren } from 'react';
|
||||
|
||||
interface CreateFormProps {
|
||||
modalVisible: boolean;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||
const { modalVisible, onCancel } = props;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="新建"
|
||||
width={420}
|
||||
open={modalVisible}
|
||||
onCancel={() => onCancel()}
|
||||
footer={null}
|
||||
>
|
||||
{props.children}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateForm;
|
||||
138
src/pages/Share/Detail/component/UpdateForm.tsx
Normal file
138
src/pages/Share/Detail/component/UpdateForm.tsx
Normal file
@@ -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<API.UserInfo> {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
}
|
||||
|
||||
export interface UpdateFormProps {
|
||||
onCancel: (flag?: boolean, formVals?: FormValueType) => void;
|
||||
onSubmit: (values: FormValueType) => Promise<void>;
|
||||
updateModalVisible: boolean;
|
||||
values: Partial<API.UserInfo>;
|
||||
}
|
||||
|
||||
const UpdateForm: React.FC<UpdateFormProps> = (props) => (
|
||||
<StepsForm
|
||||
stepsProps={{
|
||||
size: 'small',
|
||||
}}
|
||||
stepsFormRender={(dom, submitter) => {
|
||||
return (
|
||||
<Modal
|
||||
width={640}
|
||||
bodyStyle={{ padding: '32px 40px 48px' }}
|
||||
destroyOnClose
|
||||
title="规则配置"
|
||||
open={props.updateModalVisible}
|
||||
footer={submitter}
|
||||
onCancel={() => props.onCancel()}
|
||||
>
|
||||
{dom}
|
||||
</Modal>
|
||||
);
|
||||
}}
|
||||
onFinish={props.onSubmit}
|
||||
>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
name: props.values.name,
|
||||
nickName: props.values.nickName,
|
||||
}}
|
||||
title="基本信息"
|
||||
>
|
||||
<ProFormText
|
||||
width="md"
|
||||
name="name"
|
||||
label="规则名称"
|
||||
rules={[{ required: true, message: '请输入规则名称！' }]}
|
||||
/>
|
||||
<ProFormTextArea
|
||||
name="desc"
|
||||
width="md"
|
||||
label="规则描述"
|
||||
placeholder="请输入至少五个字符"
|
||||
rules={[
|
||||
{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 },
|
||||
]}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
target: '0',
|
||||
template: '0',
|
||||
}}
|
||||
title="配置规则属性"
|
||||
>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="target"
|
||||
label="监控对象"
|
||||
valueEnum={{
|
||||
0: '表一',
|
||||
1: '表二',
|
||||
}}
|
||||
/>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="template"
|
||||
label="规则模板"
|
||||
valueEnum={{
|
||||
0: '规则模板一',
|
||||
1: '规则模板二',
|
||||
}}
|
||||
/>
|
||||
<ProFormRadio.Group
|
||||
name="type"
|
||||
width="md"
|
||||
label="规则类型"
|
||||
options={[
|
||||
{
|
||||
value: '0',
|
||||
label: '强',
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '弱',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
type: '1',
|
||||
frequency: 'month',
|
||||
}}
|
||||
title="设定调度周期"
|
||||
>
|
||||
<ProFormDateTimePicker
|
||||
name="time"
|
||||
label="开始时间"
|
||||
rules={[{ required: true, message: '请选择开始时间！' }]}
|
||||
/>
|
||||
<ProFormSelect
|
||||
name="frequency"
|
||||
label="监控对象"
|
||||
width="xs"
|
||||
valueEnum={{
|
||||
month: '月',
|
||||
week: '周',
|
||||
}}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
</StepsForm>
|
||||
);
|
||||
|
||||
export default UpdateForm;
|
||||
288
src/pages/Share/Detail/index.tsx
Normal file
288
src/pages/Share/Detail/index.tsx
Normal file
@@ -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<unknown> = () => {
|
||||
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
|
||||
const [updateModalVisible, handleUpdateModalVisible] =
|
||||
useState<boolean>(false);
|
||||
const [stepFormValues, setStepFormValues] = useState({});
|
||||
const actionRef = useRef<ActionType>();
|
||||
const [row, setRow] = useState<API.UserInfo>();
|
||||
const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
|
||||
const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
|
||||
{
|
||||
title: 'id',
|
||||
dataIndex: '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) => (
|
||||
<>
|
||||
<a
|
||||
onClick={() => {
|
||||
handleUpdateModalVisible(true);
|
||||
setStepFormValues(record);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</a>
|
||||
<Divider type="vertical" />
|
||||
<a href="">删除</a>
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<PageContainer
|
||||
header={{
|
||||
title: '分享详情表',
|
||||
}}
|
||||
>
|
||||
<ProTable<API.UserInfo>
|
||||
headerTitle="查询表格"
|
||||
actionRef={actionRef}
|
||||
rowKey="id"
|
||||
search={{
|
||||
labelWidth: 120,
|
||||
}}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="1"
|
||||
type="primary"
|
||||
onClick={() => handleModalVisible(true)}
|
||||
>
|
||||
新建
|
||||
</Button>,
|
||||
]}
|
||||
request={async (params, sorter, filter) => {
|
||||
const { data, success } = await queryUserList({
|
||||
...params,
|
||||
// FIXME: remove @ts-ignore
|
||||
// @ts-ignore
|
||||
sorter,
|
||||
filter,
|
||||
});
|
||||
return {
|
||||
data: data?.list || [],
|
||||
success,
|
||||
};
|
||||
}}
|
||||
columns={columns}
|
||||
rowSelection={{
|
||||
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
|
||||
}}
|
||||
/>
|
||||
{selectedRowsState?.length > 0 && (
|
||||
<FooterToolbar
|
||||
extra={
|
||||
<div>
|
||||
已选择{' '}
|
||||
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||
项
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
await handleRemove(selectedRowsState);
|
||||
setSelectedRows([]);
|
||||
actionRef.current?.reloadAndRest?.();
|
||||
}}
|
||||
>
|
||||
批量删除
|
||||
</Button>
|
||||
<Button type="primary">批量审批</Button>
|
||||
</FooterToolbar>
|
||||
)}
|
||||
<CreateForm
|
||||
onCancel={() => handleModalVisible(false)}
|
||||
modalVisible={createModalVisible}
|
||||
>
|
||||
<ProTable<API.UserInfo, API.UserInfo>
|
||||
onSubmit={async (value) => {
|
||||
const success = await handleAdd(value);
|
||||
if (success) {
|
||||
handleModalVisible(false);
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
rowKey="id"
|
||||
type="form"
|
||||
columns={columns}
|
||||
/>
|
||||
</CreateForm>
|
||||
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||
<UpdateForm
|
||||
onSubmit={async (value) => {
|
||||
const success = await handleUpdate(value);
|
||||
if (success) {
|
||||
handleUpdateModalVisible(false);
|
||||
setStepFormValues({});
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
onCancel={() => {
|
||||
handleUpdateModalVisible(false);
|
||||
setStepFormValues({});
|
||||
}}
|
||||
updateModalVisible={updateModalVisible}
|
||||
values={stepFormValues}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<Drawer
|
||||
width={600}
|
||||
open={!!row}
|
||||
onClose={() => {
|
||||
setRow(undefined);
|
||||
}}
|
||||
closable={false}
|
||||
>
|
||||
{row?.name && (
|
||||
<ProDescriptions<API.UserInfo>
|
||||
column={2}
|
||||
title={row?.name}
|
||||
request={async () => ({
|
||||
data: row || {},
|
||||
})}
|
||||
params={{
|
||||
id: row?.name,
|
||||
}}
|
||||
columns={columns}
|
||||
/>
|
||||
)}
|
||||
</Drawer>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Detail;
|
||||
26
src/pages/Share/Message/component/CreateForm.tsx
Normal file
26
src/pages/Share/Message/component/CreateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import { Modal } from 'antd';
|
||||
import React, { PropsWithChildren } from 'react';
|
||||
|
||||
interface CreateFormProps {
|
||||
modalVisible: boolean;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||
const { modalVisible, onCancel } = props;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="新建"
|
||||
width={420}
|
||||
open={modalVisible}
|
||||
onCancel={() => onCancel()}
|
||||
footer={null}
|
||||
>
|
||||
{props.children}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateForm;
|
||||
138
src/pages/Share/Message/component/UpdateForm.tsx
Normal file
138
src/pages/Share/Message/component/UpdateForm.tsx
Normal file
@@ -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<API.UserInfo> {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
}
|
||||
|
||||
export interface UpdateFormProps {
|
||||
onCancel: (flag?: boolean, formVals?: FormValueType) => void;
|
||||
onSubmit: (values: FormValueType) => Promise<void>;
|
||||
updateModalVisible: boolean;
|
||||
values: Partial<API.UserInfo>;
|
||||
}
|
||||
|
||||
const UpdateForm: React.FC<UpdateFormProps> = (props) => (
|
||||
<StepsForm
|
||||
stepsProps={{
|
||||
size: 'small',
|
||||
}}
|
||||
stepsFormRender={(dom, submitter) => {
|
||||
return (
|
||||
<Modal
|
||||
width={640}
|
||||
bodyStyle={{ padding: '32px 40px 48px' }}
|
||||
destroyOnClose
|
||||
title="规则配置"
|
||||
open={props.updateModalVisible}
|
||||
footer={submitter}
|
||||
onCancel={() => props.onCancel()}
|
||||
>
|
||||
{dom}
|
||||
</Modal>
|
||||
);
|
||||
}}
|
||||
onFinish={props.onSubmit}
|
||||
>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
name: props.values.name,
|
||||
nickName: props.values.nickName,
|
||||
}}
|
||||
title="基本信息"
|
||||
>
|
||||
<ProFormText
|
||||
width="md"
|
||||
name="name"
|
||||
label="规则名称"
|
||||
rules={[{ required: true, message: '请输入规则名称！' }]}
|
||||
/>
|
||||
<ProFormTextArea
|
||||
name="desc"
|
||||
width="md"
|
||||
label="规则描述"
|
||||
placeholder="请输入至少五个字符"
|
||||
rules={[
|
||||
{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 },
|
||||
]}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
target: '0',
|
||||
template: '0',
|
||||
}}
|
||||
title="配置规则属性"
|
||||
>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="target"
|
||||
label="监控对象"
|
||||
valueEnum={{
|
||||
0: '表一',
|
||||
1: '表二',
|
||||
}}
|
||||
/>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="template"
|
||||
label="规则模板"
|
||||
valueEnum={{
|
||||
0: '规则模板一',
|
||||
1: '规则模板二',
|
||||
}}
|
||||
/>
|
||||
<ProFormRadio.Group
|
||||
name="type"
|
||||
width="md"
|
||||
label="规则类型"
|
||||
options={[
|
||||
{
|
||||
value: '0',
|
||||
label: '强',
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '弱',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
type: '1',
|
||||
frequency: 'month',
|
||||
}}
|
||||
title="设定调度周期"
|
||||
>
|
||||
<ProFormDateTimePicker
|
||||
name="time"
|
||||
label="开始时间"
|
||||
rules={[{ required: true, message: '请选择开始时间！' }]}
|
||||
/>
|
||||
<ProFormSelect
|
||||
name="frequency"
|
||||
label="监控对象"
|
||||
width="xs"
|
||||
valueEnum={{
|
||||
month: '月',
|
||||
week: '周',
|
||||
}}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
</StepsForm>
|
||||
);
|
||||
|
||||
export default UpdateForm;
|
||||
273
src/pages/Share/Message/index.tsx
Normal file
273
src/pages/Share/Message/index.tsx
Normal file
@@ -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<unknown> = () => {
|
||||
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
|
||||
const [updateModalVisible, handleUpdateModalVisible] =
|
||||
useState<boolean>(false);
|
||||
const [stepFormValues, setStepFormValues] = useState({});
|
||||
const actionRef = useRef<ActionType>();
|
||||
const [row, setRow] = useState<API.UserInfo>();
|
||||
const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
|
||||
const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
|
||||
{
|
||||
title: 'id',
|
||||
dataIndex: '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) => (
|
||||
<>
|
||||
<a
|
||||
onClick={() => {
|
||||
handleUpdateModalVisible(true);
|
||||
setStepFormValues(record);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</a>
|
||||
<Divider type="vertical" />
|
||||
<a href="">删除</a>
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<PageContainer
|
||||
header={{
|
||||
title: '消息表',
|
||||
}}
|
||||
>
|
||||
<ProTable<API.UserInfo>
|
||||
headerTitle="查询表格"
|
||||
actionRef={actionRef}
|
||||
rowKey="id"
|
||||
search={{
|
||||
labelWidth: 120,
|
||||
}}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="1"
|
||||
type="primary"
|
||||
onClick={() => handleModalVisible(true)}
|
||||
>
|
||||
新建
|
||||
</Button>,
|
||||
]}
|
||||
request={async (params, sorter, filter) => {
|
||||
const { data, success } = await queryUserList({
|
||||
...params,
|
||||
// FIXME: remove @ts-ignore
|
||||
// @ts-ignore
|
||||
sorter,
|
||||
filter,
|
||||
});
|
||||
return {
|
||||
data: data?.list || [],
|
||||
success,
|
||||
};
|
||||
}}
|
||||
columns={columns}
|
||||
rowSelection={{
|
||||
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
|
||||
}}
|
||||
/>
|
||||
{selectedRowsState?.length > 0 && (
|
||||
<FooterToolbar
|
||||
extra={
|
||||
<div>
|
||||
已选择{' '}
|
||||
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||
项
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
await handleRemove(selectedRowsState);
|
||||
setSelectedRows([]);
|
||||
actionRef.current?.reloadAndRest?.();
|
||||
}}
|
||||
>
|
||||
批量删除
|
||||
</Button>
|
||||
<Button type="primary">批量审批</Button>
|
||||
</FooterToolbar>
|
||||
)}
|
||||
<CreateForm
|
||||
onCancel={() => handleModalVisible(false)}
|
||||
modalVisible={createModalVisible}
|
||||
>
|
||||
<ProTable<API.UserInfo, API.UserInfo>
|
||||
onSubmit={async (value) => {
|
||||
const success = await handleAdd(value);
|
||||
if (success) {
|
||||
handleModalVisible(false);
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
rowKey="id"
|
||||
type="form"
|
||||
columns={columns}
|
||||
/>
|
||||
</CreateForm>
|
||||
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||
<UpdateForm
|
||||
onSubmit={async (value) => {
|
||||
const success = await handleUpdate(value);
|
||||
if (success) {
|
||||
handleUpdateModalVisible(false);
|
||||
setStepFormValues({});
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
onCancel={() => {
|
||||
handleUpdateModalVisible(false);
|
||||
setStepFormValues({});
|
||||
}}
|
||||
updateModalVisible={updateModalVisible}
|
||||
values={stepFormValues}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<Drawer
|
||||
width={600}
|
||||
open={!!row}
|
||||
onClose={() => {
|
||||
setRow(undefined);
|
||||
}}
|
||||
closable={false}
|
||||
>
|
||||
{row?.name && (
|
||||
<ProDescriptions<API.UserInfo>
|
||||
column={2}
|
||||
title={row?.name}
|
||||
request={async () => ({
|
||||
data: row || {},
|
||||
})}
|
||||
params={{
|
||||
id: row?.name,
|
||||
}}
|
||||
columns={columns}
|
||||
/>
|
||||
)}
|
||||
</Drawer>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Message;
|
||||
26
src/pages/Share/Remark-answer/component/CreateForm.tsx
Normal file
26
src/pages/Share/Remark-answer/component/CreateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import { Modal } from 'antd';
|
||||
import React, { PropsWithChildren } from 'react';
|
||||
|
||||
interface CreateFormProps {
|
||||
modalVisible: boolean;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||
const { modalVisible, onCancel } = props;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="新建"
|
||||
width={420}
|
||||
open={modalVisible}
|
||||
onCancel={() => onCancel()}
|
||||
footer={null}
|
||||
>
|
||||
{props.children}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateForm;
|
||||
138
src/pages/Share/Remark-answer/component/UpdateForm.tsx
Normal file
138
src/pages/Share/Remark-answer/component/UpdateForm.tsx
Normal file
@@ -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<API.UserInfo> {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
}
|
||||
|
||||
export interface UpdateFormProps {
|
||||
onCancel: (flag?: boolean, formVals?: FormValueType) => void;
|
||||
onSubmit: (values: FormValueType) => Promise<void>;
|
||||
updateModalVisible: boolean;
|
||||
values: Partial<API.UserInfo>;
|
||||
}
|
||||
|
||||
const UpdateForm: React.FC<UpdateFormProps> = (props) => (
|
||||
<StepsForm
|
||||
stepsProps={{
|
||||
size: 'small',
|
||||
}}
|
||||
stepsFormRender={(dom, submitter) => {
|
||||
return (
|
||||
<Modal
|
||||
width={640}
|
||||
bodyStyle={{ padding: '32px 40px 48px' }}
|
||||
destroyOnClose
|
||||
title="规则配置"
|
||||
open={props.updateModalVisible}
|
||||
footer={submitter}
|
||||
onCancel={() => props.onCancel()}
|
||||
>
|
||||
{dom}
|
||||
</Modal>
|
||||
);
|
||||
}}
|
||||
onFinish={props.onSubmit}
|
||||
>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
name: props.values.name,
|
||||
nickName: props.values.nickName,
|
||||
}}
|
||||
title="基本信息"
|
||||
>
|
||||
<ProFormText
|
||||
width="md"
|
||||
name="name"
|
||||
label="规则名称"
|
||||
rules={[{ required: true, message: '请输入规则名称！' }]}
|
||||
/>
|
||||
<ProFormTextArea
|
||||
name="desc"
|
||||
width="md"
|
||||
label="规则描述"
|
||||
placeholder="请输入至少五个字符"
|
||||
rules={[
|
||||
{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 },
|
||||
]}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
target: '0',
|
||||
template: '0',
|
||||
}}
|
||||
title="配置规则属性"
|
||||
>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="target"
|
||||
label="监控对象"
|
||||
valueEnum={{
|
||||
0: '表一',
|
||||
1: '表二',
|
||||
}}
|
||||
/>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="template"
|
||||
label="规则模板"
|
||||
valueEnum={{
|
||||
0: '规则模板一',
|
||||
1: '规则模板二',
|
||||
}}
|
||||
/>
|
||||
<ProFormRadio.Group
|
||||
name="type"
|
||||
width="md"
|
||||
label="规则类型"
|
||||
options={[
|
||||
{
|
||||
value: '0',
|
||||
label: '强',
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '弱',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
type: '1',
|
||||
frequency: 'month',
|
||||
}}
|
||||
title="设定调度周期"
|
||||
>
|
||||
<ProFormDateTimePicker
|
||||
name="time"
|
||||
label="开始时间"
|
||||
rules={[{ required: true, message: '请选择开始时间！' }]}
|
||||
/>
|
||||
<ProFormSelect
|
||||
name="frequency"
|
||||
label="监控对象"
|
||||
width="xs"
|
||||
valueEnum={{
|
||||
month: '月',
|
||||
week: '周',
|
||||
}}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
</StepsForm>
|
||||
);
|
||||
|
||||
export default UpdateForm;
|
||||
283
src/pages/Share/Remark-answer/index.tsx
Normal file
283
src/pages/Share/Remark-answer/index.tsx
Normal file
@@ -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<unknown> = () => {
|
||||
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
|
||||
const [updateModalVisible, handleUpdateModalVisible] =
|
||||
useState<boolean>(false);
|
||||
const [stepFormValues, setStepFormValues] = useState({});
|
||||
const actionRef = useRef<ActionType>();
|
||||
const [row, setRow] = useState<API.UserInfo>();
|
||||
const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
|
||||
const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
|
||||
{
|
||||
title: 'id',
|
||||
dataIndex: '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) => (
|
||||
<>
|
||||
<a
|
||||
onClick={() => {
|
||||
handleUpdateModalVisible(true);
|
||||
setStepFormValues(record);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</a>
|
||||
<Divider type="vertical" />
|
||||
<a href="">删除</a>
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<PageContainer
|
||||
header={{
|
||||
title: '评论回复',
|
||||
}}
|
||||
>
|
||||
<ProTable<API.UserInfo>
|
||||
headerTitle="查询表格"
|
||||
actionRef={actionRef}
|
||||
rowKey="id"
|
||||
search={{
|
||||
labelWidth: 120,
|
||||
}}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="1"
|
||||
type="primary"
|
||||
onClick={() => handleModalVisible(true)}
|
||||
>
|
||||
新建
|
||||
</Button>,
|
||||
]}
|
||||
request={async (params, sorter, filter) => {
|
||||
const { data, success } = await queryUserList({
|
||||
...params,
|
||||
// FIXME: remove @ts-ignore
|
||||
// @ts-ignore
|
||||
sorter,
|
||||
filter,
|
||||
});
|
||||
return {
|
||||
data: data?.list || [],
|
||||
success,
|
||||
};
|
||||
}}
|
||||
columns={columns}
|
||||
rowSelection={{
|
||||
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
|
||||
}}
|
||||
/>
|
||||
{selectedRowsState?.length > 0 && (
|
||||
<FooterToolbar
|
||||
extra={
|
||||
<div>
|
||||
已选择{' '}
|
||||
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||
项
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
await handleRemove(selectedRowsState);
|
||||
setSelectedRows([]);
|
||||
actionRef.current?.reloadAndRest?.();
|
||||
}}
|
||||
>
|
||||
批量删除
|
||||
</Button>
|
||||
<Button type="primary">批量审批</Button>
|
||||
</FooterToolbar>
|
||||
)}
|
||||
<CreateForm
|
||||
onCancel={() => handleModalVisible(false)}
|
||||
modalVisible={createModalVisible}
|
||||
>
|
||||
<ProTable<API.UserInfo, API.UserInfo>
|
||||
onSubmit={async (value) => {
|
||||
const success = await handleAdd(value);
|
||||
if (success) {
|
||||
handleModalVisible(false);
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
rowKey="id"
|
||||
type="form"
|
||||
columns={columns}
|
||||
/>
|
||||
</CreateForm>
|
||||
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||
<UpdateForm
|
||||
onSubmit={async (value) => {
|
||||
const success = await handleUpdate(value);
|
||||
if (success) {
|
||||
handleUpdateModalVisible(false);
|
||||
setStepFormValues({});
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
onCancel={() => {
|
||||
handleUpdateModalVisible(false);
|
||||
setStepFormValues({});
|
||||
}}
|
||||
updateModalVisible={updateModalVisible}
|
||||
values={stepFormValues}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<Drawer
|
||||
width={600}
|
||||
open={!!row}
|
||||
onClose={() => {
|
||||
setRow(undefined);
|
||||
}}
|
||||
closable={false}
|
||||
>
|
||||
{row?.name && (
|
||||
<ProDescriptions<API.UserInfo>
|
||||
column={2}
|
||||
title={row?.name}
|
||||
request={async () => ({
|
||||
data: row || {},
|
||||
})}
|
||||
params={{
|
||||
id: row?.name,
|
||||
}}
|
||||
columns={columns}
|
||||
/>
|
||||
)}
|
||||
</Drawer>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Remark_answer;
|
||||
26
src/pages/Share/Share-circle/components/CreateForm.tsx
Normal file
26
src/pages/Share/Share-circle/components/CreateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import { Modal } from 'antd';
|
||||
import React, { PropsWithChildren } from 'react';
|
||||
|
||||
interface CreateFormProps {
|
||||
modalVisible: boolean;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||
const { modalVisible, onCancel } = props;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="新建"
|
||||
width={420}
|
||||
open={modalVisible}
|
||||
onCancel={() => onCancel()}
|
||||
footer={null}
|
||||
>
|
||||
{props.children}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateForm;
|
||||
138
src/pages/Share/Share-circle/components/UpdateForm.tsx
Normal file
138
src/pages/Share/Share-circle/components/UpdateForm.tsx
Normal file
@@ -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<API.UserInfo> {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
}
|
||||
|
||||
export interface UpdateFormProps {
|
||||
onCancel: (flag?: boolean, formVals?: FormValueType) => void;
|
||||
onSubmit: (values: FormValueType) => Promise<void>;
|
||||
updateModalVisible: boolean;
|
||||
values: Partial<API.UserInfo>;
|
||||
}
|
||||
|
||||
const UpdateForm: React.FC<UpdateFormProps> = (props) => (
|
||||
<StepsForm
|
||||
stepsProps={{
|
||||
size: 'small',
|
||||
}}
|
||||
stepsFormRender={(dom, submitter) => {
|
||||
return (
|
||||
<Modal
|
||||
width={640}
|
||||
bodyStyle={{ padding: '32px 40px 48px' }}
|
||||
destroyOnClose
|
||||
title="规则配置"
|
||||
open={props.updateModalVisible}
|
||||
footer={submitter}
|
||||
onCancel={() => props.onCancel()}
|
||||
>
|
||||
{dom}
|
||||
</Modal>
|
||||
);
|
||||
}}
|
||||
onFinish={props.onSubmit}
|
||||
>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
name: props.values.name,
|
||||
nickName: props.values.nickName,
|
||||
}}
|
||||
title="基本信息"
|
||||
>
|
||||
<ProFormText
|
||||
width="md"
|
||||
name="name"
|
||||
label="规则名称"
|
||||
rules={[{ required: true, message: '请输入规则名称！' }]}
|
||||
/>
|
||||
<ProFormTextArea
|
||||
name="desc"
|
||||
width="md"
|
||||
label="规则描述"
|
||||
placeholder="请输入至少五个字符"
|
||||
rules={[
|
||||
{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 },
|
||||
]}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
target: '0',
|
||||
template: '0',
|
||||
}}
|
||||
title="配置规则属性"
|
||||
>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="target"
|
||||
label="监控对象"
|
||||
valueEnum={{
|
||||
0: '表一',
|
||||
1: '表二',
|
||||
}}
|
||||
/>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="template"
|
||||
label="规则模板"
|
||||
valueEnum={{
|
||||
0: '规则模板一',
|
||||
1: '规则模板二',
|
||||
}}
|
||||
/>
|
||||
<ProFormRadio.Group
|
||||
name="type"
|
||||
width="md"
|
||||
label="规则类型"
|
||||
options={[
|
||||
{
|
||||
value: '0',
|
||||
label: '强',
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '弱',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
type: '1',
|
||||
frequency: 'month',
|
||||
}}
|
||||
title="设定调度周期"
|
||||
>
|
||||
<ProFormDateTimePicker
|
||||
name="time"
|
||||
label="开始时间"
|
||||
rules={[{ required: true, message: '请选择开始时间！' }]}
|
||||
/>
|
||||
<ProFormSelect
|
||||
name="frequency"
|
||||
label="监控对象"
|
||||
width="xs"
|
||||
valueEnum={{
|
||||
month: '月',
|
||||
week: '周',
|
||||
}}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
</StepsForm>
|
||||
);
|
||||
|
||||
export default UpdateForm;
|
||||
283
src/pages/Share/Share-circle/index.tsx
Normal file
283
src/pages/Share/Share-circle/index.tsx
Normal file
@@ -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<unknown> = () => {
|
||||
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
|
||||
const [updateModalVisible, handleUpdateModalVisible] =
|
||||
useState<boolean>(false);
|
||||
const [stepFormValues, setStepFormValues] = useState({});
|
||||
const actionRef = useRef<ActionType>();
|
||||
const [row, setRow] = useState<API.UserInfo>();
|
||||
const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
|
||||
const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
|
||||
{
|
||||
title: 'id',
|
||||
dataIndex: '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) => (
|
||||
<>
|
||||
<a
|
||||
onClick={() => {
|
||||
handleUpdateModalVisible(true);
|
||||
setStepFormValues(record);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</a>
|
||||
<Divider type="vertical" />
|
||||
<a href="">删除</a>
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<PageContainer
|
||||
header={{
|
||||
title: '分享圈',
|
||||
}}
|
||||
>
|
||||
<ProTable<API.UserInfo>
|
||||
headerTitle="查询表格"
|
||||
actionRef={actionRef}
|
||||
rowKey="id"
|
||||
search={{
|
||||
labelWidth: 120,
|
||||
}}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="1"
|
||||
type="primary"
|
||||
onClick={() => handleModalVisible(true)}
|
||||
>
|
||||
新建
|
||||
</Button>,
|
||||
]}
|
||||
request={async (params, sorter, filter) => {
|
||||
const { data, success } = await queryUserList({
|
||||
...params,
|
||||
// FIXME: remove @ts-ignore
|
||||
// @ts-ignore
|
||||
sorter,
|
||||
filter,
|
||||
});
|
||||
return {
|
||||
data: data?.list || [],
|
||||
success,
|
||||
};
|
||||
}}
|
||||
columns={columns}
|
||||
rowSelection={{
|
||||
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
|
||||
}}
|
||||
/>
|
||||
{selectedRowsState?.length > 0 && (
|
||||
<FooterToolbar
|
||||
extra={
|
||||
<div>
|
||||
已选择{' '}
|
||||
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||
项
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
await handleRemove(selectedRowsState);
|
||||
setSelectedRows([]);
|
||||
actionRef.current?.reloadAndRest?.();
|
||||
}}
|
||||
>
|
||||
批量删除
|
||||
</Button>
|
||||
<Button type="primary">批量审批</Button>
|
||||
</FooterToolbar>
|
||||
)}
|
||||
<CreateForm
|
||||
onCancel={() => handleModalVisible(false)}
|
||||
modalVisible={createModalVisible}
|
||||
>
|
||||
<ProTable<API.UserInfo, API.UserInfo>
|
||||
onSubmit={async (value) => {
|
||||
const success = await handleAdd(value);
|
||||
if (success) {
|
||||
handleModalVisible(false);
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
rowKey="id"
|
||||
type="form"
|
||||
columns={columns}
|
||||
/>
|
||||
</CreateForm>
|
||||
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||
<UpdateForm
|
||||
onSubmit={async (value) => {
|
||||
const success = await handleUpdate(value);
|
||||
if (success) {
|
||||
handleUpdateModalVisible(false);
|
||||
setStepFormValues({});
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
onCancel={() => {
|
||||
handleUpdateModalVisible(false);
|
||||
setStepFormValues({});
|
||||
}}
|
||||
updateModalVisible={updateModalVisible}
|
||||
values={stepFormValues}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<Drawer
|
||||
width={600}
|
||||
open={!!row}
|
||||
onClose={() => {
|
||||
setRow(undefined);
|
||||
}}
|
||||
closable={false}
|
||||
>
|
||||
{row?.name && (
|
||||
<ProDescriptions<API.UserInfo>
|
||||
column={2}
|
||||
title={row?.name}
|
||||
request={async () => ({
|
||||
data: row || {},
|
||||
})}
|
||||
params={{
|
||||
id: row?.name,
|
||||
}}
|
||||
columns={columns}
|
||||
/>
|
||||
)}
|
||||
</Drawer>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Share_circle;
|
||||
26
src/pages/Share/Tags/component/CreateForm.tsx
Normal file
26
src/pages/Share/Tags/component/CreateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import { Modal } from 'antd';
|
||||
import React, { PropsWithChildren } from 'react';
|
||||
|
||||
interface CreateFormProps {
|
||||
modalVisible: boolean;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||
const { modalVisible, onCancel } = props;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="新建"
|
||||
width={420}
|
||||
open={modalVisible}
|
||||
onCancel={() => onCancel()}
|
||||
footer={null}
|
||||
>
|
||||
{props.children}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateForm;
|
||||
138
src/pages/Share/Tags/component/UpdateForm.tsx
Normal file
138
src/pages/Share/Tags/component/UpdateForm.tsx
Normal file
@@ -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<API.UserInfo> {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
}
|
||||
|
||||
export interface UpdateFormProps {
|
||||
onCancel: (flag?: boolean, formVals?: FormValueType) => void;
|
||||
onSubmit: (values: FormValueType) => Promise<void>;
|
||||
updateModalVisible: boolean;
|
||||
values: Partial<API.UserInfo>;
|
||||
}
|
||||
|
||||
const UpdateForm: React.FC<UpdateFormProps> = (props) => (
|
||||
<StepsForm
|
||||
stepsProps={{
|
||||
size: 'small',
|
||||
}}
|
||||
stepsFormRender={(dom, submitter) => {
|
||||
return (
|
||||
<Modal
|
||||
width={640}
|
||||
bodyStyle={{ padding: '32px 40px 48px' }}
|
||||
destroyOnClose
|
||||
title="规则配置"
|
||||
open={props.updateModalVisible}
|
||||
footer={submitter}
|
||||
onCancel={() => props.onCancel()}
|
||||
>
|
||||
{dom}
|
||||
</Modal>
|
||||
);
|
||||
}}
|
||||
onFinish={props.onSubmit}
|
||||
>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
name: props.values.name,
|
||||
nickName: props.values.nickName,
|
||||
}}
|
||||
title="基本信息"
|
||||
>
|
||||
<ProFormText
|
||||
width="md"
|
||||
name="name"
|
||||
label="规则名称"
|
||||
rules={[{ required: true, message: '请输入规则名称！' }]}
|
||||
/>
|
||||
<ProFormTextArea
|
||||
name="desc"
|
||||
width="md"
|
||||
label="规则描述"
|
||||
placeholder="请输入至少五个字符"
|
||||
rules={[
|
||||
{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 },
|
||||
]}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
target: '0',
|
||||
template: '0',
|
||||
}}
|
||||
title="配置规则属性"
|
||||
>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="target"
|
||||
label="监控对象"
|
||||
valueEnum={{
|
||||
0: '表一',
|
||||
1: '表二',
|
||||
}}
|
||||
/>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="template"
|
||||
label="规则模板"
|
||||
valueEnum={{
|
||||
0: '规则模板一',
|
||||
1: '规则模板二',
|
||||
}}
|
||||
/>
|
||||
<ProFormRadio.Group
|
||||
name="type"
|
||||
width="md"
|
||||
label="规则类型"
|
||||
options={[
|
||||
{
|
||||
value: '0',
|
||||
label: '强',
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '弱',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
type: '1',
|
||||
frequency: 'month',
|
||||
}}
|
||||
title="设定调度周期"
|
||||
>
|
||||
<ProFormDateTimePicker
|
||||
name="time"
|
||||
label="开始时间"
|
||||
rules={[{ required: true, message: '请选择开始时间！' }]}
|
||||
/>
|
||||
<ProFormSelect
|
||||
name="frequency"
|
||||
label="监控对象"
|
||||
width="xs"
|
||||
valueEnum={{
|
||||
month: '月',
|
||||
week: '周',
|
||||
}}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
</StepsForm>
|
||||
);
|
||||
|
||||
export default UpdateForm;
|
||||
273
src/pages/Share/Tags/index.tsx
Normal file
273
src/pages/Share/Tags/index.tsx
Normal file
@@ -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<unknown> = () => {
|
||||
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
|
||||
const [updateModalVisible, handleUpdateModalVisible] =
|
||||
useState<boolean>(false);
|
||||
const [stepFormValues, setStepFormValues] = useState({});
|
||||
const actionRef = useRef<ActionType>();
|
||||
const [row, setRow] = useState<API.UserInfo>();
|
||||
const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
|
||||
const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
|
||||
{
|
||||
title: 'id',
|
||||
dataIndex: '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) => (
|
||||
<>
|
||||
<a
|
||||
onClick={() => {
|
||||
handleUpdateModalVisible(true);
|
||||
setStepFormValues(record);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</a>
|
||||
<Divider type="vertical" />
|
||||
<a href="">删除</a>
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<PageContainer
|
||||
header={{
|
||||
title: '分享详情标签表',
|
||||
}}
|
||||
>
|
||||
<ProTable<API.UserInfo>
|
||||
headerTitle="查询表格"
|
||||
actionRef={actionRef}
|
||||
rowKey="id"
|
||||
search={{
|
||||
labelWidth: 120,
|
||||
}}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="1"
|
||||
type="primary"
|
||||
onClick={() => handleModalVisible(true)}
|
||||
>
|
||||
新建
|
||||
</Button>,
|
||||
]}
|
||||
request={async (params, sorter, filter) => {
|
||||
const { data, success } = await queryUserList({
|
||||
...params,
|
||||
// FIXME: remove @ts-ignore
|
||||
// @ts-ignore
|
||||
sorter,
|
||||
filter,
|
||||
});
|
||||
return {
|
||||
data: data?.list || [],
|
||||
success,
|
||||
};
|
||||
}}
|
||||
columns={columns}
|
||||
rowSelection={{
|
||||
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
|
||||
}}
|
||||
/>
|
||||
{selectedRowsState?.length > 0 && (
|
||||
<FooterToolbar
|
||||
extra={
|
||||
<div>
|
||||
已选择{' '}
|
||||
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||
项
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
await handleRemove(selectedRowsState);
|
||||
setSelectedRows([]);
|
||||
actionRef.current?.reloadAndRest?.();
|
||||
}}
|
||||
>
|
||||
批量删除
|
||||
</Button>
|
||||
<Button type="primary">批量审批</Button>
|
||||
</FooterToolbar>
|
||||
)}
|
||||
<CreateForm
|
||||
onCancel={() => handleModalVisible(false)}
|
||||
modalVisible={createModalVisible}
|
||||
>
|
||||
<ProTable<API.UserInfo, API.UserInfo>
|
||||
onSubmit={async (value) => {
|
||||
const success = await handleAdd(value);
|
||||
if (success) {
|
||||
handleModalVisible(false);
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
rowKey="id"
|
||||
type="form"
|
||||
columns={columns}
|
||||
/>
|
||||
</CreateForm>
|
||||
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||
<UpdateForm
|
||||
onSubmit={async (value) => {
|
||||
const success = await handleUpdate(value);
|
||||
if (success) {
|
||||
handleUpdateModalVisible(false);
|
||||
setStepFormValues({});
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
onCancel={() => {
|
||||
handleUpdateModalVisible(false);
|
||||
setStepFormValues({});
|
||||
}}
|
||||
updateModalVisible={updateModalVisible}
|
||||
values={stepFormValues}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<Drawer
|
||||
width={600}
|
||||
open={!!row}
|
||||
onClose={() => {
|
||||
setRow(undefined);
|
||||
}}
|
||||
closable={false}
|
||||
>
|
||||
{row?.name && (
|
||||
<ProDescriptions<API.UserInfo>
|
||||
column={2}
|
||||
title={row?.name}
|
||||
request={async () => ({
|
||||
data: row || {},
|
||||
})}
|
||||
params={{
|
||||
id: row?.name,
|
||||
}}
|
||||
columns={columns}
|
||||
/>
|
||||
)}
|
||||
</Drawer>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tags;
|
||||
26
src/pages/Share/Url/component/CreateForm.tsx
Normal file
26
src/pages/Share/Url/component/CreateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import { Modal } from 'antd';
|
||||
import React, { PropsWithChildren } from 'react';
|
||||
|
||||
interface CreateFormProps {
|
||||
modalVisible: boolean;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||
const { modalVisible, onCancel } = props;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="新建"
|
||||
width={420}
|
||||
open={modalVisible}
|
||||
onCancel={() => onCancel()}
|
||||
footer={null}
|
||||
>
|
||||
{props.children}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateForm;
|
||||
138
src/pages/Share/Url/component/UpdateForm.tsx
Normal file
138
src/pages/Share/Url/component/UpdateForm.tsx
Normal file
@@ -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<API.UserInfo> {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
}
|
||||
|
||||
export interface UpdateFormProps {
|
||||
onCancel: (flag?: boolean, formVals?: FormValueType) => void;
|
||||
onSubmit: (values: FormValueType) => Promise<void>;
|
||||
updateModalVisible: boolean;
|
||||
values: Partial<API.UserInfo>;
|
||||
}
|
||||
|
||||
const UpdateForm: React.FC<UpdateFormProps> = (props) => (
|
||||
<StepsForm
|
||||
stepsProps={{
|
||||
size: 'small',
|
||||
}}
|
||||
stepsFormRender={(dom, submitter) => {
|
||||
return (
|
||||
<Modal
|
||||
width={640}
|
||||
bodyStyle={{ padding: '32px 40px 48px' }}
|
||||
destroyOnClose
|
||||
title="规则配置"
|
||||
open={props.updateModalVisible}
|
||||
footer={submitter}
|
||||
onCancel={() => props.onCancel()}
|
||||
>
|
||||
{dom}
|
||||
</Modal>
|
||||
);
|
||||
}}
|
||||
onFinish={props.onSubmit}
|
||||
>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
name: props.values.name,
|
||||
nickName: props.values.nickName,
|
||||
}}
|
||||
title="基本信息"
|
||||
>
|
||||
<ProFormText
|
||||
width="md"
|
||||
name="name"
|
||||
label="规则名称"
|
||||
rules={[{ required: true, message: '请输入规则名称！' }]}
|
||||
/>
|
||||
<ProFormTextArea
|
||||
name="desc"
|
||||
width="md"
|
||||
label="规则描述"
|
||||
placeholder="请输入至少五个字符"
|
||||
rules={[
|
||||
{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 },
|
||||
]}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
target: '0',
|
||||
template: '0',
|
||||
}}
|
||||
title="配置规则属性"
|
||||
>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="target"
|
||||
label="监控对象"
|
||||
valueEnum={{
|
||||
0: '表一',
|
||||
1: '表二',
|
||||
}}
|
||||
/>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="template"
|
||||
label="规则模板"
|
||||
valueEnum={{
|
||||
0: '规则模板一',
|
||||
1: '规则模板二',
|
||||
}}
|
||||
/>
|
||||
<ProFormRadio.Group
|
||||
name="type"
|
||||
width="md"
|
||||
label="规则类型"
|
||||
options={[
|
||||
{
|
||||
value: '0',
|
||||
label: '强',
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '弱',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
type: '1',
|
||||
frequency: 'month',
|
||||
}}
|
||||
title="设定调度周期"
|
||||
>
|
||||
<ProFormDateTimePicker
|
||||
name="time"
|
||||
label="开始时间"
|
||||
rules={[{ required: true, message: '请选择开始时间！' }]}
|
||||
/>
|
||||
<ProFormSelect
|
||||
name="frequency"
|
||||
label="监控对象"
|
||||
width="xs"
|
||||
valueEnum={{
|
||||
month: '月',
|
||||
week: '周',
|
||||
}}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
</StepsForm>
|
||||
);
|
||||
|
||||
export default UpdateForm;
|
||||
288
src/pages/Share/Url/index.tsx
Normal file
288
src/pages/Share/Url/index.tsx
Normal file
@@ -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<unknown> = () => {
|
||||
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
|
||||
const [updateModalVisible, handleUpdateModalVisible] =
|
||||
useState<boolean>(false);
|
||||
const [stepFormValues, setStepFormValues] = useState({});
|
||||
const actionRef = useRef<ActionType>();
|
||||
const [row, setRow] = useState<API.UserInfo>();
|
||||
const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
|
||||
const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
|
||||
{
|
||||
title: 'id',
|
||||
dataIndex: '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) => (
|
||||
<>
|
||||
<a
|
||||
onClick={() => {
|
||||
handleUpdateModalVisible(true);
|
||||
setStepFormValues(record);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</a>
|
||||
<Divider type="vertical" />
|
||||
<a href="">删除f</a>
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<PageContainer
|
||||
header={{
|
||||
title: '分享链接',
|
||||
}}
|
||||
>
|
||||
<ProTable<API.UserInfo>
|
||||
headerTitle="查询表格"
|
||||
actionRef={actionRef}
|
||||
rowKey="id"
|
||||
search={{
|
||||
labelWidth: 120,
|
||||
}}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="1"
|
||||
type="primary"
|
||||
onClick={() => handleModalVisible(true)}
|
||||
>
|
||||
新建
|
||||
</Button>,
|
||||
]}
|
||||
request={async (params, sorter, filter) => {
|
||||
const { data, success } = await queryUserList({
|
||||
...params,
|
||||
// FIXME: remove @ts-ignore
|
||||
// @ts-ignore
|
||||
sorter,
|
||||
filter,
|
||||
});
|
||||
return {
|
||||
data: data?.list || [],
|
||||
success,
|
||||
};
|
||||
}}
|
||||
columns={columns}
|
||||
rowSelection={{
|
||||
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
|
||||
}}
|
||||
/>
|
||||
{selectedRowsState?.length > 0 && (
|
||||
<FooterToolbar
|
||||
extra={
|
||||
<div>
|
||||
已选择{' '}
|
||||
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||
项
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
await handleRemove(selectedRowsState);
|
||||
setSelectedRows([]);
|
||||
actionRef.current?.reloadAndRest?.();
|
||||
}}
|
||||
>
|
||||
批量删除
|
||||
</Button>
|
||||
<Button type="primary">批量审批</Button>
|
||||
</FooterToolbar>
|
||||
)}
|
||||
<CreateForm
|
||||
onCancel={() => handleModalVisible(false)}
|
||||
modalVisible={createModalVisible}
|
||||
>
|
||||
<ProTable<API.UserInfo, API.UserInfo>
|
||||
onSubmit={async (value) => {
|
||||
const success = await handleAdd(value);
|
||||
if (success) {
|
||||
handleModalVisible(false);
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
rowKey="id"
|
||||
type="form"
|
||||
columns={columns}
|
||||
/>
|
||||
</CreateForm>
|
||||
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||
<UpdateForm
|
||||
onSubmit={async (value) => {
|
||||
const success = await handleUpdate(value);
|
||||
if (success) {
|
||||
handleUpdateModalVisible(false);
|
||||
setStepFormValues({});
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
onCancel={() => {
|
||||
handleUpdateModalVisible(false);
|
||||
setStepFormValues({});
|
||||
}}
|
||||
updateModalVisible={updateModalVisible}
|
||||
values={stepFormValues}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<Drawer
|
||||
width={600}
|
||||
open={!!row}
|
||||
onClose={() => {
|
||||
setRow(undefined);
|
||||
}}
|
||||
closable={false}
|
||||
>
|
||||
{row?.name && (
|
||||
<ProDescriptions<API.UserInfo>
|
||||
column={2}
|
||||
title={row?.name}
|
||||
request={async () => ({
|
||||
data: row || {},
|
||||
})}
|
||||
params={{
|
||||
id: row?.name,
|
||||
}}
|
||||
columns={columns}
|
||||
/>
|
||||
)}
|
||||
</Drawer>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Url;
|
||||
26
src/pages/System/Config/component/CreateForm.tsx
Normal file
26
src/pages/System/Config/component/CreateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import { Modal } from 'antd';
|
||||
import React, { PropsWithChildren } from 'react';
|
||||
|
||||
interface CreateFormProps {
|
||||
modalVisible: boolean;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||
const { modalVisible, onCancel } = props;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="新建"
|
||||
width={420}
|
||||
open={modalVisible}
|
||||
onCancel={() => onCancel()}
|
||||
footer={null}
|
||||
>
|
||||
{props.children}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateForm;
|
||||
138
src/pages/System/Config/component/UpdateForm.tsx
Normal file
138
src/pages/System/Config/component/UpdateForm.tsx
Normal file
@@ -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<API.UserInfo> {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
}
|
||||
|
||||
export interface UpdateFormProps {
|
||||
onCancel: (flag?: boolean, formVals?: FormValueType) => void;
|
||||
onSubmit: (values: FormValueType) => Promise<void>;
|
||||
updateModalVisible: boolean;
|
||||
values: Partial<API.UserInfo>;
|
||||
}
|
||||
|
||||
const UpdateForm: React.FC<UpdateFormProps> = (props) => (
|
||||
<StepsForm
|
||||
stepsProps={{
|
||||
size: 'small',
|
||||
}}
|
||||
stepsFormRender={(dom, submitter) => {
|
||||
return (
|
||||
<Modal
|
||||
width={640}
|
||||
bodyStyle={{ padding: '32px 40px 48px' }}
|
||||
destroyOnClose
|
||||
title="规则配置"
|
||||
open={props.updateModalVisible}
|
||||
footer={submitter}
|
||||
onCancel={() => props.onCancel()}
|
||||
>
|
||||
{dom}
|
||||
</Modal>
|
||||
);
|
||||
}}
|
||||
onFinish={props.onSubmit}
|
||||
>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
name: props.values.name,
|
||||
nickName: props.values.nickName,
|
||||
}}
|
||||
title="基本信息"
|
||||
>
|
||||
<ProFormText
|
||||
width="md"
|
||||
name="name"
|
||||
label="规则名称"
|
||||
rules={[{ required: true, message: '请输入规则名称！' }]}
|
||||
/>
|
||||
<ProFormTextArea
|
||||
name="desc"
|
||||
width="md"
|
||||
label="规则描述"
|
||||
placeholder="请输入至少五个字符"
|
||||
rules={[
|
||||
{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 },
|
||||
]}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
target: '0',
|
||||
template: '0',
|
||||
}}
|
||||
title="配置规则属性"
|
||||
>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="target"
|
||||
label="监控对象"
|
||||
valueEnum={{
|
||||
0: '表一',
|
||||
1: '表二',
|
||||
}}
|
||||
/>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="template"
|
||||
label="规则模板"
|
||||
valueEnum={{
|
||||
0: '规则模板一',
|
||||
1: '规则模板二',
|
||||
}}
|
||||
/>
|
||||
<ProFormRadio.Group
|
||||
name="type"
|
||||
width="md"
|
||||
label="规则类型"
|
||||
options={[
|
||||
{
|
||||
value: '0',
|
||||
label: '强',
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '弱',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
type: '1',
|
||||
frequency: 'month',
|
||||
}}
|
||||
title="设定调度周期"
|
||||
>
|
||||
<ProFormDateTimePicker
|
||||
name="time"
|
||||
label="开始时间"
|
||||
rules={[{ required: true, message: '请选择开始时间！' }]}
|
||||
/>
|
||||
<ProFormSelect
|
||||
name="frequency"
|
||||
label="监控对象"
|
||||
width="xs"
|
||||
valueEnum={{
|
||||
month: '月',
|
||||
week: '周',
|
||||
}}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
</StepsForm>
|
||||
);
|
||||
|
||||
export default UpdateForm;
|
||||
273
src/pages/System/Config/index.tsx
Normal file
273
src/pages/System/Config/index.tsx
Normal file
@@ -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<unknown> = () => {
|
||||
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
|
||||
const [updateModalVisible, handleUpdateModalVisible] =
|
||||
useState<boolean>(false);
|
||||
const [stepFormValues, setStepFormValues] = useState({});
|
||||
const actionRef = useRef<ActionType>();
|
||||
const [row, setRow] = useState<API.UserInfo>();
|
||||
const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
|
||||
const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
|
||||
{
|
||||
title: '配置名称',
|
||||
dataIndex: '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) => (
|
||||
<>
|
||||
<a
|
||||
onClick={() => {
|
||||
handleUpdateModalVisible(true);
|
||||
setStepFormValues(record);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</a>
|
||||
<Divider type="vertical" />
|
||||
<a href="">删除</a>
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<PageContainer
|
||||
header={{
|
||||
title: '系统设置表',
|
||||
}}
|
||||
>
|
||||
<ProTable<API.UserInfo>
|
||||
headerTitle="查询表格"
|
||||
actionRef={actionRef}
|
||||
rowKey="id"
|
||||
search={{
|
||||
labelWidth: 120,
|
||||
}}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="1"
|
||||
type="primary"
|
||||
onClick={() => handleModalVisible(true)}
|
||||
>
|
||||
新建
|
||||
</Button>,
|
||||
]}
|
||||
request={async (params, sorter, filter) => {
|
||||
const { data, success } = await queryUserList({
|
||||
...params,
|
||||
// FIXME: remove @ts-ignore
|
||||
// @ts-ignore
|
||||
sorter,
|
||||
filter,
|
||||
});
|
||||
return {
|
||||
data: data?.list || [],
|
||||
success,
|
||||
};
|
||||
}}
|
||||
columns={columns}
|
||||
rowSelection={{
|
||||
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
|
||||
}}
|
||||
/>
|
||||
{selectedRowsState?.length > 0 && (
|
||||
<FooterToolbar
|
||||
extra={
|
||||
<div>
|
||||
已选择{' '}
|
||||
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||
项
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
await handleRemove(selectedRowsState);
|
||||
setSelectedRows([]);
|
||||
actionRef.current?.reloadAndRest?.();
|
||||
}}
|
||||
>
|
||||
批量删除
|
||||
</Button>
|
||||
<Button type="primary">批量审批</Button>
|
||||
</FooterToolbar>
|
||||
)}
|
||||
<CreateForm
|
||||
onCancel={() => handleModalVisible(false)}
|
||||
modalVisible={createModalVisible}
|
||||
>
|
||||
<ProTable<API.UserInfo, API.UserInfo>
|
||||
onSubmit={async (value) => {
|
||||
const success = await handleAdd(value);
|
||||
if (success) {
|
||||
handleModalVisible(false);
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
rowKey="id"
|
||||
type="form"
|
||||
columns={columns}
|
||||
/>
|
||||
</CreateForm>
|
||||
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||
<UpdateForm
|
||||
onSubmit={async (value) => {
|
||||
const success = await handleUpdate(value);
|
||||
if (success) {
|
||||
handleUpdateModalVisible(false);
|
||||
setStepFormValues({});
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
onCancel={() => {
|
||||
handleUpdateModalVisible(false);
|
||||
setStepFormValues({});
|
||||
}}
|
||||
updateModalVisible={updateModalVisible}
|
||||
values={stepFormValues}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<Drawer
|
||||
width={600}
|
||||
open={!!row}
|
||||
onClose={() => {
|
||||
setRow(undefined);
|
||||
}}
|
||||
closable={false}
|
||||
>
|
||||
{row?.name && (
|
||||
<ProDescriptions<API.UserInfo>
|
||||
column={2}
|
||||
title={row?.name}
|
||||
request={async () => ({
|
||||
data: row || {},
|
||||
})}
|
||||
params={{
|
||||
id: row?.name,
|
||||
}}
|
||||
columns={columns}
|
||||
/>
|
||||
)}
|
||||
</Drawer>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Config;
|
||||
26
src/pages/System/Log/component/CreateForm.tsx
Normal file
26
src/pages/System/Log/component/CreateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import { Modal } from 'antd';
|
||||
import React, { PropsWithChildren } from 'react';
|
||||
|
||||
interface CreateFormProps {
|
||||
modalVisible: boolean;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||
const { modalVisible, onCancel } = props;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="新建"
|
||||
width={420}
|
||||
open={modalVisible}
|
||||
onCancel={() => onCancel()}
|
||||
footer={null}
|
||||
>
|
||||
{props.children}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateForm;
|
||||
138
src/pages/System/Log/component/UpdateForm.tsx
Normal file
138
src/pages/System/Log/component/UpdateForm.tsx
Normal file
@@ -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<API.UserInfo> {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
}
|
||||
|
||||
export interface UpdateFormProps {
|
||||
onCancel: (flag?: boolean, formVals?: FormValueType) => void;
|
||||
onSubmit: (values: FormValueType) => Promise<void>;
|
||||
updateModalVisible: boolean;
|
||||
values: Partial<API.UserInfo>;
|
||||
}
|
||||
|
||||
const UpdateForm: React.FC<UpdateFormProps> = (props) => (
|
||||
<StepsForm
|
||||
stepsProps={{
|
||||
size: 'small',
|
||||
}}
|
||||
stepsFormRender={(dom, submitter) => {
|
||||
return (
|
||||
<Modal
|
||||
width={640}
|
||||
bodyStyle={{ padding: '32px 40px 48px' }}
|
||||
destroyOnClose
|
||||
title="规则配置"
|
||||
open={props.updateModalVisible}
|
||||
footer={submitter}
|
||||
onCancel={() => props.onCancel()}
|
||||
>
|
||||
{dom}
|
||||
</Modal>
|
||||
);
|
||||
}}
|
||||
onFinish={props.onSubmit}
|
||||
>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
name: props.values.name,
|
||||
nickName: props.values.nickName,
|
||||
}}
|
||||
title="基本信息"
|
||||
>
|
||||
<ProFormText
|
||||
width="md"
|
||||
name="name"
|
||||
label="规则名称"
|
||||
rules={[{ required: true, message: '请输入规则名称！' }]}
|
||||
/>
|
||||
<ProFormTextArea
|
||||
name="desc"
|
||||
width="md"
|
||||
label="规则描述"
|
||||
placeholder="请输入至少五个字符"
|
||||
rules={[
|
||||
{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 },
|
||||
]}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
target: '0',
|
||||
template: '0',
|
||||
}}
|
||||
title="配置规则属性"
|
||||
>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="target"
|
||||
label="监控对象"
|
||||
valueEnum={{
|
||||
0: '表一',
|
||||
1: '表二',
|
||||
}}
|
||||
/>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="template"
|
||||
label="规则模板"
|
||||
valueEnum={{
|
||||
0: '规则模板一',
|
||||
1: '规则模板二',
|
||||
}}
|
||||
/>
|
||||
<ProFormRadio.Group
|
||||
name="type"
|
||||
width="md"
|
||||
label="规则类型"
|
||||
options={[
|
||||
{
|
||||
value: '0',
|
||||
label: '强',
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '弱',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
type: '1',
|
||||
frequency: 'month',
|
||||
}}
|
||||
title="设定调度周期"
|
||||
>
|
||||
<ProFormDateTimePicker
|
||||
name="time"
|
||||
label="开始时间"
|
||||
rules={[{ required: true, message: '请选择开始时间！' }]}
|
||||
/>
|
||||
<ProFormSelect
|
||||
name="frequency"
|
||||
label="监控对象"
|
||||
width="xs"
|
||||
valueEnum={{
|
||||
month: '月',
|
||||
week: '周',
|
||||
}}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
</StepsForm>
|
||||
);
|
||||
|
||||
export default UpdateForm;
|
||||
278
src/pages/System/Log/index.tsx
Normal file
278
src/pages/System/Log/index.tsx
Normal file
@@ -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<unknown> = () => {
|
||||
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
|
||||
const [updateModalVisible, handleUpdateModalVisible] =
|
||||
useState<boolean>(false);
|
||||
const [stepFormValues, setStepFormValues] = useState({});
|
||||
const actionRef = useRef<ActionType>();
|
||||
const [row, setRow] = useState<API.UserInfo>();
|
||||
const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
|
||||
const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
|
||||
{
|
||||
title: '日志名称',
|
||||
dataIndex: '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) => (
|
||||
<>
|
||||
<a
|
||||
onClick={() => {
|
||||
handleUpdateModalVisible(true);
|
||||
setStepFormValues(record);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</a>
|
||||
<Divider type="vertical" />
|
||||
<a href="">删除</a>
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<PageContainer
|
||||
header={{
|
||||
title: '系统日志表',
|
||||
}}
|
||||
>
|
||||
<ProTable<API.UserInfo>
|
||||
headerTitle="查询表格"
|
||||
actionRef={actionRef}
|
||||
rowKey="id"
|
||||
search={{
|
||||
labelWidth: 120,
|
||||
}}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="1"
|
||||
type="primary"
|
||||
onClick={() => handleModalVisible(true)}
|
||||
>
|
||||
新建
|
||||
</Button>,
|
||||
]}
|
||||
request={async (params, sorter, filter) => {
|
||||
const { data, success } = await queryUserList({
|
||||
...params,
|
||||
// FIXME: remove @ts-ignore
|
||||
// @ts-ignore
|
||||
sorter,
|
||||
filter,
|
||||
});
|
||||
return {
|
||||
data: data?.list || [],
|
||||
success,
|
||||
};
|
||||
}}
|
||||
columns={columns}
|
||||
rowSelection={{
|
||||
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
|
||||
}}
|
||||
/>
|
||||
{selectedRowsState?.length > 0 && (
|
||||
<FooterToolbar
|
||||
extra={
|
||||
<div>
|
||||
已选择{' '}
|
||||
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||
项
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
await handleRemove(selectedRowsState);
|
||||
setSelectedRows([]);
|
||||
actionRef.current?.reloadAndRest?.();
|
||||
}}
|
||||
>
|
||||
批量删除
|
||||
</Button>
|
||||
<Button type="primary">批量审批</Button>
|
||||
</FooterToolbar>
|
||||
)}
|
||||
<CreateForm
|
||||
onCancel={() => handleModalVisible(false)}
|
||||
modalVisible={createModalVisible}
|
||||
>
|
||||
<ProTable<API.UserInfo, API.UserInfo>
|
||||
onSubmit={async (value) => {
|
||||
const success = await handleAdd(value);
|
||||
if (success) {
|
||||
handleModalVisible(false);
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
rowKey="id"
|
||||
type="form"
|
||||
columns={columns}
|
||||
/>
|
||||
</CreateForm>
|
||||
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||
<UpdateForm
|
||||
onSubmit={async (value) => {
|
||||
const success = await handleUpdate(value);
|
||||
if (success) {
|
||||
handleUpdateModalVisible(false);
|
||||
setStepFormValues({});
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
onCancel={() => {
|
||||
handleUpdateModalVisible(false);
|
||||
setStepFormValues({});
|
||||
}}
|
||||
updateModalVisible={updateModalVisible}
|
||||
values={stepFormValues}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<Drawer
|
||||
width={600}
|
||||
open={!!row}
|
||||
onClose={() => {
|
||||
setRow(undefined);
|
||||
}}
|
||||
closable={false}
|
||||
>
|
||||
{row?.name && (
|
||||
<ProDescriptions<API.UserInfo>
|
||||
column={2}
|
||||
title={row?.name}
|
||||
request={async () => ({
|
||||
data: row || {},
|
||||
})}
|
||||
params={{
|
||||
id: row?.name,
|
||||
}}
|
||||
columns={columns}
|
||||
/>
|
||||
)}
|
||||
</Drawer>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Log;
|
||||
26
src/pages/System/Oauth/component/CreateForm.tsx
Normal file
26
src/pages/System/Oauth/component/CreateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import { Modal } from 'antd';
|
||||
import React, { PropsWithChildren } from 'react';
|
||||
|
||||
interface CreateFormProps {
|
||||
modalVisible: boolean;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||
const { modalVisible, onCancel } = props;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="新建"
|
||||
width={420}
|
||||
open={modalVisible}
|
||||
onCancel={() => onCancel()}
|
||||
footer={null}
|
||||
>
|
||||
{props.children}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateForm;
|
||||
138
src/pages/System/Oauth/component/UpdateForm.tsx
Normal file
138
src/pages/System/Oauth/component/UpdateForm.tsx
Normal file
@@ -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<API.UserInfo> {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
}
|
||||
|
||||
export interface UpdateFormProps {
|
||||
onCancel: (flag?: boolean, formVals?: FormValueType) => void;
|
||||
onSubmit: (values: FormValueType) => Promise<void>;
|
||||
updateModalVisible: boolean;
|
||||
values: Partial<API.UserInfo>;
|
||||
}
|
||||
|
||||
const UpdateForm: React.FC<UpdateFormProps> = (props) => (
|
||||
<StepsForm
|
||||
stepsProps={{
|
||||
size: 'small',
|
||||
}}
|
||||
stepsFormRender={(dom, submitter) => {
|
||||
return (
|
||||
<Modal
|
||||
width={640}
|
||||
bodyStyle={{ padding: '32px 40px 48px' }}
|
||||
destroyOnClose
|
||||
title="规则配置"
|
||||
open={props.updateModalVisible}
|
||||
footer={submitter}
|
||||
onCancel={() => props.onCancel()}
|
||||
>
|
||||
{dom}
|
||||
</Modal>
|
||||
);
|
||||
}}
|
||||
onFinish={props.onSubmit}
|
||||
>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
name: props.values.name,
|
||||
nickName: props.values.nickName,
|
||||
}}
|
||||
title="基本信息"
|
||||
>
|
||||
<ProFormText
|
||||
width="md"
|
||||
name="name"
|
||||
label="规则名称"
|
||||
rules={[{ required: true, message: '请输入规则名称！' }]}
|
||||
/>
|
||||
<ProFormTextArea
|
||||
name="desc"
|
||||
width="md"
|
||||
label="规则描述"
|
||||
placeholder="请输入至少五个字符"
|
||||
rules={[
|
||||
{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 },
|
||||
]}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
target: '0',
|
||||
template: '0',
|
||||
}}
|
||||
title="配置规则属性"
|
||||
>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="target"
|
||||
label="监控对象"
|
||||
valueEnum={{
|
||||
0: '表一',
|
||||
1: '表二',
|
||||
}}
|
||||
/>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="template"
|
||||
label="规则模板"
|
||||
valueEnum={{
|
||||
0: '规则模板一',
|
||||
1: '规则模板二',
|
||||
}}
|
||||
/>
|
||||
<ProFormRadio.Group
|
||||
name="type"
|
||||
width="md"
|
||||
label="规则类型"
|
||||
options={[
|
||||
{
|
||||
value: '0',
|
||||
label: '强',
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '弱',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
type: '1',
|
||||
frequency: 'month',
|
||||
}}
|
||||
title="设定调度周期"
|
||||
>
|
||||
<ProFormDateTimePicker
|
||||
name="time"
|
||||
label="开始时间"
|
||||
rules={[{ required: true, message: '请选择开始时间！' }]}
|
||||
/>
|
||||
<ProFormSelect
|
||||
name="frequency"
|
||||
label="监控对象"
|
||||
width="xs"
|
||||
valueEnum={{
|
||||
month: '月',
|
||||
week: '周',
|
||||
}}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
</StepsForm>
|
||||
);
|
||||
|
||||
export default UpdateForm;
|
||||
283
src/pages/System/Oauth/index.tsx
Normal file
283
src/pages/System/Oauth/index.tsx
Normal file
@@ -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<unknown> = () => {
|
||||
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
|
||||
const [updateModalVisible, handleUpdateModalVisible] =
|
||||
useState<boolean>(false);
|
||||
const [stepFormValues, setStepFormValues] = useState({});
|
||||
const actionRef = useRef<ActionType>();
|
||||
const [row, setRow] = useState<API.UserInfo>();
|
||||
const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
|
||||
const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
|
||||
{
|
||||
title: '协议方',
|
||||
dataIndex: '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) => (
|
||||
<>
|
||||
<a
|
||||
onClick={() => {
|
||||
handleUpdateModalVisible(true);
|
||||
setStepFormValues(record);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</a>
|
||||
<Divider type="vertical" />
|
||||
<a href="">删除</a>
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<PageContainer
|
||||
header={{
|
||||
title: '第三方登录配置表',
|
||||
}}
|
||||
>
|
||||
<ProTable<API.UserInfo>
|
||||
headerTitle="查询表格"
|
||||
actionRef={actionRef}
|
||||
rowKey="id"
|
||||
search={{
|
||||
labelWidth: 120,
|
||||
}}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="1"
|
||||
type="primary"
|
||||
onClick={() => handleModalVisible(true)}
|
||||
>
|
||||
新建
|
||||
</Button>,
|
||||
]}
|
||||
request={async (params, sorter, filter) => {
|
||||
const { data, success } = await queryUserList({
|
||||
...params,
|
||||
// FIXME: remove @ts-ignore
|
||||
// @ts-ignore
|
||||
sorter,
|
||||
filter,
|
||||
});
|
||||
return {
|
||||
data: data?.list || [],
|
||||
success,
|
||||
};
|
||||
}}
|
||||
columns={columns}
|
||||
rowSelection={{
|
||||
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
|
||||
}}
|
||||
/>
|
||||
{selectedRowsState?.length > 0 && (
|
||||
<FooterToolbar
|
||||
extra={
|
||||
<div>
|
||||
已选择{' '}
|
||||
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||
项
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
await handleRemove(selectedRowsState);
|
||||
setSelectedRows([]);
|
||||
actionRef.current?.reloadAndRest?.();
|
||||
}}
|
||||
>
|
||||
批量删除
|
||||
</Button>
|
||||
<Button type="primary">批量审批</Button>
|
||||
</FooterToolbar>
|
||||
)}
|
||||
<CreateForm
|
||||
onCancel={() => handleModalVisible(false)}
|
||||
modalVisible={createModalVisible}
|
||||
>
|
||||
<ProTable<API.UserInfo, API.UserInfo>
|
||||
onSubmit={async (value) => {
|
||||
const success = await handleAdd(value);
|
||||
if (success) {
|
||||
handleModalVisible(false);
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
rowKey="id"
|
||||
type="form"
|
||||
columns={columns}
|
||||
/>
|
||||
</CreateForm>
|
||||
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||
<UpdateForm
|
||||
onSubmit={async (value) => {
|
||||
const success = await handleUpdate(value);
|
||||
if (success) {
|
||||
handleUpdateModalVisible(false);
|
||||
setStepFormValues({});
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
onCancel={() => {
|
||||
handleUpdateModalVisible(false);
|
||||
setStepFormValues({});
|
||||
}}
|
||||
updateModalVisible={updateModalVisible}
|
||||
values={stepFormValues}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<Drawer
|
||||
width={600}
|
||||
open={!!row}
|
||||
onClose={() => {
|
||||
setRow(undefined);
|
||||
}}
|
||||
closable={false}
|
||||
>
|
||||
{row?.name && (
|
||||
<ProDescriptions<API.UserInfo>
|
||||
column={2}
|
||||
title={row?.name}
|
||||
request={async () => ({
|
||||
data: row || {},
|
||||
})}
|
||||
params={{
|
||||
id: row?.name,
|
||||
}}
|
||||
columns={columns}
|
||||
/>
|
||||
)}
|
||||
</Drawer>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Oauth;
|
||||
@@ -132,28 +132,7 @@ const User: React.FC<unknown> = () => {
|
||||
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: '注册时间',
|
||||
title: '创建时间',
|
||||
dataIndex: 'create_time',
|
||||
valueType: 'dateTime',
|
||||
},
|
||||
|
||||
@@ -129,28 +129,8 @@ const User: React.FC<unknown> = () => {
|
||||
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: '注册时间',
|
||||
title: '创建时间',
|
||||
dataIndex: 'create_time',
|
||||
valueType: 'dateTime',
|
||||
},
|
||||
|
||||
@@ -1,26 +1,138 @@
|
||||
import {
|
||||
ProFormDateTimePicker,
|
||||
ProFormRadio,
|
||||
ProFormSelect,
|
||||
ProFormText,
|
||||
ProFormTextArea,
|
||||
StepsForm,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Modal } from 'antd';
|
||||
import React, { PropsWithChildren } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
interface CreateFormProps {
|
||||
modalVisible: boolean;
|
||||
onCancel: () => void;
|
||||
export interface FormValueType extends Partial<API.UserInfo> {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
}
|
||||
|
||||
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||
const { modalVisible, onCancel } = props;
|
||||
export interface UpdateFormProps {
|
||||
onCancel: (flag?: boolean, formVals?: FormValueType) => void;
|
||||
onSubmit: (values: FormValueType) => Promise<void>;
|
||||
updateModalVisible: boolean;
|
||||
values: Partial<API.UserInfo>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="新建"
|
||||
width={420}
|
||||
open={modalVisible}
|
||||
onCancel={() => onCancel()}
|
||||
footer={null}
|
||||
const UpdateForm: React.FC<UpdateFormProps> = (props) => (
|
||||
<StepsForm
|
||||
stepsProps={{
|
||||
size: 'small',
|
||||
}}
|
||||
stepsFormRender={(dom, submitter) => {
|
||||
return (
|
||||
<Modal
|
||||
width={640}
|
||||
bodyStyle={{ padding: '32px 40px 48px' }}
|
||||
destroyOnClose
|
||||
title="规则配置"
|
||||
open={props.updateModalVisible}
|
||||
footer={submitter}
|
||||
onCancel={() => props.onCancel()}
|
||||
>
|
||||
{dom}
|
||||
</Modal>
|
||||
);
|
||||
}}
|
||||
onFinish={props.onSubmit}
|
||||
>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
name: props.values.name,
|
||||
nickName: props.values.nickName,
|
||||
}}
|
||||
title="基本信息"
|
||||
>
|
||||
{props.children}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
<ProFormText
|
||||
width="md"
|
||||
name="name"
|
||||
label="规则名称"
|
||||
rules={[{ required: true, message: '请输入规则名称！' }]}
|
||||
/>
|
||||
<ProFormTextArea
|
||||
name="desc"
|
||||
width="md"
|
||||
label="规则描述"
|
||||
placeholder="请输入至少五个字符"
|
||||
rules={[
|
||||
{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 },
|
||||
]}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
target: '0',
|
||||
template: '0',
|
||||
}}
|
||||
title="配置规则属性"
|
||||
>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="target"
|
||||
label="监控对象"
|
||||
valueEnum={{
|
||||
0: '表一',
|
||||
1: '表二',
|
||||
}}
|
||||
/>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="template"
|
||||
label="规则模板"
|
||||
valueEnum={{
|
||||
0: '规则模板一',
|
||||
1: '规则模板二',
|
||||
}}
|
||||
/>
|
||||
<ProFormRadio.Group
|
||||
name="type"
|
||||
width="md"
|
||||
label="规则类型"
|
||||
options={[
|
||||
{
|
||||
value: '0',
|
||||
label: '强',
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '弱',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
type: '1',
|
||||
frequency: 'month',
|
||||
}}
|
||||
title="设定调度周期"
|
||||
>
|
||||
<ProFormDateTimePicker
|
||||
name="time"
|
||||
label="开始时间"
|
||||
rules={[{ required: true, message: '请选择开始时间！' }]}
|
||||
/>
|
||||
<ProFormSelect
|
||||
name="frequency"
|
||||
label="监控对象"
|
||||
width="xs"
|
||||
valueEnum={{
|
||||
month: '月',
|
||||
week: '周',
|
||||
}}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
</StepsForm>
|
||||
);
|
||||
|
||||
export default CreateForm;
|
||||
export default UpdateForm;
|
||||
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
import { Button, Divider, Drawer, message } from 'antd';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import CreateForm from './components/CreateForm';
|
||||
//import UpdateForm, { FormValueType } from './components/UpdateForm';
|
||||
import UpdateForm, { FormValueType } from './components/UpdateForm';
|
||||
|
||||
const { addUser, queryUserList, deleteUser, modifyUser } =
|
||||
services.UserController;
|
||||
|
||||
Reference in New Issue
Block a user