2021-09-27

king

2021-09-27 54d01e6ef9ac31f10de4a0e92824eba50b77eda6

 src/templates/sharecomponent/fieldscomponent/editcard/index.jsx

@@ -1,4 +1,5 @@
import React, {Component} from 'react'
import { is, fromJS } from 'immutable'
import { Row, Col, Icon, Radio, Input, Button } from 'antd'
import './index.scss'

@@ -29,8 +30,21 @@
    }
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    const { card } = this.state

    if (nextProps.card.origin !== card.origin) {
      this.setState({
        card: {...card, origin: nextProps.card.origin}
      })
    }
  }

  changeSelect = () => {
    const { card } = this.state

    if (card.origin) return

    this.setState({
      card: {...card, selected: !card.selected}
    }, () => {
@@ -40,38 +54,41 @@

  changeType = (e) => {
    const { card } = this.state

    if (card.origin) return

    this.setState({
      card: {...card, type: e.target.value}
    }, () => {
      this.props.changeCard(this.state.card)
      this.props.changeCard(this.state.card, 'update')
    })
  }

  render() {
    const { card, type } = this.state
    return (
      <div className={'ant-card ant-card-bordered ' + (card.selected ? 'selected' : '')} >
      <div className={'ant-card ant-card-bordered ' + (card.selected ? 'selected' : '')  + (card.origin ? ' fixed' : '')} >
        <div className="base" onClick={this.changeSelect}>
          <Icon type="check" />
          <p title={card.field}>{this.props.dict['model.form.field']}： <span>{card.field}</span></p>
          <p title={card.label}>{this.props.dict['model.name']}： <span>{card.label}</span></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={card.type} disabled={!card.selected}>
          <Radio.Group onChange={this.changeType} value={card.type} disabled={!card.selected || card.origin}>
            <Radio value="text">text</Radio>
            <Radio value="select">select</Radio>
            <Radio value="daterange">dateRange</Radio>
          </Radio.Group> : null
        }
        {type === 'columns' ?
          <Radio.Group onChange={this.changeType} value={card.type} disabled={!card.selected}>
          <Radio.Group onChange={this.changeType} value={card.type} disabled={!card.selected || card.origin}>
            <Radio value="text">text</Radio>
            <Radio value="number">number</Radio>
            <Radio value="picture">picture</Radio>
          </Radio.Group> : null
        }
        {type === 'form' ?
          <Radio.Group onChange={this.changeType} value={card.type} disabled={!card.selected}>
          <Radio.Group onChange={this.changeType} value={card.type} disabled={!card.selected || card.origin}>
            <Radio value="text">text</Radio>
            <Radio value="number">number</Radio>
            <Radio value="select">select</Radio>
@@ -88,18 +105,31 @@
    super(props)

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

  changeCard = (item) => {
  UNSAFE_componentWillReceiveProps (nextProps) {
    const { data } = this.props

    if (!is(fromJS(nextProps.data), fromJS(data))) {
      this.setState({selectCards: []})
    }
  }

  changeCard = (item, m) => {
    let cards = JSON.parse(JSON.stringify(this.state.selectCards))

    if (!item.selected) {
    if (m === 'update') {
      cards = cards.map(card => {
        if (card.field === item.field) {
          return item
        }
        return card
      })
    } else if (!item.selected) {
      cards = cards.filter(card => card.field !== item.field)
    } else {
      cards.push(item)
@@ -107,42 +137,37 @@

    this.setState({
      selectCards: cards
    }, () => {
      this.props.onChange(cards)
    })
  }

  reset = () => {
    this.setState({
      searchKey: '',
      loading: true
    }, () => {
      this.setState({
        loading: false
      })
    })
  }

  render() {
    const { dict } = this.props
    const { dataSource, type, loading } = this.state
    const { data } = this.props
    const { type } = this.state

    return (
      <div className="common-modal-edit-card">
        <Row className="search-row">
          <Col span={8}>
            {!loading ? <Search placeholder={dict['form.required.input'] + dict['model.form.field']} onSearch={value => {this.setState({searchKey: value})}} enterButton /> : null}
            <Search placeholder="请输入字段" onSearch={value => {this.setState({searchKey: value})}} enterButton />
          </Col>
          <Col span={8}>
            <Button onClick={this.reset}>
              {this.props.dict['header.reset']}
            </Button>
            <Button onClick={this.reset}>重置</Button>
          </Col>
        </Row>
        <Row>
          {dataSource.map((item, index) => {
          {data.map((item, index) => {
            if (item.field.toLowerCase().indexOf(this.state.searchKey.toLowerCase()) >= 0 || item.label.indexOf(this.state.searchKey) >= 0) {
              return (
                <Col key={index} span={8}>
                  <EditCardCell ref={'cellCard' + index} type={type} card={item} dict={this.props.dict} changeCard={this.changeCard} />
                  <EditCardCell type={type} card={item} changeCard={this.changeCard} />
                </Col>
              )
            } else {