import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Icon, Modal } from 'antd'
|
|
import Utils from '@/utils/utils.js'
|
import zhCN from '@/locales/zh-CN/model.js'
|
import enUS from '@/locales/en-US/model.js'
|
import { getCardDetailForm } from '@/templates/zshare/formconfig'
|
|
import DragDetail from './dragdetail'
|
import CardDetailForm from './carddetailform'
|
import './index.scss'
|
|
const { confirm } = Modal
|
|
class LineChart extends Component {
|
static propTpyes = {
|
card: PropTypes.object,
|
config: PropTypes.object,
|
plotchange: PropTypes.func
|
}
|
|
state = {
|
dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
|
visible: false,
|
formlist: null,
|
cardcell: null // 卡片元素
|
}
|
|
componentDidMount () {
|
|
}
|
|
UNSAFE_componentWillReceiveProps (nextProps) {
|
if (!is(fromJS(this.props.card), fromJS(nextProps.card))) {
|
|
}
|
}
|
|
|
plotChange = (values) => {
|
const { card, config } = this.props
|
let _card = {...card, ...values}
|
let _charts = fromJS(config.charts).toJS()
|
|
_charts = _charts.map(item => {
|
if (item.uuid === _card.uuid) {
|
return _card
|
}
|
return item
|
})
|
|
this.props.plotchange({...config, charts: _charts})
|
}
|
|
handleList = (list) => {
|
this.plotChange({details: list})
|
}
|
|
editdetail = (_cell) => {
|
const { config } = this.props
|
if (!_cell) {
|
_cell = {
|
datatype: 'dynamic'
|
}
|
}
|
|
let _columns = config.columns.filter(col => ['text', 'number'].includes(col.type))
|
_columns = _columns.map(col => {
|
return {
|
uuid: col.uuid,
|
value: col.field,
|
text: col.label
|
}
|
})
|
|
if (_columns.filter(col => col.value === _cell.field).length === 0) {
|
_cell.field = ''
|
}
|
|
this.setState({
|
cardcell: _cell,
|
visible: true,
|
formlist: getCardDetailForm(_cell, _columns)
|
})
|
}
|
|
handleSubmit = () => {
|
const { card } = this.props
|
let _details = fromJS(card.details).toJS()
|
|
this.detailFormRef.handleConfirm().then(res => {
|
if (!res.uuid) {
|
res.uuid = Utils.getuuid()
|
_details.push(res)
|
} else {
|
_details = _details.map(item => {
|
if (item.uuid === res.uuid) return res
|
return item
|
})
|
}
|
|
this.setState({
|
cardcell: null,
|
visible: false,
|
formlist: null
|
})
|
this.plotChange({details: _details})
|
})
|
}
|
|
editModalCancel = () => {
|
this.setState({
|
cardcell: null,
|
visible: false,
|
formlist: null
|
})
|
}
|
|
deletedetail = (cell) => {
|
const { card } = this.props
|
const { dict } = this.state
|
let _this = this
|
|
confirm({
|
content: dict['model.confirm'] + dict['model.delete'] + ` - ${cell.content} ？`,
|
okText: dict['model.confirm'],
|
cancelText: dict['header.cancel'],
|
onOk() {
|
let _details = fromJS(card.details).toJS()
|
|
_details = _details.filter(item => item.uuid !== cell.uuid)
|
|
_this.plotChange({details: _details})
|
},
|
onCancel() {}
|
})
|
|
}
|
|
render() {
|
const { card } = this.props
|
const { dict, visible, cardcell } = this.state
|
let _width = '100%'
|
if (card.actions.length > 0) {
|
_width = Math.floor((100 / card.actions.length) * 10000) / 10000 + '%'
|
}
|
|
return (
|
<div className="line-card-edit-box">
|
{card.title ? <p className="chart-title">{card.title}</p> : null}
|
<div
|
className={'ant-card ant-card-bordered chart-card' + (card.widthType === 'ratio' ? ' ant-col ant-col-' + card.cardWidth : '')}
|
style={card.widthType === 'absolute' ? { width: card.cardWidth } : null}
|
>
|
{card.subelement.includes('header') ?
|
<div className="ant-card-head">
|
<Icon className="edit" title="Edit" type="edit" onClick={this.editHeader} />
|
<div className="ant-card-head-wrapper">
|
<div className="ant-card-head-title">{card.header.title.content}</div>
|
<div className="ant-card-extra">
|
<span>Action</span>
|
</div>
|
</div>
|
</div> : null
|
}
|
{card.subelement.includes('content') ? <div className="ant-card-body">
|
<div className="ant-card-meta">
|
<Icon type="plus" onClick={() => this.editdetail()} />
|
{card.subelement.includes('avatar') ?
|
<div className="ant-card-meta-avatar">
|
<Icon className="edit" title="Edit" type="edit" onClick={this.editAvatar} />
|
<span className="ant-avatar ant-avatar-circle ant-avatar-image" style={{width: 32, height: 32}}>
|
<img src={card.avatar.content || 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'} alt=""/>
|
</span>
|
</div> : null
|
}
|
<DragDetail
|
cardObj={card}
|
handleList={this.handleList}
|
handleMenu={this.editdetail}
|
deleteMenu={this.deletedetail}
|
/>
|
</div>
|
</div> : null}
|
{card.subelement.includes('actions') ?
|
<ul className="ant-card-actions">
|
<Icon className="edit" title="Edit" type="edit" onClick={this.editAction} />
|
{card.actions.map(item => (<li style={{width: _width}}>
|
<span>
|
<Icon type={item.icon || 'dash'}/>
|
</span>
|
</li>))}
|
</ul> : null
|
}
|
</div>
|
{/* 显示列编辑 */}
|
<Modal
|
title="编辑"
|
visible={visible}
|
width={650}
|
maskClosable={false}
|
onOk={this.handleSubmit}
|
onCancel={this.editModalCancel}
|
destroyOnClose
|
>
|
<CardDetailForm
|
dict={dict}
|
card={cardcell}
|
inputSubmit={this.handleSubmit}
|
formlist={this.state.formlist}
|
wrappedComponentRef={(inst) => this.detailFormRef = inst}
|
/>
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default LineChart
|
