House-log 展示 修改

web-react/src/components/business/house-log.jsx

@@ -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,24 +47,51 @@ 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) => (
+                        <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="close-circle"
+                                                        className="text-error"
+                                                    />
                                                 ) : (
                                                     [
                                                         ,
                                                         <AntIcon type="clock-circle" />,
-                                        <AntIcon type="check-circle" className="text-success" />,
+                                                        <AntIcon
+                                                            type="check-circle"
+                                                            className="text-success"
+                                                        />,
                                                     ][item.status]
                                                 )
                                             }
@@ -71,13 +99,22 @@ export default class houseLog extends Component {
                                             <h6 className="h6">
                                                 <b>
                                                     {['等待', '正在', ''][item.status] +
-                                        this.bindCodeValue(item.type, 'house_log_type')}
+                                                        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 }}>
+                                            <Descriptions
+                                                column={1}
+                                                colon={false}
+                                                labelStyle={{ opacity: 0.5 }}
+                                            >
                                                 {item.remark && (
-                                    <Descriptions.Item>{item.remark}</Descriptions.Item>
+                                                    <Descriptions.Item>
+                                                        {item.remark}
+                                                    </Descriptions.Item>
                                                 )}
                                                 <Descriptions.Item label="操作人">
                                                     {item.targetUserNames.split(',').join(' / ')}
@@ -89,8 +126,19 @@ export default class houseLog extends Component {
                                                 )}
                                             </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>
         )
     }