add 流转日志时间轴

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

@@ -0,0 +1,72 @@
+import React, { Component } from 'react'
+import { Spin, Steps, Timeline } from 'antd'
+import { AntIcon } from 'components'
+import { api } from 'common/api'
+import getDictData from 'util/dic'
+import { toCamelCase } from 'util/format'
+
+export default class houseLog extends Component {
+    state = {
+        loading: true,
+        codes: {
+            houseLogType: [],
+        },
+        data: [],
+    }
+
+    async componentDidMount() {
+        const { id, infoId, taskId } = this.props
+        const state = { loading: false }
+
+        state.codes = await getDictData('house_log_type')
+
+        if (id) {
+        } else if (infoId) {
+        } else if (taskId) {
+            const { data } = await api.houseLogListByTaskId({ id: taskId })
+            state.data = data
+        }
+        this.setState(state)
+    }
+
+    bindCodeValue(code, name) {
+        name = toCamelCase(name)
+        const codes = this.state.codes[name]
+        if (codes) {
+            const c = codes.find(p => p.code == code)
+            if (c) {
+                return c.value
+            }
+        }
+        return null
+    }
+
+    render() {
+        const { loading, codes, data } = this.state
+
+        return (
+            <Spin spinning={loading} indicator={<AntIcon type="loading" />}>
+                <Timeline mode="left">
+                    {data.map((item, i) => (
+                        <Timeline.Item
+                            key={i}
+                            dot={
+                                [
+                                    ,
+                                    <AntIcon type="clock-circle" />,
+                                    <AntIcon type="check-circle" />,
+                                ][item.status]
+                            }
+                        >
+                            <h5 className="h5">
+                                {this.bindCodeValue(item.type, 'house_log_type')}
+                            </h5>
+                            <p className="text-gray">{item.updatedTime}</p>
+                            <p>{item.targetUserNames}</p>
+                        </Timeline.Item>
+                    ))}
+                </Timeline>
+            </Spin>
+        )
+    }
+}