fix: crud 表格筛选 & 数据域数组数据获取 & 列表渲染方法抽象方便编辑器重写 & 公式编辑器变量高亮内容包括${} (#4668)

* fix: crud 表格筛选 & 数据域数组数据获取 & 列表渲染方法抽象方便编辑器重写 * fix: ts + 列表渲染问题
2024-11-30 02:58:05 +08:00 · 2022-06-21 15:50:58 +08:00 · 2022-06-21 15:50:58 +08:00 · b2309bb730
commit b2309bb730
parent e17a07be76
8 changed files with 92 additions and 52 deletions
--- a/packages/amis-core/src/utils/DataScope.ts
+++ b/packages/amis-core/src/utils/DataScope.ts
@ -132,14 +132,19 @@ export class DataScope {
    options: Array<any>,
    schema: JSONSchema,
    path: string = '',
-    key: string = ''
+    key: string = '',
+    /** 是否数组元素，数组元素的内容将获取每个成员的对应值 */
+    isArrayItem = false,
+    /** 不是所有的都可以选择，但不影响子元素 */
+    disabled?: boolean
  ) {
    // todo 支持 oneOf, anyOf
    const option: any = {
      label: schema.title || key,
      value: path,
      type: schema.type,
-      description: schema.description
+      tag: schema.description ?? schema.type,
+      disabled
    };

    options.push(option);
@ -150,29 +155,43 @@ export class DataScope {

      keys.forEach(key => {
        const child: any = schema.properties![key];
+        const newPath = isArrayItem ? `ARRAYMAP(${path}, item => item.${key})` : (path + (path ? '.' : '') + key);

        this.buildOptions(
          option.children,
          child,
-          path + (path ? '.' : '') + key,
-          key
+          newPath,
+          key,
+          isArrayItem,
+          false
        );
      });
    } else if (schema.type === 'array' && schema.items) {
      option.children = [];
+      
      this.buildOptions(
        option.children,
        {
-          title: 'Member',
+          title: '成员',
          ...(schema.items as any)
        },
-        path + (path ? '.' : '') + 'items',
-        'items'
+        path,
+        'items',
+        true,
+        true
+      );
+
+      this.buildOptions(
+        option.children,
+        {
+          title: '总数',
+          type: 'number'
+        },
+        path + (path ? '.' : '') + 'length',
+        'length',
+        true,
+        isArrayItem
      );
-      option.children = mapTree(option.children, item => ({
-        ...item,
-        disabled: true
-      }));
    }
  }

--- a/packages/amis-core/src/utils/helper.ts
+++ b/packages/amis-core/src/utils/helper.ts
@ -780,14 +780,16 @@ export function mapTree<T extends TreeItem>(
 */
 export function eachTree<T extends TreeItem>(
  tree: Array<T>,
-  iterator: (item: T, key: number, level: number) => any,
-  level: number = 1
+  iterator: (item: T, key: number, level: number, paths?: Array<T>) => any,
+  level: number = 1,
+  paths: Array<T> = []
 ) {
  tree.map((item, index) => {
-    iterator(item, index, level);
+    let currentPath = paths.concat(item);
+    iterator(item, index, level, currentPath);

    if (item.children?.splice) {
-      eachTree(item.children, iterator, level + 1);
+      eachTree(item.children, iterator, level + 1, currentPath);
    }
  });
 }
--- a/packages/amis-ui/src/components/formula/plugin.ts
+++ b/packages/amis-ui/src/components/formula/plugin.ts
@ -172,7 +172,7 @@ export class FormulaPlugin {

    eachTree(variables, item => {
      if (item.value) {
-        const key = item.value;
+        const key = `\${${item.value}}`;
        varMap[key] = item.label;
      }
    });
--- a/packages/amis/src/renderers/CRUD2.tsx
+++ b/packages/amis/src/renderers/CRUD2.tsx
@ -1156,7 +1156,8 @@ export default class CRUD2 extends React.Component<CRUD2Props, any> {
            popOverContainer,
            onSave: this.handleSave,
            onSaveOrder: this.handleSaveOrder,
-            onQuery: this.handleTableQuery,
+            onSearch: this.handleTableQuery,
+            onSort: this.handleTableQuery,
            onSelect: this.handleSelect,
            data: store.mergedData
          }
--- a/packages/amis/src/renderers/List.tsx
+++ b/packages/amis/src/renderers/List.tsx
@ -914,6 +914,52 @@ export default class List extends React.Component<ListProps, object> {
    return void 0;
  }

+  // editor重写该方法，不要改名或参数
+  renderListItem(index: number, template: ListItemSchema | undefined, item: IItem, itemClassName: string) {
+    const {
+      render,
+      multiple,
+      store,
+      onAction,
+      hideCheckToggler,
+      checkOnItemClick,
+      itemAction,
+      classnames: cx,
+      translate: __
+    } = this.props;
+
+    return render(
+      `${index}`,
+      {
+        type: 'list-item',
+        ...template
+      },
+      {
+        key: item.index,
+        className: cx(itemClassName, {
+          'is-checked': item.checked,
+          'is-modified': item.modified,
+          'is-moved': item.moved
+        }),
+        selectable: store.selectable,
+        checkable: item.checkable,
+        multiple,
+        item,
+        itemIndex: item.index,
+        hideCheckToggler,
+        checkOnItemClick,
+        itemAction,
+        selected: item.checked,
+        onCheck: this.handleCheck,
+        dragging: store.dragging,
+        onAction,
+        data: item.locals,
+        onQuickChange: store.dragging ? null : this.handleQuickChange,
+        popOverContainer: this.getPopOverContainer
+      }
+    );
+  }
+
  render() {
    const {
      className,
@ -957,36 +1003,7 @@ export default class List extends React.Component<ListProps, object> {
        {store.items.length ? (
          <div className={cx('List-items')}>
            {store.items.map((item, index) =>
-              render(
-                `${index}`,
-                {
-                  type: 'list-item',
-                  ...listItem
-                },
-                {
-                  key: item.index,
-                  className: cx(itemClassName, {
-                    'is-checked': item.checked,
-                    'is-modified': item.modified,
-                    'is-moved': item.moved
-                  }),
-                  selectable: store.selectable,
-                  checkable: item.checkable,
-                  multiple,
-                  item,
-                  itemIndex: item.index,
-                  hideCheckToggler,
-                  checkOnItemClick,
-                  itemAction,
-                  selected: item.checked,
-                  onCheck: this.handleCheck,
-                  dragging: store.dragging,
-                  onAction,
-                  data: item.locals,
-                  onQuickChange: store.dragging ? null : this.handleQuickChange,
-                  popOverContainer: this.getPopOverContainer
-                }
-              )
+              this.renderListItem(index, listItem, item, itemClassName)
            )}
          </div>
        ) : (
--- a/packages/amis/src/renderers/Table-v2/ColumnToggler.tsx
+++ b/packages/amis/src/renderers/Table-v2/ColumnToggler.tsx
@ -2,11 +2,11 @@ import React from 'react';
 import {
  Renderer,
  createObject,
-  isVisible,
-  BaseSchema
+  isVisible
 } from 'amis-core';
 import {Checkbox} from 'amis-ui';
 import ColumnToggler, {ColumnTogglerProps} from '../Table/ColumnToggler';
+import { BaseSchema } from '../../Schema';

 export interface ColumnTogglerSchema extends BaseSchema {
  label?: string;
--- a/packages/amis/src/renderers/Table-v2/index.tsx
+++ b/packages/amis/src/renderers/Table-v2/index.tsx
@ -31,6 +31,7 @@ import {HeadCellSearchDropDown} from './HeadCellSearchDropdown';
 import './TableCell';
 import './ColumnToggler';
 import type {SortProps} from 'amis-ui/lib/components/table';
+import { Action } from '../../types';

 /**
 * Table 表格v2渲染器。
--- a/packages/amis/src/renderers/Table/ColumnToggler.tsx
+++ b/packages/amis/src/renderers/Table/ColumnToggler.tsx
@ -18,7 +18,7 @@ import {generateIcon} from 'amis-core';
 import {RootClose} from 'amis-core';
 import type {TooltipObject} from 'amis-ui/lib/components/TooltipWrapper';
 import {IColumn} from 'amis-core/lib/store/table';
-import type {IColumn as IColumn2} from 'amis-core/lib/store/table-v2';
+import type {IColumnV2} from 'amis-core/lib/store/table-v2';

 export interface ColumnTogglerProps extends RendererProps {
  /**
@ -114,14 +114,14 @@ export interface ColumnTogglerProps extends RendererProps {
  /**
   * 列数据
   */
-  columns: Array<IColumn | IColumn2>;
+  columns: Array<IColumn | IColumnV2>;

  /**
   * 弹窗底部按钮大小
   */
  footerBtnSize?: 'xs' | 'sm' | 'md' | 'lg';

-  activeToggaleColumns: Array<IColumn | IColumn2>;
+  activeToggaleColumns: Array<IColumn | IColumnV2>;
  onColumnToggle: (columns: Array<IColumn>) => void;
  modalContainer?: () => HTMLElement;
 }