2022-02-09

king

2022-02-09 d59f518f466274b2caeb2e01c10c92deafe7c93b

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

@@ -1,6 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, Select, InputNumber, Radio, Tooltip, Icon } from 'antd'
import { Form, Row, Col, Input, Select, InputNumber, Radio, Tooltip } from 'antd'
import { QuestionCircleOutlined } from '@ant-design/icons'

import { formRule } from '@/utils/option.js'
import line1 from '@/assets/img/line1.png'
@@ -18,6 +19,9 @@
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 = {
@@ -121,14 +125,29 @@
      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',
@@ -192,18 +211,18 @@
      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') {
          item.hidden = false
        } 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'
        }
@@ -219,7 +238,7 @@
      try {
        let _form = document.getElementById('title')
        _form.select()
      } catch {
      } catch (e) {
        console.warn('表单focus失败！')
      }
    }
@@ -234,7 +253,6 @@
  }

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

    if (key === 'chartType') {
@@ -242,66 +260,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') {
            item.hidden = false
          } 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
        })
      })
    } else if (key === 'over' && val === 'roll') {
      this.setState({
        formlist: formlist.map(item => {
          if (item.key === 'cardWidth') {
            item.min = 50
            item.max = 1000
          } else if (item.key === 'widthType') {
            item.readonly = true
          }

          return item
        })
      })
      if (this.props.form.getFieldValue('widthType') !== undefined) {
        this.props.form.setFieldsValue({widthType: 'absolute'})
      }
    } else if (key === 'over' && val === 'whole') {
      this.setState({
        formlist: formlist.map(item => {
          if (item.key === 'widthType') {
            item.readonly = false
          }

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

    this.state.formlist.forEach((item, index) => {
      if (item.hidden) return
      
@@ -325,7 +299,7 @@
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}>
                <Icon type="question-circle" />
                <QuestionCircleOutlined className="mk-form-tip" />
                {item.label}
              </Tooltip> : item.label
            }>
@@ -350,7 +324,7 @@
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}>
                <Icon type="question-circle" />
                <QuestionCircleOutlined className="mk-form-tip" />
                {item.label}
              </Tooltip> : item.label
            }>
@@ -369,7 +343,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}>
                <QuestionCircleOutlined className="mk-form-tip" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal || '',
                rules: [
@@ -399,7 +378,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}>
                <QuestionCircleOutlined className="mk-form-tip" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
@@ -409,7 +393,7 @@
                  }
                ]
              })(
                <Radio.Group onChange={(e) => this.radioChange(e.target.value, item.key)} disabled={item.readonly}>
                <Radio.Group disabled={item.readonly}>
                  {
                    item.options.map(option => {
                      return (
@@ -425,7 +409,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}>
                <QuestionCircleOutlined className="mk-form-tip" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal || []
              })(
@@ -463,7 +452,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}
            }
@@ -484,8 +473,8 @@

            if (!result.details) {
              result.details = [
                {elemType: 'detail', bold: 'true', uuid: 'cardtitle', content: 'Card title', datatype: 'static', align: 'left'},
                {elemType: 'detail',bold: 'false', uuid: 'carddescription', content: 'Card content', 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',
@@ -505,8 +494,9 @@
                type: 'picture',
                field: '',
                size: 14,
                widthType: 'absolute',
                width: 32
                width: 32,
                radius: 'true',
                display: 'inline'
              }
            }

@@ -544,7 +534,7 @@
        <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>