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',
|
path: '/access',
|
||||||
component: './Access',
|
component: './Access',
|
||||||
},
|
},
|
||||||
{
|
/*{
|
||||||
name: ' CRUD 示例',
|
name: ' 系统监控',
|
||||||
path: '/table',
|
path: '/redis',
|
||||||
component: './Table',
|
component: './Redis',
|
||||||
},
|
},*/
|
||||||
{
|
{
|
||||||
name: ' 用户配置',
|
name: ' 用户配置',
|
||||||
path: '/user',
|
path: '/user',
|
||||||
@@ -44,28 +44,28 @@ export default defineConfig({
|
|||||||
{
|
{
|
||||||
name: ' 用户表',
|
name: ' 用户表',
|
||||||
path: '/user/users',
|
path: '/user/users',
|
||||||
component: "./Users",
|
component: './Users',
|
||||||
layout:true,
|
layout: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: ' 角色表',
|
name: ' 角色表',
|
||||||
path: '/user/role',
|
path: '/user/role',
|
||||||
component: "./Role",
|
component: './Role',
|
||||||
layout:true,
|
layout: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: ' 权限表',
|
name: ' 权限表',
|
||||||
path: '/user/permission',
|
path: '/user/permission',
|
||||||
component: "./Permission",
|
component: './Permission',
|
||||||
layout:true,
|
layout: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: ' 社会用户表',
|
name: ' 社会用户表',
|
||||||
path: '/user/social',
|
path: '/user/social',
|
||||||
component: "./Social",
|
component: './Social',
|
||||||
layout:true,
|
layout: true,
|
||||||
},
|
},
|
||||||
]
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: ' 存储配置',
|
name: ' 存储配置',
|
||||||
@@ -74,40 +74,112 @@ export default defineConfig({
|
|||||||
{
|
{
|
||||||
name: ' 阿里云配置表',
|
name: ' 阿里云配置表',
|
||||||
path: '/storage/ali',
|
path: '/storage/ali',
|
||||||
component: "./Ali",
|
component: './Ali',
|
||||||
layout:true,
|
layout: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: ' minio配置表',
|
name: ' minio配置表',
|
||||||
path: '/storage/minio',
|
path: '/storage/minio',
|
||||||
component: "./Minio",
|
component: './Minio',
|
||||||
layout:true,
|
layout: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: ' 七牛云配置表',
|
name: ' 七牛云配置表',
|
||||||
path: '/storage/qiniu',
|
path: '/storage/qiniu',
|
||||||
component: "./Qiniu",
|
component: './Qiniu',
|
||||||
layout:true,
|
layout: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: ' 腾讯云配置表',
|
name: ' 腾讯云配置表',
|
||||||
path: '/storage/tencent',
|
path: '/storage/tencent',
|
||||||
component: "./Tencent",
|
component: './Tencent',
|
||||||
layout:true,
|
layout: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: ' 又拍云配置表',
|
name: ' 又拍云配置表',
|
||||||
path: '/storage/up',
|
path: '/storage/up',
|
||||||
component: "./Up",
|
component: './Up',
|
||||||
layout:true,
|
layout: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: ' sftp配置表',
|
name: ' sftp配置表',
|
||||||
path: '/storage/sftp',
|
path: '/storage/sftp',
|
||||||
component: "./Sftp",
|
component: './Sftp',
|
||||||
layout:true,
|
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',
|
npmClient: 'yarn',
|
||||||
|
|||||||
@@ -11,10 +11,14 @@
|
|||||||
"start": "npm run dev"
|
"start": "npm run dev"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@ant-design/charts": "^2.1.1",
|
||||||
"@ant-design/icons": "^5.0.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",
|
"@umijs/max": "^4.3.1",
|
||||||
"antd": "^5.4.0",
|
"antd": "^5.4.0",
|
||||||
|
"echarts": "^5.5.1",
|
||||||
|
"echarts-for-react": "^3.0.2",
|
||||||
|
"react-calendar-heatmap": "^1.9.0",
|
||||||
"yarn": "^1.22.22"
|
"yarn": "^1.22.22"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|||||||
@@ -109,21 +109,6 @@ const User: React.FC<unknown> = () => {
|
|||||||
dataIndex: 'endpoint',
|
dataIndex: 'endpoint',
|
||||||
valueType: 'text',
|
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名称',
|
title: 'Bucket名称',
|
||||||
dataIndex: 'bucket_name',
|
dataIndex: 'bucket_name',
|
||||||
@@ -139,15 +124,9 @@ const User: React.FC<unknown> = () => {
|
|||||||
dataIndex: 'user_agent',
|
dataIndex: 'user_agent',
|
||||||
valueType: 'text',
|
valueType: 'text',
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
title: '失败后最大重试次数',
|
title: '创建时间',
|
||||||
dataIndex: 'max_error_retry',
|
|
||||||
default: '3',
|
|
||||||
tip: '请求失败后最大的重试次数。默认3次。',
|
|
||||||
valueType: 'text',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '注册时间',
|
|
||||||
dataIndex: 'create_time',
|
dataIndex: 'create_time',
|
||||||
valueType: 'dateTime',
|
valueType: 'dateTime',
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,19 +1,319 @@
|
|||||||
import Guide from '@/components/Guide';
|
/** @format */
|
||||||
import { trim } from '@/utils/format';
|
import { ProCard, ProList } from '@ant-design/pro-components';
|
||||||
import { PageContainer } from '@ant-design/pro-components';
|
import { Avatar, Card, Skeleton, Space, Tag } from 'antd';
|
||||||
import { useModel } from '@umijs/max';
|
import Meta from 'antd/es/card/Meta';
|
||||||
import React from 'react';
|
import ReactECharts from 'echarts-for-react';
|
||||||
import styles from './index.less';
|
import { FunctionComponent, useEffect, useState } from 'react';
|
||||||
|
import styles from './index.module.less';
|
||||||
|
|
||||||
const HomePage: React.FC = () => {
|
import aliyun from '@/assets/icons/aliyun.svg';
|
||||||
const { name } = useModel('global');
|
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 (
|
return (
|
||||||
<PageContainer ghost>
|
<>
|
||||||
<div className={styles.container}>
|
<div className={styles.home_content_main}>
|
||||||
<Guide name={trim(name)} />
|
<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>
|
</div>
|
||||||
</PageContainer>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
export default MainHome;
|
||||||
export default HomePage;
|
|
||||||
|
|||||||
@@ -130,17 +130,7 @@ const User: React.FC<unknown> = () => {
|
|||||||
valueType: 'text',
|
valueType: 'text',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'file_host',
|
title: '创建时间',
|
||||||
dataIndex: 'file_host',
|
|
||||||
valueType: 'text',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'download_host',
|
|
||||||
dataIndex: 'download_host',
|
|
||||||
valueType: 'text',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '注册时间',
|
|
||||||
dataIndex: 'create_time',
|
dataIndex: 'create_time',
|
||||||
valueType: 'dateTime',
|
valueType: 'dateTime',
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -127,7 +127,7 @@ const User: React.FC<unknown> = () => {
|
|||||||
valueType: 'text',
|
valueType: 'text',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '注册时间',
|
title: '创建时间',
|
||||||
dataIndex: 'create_time',
|
dataIndex: 'create_time',
|
||||||
valueType: 'dateTime',
|
valueType: 'dateTime',
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -130,26 +130,7 @@ const User: React.FC<unknown> = () => {
|
|||||||
valueType: 'text',
|
valueType: 'text',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '使用的Region',
|
title: '创建时间',
|
||||||
dataIndex: 'region',
|
|
||||||
valueType: 'text',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '是否使用https',
|
|
||||||
tip: '空间相关上传管理操作是否使用 https , 默认 是',
|
|
||||||
default: '1',
|
|
||||||
dataIndex: 'use_https_domains',
|
|
||||||
valueType: 'text',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '是否使用代理加速上传',
|
|
||||||
tip: '空间相关上传管理操作是否使用代理加速上传，默认 是',
|
|
||||||
default: '1',
|
|
||||||
dataIndex: 'acc_up_host_first',
|
|
||||||
valueType: 'text',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '注册时间',
|
|
||||||
dataIndex: 'create_time',
|
dataIndex: 'create_time',
|
||||||
valueType: 'dateTime',
|
valueType: 'dateTime',
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -119,7 +119,7 @@ const User: React.FC<unknown> = () => {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '注册时间',
|
title: '创建时间',
|
||||||
dataIndex: 'create_time',
|
dataIndex: 'create_time',
|
||||||
valueType: 'dateTime',
|
valueType: 'dateTime',
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -136,22 +136,7 @@ const User: React.FC<unknown> = () => {
|
|||||||
valueType: 'text',
|
valueType: 'text',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '连接超时时长，单位毫秒',
|
title: '创建时间',
|
||||||
dataIndex: 'connection_timeout',
|
|
||||||
valueType: 'text',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Socket连接超时时长，单位毫秒',
|
|
||||||
dataIndex: 'so_timeout',
|
|
||||||
valueType: 'text',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '设置服务器语言',
|
|
||||||
dataIndex: 'server_language_code',
|
|
||||||
valueType: 'text',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '注册时间',
|
|
||||||
dataIndex: 'create_time',
|
dataIndex: 'create_time',
|
||||||
valueType: 'dateTime',
|
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',
|
valueType: 'text',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '使用的Region',
|
title: '创建时间',
|
||||||
dataIndex: 'region',
|
|
||||||
valueType: 'text',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '域名后缀',
|
|
||||||
dataIndex: 'end_point_suffix',
|
|
||||||
valueType: 'text',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'http proxy代理',
|
|
||||||
tip: 'http proxy代理，如果使用http proxy代理，需要设置IP与端口',
|
|
||||||
dataIndex: 'http_proxy_Ip',
|
|
||||||
valueType: 'text',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '代理服务器端口',
|
|
||||||
dataIndex: 'http_proxy_port',
|
|
||||||
valueType: 'text',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '注册时间',
|
|
||||||
dataIndex: 'create_time',
|
dataIndex: 'create_time',
|
||||||
valueType: 'dateTime',
|
valueType: 'dateTime',
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -129,28 +129,8 @@ const User: React.FC<unknown> = () => {
|
|||||||
dataIndex: 'base_path',
|
dataIndex: 'base_path',
|
||||||
valueType: 'text',
|
valueType: 'text',
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
title: '分片大小',
|
title: '创建时间',
|
||||||
default: '5',
|
|
||||||
dataIndex: 'part_size',
|
|
||||||
valueType: 'text',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '超时时间',
|
|
||||||
tip: '默认的超时时间：30秒',
|
|
||||||
default: '30',
|
|
||||||
dataIndex: 'timeout',
|
|
||||||
valueType: 'text',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '接入点',
|
|
||||||
tip: '默认为自动识别接入点',
|
|
||||||
dataIndex: 'api_domain',
|
|
||||||
valueType: 'text',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '注册时间',
|
|
||||||
dataIndex: 'create_time',
|
dataIndex: 'create_time',
|
||||||
valueType: 'dateTime',
|
valueType: 'dateTime',
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,26 +1,138 @@
|
|||||||
|
import {
|
||||||
|
ProFormDateTimePicker,
|
||||||
|
ProFormRadio,
|
||||||
|
ProFormSelect,
|
||||||
|
ProFormText,
|
||||||
|
ProFormTextArea,
|
||||||
|
StepsForm,
|
||||||
|
} from '@ant-design/pro-components';
|
||||||
import { Modal } from 'antd';
|
import { Modal } from 'antd';
|
||||||
import React, { PropsWithChildren } from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
interface CreateFormProps {
|
export interface FormValueType extends Partial<API.UserInfo> {
|
||||||
modalVisible: boolean;
|
target?: string;
|
||||||
onCancel: () => void;
|
template?: string;
|
||||||
|
type?: string;
|
||||||
|
time?: string;
|
||||||
|
frequency?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
export interface UpdateFormProps {
|
||||||
const { modalVisible, onCancel } = props;
|
onCancel: (flag?: boolean, formVals?: FormValueType) => void;
|
||||||
|
onSubmit: (values: FormValueType) => Promise<void>;
|
||||||
|
updateModalVisible: boolean;
|
||||||
|
values: Partial<API.UserInfo>;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
const UpdateForm: React.FC<UpdateFormProps> = (props) => (
|
||||||
<Modal
|
<StepsForm
|
||||||
destroyOnClose
|
stepsProps={{
|
||||||
title="新建"
|
size: 'small',
|
||||||
width={420}
|
}}
|
||||||
open={modalVisible}
|
stepsFormRender={(dom, submitter) => {
|
||||||
onCancel={() => onCancel()}
|
return (
|
||||||
footer={null}
|
<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}
|
<ProFormText
|
||||||
</Modal>
|
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 { Button, Divider, Drawer, message } from 'antd';
|
||||||
import React, { useRef, useState } from 'react';
|
import React, { useRef, useState } from 'react';
|
||||||
import CreateForm from './components/CreateForm';
|
import CreateForm from './components/CreateForm';
|
||||||
//import UpdateForm, { FormValueType } from './components/UpdateForm';
|
import UpdateForm, { FormValueType } from './components/UpdateForm';
|
||||||
|
|
||||||
const { addUser, queryUserList, deleteUser, modifyUser } =
|
const { addUser, queryUserList, deleteUser, modifyUser } =
|
||||||
services.UserController;
|
services.UserController;
|
||||||
|
|||||||
Reference in New Issue
Block a user