From 53b9fb93d0376eb02bb996935f1720b4e95cd897 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期三, 12 十月 2022 14:41:06 +0800 Subject: [PATCH] 2022-10-12 --- src/menu/components/share/searchcomponent/dragsearch/card.jsx | 106 ++++++++++++++++++++++++++++++++++------------------- 1 files changed, 68 insertions(+), 38 deletions(-) diff --git a/src/menu/components/share/searchcomponent/dragsearch/card.jsx b/src/menu/components/share/searchcomponent/dragsearch/card.jsx index 19b27ed..2b6bbe1 100644 --- a/src/menu/components/share/searchcomponent/dragsearch/card.jsx +++ b/src/menu/components/share/searchcomponent/dragsearch/card.jsx @@ -21,17 +21,23 @@ const [, drop] = useDrop({ accept: 'search', canDrop: () => true, - drop: ({ id: draggedId }) => { - if (!draggedId || draggedId === id) return - - const { index: originIndex } = findCard(draggedId) - if (originIndex === -1) return - - const { index: overIndex } = findCard(id) - moveCard(draggedId, overIndex) + drop: (item) => { + const { id: draggedId, originalIndex } = item + + if (originalIndex === undefined) { + item.dropTargetId = id + } else { + if (!draggedId || draggedId === id) return + + const { index: originIndex } = findCard(draggedId) + if (originIndex === -1) return + + const { index: overIndex } = findCard(id) + moveCard(draggedId, overIndex) + } } }) - const opacity = isDragging ? 0 : 1 + const opacity = isDragging ? 0.5 : 1 let _defaultValue = '' // 涓嬫媺鎼滅储銆佹椂闂磋寖鍥寸被鍨嬶紝鍒濆鍊奸渶瑕侀澶勭悊 @@ -58,6 +64,56 @@ } } + let formItem = null + if (card.type === 'text') { + if (card.inputType !== 'search') { + formItem = <Input placeholder={card.label} value={card.initval} /> + } else { + formItem = <Search placeholder={card.label} value={card.initval} enterButton/> + } + + } else if (card.type === 'multiselect' || card.type === 'select' || card.type === 'link') { + formItem = <Select placeholder={card.label} value={_defaultValue}></Select> + } else 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 = <DatePicker format={format} placeholder={card.label} value={card.initval ? moment().subtract(card.initval, 'days') : null} /> + } else if (card.type === 'dateweek') { + formItem = <WeekPicker placeholder={card.label} value={card.initval ? moment().subtract(card.initval * 7, 'days') : null} /> + } else if (card.type === 'datemonth') { + formItem = <MonthPicker placeholder={card.label} value={card.initval ? moment().subtract(card.initval, 'month') : null} /> + } else if (card.type === 'daterange') { + 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 = <RangePicker + format={format} + className="data-range" + placeholder={['BeginTime', 'EndTime']} + renderExtraFooter={() => 'extra footer'} + value={_defaultValue} + /> + } else if (card.type === 'group') { + formItem = <DateGroup card={card} /> + } + + let labelwidth = card.labelwidth || 33.3 + if (card.labelShow === 'false') { + labelwidth = 0 + } + return ( <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> @@ -69,38 +125,12 @@ <div className={'page-card ' + (card.labelShow || '')} style={{ opacity: opacity}}> <div ref={node => drag(drop(node))}> <Form.Item - labelCol={{xs: { span: 24 }, sm: { span: 8 }}} - wrapperCol = {{xs: { span: 24 }, sm: { span: 16 }}} + labelCol={{style: {width: labelwidth + '%'}}} + wrapperCol={{style: {width: (100 - labelwidth) + '%'}}} label={card.labelShow !== 'false' ? card.label : ''} required={card.required === 'true'} > - {card.type === 'text' && card.inputType !== 'search' ? - <Input placeholder={card.label} value={card.initval} /> : null - } - {card.type === 'text' && card.inputType === 'search' ? - <Search placeholder={card.label} value={card.initval} enterButton/> : null - } - {(card.type === 'multiselect' || card.type === 'select' || card.type === 'link') ? - <Select placeholder={card.label} value={_defaultValue}></Select> : null - } - {card.type === 'date' ? - <DatePicker placeholder={card.label} value={card.initval ? moment().subtract(card.initval, 'days') : null} /> : null - } - {card.type === 'dateweek' ? - <WeekPicker placeholder={card.label} value={card.initval ? moment().subtract(card.initval * 7, 'days') : null} /> : null - } - {card.type === 'datemonth' ? - <MonthPicker placeholder={card.label} value={card.initval ? moment().subtract(card.initval, 'month') : null} /> : null - } - {card.type === 'daterange' ? - <RangePicker - className="data-range" - placeholder={['BeginTime', 'EndTime']} - renderExtraFooter={() => 'extra footer'} - value={_defaultValue} - /> : null - } - {card.type === 'group' ? <DateGroup card={card} /> : null } + {formItem} </Form.Item> </div> </div> -- Gitblit v1.8.0