优化样式

docs/components/form/table.md

@@ -260,12 +260,11 @@ order: 54
         {
           "label": "A",
           "name": "a",
-          "quickEdit": true
+          "quickEdit": false
         },
         {
           "label": "B",
-          "name": "b",
-          "quickEdit": true
+          "name": "b"
         }
       ]
     }

examples/components/Form/Table.jsx

@@ -56,17 +56,12 @@ export default {
             label: 'Color',
             name: 'color',
             quickEdit: {
-              type: 'color',
-              mode: 'inline'
+              type: 'color'
             }
           },
           {
             label: '说明文字',
-            name: 'name',
-            quickEdit: {
-              type: 'text',
-              mode: 'inline'
-            }
+            name: 'name'
           }
         ]
       },

scss/components/_table.scss

@@ -243,10 +243,10 @@
         font-weight: $fontWeightNormal;
         white-space: nowrap;
 
-        .#{$ns}TableCell--title {
-          display: flex;
-          align-items: center;
-        }
+        // .#{$ns}TableCell--title {
+        //   display: flex;
+        //   align-items: center;
+        // }
         .#{$ns}Remark {
           margin-left: $gap-xs;
         }

scss/components/form/_form.scss

@@ -328,3 +328,7 @@
     }
   }
 }
+
+.#{$ns}Form--quickEdit {
+  min-width: $Form-control-widthSm;
+}

src/renderers/Form/Table.tsx

@@ -211,14 +211,19 @@ export default class FormTable extends React.Component<TableProps, TableState> {
   }
 
   addItem(index: number, payload: any = this.props.scaffold) {
-    const {value, onChange} = this.props;
+    const {value, onChange, needConfirm} = this.props;
     let newValue = Array.isArray(value) ? value.concat() : [];
     newValue.splice(index + 1, 0, {
       ...payload
     });
     onChange(newValue);
     index = Math.min(index + 1, newValue.length - 1);
-    this.startEdit(index, newValue[index], true);
+
+    if (needConfirm === false) {
+      onChange(newValue);
+    } else {
+      this.startEdit(index, newValue[index], true);
+    }
   }
 
   startEdit(index: number, editting?: any, isCreate: boolean = false) {
@@ -544,9 +549,11 @@ export default class FormTable extends React.Component<TableProps, TableState> {
       columns.push({
         type: 'operation',
         buttons: btns,
-        width: 150,
         label: __('操作'),
-        className: 'v-middle'
+        className: 'v-middle nowrap',
+        fixed: 'right',
+        width: '1%',
+        innerClassName: 'm-n'
       });
     }
 
@@ -563,14 +570,11 @@ export default class FormTable extends React.Component<TableProps, TableState> {
     const newValue = Array.isArray(value) ? value.concat() : [];
 
     if (~this.state.editIndex) {
-      this.setState(
-        {
-          editting: this.editting = {
-            ...rows
-          }
-        },
-        needConfirm === false ? this.confirmEdit : undefined
-      );
+      this.setState({
+        editting: this.editting = {
+          ...rows
+        }
+      });
       return;
     } else if (Array.isArray(rows)) {
       (rowIndexes as Array<number>).forEach((rowIndex, index) => {