afc163
8 months ago
23 changed files with 0 additions and 4741 deletions
@ -1,130 +0,0 @@ |
|||||
import { |
|
||||
DownloadOutlined, |
|
||||
EditOutlined, |
|
||||
EllipsisOutlined, |
|
||||
ShareAltOutlined, |
|
||||
} from '@ant-design/icons'; |
|
||||
import { useRequest } from '@umijs/max'; |
|
||||
import { Avatar, Card, Dropdown, List, Tooltip } from 'antd'; |
|
||||
import numeral from 'numeral'; |
|
||||
import React from 'react'; |
|
||||
import type { ListItemDataType } from '../../data.d'; |
|
||||
import { queryFakeList } from '../../service'; |
|
||||
import useStyles from './index.style'; |
|
||||
export function formatWan(val: number) { |
|
||||
const v = val * 1; |
|
||||
if (!v || Number.isNaN(v)) return ''; |
|
||||
let result: React.ReactNode = val; |
|
||||
if (val > 10000) { |
|
||||
result = ( |
|
||||
<span> |
|
||||
{Math.floor(val / 10000)} |
|
||||
<span |
|
||||
style={{ |
|
||||
position: 'relative', |
|
||||
top: -2, |
|
||||
fontSize: 14, |
|
||||
fontStyle: 'normal', |
|
||||
marginLeft: 2, |
|
||||
}} |
|
||||
> |
|
||||
万 |
|
||||
</span> |
|
||||
</span> |
|
||||
); |
|
||||
} |
|
||||
return result; |
|
||||
} |
|
||||
const Applications: React.FC = () => { |
|
||||
const { styles: stylesApplications } = useStyles(); |
|
||||
// 获取tab列表数据
|
|
||||
const { data: listData } = useRequest(() => { |
|
||||
return queryFakeList({ |
|
||||
count: 30, |
|
||||
}); |
|
||||
}); |
|
||||
|
|
||||
const CardInfo: React.FC<{ |
|
||||
activeUser: React.ReactNode; |
|
||||
newUser: React.ReactNode; |
|
||||
}> = ({ activeUser, newUser }) => ( |
|
||||
<div className={stylesApplications.cardInfo}> |
|
||||
<div> |
|
||||
<p>活跃用户</p> |
|
||||
<p>{activeUser}</p> |
|
||||
</div> |
|
||||
<div> |
|
||||
<p>新增用户</p> |
|
||||
<p>{newUser}</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
); |
|
||||
return ( |
|
||||
<List<ListItemDataType> |
|
||||
rowKey="id" |
|
||||
className={stylesApplications.filterCardList} |
|
||||
grid={{ |
|
||||
gutter: 24, |
|
||||
xxl: 3, |
|
||||
xl: 2, |
|
||||
lg: 2, |
|
||||
md: 2, |
|
||||
sm: 2, |
|
||||
xs: 1, |
|
||||
}} |
|
||||
dataSource={listData?.list || []} |
|
||||
renderItem={(item) => ( |
|
||||
<List.Item key={item.id}> |
|
||||
<Card |
|
||||
hoverable |
|
||||
styles={{ |
|
||||
body: { |
|
||||
paddingBottom: 20, |
|
||||
}, |
|
||||
}} |
|
||||
actions={[ |
|
||||
<Tooltip key="download" title="下载"> |
|
||||
<DownloadOutlined /> |
|
||||
</Tooltip>, |
|
||||
<Tooltip title="编辑" key="edit"> |
|
||||
<EditOutlined /> |
|
||||
</Tooltip>, |
|
||||
<Tooltip title="分享" key="share"> |
|
||||
<ShareAltOutlined /> |
|
||||
</Tooltip>, |
|
||||
<Dropdown |
|
||||
menu={{ |
|
||||
items: [ |
|
||||
{ |
|
||||
key: '1', |
|
||||
title: '1st menu item', |
|
||||
}, |
|
||||
{ |
|
||||
key: '2', |
|
||||
title: '2nd menu item', |
|
||||
}, |
|
||||
], |
|
||||
}} |
|
||||
key="ellipsis" |
|
||||
> |
|
||||
<EllipsisOutlined /> |
|
||||
</Dropdown>, |
|
||||
]} |
|
||||
> |
|
||||
<Card.Meta |
|
||||
avatar={<Avatar size="small" src={item.avatar} />} |
|
||||
title={item.title} |
|
||||
/> |
|
||||
<div> |
|
||||
<CardInfo |
|
||||
activeUser={formatWan(item.activeUser)} |
|
||||
newUser={numeral(item.newUser).format('0,0')} |
|
||||
/> |
|
||||
</div> |
|
||||
</Card> |
|
||||
</List.Item> |
|
||||
)} |
|
||||
/> |
|
||||
); |
|
||||
}; |
|
||||
export default Applications; |
|
||||
@ -1,278 +0,0 @@ |
|||||
import { |
|
||||
ClusterOutlined, |
|
||||
ContactsOutlined, |
|
||||
HomeOutlined, |
|
||||
PlusOutlined, |
|
||||
} from '@ant-design/icons'; |
|
||||
import { GridContent } from '@ant-design/pro-components'; |
|
||||
import { useRequest } from '@umijs/max'; |
|
||||
import { |
|
||||
Avatar, |
|
||||
Card, |
|
||||
Col, |
|
||||
Divider, |
|
||||
Input, |
|
||||
type InputRef, |
|
||||
Row, |
|
||||
Tag, |
|
||||
} from 'antd'; |
|
||||
import React, { useRef, useState } from 'react'; |
|
||||
import useStyles from './Center.style'; |
|
||||
import Applications from './components/Applications'; |
|
||||
import Articles from './components/Articles'; |
|
||||
import Projects from './components/Projects'; |
|
||||
import type { CurrentUser, TagType, tabKeyType } from './data.d'; |
|
||||
import { queryCurrent } from './service'; |
|
||||
|
|
||||
const operationTabList = [ |
|
||||
{ |
|
||||
key: 'articles', |
|
||||
tab: ( |
|
||||
<span> |
|
||||
文章{' '} |
|
||||
<span |
|
||||
style={{ |
|
||||
fontSize: 14, |
|
||||
}} |
|
||||
> |
|
||||
(8) |
|
||||
</span> |
|
||||
</span> |
|
||||
), |
|
||||
}, |
|
||||
{ |
|
||||
key: 'applications', |
|
||||
tab: ( |
|
||||
<span> |
|
||||
应用{' '} |
|
||||
<span |
|
||||
style={{ |
|
||||
fontSize: 14, |
|
||||
}} |
|
||||
> |
|
||||
(8) |
|
||||
</span> |
|
||||
</span> |
|
||||
), |
|
||||
}, |
|
||||
{ |
|
||||
key: 'projects', |
|
||||
tab: ( |
|
||||
<span> |
|
||||
项目{' '} |
|
||||
<span |
|
||||
style={{ |
|
||||
fontSize: 14, |
|
||||
}} |
|
||||
> |
|
||||
(8) |
|
||||
</span> |
|
||||
</span> |
|
||||
), |
|
||||
}, |
|
||||
]; |
|
||||
const TagList: React.FC<{ |
|
||||
tags: CurrentUser['tags']; |
|
||||
}> = ({ tags }) => { |
|
||||
const { styles } = useStyles(); |
|
||||
const ref = useRef<InputRef | null>(null); |
|
||||
const [newTags, setNewTags] = useState<TagType[]>([]); |
|
||||
const [inputVisible, setInputVisible] = useState<boolean>(false); |
|
||||
const [inputValue, setInputValue] = useState<string>(''); |
|
||||
const showInput = () => { |
|
||||
setInputVisible(true); |
|
||||
if (ref.current) { |
|
||||
// eslint-disable-next-line no-unused-expressions
|
|
||||
ref.current?.focus(); |
|
||||
} |
|
||||
}; |
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { |
|
||||
setInputValue(e.target.value); |
|
||||
}; |
|
||||
const handleInputConfirm = () => { |
|
||||
let tempsTags = [...newTags]; |
|
||||
if ( |
|
||||
inputValue && |
|
||||
tempsTags.filter((tag) => tag.label === inputValue).length === 0 |
|
||||
) { |
|
||||
tempsTags = [ |
|
||||
...tempsTags, |
|
||||
{ |
|
||||
key: `new-${tempsTags.length}`, |
|
||||
label: inputValue, |
|
||||
}, |
|
||||
]; |
|
||||
} |
|
||||
setNewTags(tempsTags); |
|
||||
setInputVisible(false); |
|
||||
setInputValue(''); |
|
||||
}; |
|
||||
return ( |
|
||||
<div className={styles.tags}> |
|
||||
<div className={styles.tagsTitle}>标签</div> |
|
||||
{(tags || []).concat(newTags).map((item) => ( |
|
||||
<Tag key={item.key}>{item.label}</Tag> |
|
||||
))} |
|
||||
{inputVisible && ( |
|
||||
<Input |
|
||||
ref={ref} |
|
||||
size="small" |
|
||||
style={{ |
|
||||
width: 78, |
|
||||
}} |
|
||||
value={inputValue} |
|
||||
onChange={handleInputChange} |
|
||||
onBlur={handleInputConfirm} |
|
||||
onPressEnter={handleInputConfirm} |
|
||||
/> |
|
||||
)} |
|
||||
{!inputVisible && ( |
|
||||
<Tag |
|
||||
onClick={showInput} |
|
||||
style={{ |
|
||||
borderStyle: 'dashed', |
|
||||
}} |
|
||||
> |
|
||||
<PlusOutlined /> |
|
||||
</Tag> |
|
||||
)} |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
const Center: React.FC = () => { |
|
||||
const { styles } = useStyles(); |
|
||||
const [tabKey, setTabKey] = useState<tabKeyType>('articles'); |
|
||||
|
|
||||
// 获取用户信息
|
|
||||
const { data: currentUser, loading } = useRequest(() => { |
|
||||
return queryCurrent(); |
|
||||
}); |
|
||||
|
|
||||
// 渲染用户信息
|
|
||||
const renderUserInfo = ({ |
|
||||
title, |
|
||||
group, |
|
||||
geographic, |
|
||||
}: Partial<CurrentUser>) => { |
|
||||
return ( |
|
||||
<div className={styles.detail}> |
|
||||
<p> |
|
||||
<ContactsOutlined |
|
||||
style={{ |
|
||||
marginRight: 8, |
|
||||
}} |
|
||||
/> |
|
||||
{title} |
|
||||
</p> |
|
||||
<p> |
|
||||
<ClusterOutlined |
|
||||
style={{ |
|
||||
marginRight: 8, |
|
||||
}} |
|
||||
/> |
|
||||
{group} |
|
||||
</p> |
|
||||
<p> |
|
||||
<HomeOutlined |
|
||||
style={{ |
|
||||
marginRight: 8, |
|
||||
}} |
|
||||
/> |
|
||||
{ |
|
||||
( |
|
||||
geographic || { |
|
||||
province: { |
|
||||
label: '', |
|
||||
}, |
|
||||
} |
|
||||
).province.label |
|
||||
} |
|
||||
{ |
|
||||
( |
|
||||
geographic || { |
|
||||
city: { |
|
||||
label: '', |
|
||||
}, |
|
||||
} |
|
||||
).city.label |
|
||||
} |
|
||||
</p> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
// 渲染tab切换
|
|
||||
const renderChildrenByTabKey = (tabValue: tabKeyType) => { |
|
||||
if (tabValue === 'projects') { |
|
||||
return <Projects />; |
|
||||
} |
|
||||
if (tabValue === 'applications') { |
|
||||
return <Applications />; |
|
||||
} |
|
||||
if (tabValue === 'articles') { |
|
||||
return <Articles />; |
|
||||
} |
|
||||
return null; |
|
||||
}; |
|
||||
return ( |
|
||||
<GridContent> |
|
||||
<Row gutter={24}> |
|
||||
<Col lg={7} md={24}> |
|
||||
<Card |
|
||||
variant="borderless" |
|
||||
style={{ |
|
||||
marginBottom: 24, |
|
||||
}} |
|
||||
loading={loading} |
|
||||
> |
|
||||
{!loading && currentUser && ( |
|
||||
<> |
|
||||
<div className={styles.avatarHolder}> |
|
||||
<img alt="" src={currentUser.avatar} /> |
|
||||
<div className={styles.name}>{currentUser.name}</div> |
|
||||
<div>{currentUser?.signature}</div> |
|
||||
</div> |
|
||||
{renderUserInfo(currentUser)} |
|
||||
<Divider dashed /> |
|
||||
<TagList tags={currentUser.tags || []} /> |
|
||||
<Divider |
|
||||
style={{ |
|
||||
marginTop: 16, |
|
||||
}} |
|
||||
dashed |
|
||||
/> |
|
||||
<div className={styles.team}> |
|
||||
<div className={styles.teamTitle}>团队</div> |
|
||||
<Row gutter={36}> |
|
||||
{currentUser.notice?.map((item) => ( |
|
||||
<Col key={item.id} lg={24} xl={12}> |
|
||||
<a href={item.href}> |
|
||||
<Avatar size="small" src={item.logo} /> |
|
||||
{item.member} |
|
||||
</a> |
|
||||
</Col> |
|
||||
))} |
|
||||
</Row> |
|
||||
</div> |
|
||||
</> |
|
||||
)} |
|
||||
</Card> |
|
||||
</Col> |
|
||||
<Col lg={17} md={24}> |
|
||||
<Card |
|
||||
className={styles.tabsCard} |
|
||||
variant="borderless" |
|
||||
tabList={operationTabList} |
|
||||
activeTabKey={tabKey} |
|
||||
onTabChange={(_tabKey: string) => { |
|
||||
setTabKey(_tabKey as tabKeyType); |
|
||||
}} |
|
||||
> |
|
||||
{renderChildrenByTabKey(tabKey)} |
|
||||
</Card> |
|
||||
</Col> |
|
||||
</Row> |
|
||||
</GridContent> |
|
||||
); |
|
||||
}; |
|
||||
export default Center; |
|
||||
@ -1,110 +0,0 @@ |
|||||
import { Card } from 'antd'; |
|
||||
import type { CardProps } from 'antd/es/card'; |
|
||||
import classNames from 'classnames'; |
|
||||
import omit from 'rc-util/lib/omit'; |
|
||||
import React from 'react'; |
|
||||
import useStyles from './index.style'; |
|
||||
|
|
||||
type totalType = () => React.ReactNode; |
|
||||
|
|
||||
export type ChartCardProps = { |
|
||||
title: React.ReactNode; |
|
||||
action?: React.ReactNode; |
|
||||
total?: React.ReactNode | number | (() => React.ReactNode | number); |
|
||||
footer?: React.ReactNode; |
|
||||
contentHeight?: number; |
|
||||
avatar?: React.ReactNode; |
|
||||
style?: React.CSSProperties; |
|
||||
} & CardProps; |
|
||||
|
|
||||
const ChartCard: React.FC<ChartCardProps> = (props) => { |
|
||||
const { styles } = useStyles(); |
|
||||
const renderTotal = (total?: number | totalType | React.ReactNode) => { |
|
||||
if (!total && total !== 0) { |
|
||||
return null; |
|
||||
} |
|
||||
let totalDom: React.ReactNode | null = null; |
|
||||
switch (typeof total) { |
|
||||
case 'undefined': |
|
||||
totalDom = null; |
|
||||
break; |
|
||||
case 'function': |
|
||||
totalDom = <div className={styles.total}>{total()}</div>; |
|
||||
break; |
|
||||
default: |
|
||||
totalDom = <div className={styles.total}>{total}</div>; |
|
||||
} |
|
||||
return totalDom; |
|
||||
}; |
|
||||
const renderContent = () => { |
|
||||
const { |
|
||||
contentHeight, |
|
||||
title, |
|
||||
avatar, |
|
||||
action, |
|
||||
total, |
|
||||
footer, |
|
||||
children, |
|
||||
loading, |
|
||||
} = props; |
|
||||
if (loading) { |
|
||||
return false; |
|
||||
} |
|
||||
return ( |
|
||||
<div className={styles.chartCard}> |
|
||||
<div |
|
||||
className={classNames(styles.chartTop, { |
|
||||
[styles.chartTopMargin]: !children && !footer, |
|
||||
})} |
|
||||
> |
|
||||
<div className={styles.avatar}>{avatar}</div> |
|
||||
<div className={styles.metaWrap}> |
|
||||
<div className={styles.meta}> |
|
||||
<span>{title}</span> |
|
||||
<span className={styles.action}>{action}</span> |
|
||||
</div> |
|
||||
{renderTotal(total)} |
|
||||
</div> |
|
||||
</div> |
|
||||
{children && ( |
|
||||
<div |
|
||||
className={styles.content} |
|
||||
style={{ |
|
||||
height: contentHeight || 'auto', |
|
||||
}} |
|
||||
> |
|
||||
<div className={contentHeight ? styles.contentFixed : undefined}> |
|
||||
{children} |
|
||||
</div> |
|
||||
</div> |
|
||||
)} |
|
||||
{footer && ( |
|
||||
<div |
|
||||
className={classNames(styles.footer, { |
|
||||
[styles.footerMargin]: !children, |
|
||||
})} |
|
||||
> |
|
||||
{footer} |
|
||||
</div> |
|
||||
)} |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
const { loading = false, ...rest } = props; |
|
||||
const cardProps = omit(rest, ['total', 'contentHeight', 'action']); |
|
||||
return ( |
|
||||
<Card |
|
||||
loading={loading} |
|
||||
styles={{ |
|
||||
body: { |
|
||||
padding: '20px 24px 8px 24px', |
|
||||
}, |
|
||||
}} |
|
||||
{...cardProps} |
|
||||
> |
|
||||
{renderContent()} |
|
||||
</Card> |
|
||||
); |
|
||||
}; |
|
||||
export default ChartCard; |
|
||||
@ -1,48 +0,0 @@ |
|||||
import { Tooltip } from 'antd'; |
|
||||
import React from 'react'; |
|
||||
export type MiniProgressProps = { |
|
||||
target: number; |
|
||||
targetLabel?: string; |
|
||||
color?: string; |
|
||||
size?: number; |
|
||||
percent?: number; |
|
||||
style?: React.CSSProperties; |
|
||||
}; |
|
||||
const MiniProgress: React.FC<MiniProgressProps> = ({ |
|
||||
targetLabel, |
|
||||
target, |
|
||||
color = 'rgb(19, 194, 194)', |
|
||||
size, |
|
||||
percent, |
|
||||
}) => { |
|
||||
return ( |
|
||||
<div> |
|
||||
<Tooltip title={targetLabel}> |
|
||||
<div |
|
||||
style={{ |
|
||||
left: target ? `${target}%` : undefined, |
|
||||
}} |
|
||||
> |
|
||||
<span |
|
||||
style={{ |
|
||||
backgroundColor: color || undefined, |
|
||||
}} |
|
||||
/> |
|
||||
<span |
|
||||
style={{ |
|
||||
backgroundColor: color || undefined, |
|
||||
}} |
|
||||
/> |
|
||||
</div> |
|
||||
</Tooltip> |
|
||||
<div |
|
||||
style={{ |
|
||||
backgroundColor: color || undefined, |
|
||||
width: percent ? `${percent}%` : undefined, |
|
||||
height: size || undefined, |
|
||||
}} |
|
||||
/> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
export default MiniProgress; |
|
||||
@ -1,168 +0,0 @@ |
|||||
import { InfoCircleOutlined } from '@ant-design/icons'; |
|
||||
import { Area, Column } from '@ant-design/plots'; |
|
||||
import { Col, Progress, Row, Tooltip } from 'antd'; |
|
||||
import numeral from 'numeral'; |
|
||||
import type { DataItem } from '../data.d'; |
|
||||
import useStyles from '../style.style'; |
|
||||
import Yuan from '../utils/Yuan'; |
|
||||
import { ChartCard, Field } from './Charts'; |
|
||||
import Trend from './Trend'; |
|
||||
|
|
||||
const topColResponsiveProps = { |
|
||||
xs: 24, |
|
||||
sm: 12, |
|
||||
md: 12, |
|
||||
lg: 12, |
|
||||
xl: 6, |
|
||||
style: { |
|
||||
marginBottom: 24, |
|
||||
}, |
|
||||
}; |
|
||||
const IntroduceRow = ({ |
|
||||
loading, |
|
||||
visitData, |
|
||||
}: { |
|
||||
loading: boolean; |
|
||||
visitData: DataItem[]; |
|
||||
}) => { |
|
||||
const { styles } = useStyles(); |
|
||||
return ( |
|
||||
<Row gutter={24}> |
|
||||
<Col {...topColResponsiveProps}> |
|
||||
<ChartCard |
|
||||
variant="borderless" |
|
||||
title="总销售额" |
|
||||
action={ |
|
||||
<Tooltip title="指标说明"> |
|
||||
<InfoCircleOutlined /> |
|
||||
</Tooltip> |
|
||||
} |
|
||||
loading={loading} |
|
||||
total={() => <Yuan>126560</Yuan>} |
|
||||
footer={ |
|
||||
<Field |
|
||||
label="日销售额" |
|
||||
value={`￥${numeral(12423).format('0,0')}`} |
|
||||
/> |
|
||||
} |
|
||||
contentHeight={46} |
|
||||
> |
|
||||
<Trend |
|
||||
flag="up" |
|
||||
style={{ |
|
||||
marginRight: 16, |
|
||||
}} |
|
||||
> |
|
||||
周同比 |
|
||||
<span className={styles.trendText}>12%</span> |
|
||||
</Trend> |
|
||||
<Trend flag="down"> |
|
||||
日同比 |
|
||||
<span className={styles.trendText}>11%</span> |
|
||||
</Trend> |
|
||||
</ChartCard> |
|
||||
</Col> |
|
||||
|
|
||||
<Col {...topColResponsiveProps}> |
|
||||
<ChartCard |
|
||||
variant="borderless" |
|
||||
loading={loading} |
|
||||
title="访问量" |
|
||||
action={ |
|
||||
<Tooltip title="指标说明"> |
|
||||
<InfoCircleOutlined /> |
|
||||
</Tooltip> |
|
||||
} |
|
||||
total={numeral(8846).format('0,0')} |
|
||||
footer={ |
|
||||
<Field label="日访问量" value={numeral(1234).format('0,0')} /> |
|
||||
} |
|
||||
contentHeight={46} |
|
||||
> |
|
||||
<Area |
|
||||
xField="x" |
|
||||
yField="y" |
|
||||
shapeField="smooth" |
|
||||
height={46} |
|
||||
axis={false} |
|
||||
style={{ |
|
||||
fill: 'linear-gradient(-90deg, white 0%, #975FE4 100%)', |
|
||||
fillOpacity: 0.6, |
|
||||
width: '100%', |
|
||||
}} |
|
||||
padding={-20} |
|
||||
data={visitData} |
|
||||
/> |
|
||||
</ChartCard> |
|
||||
</Col> |
|
||||
<Col {...topColResponsiveProps}> |
|
||||
<ChartCard |
|
||||
variant="borderless" |
|
||||
loading={loading} |
|
||||
title="支付笔数" |
|
||||
action={ |
|
||||
<Tooltip title="指标说明"> |
|
||||
<InfoCircleOutlined /> |
|
||||
</Tooltip> |
|
||||
} |
|
||||
total={numeral(6560).format('0,0')} |
|
||||
footer={<Field label="转化率" value="60%" />} |
|
||||
contentHeight={46} |
|
||||
> |
|
||||
<Column |
|
||||
xField="x" |
|
||||
yField="y" |
|
||||
padding={-20} |
|
||||
axis={false} |
|
||||
height={46} |
|
||||
data={visitData} |
|
||||
scale={{ x: { paddingInner: 0.4 } }} |
|
||||
/> |
|
||||
</ChartCard> |
|
||||
</Col> |
|
||||
<Col {...topColResponsiveProps}> |
|
||||
<ChartCard |
|
||||
loading={loading} |
|
||||
variant="borderless" |
|
||||
title="运营活动效果" |
|
||||
action={ |
|
||||
<Tooltip title="指标说明"> |
|
||||
<InfoCircleOutlined /> |
|
||||
</Tooltip> |
|
||||
} |
|
||||
total="78%" |
|
||||
footer={ |
|
||||
<div |
|
||||
style={{ |
|
||||
whiteSpace: 'nowrap', |
|
||||
overflow: 'hidden', |
|
||||
}} |
|
||||
> |
|
||||
<Trend |
|
||||
flag="up" |
|
||||
style={{ |
|
||||
marginRight: 16, |
|
||||
}} |
|
||||
> |
|
||||
周同比 |
|
||||
<span className={styles.trendText}>12%</span> |
|
||||
</Trend> |
|
||||
<Trend flag="down"> |
|
||||
日同比 |
|
||||
<span className={styles.trendText}>11%</span> |
|
||||
</Trend> |
|
||||
</div> |
|
||||
} |
|
||||
contentHeight={46} |
|
||||
> |
|
||||
<Progress |
|
||||
percent={78} |
|
||||
strokeColor={{ from: '#108ee9', to: '#87d068' }} |
|
||||
status="active" |
|
||||
/> |
|
||||
</ChartCard> |
|
||||
</Col> |
|
||||
</Row> |
|
||||
); |
|
||||
}; |
|
||||
export default IntroduceRow; |
|
||||
@ -1,110 +0,0 @@ |
|||||
import { Line, Tiny } from '@ant-design/plots'; |
|
||||
import { Card, Col, Row, Tabs } from 'antd'; |
|
||||
import type { DataItem, OfflineDataType } from '../data.d'; |
|
||||
import useStyles from '../style.style'; |
|
||||
import NumberInfo from './NumberInfo'; |
|
||||
|
|
||||
const CustomTab = ({ |
|
||||
data, |
|
||||
currentTabKey: currentKey, |
|
||||
}: { |
|
||||
data: OfflineDataType; |
|
||||
currentTabKey: string; |
|
||||
}) => ( |
|
||||
<Row |
|
||||
gutter={8} |
|
||||
style={{ |
|
||||
width: 138, |
|
||||
margin: '8px 0', |
|
||||
}} |
|
||||
> |
|
||||
<Col span={12}> |
|
||||
<NumberInfo |
|
||||
title={data.name} |
|
||||
subTitle="转化率" |
|
||||
gap={2} |
|
||||
total={`${data.cvr * 100}%`} |
|
||||
theme={currentKey !== data.name ? 'light' : undefined} |
|
||||
/> |
|
||||
</Col> |
|
||||
<Col |
|
||||
span={12} |
|
||||
style={{ |
|
||||
paddingTop: 36, |
|
||||
}} |
|
||||
> |
|
||||
<Tiny.Ring |
|
||||
height={60} |
|
||||
width={60} |
|
||||
percent={data.cvr} |
|
||||
color={['#E8EEF4', '#5FABF4']} |
|
||||
/> |
|
||||
</Col> |
|
||||
</Row> |
|
||||
); |
|
||||
|
|
||||
const OfflineData = ({ |
|
||||
activeKey, |
|
||||
loading, |
|
||||
offlineData, |
|
||||
offlineChartData, |
|
||||
handleTabChange, |
|
||||
}: { |
|
||||
activeKey: string; |
|
||||
loading: boolean; |
|
||||
offlineData: OfflineDataType[]; |
|
||||
offlineChartData: DataItem[]; |
|
||||
handleTabChange: (activeKey: string) => void; |
|
||||
}) => { |
|
||||
const { styles } = useStyles(); |
|
||||
return ( |
|
||||
<Card |
|
||||
loading={loading} |
|
||||
className={styles.offlineCard} |
|
||||
variant="borderless" |
|
||||
style={{ |
|
||||
marginTop: 32, |
|
||||
}} |
|
||||
> |
|
||||
<Tabs |
|
||||
activeKey={activeKey} |
|
||||
onChange={handleTabChange} |
|
||||
items={offlineData.map((shop) => ({ |
|
||||
key: shop.name, |
|
||||
label: <CustomTab data={shop} currentTabKey={activeKey} />, |
|
||||
children: ( |
|
||||
<div |
|
||||
style={{ |
|
||||
padding: '0 24px', |
|
||||
}} |
|
||||
> |
|
||||
<Line |
|
||||
height={400} |
|
||||
data={offlineChartData} |
|
||||
xField="date" |
|
||||
yField="value" |
|
||||
colorField="type" |
|
||||
slider={{ x: true }} |
|
||||
axis={{ |
|
||||
x: { title: false }, |
|
||||
y: { |
|
||||
title: false, |
|
||||
gridLineDash: null, |
|
||||
gridStroke: '#ccc', |
|
||||
gridStrokeOpacity: 1, |
|
||||
}, |
|
||||
}} |
|
||||
legend={{ |
|
||||
color: { |
|
||||
layout: { justifyContent: 'center' }, |
|
||||
}, |
|
||||
}} |
|
||||
/> |
|
||||
</div> |
|
||||
), |
|
||||
}))} |
|
||||
/> |
|
||||
</Card> |
|
||||
); |
|
||||
}; |
|
||||
export default OfflineData; |
|
||||
@ -1,181 +0,0 @@ |
|||||
import { InfoCircleOutlined } from '@ant-design/icons'; |
|
||||
import { Area } from '@ant-design/plots'; |
|
||||
import { Card, Col, Row, Table, Tooltip } from 'antd'; |
|
||||
import numeral from 'numeral'; |
|
||||
import React from 'react'; |
|
||||
import type { DataItem } from '../data.d'; |
|
||||
import NumberInfo from './NumberInfo'; |
|
||||
import Trend from './Trend'; |
|
||||
|
|
||||
const TopSearch = ({ |
|
||||
loading, |
|
||||
visitData2, |
|
||||
searchData, |
|
||||
dropdownGroup, |
|
||||
}: { |
|
||||
loading: boolean; |
|
||||
visitData2: DataItem[]; |
|
||||
dropdownGroup: React.ReactNode; |
|
||||
searchData: DataItem[]; |
|
||||
}) => { |
|
||||
const columns = [ |
|
||||
{ |
|
||||
title: '排名', |
|
||||
dataIndex: 'index', |
|
||||
key: 'index', |
|
||||
}, |
|
||||
{ |
|
||||
title: '搜索关键词', |
|
||||
dataIndex: 'keyword', |
|
||||
key: 'keyword', |
|
||||
render: (text: React.ReactNode) => <a href="/">{text}</a>, |
|
||||
}, |
|
||||
{ |
|
||||
title: '用户数', |
|
||||
dataIndex: 'count', |
|
||||
key: 'count', |
|
||||
sorter: ( |
|
||||
a: { |
|
||||
count: number; |
|
||||
}, |
|
||||
b: { |
|
||||
count: number; |
|
||||
}, |
|
||||
) => a.count - b.count, |
|
||||
}, |
|
||||
{ |
|
||||
title: '周涨幅', |
|
||||
dataIndex: 'range', |
|
||||
key: 'range', |
|
||||
sorter: ( |
|
||||
a: { |
|
||||
range: number; |
|
||||
}, |
|
||||
b: { |
|
||||
range: number; |
|
||||
}, |
|
||||
) => a.range - b.range, |
|
||||
render: ( |
|
||||
text: React.ReactNode, |
|
||||
record: { |
|
||||
status: number; |
|
||||
}, |
|
||||
) => ( |
|
||||
<Trend flag={record.status === 1 ? 'down' : 'up'}> |
|
||||
<span |
|
||||
style={{ |
|
||||
marginRight: 4, |
|
||||
}} |
|
||||
> |
|
||||
{text}% |
|
||||
</span> |
|
||||
</Trend> |
|
||||
), |
|
||||
}, |
|
||||
]; |
|
||||
return ( |
|
||||
<Card |
|
||||
loading={loading} |
|
||||
variant="borderless" |
|
||||
title="线上热门搜索" |
|
||||
extra={dropdownGroup} |
|
||||
style={{ |
|
||||
height: '100%', |
|
||||
}} |
|
||||
> |
|
||||
<Row gutter={68}> |
|
||||
<Col |
|
||||
sm={12} |
|
||||
xs={24} |
|
||||
style={{ |
|
||||
marginBottom: 24, |
|
||||
}} |
|
||||
> |
|
||||
<NumberInfo |
|
||||
subTitle={ |
|
||||
<span> |
|
||||
搜索用户数 |
|
||||
<Tooltip title="指标说明"> |
|
||||
<InfoCircleOutlined |
|
||||
style={{ |
|
||||
marginLeft: 8, |
|
||||
}} |
|
||||
/> |
|
||||
</Tooltip> |
|
||||
</span> |
|
||||
} |
|
||||
gap={8} |
|
||||
total={numeral(12321).format('0,0')} |
|
||||
status="up" |
|
||||
subTotal={17.1} |
|
||||
/> |
|
||||
<Area |
|
||||
xField="x" |
|
||||
yField="y" |
|
||||
shapeField="smooth" |
|
||||
height={45} |
|
||||
axis={false} |
|
||||
padding={-12} |
|
||||
style={{ |
|
||||
fill: 'linear-gradient(-90deg, white 0%, #6294FA 100%)', |
|
||||
fillOpacity: 0.4, |
|
||||
}} |
|
||||
data={visitData2} |
|
||||
/> |
|
||||
</Col> |
|
||||
<Col |
|
||||
sm={12} |
|
||||
xs={24} |
|
||||
style={{ |
|
||||
marginBottom: 24, |
|
||||
}} |
|
||||
> |
|
||||
<NumberInfo |
|
||||
subTitle={ |
|
||||
<span> |
|
||||
人均搜索次数 |
|
||||
<Tooltip title="指标说明"> |
|
||||
<InfoCircleOutlined |
|
||||
style={{ |
|
||||
marginLeft: 8, |
|
||||
}} |
|
||||
/> |
|
||||
</Tooltip> |
|
||||
</span> |
|
||||
} |
|
||||
total={2.7} |
|
||||
status="down" |
|
||||
subTotal={26.2} |
|
||||
gap={8} |
|
||||
/> |
|
||||
<Area |
|
||||
xField="x" |
|
||||
yField="y" |
|
||||
shapeField="smooth" |
|
||||
height={45} |
|
||||
padding={-12} |
|
||||
style={{ |
|
||||
fill: 'linear-gradient(-90deg, white 0%, #6294FA 100%)', |
|
||||
fillOpacity: 0.4, |
|
||||
}} |
|
||||
data={visitData2} |
|
||||
axis={false} |
|
||||
/> |
|
||||
</Col> |
|
||||
</Row> |
|
||||
<Table<any> |
|
||||
rowKey={(record) => record.index} |
|
||||
size="small" |
|
||||
columns={columns} |
|
||||
dataSource={searchData} |
|
||||
pagination={{ |
|
||||
style: { |
|
||||
marginBottom: 0, |
|
||||
}, |
|
||||
pageSize: 5, |
|
||||
}} |
|
||||
/> |
|
||||
</Card> |
|
||||
); |
|
||||
}; |
|
||||
export default TopSearch; |
|
||||
@ -1,203 +0,0 @@ |
|||||
import { Gauge, Liquid, WordCloud } from '@ant-design/plots'; |
|
||||
import { GridContent } from '@ant-design/pro-components'; |
|
||||
import { useRequest } from '@umijs/max'; |
|
||||
import { Card, Col, Progress, Row, Statistic } from 'antd'; |
|
||||
import numeral from 'numeral'; |
|
||||
import type { FC } from 'react'; |
|
||||
import ActiveChart from './components/ActiveChart'; |
|
||||
import MonitorMap from './components/Map'; |
|
||||
import { queryTags } from './service'; |
|
||||
import useStyles from './style.style'; |
|
||||
|
|
||||
const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30; // Moment is also OK
|
|
||||
|
|
||||
const Monitor: FC = () => { |
|
||||
const { styles } = useStyles(); |
|
||||
const { loading, data } = useRequest(queryTags); |
|
||||
const wordCloudData = (data?.list || []).map((item) => { |
|
||||
return { |
|
||||
id: +Date.now(), |
|
||||
word: item.name, |
|
||||
weight: item.value, |
|
||||
}; |
|
||||
}); |
|
||||
return ( |
|
||||
<GridContent> |
|
||||
<Row gutter={24}> |
|
||||
<Col |
|
||||
xl={18} |
|
||||
lg={24} |
|
||||
md={24} |
|
||||
sm={24} |
|
||||
xs={24} |
|
||||
style={{ |
|
||||
marginBottom: 24, |
|
||||
}} |
|
||||
> |
|
||||
<Card title="活动实时交易情况" variant="borderless"> |
|
||||
<Row> |
|
||||
<Col md={6} sm={12} xs={24}> |
|
||||
<Statistic |
|
||||
title="今日交易总额" |
|
||||
suffix="元" |
|
||||
value={numeral(124543233).format('0,0')} |
|
||||
/> |
|
||||
</Col> |
|
||||
<Col md={6} sm={12} xs={24}> |
|
||||
<Statistic title="销售目标完成率" value="92%" /> |
|
||||
</Col> |
|
||||
<Col md={6} sm={12} xs={24}> |
|
||||
<Statistic.Timer |
|
||||
type="countdown" |
|
||||
title="活动剩余时间" |
|
||||
value={deadline} |
|
||||
format="HH:mm:ss:SSS" |
|
||||
/> |
|
||||
</Col> |
|
||||
<Col md={6} sm={12} xs={24}> |
|
||||
<Statistic |
|
||||
title="每秒交易总额" |
|
||||
suffix="元" |
|
||||
value={numeral(234).format('0,0')} |
|
||||
/> |
|
||||
</Col> |
|
||||
</Row> |
|
||||
<div className={styles.mapChart}> |
|
||||
<MonitorMap /> |
|
||||
</div> |
|
||||
</Card> |
|
||||
</Col> |
|
||||
<Col xl={6} lg={24} md={24} sm={24} xs={24}> |
|
||||
<Card |
|
||||
title="活动情况预测" |
|
||||
style={{ |
|
||||
marginBottom: 24, |
|
||||
}} |
|
||||
variant="borderless" |
|
||||
> |
|
||||
<ActiveChart /> |
|
||||
</Card> |
|
||||
<Card |
|
||||
title="券核效率" |
|
||||
style={{ |
|
||||
marginBottom: 24, |
|
||||
}} |
|
||||
styles={{ |
|
||||
body: { |
|
||||
textAlign: 'center', |
|
||||
}, |
|
||||
}} |
|
||||
variant="borderless" |
|
||||
> |
|
||||
<Gauge |
|
||||
height={180} |
|
||||
data={ |
|
||||
{ |
|
||||
target: 80, |
|
||||
total: 100, |
|
||||
name: 'score', |
|
||||
thresholds: [20, 40, 60, 80, 100], |
|
||||
} as any |
|
||||
} |
|
||||
padding={-16} |
|
||||
style={{ |
|
||||
textContent: () => '优', |
|
||||
}} |
|
||||
meta={{ |
|
||||
color: { |
|
||||
range: [ |
|
||||
'#6395FA', |
|
||||
'#62DAAB', |
|
||||
'#657798', |
|
||||
'#F7C128', |
|
||||
'#1F8718', |
|
||||
], |
|
||||
}, |
|
||||
}} |
|
||||
/> |
|
||||
</Card> |
|
||||
</Col> |
|
||||
</Row> |
|
||||
<Row gutter={24}> |
|
||||
<Col |
|
||||
xl={12} |
|
||||
lg={24} |
|
||||
sm={24} |
|
||||
xs={24} |
|
||||
style={{ |
|
||||
marginBottom: 24, |
|
||||
}} |
|
||||
> |
|
||||
<Card title="各品类占比" variant="borderless"> |
|
||||
<Row |
|
||||
style={{ |
|
||||
padding: '16px 0', |
|
||||
}} |
|
||||
> |
|
||||
<Col span={8}> |
|
||||
<Progress type="dashboard" percent={75} /> |
|
||||
</Col> |
|
||||
<Col span={8}> |
|
||||
<Progress type="dashboard" percent={48} /> |
|
||||
</Col> |
|
||||
<Col span={8}> |
|
||||
<Progress type="dashboard" percent={33} /> |
|
||||
</Col> |
|
||||
</Row> |
|
||||
</Card> |
|
||||
</Col> |
|
||||
<Col |
|
||||
xl={6} |
|
||||
lg={12} |
|
||||
sm={24} |
|
||||
xs={24} |
|
||||
style={{ |
|
||||
marginBottom: 24, |
|
||||
}} |
|
||||
> |
|
||||
<Card |
|
||||
title="热门搜索" |
|
||||
loading={loading} |
|
||||
variant="borderless" |
|
||||
styles={{ |
|
||||
body: { |
|
||||
overflow: 'hidden', |
|
||||
}, |
|
||||
}} |
|
||||
> |
|
||||
<WordCloud |
|
||||
data={wordCloudData} |
|
||||
height={162} |
|
||||
textField="word" |
|
||||
colorField="word" |
|
||||
layout={{ spiral: 'rectangular', fontSize: [10, 20] }} |
|
||||
/> |
|
||||
</Card> |
|
||||
</Col> |
|
||||
<Col |
|
||||
xl={6} |
|
||||
lg={12} |
|
||||
sm={24} |
|
||||
xs={24} |
|
||||
style={{ |
|
||||
marginBottom: 24, |
|
||||
}} |
|
||||
> |
|
||||
<Card |
|
||||
title="资源剩余" |
|
||||
styles={{ |
|
||||
body: { |
|
||||
textAlign: 'center', |
|
||||
fontSize: 0, |
|
||||
}, |
|
||||
}} |
|
||||
variant="borderless" |
|
||||
> |
|
||||
<Liquid height={160} percent={0.35} /> |
|
||||
</Card> |
|
||||
</Col> |
|
||||
</Row> |
|
||||
</GridContent> |
|
||||
); |
|
||||
}; |
|
||||
export default Monitor; |
|
||||
@ -1,549 +0,0 @@ |
|||||
import { CloseCircleOutlined } from '@ant-design/icons'; |
|
||||
import type { ProColumnType } from '@ant-design/pro-components'; |
|
||||
import { |
|
||||
EditableProTable, |
|
||||
FooterToolbar, |
|
||||
PageContainer, |
|
||||
ProForm, |
|
||||
ProFormDateRangePicker, |
|
||||
ProFormSelect, |
|
||||
ProFormText, |
|
||||
ProFormTimePicker, |
|
||||
} from '@ant-design/pro-components'; |
|
||||
import { Card, Col, message, Popover, Row } from 'antd'; |
|
||||
import type { FC } from 'react'; |
|
||||
import { useState } from 'react'; |
|
||||
import { fakeSubmitForm } from './service'; |
|
||||
import useStyles from './style.style'; |
|
||||
|
|
||||
interface TableFormDateType { |
|
||||
key: string; |
|
||||
workId?: string; |
|
||||
name?: string; |
|
||||
department?: string; |
|
||||
isNew?: boolean; |
|
||||
editable?: boolean; |
|
||||
} |
|
||||
type InternalNamePath = (string | number)[]; |
|
||||
const fieldLabels = { |
|
||||
name: '仓库名', |
|
||||
url: '仓库域名', |
|
||||
owner: '仓库管理员', |
|
||||
approver: '审批人', |
|
||||
dateRange: '生效日期', |
|
||||
type: '仓库类型', |
|
||||
name2: '任务名', |
|
||||
url2: '任务描述', |
|
||||
owner2: '执行人', |
|
||||
approver2: '责任人', |
|
||||
dateRange2: '生效日期', |
|
||||
type2: '任务类型', |
|
||||
}; |
|
||||
const tableData = [ |
|
||||
{ |
|
||||
key: '1', |
|
||||
workId: '00001', |
|
||||
name: 'John Brown', |
|
||||
department: 'New York No. 1 Lake Park', |
|
||||
}, |
|
||||
{ |
|
||||
key: '2', |
|
||||
workId: '00002', |
|
||||
name: 'Jim Green', |
|
||||
department: 'London No. 1 Lake Park', |
|
||||
}, |
|
||||
{ |
|
||||
key: '3', |
|
||||
workId: '00003', |
|
||||
name: 'Joe Black', |
|
||||
department: 'Sidney No. 1 Lake Park', |
|
||||
}, |
|
||||
]; |
|
||||
interface ErrorField { |
|
||||
name: InternalNamePath; |
|
||||
errors: string[]; |
|
||||
} |
|
||||
const AdvancedForm: FC<Record<string, any>> = () => { |
|
||||
const { styles } = useStyles(); |
|
||||
const [error, setError] = useState<ErrorField[]>([]); |
|
||||
const getErrorInfo = (errors: ErrorField[]) => { |
|
||||
const errorCount = errors.filter((item) => item.errors.length > 0).length; |
|
||||
if (!errors || errorCount === 0) { |
|
||||
return null; |
|
||||
} |
|
||||
const scrollToField = (fieldKey: string) => { |
|
||||
const labelNode = document.querySelector(`label[for="${fieldKey}"]`); |
|
||||
if (labelNode) { |
|
||||
labelNode.scrollIntoView(true); |
|
||||
} |
|
||||
}; |
|
||||
const errorList = errors.map((err) => { |
|
||||
if (!err || err.errors.length === 0) { |
|
||||
return null; |
|
||||
} |
|
||||
const key = err.name[0] as |
|
||||
| 'name' |
|
||||
| 'url' |
|
||||
| 'owner' |
|
||||
| 'approver' |
|
||||
| 'dateRange' |
|
||||
| 'type'; |
|
||||
return ( |
|
||||
<li |
|
||||
key={key} |
|
||||
className={styles.errorListItem} |
|
||||
onClick={() => scrollToField(key)} |
|
||||
> |
|
||||
<CloseCircleOutlined className={styles.errorIcon} /> |
|
||||
<div>{err.errors[0]}</div> |
|
||||
<div className={styles.errorField}>{fieldLabels[key]}</div> |
|
||||
</li> |
|
||||
); |
|
||||
}); |
|
||||
return ( |
|
||||
<span className={styles.errorIcon}> |
|
||||
<Popover |
|
||||
title="表单校验信息" |
|
||||
content={errorList} |
|
||||
overlayClassName={styles.errorPopover} |
|
||||
trigger="click" |
|
||||
getPopupContainer={(trigger: HTMLElement) => { |
|
||||
if (trigger?.parentNode) { |
|
||||
return trigger.parentNode as HTMLElement; |
|
||||
} |
|
||||
return trigger; |
|
||||
}} |
|
||||
> |
|
||||
<CloseCircleOutlined /> |
|
||||
</Popover> |
|
||||
{errorCount} |
|
||||
</span> |
|
||||
); |
|
||||
}; |
|
||||
const onFinish = async (values: Record<string, any>) => { |
|
||||
setError([]); |
|
||||
try { |
|
||||
await fakeSubmitForm(values); |
|
||||
message.success('提交成功'); |
|
||||
} catch { |
|
||||
// console.log
|
|
||||
} |
|
||||
}; |
|
||||
const onFinishFailed = (errorInfo: any) => { |
|
||||
setError(errorInfo.errorFields); |
|
||||
}; |
|
||||
const columns: ProColumnType<TableFormDateType>[] = [ |
|
||||
{ |
|
||||
title: '成员姓名', |
|
||||
dataIndex: 'name', |
|
||||
key: 'name', |
|
||||
width: '20%', |
|
||||
}, |
|
||||
{ |
|
||||
title: '工号', |
|
||||
dataIndex: 'workId', |
|
||||
key: 'workId', |
|
||||
width: '20%', |
|
||||
}, |
|
||||
{ |
|
||||
title: '所属部门', |
|
||||
dataIndex: 'department', |
|
||||
key: 'department', |
|
||||
width: '40%', |
|
||||
}, |
|
||||
{ |
|
||||
title: '操作', |
|
||||
key: 'action', |
|
||||
valueType: 'option', |
|
||||
render: (_, record: TableFormDateType, _index, action) => { |
|
||||
return [ |
|
||||
<a |
|
||||
key="eidit" |
|
||||
onClick={() => { |
|
||||
action?.startEditable(record.key); |
|
||||
}} |
|
||||
> |
|
||||
编辑 |
|
||||
</a>, |
|
||||
]; |
|
||||
}, |
|
||||
}, |
|
||||
]; |
|
||||
return ( |
|
||||
<ProForm |
|
||||
layout="vertical" |
|
||||
hideRequiredMark |
|
||||
submitter={{ |
|
||||
render: (_props, dom) => { |
|
||||
return ( |
|
||||
<FooterToolbar> |
|
||||
{getErrorInfo(error)} |
|
||||
{dom} |
|
||||
</FooterToolbar> |
|
||||
); |
|
||||
}, |
|
||||
}} |
|
||||
initialValues={{ |
|
||||
members: tableData, |
|
||||
}} |
|
||||
onFinish={onFinish} |
|
||||
onFinishFailed={onFinishFailed} |
|
||||
> |
|
||||
<PageContainer content="高级表单常见于一次性输入和提交大批量数据的场景。"> |
|
||||
<Card title="仓库管理" className={styles.card} variant="borderless"> |
|
||||
<Row gutter={16}> |
|
||||
<Col lg={6} md={12} sm={24}> |
|
||||
<ProFormText |
|
||||
label={fieldLabels.name} |
|
||||
name="name" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请输入仓库名称', |
|
||||
}, |
|
||||
]} |
|
||||
placeholder="请输入仓库名称" |
|
||||
/> |
|
||||
</Col> |
|
||||
<Col |
|
||||
xl={{ |
|
||||
span: 6, |
|
||||
offset: 2, |
|
||||
}} |
|
||||
lg={{ |
|
||||
span: 8, |
|
||||
}} |
|
||||
md={{ |
|
||||
span: 12, |
|
||||
}} |
|
||||
sm={24} |
|
||||
> |
|
||||
<ProFormText |
|
||||
label={fieldLabels.url} |
|
||||
name="url" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请选择', |
|
||||
}, |
|
||||
]} |
|
||||
fieldProps={{ |
|
||||
style: { |
|
||||
width: '100%', |
|
||||
}, |
|
||||
addonBefore: 'http://', |
|
||||
addonAfter: '.com', |
|
||||
}} |
|
||||
placeholder="请输入" |
|
||||
/> |
|
||||
</Col> |
|
||||
<Col |
|
||||
xl={{ |
|
||||
span: 8, |
|
||||
offset: 2, |
|
||||
}} |
|
||||
lg={{ |
|
||||
span: 10, |
|
||||
}} |
|
||||
md={{ |
|
||||
span: 24, |
|
||||
}} |
|
||||
sm={24} |
|
||||
> |
|
||||
<ProFormSelect |
|
||||
label={fieldLabels.owner} |
|
||||
name="owner" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请选择管理员', |
|
||||
}, |
|
||||
]} |
|
||||
options={[ |
|
||||
{ |
|
||||
label: '付晓晓', |
|
||||
value: 'xiao', |
|
||||
}, |
|
||||
{ |
|
||||
label: '周毛毛', |
|
||||
value: 'mao', |
|
||||
}, |
|
||||
]} |
|
||||
placeholder="请选择管理员" |
|
||||
/> |
|
||||
</Col> |
|
||||
</Row> |
|
||||
<Row gutter={16}> |
|
||||
<Col lg={6} md={12} sm={24}> |
|
||||
<ProFormSelect |
|
||||
label={fieldLabels.approver} |
|
||||
name="approver" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请选择审批员', |
|
||||
}, |
|
||||
]} |
|
||||
options={[ |
|
||||
{ |
|
||||
label: '付晓晓', |
|
||||
value: 'xiao', |
|
||||
}, |
|
||||
{ |
|
||||
label: '周毛毛', |
|
||||
value: 'mao', |
|
||||
}, |
|
||||
]} |
|
||||
placeholder="请选择审批员" |
|
||||
/> |
|
||||
</Col> |
|
||||
<Col |
|
||||
xl={{ |
|
||||
span: 6, |
|
||||
offset: 2, |
|
||||
}} |
|
||||
lg={{ |
|
||||
span: 8, |
|
||||
}} |
|
||||
md={{ |
|
||||
span: 12, |
|
||||
}} |
|
||||
sm={24} |
|
||||
> |
|
||||
<ProFormDateRangePicker |
|
||||
label={fieldLabels.dateRange} |
|
||||
name="dateRange" |
|
||||
fieldProps={{ |
|
||||
style: { |
|
||||
width: '100%', |
|
||||
}, |
|
||||
}} |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请选择生效日期', |
|
||||
}, |
|
||||
]} |
|
||||
/> |
|
||||
</Col> |
|
||||
<Col |
|
||||
xl={{ |
|
||||
span: 8, |
|
||||
offset: 2, |
|
||||
}} |
|
||||
lg={{ |
|
||||
span: 10, |
|
||||
}} |
|
||||
md={{ |
|
||||
span: 24, |
|
||||
}} |
|
||||
sm={24} |
|
||||
> |
|
||||
<ProFormSelect |
|
||||
label={fieldLabels.type} |
|
||||
name="type" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请选择仓库类型', |
|
||||
}, |
|
||||
]} |
|
||||
options={[ |
|
||||
{ |
|
||||
label: '私密', |
|
||||
value: 'private', |
|
||||
}, |
|
||||
{ |
|
||||
label: '公开', |
|
||||
value: 'public', |
|
||||
}, |
|
||||
]} |
|
||||
placeholder="请选择仓库类型" |
|
||||
/> |
|
||||
</Col> |
|
||||
</Row> |
|
||||
</Card> |
|
||||
<Card title="任务管理" className={styles.card} variant="borderless"> |
|
||||
<Row gutter={16}> |
|
||||
<Col lg={6} md={12} sm={24}> |
|
||||
<ProFormText |
|
||||
label={fieldLabels.name2} |
|
||||
name="name2" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请输入', |
|
||||
}, |
|
||||
]} |
|
||||
/> |
|
||||
</Col> |
|
||||
<Col |
|
||||
xl={{ |
|
||||
span: 6, |
|
||||
offset: 2, |
|
||||
}} |
|
||||
lg={{ |
|
||||
span: 8, |
|
||||
}} |
|
||||
md={{ |
|
||||
span: 12, |
|
||||
}} |
|
||||
sm={24} |
|
||||
> |
|
||||
<ProFormText |
|
||||
label={fieldLabels.url2} |
|
||||
name="url2" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请选择', |
|
||||
}, |
|
||||
]} |
|
||||
/> |
|
||||
</Col> |
|
||||
<Col |
|
||||
xl={{ |
|
||||
span: 8, |
|
||||
offset: 2, |
|
||||
}} |
|
||||
lg={{ |
|
||||
span: 10, |
|
||||
}} |
|
||||
md={{ |
|
||||
span: 24, |
|
||||
}} |
|
||||
sm={24} |
|
||||
> |
|
||||
<ProFormSelect |
|
||||
label={fieldLabels.owner2} |
|
||||
name="owner2" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请选择管理员', |
|
||||
}, |
|
||||
]} |
|
||||
options={[ |
|
||||
{ |
|
||||
label: '付晓晓', |
|
||||
value: 'xiao', |
|
||||
}, |
|
||||
{ |
|
||||
label: '周毛毛', |
|
||||
value: 'mao', |
|
||||
}, |
|
||||
]} |
|
||||
/> |
|
||||
</Col> |
|
||||
</Row> |
|
||||
<Row gutter={16}> |
|
||||
<Col lg={6} md={12} sm={24}> |
|
||||
<ProFormSelect |
|
||||
label={fieldLabels.approver2} |
|
||||
name="approver2" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请选择审批员', |
|
||||
}, |
|
||||
]} |
|
||||
options={[ |
|
||||
{ |
|
||||
label: '付晓晓', |
|
||||
value: 'xiao', |
|
||||
}, |
|
||||
{ |
|
||||
label: '周毛毛', |
|
||||
value: 'mao', |
|
||||
}, |
|
||||
]} |
|
||||
placeholder="请选择审批员" |
|
||||
/> |
|
||||
</Col> |
|
||||
<Col |
|
||||
xl={{ |
|
||||
span: 6, |
|
||||
offset: 2, |
|
||||
}} |
|
||||
lg={{ |
|
||||
span: 8, |
|
||||
}} |
|
||||
md={{ |
|
||||
span: 12, |
|
||||
}} |
|
||||
sm={24} |
|
||||
> |
|
||||
<ProFormTimePicker |
|
||||
label={fieldLabels.dateRange2} |
|
||||
name="dateRange2" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请输入', |
|
||||
}, |
|
||||
]} |
|
||||
placeholder="提醒时间" |
|
||||
fieldProps={{ |
|
||||
style: { |
|
||||
width: '100%', |
|
||||
}, |
|
||||
}} |
|
||||
/> |
|
||||
</Col> |
|
||||
<Col |
|
||||
xl={{ |
|
||||
span: 8, |
|
||||
offset: 2, |
|
||||
}} |
|
||||
lg={{ |
|
||||
span: 10, |
|
||||
}} |
|
||||
md={{ |
|
||||
span: 24, |
|
||||
}} |
|
||||
sm={24} |
|
||||
> |
|
||||
<ProFormSelect |
|
||||
label={fieldLabels.type2} |
|
||||
name="type2" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请选择仓库类型', |
|
||||
}, |
|
||||
]} |
|
||||
options={[ |
|
||||
{ |
|
||||
label: '私密', |
|
||||
value: 'private', |
|
||||
}, |
|
||||
{ |
|
||||
label: '公开', |
|
||||
value: 'public', |
|
||||
}, |
|
||||
]} |
|
||||
placeholder="请选择仓库类型" |
|
||||
/> |
|
||||
</Col> |
|
||||
</Row> |
|
||||
</Card> |
|
||||
<Card title="成员管理" variant="borderless"> |
|
||||
<ProForm.Item name="members"> |
|
||||
<EditableProTable<TableFormDateType> |
|
||||
recordCreatorProps={{ |
|
||||
record: () => { |
|
||||
return { |
|
||||
key: `0${Date.now()}`, |
|
||||
}; |
|
||||
}, |
|
||||
}} |
|
||||
columns={columns} |
|
||||
rowKey="key" |
|
||||
/> |
|
||||
</ProForm.Item> |
|
||||
</Card> |
|
||||
</PageContainer> |
|
||||
</ProForm> |
|
||||
); |
|
||||
}; |
|
||||
export default AdvancedForm; |
|
||||
@ -1,194 +0,0 @@ |
|||||
import { |
|
||||
PageContainer, |
|
||||
ProForm, |
|
||||
ProFormDateRangePicker, |
|
||||
ProFormDependency, |
|
||||
ProFormDigit, |
|
||||
ProFormRadio, |
|
||||
ProFormSelect, |
|
||||
ProFormText, |
|
||||
ProFormTextArea, |
|
||||
} from '@ant-design/pro-components'; |
|
||||
import { useRequest } from '@umijs/max'; |
|
||||
import { Card, message } from 'antd'; |
|
||||
import type { FC } from 'react'; |
|
||||
import { fakeSubmitForm } from './service'; |
|
||||
import useStyles from './style.style'; |
|
||||
|
|
||||
const BasicForm: FC<Record<string, any>> = () => { |
|
||||
const { styles } = useStyles(); |
|
||||
const { run } = useRequest(fakeSubmitForm, { |
|
||||
manual: true, |
|
||||
onSuccess: () => { |
|
||||
message.success('提交成功'); |
|
||||
}, |
|
||||
}); |
|
||||
const onFinish = async (values: Record<string, any>) => { |
|
||||
run(values); |
|
||||
}; |
|
||||
return ( |
|
||||
<PageContainer content="表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。"> |
|
||||
<Card variant="borderless"> |
|
||||
<ProForm |
|
||||
hideRequiredMark |
|
||||
style={{ |
|
||||
margin: 'auto', |
|
||||
marginTop: 8, |
|
||||
maxWidth: 600, |
|
||||
}} |
|
||||
name="basic" |
|
||||
layout="vertical" |
|
||||
initialValues={{ |
|
||||
public: '1', |
|
||||
}} |
|
||||
onFinish={onFinish} |
|
||||
> |
|
||||
<ProFormText |
|
||||
width="md" |
|
||||
label="标题" |
|
||||
name="title" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请输入标题', |
|
||||
}, |
|
||||
]} |
|
||||
placeholder="给目标起个名字" |
|
||||
/> |
|
||||
<ProFormDateRangePicker |
|
||||
label="起止日期" |
|
||||
width="md" |
|
||||
name="date" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请选择起止日期', |
|
||||
}, |
|
||||
]} |
|
||||
placeholder={['开始日期', '结束日期']} |
|
||||
/> |
|
||||
<ProFormTextArea |
|
||||
label="目标描述" |
|
||||
width="xl" |
|
||||
name="goal" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请输入目标描述', |
|
||||
}, |
|
||||
]} |
|
||||
placeholder="请输入你的阶段性工作目标" |
|
||||
/> |
|
||||
|
|
||||
<ProFormTextArea |
|
||||
label="衡量标准" |
|
||||
name="standard" |
|
||||
width="xl" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请输入衡量标准', |
|
||||
}, |
|
||||
]} |
|
||||
placeholder="请输入衡量标准" |
|
||||
/> |
|
||||
|
|
||||
<ProFormText |
|
||||
width="md" |
|
||||
label={ |
|
||||
<span> |
|
||||
客户 |
|
||||
<em className={styles.optional}>（选填）</em> |
|
||||
</span> |
|
||||
} |
|
||||
tooltip="目标的服务对象" |
|
||||
name="client" |
|
||||
placeholder="请描述你服务的客户，内部客户直接 @姓名／工号" |
|
||||
/> |
|
||||
|
|
||||
<ProFormText |
|
||||
width="md" |
|
||||
label={ |
|
||||
<span> |
|
||||
邀评人 |
|
||||
<em className={styles.optional}>（选填）</em> |
|
||||
</span> |
|
||||
} |
|
||||
name="invites" |
|
||||
placeholder="请直接 @姓名／工号，最多可邀请 5 人" |
|
||||
/> |
|
||||
|
|
||||
<ProFormDigit |
|
||||
label={ |
|
||||
<span> |
|
||||
权重 |
|
||||
<em className={styles.optional}>（选填）</em> |
|
||||
</span> |
|
||||
} |
|
||||
name="weight" |
|
||||
placeholder="请输入" |
|
||||
min={0} |
|
||||
max={100} |
|
||||
width="xs" |
|
||||
fieldProps={{ |
|
||||
formatter: (value) => `${value || 0}%`, |
|
||||
parser: (value) => Number(value ? value.replace('%', '') : '0'), |
|
||||
}} |
|
||||
/> |
|
||||
|
|
||||
<ProFormRadio.Group |
|
||||
options={[ |
|
||||
{ |
|
||||
value: '1', |
|
||||
label: '公开', |
|
||||
}, |
|
||||
{ |
|
||||
value: '2', |
|
||||
label: '部分公开', |
|
||||
}, |
|
||||
{ |
|
||||
value: '3', |
|
||||
label: '不公开', |
|
||||
}, |
|
||||
]} |
|
||||
label="目标公开" |
|
||||
help="客户、邀评人默认被分享" |
|
||||
name="publicType" |
|
||||
/> |
|
||||
<ProFormDependency name={['publicType']}> |
|
||||
{({ publicType }) => { |
|
||||
return ( |
|
||||
<ProFormSelect |
|
||||
width="md" |
|
||||
name="publicUsers" |
|
||||
fieldProps={{ |
|
||||
style: { |
|
||||
margin: '8px 0', |
|
||||
display: |
|
||||
publicType && publicType === '2' ? 'block' : 'none', |
|
||||
}, |
|
||||
}} |
|
||||
options={[ |
|
||||
{ |
|
||||
value: '1', |
|
||||
label: '同事甲', |
|
||||
}, |
|
||||
{ |
|
||||
value: '2', |
|
||||
label: '同事乙', |
|
||||
}, |
|
||||
{ |
|
||||
value: '3', |
|
||||
label: '同事丙', |
|
||||
}, |
|
||||
]} |
|
||||
/> |
|
||||
); |
|
||||
}} |
|
||||
</ProFormDependency> |
|
||||
</ProForm> |
|
||||
</Card> |
|
||||
</PageContainer> |
|
||||
); |
|
||||
}; |
|
||||
export default BasicForm; |
|
||||
@ -1,248 +0,0 @@ |
|||||
import { |
|
||||
PageContainer, |
|
||||
ProForm, |
|
||||
ProFormDigit, |
|
||||
ProFormSelect, |
|
||||
ProFormText, |
|
||||
StepsForm, |
|
||||
} from '@ant-design/pro-components'; |
|
||||
import type { FormInstance } from 'antd'; |
|
||||
import { |
|
||||
Alert, |
|
||||
Button, |
|
||||
Card, |
|
||||
Descriptions, |
|
||||
Divider, |
|
||||
Result, |
|
||||
Statistic, |
|
||||
} from 'antd'; |
|
||||
import React, { useRef, useState } from 'react'; |
|
||||
import type { StepDataType } from './data.d'; |
|
||||
import useStyles from './style.style'; |
|
||||
|
|
||||
const StepDescriptions: React.FC<{ |
|
||||
stepData: StepDataType; |
|
||||
bordered?: boolean; |
|
||||
}> = ({ stepData, bordered }) => { |
|
||||
const { payAccount, receiverAccount, receiverName, amount } = stepData; |
|
||||
return ( |
|
||||
<Descriptions column={1} bordered={bordered}> |
|
||||
<Descriptions.Item label="付款账户"> {payAccount}</Descriptions.Item> |
|
||||
<Descriptions.Item label="收款账户"> {receiverAccount}</Descriptions.Item> |
|
||||
<Descriptions.Item label="收款人姓名"> {receiverName}</Descriptions.Item> |
|
||||
<Descriptions.Item label="转账金额"> |
|
||||
<Statistic |
|
||||
value={amount} |
|
||||
suffix={ |
|
||||
<span |
|
||||
style={{ |
|
||||
fontSize: 14, |
|
||||
}} |
|
||||
> |
|
||||
元 |
|
||||
</span> |
|
||||
} |
|
||||
precision={2} |
|
||||
/> |
|
||||
</Descriptions.Item> |
|
||||
</Descriptions> |
|
||||
); |
|
||||
}; |
|
||||
const StepResult: React.FC<{ |
|
||||
onFinish: () => Promise<void>; |
|
||||
children?: React.ReactNode; |
|
||||
}> = (props) => { |
|
||||
const { styles } = useStyles(); |
|
||||
return ( |
|
||||
<Result |
|
||||
status="success" |
|
||||
title="操作成功" |
|
||||
subTitle="预计两小时内到账" |
|
||||
extra={ |
|
||||
<> |
|
||||
<Button type="primary" onClick={props.onFinish}> |
|
||||
再转一笔 |
|
||||
</Button> |
|
||||
<Button>查看账单</Button> |
|
||||
</> |
|
||||
} |
|
||||
className={styles.result} |
|
||||
> |
|
||||
{props.children} |
|
||||
</Result> |
|
||||
); |
|
||||
}; |
|
||||
const StepForm: React.FC<Record<string, any>> = () => { |
|
||||
const { styles } = useStyles(); |
|
||||
const [stepData, setStepData] = useState<StepDataType>({ |
|
||||
payAccount: 'ant-design@alipay.com', |
|
||||
receiverAccount: 'test@example.com', |
|
||||
receiverName: 'Alex', |
|
||||
amount: '500', |
|
||||
receiverMode: 'alipay', |
|
||||
}); |
|
||||
const [current, setCurrent] = useState(0); |
|
||||
const formRef = useRef<FormInstance>(null); |
|
||||
return ( |
|
||||
<PageContainer content="将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。"> |
|
||||
<Card variant="borderless"> |
|
||||
<StepsForm |
|
||||
current={current} |
|
||||
onCurrentChange={setCurrent} |
|
||||
submitter={{ |
|
||||
render: (props, dom) => { |
|
||||
if (props.step === 2) { |
|
||||
return null; |
|
||||
} |
|
||||
return dom; |
|
||||
}, |
|
||||
}} |
|
||||
> |
|
||||
<StepsForm.StepForm<StepDataType> |
|
||||
formRef={formRef} |
|
||||
title="填写转账信息" |
|
||||
initialValues={stepData} |
|
||||
onFinish={async (values) => { |
|
||||
setStepData(values); |
|
||||
return true; |
|
||||
}} |
|
||||
> |
|
||||
<ProFormSelect |
|
||||
label="付款账户" |
|
||||
width="md" |
|
||||
name="payAccount" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请选择付款账户', |
|
||||
}, |
|
||||
]} |
|
||||
valueEnum={{ |
|
||||
'ant-design@alipay.com': 'ant-design@alipay.com', |
|
||||
}} |
|
||||
/> |
|
||||
|
|
||||
<ProForm.Group title="收款账户" size={8}> |
|
||||
<ProFormSelect |
|
||||
name="receiverMode" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请选择付款账户', |
|
||||
}, |
|
||||
]} |
|
||||
valueEnum={{ |
|
||||
alipay: '支付宝', |
|
||||
bank: '银行账户', |
|
||||
}} |
|
||||
/> |
|
||||
<ProFormText |
|
||||
name="receiverAccount" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请输入收款人账户', |
|
||||
}, |
|
||||
{ |
|
||||
type: 'email', |
|
||||
message: '账户名应为邮箱格式', |
|
||||
}, |
|
||||
]} |
|
||||
placeholder="test@example.com" |
|
||||
/> |
|
||||
</ProForm.Group> |
|
||||
<ProFormText |
|
||||
label="收款人姓名" |
|
||||
width="md" |
|
||||
name="receiverName" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请输入收款人姓名', |
|
||||
}, |
|
||||
]} |
|
||||
placeholder="请输入收款人姓名" |
|
||||
/> |
|
||||
<ProFormDigit |
|
||||
label="转账金额" |
|
||||
name="amount" |
|
||||
width="md" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请输入转账金额', |
|
||||
}, |
|
||||
{ |
|
||||
pattern: /^(\d+)((?:\.\d+)?)$/, |
|
||||
message: '请输入合法金额数字', |
|
||||
}, |
|
||||
]} |
|
||||
placeholder="请输入金额" |
|
||||
fieldProps={{ |
|
||||
prefix: '￥', |
|
||||
}} |
|
||||
/> |
|
||||
</StepsForm.StepForm> |
|
||||
|
|
||||
<StepsForm.StepForm title="确认转账信息"> |
|
||||
<div className={styles.result}> |
|
||||
<Alert |
|
||||
closable |
|
||||
showIcon |
|
||||
message="确认转账后，资金将直接打入对方账户，无法退回。" |
|
||||
style={{ |
|
||||
marginBottom: 24, |
|
||||
}} |
|
||||
/> |
|
||||
<StepDescriptions stepData={stepData} bordered /> |
|
||||
<Divider |
|
||||
style={{ |
|
||||
margin: '24px 0', |
|
||||
}} |
|
||||
/> |
|
||||
<ProFormText.Password |
|
||||
label="支付密码" |
|
||||
width="md" |
|
||||
name="password" |
|
||||
required={false} |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '需要支付密码才能进行支付', |
|
||||
}, |
|
||||
]} |
|
||||
/> |
|
||||
</div> |
|
||||
</StepsForm.StepForm> |
|
||||
<StepsForm.StepForm title="完成"> |
|
||||
<StepResult |
|
||||
onFinish={async () => { |
|
||||
setCurrent(0); |
|
||||
formRef.current?.resetFields(); |
|
||||
}} |
|
||||
> |
|
||||
<StepDescriptions stepData={stepData} /> |
|
||||
</StepResult> |
|
||||
</StepsForm.StepForm> |
|
||||
</StepsForm> |
|
||||
<Divider |
|
||||
style={{ |
|
||||
margin: '40px 0 24px', |
|
||||
}} |
|
||||
/> |
|
||||
<div> |
|
||||
<h3>说明</h3> |
|
||||
<h4>转账到支付宝账户</h4> |
|
||||
<p> |
|
||||
如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。 |
|
||||
</p> |
|
||||
<h4>转账到银行卡</h4> |
|
||||
<p> |
|
||||
如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。 |
|
||||
</p> |
|
||||
</div> |
|
||||
</Card> |
|
||||
</PageContainer> |
|
||||
); |
|
||||
}; |
|
||||
export default StepForm; |
|
||||
@ -1,129 +0,0 @@ |
|||||
import { |
|
||||
ModalForm, |
|
||||
ProFormDateTimePicker, |
|
||||
ProFormSelect, |
|
||||
ProFormText, |
|
||||
ProFormTextArea, |
|
||||
} from '@ant-design/pro-components'; |
|
||||
import { Button, Result } from 'antd'; |
|
||||
import type { FC } from 'react'; |
|
||||
import type { BasicListItemDataType } from '../data.d'; |
|
||||
import useStyles from '../style.style'; |
|
||||
|
|
||||
type OperationModalProps = { |
|
||||
done: boolean; |
|
||||
open: boolean; |
|
||||
current: Partial<BasicListItemDataType> | undefined; |
|
||||
onDone: () => void; |
|
||||
onSubmit: (values: BasicListItemDataType) => void; |
|
||||
children?: React.ReactNode; |
|
||||
}; |
|
||||
const OperationModal: FC<OperationModalProps> = (props) => { |
|
||||
const { styles } = useStyles(); |
|
||||
const { done, open, current, onDone, onSubmit, children } = props; |
|
||||
if (!open) { |
|
||||
return null; |
|
||||
} |
|
||||
return ( |
|
||||
<ModalForm<BasicListItemDataType> |
|
||||
open={open} |
|
||||
title={done ? null : `任务${current ? '编辑' : '添加'}`} |
|
||||
className={styles.standardListForm} |
|
||||
width={640} |
|
||||
onFinish={async (values) => { |
|
||||
onSubmit(values); |
|
||||
}} |
|
||||
initialValues={current} |
|
||||
submitter={{ |
|
||||
render: (_, dom) => (done ? null : dom), |
|
||||
}} |
|
||||
trigger={children} |
|
||||
modalProps={{ |
|
||||
onCancel: () => onDone(), |
|
||||
destroyOnHidden: true, |
|
||||
bodyStyle: done |
|
||||
? { |
|
||||
padding: '72px 0', |
|
||||
} |
|
||||
: {}, |
|
||||
}} |
|
||||
> |
|
||||
{!done ? ( |
|
||||
<> |
|
||||
<ProFormText |
|
||||
name="title" |
|
||||
label="任务名称" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请输入任务名称', |
|
||||
}, |
|
||||
]} |
|
||||
placeholder="请输入" |
|
||||
/> |
|
||||
<ProFormDateTimePicker |
|
||||
name="createdAt" |
|
||||
label="开始时间" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请选择开始时间', |
|
||||
}, |
|
||||
]} |
|
||||
fieldProps={{ |
|
||||
style: { |
|
||||
width: '100%', |
|
||||
}, |
|
||||
}} |
|
||||
placeholder="请选择" |
|
||||
/> |
|
||||
<ProFormSelect |
|
||||
name="owner" |
|
||||
label="任务负责人" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请选择任务负责人', |
|
||||
}, |
|
||||
]} |
|
||||
options={[ |
|
||||
{ |
|
||||
label: '付晓晓', |
|
||||
value: 'xiao', |
|
||||
}, |
|
||||
{ |
|
||||
label: '周毛毛', |
|
||||
value: 'mao', |
|
||||
}, |
|
||||
]} |
|
||||
placeholder="请选择管理员" |
|
||||
/> |
|
||||
<ProFormTextArea |
|
||||
name="subDescription" |
|
||||
label="产品描述" |
|
||||
rules={[ |
|
||||
{ |
|
||||
message: '请输入至少五个字符的产品描述！', |
|
||||
min: 5, |
|
||||
}, |
|
||||
]} |
|
||||
placeholder="请输入至少五个字符" |
|
||||
/> |
|
||||
</> |
|
||||
) : ( |
|
||||
<Result |
|
||||
status="success" |
|
||||
title="操作成功" |
|
||||
subTitle="一系列的信息描述，很短同样也可以带标点。" |
|
||||
extra={ |
|
||||
<Button type="primary" onClick={onDone}> |
|
||||
知道了 |
|
||||
</Button> |
|
||||
} |
|
||||
className={styles.formResult} |
|
||||
/> |
|
||||
)} |
|
||||
</ModalForm> |
|
||||
); |
|
||||
}; |
|
||||
export default OperationModal; |
|
||||
@ -1,280 +0,0 @@ |
|||||
import { DownOutlined, PlusOutlined } from '@ant-design/icons'; |
|
||||
import { PageContainer } from '@ant-design/pro-components'; |
|
||||
import { useRequest } from '@umijs/max'; |
|
||||
import { |
|
||||
Avatar, |
|
||||
Button, |
|
||||
Card, |
|
||||
Col, |
|
||||
Dropdown, |
|
||||
Input, |
|
||||
List, |
|
||||
Modal, |
|
||||
Progress, |
|
||||
Row, |
|
||||
Segmented, |
|
||||
} from 'antd'; |
|
||||
import dayjs from 'dayjs'; |
|
||||
import type { FC } from 'react'; |
|
||||
import React, { useState } from 'react'; |
|
||||
import OperationModal from './components/OperationModal'; |
|
||||
import type { BasicListItemDataType } from './data.d'; |
|
||||
import { |
|
||||
addFakeList, |
|
||||
queryFakeList, |
|
||||
removeFakeList, |
|
||||
updateFakeList, |
|
||||
} from './service'; |
|
||||
import useStyles from './style.style'; |
|
||||
|
|
||||
const { Search } = Input; |
|
||||
const Info: FC<{ |
|
||||
title: React.ReactNode; |
|
||||
value: React.ReactNode; |
|
||||
bordered?: boolean; |
|
||||
}> = ({ title, value, bordered }) => { |
|
||||
const { styles } = useStyles(); |
|
||||
return ( |
|
||||
<div className={styles.headerInfo}> |
|
||||
<span>{title}</span> |
|
||||
<p>{value}</p> |
|
||||
{bordered && <em />} |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
const ListContent = ({ |
|
||||
data: { owner, createdAt, percent, status }, |
|
||||
}: { |
|
||||
data: BasicListItemDataType; |
|
||||
}) => { |
|
||||
const { styles } = useStyles(); |
|
||||
return ( |
|
||||
<div> |
|
||||
<div className={styles.listContentItem}> |
|
||||
<span>Owner</span> |
|
||||
<p>{owner}</p> |
|
||||
</div> |
|
||||
<div className={styles.listContentItem}> |
|
||||
<span>开始时间</span> |
|
||||
<p>{dayjs(createdAt).format('YYYY-MM-DD HH:mm')}</p> |
|
||||
</div> |
|
||||
<div className={styles.listContentItem}> |
|
||||
<Progress |
|
||||
percent={percent} |
|
||||
status={status} |
|
||||
size={6} |
|
||||
style={{ |
|
||||
width: 180, |
|
||||
}} |
|
||||
/> |
|
||||
</div> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
export const BasicList: FC = () => { |
|
||||
const { styles } = useStyles(); |
|
||||
const [done, setDone] = useState<boolean>(false); |
|
||||
const [open, setVisible] = useState<boolean>(false); |
|
||||
const [current, setCurrent] = useState< |
|
||||
Partial<BasicListItemDataType> | undefined |
|
||||
>(undefined); |
|
||||
const { |
|
||||
data: listData, |
|
||||
loading, |
|
||||
mutate, |
|
||||
} = useRequest(() => { |
|
||||
return queryFakeList({ |
|
||||
count: 50, |
|
||||
}); |
|
||||
}); |
|
||||
const { run: postRun } = useRequest( |
|
||||
(method, params) => { |
|
||||
if (method === 'remove') { |
|
||||
return removeFakeList(params); |
|
||||
} |
|
||||
if (method === 'update') { |
|
||||
return updateFakeList(params); |
|
||||
} |
|
||||
return addFakeList(params); |
|
||||
}, |
|
||||
{ |
|
||||
manual: true, |
|
||||
onSuccess: (result) => { |
|
||||
mutate(result); |
|
||||
}, |
|
||||
}, |
|
||||
); |
|
||||
const list = listData?.list || []; |
|
||||
const paginationProps = { |
|
||||
showSizeChanger: true, |
|
||||
showQuickJumper: true, |
|
||||
pageSize: 5, |
|
||||
total: list.length, |
|
||||
}; |
|
||||
const showEditModal = (item: BasicListItemDataType) => { |
|
||||
setVisible(true); |
|
||||
setCurrent(item); |
|
||||
}; |
|
||||
const deleteItem = (id: string) => { |
|
||||
postRun('remove', { |
|
||||
id, |
|
||||
}); |
|
||||
}; |
|
||||
const editAndDelete = ( |
|
||||
key: string | number, |
|
||||
currentItem: BasicListItemDataType, |
|
||||
) => { |
|
||||
if (key === 'edit') showEditModal(currentItem); |
|
||||
else if (key === 'delete') { |
|
||||
Modal.confirm({ |
|
||||
title: '删除任务', |
|
||||
content: '确定删除该任务吗？', |
|
||||
okText: '确认', |
|
||||
cancelText: '取消', |
|
||||
onOk: () => deleteItem(currentItem.id), |
|
||||
}); |
|
||||
} |
|
||||
}; |
|
||||
const extraContent = ( |
|
||||
<div> |
|
||||
<Segmented |
|
||||
defaultValue="all" |
|
||||
options={[ |
|
||||
{ label: '全部', value: 'all' }, |
|
||||
{ label: '进行中', value: 'progress' }, |
|
||||
{ label: '等待中', value: 'waiting' }, |
|
||||
]} |
|
||||
// 如有需要可添加 onChange 事件
|
|
||||
/> |
|
||||
<Search |
|
||||
className={styles.extraContentSearch} |
|
||||
placeholder="请输入" |
|
||||
onSearch={() => ({})} |
|
||||
variant="filled" |
|
||||
/> |
|
||||
</div> |
|
||||
); |
|
||||
const MoreBtn: React.FC<{ |
|
||||
item: BasicListItemDataType; |
|
||||
}> = ({ item }) => ( |
|
||||
<Dropdown |
|
||||
menu={{ |
|
||||
onClick: ({ key }) => editAndDelete(key, item), |
|
||||
items: [ |
|
||||
{ |
|
||||
key: 'edit', |
|
||||
label: '编辑', |
|
||||
}, |
|
||||
{ |
|
||||
key: 'delete', |
|
||||
label: '删除', |
|
||||
}, |
|
||||
], |
|
||||
}} |
|
||||
> |
|
||||
<a> |
|
||||
更多 <DownOutlined /> |
|
||||
</a> |
|
||||
</Dropdown> |
|
||||
); |
|
||||
const handleDone = () => { |
|
||||
setDone(false); |
|
||||
setVisible(false); |
|
||||
setCurrent({}); |
|
||||
}; |
|
||||
const handleSubmit = (values: BasicListItemDataType) => { |
|
||||
setDone(true); |
|
||||
const method = values?.id ? 'update' : 'add'; |
|
||||
postRun(method, values); |
|
||||
}; |
|
||||
return ( |
|
||||
<div> |
|
||||
<PageContainer> |
|
||||
<div className={styles.standardList}> |
|
||||
<Card variant="borderless"> |
|
||||
<Row> |
|
||||
<Col sm={8} xs={24}> |
|
||||
<Info title="我的待办" value="8个任务" bordered /> |
|
||||
</Col> |
|
||||
<Col sm={8} xs={24}> |
|
||||
<Info title="本周任务平均处理时间" value="32分钟" bordered /> |
|
||||
</Col> |
|
||||
<Col sm={8} xs={24}> |
|
||||
<Info title="本周完成任务数" value="24个任务" /> |
|
||||
</Col> |
|
||||
</Row> |
|
||||
</Card> |
|
||||
|
|
||||
<Card |
|
||||
className={styles.listCard} |
|
||||
variant="borderless" |
|
||||
title="基本列表" |
|
||||
style={{ |
|
||||
marginTop: 24, |
|
||||
}} |
|
||||
styles={{ |
|
||||
body: { |
|
||||
padding: '0 32px 40px 32px', |
|
||||
}, |
|
||||
}} |
|
||||
extra={extraContent} |
|
||||
> |
|
||||
<List |
|
||||
size="large" |
|
||||
rowKey="id" |
|
||||
loading={loading} |
|
||||
pagination={paginationProps} |
|
||||
dataSource={list} |
|
||||
renderItem={(item) => ( |
|
||||
<List.Item |
|
||||
actions={[ |
|
||||
<a |
|
||||
key="edit" |
|
||||
onClick={(e) => { |
|
||||
e.preventDefault(); |
|
||||
showEditModal(item); |
|
||||
}} |
|
||||
> |
|
||||
编辑 |
|
||||
</a>, |
|
||||
<MoreBtn key="more" item={item} />, |
|
||||
]} |
|
||||
> |
|
||||
<List.Item.Meta |
|
||||
avatar={ |
|
||||
<Avatar src={item.logo} shape="square" size="large" /> |
|
||||
} |
|
||||
title={<a href={item.href}>{item.title}</a>} |
|
||||
description={item.subDescription} |
|
||||
/> |
|
||||
<ListContent data={item} /> |
|
||||
</List.Item> |
|
||||
)} |
|
||||
/> |
|
||||
</Card> |
|
||||
</div> |
|
||||
</PageContainer> |
|
||||
<Button |
|
||||
type="dashed" |
|
||||
onClick={() => { |
|
||||
setVisible(true); |
|
||||
}} |
|
||||
style={{ |
|
||||
width: '100%', |
|
||||
marginBottom: 8, |
|
||||
}} |
|
||||
> |
|
||||
<PlusOutlined /> |
|
||||
添加 |
|
||||
</Button> |
|
||||
<OperationModal |
|
||||
done={done} |
|
||||
open={open} |
|
||||
current={current} |
|
||||
onDone={handleDone} |
|
||||
onSubmit={handleSubmit} |
|
||||
/> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
export default BasicList; |
|
||||
@ -1,239 +0,0 @@ |
|||||
import { |
|
||||
DownloadOutlined, |
|
||||
EditOutlined, |
|
||||
EllipsisOutlined, |
|
||||
ShareAltOutlined, |
|
||||
} from '@ant-design/icons'; |
|
||||
import { useRequest } from '@umijs/max'; |
|
||||
import { |
|
||||
Avatar, |
|
||||
Card, |
|
||||
Col, |
|
||||
Dropdown, |
|
||||
Form, |
|
||||
List, |
|
||||
Row, |
|
||||
Select, |
|
||||
Tooltip, |
|
||||
} from 'antd'; |
|
||||
import numeral from 'numeral'; |
|
||||
import type { FC } from 'react'; |
|
||||
import React from 'react'; |
|
||||
import { categoryOptions } from '../../mock'; |
|
||||
import StandardFormRow from './components/StandardFormRow'; |
|
||||
import TagSelect from './components/TagSelect'; |
|
||||
import type { ListItemDataType } from './data.d'; |
|
||||
import { queryFakeList } from './service'; |
|
||||
import useStyles from './style.style'; |
|
||||
export function formatWan(val: number) { |
|
||||
const v = val * 1; |
|
||||
if (!v || Number.isNaN(v)) return ''; |
|
||||
let result: React.ReactNode = val; |
|
||||
if (val > 10000) { |
|
||||
result = ( |
|
||||
<span> |
|
||||
{Math.floor(val / 10000)} |
|
||||
<span |
|
||||
style={{ |
|
||||
position: 'relative', |
|
||||
top: -2, |
|
||||
fontSize: 14, |
|
||||
fontStyle: 'normal', |
|
||||
marginLeft: 2, |
|
||||
}} |
|
||||
> |
|
||||
万 |
|
||||
</span> |
|
||||
</span> |
|
||||
); |
|
||||
} |
|
||||
return result; |
|
||||
} |
|
||||
const formItemLayout = { |
|
||||
wrapperCol: { |
|
||||
xs: { |
|
||||
span: 24, |
|
||||
}, |
|
||||
sm: { |
|
||||
span: 16, |
|
||||
}, |
|
||||
}, |
|
||||
}; |
|
||||
const CardInfo: React.FC<{ |
|
||||
activeUser: React.ReactNode; |
|
||||
newUser: React.ReactNode; |
|
||||
}> = ({ activeUser, newUser }) => { |
|
||||
const { styles } = useStyles(); |
|
||||
return ( |
|
||||
<div className={styles.cardInfo}> |
|
||||
<div> |
|
||||
<p>活跃用户</p> |
|
||||
<p>{activeUser}</p> |
|
||||
</div> |
|
||||
<div> |
|
||||
<p>新增用户</p> |
|
||||
<p>{newUser}</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
export const Applications: FC<Record<string, any>> = () => { |
|
||||
const { styles } = useStyles(); |
|
||||
const { data, loading, run } = useRequest((values: any) => { |
|
||||
console.log('form data', values); |
|
||||
return queryFakeList({ |
|
||||
count: 8, |
|
||||
}); |
|
||||
}); |
|
||||
|
|
||||
const list = data?.list || []; |
|
||||
|
|
||||
return ( |
|
||||
<div className={styles.filterCardList}> |
|
||||
<Card variant="borderless"> |
|
||||
<Form |
|
||||
onValuesChange={(_, values) => { |
|
||||
run(values); |
|
||||
}} |
|
||||
> |
|
||||
<StandardFormRow |
|
||||
title="所属类目" |
|
||||
block |
|
||||
style={{ |
|
||||
paddingBottom: 11, |
|
||||
}} |
|
||||
> |
|
||||
<Form.Item name="category"> |
|
||||
<TagSelect expandable> |
|
||||
{categoryOptions |
|
||||
.filter( |
|
||||
( |
|
||||
category, |
|
||||
): category is { value: string | number; label: string } => |
|
||||
category.value !== undefined && category.value !== null, |
|
||||
) |
|
||||
.map((category) => ( |
|
||||
<TagSelect.Option |
|
||||
value={category.value} |
|
||||
key={category.value} |
|
||||
> |
|
||||
{category.label} |
|
||||
</TagSelect.Option> |
|
||||
))} |
|
||||
</TagSelect> |
|
||||
</Form.Item> |
|
||||
</StandardFormRow> |
|
||||
<StandardFormRow title="其它选项" grid last> |
|
||||
<Row gutter={16}> |
|
||||
<Col lg={8} md={10} sm={10} xs={24}> |
|
||||
<Form.Item {...formItemLayout} name="author" label="作者"> |
|
||||
<Select |
|
||||
placeholder="不限" |
|
||||
style={{ |
|
||||
maxWidth: 200, |
|
||||
width: '100%', |
|
||||
}} |
|
||||
options={[ |
|
||||
{ |
|
||||
label: '王昭君', |
|
||||
value: 'lisa', |
|
||||
}, |
|
||||
]} |
|
||||
/> |
|
||||
</Form.Item> |
|
||||
</Col> |
|
||||
<Col lg={8} md={10} sm={10} xs={24}> |
|
||||
<Form.Item {...formItemLayout} name="rate" label="好评度"> |
|
||||
<Select |
|
||||
placeholder="不限" |
|
||||
style={{ |
|
||||
maxWidth: 200, |
|
||||
width: '100%', |
|
||||
}} |
|
||||
options={[ |
|
||||
{ |
|
||||
label: '优秀', |
|
||||
value: 'good', |
|
||||
}, |
|
||||
{ |
|
||||
label: '普通', |
|
||||
value: 'normal', |
|
||||
}, |
|
||||
]} |
|
||||
/> |
|
||||
</Form.Item> |
|
||||
</Col> |
|
||||
</Row> |
|
||||
</StandardFormRow> |
|
||||
</Form> |
|
||||
</Card> |
|
||||
<br /> |
|
||||
<List<ListItemDataType> |
|
||||
rowKey="id" |
|
||||
grid={{ |
|
||||
gutter: 16, |
|
||||
xs: 1, |
|
||||
sm: 2, |
|
||||
md: 3, |
|
||||
lg: 3, |
|
||||
xl: 4, |
|
||||
xxl: 4, |
|
||||
}} |
|
||||
loading={loading} |
|
||||
dataSource={list} |
|
||||
renderItem={(item) => ( |
|
||||
<List.Item key={item.id}> |
|
||||
<Card |
|
||||
hoverable |
|
||||
styles={{ |
|
||||
body: { |
|
||||
paddingBottom: 20, |
|
||||
}, |
|
||||
}} |
|
||||
actions={[ |
|
||||
<Tooltip key="download" title="下载"> |
|
||||
<DownloadOutlined /> |
|
||||
</Tooltip>, |
|
||||
<Tooltip key="edit" title="编辑"> |
|
||||
<EditOutlined /> |
|
||||
</Tooltip>, |
|
||||
<Tooltip title="分享" key="share"> |
|
||||
<ShareAltOutlined /> |
|
||||
</Tooltip>, |
|
||||
<Dropdown |
|
||||
key="ellipsis" |
|
||||
menu={{ |
|
||||
items: [ |
|
||||
{ |
|
||||
key: '1', |
|
||||
title: '1st menu item', |
|
||||
}, |
|
||||
{ |
|
||||
key: '2', |
|
||||
title: '2st menu item', |
|
||||
}, |
|
||||
], |
|
||||
}} |
|
||||
> |
|
||||
<EllipsisOutlined /> |
|
||||
</Dropdown>, |
|
||||
]} |
|
||||
> |
|
||||
<Card.Meta |
|
||||
avatar={<Avatar size="small" src={item.avatar} />} |
|
||||
title={item.title} |
|
||||
/> |
|
||||
<div> |
|
||||
<CardInfo |
|
||||
activeUser={formatWan(item.activeUser)} |
|
||||
newUser={numeral(item.newUser).format('0,0')} |
|
||||
/> |
|
||||
</div> |
|
||||
</Card> |
|
||||
</List.Item> |
|
||||
)} |
|
||||
/> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
export default Applications; |
|
||||
@ -1,261 +0,0 @@ |
|||||
import { |
|
||||
LikeOutlined, |
|
||||
LoadingOutlined, |
|
||||
MessageOutlined, |
|
||||
StarOutlined, |
|
||||
} from '@ant-design/icons'; |
|
||||
import { useRequest } from '@umijs/max'; |
|
||||
import { Button, Card, Col, Form, List, Row, Select, Tag } from 'antd'; |
|
||||
import type { DefaultOptionType } from 'antd/es/select'; |
|
||||
import type { FC } from 'react'; |
|
||||
import React, { useMemo } from 'react'; |
|
||||
import { categoryOptions } from '../../mock'; |
|
||||
import ArticleListContent from './components/ArticleListContent'; |
|
||||
import StandardFormRow from './components/StandardFormRow'; |
|
||||
import TagSelect from './components/TagSelect'; |
|
||||
import type { ListItemDataType } from './data.d'; |
|
||||
import { queryFakeList } from './service'; |
|
||||
import useStyles from './style.style'; |
|
||||
|
|
||||
const FormItem = Form.Item; |
|
||||
|
|
||||
const pageSize = 5; |
|
||||
|
|
||||
const Articles: FC = () => { |
|
||||
const [form] = Form.useForm(); |
|
||||
|
|
||||
const { styles } = useStyles(); |
|
||||
|
|
||||
const { data, reload, loading, loadMore, loadingMore } = useRequest( |
|
||||
() => { |
|
||||
return queryFakeList({ |
|
||||
count: pageSize, |
|
||||
}); |
|
||||
}, |
|
||||
{ |
|
||||
loadMore: true, |
|
||||
}, |
|
||||
); |
|
||||
|
|
||||
const list = data?.list || []; |
|
||||
|
|
||||
const setOwner = () => { |
|
||||
form.setFieldsValue({ |
|
||||
owner: ['wzj'], |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
const owners = [ |
|
||||
{ |
|
||||
id: 'wzj', |
|
||||
name: '我自己', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'wjh', |
|
||||
name: '吴家豪', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'zxx', |
|
||||
name: '周星星', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'zly', |
|
||||
name: '赵丽颖', |
|
||||
}, |
|
||||
{ |
|
||||
id: 'ym', |
|
||||
name: '姚明', |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const IconText: React.FC<{ |
|
||||
type: string; |
|
||||
text: React.ReactNode; |
|
||||
}> = ({ type, text }) => { |
|
||||
switch (type) { |
|
||||
case 'star-o': |
|
||||
return ( |
|
||||
<span> |
|
||||
<StarOutlined style={{ marginRight: 8 }} /> |
|
||||
{text} |
|
||||
</span> |
|
||||
); |
|
||||
case 'like-o': |
|
||||
return ( |
|
||||
<span> |
|
||||
<LikeOutlined style={{ marginRight: 8 }} /> |
|
||||
{text} |
|
||||
</span> |
|
||||
); |
|
||||
case 'message': |
|
||||
return ( |
|
||||
<span> |
|
||||
<MessageOutlined style={{ marginRight: 8 }} /> |
|
||||
{text} |
|
||||
</span> |
|
||||
); |
|
||||
default: |
|
||||
return null; |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
const formItemLayout = { |
|
||||
wrapperCol: { |
|
||||
xs: { span: 24 }, |
|
||||
sm: { span: 24 }, |
|
||||
md: { span: 12 }, |
|
||||
}, |
|
||||
}; |
|
||||
|
|
||||
const loadMoreDom = list.length > 0 && ( |
|
||||
<div style={{ textAlign: 'center', marginTop: 16 }}> |
|
||||
<Button onClick={loadMore} style={{ paddingLeft: 48, paddingRight: 48 }}> |
|
||||
{loadingMore ? ( |
|
||||
<span> |
|
||||
<LoadingOutlined /> 加载中... |
|
||||
</span> |
|
||||
) : ( |
|
||||
'加载更多' |
|
||||
)} |
|
||||
</Button> |
|
||||
</div> |
|
||||
); |
|
||||
|
|
||||
const ownerOptions = useMemo<DefaultOptionType[]>( |
|
||||
() => |
|
||||
owners.map((item) => ({ |
|
||||
label: item.name, |
|
||||
value: item.id, |
|
||||
})), |
|
||||
[], |
|
||||
); |
|
||||
|
|
||||
return ( |
|
||||
<> |
|
||||
<Card variant="borderless"> |
|
||||
<Form |
|
||||
layout="inline" |
|
||||
form={form} |
|
||||
initialValues={{ |
|
||||
owner: ['wjh', 'zxx'], |
|
||||
}} |
|
||||
onValuesChange={reload} |
|
||||
> |
|
||||
<StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}> |
|
||||
<FormItem name="category"> |
|
||||
<TagSelect expandable> |
|
||||
{categoryOptions |
|
||||
.filter( |
|
||||
( |
|
||||
category, |
|
||||
): category is { value: string | number; label: string } => |
|
||||
category.value !== undefined && category.value !== null, |
|
||||
) |
|
||||
.map((category) => ( |
|
||||
<TagSelect.Option |
|
||||
value={category.value} |
|
||||
key={category.value} |
|
||||
> |
|
||||
{category.label} |
|
||||
</TagSelect.Option> |
|
||||
))} |
|
||||
</TagSelect> |
|
||||
</FormItem> |
|
||||
</StandardFormRow> |
|
||||
<StandardFormRow title="owner" grid> |
|
||||
<FormItem name="owner" noStyle> |
|
||||
<Select |
|
||||
mode="multiple" |
|
||||
placeholder="选择 owner" |
|
||||
style={{ minWidth: '6rem' }} |
|
||||
options={ownerOptions} |
|
||||
/> |
|
||||
</FormItem> |
|
||||
<a className={styles.selfTrigger} onClick={setOwner}> |
|
||||
只看自己的 |
|
||||
</a> |
|
||||
</StandardFormRow> |
|
||||
<StandardFormRow title="其它选项" grid last> |
|
||||
<Row gutter={16}> |
|
||||
<Col xl={8} lg={10} md={12} sm={24} xs={24}> |
|
||||
<FormItem {...formItemLayout} label="活跃用户" name="user"> |
|
||||
<Select |
|
||||
placeholder="不限" |
|
||||
style={{ maxWidth: 200, width: '100%' }} |
|
||||
options={[ |
|
||||
{ |
|
||||
label: '李三', |
|
||||
value: 'lisa', |
|
||||
}, |
|
||||
]} |
|
||||
/> |
|
||||
</FormItem> |
|
||||
</Col> |
|
||||
<Col xl={8} lg={10} md={12} sm={24} xs={24}> |
|
||||
<FormItem {...formItemLayout} label="好评度" name="rate"> |
|
||||
<Select |
|
||||
placeholder="不限" |
|
||||
style={{ maxWidth: 200, width: '100%' }} |
|
||||
options={[ |
|
||||
{ |
|
||||
label: '优秀', |
|
||||
value: 'good', |
|
||||
}, |
|
||||
]} |
|
||||
/> |
|
||||
</FormItem> |
|
||||
</Col> |
|
||||
</Row> |
|
||||
</StandardFormRow> |
|
||||
</Form> |
|
||||
</Card> |
|
||||
<Card |
|
||||
style={{ marginTop: 24 }} |
|
||||
variant="borderless" |
|
||||
styles={{ |
|
||||
body: { |
|
||||
padding: '8px 32px 32px 32px', |
|
||||
}, |
|
||||
}} |
|
||||
> |
|
||||
<List<ListItemDataType> |
|
||||
size="large" |
|
||||
loading={loading} |
|
||||
rowKey="id" |
|
||||
itemLayout="vertical" |
|
||||
loadMore={loadMoreDom} |
|
||||
dataSource={list} |
|
||||
renderItem={(item) => ( |
|
||||
<List.Item |
|
||||
key={item.id} |
|
||||
actions={[ |
|
||||
<IconText key="star" type="star-o" text={item.star} />, |
|
||||
<IconText key="like" type="like-o" text={item.like} />, |
|
||||
<IconText key="message" type="message" text={item.message} />, |
|
||||
]} |
|
||||
extra={<div className={styles.listItemExtra} />} |
|
||||
> |
|
||||
<List.Item.Meta |
|
||||
title={ |
|
||||
<a className={styles.listItemMetaTitle} href={item.href}> |
|
||||
{item.title} |
|
||||
</a> |
|
||||
} |
|
||||
description={ |
|
||||
<span> |
|
||||
<Tag>Ant Design</Tag> |
|
||||
<Tag>设计语言</Tag> |
|
||||
<Tag>蚂蚁金服</Tag> |
|
||||
</span> |
|
||||
} |
|
||||
/> |
|
||||
<ArticleListContent data={item} /> |
|
||||
</List.Item> |
|
||||
)} |
|
||||
/> |
|
||||
</Card> |
|
||||
</> |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
export default Articles; |
|
||||
@ -1,176 +0,0 @@ |
|||||
import { useRequest } from '@umijs/max'; |
|
||||
import { Card, Col, Form, List, Row, Select, Typography } from 'antd'; |
|
||||
import dayjs from 'dayjs'; |
|
||||
import relativeTime from 'dayjs/plugin/relativeTime'; |
|
||||
import type { FC } from 'react'; |
|
||||
import { categoryOptions } from '../../mock'; |
|
||||
import AvatarList from './components/AvatarList'; |
|
||||
import StandardFormRow from './components/StandardFormRow'; |
|
||||
import TagSelect from './components/TagSelect'; |
|
||||
import type { ListItemDataType } from './data.d'; |
|
||||
import { queryFakeList } from './service'; |
|
||||
import useStyles from './style.style'; |
|
||||
|
|
||||
dayjs.extend(relativeTime); |
|
||||
|
|
||||
const FormItem = Form.Item; |
|
||||
const { Paragraph } = Typography; |
|
||||
const getKey = (id: string, index: number) => `${id}-${index}`; |
|
||||
const Projects: FC = () => { |
|
||||
const { styles } = useStyles(); |
|
||||
const { data, loading, run } = useRequest((values: any) => { |
|
||||
console.log('form data', values); |
|
||||
return queryFakeList({ |
|
||||
count: 8, |
|
||||
}); |
|
||||
}); |
|
||||
const list = data?.list || []; |
|
||||
const cardList = list && ( |
|
||||
<List<ListItemDataType> |
|
||||
rowKey="id" |
|
||||
loading={loading} |
|
||||
grid={{ |
|
||||
gutter: 16, |
|
||||
xs: 1, |
|
||||
sm: 2, |
|
||||
md: 3, |
|
||||
lg: 3, |
|
||||
xl: 4, |
|
||||
xxl: 4, |
|
||||
}} |
|
||||
dataSource={list} |
|
||||
renderItem={(item) => ( |
|
||||
<List.Item> |
|
||||
<Card |
|
||||
className={styles.card} |
|
||||
hoverable |
|
||||
cover={<img alt={item.title} src={item.cover} />} |
|
||||
> |
|
||||
<Card.Meta |
|
||||
title={<a>{item.title}</a>} |
|
||||
description={ |
|
||||
<Paragraph |
|
||||
ellipsis={{ |
|
||||
rows: 2, |
|
||||
}} |
|
||||
> |
|
||||
{item.subDescription} |
|
||||
</Paragraph> |
|
||||
} |
|
||||
/> |
|
||||
<div className={styles.cardItemContent}> |
|
||||
<span>{dayjs(item.updatedAt).fromNow()}</span> |
|
||||
<div className={styles.avatarList}> |
|
||||
<AvatarList size="small"> |
|
||||
{item.members.map((member, i) => ( |
|
||||
<AvatarList.Item |
|
||||
key={getKey(item.id, i)} |
|
||||
src={member.avatar} |
|
||||
tips={member.name} |
|
||||
/> |
|
||||
))} |
|
||||
</AvatarList> |
|
||||
</div> |
|
||||
</div> |
|
||||
</Card> |
|
||||
</List.Item> |
|
||||
)} |
|
||||
/> |
|
||||
); |
|
||||
const formItemLayout = { |
|
||||
wrapperCol: { |
|
||||
xs: { |
|
||||
span: 24, |
|
||||
}, |
|
||||
sm: { |
|
||||
span: 16, |
|
||||
}, |
|
||||
}, |
|
||||
}; |
|
||||
return ( |
|
||||
<div className={styles.coverCardList}> |
|
||||
<Card variant="borderless"> |
|
||||
<Form |
|
||||
layout="inline" |
|
||||
onValuesChange={(_, values) => { |
|
||||
// 表单项变化时请求数据
|
|
||||
// 模拟查询表单生效
|
|
||||
run(values); |
|
||||
}} |
|
||||
> |
|
||||
<StandardFormRow |
|
||||
title="所属类目" |
|
||||
block |
|
||||
style={{ |
|
||||
paddingBottom: 11, |
|
||||
}} |
|
||||
> |
|
||||
<FormItem name="category"> |
|
||||
<TagSelect expandable> |
|
||||
{categoryOptions |
|
||||
.filter( |
|
||||
( |
|
||||
category, |
|
||||
): category is { value: string | number; label: string } => |
|
||||
category.value !== undefined && category.value !== null, |
|
||||
) |
|
||||
.map((category) => ( |
|
||||
<TagSelect.Option |
|
||||
value={category.value} |
|
||||
key={category.value} |
|
||||
> |
|
||||
{category.label} |
|
||||
</TagSelect.Option> |
|
||||
))} |
|
||||
</TagSelect> |
|
||||
</FormItem> |
|
||||
</StandardFormRow> |
|
||||
<StandardFormRow title="其它选项" grid last> |
|
||||
<Row gutter={16}> |
|
||||
<Col lg={8} md={10} sm={10} xs={24}> |
|
||||
<FormItem {...formItemLayout} label="作者" name="author"> |
|
||||
<Select |
|
||||
placeholder="不限" |
|
||||
style={{ |
|
||||
maxWidth: 200, |
|
||||
width: '100%', |
|
||||
}} |
|
||||
options={[ |
|
||||
{ |
|
||||
label: '王昭君', |
|
||||
value: 'lisa', |
|
||||
}, |
|
||||
]} |
|
||||
/> |
|
||||
</FormItem> |
|
||||
</Col> |
|
||||
<Col lg={8} md={10} sm={10} xs={24}> |
|
||||
<FormItem {...formItemLayout} label="好评度" name="rate"> |
|
||||
<Select |
|
||||
placeholder="不限" |
|
||||
style={{ |
|
||||
maxWidth: 200, |
|
||||
width: '100%', |
|
||||
}} |
|
||||
options={[ |
|
||||
{ |
|
||||
label: '优秀', |
|
||||
value: 'good', |
|
||||
}, |
|
||||
{ |
|
||||
label: '普通', |
|
||||
value: 'normal', |
|
||||
}, |
|
||||
]} |
|
||||
/> |
|
||||
</FormItem> |
|
||||
</Col> |
|
||||
</Row> |
|
||||
</StandardFormRow> |
|
||||
</Form> |
|
||||
</Card> |
|
||||
<div className={styles.cardList}>{cardList}</div> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
export default Projects; |
|
||||
@ -1,26 +0,0 @@ |
|||||
import { Modal } from 'antd'; |
|
||||
import React from 'react'; |
|
||||
|
|
||||
type CreateFormProps = { |
|
||||
modalVisible: boolean; |
|
||||
children?: React.ReactNode; |
|
||||
onCancel: () => void; |
|
||||
}; |
|
||||
|
|
||||
const CreateForm: React.FC<CreateFormProps> = (props) => { |
|
||||
const { modalVisible, onCancel } = props; |
|
||||
|
|
||||
return ( |
|
||||
<Modal |
|
||||
destroyOnHidden |
|
||||
title="新建规则" |
|
||||
open={modalVisible} |
|
||||
onCancel={() => onCancel()} |
|
||||
footer={null} |
|
||||
> |
|
||||
{props.children} |
|
||||
</Modal> |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
export default CreateForm; |
|
||||
@ -1,161 +0,0 @@ |
|||||
import { |
|
||||
ProFormDateTimePicker, |
|
||||
ProFormRadio, |
|
||||
ProFormSelect, |
|
||||
ProFormText, |
|
||||
ProFormTextArea, |
|
||||
StepsForm, |
|
||||
} from '@ant-design/pro-components'; |
|
||||
import { Modal } from 'antd'; |
|
||||
import React from 'react'; |
|
||||
import type { TableListItem } from '../data'; |
|
||||
|
|
||||
export type FormValueType = { |
|
||||
target?: string; |
|
||||
template?: string; |
|
||||
type?: string; |
|
||||
time?: string; |
|
||||
frequency?: string; |
|
||||
} & Partial<TableListItem>; |
|
||||
|
|
||||
export type UpdateFormProps = { |
|
||||
onCancel: (flag?: boolean, formVals?: FormValueType) => void; |
|
||||
onSubmit: (values: FormValueType) => Promise<void>; |
|
||||
updateModalVisible: boolean; |
|
||||
values: Partial<TableListItem>; |
|
||||
}; |
|
||||
|
|
||||
const UpdateForm: React.FC<UpdateFormProps> = (props) => { |
|
||||
return ( |
|
||||
<StepsForm |
|
||||
stepsProps={{ |
|
||||
size: 'small', |
|
||||
}} |
|
||||
stepsFormRender={(dom, submitter) => { |
|
||||
return ( |
|
||||
<Modal |
|
||||
width={640} |
|
||||
styles={{ |
|
||||
body: { |
|
||||
padding: '32px 40px 48px', |
|
||||
}, |
|
||||
}} |
|
||||
destroyOnHidden |
|
||||
title="规则配置" |
|
||||
open={props.updateModalVisible} |
|
||||
footer={submitter} |
|
||||
onCancel={() => { |
|
||||
props.onCancel(); |
|
||||
}} |
|
||||
> |
|
||||
{dom} |
|
||||
</Modal> |
|
||||
); |
|
||||
}} |
|
||||
onFinish={props.onSubmit} |
|
||||
> |
|
||||
<StepsForm.StepForm |
|
||||
initialValues={{ |
|
||||
name: props.values.name, |
|
||||
desc: props.values.desc, |
|
||||
}} |
|
||||
title="基本信息" |
|
||||
> |
|
||||
<ProFormText |
|
||||
name="name" |
|
||||
label="规则名称" |
|
||||
width="md" |
|
||||
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 |
|
||||
name="target" |
|
||||
width="md" |
|
||||
label="监控对象" |
|
||||
valueEnum={{ |
|
||||
0: '表一', |
|
||||
1: '表二', |
|
||||
}} |
|
||||
/> |
|
||||
<ProFormSelect |
|
||||
name="template" |
|
||||
width="md" |
|
||||
label="规则模板" |
|
||||
valueEnum={{ |
|
||||
0: '规则模板一', |
|
||||
1: '规则模板二', |
|
||||
}} |
|
||||
/> |
|
||||
<ProFormRadio.Group |
|
||||
name="type" |
|
||||
label="规则类型" |
|
||||
options={[ |
|
||||
{ |
|
||||
value: '0', |
|
||||
label: '强', |
|
||||
}, |
|
||||
{ |
|
||||
value: '1', |
|
||||
label: '弱', |
|
||||
}, |
|
||||
]} |
|
||||
/> |
|
||||
</StepsForm.StepForm> |
|
||||
<StepsForm.StepForm |
|
||||
initialValues={{ |
|
||||
type: '1', |
|
||||
frequency: 'month', |
|
||||
}} |
|
||||
title="设定调度周期" |
|
||||
> |
|
||||
<ProFormDateTimePicker |
|
||||
name="time" |
|
||||
width="md" |
|
||||
label="开始时间" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请选择开始时间！', |
|
||||
}, |
|
||||
]} |
|
||||
/> |
|
||||
<ProFormSelect |
|
||||
name="frequency" |
|
||||
label="监控对象" |
|
||||
width="md" |
|
||||
valueEnum={{ |
|
||||
month: '月', |
|
||||
week: '周', |
|
||||
}} |
|
||||
/> |
|
||||
</StepsForm.StepForm> |
|
||||
</StepsForm> |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
export default UpdateForm; |
|
||||
@ -1,493 +0,0 @@ |
|||||
import { |
|
||||
DingdingOutlined, |
|
||||
DownOutlined, |
|
||||
EllipsisOutlined, |
|
||||
InfoCircleOutlined, |
|
||||
} from '@ant-design/icons'; |
|
||||
import { |
|
||||
GridContent, |
|
||||
PageContainer, |
|
||||
RouteContext, |
|
||||
} from '@ant-design/pro-components'; |
|
||||
import { useRequest } from '@umijs/max'; |
|
||||
import { |
|
||||
Badge, |
|
||||
Button, |
|
||||
Card, |
|
||||
Descriptions, |
|
||||
Divider, |
|
||||
Dropdown, |
|
||||
Empty, |
|
||||
Popover, |
|
||||
Space, |
|
||||
Statistic, |
|
||||
Steps, |
|
||||
Table, |
|
||||
Tooltip, |
|
||||
} from 'antd'; |
|
||||
import classNames from 'classnames'; |
|
||||
import type { FC } from 'react'; |
|
||||
import React, { useState } from 'react'; |
|
||||
import type { AdvancedProfileData } from './data.d'; |
|
||||
import { queryAdvancedProfile } from './service'; |
|
||||
import useStyles from './style.style'; |
|
||||
|
|
||||
const { Step } = Steps; |
|
||||
|
|
||||
const action = ( |
|
||||
<RouteContext.Consumer> |
|
||||
{({ isMobile }) => { |
|
||||
if (isMobile) { |
|
||||
return ( |
|
||||
<Dropdown.Button |
|
||||
type="primary" |
|
||||
icon={<DownOutlined />} |
|
||||
menu={{ |
|
||||
items: [ |
|
||||
{ |
|
||||
key: '1', |
|
||||
label: '操作一', |
|
||||
}, |
|
||||
{ |
|
||||
key: '2', |
|
||||
label: '操作二', |
|
||||
}, |
|
||||
{ |
|
||||
key: '3', |
|
||||
label: '操作三', |
|
||||
}, |
|
||||
], |
|
||||
}} |
|
||||
placement="bottomRight" |
|
||||
> |
|
||||
主操作 |
|
||||
</Dropdown.Button> |
|
||||
); |
|
||||
} |
|
||||
return ( |
|
||||
<Space> |
|
||||
<Space.Compact> |
|
||||
<Button>操作一</Button> |
|
||||
<Button>操作二</Button> |
|
||||
<Dropdown |
|
||||
menu={{ |
|
||||
items: [ |
|
||||
{ |
|
||||
key: '1', |
|
||||
label: '选项一', |
|
||||
}, |
|
||||
{ |
|
||||
key: '2', |
|
||||
label: '选项二', |
|
||||
}, |
|
||||
{ |
|
||||
key: '3', |
|
||||
label: '选项三', |
|
||||
}, |
|
||||
], |
|
||||
}} |
|
||||
placement="bottomRight" |
|
||||
> |
|
||||
<Button> |
|
||||
<EllipsisOutlined /> |
|
||||
</Button> |
|
||||
</Dropdown> |
|
||||
</Space.Compact> |
|
||||
<Button type="primary">主操作</Button> |
|
||||
</Space> |
|
||||
); |
|
||||
}} |
|
||||
</RouteContext.Consumer> |
|
||||
); |
|
||||
|
|
||||
const operationTabList = [ |
|
||||
{ |
|
||||
key: 'tab1', |
|
||||
tab: '操作日志一', |
|
||||
}, |
|
||||
{ |
|
||||
key: 'tab2', |
|
||||
tab: '操作日志二', |
|
||||
}, |
|
||||
{ |
|
||||
key: 'tab3', |
|
||||
tab: '操作日志三', |
|
||||
}, |
|
||||
]; |
|
||||
const columns = [ |
|
||||
{ |
|
||||
title: '操作类型', |
|
||||
dataIndex: 'type', |
|
||||
key: 'type', |
|
||||
}, |
|
||||
{ |
|
||||
title: '操作人', |
|
||||
dataIndex: 'name', |
|
||||
key: 'name', |
|
||||
}, |
|
||||
{ |
|
||||
title: '执行结果', |
|
||||
dataIndex: 'status', |
|
||||
key: 'status', |
|
||||
render: (text: string) => { |
|
||||
if (text === 'agree') { |
|
||||
return <Badge status="success" text="成功" />; |
|
||||
} |
|
||||
return <Badge status="error" text="驳回" />; |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
title: '操作时间', |
|
||||
dataIndex: 'updatedAt', |
|
||||
key: 'updatedAt', |
|
||||
}, |
|
||||
{ |
|
||||
title: '备注', |
|
||||
dataIndex: 'memo', |
|
||||
key: 'memo', |
|
||||
}, |
|
||||
]; |
|
||||
type AdvancedState = { |
|
||||
operationKey: 'tab1' | 'tab2' | 'tab3'; |
|
||||
tabActiveKey: string; |
|
||||
}; |
|
||||
const Advanced: FC = () => { |
|
||||
const { styles } = useStyles(); |
|
||||
|
|
||||
const extra = ( |
|
||||
<div className={styles.moreInfo}> |
|
||||
<Statistic title="状态" value="待审批" /> |
|
||||
<Statistic title="订单金额" value={568.08} prefix="¥" /> |
|
||||
</div> |
|
||||
); |
|
||||
const description = ( |
|
||||
<RouteContext.Consumer> |
|
||||
{({ isMobile }) => ( |
|
||||
<Descriptions |
|
||||
className={styles.headerList} |
|
||||
size="small" |
|
||||
column={isMobile ? 1 : 2} |
|
||||
> |
|
||||
<Descriptions.Item label="创建人">曲丽丽</Descriptions.Item> |
|
||||
<Descriptions.Item label="订购产品">XX 服务</Descriptions.Item> |
|
||||
<Descriptions.Item label="创建时间">2017-07-07</Descriptions.Item> |
|
||||
<Descriptions.Item label="关联单据"> |
|
||||
<a href="">12421</a> |
|
||||
</Descriptions.Item> |
|
||||
<Descriptions.Item label="生效日期"> |
|
||||
2017-07-07 ~ 2017-08-08 |
|
||||
</Descriptions.Item> |
|
||||
<Descriptions.Item label="备注"> |
|
||||
请于两个工作日内确认 |
|
||||
</Descriptions.Item> |
|
||||
</Descriptions> |
|
||||
)} |
|
||||
</RouteContext.Consumer> |
|
||||
); |
|
||||
const desc1 = ( |
|
||||
<div className={classNames(styles.stepDescription)}> |
|
||||
曲丽丽 |
|
||||
<DingdingOutlined |
|
||||
style={{ |
|
||||
marginLeft: 8, |
|
||||
}} |
|
||||
/> |
|
||||
<div>2016-12-12 12:32</div> |
|
||||
</div> |
|
||||
); |
|
||||
const desc2 = ( |
|
||||
<div className={styles.stepDescription}> |
|
||||
周毛毛 |
|
||||
<DingdingOutlined |
|
||||
style={{ |
|
||||
color: '#00A0E9', |
|
||||
marginLeft: 8, |
|
||||
}} |
|
||||
/> |
|
||||
<div> |
|
||||
<a href="">催一下</a> |
|
||||
</div> |
|
||||
</div> |
|
||||
); |
|
||||
|
|
||||
const [tabStatus, seTabStatus] = useState<AdvancedState>({ |
|
||||
operationKey: 'tab1', |
|
||||
tabActiveKey: 'detail', |
|
||||
}); |
|
||||
|
|
||||
const customDot = ( |
|
||||
dot: React.ReactNode, |
|
||||
{ |
|
||||
status, |
|
||||
}: { |
|
||||
status: string; |
|
||||
}, |
|
||||
) => { |
|
||||
const popoverContent = ( |
|
||||
<div |
|
||||
style={{ |
|
||||
width: 160, |
|
||||
}} |
|
||||
> |
|
||||
吴加号 |
|
||||
<span |
|
||||
style={{ |
|
||||
float: 'right', |
|
||||
}} |
|
||||
> |
|
||||
<Badge |
|
||||
status="default" |
|
||||
text={ |
|
||||
<span |
|
||||
style={{ |
|
||||
color: 'rgba(0, 0, 0, 0.45)', |
|
||||
}} |
|
||||
> |
|
||||
未响应 |
|
||||
</span> |
|
||||
} |
|
||||
/> |
|
||||
</span> |
|
||||
<div |
|
||||
style={{ |
|
||||
marginTop: 4, |
|
||||
}} |
|
||||
> |
|
||||
耗时：2小时25分钟 |
|
||||
</div> |
|
||||
</div> |
|
||||
); |
|
||||
if (status === 'process') { |
|
||||
return ( |
|
||||
<Popover |
|
||||
placement="topLeft" |
|
||||
arrow={{ |
|
||||
pointAtCenter: true, |
|
||||
}} |
|
||||
content={popoverContent} |
|
||||
> |
|
||||
<span>{dot}</span> |
|
||||
</Popover> |
|
||||
); |
|
||||
} |
|
||||
return dot; |
|
||||
}; |
|
||||
|
|
||||
const { data = {}, loading } = useRequest<{ |
|
||||
data: AdvancedProfileData; |
|
||||
}>(queryAdvancedProfile); |
|
||||
const { advancedOperation1, advancedOperation2, advancedOperation3 } = data; |
|
||||
const contentList = { |
|
||||
tab1: ( |
|
||||
<Table |
|
||||
pagination={false} |
|
||||
loading={loading} |
|
||||
dataSource={advancedOperation1} |
|
||||
columns={columns} |
|
||||
/> |
|
||||
), |
|
||||
tab2: ( |
|
||||
<Table |
|
||||
pagination={false} |
|
||||
loading={loading} |
|
||||
dataSource={advancedOperation2} |
|
||||
columns={columns} |
|
||||
/> |
|
||||
), |
|
||||
tab3: ( |
|
||||
<Table |
|
||||
pagination={false} |
|
||||
loading={loading} |
|
||||
dataSource={advancedOperation3} |
|
||||
columns={columns} |
|
||||
/> |
|
||||
), |
|
||||
}; |
|
||||
const onTabChange = (tabActiveKey: string) => { |
|
||||
seTabStatus({ |
|
||||
...tabStatus, |
|
||||
tabActiveKey, |
|
||||
}); |
|
||||
}; |
|
||||
const onOperationTabChange = (key: string) => { |
|
||||
seTabStatus({ |
|
||||
...tabStatus, |
|
||||
operationKey: key as 'tab1', |
|
||||
}); |
|
||||
}; |
|
||||
return ( |
|
||||
<PageContainer |
|
||||
title="单号：234231029431" |
|
||||
extra={action} |
|
||||
className={styles.pageHeader} |
|
||||
content={description} |
|
||||
extraContent={extra} |
|
||||
tabActiveKey={tabStatus.tabActiveKey} |
|
||||
onTabChange={onTabChange} |
|
||||
tabList={[ |
|
||||
{ |
|
||||
key: 'detail', |
|
||||
tab: '详情', |
|
||||
}, |
|
||||
{ |
|
||||
key: 'rule', |
|
||||
tab: '规则', |
|
||||
}, |
|
||||
]} |
|
||||
> |
|
||||
<div className={styles.main}> |
|
||||
<GridContent> |
|
||||
<Card |
|
||||
title="流程进度" |
|
||||
style={{ |
|
||||
marginBottom: 24, |
|
||||
}} |
|
||||
> |
|
||||
<RouteContext.Consumer> |
|
||||
{({ isMobile }) => ( |
|
||||
<Steps |
|
||||
direction={isMobile ? 'vertical' : 'horizontal'} |
|
||||
progressDot={customDot} |
|
||||
current={1} |
|
||||
> |
|
||||
<Step title="创建项目" description={desc1} /> |
|
||||
<Step title="部门初审" description={desc2} /> |
|
||||
<Step title="财务复核" /> |
|
||||
<Step title="完成" /> |
|
||||
</Steps> |
|
||||
)} |
|
||||
</RouteContext.Consumer> |
|
||||
</Card> |
|
||||
<Card |
|
||||
title="用户信息" |
|
||||
style={{ |
|
||||
marginBottom: 24, |
|
||||
}} |
|
||||
variant="borderless" |
|
||||
> |
|
||||
<Descriptions |
|
||||
style={{ |
|
||||
marginBottom: 24, |
|
||||
}} |
|
||||
> |
|
||||
<Descriptions.Item label="用户姓名">付小小</Descriptions.Item> |
|
||||
<Descriptions.Item label="会员卡号"> |
|
||||
32943898021309809423 |
|
||||
</Descriptions.Item> |
|
||||
<Descriptions.Item label="身份证"> |
|
||||
3321944288191034921 |
|
||||
</Descriptions.Item> |
|
||||
<Descriptions.Item label="联系方式"> |
|
||||
18112345678 |
|
||||
</Descriptions.Item> |
|
||||
<Descriptions.Item label="联系地址"> |
|
||||
曲丽丽 18100000000 浙江省杭州市西湖区黄姑山路工专路交叉路口 |
|
||||
</Descriptions.Item> |
|
||||
</Descriptions> |
|
||||
<Descriptions |
|
||||
style={{ |
|
||||
marginBottom: 24, |
|
||||
}} |
|
||||
title="信息组" |
|
||||
> |
|
||||
<Descriptions.Item label="某某数据">725</Descriptions.Item> |
|
||||
<Descriptions.Item label="该数据更新时间"> |
|
||||
2017-08-08 |
|
||||
</Descriptions.Item> |
|
||||
<Descriptions.Item |
|
||||
label={ |
|
||||
<span> |
|
||||
某某数据 |
|
||||
<Tooltip title="数据说明"> |
|
||||
<InfoCircleOutlined |
|
||||
style={{ |
|
||||
color: 'rgba(0, 0, 0, 0.43)', |
|
||||
marginLeft: 4, |
|
||||
}} |
|
||||
/> |
|
||||
</Tooltip> |
|
||||
</span> |
|
||||
} |
|
||||
> |
|
||||
725 |
|
||||
</Descriptions.Item> |
|
||||
<Descriptions.Item label="该数据更新时间"> |
|
||||
2017-08-08 |
|
||||
</Descriptions.Item> |
|
||||
</Descriptions> |
|
||||
<h4 |
|
||||
style={{ |
|
||||
marginBottom: 16, |
|
||||
}} |
|
||||
> |
|
||||
信息组 |
|
||||
</h4> |
|
||||
<Card type="inner" title="多层级信息组"> |
|
||||
<Descriptions |
|
||||
style={{ |
|
||||
marginBottom: 16, |
|
||||
}} |
|
||||
title="组名称" |
|
||||
> |
|
||||
<Descriptions.Item label="负责人">林东东</Descriptions.Item> |
|
||||
<Descriptions.Item label="角色码">1234567</Descriptions.Item> |
|
||||
<Descriptions.Item label="所属部门"> |
|
||||
XX公司 - YY部 |
|
||||
</Descriptions.Item> |
|
||||
<Descriptions.Item label="过期时间"> |
|
||||
2017-08-08 |
|
||||
</Descriptions.Item> |
|
||||
<Descriptions.Item label="描述"> |
|
||||
这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长... |
|
||||
</Descriptions.Item> |
|
||||
</Descriptions> |
|
||||
<Divider |
|
||||
style={{ |
|
||||
margin: '16px 0', |
|
||||
}} |
|
||||
/> |
|
||||
<Descriptions |
|
||||
style={{ |
|
||||
marginBottom: 16, |
|
||||
}} |
|
||||
title="组名称" |
|
||||
column={1} |
|
||||
> |
|
||||
<Descriptions.Item label="学名"> |
|
||||
Citrullus lanatus (Thunb.) Matsum. et |
|
||||
Nakai一年生蔓生藤本；茎、枝粗壮，具明显的棱。卷须较粗.. |
|
||||
</Descriptions.Item> |
|
||||
</Descriptions> |
|
||||
<Divider |
|
||||
style={{ |
|
||||
margin: '16px 0', |
|
||||
}} |
|
||||
/> |
|
||||
<Descriptions title="组名称"> |
|
||||
<Descriptions.Item label="负责人">付小小</Descriptions.Item> |
|
||||
<Descriptions.Item label="角色码">1234568</Descriptions.Item> |
|
||||
</Descriptions> |
|
||||
</Card> |
|
||||
</Card> |
|
||||
<Card |
|
||||
title="用户近半年来电记录" |
|
||||
style={{ |
|
||||
marginBottom: 24, |
|
||||
}} |
|
||||
variant="borderless" |
|
||||
> |
|
||||
<Empty /> |
|
||||
</Card> |
|
||||
<Card |
|
||||
variant="borderless" |
|
||||
tabList={operationTabList} |
|
||||
onTabChange={onOperationTabChange} |
|
||||
> |
|
||||
{contentList[tabStatus.operationKey] as React.ReactNode} |
|
||||
</Card> |
|
||||
</GridContent> |
|
||||
</div> |
|
||||
</PageContainer> |
|
||||
); |
|
||||
}; |
|
||||
export default Advanced; |
|
||||
@ -1,236 +0,0 @@ |
|||||
import type { ProColumns } from '@ant-design/pro-components'; |
|
||||
import { PageContainer, ProTable } from '@ant-design/pro-components'; |
|
||||
import { useRequest } from '@umijs/max'; |
|
||||
import { Badge, Card, Descriptions, Divider } from 'antd'; |
|
||||
import type { FC } from 'react'; |
|
||||
import React from 'react'; |
|
||||
import type { BasicGood, BasicProgress } from './data.d'; |
|
||||
import { queryBasicProfile } from './service'; |
|
||||
import useStyles from './style.style'; |
|
||||
|
|
||||
const progressColumns: ProColumns<BasicProgress>[] = [ |
|
||||
{ |
|
||||
title: '时间', |
|
||||
dataIndex: 'time', |
|
||||
key: 'time', |
|
||||
}, |
|
||||
{ |
|
||||
title: '当前进度', |
|
||||
dataIndex: 'rate', |
|
||||
key: 'rate', |
|
||||
}, |
|
||||
{ |
|
||||
title: '状态', |
|
||||
dataIndex: 'status', |
|
||||
key: 'status', |
|
||||
render: (text: React.ReactNode) => { |
|
||||
if (text === 'success') { |
|
||||
return <Badge status="success" text="成功" />; |
|
||||
} |
|
||||
return <Badge status="processing" text="进行中" />; |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
title: '操作员ID', |
|
||||
dataIndex: 'operator', |
|
||||
key: 'operator', |
|
||||
}, |
|
||||
{ |
|
||||
title: '耗时', |
|
||||
dataIndex: 'cost', |
|
||||
key: 'cost', |
|
||||
}, |
|
||||
]; |
|
||||
const Basic: FC = () => { |
|
||||
const { styles } = useStyles(); |
|
||||
const { data, loading } = useRequest(() => { |
|
||||
return queryBasicProfile(); |
|
||||
}); |
|
||||
const { basicGoods, basicProgress } = data || { |
|
||||
basicGoods: [], |
|
||||
basicProgress: [], |
|
||||
}; |
|
||||
let goodsData: typeof basicGoods = []; |
|
||||
if (basicGoods.length) { |
|
||||
let num = 0; |
|
||||
let amount = 0; |
|
||||
basicGoods.forEach((item) => { |
|
||||
num += Number(item.num); |
|
||||
amount += Number(item.amount); |
|
||||
}); |
|
||||
goodsData = basicGoods.concat({ |
|
||||
id: '总计', |
|
||||
num, |
|
||||
amount, |
|
||||
}); |
|
||||
} |
|
||||
const renderContent = (value: any, _: any, index: any) => { |
|
||||
const obj: { |
|
||||
children: any; |
|
||||
props: { |
|
||||
colSpan?: number; |
|
||||
}; |
|
||||
} = { |
|
||||
children: value, |
|
||||
props: {}, |
|
||||
}; |
|
||||
if (index === basicGoods.length) { |
|
||||
obj.props.colSpan = 0; |
|
||||
} |
|
||||
return obj; |
|
||||
}; |
|
||||
const goodsColumns: ProColumns<BasicGood>[] = [ |
|
||||
{ |
|
||||
title: '商品编号', |
|
||||
dataIndex: 'id', |
|
||||
key: 'id', |
|
||||
render: (text: React.ReactNode, _: any, index: number) => { |
|
||||
if (index < basicGoods.length) { |
|
||||
return <span>{text}</span>; |
|
||||
} |
|
||||
return { |
|
||||
children: ( |
|
||||
<span |
|
||||
style={{ |
|
||||
fontWeight: 600, |
|
||||
}} |
|
||||
> |
|
||||
总计 |
|
||||
</span> |
|
||||
), |
|
||||
props: { |
|
||||
colSpan: 4, |
|
||||
}, |
|
||||
}; |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
title: '商品名称', |
|
||||
dataIndex: 'name', |
|
||||
key: 'name', |
|
||||
render: renderContent, |
|
||||
}, |
|
||||
{ |
|
||||
title: '商品条码', |
|
||||
dataIndex: 'barcode', |
|
||||
key: 'barcode', |
|
||||
render: renderContent, |
|
||||
}, |
|
||||
{ |
|
||||
title: '单价', |
|
||||
dataIndex: 'price', |
|
||||
key: 'price', |
|
||||
align: 'right' as 'left' | 'right' | 'center', |
|
||||
render: renderContent, |
|
||||
}, |
|
||||
{ |
|
||||
title: '数量（件）', |
|
||||
dataIndex: 'num', |
|
||||
key: 'num', |
|
||||
align: 'right' as 'left' | 'right' | 'center', |
|
||||
render: (text: React.ReactNode, _: any, index: number) => { |
|
||||
if (index < basicGoods.length) { |
|
||||
return text; |
|
||||
} |
|
||||
return ( |
|
||||
<span |
|
||||
style={{ |
|
||||
fontWeight: 600, |
|
||||
}} |
|
||||
> |
|
||||
{text} |
|
||||
</span> |
|
||||
); |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
title: '金额', |
|
||||
dataIndex: 'amount', |
|
||||
key: 'amount', |
|
||||
align: 'right' as 'left' | 'right' | 'center', |
|
||||
render: (text: React.ReactNode, _: any, index: number) => { |
|
||||
if (index < basicGoods.length) { |
|
||||
return text; |
|
||||
} |
|
||||
return ( |
|
||||
<span |
|
||||
style={{ |
|
||||
fontWeight: 600, |
|
||||
}} |
|
||||
> |
|
||||
{text} |
|
||||
</span> |
|
||||
); |
|
||||
}, |
|
||||
}, |
|
||||
]; |
|
||||
return ( |
|
||||
<PageContainer> |
|
||||
<Card variant="borderless"> |
|
||||
<Descriptions |
|
||||
title="退款申请" |
|
||||
style={{ |
|
||||
marginBottom: 32, |
|
||||
}} |
|
||||
> |
|
||||
<Descriptions.Item label="取货单号">1000000000</Descriptions.Item> |
|
||||
<Descriptions.Item label="状态">已取货</Descriptions.Item> |
|
||||
<Descriptions.Item label="销售单号">1234123421</Descriptions.Item> |
|
||||
<Descriptions.Item label="子订单">3214321432</Descriptions.Item> |
|
||||
</Descriptions> |
|
||||
<Divider |
|
||||
style={{ |
|
||||
marginBottom: 32, |
|
||||
}} |
|
||||
/> |
|
||||
<Descriptions |
|
||||
title="用户信息" |
|
||||
style={{ |
|
||||
marginBottom: 32, |
|
||||
}} |
|
||||
> |
|
||||
<Descriptions.Item label="用户姓名">付小小</Descriptions.Item> |
|
||||
<Descriptions.Item label="联系电话">18100000000</Descriptions.Item> |
|
||||
<Descriptions.Item label="常用快递">菜鸟仓储</Descriptions.Item> |
|
||||
<Descriptions.Item label="取货地址"> |
|
||||
浙江省杭州市西湖区万塘路18号 |
|
||||
</Descriptions.Item> |
|
||||
<Descriptions.Item label="备注">无</Descriptions.Item> |
|
||||
</Descriptions> |
|
||||
<Divider |
|
||||
style={{ |
|
||||
marginBottom: 32, |
|
||||
}} |
|
||||
/> |
|
||||
<div className={styles.title}>退货商品</div> |
|
||||
<ProTable |
|
||||
style={{ |
|
||||
marginBottom: 24, |
|
||||
}} |
|
||||
pagination={false} |
|
||||
search={false} |
|
||||
loading={loading} |
|
||||
options={false} |
|
||||
toolBarRender={false} |
|
||||
dataSource={goodsData} |
|
||||
columns={goodsColumns} |
|
||||
rowKey="id" |
|
||||
/> |
|
||||
<div className={styles.title}>退货进度</div> |
|
||||
<ProTable |
|
||||
style={{ |
|
||||
marginBottom: 16, |
|
||||
}} |
|
||||
pagination={false} |
|
||||
loading={loading} |
|
||||
search={false} |
|
||||
options={false} |
|
||||
toolBarRender={false} |
|
||||
dataSource={basicProgress} |
|
||||
columns={progressColumns} |
|
||||
/> |
|
||||
</Card> |
|
||||
</PageContainer> |
|
||||
); |
|
||||
}; |
|
||||
export default Basic; |
|
||||
@ -1,75 +0,0 @@ |
|||||
import { CloseCircleOutlined, RightOutlined } from '@ant-design/icons'; |
|
||||
import { GridContent } from '@ant-design/pro-components'; |
|
||||
import { Button, Card, Result } from 'antd'; |
|
||||
import useStyles from './index.style'; |
|
||||
|
|
||||
export default () => { |
|
||||
const { styles } = useStyles(); |
|
||||
const Content = ( |
|
||||
<> |
|
||||
<div className={styles.title}> |
|
||||
<span>您提交的内容有如下错误：</span> |
|
||||
</div> |
|
||||
<div |
|
||||
style={{ |
|
||||
marginBottom: 16, |
|
||||
}} |
|
||||
> |
|
||||
<CloseCircleOutlined |
|
||||
style={{ |
|
||||
marginRight: 8, |
|
||||
}} |
|
||||
className={styles.error_icon} |
|
||||
/> |
|
||||
<span>您的账户已被冻结</span> |
|
||||
<a |
|
||||
style={{ |
|
||||
marginLeft: 16, |
|
||||
}} |
|
||||
> |
|
||||
<span>立即解冻</span> |
|
||||
<RightOutlined /> |
|
||||
</a> |
|
||||
</div> |
|
||||
<div> |
|
||||
<CloseCircleOutlined |
|
||||
style={{ |
|
||||
marginRight: 8, |
|
||||
}} |
|
||||
className={styles.error_icon} |
|
||||
/> |
|
||||
<span>您的账户还不具备申请资格</span> |
|
||||
<a |
|
||||
style={{ |
|
||||
marginLeft: 16, |
|
||||
}} |
|
||||
> |
|
||||
<span>立即升级</span> |
|
||||
<RightOutlined /> |
|
||||
</a> |
|
||||
</div> |
|
||||
</> |
|
||||
); |
|
||||
return ( |
|
||||
<GridContent> |
|
||||
<Card variant="borderless"> |
|
||||
<Result |
|
||||
status="error" |
|
||||
title="提交失败" |
|
||||
subTitle="请核对并修改以下信息后，再重新提交。" |
|
||||
extra={ |
|
||||
<Button type="primary"> |
|
||||
<span>返回修改</span> |
|
||||
</Button> |
|
||||
} |
|
||||
style={{ |
|
||||
marginTop: 48, |
|
||||
marginBottom: 16, |
|
||||
}} |
|
||||
> |
|
||||
{Content} |
|
||||
</Result> |
|
||||
</Card> |
|
||||
</GridContent> |
|
||||
); |
|
||||
}; |
|
||||
@ -1,137 +0,0 @@ |
|||||
import { DingdingOutlined } from '@ant-design/icons'; |
|
||||
import { GridContent } from '@ant-design/pro-components'; |
|
||||
import { Button, Card, Descriptions, Result, Steps } from 'antd'; |
|
||||
import useStyles from './index.style'; |
|
||||
|
|
||||
const { Step } = Steps; |
|
||||
|
|
||||
export default () => { |
|
||||
const { styles } = useStyles(); |
|
||||
const desc1 = ( |
|
||||
<div className={styles.title}> |
|
||||
<div |
|
||||
style={{ |
|
||||
margin: '8px 0 4px', |
|
||||
}} |
|
||||
> |
|
||||
<span>曲丽丽</span> |
|
||||
<DingdingOutlined |
|
||||
style={{ |
|
||||
marginLeft: 8, |
|
||||
color: '#00A0E9', |
|
||||
}} |
|
||||
/> |
|
||||
</div> |
|
||||
<div>2016-12-12 12:32</div> |
|
||||
</div> |
|
||||
); |
|
||||
const desc2 = ( |
|
||||
<div |
|
||||
style={{ |
|
||||
fontSize: 12, |
|
||||
}} |
|
||||
className={styles.title} |
|
||||
> |
|
||||
<div |
|
||||
style={{ |
|
||||
margin: '8px 0 4px', |
|
||||
}} |
|
||||
> |
|
||||
<span>周毛毛</span> |
|
||||
<a href=""> |
|
||||
<DingdingOutlined |
|
||||
style={{ |
|
||||
color: '#00A0E9', |
|
||||
marginLeft: 8, |
|
||||
}} |
|
||||
/> |
|
||||
<span>催一下</span> |
|
||||
</a> |
|
||||
</div> |
|
||||
</div> |
|
||||
); |
|
||||
const content = ( |
|
||||
<> |
|
||||
<Descriptions title="项目名称"> |
|
||||
<Descriptions.Item label="项目 ID">23421</Descriptions.Item> |
|
||||
<Descriptions.Item label="负责人">曲丽丽</Descriptions.Item> |
|
||||
<Descriptions.Item label="生效时间"> |
|
||||
2016-12-12 ~ 2017-12-12 |
|
||||
</Descriptions.Item> |
|
||||
</Descriptions> |
|
||||
<br /> |
|
||||
<Steps progressDot current={1}> |
|
||||
<Step |
|
||||
title={ |
|
||||
<span |
|
||||
style={{ |
|
||||
fontSize: 14, |
|
||||
}} |
|
||||
> |
|
||||
创建项目 |
|
||||
</span> |
|
||||
} |
|
||||
description={desc1} |
|
||||
/> |
|
||||
<Step |
|
||||
title={ |
|
||||
<span |
|
||||
style={{ |
|
||||
fontSize: 14, |
|
||||
}} |
|
||||
> |
|
||||
部门初审 |
|
||||
</span> |
|
||||
} |
|
||||
description={desc2} |
|
||||
/> |
|
||||
<Step |
|
||||
title={ |
|
||||
<span |
|
||||
style={{ |
|
||||
fontSize: 14, |
|
||||
}} |
|
||||
> |
|
||||
财务复核 |
|
||||
</span> |
|
||||
} |
|
||||
/> |
|
||||
<Step |
|
||||
title={ |
|
||||
<span |
|
||||
style={{ |
|
||||
fontSize: 14, |
|
||||
}} |
|
||||
> |
|
||||
完成 |
|
||||
</span> |
|
||||
} |
|
||||
/> |
|
||||
</Steps> |
|
||||
</> |
|
||||
); |
|
||||
const extra = ( |
|
||||
<> |
|
||||
<Button type="primary">返回列表</Button> |
|
||||
<Button>查看项目</Button> |
|
||||
<Button>打印</Button> |
|
||||
</> |
|
||||
); |
|
||||
return ( |
|
||||
<GridContent> |
|
||||
<Card variant="borderless"> |
|
||||
<Result |
|
||||
status="success" |
|
||||
title="提交成功" |
|
||||
subTitle="提交结果页用于反馈一系列操作任务的处理结果， 如果仅是简单操作，使用 Message 全局提示反馈即可。 本文字区域可以展示简单的补充说明，如果有类似展示 “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。" |
|
||||
extra={extra} |
|
||||
style={{ |
|
||||
marginBottom: 16, |
|
||||
}} |
|
||||
> |
|
||||
{content} |
|
||||
</Result> |
|
||||
</Card> |
|
||||
</GridContent> |
|
||||
); |
|
||||
}; |
|
||||
@ -1,309 +0,0 @@ |
|||||
import { history, Link, useRequest } from '@umijs/max'; |
|
||||
import { |
|
||||
Button, |
|
||||
Col, |
|
||||
Form, |
|
||||
Input, |
|
||||
message, |
|
||||
Popover, |
|
||||
Progress, |
|
||||
Row, |
|
||||
Select, |
|
||||
Space, |
|
||||
} from 'antd'; |
|
||||
import type { Store } from 'antd/es/form/interface'; |
|
||||
import type { FC } from 'react'; |
|
||||
import { useEffect, useState } from 'react'; |
|
||||
import type { StateType } from './service'; |
|
||||
import { fakeRegister } from './service'; |
|
||||
import useStyles from './styles'; |
|
||||
|
|
||||
const FormItem = Form.Item; |
|
||||
const { Option } = Select; |
|
||||
|
|
||||
const passwordProgressMap: { |
|
||||
ok: 'success'; |
|
||||
pass: 'normal'; |
|
||||
poor: 'exception'; |
|
||||
} = { |
|
||||
ok: 'success', |
|
||||
pass: 'normal', |
|
||||
poor: 'exception', |
|
||||
}; |
|
||||
const Register: FC = () => { |
|
||||
const { styles } = useStyles(); |
|
||||
const [count, setCount]: [number, any] = useState(0); |
|
||||
const [open, setVisible]: [boolean, any] = useState(false); |
|
||||
const [prefix, setPrefix]: [string, any] = useState('86'); |
|
||||
const [popover, setPopover]: [boolean, any] = useState(false); |
|
||||
const confirmDirty = false; |
|
||||
let interval: number | undefined; |
|
||||
|
|
||||
const passwordStatusMap = { |
|
||||
ok: ( |
|
||||
<div className={styles.success}> |
|
||||
<span>强度：强</span> |
|
||||
</div> |
|
||||
), |
|
||||
pass: ( |
|
||||
<div className={styles.warning}> |
|
||||
<span>强度：中</span> |
|
||||
</div> |
|
||||
), |
|
||||
poor: ( |
|
||||
<div className={styles.error}> |
|
||||
<span>强度：太短</span> |
|
||||
</div> |
|
||||
), |
|
||||
}; |
|
||||
|
|
||||
const [form] = Form.useForm(); |
|
||||
useEffect( |
|
||||
() => () => { |
|
||||
clearInterval(interval); |
|
||||
}, |
|
||||
[interval], |
|
||||
); |
|
||||
const onGetCaptcha = () => { |
|
||||
let counts = 59; |
|
||||
setCount(counts); |
|
||||
interval = window.setInterval(() => { |
|
||||
counts -= 1; |
|
||||
setCount(counts); |
|
||||
if (counts === 0) { |
|
||||
clearInterval(interval); |
|
||||
} |
|
||||
}, 1000); |
|
||||
}; |
|
||||
const getPasswordStatus = () => { |
|
||||
const value = form.getFieldValue('password'); |
|
||||
if (value && value.length > 9) { |
|
||||
return 'ok'; |
|
||||
} |
|
||||
if (value && value.length > 5) { |
|
||||
return 'pass'; |
|
||||
} |
|
||||
return 'poor'; |
|
||||
}; |
|
||||
const { loading: submitting, run: register } = useRequest<{ |
|
||||
data: StateType; |
|
||||
}>(fakeRegister, { |
|
||||
manual: true, |
|
||||
onSuccess: (data, params) => { |
|
||||
if (data.status === 'ok') { |
|
||||
message.success('注册成功！'); |
|
||||
history.push({ |
|
||||
pathname: `/user/register-result?account=${params[0].email}`, |
|
||||
}); |
|
||||
} |
|
||||
}, |
|
||||
}); |
|
||||
const onFinish = (values: Store) => { |
|
||||
register(values); |
|
||||
}; |
|
||||
const checkConfirm = (_: any, value: string) => { |
|
||||
const promise = Promise; |
|
||||
if (value && value !== form.getFieldValue('password')) { |
|
||||
return promise.reject('两次输入的密码不匹配!'); |
|
||||
} |
|
||||
return promise.resolve(); |
|
||||
}; |
|
||||
const checkPassword = (_: any, value: string) => { |
|
||||
const promise = Promise; |
|
||||
// 没有值的情况
|
|
||||
if (!value) { |
|
||||
setVisible(!!value); |
|
||||
return promise.reject('请输入密码!'); |
|
||||
} |
|
||||
// 有值的情况
|
|
||||
if (!open) { |
|
||||
setVisible(!!value); |
|
||||
} |
|
||||
setPopover(!popover); |
|
||||
if (value.length < 6) { |
|
||||
return promise.reject(''); |
|
||||
} |
|
||||
if (value && confirmDirty) { |
|
||||
form.validateFields(['confirm']); |
|
||||
} |
|
||||
return promise.resolve(); |
|
||||
}; |
|
||||
const changePrefix = (value: string) => { |
|
||||
setPrefix(value); |
|
||||
}; |
|
||||
const renderPasswordProgress = () => { |
|
||||
const value = form.getFieldValue('password'); |
|
||||
const passwordStatus = getPasswordStatus(); |
|
||||
return value?.length ? ( |
|
||||
<div |
|
||||
className={styles[`progress-${passwordStatus}` as keyof typeof styles]} |
|
||||
> |
|
||||
<Progress |
|
||||
status={passwordProgressMap[passwordStatus]} |
|
||||
size={6} |
|
||||
percent={value.length * 10 > 100 ? 100 : value.length * 10} |
|
||||
showInfo={false} |
|
||||
/> |
|
||||
</div> |
|
||||
) : null; |
|
||||
}; |
|
||||
return ( |
|
||||
<div className={styles.main}> |
|
||||
<h3>注册</h3> |
|
||||
<Form form={form} name="UserRegister" onFinish={onFinish}> |
|
||||
<FormItem |
|
||||
name="email" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请输入邮箱地址!', |
|
||||
}, |
|
||||
{ |
|
||||
type: 'email', |
|
||||
message: '邮箱地址格式错误!', |
|
||||
}, |
|
||||
]} |
|
||||
> |
|
||||
<Input size="large" placeholder="邮箱" /> |
|
||||
</FormItem> |
|
||||
<Popover |
|
||||
getPopupContainer={(node) => { |
|
||||
if (node?.parentNode) { |
|
||||
return node.parentNode as HTMLElement; |
|
||||
} |
|
||||
return node; |
|
||||
}} |
|
||||
content={ |
|
||||
open && ( |
|
||||
<div |
|
||||
style={{ |
|
||||
padding: '4px 0', |
|
||||
}} |
|
||||
> |
|
||||
{passwordStatusMap[getPasswordStatus()]} |
|
||||
{renderPasswordProgress()} |
|
||||
<div |
|
||||
style={{ |
|
||||
marginTop: 10, |
|
||||
}} |
|
||||
> |
|
||||
<span>请至少输入 6 个字符。请不要使用容易被猜到的密码。</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
) |
|
||||
} |
|
||||
overlayStyle={{ |
|
||||
width: 240, |
|
||||
}} |
|
||||
placement="right" |
|
||||
open={open} |
|
||||
> |
|
||||
<FormItem |
|
||||
name="password" |
|
||||
className={ |
|
||||
form.getFieldValue('password') && |
|
||||
form.getFieldValue('password').length > 0 && |
|
||||
styles.password |
|
||||
} |
|
||||
rules={[ |
|
||||
{ |
|
||||
validator: checkPassword, |
|
||||
}, |
|
||||
]} |
|
||||
> |
|
||||
<Input |
|
||||
size="large" |
|
||||
type="password" |
|
||||
placeholder="至少6位密码，区分大小写" |
|
||||
/> |
|
||||
</FormItem> |
|
||||
</Popover> |
|
||||
<FormItem |
|
||||
name="confirm" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '确认密码', |
|
||||
}, |
|
||||
{ |
|
||||
validator: checkConfirm, |
|
||||
}, |
|
||||
]} |
|
||||
> |
|
||||
<Input size="large" type="password" placeholder="确认密码" /> |
|
||||
</FormItem> |
|
||||
<FormItem |
|
||||
name="mobile" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请输入手机号!', |
|
||||
}, |
|
||||
{ |
|
||||
pattern: /^\d{11}$/, |
|
||||
message: '手机号格式错误!', |
|
||||
}, |
|
||||
]} |
|
||||
> |
|
||||
<Space.Compact style={{ width: '100%' }}> |
|
||||
<Select |
|
||||
size="large" |
|
||||
value={prefix} |
|
||||
onChange={changePrefix} |
|
||||
style={{ |
|
||||
width: '30%', |
|
||||
}} |
|
||||
> |
|
||||
<Option value="86">+86</Option> |
|
||||
<Option value="87">+87</Option> |
|
||||
</Select> |
|
||||
|
|
||||
<Input size="large" placeholder="手机号" /> |
|
||||
</Space.Compact> |
|
||||
</FormItem> |
|
||||
<Row gutter={8}> |
|
||||
<Col span={16}> |
|
||||
<FormItem |
|
||||
name="captcha" |
|
||||
rules={[ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请输入验证码!', |
|
||||
}, |
|
||||
]} |
|
||||
> |
|
||||
<Input size="large" placeholder="验证码" /> |
|
||||
</FormItem> |
|
||||
</Col> |
|
||||
<Col span={8}> |
|
||||
<Button |
|
||||
size="large" |
|
||||
disabled={!!count} |
|
||||
className={styles.getCaptcha} |
|
||||
onClick={onGetCaptcha} |
|
||||
> |
|
||||
{count ? `${count} s` : '获取验证码'} |
|
||||
</Button> |
|
||||
</Col> |
|
||||
</Row> |
|
||||
<FormItem> |
|
||||
<div className={styles.footer}> |
|
||||
<Button |
|
||||
size="large" |
|
||||
loading={submitting} |
|
||||
className={styles.submit} |
|
||||
type="primary" |
|
||||
htmlType="submit" |
|
||||
> |
|
||||
<span>注册</span> |
|
||||
</Button> |
|
||||
<Link to="/user/login"> |
|
||||
<span>使用已有账户登录</span> |
|
||||
</Link> |
|
||||
</div> |
|
||||
</FormItem> |
|
||||
</Form> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
export default Register; |
|
||||
Loading…
Reference in new issue