2019-12-06

king

2019-12-06 2cb65d99c9aebf8293cb2838fcfe3e09fb2739ce

 src/templates/modalconfig/editcard/index.jsx

@@ -1,6 +1,8 @@
import React, {Component} from 'react'
import { Row, Col, Icon, Radio } from 'antd'
import { Row, Col, Icon, Radio, Input } from 'antd'
import './index.scss'

const { Search } = Input

class EditCardCell extends Component {
  constructor(props) {
@@ -16,6 +18,8 @@
    const { card } = this.state
    this.setState({
      card: {...card, selected: !card.selected}
    }, () => {
      this.props.changeCard(this.state.card)
    })
  }

@@ -27,34 +31,21 @@
  }

  render() {
    const { card, type } = this.state
    let _type = card.type
    if (type === 'columns') {
      if (_type !== 'picture') {
        _type = 'text'
      }
    } else if (type === 'search') {
      if (_type === 'number') {
        _type = 'text'
      }
    }
    const { card } = this.state
    return (
      <div className={'ant-card ant-card-bordered ' + (card.selected ? 'selected' : '')} >
        <div className="base" onClick={this.changeSelect}>
          <Icon type="check" />
          <p title={card.field}>字段名: {card.field}</p>
          <p title={card.label}>提示文字: {card.label}</p>
          <p title={card.field}>字段： <span>{card.field}</span></p>
          <p title={card.label}>名称： <span>{card.label}</span></p>
        </div>
        {type === 'search' && <Radio.Group onChange={this.changeType} value={_type} disabled={!card.selected}>
        <Radio.Group onChange={this.changeType} value={card.type} disabled={!card.selected}>
          <Radio value="text">text</Radio>
          <Radio value="number">number</Radio>
          <Radio value="select">select</Radio>
          <Radio value="date">date</Radio>
          <Radio value="datetime">datetime</Radio>
        </Radio.Group>}
        {type === 'columns' && <Radio.Group onChange={this.changeType} value={_type} disabled={!card.selected}>
          <Radio value="text">text</Radio>
          <Radio value="picture">picture</Radio>
        </Radio.Group>}
        </Radio.Group>
      </div>
    )
  }
@@ -66,16 +57,29 @@

    this.state = {
      dataSource: props.data,
      type: props.type
      selectCards: props.data.filter(item => item.selected),
      type: props.type,
      searchKey: ''
    }
  }

  getSelectedCard = () => {
    let box = []
    this.state.dataSource.forEach((item, index) => {
      box.push(this.refs['cellCard' + index].state.card)
  changeCard = (item) => {
    let cards = JSON.parse(JSON.stringify(this.state.selectCards))
    let isAdd = true
    cards = cards.map(card => {
      if (card.field === item.field) {
        isAdd = false
        return item
      } else {
        return card
      }
    })
    return box
    if (isAdd) {
      cards.push(item)
    }
    this.setState({
      selectCards: cards
    })
  }

  render() {
@@ -83,12 +87,23 @@

    return (
      <div className="common-modal-edit-card">
        <Row className="search-row">
          <Col span={8}>
            <Search placeholder="请输入字段名" onSearch={value => {this.setState({searchKey: value})}} enterButton />
          </Col>
        </Row>
        <Row>
          {dataSource.map((item, index) => (
            <Col key={index} span={8}>
              <EditCardCell ref={'cellCard' + index} type={type} card={item} />
            </Col>
          ))}
          {dataSource.map((item, index) => {
            if (item.field.toLowerCase().indexOf(this.state.searchKey.toLowerCase()) >= 0) {
              return (
                <Col key={index} span={8}>
                  <EditCardCell ref={'cellCard' + index} type={type} card={item} changeCard={this.changeCard} />
                </Col>
              )
            } else {
              return ''
            }
          })}
        </Row>
      </div>
    )