2021-06-22

king

2021-06-22 29432c9167e3fcdf83f35d0bb9dbe9acb7c7ffbf

 src/templates/modalconfig/dragelement/card.jsx

@@ -1,6 +1,6 @@
import React from 'react'
import { useDrag, useDrop } from 'react-dnd'
import { Icon, Select, DatePicker, Input, InputNumber, Button, Popover, Switch, Radio, Checkbox } from 'antd'
import { Icon, Select, DatePicker, Input, InputNumber, Button, Popover, Switch, Radio, Checkbox, Form } from 'antd'
import moment from 'moment'

import asyncComponent from '@/utils/asyncComponent'
@@ -13,7 +13,7 @@
const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
const CheckCard = asyncComponent(() => import('../checkCard'))

const Card = ({ id, card, cols, moveCard, findCard, editCard, closeCard, copyCard, showField }) => {
const Card = ({ id, card, moveCard, findCard, editCard, closeCard, copyCard, showField }) => {
  const originalIndex = findCard(id).index
  const [{ isDragging }, drag] = useDrag({
    item: { type: 'form', id, originalIndex },
@@ -60,29 +60,6 @@
      }
    } else if (card.setAll === 'true') {
      selectval = card.emptyText || '空'
    }
  }
  let labelCol = 'ant-col-sm-8'
  let wrapCol = 'ant-col-sm-16'
  let isEntireLine = false

  if (card.entireLine === 'true' || ['textarea', 'hint', 'checkcard', 'brafteditor'].includes(card.type)) {
    isEntireLine = true
  }

  if (isEntireLine) {
    if (cols === '2') {
      labelCol = 'ant-col-sm-4'
      wrapCol = 'ant-col-sm-20'
    } else if (cols === '3') {
      labelCol = 'ant-col-cuslabel'
      wrapCol = 'ant-col-cuswrap'
    } else if (cols === '4') {
      labelCol = 'ant-col-sm-2'
      wrapCol = 'ant-col-sm-22'
    }
    if (card.hidelabel === 'true') {
      wrapCol = 'ant-col-sm-24'
    }
  }

@@ -133,9 +110,19 @@
      <Checkbox value="D">D</Checkbox>
    </Checkbox.Group>)
  } else if (card.type === 'hint') {
    formItem = <div style={{marginTop: '10px', color: 'rgba(0, 0, 0, 0.85)'}}>{card.message}</div>
    formItem = <div style={{marginTop: '10px', color: 'rgba(0, 0, 0, 0.85)', lineHeight: '1.5'}}>{card.message}</div>
  } else if (card.type === 'split') {
    formItem = <div className="split-line">{card.label}</div>
  } else if (card.type === 'checkcard') {
    formItem = <CheckCard width={card.width} ratio={card.ratio} display={card.display} fields={card.fields} options={card.options} />
    formItem = <CheckCard config={card} />
  }

  let _label = card.label
  if (card.tooltip) {
    _label = <span><Icon type="question-circle" />{card.label}</span>
  }
  if (card.type === 'brafteditor' && card.hidelabel === 'true') {
    _label = null
  }

  return (
@@ -148,17 +135,18 @@
    } trigger="hover">
      <div className="page-card" style={{ opacity: opacity}}>
        <div ref={node => drag(drop(node))}>
          {<div className="ant-row ant-form-item">
            {card.hidelabel !== 'true' ? <div className={'ant-col ant-form-item-label ant-col-xs-24 ' + labelCol}>
              {card.label ? <label className={card.required === 'true' ? 'required' : ''}>{card.tooltip ? 
                <Icon type="question-circle" /> : null}
                {card.label}</label> : null}
            </div> : null}
            <div className={'ant-col ant-form-item-control-wrapper ant-col-xs-24 ' + wrapCol}>
              {formItem}
              {showField ? card.field : ''}
            </div>
          </div>}
          {card.type === 'split' ? formItem : <Form.Item
            className="ant-form-item"
            colon={!!_label}
            label={_label}
            required={card.required === 'true'}
            extra={card.extra || null}
            labelCol={card.labelwidth ? {style: {width: card.labelwidth + '%'}} : null}
            wrapperCol={card.labelwidth ? {style: {width: (100 - card.labelwidth) + '%'}} : null}
          >
            {formItem}
            {showField ? <div className="field-name">{card.field}{card.hidden === 'true' ? '(隐藏)' : ''}</div> : ''}
          </Form.Item>}
        </div>
      </div>
    </Popover>