fix 流转日志省略错误

2021-07-09 16:41:16 +08:00
parent 505527daf1
commit a051179b71
2 changed files with 138 additions and 145 deletions
--- a/web-react/src/components/business/house-log/index.jsx
+++ b/web-react/src/components/business/house-log/index.jsx
@@ -0,0 +1,138 @@
+import React, { Component } from 'react'
+import { Button, Descriptions, Spin, Steps, Timeline } 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]
+
+export default class houseLog extends Component {
+    state = {
+        loading: true,
+        codes: {
+            houseLogType: [],
+        },
+        data: [],
+        ellipsis: true,
+    }
+
+    ellipsisFlag = []
+
+    async componentDidMount() {
+        const { id, infoId, taskId } = this.props
+        const state = { loading: false }
+
+        state.codes = await getDictData('house_log_type')
+
+        if (id) {
+            const { data } = await api.houseLogList({ id })
+            state.data = data
+        } else if (infoId) {
+            const { data } = await api.houseLogListByInfoId({ id: infoId })
+            state.data = data
+        } 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, data, ellipsis } = this.state
+
+        let button = false
+
+        return (
+            <Spin spinning={loading} indicator={<AntIcon type="loading" />}>
+                <Timeline mode="left">
+                    {data.map((item, i) => {
+                        let show = true
+                        if (
+                            ellipsisType.includes(item.type) &&
+                            !this.ellipsisFlag.includes(item.type)
+                        ) {
+                            this.ellipsisFlag.push(item.type)
+                        } else if (
+                            ellipsisType.includes(item.type) &&
+                            this.ellipsisFlag.includes(item.type)
+                        ) {
+                            show = false
+                        }
+                        if (show || !ellipsis) {
+                            return (
+                                <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>
+                            )
+                        } else if (!button) {
+                            button = true
+                            return (
+                                <Button
+                                    size="large"
+                                    type="text"
+                                    icon={<AntIcon type="ellipsis" />}
+                                    className="mt-md mb-md"
+                                    onClick={() => this.setState({ ellipsis: false })}
+                                />
+                            )
+                        }
+
+                        return <></>
+                    })}
+                </Timeline>
+            </Spin>
+        )
+    }
+}