form/table 快速编辑不需要确认这个交互

2019-12-04 17:45:37 +08:00 · 2019-12-04 17:45:37 +08:00 · aaaed64334
parent 176581c167
commit aaaed64334
3 changed files with 173 additions and 166 deletions
--- 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;
    }
+  }
 }
--- a/src/renderers/Form/Table.tsx
+++ b/src/renderers/Form/Table.tsx
@ -340,9 +340,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
              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<TableProps, TableState> {
              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<TableProps, TableState> {
              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<TableProps, TableState> {
              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<TableProps, TableState> {
              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<TableProps, TableState> {
          {
            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
--- a/src/renderers/Table.tsx
+++ b/src/renderers/Table.tsx
@ -121,7 +121,8 @@ export default class Table extends React.Component<TableProps, object> {
    'itemActions',
    'combineNum',
    'items',
-    'valueField'
+    'valueField',
+    'saveImmediately'
  ];
  static defaultProps: Partial<TableProps> = {
    className: '',
@ -385,14 +386,14 @@ export default class Table extends React.Component<TableProps, object> {
    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<TableProps, object> {
  }

  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 (
        <div className={cx('Table-heading')} key="heading">
-          {store.modified && !hideQuickSaveBtn ? (
+          {!saveImmediately && store.modified && !hideQuickSaveBtn ? (
            <span>
              {`当前有 ${
                store.modified