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 { Descriptions, Spin, Steps, Timeline } from 'antd'
import { Descriptions, Spin, Steps, Timeline, Button } from 'antd'
import { AntIcon } from 'components'
import { api } from 'common/api'
import getDictData from 'util/dic'
import { toCamelCase } from 'util/format'
const ellipsisType = [3, 4, 6]
const loadFlag = []
export default class houseLog extends Component {
state = {
loading: true,
@@ -14,6 +14,7 @@ export default class houseLog extends Component {
houseLogType: [],
},
data: [],
showCount: 3,
}
async componentDidMount() {
@@ -46,51 +47,98 @@ export default class houseLog extends Component {
}
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() {
const { loading, codes, data } = this.state
const { loading, codes, data, showCount } = this.state
return (
<Spin spinning={loading} indicator={<AntIcon type="loading" />}>
<Timeline mode="left">
{data.map((item, i) => (
<Timeline.Item
key={i}
dot={
item.type === 6 ? (
<AntIcon type="close-circle" className="text-error" />
) : (
[
,
<AntIcon type="clock-circle" />,
<AntIcon type="check-circle" className="text-success" />,
][item.status]
)
}
>
<h6 className="h6">
<b>
{['等待', '正在', ''][item.status] +
this.bindCodeValue(item.type, 'house_log_type')}
</b>
</h6>
<p className="text-gray">{item.finishedTime}</p>
<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>
{i < showCount && (
<React.Fragment>
{this.loadOnce(item.type) && (
<Timeline.Item
key={i}
dot={
item.type === 6 ? (
<AntIcon
type="close-circle"
className="text-error"
/>
) : (
[
,
<AntIcon type="clock-circle" />,
<AntIcon
type="check-circle"
className="text-success"
/>,
][item.status]
)
}
>
<h6 className="h6">
<b>
{['等待', '正在', ''][item.status] +
this.bindCodeValue(
item.type,
'house_log_type'
)}
</b>
</h6>
<p className="text-gray">{item.finishedTime}</p>
<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>
<React.Fragment>
{showCount < data.length && (
<Button type="primary" shape="round" onClick={this.showMore} size="large">
加载更多
</Button>
)}
</React.Fragment>
</Spin>
)
}