| | |
| | | import React from 'react' |
| | | import { useDrag, useDrop } from 'react-dnd' |
| | | import { Icon, Popover, Form } from 'antd' |
| | | import { Popover, Form } from 'antd' |
| | | import { EditOutlined, RightOutlined, CopyOutlined, CloseOutlined } from '@ant-design/icons' |
| | | import moment from 'moment' |
| | | |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | |
| | | } |
| | | } |
| | | }) |
| | | const opacity = isDragging ? 0 : 1 |
| | | const opacity = isDragging ? 0.5 : 1 |
| | | |
| | | const edit = () => { |
| | | editCard(id) |
| | |
| | | |
| | | let formItem = null |
| | | if (card.type === 'date') { |
| | | let format = 'YYYY-MM-DD' |
| | | if (card.precision === 'hour') { |
| | | format = 'YYYY-MM-DD HH' |
| | | } else if (card.precision === 'minute') { |
| | | format = 'YYYY-MM-DD HH:mm' |
| | | } else if (card.precision === 'second') { |
| | | format = 'YYYY-MM-DD HH:mm:ss' |
| | | } |
| | | formItem = (<div className="am-list-item"> |
| | | <div className="am-list-line"> |
| | | {card.labelShow !== 'false' ? <div className="am-input-label">{card.label}</div> : null} |
| | | <div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'days').format('YYYY-MM-DD') : '请选择'}</div> |
| | | <div className="am-list-extra"><Icon type="right" /></div> |
| | | <div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'days').format(format) : '请选择'}</div> |
| | | <div className="am-list-extra"><RightOutlined /></div> |
| | | </div> |
| | | </div>) |
| | | } else if (card.type === 'datemonth') { |
| | |
| | | <div className="am-list-line"> |
| | | {card.labelShow !== 'false' ? <div className="am-input-label">{card.label}</div> : null} |
| | | <div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'month').format('YYYY-MM') : '请选择'}</div> |
| | | <div className="am-list-extra"><Icon type="right" /></div> |
| | | <div className="am-list-extra"><RightOutlined /></div> |
| | | </div> |
| | | </div>) |
| | | } else if (card.type === 'range') { |
| | |
| | | </div> |
| | | </div> |
| | | </div>) |
| | | // } else if (card.type === 'daterange') { |
| | | // let value = '请选择' |
| | | // if (card.initval === 'week') { |
| | | // value = [moment().startOf('week').format('YYYY-MM-DD'), moment().endOf('week').format('YYYY-MM-DD')].join(' ~ ') |
| | | // } else if (card.initval === 'month') { |
| | | // value = [moment().startOf('month').format('YYYY-MM-DD'), moment().endOf('month').format('YYYY-MM-DD')].join(' ~ ') |
| | | // } else if (card.initval) { |
| | | // try { |
| | | // let _initval = JSON.parse(card.initval) |
| | | // value = [moment().subtract(_initval[0], 'days').format('YYYY-MM-DD'), moment().subtract(_initval[1], 'days').format('YYYY-MM-DD')].join(' ~ ') |
| | | // } catch (e) { |
| | | // value = '请选择' |
| | | // } |
| | | // } |
| | | // formItem = (<div className="am-list-item"> |
| | | // <div className="am-list-line"> |
| | | // {card.labelShow !== 'false' ? <div className="am-input-label">{card.label}</div> : null} |
| | | // <div className="am-input-control">{value}</div> |
| | | // <div className="am-list-extra"><Icon type="right" /></div> |
| | | // </div> |
| | | // </div>) |
| | | } else if (card.type === 'checkcard') { |
| | | formItem = (<div className="am-list-item check-card"> |
| | | <div className="am-list-line"> |
| | |
| | | return ( |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | | <Icon className="edit" type="edit" onClick={edit} /> |
| | | <Icon className="copy" type="copy" onClick={copy} /> |
| | | <Icon className="close" type="close" onClick={close} /> |
| | | <EditOutlined className="edit" onClick={edit} /> |
| | | <CopyOutlined className="copy" onClick={copy} /> |
| | | <CloseOutlined className="close" onClick={close} /> |
| | | </div> |
| | | } trigger="hover"> |
| | | <div className="page-card" style={{ opacity: opacity}}> |
| | |
| | | className={'ant-form-item' + (card.required === 'true' ? ' required' : '') + (card.splitline === 'false' ? ' no-boder' : '')} |
| | | > |
| | | {formItem} |
| | | <div></div> |
| | | {showField ? <div className="field-name">{card.field}{card.hidden === 'true' ? '(隐藏)' : ''}</div> : ''} |
| | | </Form.Item>} |
| | | </div> |