Merge pull request #11426 from 2betop/chore-crud-1224

chore: 补充 CRUD 配置面板
baidu · Dec 25, 2024 · 237d511 · 237d511
2 parents 2c9fb07 + 7da2c57
commit 237d511
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 70 deletions.
diff --git a/packages/amis-core/src/utils/debug.tsx b/packages/amis-core/src/utils/debug.tsx
@@ -229,7 +229,7 @@ const AMISDebug = observer(({store}: {store: AMISDebugStore}) => {
     panelRef.current!.addEventListener('mouseup', handlePanelMouseUp);
 
     return () => {
-      panelRef.current!.removeEventListener('mouseup', handlePanelMouseUp);
+      panelRef.current?.removeEventListener('mouseup', handlePanelMouseUp);
     };
   }, []);
 

diff --git a/packages/amis-editor/src/plugin/CRUD.tsx b/packages/amis-editor/src/plugin/CRUD.tsx
@@ -1195,6 +1195,33 @@ export class CRUDPlugin extends BasePlugin {
             hiddenOn: 'this.mode && this.mode !== "table" || this.pickerMode'
           },
 
+          getSchemaTpl('switch', {
+            name: 'selectable',
+            label: '开启选择',
+            pipeIn: defaultValue(false),
+            labelRemark: {
+              className: 'm-l-xs',
+              trigger: 'click',
+              rootClose: true,
+              content: '开启后即便没有批量操作按钮也显示可点选',
+              placement: 'left'
+            }
+          }),
+
+          getSchemaTpl('switch', {
+            name: 'multiple',
+            label: '开启多选',
+            visibleOn: '${selectable}',
+            pipeIn: defaultValue(true),
+            labelRemark: {
+              className: 'm-l-xs',
+              trigger: 'click',
+              rootClose: true,
+              content: '控制是单选还是多选',
+              placement: 'left'
+            }
+          }),
+
           getSchemaTpl('switch', {
             name: 'syncLocation',
             label: '同步地址栏',

diff --git a/packages/amis-editor/src/plugin/Table.tsx b/packages/amis-editor/src/plugin/Table.tsx
@@ -688,6 +688,12 @@ export class TablePlugin extends BasePlugin {
                 ]
               },
 
+              getSchemaTpl('switch', {
+                name: 'showIndex',
+                label: '是否显示序号',
+                pipeIn: defaultValue(false)
+              }),
+
               getSchemaTpl('switch', {
                 name: 'affixHeader',
                 label: '是否固定表头',

diff --git a/packages/amis/src/renderers/Table/Cell.tsx b/packages/amis/src/renderers/Table/Cell.tsx
@@ -77,71 +77,6 @@ export default function Cell({
     onCheck?.(item);
   }, []);
 
-  if (column.type === '__checkme') {
-    return (
-      <td
-        style={style}
-        className={cx(column.pristine.className, stickyClassName)}
-        {...testIdBuilder?.getTestId()}
-      >
-        <Checkbox
-          classPrefix={ns}
-          type={multiple ? 'checkbox' : 'radio'}
-          partial={multiple ? item.partial : false}
-          checked={item.checked || (multiple ? item.partial : false)}
-          disabled={item.checkdisable || !item.checkable}
-          onChange={onCheckboxChange}
-          testIdBuilder={testIdBuilder?.getChild('chekbx')}
-        />
-      </td>
-    );
-  } else if (column.type === '__dragme') {
-    return (
-      <td
-        style={style}
-        className={cx(column.pristine.className, stickyClassName, {
-          'is-dragDisabled': !item.draggable
-        })}
-        {...testIdBuilder?.getChild('drag').getTestId()}
-      >
-        {item.draggable ? <Icon icon="drag" className="icon" /> : null}
-      </td>
-    );
-  } else if (column.type === '__expandme') {
-    return (
-      <td
-        style={style}
-        className={cx(column.pristine.className, stickyClassName)}
-      >
-        {item.expandable ? (
-          <a
-            className={cx('Table-expandBtn', item.expanded ? 'is-active' : '')}
-            // data-tooltip="展开/收起"
-            // data-position="top"
-            onClick={item.toggleExpanded}
-            {...testIdBuilder
-              ?.getChild(item.expanded ? 'fold' : 'expand')
-              .getTestId()}
-          >
-            <Icon icon="right-arrow-bold" className="icon" />
-          </a>
-        ) : null}
-      </td>
-    );
-  } else if (column.type === '__index') {
-    return (
-      <td
-        style={style}
-        className={cx(column.pristine.className, stickyClassName)}
-      >
-        {`${filterItemIndex ? filterItemIndex(item.path, item) : item.path}`
-          .split('.')
-          .map(a => parseInt(a, 10) + 1)
-          .join('.')}
-      </td>
-    );
-  }
-
   let [prefix, affix, addtionalClassName] = React.useMemo(() => {
     let prefix: React.ReactNode[] = [];
     let affix: React.ReactNode[] = [];
@@ -273,6 +208,71 @@ export default function Cell({
   };
   delete subProps.label;
 
+  if (column.type === '__checkme') {
+    return (
+      <td
+        style={style}
+        className={cx(column.pristine.className, stickyClassName)}
+        {...testIdBuilder?.getTestId()}
+      >
+        <Checkbox
+          classPrefix={ns}
+          type={multiple ? 'checkbox' : 'radio'}
+          partial={multiple ? item.partial : false}
+          checked={item.checked || (multiple ? item.partial : false)}
+          disabled={item.checkdisable || !item.checkable}
+          onChange={onCheckboxChange}
+          testIdBuilder={testIdBuilder?.getChild('chekbx')}
+        />
+      </td>
+    );
+  } else if (column.type === '__dragme') {
+    return (
+      <td
+        style={style}
+        className={cx(column.pristine.className, stickyClassName, {
+          'is-dragDisabled': !item.draggable
+        })}
+        {...testIdBuilder?.getChild('drag').getTestId()}
+      >
+        {item.draggable ? <Icon icon="drag" className="icon" /> : null}
+      </td>
+    );
+  } else if (column.type === '__expandme') {
+    return (
+      <td
+        style={style}
+        className={cx(column.pristine.className, stickyClassName)}
+      >
+        {item.expandable ? (
+          <a
+            className={cx('Table-expandBtn', item.expanded ? 'is-active' : '')}
+            // data-tooltip="展开/收起"
+            // data-position="top"
+            onClick={item.toggleExpanded}
+            {...testIdBuilder
+              ?.getChild(item.expanded ? 'fold' : 'expand')
+              .getTestId()}
+          >
+            <Icon icon="right-arrow-bold" className="icon" />
+          </a>
+        ) : null}
+      </td>
+    );
+  } else if (column.type === '__index') {
+    return (
+      <td
+        style={style}
+        className={cx(column.pristine.className, stickyClassName)}
+      >
+        {`${filterItemIndex ? filterItemIndex(item.path, item) : item.path}`
+          .split('.')
+          .map(a => parseInt(a, 10) + 1)
+          .join('.')}
+      </td>
+    );
+  }
+
   return render(
     region,
     {

diff --git a/packages/amis/src/renderers/Table/TableRow.tsx b/packages/amis/src/renderers/Table/TableRow.tsx
@@ -247,13 +247,13 @@ export class TableRow<
               <tbody>
                 {ignoreFootableContent
                   ? columns.map(column => (
-                      <tr key={column.index}>
+                      <tr key={column.id}>
                         {column.label !== false ? <th></th> : null}
                         <td></td>
                       </tr>
                     ))
                   : columns.map(column => (
-                      <tr key={column.index}>
+                      <tr key={column.id}>
                         {column.label !== false ? (
                           <th>
                             {render(
@@ -275,14 +275,14 @@ export class TableRow<
                               rowIndexPath: item.path,
                               colIndex: column.index,
                               rowPath,
-                              key: column.index,
+                              key: column.id,
                               onAction: this.handleAction,
                               onQuickChange: this.handleQuickChange,
                               onChange: this.handleChange
                             }
                           )
                         ) : (
-                          <td key={column.index}>
+                          <td key={column.id}>
                             <div className={cx('Table-emptyBlock')}>&nbsp;</div>
                           </td>
                         )}