2021-09-01

king

2021-09-01 31ec63f0419895876cbaba99637a884a32d33d0d

 src/templates/sharecomponent/chartgroupcomponent/chartform/index.jsx

@@ -13,6 +13,14 @@
import bar4 from '@/assets/img/bar4.png'
import pie1 from '@/assets/img/pie1.png'
import pie2 from '@/assets/img/pie2.png'
import card1 from '@/assets/img/card1.png'
import card2 from '@/assets/img/card2.png'
import card3 from '@/assets/img/card3.png'
import card4 from '@/assets/img/card4.png'
import card5 from '@/assets/img/card5.png'
import card6 from '@/assets/img/card6.png'
import card7 from '@/assets/img/card7.png'
import card8 from '@/assets/img/card8.png'
import './index.scss'

const syslegends = {
@@ -107,13 +115,43 @@
  card: [
    {
      uuid: 'card1',
      url: pie1,
      type: 'card1'
      url: card1,
      subelement: ['content']
    },
    {
      uuid: 'card2',
      url: pie2,
      type: 'card2'
      url: card2,
      subelement: ['content', 'avatar']
    },
    {
      uuid: 'card6',
      url: card6,
      subelement: ['content', 'header']
    },
    {
      uuid: 'card3',
      url: card3,
      subelement: ['content', 'avatar', 'header']
    },
    {
      uuid: 'card8',
      url: card8,
      subelement: ['content', 'bottom']
    },
    {
      uuid: 'card4',
      url: card4,
      subelement: ['content', 'avatar', 'bottom']
    },
    {
      uuid: 'card7',
      url: card7,
      subelement: ['content', 'header', 'bottom']
    },
    {
      uuid: 'card5',
      url: card5,
      subelement: ['content', 'avatar', 'header', 'bottom']
    }
  ]
}
@@ -130,6 +168,7 @@
  state = {
    formlist: null,
    legends: null,
    columns: null,
    selectlegend: null
  }

@@ -140,6 +179,14 @@
    let _type = card.chartType || 'line'
    let _legends = null
    let _selectlegend = null
    let _columns = []

    // 获取标记卡片列，用于颜色赋值
    formlist.forEach(item => {
      if (item.key === 'bgfield') {
        _columns = item.options
      }
    })

    if (_type === 'line' || _type === 'bar' || _type === 'line') {
      _legends = syslegends[_type]
@@ -149,26 +196,34 @@
        _selectlegend = _legends[0]
      }
    } else if (_type === 'card') {
      _legends = syslegends[_type]
      _selectlegend = _legends.filter(item => item.uuid === card.cardType)[0]
      _legends = syslegends.card

      if (!_selectlegend) {
      if (card.subelement) {
        _selectlegend = _legends.filter(item => JSON.stringify(item.subelement) === JSON.stringify(card.subelement))[0]
      } else {
        _selectlegend = _legends[0]
      }
    }

    this.setState({
      legends: _legends,
      columns: _columns,
      selectlegend: _selectlegend,
      formlist: formlist.map(item => {
        if (item.key === 'height' && ['table', 'card'].includes(_type)) {
        if (item.key === 'actions' && ['table'].includes(_type)) { // 按钮组
          item.hidden = true
        } else if (item.key === 'widthType' && _type === 'card') {
          item.hidden = false
        } else if (item.key === 'height' && ['table', 'card'].includes(_type)) {
          item.hidden = true
        } else if (item.key === 'cardWidth' && _type === 'card') {
          item.hidden = false
        } else if (item.key === 'over' && _type === 'card') {
        } else if (item.key === 'border' && _type === 'card') {
          item.hidden = false
        } else if (item.key === 'switch' && _type === 'card') {
          item.hidden = false
        } else if (item.key === 'extraAction') {
          item.hidden = _type !== 'card'
        } else if (item.key === 'bgfield') {
          item.hidden = _type !== 'card'
        }
        return item
      })
@@ -182,7 +237,7 @@
      try {
        let _form = document.getElementById('title')
        _form.select()
      } catch {
      } catch (e) {
        console.warn('表单focus失败！')
      }
    }
@@ -197,7 +252,6 @@
  }

  typeChange = (key, value) => {
    const { card } = this.props
    let formlist = JSON.parse(JSON.stringify(this.props.formlist))

    if (key === 'chartType') {
@@ -205,34 +259,21 @@
        legends: syslegends[value] || null,
        selectlegend: syslegends[value] ? syslegends[value][0] : null,
        formlist: formlist.map(item => {
          if (item.key === 'height' && ['table', 'card'].includes(value)) {
          if (item.key === 'actions' && ['table'].includes(value)) { // 按钮组
            item.hidden = true
          } else if (item.key === 'widthType' && value === 'card') {
            item.hidden = false
          } else if (item.key === 'height' && ['table', 'card'].includes(value)) {
            item.hidden = true
          } else if (item.key === 'cardWidth' && value === 'card') {
            item.min = card.widthType === 'absolute' ? 50 : 1
            item.max = card.widthType === 'absolute' ? 1000 : 24
            item.hidden = false
          } else if (item.key === 'over' && value === 'card') {
          } else if (item.key === 'border' && value === 'card') {
            item.hidden = false
          } else if (item.key === 'switch' && value === 'card') {
            item.hidden = false
          } else if (item.key === 'extraAction') {
            item.hidden = value !== 'card'
          } else if (item.key === 'bgfield') {
            item.hidden = value !== 'card'
          }
          return item
        })
      })
    }
  }

  radioChange = (val, key) => {
    const { formlist } = this.state

    if (key === 'widthType') {
      this.setState({
        formlist: formlist.map(item => {
          if (item.key === 'cardWidth') {
            item.min = val === 'absolute' ? 50 : 1
            item.max = val === 'absolute' ? 1000 : 24
          }

          return item
        })
      })
@@ -248,6 +289,7 @@
  getFields() {
    const { getFieldDecorator } = this.props.form
    const fields = []

    this.state.formlist.forEach((item, index) => {
      if (item.hidden) return
      
@@ -300,7 +342,12 @@
      } else if (item.type === 'select') { // 下拉搜索
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.label}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal || '',
                rules: [
@@ -330,7 +377,12 @@
      } else if (item.type === 'radio') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.label}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
@@ -340,7 +392,7 @@
                  }
                ]
              })(
                <Radio.Group onChange={(e) => this.radioChange(e.target.value, item.key)}>
                <Radio.Group disabled={item.readonly}>
                  {
                    item.options.map(option => {
                      return (
@@ -356,7 +408,12 @@
      } else if (item.type === 'multiselect') { // 多选
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.label}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal || []
              })(
@@ -379,7 +436,7 @@
  }

  handleConfirm = () => {
    const { selectlegend } = this.state
    const { selectlegend, columns } = this.state
    // 表单提交时检查输入值是否正确
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
@@ -394,7 +451,7 @@
            card: 'credit-card'
          }

          if (result.chartType === 'line' || result.chartType === 'bar' || result.chartType === 'line') {
          if (result.chartType === 'line' || result.chartType === 'bar' || result.chartType === 'pie') {
            if (selectlegend && this.props.card.modelId !== selectlegend.uuid) {
              result = {...result, ...selectlegend.options}
            }
@@ -409,13 +466,43 @@
              result.Yaxis = result.Yaxis[0] || ''
            }
          } else if (result.chartType === 'card') {
            result.cardType = selectlegend.type
            if (selectlegend) {
              result.subelement = selectlegend.subelement
            }

            if (!result.details) {
              result.details = [
                {type: 'title', uuid: 'cardtitle', content: 'Card title', datatype: 'static', align: 'left'},
                {type: 'description', uuid: 'carddescription', content: 'This is the description', datatype: 'static', align: 'left'}
                {elemType: 'detail', fontWeight: 'normal', fontSize: 14, width: 100, height: 1, uuid: 'cardtitle', content: 'Card content', datatype: 'static', align: 'left'},
                {elemType: 'detail', fontWeight: 'normal', fontSize: 14, width: 100, height: 1, uuid: 'carddescription', content: 'Card content', datatype: 'static', align: 'left'}
              ]
              result.bottom = {
                elemType: 'bottom',
                show: 'icon',
                actions: []
              }
              result.header = {
                elemType: 'header',
                content: 'Card title',
                datatype: 'static',
                show: 'icon',
                actions: []
              }
              result.avatar = {
                elemType: 'avatar',
                content: '',
                type: 'picture',
                field: '',
                size: 14,
                width: 32,
                radius: 'true',
                display: 'inline'
              }
            }

            if (result.bgfield) {
              result.background = columns.filter(col => col.value === result.bgfield)[0].background
            } else {
              result.background = ''
            }
          }

@@ -442,11 +529,11 @@
      }
    }
    return (
      <Form {...formItemLayout} className="chart-edit-form" id="chartwinter">
      <Form {...formItemLayout} className="chart-edit-form mingke-table" id="chartwinter">
        <Row gutter={24}>{this.getFields()}</Row>
        {legends ? <Row gutter={24} className="chart-model-image">
          {legends.map(item => <Col span={6} key={item.uuid}>
            <img onClick={() => this.changeSelectLegend(item)} src={item.url} className={selectlegend.uuid === item.uuid ? 'active' : ''} alt=""/>
            <img onClick={() => this.changeSelectLegend(item)} src={item.url} className={selectlegend && selectlegend.uuid === item.uuid ? 'active' : ''} alt=""/>
          </Col>)}
        </Row> : null}
      </Form>