diff --git a/scss/components/_panel.scss b/scss/components/_panel.scss index 246eba73..3ed613b2 100644 --- a/scss/components/_panel.scss +++ b/scss/components/_panel.scss @@ -1,176 +1,180 @@ .#{$ns}Panel { - margin-bottom: $Panel-marginBottom; - background-color: $Panel-bg; - border: $Panel-border; - border-radius: $Panel-borderRadius; - -webkit-box-shadow: $Panel-boxShadow; - box-shadow: $Panel-boxShadow; + margin-bottom: $Panel-marginBottom; + background-color: $Panel-bg; + border: $Panel-border; + border-radius: $Panel-borderRadius; + -webkit-box-shadow: $Panel-boxShadow; + box-shadow: $Panel-boxShadow; - &-fixedBottom { - position: absolute; + &-fixedBottom { + position: absolute; + background: $white; + z-index: $zindex-affix; + bottom: 999999px; + box-shadow: $Panel-fixedBottom-boxShadow; + border-top: $Panel-fixedBottom-borderTop; + + &.in { + position: fixed; + bottom: 0; + } + } + + /* 主题 */ + &--default { + border-color: $borderColor; + + > .#{$ns}Panel-heading { + background: $Panel--default-bg; + color: $Panel--default-color; + + .badge { + color: $Panel--default-badgeColor; + background: $Panel--default-badgeBg; + } + } + + > .#{$ns}Panel-heading { + border-color: $Panel--default-headingBorderColor; + } + } + + &--primary { + border-color: $primary; + + > .#{$ns}Panel-heading { + background: $primary; + color: $white; + + .badge { + color: $primary; background: $white; - z-index: $zindex-affix; - bottom: 999999px; - box-shadow: $Panel-fixedBottom-boxShadow; - border-top: $Panel-fixedBottom-borderTop; - - &.in { - position: fixed; - bottom: 0; - } + } } - /* 主题 */ - &--default { - border-color: $borderColor; + > .#{$ns}Panel-heading, + > .#{$ns}Panel-footer { + border-color: $primary; + } + } - > .#{$ns}Panel-heading { - background: $Panel--default-bg; - color: $Panel--default-color; + &--success { + border-color: $success; - .badge { - color: $Panel--default-badgeColor; - background: $Panel--default-badgeBg; - } - } + > .#{$ns}Panel-heading { + background: $success; + color: $white; - > .#{$ns}Panel-heading { - border-color: $Panel--default-headingBorderColor; - } + .badge { + color: $success; + background: $white; + } } - &--primary { - border-color: $primary; + > .#{$ns}Panel-heading, + > .#{$ns}Panel-footer { + border-color: $success; + } + } - > .#{$ns}Panel-heading { - background: $primary; - color: $white; + &--info { + border-color: $info; - .badge { - color: $primary; - background: $white; - } - } + > .#{$ns}Panel-heading { + background: $info; + color: $white; - > .#{$ns}Panel-heading, - > .#{$ns}Panel-footer { - border-color: $primary; - } + .badge { + color: $info; + background: $white; + } } - &--success { - border-color: $success; + > .#{$ns}Panel-heading, + > .#{$ns}Panel-footer { + border-color: $info; + } + } - > .#{$ns}Panel-heading { - background: $success; - color: $white; + &--warning { + border-color: $warning; - .badge { - color: $success; - background: $white; - } - } + > .#{$ns}Panel-heading { + background: $warning; + color: $white; - > .#{$ns}Panel-heading, - > .#{$ns}Panel-footer { - border-color: $success; - } + .badge { + color: $warning; + background: $white; + } } - &--info { - border-color: $info; + > .#{$ns}Panel-heading, + > .#{$ns}Panel-footer { + border-color: $warning; + } + } - > .#{$ns}Panel-heading { - background: $info; - color: $white; + &--danger { + border-color: $danger; - .badge { - color: $info; - background: $white; - } - } + > .#{$ns}Panel-heading { + background: $danger; + color: $white; - > .#{$ns}Panel-heading, - > .#{$ns}Panel-footer { - border-color: $info; - } + .badge { + color: $danger; + background: $white; + } } - &--warning { - border-color: $warning; + > .#{$ns}Panel-heading, + > .#{$ns}Panel-footer { + border-color: $danger; + } + } - > .#{$ns}Panel-heading { - background: $warning; - color: $white; + /* 子组件 */ + &-heading { + padding: $Panel-headingPadding; + border-bottom: $Panel-headingBorderBottom; + border-radius: $Panel-headingBorderRadius; + } - .badge { - color: $warning; - background: $white; - } - } + &-title { + margin-top: $Panel-titleMarginTop; + margin-bottom: $Panel-titleMarginBottom; + font-size: $Panel-titleFontSize; + color: $Panel-titleColor; + } - > .#{$ns}Panel-heading, - > .#{$ns}Panel-footer { - border-color: $warning; - } + &-body { + padding: $Panel-bodyPadding; + } + + &-footer { + border-color: $Panel-footerBorderColor; + border-radius: $Panel-footerBorderRadius; + background: $Panel-footerBg; + padding: $Panel-footerPadding; + border-style: solid; + border-width: $Panel-borderWidth 0 0 0; + + .#{$ns}Button + .#{$ns}Button { + margin-left: $Panel-footerButtomMarginLeft; + } + } + + &-btnToolbar { + @include clearfix(); + text-align: $Panel-btnToolbarTextAlign; + + .#{$ns}Button { + margin-left: $Panel-footerButtomMarginLeft; } - &--danger { - border-color: $danger; - - > .#{$ns}Panel-heading { - background: $danger; - color: $white; - - .badge { - color: $danger; - background: $white; - } - } - - > .#{$ns}Panel-heading, - > .#{$ns}Panel-footer { - border-color: $danger; - } - } - - /* 子组件 */ - &-heading { - padding: $Panel-headingPadding; - border-bottom: $Panel-headingBorderBottom; - border-radius: $Panel-headingBorderRadius; - } - - &-title { - margin-top: $Panel-titleMarginTop; - margin-bottom: $Panel-titleMarginBottom; - font-size: $Panel-titleFontSize; - color: $Panel-titleColor; - } - - &-body { - padding: $Panel-bodyPadding; - } - - &-footer { - border-color: $Panel-footerBorderColor; - border-radius: $Panel-footerBorderRadius; - background: $Panel-footerBg; - padding: $Panel-footerPadding; - border-style: solid; - border-width: $Panel-borderWidth 0 0 0; - - .#{$ns}Button + .#{$ns}Button { - margin-left: $Panel-footerButtomMarginLeft; - } - } - - &-btnToolbar { - @include clearfix(); - text-align: $Panel-btnToolbarTextAlign; - - .#{$ns}Button { - margin-left: $Panel-footerButtomMarginLeft; - } + &:empty { + display: none; } + } } diff --git a/src/renderers/Form/Table.tsx b/src/renderers/Form/Table.tsx index f36b756c..08b3b9c7 100644 --- a/src/renderers/Form/Table.tsx +++ b/src/renderers/Form/Table.tsx @@ -340,9 +340,7 @@ export default class FormTable extends React.Component { level="link" tooltip="新增一行" tooltipContainer={ - env && env.getModalContainer - ? env.getModalContainer - : undefined + env && env.getModalContainer ? env.getModalContainer : undefined } onClick={this.addItem.bind(this, rowIndex, undefined)} > @@ -391,9 +389,7 @@ export default class FormTable extends React.Component { level="link" tooltip="编辑当前行" tooltipContainer={ - env && env.getModalContainer - ? env.getModalContainer - : undefined + env && env.getModalContainer ? env.getModalContainer : undefined } onClick={() => this.startEdit(rowIndex)} > @@ -417,9 +413,7 @@ export default class FormTable extends React.Component { level="link" tooltip="保存" tooltipContainer={ - env && env.getModalContainer - ? env.getModalContainer - : undefined + env && env.getModalContainer ? env.getModalContainer : undefined } onClick={this.confirmEdit} > @@ -443,9 +437,7 @@ export default class FormTable extends React.Component { level="link" tooltip="取消" tooltipContainer={ - env && env.getModalContainer - ? env.getModalContainer - : undefined + env && env.getModalContainer ? env.getModalContainer : undefined } onClick={this.cancelEdit} > @@ -479,9 +471,7 @@ export default class FormTable extends React.Component { level="link" tooltip="删除当前行" tooltipContainer={ - env && env.getModalContainer - ? env.getModalContainer - : undefined + env && env.getModalContainer ? env.getModalContainer : undefined } onClick={this.removeItem.bind(this, rowIndex)} > @@ -591,12 +581,13 @@ export default class FormTable extends React.Component { { type: 'table', placeholder, - disabled, columns: this.state.columns, affixHeader: false }, { value: undefined, + saveImmediately: true, + disabled, draggable: draggable && !~this.state.editIndex, items: (Array.isArray(value) && value.length ? value diff --git a/src/renderers/Table.tsx b/src/renderers/Table.tsx index 7b1a8d11..6fa2a0b3 100644 --- a/src/renderers/Table.tsx +++ b/src/renderers/Table.tsx @@ -121,7 +121,8 @@ export default class Table extends React.Component { 'itemActions', 'combineNum', 'items', - 'valueField' + 'valueField', + 'saveImmediately' ]; static defaultProps: Partial = { className: '', @@ -385,14 +386,14 @@ export default class Table extends React.Component { saveImmediately?: boolean | any, savePristine?: boolean ) { - const {onSave} = this.props; + const {onSave, saveImmediately: propsSaveImmediately} = this.props; item.change(values, savePristine); // 值发生变化了,需要通过 onSelect 通知到外面,否则会出现数据不同步的问题 this.syncSelected(); - if (!saveImmediately || savePristine) { + if ((!saveImmediately && !propsSaveImmediately) || savePristine) { return; } @@ -850,12 +851,23 @@ export default class Table extends React.Component { } renderHeading() { - let {title, store, hideQuickSaveBtn, data, classnames: cx} = this.props; + let { + title, + store, + hideQuickSaveBtn, + data, + classnames: cx, + saveImmediately + } = this.props; - if (title || (store.modified && !hideQuickSaveBtn) || store.moved) { + if ( + title || + (!saveImmediately && store.modified && !hideQuickSaveBtn) || + store.moved + ) { return (
- {store.modified && !hideQuickSaveBtn ? ( + {!saveImmediately && store.modified && !hideQuickSaveBtn ? ( {`当前有 ${ store.modified