2024-03-21

king

2024-03-21 a9b02f6862522b54d0824152017bf2acfec2af7b

 src/templates/sharecomponent/columncomponent/markcolumn/markform/index.jsx

@@ -1,13 +1,13 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Select, Button, Input, InputNumber, Radio, Icon, Cascader, Tooltip } from 'antd'
import { Form, Row, Col, Select, Button, Input, Radio, Cascader } from 'antd'

import { minkeColorSystem } from '@/utils/option.js'
import { minkeColorSystem, minkeIconSystem } from '@/utils/option.js'
import MkIcon from '@/components/mk-icon'
import './index.scss'

class UniqueForm extends Component {
  static propTpyes = {
    dict: PropTypes.object,         // 字典项
    card: PropTypes.object,         // 字段信息
    columns: PropTypes.array,       // 列名集合
    markChange: PropTypes.func      // 修改函数
@@ -19,7 +19,8 @@
    originField: this.props.card,
    signType: 'background',
    selectIcon: '',
    options: minkeColorSystem
    options: JSON.parse(JSON.stringify(minkeColorSystem)),
    icons: minkeIconSystem.direction
  }

  UNSAFE_componentWillMount() {
@@ -39,12 +40,25 @@
    const { columns } = this.props
    let item = columns.filter(col => col.field === record.field)[0]

    let _type = 'background '
    if (record.signType === 'icon' || record.signType === 'font') {
      _type = 'font '
    }

    this.setState({
      originField: item || '',
      editItem: record,
      contrastType: record.contrastType || '',
      signType: record.signType || '',
      selectIcon: record.icon || ''
      selectIcon: record.icon || '',
      options: this.state.options.map(option => {
        option.children = option.children.map(cell => {
          cell.label = <div className={_type + cell.value}>{record.icon ? <MkIcon type={record.icon} /> : cell.value}</div>

          return cell
        })
        return option
      })
    }, () => {
      let fieldvalue = {}
      Object.keys(record).forEach(key => {
@@ -57,6 +71,9 @@
    })
  }

  /**
   * @description 字段切换
   */
  fieldChange = (value) => {
    const { columns } = this.props
    let item = columns.filter(col => col.field === value)[0]
@@ -72,12 +89,18 @@
    }
  }

  /**
   * @description 对比值类型切换
   */
  changeType = (val) => {
    this.setState({
      contrastType: val
    })
  }

  /**
   * @description 标记类型切换
   */
  changeSignType = (val) => {
    let _type = 'background '
    if (val === 'icon' || val === 'font') {
@@ -103,12 +126,26 @@
    this.setState(newState)
  }

  /**
   * @description 图标类型切换
   */
  changeIconType = (val) => {
    this.setState({
      icons: minkeIconSystem[val],
      selectIcon: ''
    })
    this.props.form.setFieldsValue({icon: ''})
  }

  /**
   * @description 切换图标
   */
  changeIcon = (val) => {
    this.setState({
      selectIcon: val,
      options: this.state.options.map(option => {
        option.children = option.children.map(cell => {
          cell.label = <div className={'font ' + cell.value}><Icon type={val} /></div>
          cell.label = <div className={'font ' + cell.value}><MkIcon type={val} /></div>

          return cell
        })
@@ -127,21 +164,13 @@
        this.setState({
          editItem: null
        })
        this.props.form.setFieldsValue({
          field: '',
        })
        if (this.state.contrastType !== 'static') {
          this.props.form.setFieldsValue({contrastField: ''})
        } else {
          this.props.form.setFieldsValue({contrastValue: ''})
        }
      }
    })
  }

  render() {
    const { columns } = this.props
    const { originField, contrastType, signType, options, selectIcon } = this.state
    const { originField, contrastType, signType, options, selectIcon, icons } = this.state
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: {
@@ -154,19 +183,17 @@
      }
    }

    let contFields = columns.filter(col => originField.field !== col.field && originField.type === col.type)

    return (
      <Form {...formItemLayout} id="model-mark-form-box" className="mingke-table">
        <Row gutter={24}>
          <Col span={6}>
            <Form.Item label={'字段'}>
            <Form.Item label="字段">
              {getFieldDecorator('field', {
                initialValue: originField.field,
                rules: [
                  {
                    required: true,
                    message: this.props.dict['form.required.select'] + '字段!'
                    message: '请选择字段!'
                  }
                ]
              })(
@@ -183,7 +210,7 @@
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item label={'对比类型'}>
            <Form.Item label="对比类型">
              {getFieldDecorator('contrastType', {
                initialValue: 'static'
              })(
@@ -195,46 +222,41 @@
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item label={'对比方式'}>
            <Form.Item label="对比方式">
              {getFieldDecorator('match', {
                initialValue: '=',
                rules: [
                  {
                    required: true,
                    message: this.props.dict['form.required.select'] + '对比方式!'
                    message: '请选择对比方式!'
                  }
                ]
              })(
                <Select>
                  <Select.Option value="="> = </Select.Option>
                  {originField.type === 'number' ? <Select.Option value=">"> > </Select.Option> : null}
                  {originField.type === 'number' ? <Select.Option value="<"> &lt; </Select.Option> : null}
                  {originField.type === 'text' ? <Select.Option value="like"> like </Select.Option> : null}
                  <Select.Option value="!="> != </Select.Option>
                  <Select.Option value=">"> &gt; </Select.Option>
                  <Select.Option value="<"> &lt; </Select.Option>
                  <Select.Option value="like"> like </Select.Option>
                </Select>
              )}
            </Form.Item>
          </Col>
          {contrastType === 'static' ? <Col span={6}>
            <Form.Item label={'对比值'}>
            <Form.Item label="对比值">
              {getFieldDecorator('contrastValue', {
                initialValue: '',
                rules: [
                  {
                    required: true,
                    message: this.props.dict['form.required.input'] + '对比值!'
                  }
                ]
              })(originField.type === 'number' ? <InputNumber /> : <Input placeholder="" autoComplete="off" />)}
                initialValue: ''
              })(<Input placeholder="" autoComplete="off" />)}
            </Form.Item>
          </Col> : null}
          {contrastType === 'dynamic' ? <Col span={6}>
            <Form.Item label={'对比字段'}>
            <Form.Item label="对比字段">
              {getFieldDecorator('contrastField', {
                initialValue: '',
                rules: [
                  {
                    required: true,
                    message: this.props.dict['form.required.select'] + '对比字段!'
                    message: '请选择对比字段!'
                  }
                ]
              })(
@@ -242,7 +264,7 @@
                  showSearch
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                >
                  {contFields.map(item => (
                  {columns.map(item => (
                    <Select.Option key={item.uuid} title={item.label + '(' + item.field + ')'} value={item.field}>{item.label + '(' + item.field + ')'}</Select.Option>
                  ))}
                </Select>
@@ -250,18 +272,13 @@
            </Form.Item>
          </Col> : null}
          <Col span={6}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="卡片类型，在卡片图表中起效">
                <Icon type="question-circle" />
                {'标记'}
              </Tooltip>
            }>
            <Form.Item label="标记方式">
              {getFieldDecorator('signType', {
                initialValue: 'background',
                rules: [
                  {
                    required: true,
                    message: this.props.dict['form.required.select'] + '标记方式!'
                    message: '请选择标记方式!'
                  }
                ]
              })(
@@ -288,37 +305,33 @@
            </Form.Item>
          </Col> : null}
          {signType === 'icon' ? <Col span={6}>
            <Form.Item label={'图标'}>
            <Form.Item label={'图标类型'}>
              {getFieldDecorator('iconType', {
                initialValue: 'direction'
              })(
                <Select onChange={this.changeIconType}>
                  <Select.Option value="direction">方向性图标</Select.Option>
                  <Select.Option value="hint">提示建议性图标</Select.Option>
                  <Select.Option value="edit">编辑类图标</Select.Option>
                  <Select.Option value="data">数据类图标</Select.Option>
                  <Select.Option value="normal">网站通用图标</Select.Option>
                </Select>
              )}
            </Form.Item>
          </Col> : null}
          {signType === 'icon' ? <Col span={6}>
            <Form.Item label="图标">
              {getFieldDecorator('icon', {
                initialValue: '',
                rules: [
                  {
                    required: true,
                    message: this.props.dict['form.required.select'] + '图标!'
                    message: '请选择图标!'
                  }
                ]
              })(
                <Select onChange={this.changeIcon} getPopupContainer={() => document.getElementById('model-mark-form-box')}>
                  <Select.Option value="arrow-up"><Icon type="arrow-up" /></Select.Option>
                  <Select.Option value="arrow-down"><Icon type="arrow-down" /></Select.Option>
                  <Select.Option value="arrow-left"><Icon type="arrow-left" /></Select.Option>
                  <Select.Option value="arrow-right"><Icon type="arrow-right" /></Select.Option>
                  <Select.Option value="check-circle"><Icon type="check-circle" /></Select.Option>
                  <Select.Option value="close-circle"><Icon type="close-circle" /></Select.Option>
                  <Select.Option value="clock-circle"><Icon type="clock-circle" /></Select.Option>
                  <Select.Option value="pause-circle"><Icon type="pause-circle" /></Select.Option>
                  <Select.Option value="stop"><Icon type="stop" /></Select.Option>
                  <Select.Option value="question-circle"><Icon type="question-circle" /></Select.Option>
                  <Select.Option value="exclamation-circle"><Icon type="exclamation-circle" /></Select.Option>
                  <Select.Option value="check-square"><Icon type="check-square" /></Select.Option>
                  <Select.Option value="warning"><Icon type="warning" /></Select.Option>
                  <Select.Option value="minus-circle"><Icon type="minus-circle" /></Select.Option>
                  <Select.Option value="issues-close"><Icon type="issues-close" /></Select.Option>
                  <Select.Option value="question"><Icon type="question" /></Select.Option>
                  <Select.Option value="fall"><Icon type="fall" /></Select.Option>
                  <Select.Option value="rise"><Icon type="rise" /></Select.Option>
                  <Select.Option value="link"><Icon type="link" /></Select.Option>
                  {/* <Select.Option value="link"></Select.Option> */}
                  {icons.map(icon => <Select.Option key={icon} value={icon}><MkIcon type={icon} /></Select.Option>)}
                </Select>
              )}
            </Form.Item>
@@ -330,20 +343,20 @@
                rules: [
                  {
                    required: true,
                    message: this.props.dict['form.required.select'] + '颜色!'
                    message: '请选择颜色!'
                  }
                ]
              })(
                <Cascader
                  options={options}
                  placeholder=""
                  displayRender={(label, selectedOptions) => selectedOptions[0] ? selectedOptions[0].label + ' / ' + selectedOptions[1].value : ''}
                  displayRender={(label, selectedOptions) => selectedOptions[0] ? selectedOptions[0].label + (selectedOptions[1] ? ' / ' + selectedOptions[1].value : '') : ''}
                  getPopupContainer={() => document.getElementById('model-mark-form-box')}
                />
              )}
            </Form.Item>
          </Col> : null}
          <Col span={signType === 'icon' ? 24 : 12} style={{textAlign: 'right', marginBottom: 10}}>
          <Col span={signType === 'icon' ? (!selectIcon ? 24 : 18) : 12} style={{textAlign: 'right', marginBottom: 10}}>
            <Button onClick={this.handleConfirm} type="primary" className="mk-green">
              保存
            </Button>