2020-05-18

king

2020-05-18 763a67d39dcb0e5ae49816abcdb9cb7cbc2bd9e0

 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>
    )
  }