From 763a67d39dcb0e5ae49816abcdb9cb7cbc2bd9e0 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期一, 18 五月 2020 10:12:31 +0800
Subject: [PATCH] 2020-05-18
---
src/templates/sharecomponent/cardcomponent/index.jsx | 172 +++++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 136 insertions(+), 36 deletions(-)
diff --git a/src/templates/sharecomponent/cardcomponent/index.jsx b/src/templates/sharecomponent/cardcomponent/index.jsx
index a3066b4..eddefc1 100644
--- a/src/templates/sharecomponent/cardcomponent/index.jsx
+++ b/src/templates/sharecomponent/cardcomponent/index.jsx
@@ -1,17 +1,18 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
-import { Card, Icon } from 'antd'
+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 ChartCompileForm from './chartcompile'
+import { getCardDetailForm } from '@/templates/zshare/formconfig'
import DragDetail from './dragdetail'
+import CardDetailForm from './carddetailform'
import './index.scss'
-// const { Meta } = Card
+const { confirm } = Modal
class LineChart extends Component {
static propTpyes = {
@@ -22,7 +23,8 @@
state = {
dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
- visible: true,
+ visible: false,
+ formlist: null,
cardcell: null // 鍗＄墖鍏冪礌
}
@@ -57,59 +59,157 @@
}
editdetail = (_cell) => {
+ const { config } = this.props
if (!_cell) {
- _cell = {uuid: Utils.getuuid()}
+ _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
+ cardcell: _cell,
+ visible: true,
+ formlist: getCardDetailForm(_cell, _columns)
})
-
}
- deletedetail = () => {
+ 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
return (
<div className="line-card-edit-box">
{card.title ? <p className="chart-title">{card.title}</p> : null}
- {card.cardType === 'card1' ? <Card
- className={card.widthType === 'ratio' ? 'ant-col ant-col-' + card.cardWidth : ''}
+ <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}
>
- <div className="ant-card-meta">
- <Icon type="plus" onClick={this.editdetail} />
- <DragDetail
- list={card.details}
- handleList={this.handleList}
- handleMenu={this.editdetail}
- deleteMenu={this.deletedetail}
- />
+ <div className="ant-card-head">
+ <div className="ant-card-head-wrapper">
+ <div className="ant-card-head-title">Card Title</div>
+ <div className="ant-card-extra">
+ <span>Action</span>
+ </div>
+ </div>
</div>
- </Card> : null}
- {/* <Card
- className={card.widthType === 'ratio' ? 'ant-col ant-col-' + card.cardWidth : ''}
- style={card.widthType === 'absolute' ? { width: card.cardWidth } : null}
+ <div className="ant-card-body">
+ <div className="ant-card-meta">
+ <Icon type="plus" onClick={() => this.editdetail()} />
+ {card.cardType === 'card2' ? <div className="ant-card-meta-avatar">
+ <span className="ant-avatar ant-avatar-circle ant-avatar-image" style={{width: 32, height: 32}}>
+ <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt=""/>
+ </span>
+ </div> : null }
+ <DragDetail
+ list={card.details}
+ handleList={this.handleList}
+ handleMenu={this.editdetail}
+ deleteMenu={this.deletedetail}
+ />
+ </div>
+ </div>
+ {card.cardType === 'card2' ? <ul className="ant-card-actions">
+ <li style={{width: '33.3333%'}}>
+ <span>
+ <Icon type="setting"/>
+ </span>
+ </li>
+ <li style={{width: '33.3333%'}}>
+ <span>
+ <Icon type="edit"/>
+ </span>
+ </li>
+ <li style={{width: '33.3333%'}}>
+ <span>
+ <Icon type="edit"/>
+ </span>
+ </li>
+ </ul> : null}
+ </div>
+ {/* 鏄剧ず鍒楃紪杈� */}
+ <Modal
+ title="缂栬緫"
+ visible={visible}
+ width={650}
+ maskClosable={false}
+ onOk={this.handleSubmit}
+ onCancel={this.editModalCancel}
+ destroyOnClose
>
- <Meta
- avatar={
- <Avatar size={64} src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
- }
- title="Card title"
- description="This is the description"
+ <CardDetailForm
+ dict={dict}
+ card={cardcell}
+ inputSubmit={this.handleSubmit}
+ formlist={this.state.formlist}
+ wrappedComponentRef={(inst) => this.detailFormRef = inst}
/>
- </Card> */}
- {/* <ChartCompileForm
- plot={plot}
- type={plot.chartType}
- config={this.props.config}
- dict={this.state.dict}
- plotchange={this.plotChange}
- /> */}
+ </Modal>
</div>
)
}
--
Gitblit v1.8.0