ewide/zsxt_nbzs_h5
22
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

House-log 展示 修改

Browse Source
This commit is contained in:
Connor
2021-07-09 15:48:10 +08:00
parent d4e8cc52e6
commit 978810fffe
1 changed files with 88 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
web-react/src/components/business/house-log.jsx
View File

@@ -1,12 +1,12 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import { Descriptions, Spin, Steps, Timeline } from 'antd' import { Descriptions, Spin, Steps, Timeline, Button } from 'antd'
import { AntIcon } from 'components' import { AntIcon } from 'components'
import { api } from 'common/api' import { api } from 'common/api'
import getDictData from 'util/dic' import getDictData from 'util/dic'
import { toCamelCase } from 'util/format' import { toCamelCase } from 'util/format'
const ellipsisType = [3, 4, 6] const ellipsisType = [3, 4, 6]
const loadFlag = []
export default class houseLog extends Component { export default class houseLog extends Component {
state = { state = {
loading: true, loading: true,
@@ -14,6 +14,7 @@ export default class houseLog extends Component {
houseLogType: [], houseLogType: [],
}, },
data: [], data: [],
showCount: 3,
} }
async componentDidMount() { async componentDidMount() {
@@ -46,51 +47,98 @@ export default class houseLog extends Component {
} }
return null return null
} }
//点击加载更多按钮 展示全部
showMore = () => {
loadFlag.length = 0
this.setState({
showCount: 10000,
})
}
//只显示一次 ellipsisType 如果要全部显示 将false改为 true
loadOnce(itemType) {
if (loadFlag.includes(itemType)) return false
if (ellipsisType.includes(itemType)) {
loadFlag.unshift(itemType)
}
return true
}
//组件卸载清空 数组 否则再次点开数组中有值存在
componentWillUnmount() {
loadFlag.length = 0
}
render() { render() {
const { loading, codes, data } = this.state const { loading, codes, data, showCount } = this.state
return ( return (
<Spin spinning={loading} indicator={<AntIcon type="loading" />}> <Spin spinning={loading} indicator={<AntIcon type="loading" />}>
<Timeline mode="left"> <Timeline mode="left">
{data.map((item, i) => ( {data.map((item, i) => (
<Timeline.Item <React.Fragment>
key={i} {i < showCount && (
dot={ <React.Fragment>
item.type === 6 ? ( {this.loadOnce(item.type) && (
<AntIcon type="close-circle" className="text-error" /> <Timeline.Item
) : ( key={i}
[ dot={
, item.type === 6 ? (
<AntIcon type="clock-circle" />, <AntIcon
<AntIcon type="check-circle" className="text-success" />, type="close-circle"
][item.status] className="text-error"
) />
} ) : (
> [
<h6 className="h6"> ,
<b> <AntIcon type="clock-circle" />,
{['等待', '正在', ''][item.status] + <AntIcon
this.bindCodeValue(item.type, 'house_log_type')} type="check-circle"
</b> className="text-success"
</h6> />,
<p className="text-gray">{item.finishedTime}</p> ][item.status]
<Descriptions column={1} colon={false} labelStyle={{ opacity: 0.5 }}> )
{item.remark && ( }
<Descriptions.Item>{item.remark}</Descriptions.Item> >
)} <h6 className="h6">
<Descriptions.Item label="操作人"> <b>
{item.targetUserNames.split(',').join(' / ')} {['等待', '正在', ''][item.status] +
</Descriptions.Item> this.bindCodeValue(
{item.finishedUserName && ( item.type,
<Descriptions.Item label="实际操作人"> 'house_log_type'
{item.finishedUserName} )}
</Descriptions.Item> </b>
)} </h6>
</Descriptions> <p className="text-gray">{item.finishedTime}</p>
</Timeline.Item> <Descriptions
column={1}
colon={false}
labelStyle={{ opacity: 0.5 }}
>
{item.remark && (
<Descriptions.Item>
{item.remark}
</Descriptions.Item>
)}
<Descriptions.Item label="操作人">
{item.targetUserNames.split(',').join(' / ')}
</Descriptions.Item>
{item.finishedUserName && (
<Descriptions.Item label="实际操作人">
{item.finishedUserName}
</Descriptions.Item>
)}
</Descriptions>
</Timeline.Item>
)}
</React.Fragment>
)}
</React.Fragment>
))} ))}
</Timeline> </Timeline>
<React.Fragment>
{showCount < data.length && (
<Button type="primary" shape="round" onClick={this.showMore} size="large">
加载更多
</Button>
)}
</React.Fragment>
</Spin> </Spin>
) )
} }