diff --git a/scss/_variables.scss b/scss/_variables.scss index f35c190ae..47077e1bf 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1184,6 +1184,7 @@ $Combo--vertical-itemToolbar-positionTop: -$Combo--vertical-itemToolbar-height ! $Combo--vertical-itemToolbar-positionRight: px2rem(5px) !default; $Combo--horizontal-item-gap: px2rem(5px); +$Combo--horizontal-dragger-top: px2rem(8px) !default; // Sub Form $SubForm--addBtn-bg: $Button--info-bg !default; diff --git a/scss/components/form/_combo.scss b/scss/components/form/_combo.scss index 43df4f033..2e0983ac5 100644 --- a/scss/components/form/_combo.scss +++ b/scss/components/form/_combo.scss @@ -67,6 +67,16 @@ background: $white; } + &-itemDrager { + cursor: move; + + svg { + width: px2rem(20px); + height: px2rem(20px); + top: $Combo--horizontal-dragger-top; + } + } + &--hor { .#{$ns}Combo-item { display: flex; @@ -103,6 +113,14 @@ opacity: $Button-onDisabled-opacity; } } + + &.is-draggable .#{$ns}Combo-toolbar { + padding-left: px2rem(24px); + } + + .#{$ns}Combo-itemDrager { + padding: 0 px2rem(6px) 0 0; + } } &--ver:not(&--noBorder) { @@ -183,6 +201,21 @@ opacity: 1; } } + + .#{$ns}Combo-itemDrager { + position: absolute; + top: 0; + left: px2rem(-30px); + } + + &.is-draggable { + .#{$ns}Combo-item { + margin-left: px2rem(35px); + } + .#{$ns}Combo-toolbar { + padding-left: px2rem(25px); + } + } } &-item--dragging { diff --git a/scss/themes/cxd.scss b/scss/themes/cxd.scss index e2ba8dcb4..27d19fe60 100644 --- a/scss/themes/cxd.scss +++ b/scss/themes/cxd.scss @@ -487,6 +487,9 @@ $Card-actions-onHover-bg: white; $Card-actions-onHover-color: $primary; $Card-actions-onChecked-onHover-bg: $white; +// Combo +$Combo--horizontal-dragger-top: px2rem(5px); + @import '../variables'; @import '../mixins'; @import '../base/reset'; diff --git a/src/components/icons.tsx b/src/components/icons.tsx index 81f888b4a..cbbcd5750 100644 --- a/src/components/icons.tsx +++ b/src/components/icons.tsx @@ -63,6 +63,9 @@ import InfoIcon from '../icons/info.svg'; // @ts-ignore import LocationIcon from '../icons/location.svg'; +// @ts-ignore +import ComboDraggerIcon from '../icons/combo-dragger.svg'; + // 兼容原来的用法,后续不直接试用。 // @ts-ignore export const closeIcon = ; @@ -125,6 +128,7 @@ registerIcon('back', BackIcon); registerIcon('move', MoveIcon); registerIcon('info', InfoIcon); registerIcon('location', LocationIcon); +registerIcon('combo-dragger', ComboDraggerIcon); export function Icon({ icon, diff --git a/src/icons/combo-dragger.svg b/src/icons/combo-dragger.svg new file mode 100644 index 000000000..f6e7a6ecf --- /dev/null +++ b/src/icons/combo-dragger.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderers/Form/Combo.tsx b/src/renderers/Form/Combo.tsx index 5ccbbedfc..d126a10e0 100644 --- a/src/renderers/Form/Combo.tsx +++ b/src/renderers/Form/Combo.tsx @@ -22,6 +22,7 @@ import {dataMapping, resolveVariable} from '../../utils/tpl-builtin'; import {isEffectiveApi} from '../../utils/api'; import {Alert2} from '../../components'; import memoize from 'lodash/memoize'; +import {Icon}from '../../components/icons' export interface Condition { test: string; controls: Array; @@ -91,8 +92,8 @@ export default class ComboControl extends React.Component { addButtonText: '新增', canAccessSuperData: false, addIcon: 'fa fa-plus', - dragIcon: 'glyphicon glyphicon-sort', - deleteIcon: 'glyphicon glyphicon-remove', + dragIcon: '', + deleteIcon: '', tabsMode: false, tabsStyle: '', placeholder: '<空>' @@ -751,7 +752,7 @@ export default class ComboControl extends React.Component { data-tooltip="删除" data-position="bottom" > - + {deleteIcon ? : } ); } @@ -888,7 +889,8 @@ export default class ComboControl extends React.Component { `Combo Combo--multi`, multiLine ? `Combo--ver` : `Combo--hor`, noBorder ? `Combo--noBorder` : '', - disabled ? 'is-disabled' : '' + disabled ? 'is-disabled' : '', + (!disabled && draggable && Array.isArray(value) && value.length > 1) ? 'is-draggable' : '', )} >
@@ -896,18 +898,18 @@ export default class ComboControl extends React.Component { ? value.map((value, index, thelist) => { const toolbar: Array = []; - if (!disabled && draggable && thelist.length > 1) { - toolbar.push( - - - - ); - } + // if (!disabled && draggable && thelist.length > 1) { + // toolbar.push( + // + // + // + // ); + // } if ( finnalRemovable && // 表达式判断单条是否可删除 @@ -926,7 +928,7 @@ export default class ComboControl extends React.Component { data-tooltip="删除" data-position="bottom" > - + {deleteIcon ? : } ); } @@ -954,6 +956,17 @@ export default class ComboControl extends React.Component { className={cx(`Combo-item`)} key={this.keys[index] || (this.keys[index] = guid())} > + {!disabled && draggable && thelist.length > 1 ? ( + + ): null} {condition && typeSwitchable !== false ? (