139 lines
5.4 KiB
JavaScript
139 lines
5.4 KiB
JavaScript
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>
|
|
)
|
|
}
|
|
}
|