| | |
| | | import React from 'react' |
| | | import { useDrag, useDrop } from 'react-dnd' |
| | | import { Select, DatePicker, Input, InputNumber, Button, Popover, Switch, Radio, Checkbox, Form, Rate } from 'antd' |
| | | import { QuestionCircleOutlined, UploadOutlined, EditOutlined, CopyOutlined, CloseOutlined, StarFilled } from '@ant-design/icons' |
| | | import { QuestionCircleOutlined, UploadOutlined, EditOutlined, CopyOutlined, CloseOutlined, StarFilled, FontColorsOutlined } from '@ant-design/icons' |
| | | import moment from 'moment' |
| | | |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import MkIcon from '@/components/mk-icon' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import './index.scss' |
| | | |
| | | const { MonthPicker } = DatePicker |
| | |
| | | |
| | | const copy = () => { |
| | | copyCard(id) |
| | | } |
| | | |
| | | const changeStyle = () => { |
| | | let options = ['font'] |
| | | |
| | | MKEmitter.emit('changeStyle', ['form', card.uuid], options, card.style || {}) |
| | | } |
| | | |
| | | let selectval = '' |
| | |
| | | <Checkbox value="D">D</Checkbox> |
| | | </Checkbox.Group>) |
| | | } else if (card.type === 'hint') { |
| | | formItem = <div style={{marginTop: '10px', color: 'rgba(0, 0, 0, 0.85)', lineHeight: '1.5'}}>{card.message}</div> |
| | | formItem = <div style={{marginTop: '10px', color: 'rgba(0, 0, 0, 0.85)', lineHeight: '1.5', ...card.style}}>{card.message}</div> |
| | | } else if (card.type === 'split') { |
| | | formItem = <div className="split-line">{card.label}</div> |
| | | formItem = <div className="split-line" style={card.style}>{card.label}</div> |
| | | } else if (card.type === 'checkcard') { |
| | | className += ' checkcard' |
| | | formItem = <CheckCard config={card} /> |
| | | } |
| | | |
| | | let _label = card.label |
| | | let colon = !!card.label |
| | | let _label = <span className="mk-form-label" style={card.style}>{card.label}</span> |
| | | |
| | | if (card.tooltip) { |
| | | _label = <span><QuestionCircleOutlined className="mk-form-tip" />{card.label}</span> |
| | | _label = <><QuestionCircleOutlined className="mk-form-tip" /><span className="mk-form-label" style={card.style}>{card.label}</span></> |
| | | } |
| | | if (card.type === 'brafteditor' && card.hidelabel === 'true') { |
| | | _label = null |
| | | colon = false |
| | | } else if (card.type === 'hint') { |
| | | _label = _label || ' ' |
| | | } else if (card.type === 'hint' && !card.label) { |
| | | _label = ' ' |
| | | } |
| | | |
| | | return ( |
| | |
| | | <div className="mk-popover-control"> |
| | | <EditOutlined className="edit" onClick={edit} /> |
| | | <CopyOutlined className="copy" onClick={copy} /> |
| | | <FontColorsOutlined className="style" onClick={changeStyle} /> |
| | | <CloseOutlined className="close" onClick={close} /> |
| | | </div> |
| | | } trigger="hover"> |
| | |
| | | <div ref={node => drag(drop(node))} onDoubleClick={edit}> |
| | | {card.type === 'split' ? formItem : <Form.Item |
| | | className={className} |
| | | colon={colon} |
| | | colon={false} |
| | | label={_label} |
| | | required={card.required === 'true'} |
| | | extra={card.extra || null} |