From 57b6fc06b1b1dd92170380016fec6b94f7ed390a Mon Sep 17 00:00:00 2001
From: 2betop <2betop.cn@gmail.com>
Date: Tue, 18 Aug 2020 10:07:26 +0800
Subject: [PATCH] =?UTF-8?q?Table=20=E6=B7=BB=E5=8A=A0=E9=9D=9E=E7=A1=AE?=
 =?UTF-8?q?=E8=AE=A4=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/form/table.md      | 49 ++++++++++++++++++++++++++++++
 examples/components/Form/Table.jsx |  8 +++--
 src/renderers/Form/Table.tsx       | 46 +++++++++++++++++++++-------
 3 files changed, 89 insertions(+), 14 deletions(-)

diff --git a/docs/components/form/table.md b/docs/components/form/table.md
index b792418c..e5def560 100755
--- a/docs/components/form/table.md
+++ b/docs/components/form/table.md
@@ -224,6 +224,55 @@ order: 54
 }
 ```
 
+## 非确认模式
+
+配置`"needConfirm": false`，不需要确认，那么就是一直就是处于编辑形态。
+
+```schema:height="400" scope="body"
+{
+  "type": "form",
+  "data": {
+    "table": [
+      {
+        "a": "a1",
+        "b": "b1"
+      },
+      {
+        "a": "a2",
+        "b": "b2"
+      },
+      {
+        "a": "a3",
+        "b": "b3"
+      }
+    ]
+  },
+  "api": "https://houtai.baidu.com/api/mock2/form/saveForm",
+  "controls": [
+    {
+      "type": "table",
+      "name": "table",
+      "label": "Table",
+      "needConfirm": false,
+      "addable": true,
+      "removable": true,
+      "columns": [
+        {
+          "label": "A",
+          "name": "a",
+          "quickEdit": true
+        },
+        {
+          "label": "B",
+          "name": "b",
+          "quickEdit": true
+        }
+      ]
+    }
+  ]
+}
+```
+
 ## 属性表
 
 | 属性名                       | 类型                    | 默认值           | 说明                                     |
diff --git a/examples/components/Form/Table.jsx b/examples/components/Form/Table.jsx
index aaa08107..85bd1189 100644
--- a/examples/components/Form/Table.jsx
+++ b/examples/components/Form/Table.jsx
@@ -48,13 +48,16 @@ export default {
         name: 'colors',
         label: 'Table',
         draggable: true,
+        addable: true,
+        removable: true,
+        needConfirm: false,
         columns: [
           {
             label: 'Color',
             name: 'color',
             quickEdit: {
               type: 'color',
-              saveImmediately: true
+              mode: 'inline'
             }
           },
           {
@@ -62,8 +65,7 @@ export default {
             name: 'name',
             quickEdit: {
               type: 'text',
-              mode: 'inline',
-              saveImmediately: true
+              mode: 'inline'
             }
           }
         ]
diff --git a/src/renderers/Form/Table.tsx b/src/renderers/Form/Table.tsx
index 1caf49aa..641e11ca 100644
--- a/src/renderers/Form/Table.tsx
+++ b/src/renderers/Form/Table.tsx
@@ -36,6 +36,7 @@ export interface TableProps extends FormControlProps {
   scaffold?: any;
   deleteConfirmText?: string;
   valueField?: string;
+  needConfirm?: boolean;
 }
 
 export interface TableState {
@@ -69,7 +70,8 @@ export default class FormTable extends React.Component<TableProps, TableState> {
     'editable',
     'addApi',
     'updateApi',
-    'deleteApi'
+    'deleteApi',
+    'needConfirm'
   ];
 
   entries: SimpleMap<any, number>;
@@ -359,12 +361,13 @@ export default class FormTable extends React.Component<TableProps, TableState> {
       : [];
     const ns = this.props.classPrefix;
     const __ = this.props.translate;
+    const needConfirm = this.props.needConfirm;
 
     let btns = [];
     if (props.addable && props.showAddBtn !== false) {
       btns.push({
         children: ({key, rowIndex}: {key: any; rowIndex: number}) =>
-          ~this.state.editIndex ? null : (
+          ~this.state.editIndex && needConfirm !== false ? null : (
             <Button
               classPrefix={ns}
               size="sm"
@@ -385,7 +388,23 @@ export default class FormTable extends React.Component<TableProps, TableState> {
       });
     }
 
-    if (props.editable) {
+    if (props.needConfirm === false) {
+      columns = columns.map(column => {
+        const quickEdit = column.quickEdit;
+
+        return quickEdit === false
+          ? omit(column, ['quickEdit'])
+          : {
+              ...column,
+              quickEdit: {
+                type: 'text',
+                ...quickEdit,
+                saveImmediately: true,
+                mode: 'inline'
+              }
+            };
+      });
+    } else if (props.editable) {
       columns = columns.map(column => {
         const quickEdit =
           !isCreateMode && column.hasOwnProperty('quickEditOnUpdate')
@@ -497,7 +516,8 @@ export default class FormTable extends React.Component<TableProps, TableState> {
           rowIndex: number;
           data: any;
         }) =>
-          ~this.state.editIndex || (data && data.__isPlaceholder) ? null : (
+          (~this.state.editIndex || (data && data.__isPlaceholder)) &&
+          needConfirm !== false ? null : (
             <Button
               classPrefix={ns}
               size="sm"
@@ -525,7 +545,8 @@ export default class FormTable extends React.Component<TableProps, TableState> {
         type: 'operation',
         buttons: btns,
         width: 150,
-        label: __('操作')
+        label: __('操作'),
+        className: 'v-middle'
       });
     }
 
@@ -537,16 +558,19 @@ export default class FormTable extends React.Component<TableProps, TableState> {
     diff: Array<object> | object,
     rowIndexes: Array<number> | number
   ) {
-    const {onChange, value} = this.props;
+    const {onChange, value, needConfirm} = this.props;
 
     const newValue = Array.isArray(value) ? value.concat() : [];
 
     if (~this.state.editIndex) {
-      this.setState({
-        editting: this.editting = {
-          ...rows
-        }
-      });
+      this.setState(
+        {
+          editting: this.editting = {
+            ...rows
+          }
+        },
+        needConfirm === false ? this.confirmEdit : undefined
+      );
       return;
     } else if (Array.isArray(rows)) {
       (rowIndexes as Array<number>).forEach((rowIndex, index) => {