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