fix 流转日志省略错误
This commit is contained in:
@@ -1,145 +0,0 @@
|
|||||||
import React, { Component } from 'react'
|
|
||||||
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,
|
|
||||||
codes: {
|
|
||||||
houseLogType: [],
|
|
||||||
},
|
|
||||||
data: [],
|
|
||||||
showCount: 3,
|
|
||||||
}
|
|
||||||
|
|
||||||
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
|
|
||||||
}
|
|
||||||
//点击加载更多按钮 展示全部
|
|
||||||
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, 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="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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
138
web-react/src/components/business/house-log/index.jsx
Normal file
138
web-react/src/components/business/house-log/index.jsx
Normal file
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user