134 lines
7.2 KiB
JavaScript
134 lines
7.2 KiB
JavaScript
import React, { Component } from 'react'
|
|
import { Timeline } from 'antd';
|
|
import isEmpty from 'lodash/isEmpty';
|
|
import {observer} from 'mobx-react'
|
|
import {toJS} from 'mobx'
|
|
import {Icon} from 'antd'
|
|
import Map from '../../coms/Map';
|
|
import {
|
|
WeaLocaleProvider,
|
|
WeaDialog
|
|
} from 'ecCom';
|
|
|
|
import {
|
|
carousel
|
|
} from '../../util/index'
|
|
import {addContentPath} from '../../util/index.js'
|
|
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|
|
|
@observer
|
|
export default class TimeView extends Component {
|
|
componentDidMount () {
|
|
const {newOutSide} = this.props;
|
|
const {getData,init,temp} = newOutSide;
|
|
getData();
|
|
}
|
|
handlerPosition(item) {
|
|
const {
|
|
newOutSide
|
|
} = this.props;
|
|
newOutSide.updatePosition(item);
|
|
newOutSide.updateVisible(true);
|
|
}
|
|
render() {
|
|
const {newOutSide} = this.props;
|
|
const {timeData,visible,positionObj} = newOutSide;
|
|
|
|
let themeFontSize = 12;
|
|
try{
|
|
themeFontSize = parseInt(JSON.parse(localStorage['theme-themeInfo']).themeFontSize);
|
|
}catch(e){
|
|
|
|
}
|
|
return (
|
|
<div style={{overflowY:'auto',height:"calc(100% - 120px)"}}>
|
|
{/* 点击地图的弹出框 */}
|
|
<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@z0kuxt`}
|
|
visible={visible}
|
|
onCancel={()=> {newOutSide.updateVisible(false);}}
|
|
closable
|
|
style={{width: 700, height: 500}}
|
|
title = {getLabel('386506',"位置详情")}
|
|
icon="icon-coms-hrm"
|
|
iconBgcolor='#008572'
|
|
>
|
|
{visible &&<Map ecId={`${this && this.props && this.props.ecId || ''}_Map@mmwqk4`} config={toJS(positionObj)} ref="map1"/>}
|
|
</WeaDialog>
|
|
|
|
<Timeline ecId={`${this && this.props && this.props.ecId || ''}_Timeline@3k6mmc`} className="list-wrapper grayBG">
|
|
{
|
|
timeData && toJS(timeData).map((item,index) => {
|
|
return (
|
|
<Timeline.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@3abca4@${index}`} className="list-item">
|
|
<div className="list-item-wrapper">
|
|
<div className={`list-item-title ${themeFontSize > 12 ? 'list-item-title-large' : ''}`}>{item.date}</div>
|
|
<div className="list-item-content">
|
|
{
|
|
// 为空时
|
|
isEmpty(item.items)&&
|
|
<div className="no-signinfo gray align-center">
|
|
<Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@nw2xqi@${index}`} type="frown gray" style={{marginRight : 10}} />
|
|
{getLabel('386505',"当天无外勤签到记录")}
|
|
</div>
|
|
}
|
|
{
|
|
!isEmpty(item.items) && item.items.map(i => {
|
|
return (
|
|
<div className="list-item-single">
|
|
<div className="mb5">
|
|
{i.name}
|
|
<span className="gray" style={{marginLeft: 15}}>{i.time}</span>
|
|
<span style={{float: 'right', marginRight: 10, color: '#67AFF7'}}>{i.signTitle}</span>
|
|
</div>
|
|
{/* 备注 */}
|
|
{i.information && <div className="mb5" dangerouslySetInnerHTML={{__html: i.information}}></div>}
|
|
{/* 图片 */}
|
|
{i.pics &&
|
|
<div className="mb5">
|
|
{
|
|
i.pics.map(pic=> {
|
|
return <div className='mb5-img'>{
|
|
<img src={addContentPath(pic)} border="0" width="100" height="110" onClick={event => carousel(pic,index,'ant-timeline-item')}/>
|
|
}
|
|
</div>
|
|
})
|
|
}
|
|
</div>
|
|
}
|
|
{
|
|
i.crm && i.crm.length > 0 &&
|
|
<div className="mb5-custom" >
|
|
<i className="icon-coms-currency-Customer" />
|
|
<div style={{flex: 1, width: '98%'}}>
|
|
{
|
|
i.crm.map((d, i) => {
|
|
return (
|
|
<div className='crm_data text-elli'>{d}</div>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
<span className="cursor-pointer gray"
|
|
onClick={this.handlerPosition.bind(this, i)}>
|
|
<i className="icon-coms-position" style={{marginRight: 6}}/>
|
|
{i.title}
|
|
</span>
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
</div>
|
|
</Timeline.Item>
|
|
)
|
|
})
|
|
}
|
|
</Timeline>
|
|
</div>
|
|
)
|
|
}
|
|
}
|