|
|
|
@ -3,7 +3,7 @@ import { |
|
|
|
DownOutlined, |
|
|
|
EllipsisOutlined, |
|
|
|
InfoCircleOutlined, |
|
|
|
} from "@ant-design/icons"; |
|
|
|
} from '@ant-design/icons'; |
|
|
|
import { |
|
|
|
Badge, |
|
|
|
Button, |
|
|
|
@ -18,19 +18,15 @@ import { |
|
|
|
Table, |
|
|
|
Tooltip, |
|
|
|
Empty, |
|
|
|
} from "antd"; |
|
|
|
import { |
|
|
|
GridContent, |
|
|
|
PageContainer, |
|
|
|
RouteContext, |
|
|
|
} from "@ant-design/pro-components"; |
|
|
|
import type { FC } from "react"; |
|
|
|
import React, { Fragment, useState } from "react"; |
|
|
|
import classNames from "classnames"; |
|
|
|
import { useRequest } from "@umijs/max"; |
|
|
|
import type { AdvancedProfileData } from "./data.d"; |
|
|
|
import { queryAdvancedProfile } from "./service"; |
|
|
|
import useStyles from "./style.style"; |
|
|
|
} from 'antd'; |
|
|
|
import { GridContent, PageContainer, RouteContext } from '@ant-design/pro-components'; |
|
|
|
import type { FC } from 'react'; |
|
|
|
import React, { Fragment, useState } from 'react'; |
|
|
|
import classNames from 'classnames'; |
|
|
|
import { useRequest } from '@umijs/max'; |
|
|
|
import type { AdvancedProfileData } from './data.d'; |
|
|
|
import { queryAdvancedProfile } from './service'; |
|
|
|
import useStyles from './style.style'; |
|
|
|
const { Step } = Steps; |
|
|
|
const ButtonGroup = Button.Group; |
|
|
|
const menu = ( |
|
|
|
@ -81,173 +77,172 @@ const action = ( |
|
|
|
}} |
|
|
|
</RouteContext.Consumer> |
|
|
|
); |
|
|
|
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.textSecondary, styles.stepDescription)}> |
|
|
|
<Fragment> |
|
|
|
曲丽丽 |
|
|
|
<DingdingOutlined |
|
|
|
style={{ |
|
|
|
marginLeft: 8, |
|
|
|
}} |
|
|
|
/> |
|
|
|
</Fragment> |
|
|
|
<div>2016-12-12 12:32</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
const desc2 = ( |
|
|
|
<div className={styles.stepDescription}> |
|
|
|
<Fragment> |
|
|
|
周毛毛 |
|
|
|
<DingdingOutlined |
|
|
|
style={{ |
|
|
|
color: "#00A0E9", |
|
|
|
marginLeft: 8, |
|
|
|
}} |
|
|
|
/> |
|
|
|
</Fragment> |
|
|
|
<div> |
|
|
|
<a href="">催一下</a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
const popoverContent = ( |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
width: 160, |
|
|
|
}} |
|
|
|
> |
|
|
|
吴加号 |
|
|
|
<span |
|
|
|
className={styles.textSecondary} |
|
|
|
style={{ |
|
|
|
float: "right", |
|
|
|
}} |
|
|
|
> |
|
|
|
<Badge |
|
|
|
status="default" |
|
|
|
text={ |
|
|
|
<span |
|
|
|
style={{ |
|
|
|
color: "rgba(0, 0, 0, 0.45)", |
|
|
|
}} |
|
|
|
> |
|
|
|
未响应 |
|
|
|
</span> |
|
|
|
} |
|
|
|
/> |
|
|
|
</span> |
|
|
|
<div |
|
|
|
className={styles.textSecondary} |
|
|
|
style={{ |
|
|
|
marginTop: 4, |
|
|
|
}} |
|
|
|
> |
|
|
|
耗时：2小时25分钟 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
const customDot = ( |
|
|
|
dot: React.ReactNode, |
|
|
|
{ |
|
|
|
status, |
|
|
|
}: { |
|
|
|
status: string; |
|
|
|
} |
|
|
|
) => { |
|
|
|
if (status === "process") { |
|
|
|
return ( |
|
|
|
<Popover placement="topLeft" arrowPointAtCenter content={popoverContent}> |
|
|
|
<span>{dot}</span> |
|
|
|
</Popover> |
|
|
|
); |
|
|
|
} |
|
|
|
return dot; |
|
|
|
}; |
|
|
|
|
|
|
|
const operationTabList = [ |
|
|
|
{ |
|
|
|
key: "tab1", |
|
|
|
tab: "操作日志一", |
|
|
|
key: 'tab1', |
|
|
|
tab: '操作日志一', |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: "tab2", |
|
|
|
tab: "操作日志二", |
|
|
|
key: 'tab2', |
|
|
|
tab: '操作日志二', |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: "tab3", |
|
|
|
tab: "操作日志三", |
|
|
|
key: 'tab3', |
|
|
|
tab: '操作日志三', |
|
|
|
}, |
|
|
|
]; |
|
|
|
const columns = [ |
|
|
|
{ |
|
|
|
title: "操作类型", |
|
|
|
dataIndex: "type", |
|
|
|
key: "type", |
|
|
|
title: '操作类型', |
|
|
|
dataIndex: 'type', |
|
|
|
key: 'type', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "操作人", |
|
|
|
dataIndex: "name", |
|
|
|
key: "name", |
|
|
|
title: '操作人', |
|
|
|
dataIndex: 'name', |
|
|
|
key: 'name', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "执行结果", |
|
|
|
dataIndex: "status", |
|
|
|
key: "status", |
|
|
|
title: '执行结果', |
|
|
|
dataIndex: 'status', |
|
|
|
key: 'status', |
|
|
|
render: (text: string) => { |
|
|
|
if (text === "agree") { |
|
|
|
if (text === 'agree') { |
|
|
|
return <Badge status="success" text="成功" />; |
|
|
|
} |
|
|
|
return <Badge status="error" text="驳回" />; |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "操作时间", |
|
|
|
dataIndex: "updatedAt", |
|
|
|
key: "updatedAt", |
|
|
|
title: '操作时间', |
|
|
|
dataIndex: 'updatedAt', |
|
|
|
key: 'updatedAt', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "备注", |
|
|
|
dataIndex: "memo", |
|
|
|
key: "memo", |
|
|
|
title: '备注', |
|
|
|
dataIndex: 'memo', |
|
|
|
key: 'memo', |
|
|
|
}, |
|
|
|
]; |
|
|
|
type AdvancedState = { |
|
|
|
operationKey: "tab1" | "tab2" | "tab3"; |
|
|
|
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.textSecondary, styles.stepDescription)}> |
|
|
|
<Fragment> |
|
|
|
曲丽丽 |
|
|
|
<DingdingOutlined |
|
|
|
style={{ |
|
|
|
marginLeft: 8, |
|
|
|
}} |
|
|
|
/> |
|
|
|
</Fragment> |
|
|
|
<div>2016-12-12 12:32</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
const desc2 = ( |
|
|
|
<div className={styles.stepDescription}> |
|
|
|
<Fragment> |
|
|
|
周毛毛 |
|
|
|
<DingdingOutlined |
|
|
|
style={{ |
|
|
|
color: '#00A0E9', |
|
|
|
marginLeft: 8, |
|
|
|
}} |
|
|
|
/> |
|
|
|
</Fragment> |
|
|
|
<div> |
|
|
|
<a href="">催一下</a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
|
|
|
|
const [tabStatus, seTabStatus] = useState<AdvancedState>({ |
|
|
|
operationKey: "tab1", |
|
|
|
tabActiveKey: "detail", |
|
|
|
operationKey: 'tab1', |
|
|
|
tabActiveKey: 'detail', |
|
|
|
}); |
|
|
|
|
|
|
|
const customDot = ( |
|
|
|
dot: React.ReactNode, |
|
|
|
{ |
|
|
|
status, |
|
|
|
}: { |
|
|
|
status: string; |
|
|
|
}, |
|
|
|
) => { |
|
|
|
const popoverContent = ( |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
width: 160, |
|
|
|
}} |
|
|
|
> |
|
|
|
吴加号 |
|
|
|
<span |
|
|
|
className={styles.textSecondary} |
|
|
|
style={{ |
|
|
|
float: 'right', |
|
|
|
}} |
|
|
|
> |
|
|
|
<Badge |
|
|
|
status="default" |
|
|
|
text={ |
|
|
|
<span |
|
|
|
style={{ |
|
|
|
color: 'rgba(0, 0, 0, 0.45)', |
|
|
|
}} |
|
|
|
> |
|
|
|
未响应 |
|
|
|
</span> |
|
|
|
} |
|
|
|
/> |
|
|
|
</span> |
|
|
|
<div |
|
|
|
className={styles.textSecondary} |
|
|
|
style={{ |
|
|
|
marginTop: 4, |
|
|
|
}} |
|
|
|
> |
|
|
|
耗时：2小时25分钟 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
if (status === 'process') { |
|
|
|
return ( |
|
|
|
<Popover placement="topLeft" arrowPointAtCenter content={popoverContent}> |
|
|
|
<span>{dot}</span> |
|
|
|
</Popover> |
|
|
|
); |
|
|
|
} |
|
|
|
return dot; |
|
|
|
}; |
|
|
|
|
|
|
|
const { data = {}, loading } = useRequest<{ |
|
|
|
data: AdvancedProfileData; |
|
|
|
}>(queryAdvancedProfile); |
|
|
|
@ -287,7 +282,7 @@ const Advanced: FC = () => { |
|
|
|
const onOperationTabChange = (key: string) => { |
|
|
|
seTabStatus({ |
|
|
|
...tabStatus, |
|
|
|
operationKey: key as "tab1", |
|
|
|
operationKey: key as 'tab1', |
|
|
|
}); |
|
|
|
}; |
|
|
|
return ( |
|
|
|
@ -301,12 +296,12 @@ const Advanced: FC = () => { |
|
|
|
onTabChange={onTabChange} |
|
|
|
tabList={[ |
|
|
|
{ |
|
|
|
key: "detail", |
|
|
|
tab: "详情", |
|
|
|
key: 'detail', |
|
|
|
tab: '详情', |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: "rule", |
|
|
|
tab: "规则", |
|
|
|
key: 'rule', |
|
|
|
tab: '规则', |
|
|
|
}, |
|
|
|
]} |
|
|
|
> |
|
|
|
@ -321,7 +316,7 @@ const Advanced: FC = () => { |
|
|
|
<RouteContext.Consumer> |
|
|
|
{({ isMobile }) => ( |
|
|
|
<Steps |
|
|
|
direction={isMobile ? "vertical" : "horizontal"} |
|
|
|
direction={isMobile ? 'vertical' : 'horizontal'} |
|
|
|
progressDot={customDot} |
|
|
|
current={1} |
|
|
|
> |
|
|
|
@ -346,15 +341,9 @@ const Advanced: FC = () => { |
|
|
|
}} |
|
|
|
> |
|
|
|
<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="会员卡号">32943898021309809423</Descriptions.Item> |
|
|
|
<Descriptions.Item label="身份证">3321944288191034921</Descriptions.Item> |
|
|
|
<Descriptions.Item label="联系方式">18112345678</Descriptions.Item> |
|
|
|
<Descriptions.Item label="联系地址"> |
|
|
|
曲丽丽 18100000000 浙江省杭州市西湖区黄姑山路工专路交叉路口 |
|
|
|
</Descriptions.Item> |
|
|
|
@ -366,9 +355,7 @@ const Advanced: FC = () => { |
|
|
|
title="信息组" |
|
|
|
> |
|
|
|
<Descriptions.Item label="某某数据">725</Descriptions.Item> |
|
|
|
<Descriptions.Item label="该数据更新时间"> |
|
|
|
2017-08-08 |
|
|
|
</Descriptions.Item> |
|
|
|
<Descriptions.Item label="该数据更新时间">2017-08-08</Descriptions.Item> |
|
|
|
<Descriptions.Item |
|
|
|
label={ |
|
|
|
<span> |
|
|
|
@ -376,7 +363,7 @@ const Advanced: FC = () => { |
|
|
|
<Tooltip title="数据说明"> |
|
|
|
<InfoCircleOutlined |
|
|
|
style={{ |
|
|
|
color: "rgba(0, 0, 0, 0.43)", |
|
|
|
color: 'rgba(0, 0, 0, 0.43)', |
|
|
|
marginLeft: 4, |
|
|
|
}} |
|
|
|
/> |
|
|
|
@ -386,9 +373,7 @@ const Advanced: FC = () => { |
|
|
|
> |
|
|
|
725 |
|
|
|
</Descriptions.Item> |
|
|
|
<Descriptions.Item label="该数据更新时间"> |
|
|
|
2017-08-08 |
|
|
|
</Descriptions.Item> |
|
|
|
<Descriptions.Item label="该数据更新时间">2017-08-08</Descriptions.Item> |
|
|
|
</Descriptions> |
|
|
|
<h4 |
|
|
|
style={{ |
|
|
|
@ -406,19 +391,15 @@ const Advanced: FC = () => { |
|
|
|
> |
|
|
|
<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="所属部门">XX公司 - YY部</Descriptions.Item> |
|
|
|
<Descriptions.Item label="过期时间">2017-08-08</Descriptions.Item> |
|
|
|
<Descriptions.Item label="描述"> |
|
|
|
这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长... |
|
|
|
</Descriptions.Item> |
|
|
|
</Descriptions> |
|
|
|
<Divider |
|
|
|
style={{ |
|
|
|
margin: "16px 0", |
|
|
|
margin: '16px 0', |
|
|
|
}} |
|
|
|
/> |
|
|
|
<Descriptions |
|
|
|
@ -435,7 +416,7 @@ const Advanced: FC = () => { |
|
|
|
</Descriptions> |
|
|
|
<Divider |
|
|
|
style={{ |
|
|
|
margin: "16px 0", |
|
|
|
margin: '16px 0', |
|
|
|
}} |
|
|
|
/> |
|
|
|
<Descriptions title="组名称"> |
|
|
|
|
期贤
3 years ago