Merge pull request #11012 from zhangtao07/master

fix: 修复crud2翻页及搜索重置不生效问题
baidu · Oct 11, 2024 · 91ab26c · 91ab26c
2 parents 5402322 + 04c9487
commit 91ab26c
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 8 deletions.
diff --git a/packages/amis-editor/src/plugin/CRUD2/BaseCRUD.tsx b/packages/amis-editor/src/plugin/CRUD2/BaseCRUD.tsx
@@ -802,6 +802,7 @@ export class BaseCRUDPlugin extends BasePlugin {
               this.addFeatToToolbar(schema, newCompSchema, 'footer', 'right');
             }
             form.setValues({
+              perPage: value !== 'more' ? undefined : schema.perPage,
               footerToolbar: schema.footerToolbar,
               headerToolbar: schema.headerToolbar
             });

diff --git a/packages/amis-editor/src/renderer/crud2-control/CRUDFiltersControl.tsx b/packages/amis-editor/src/renderer/crud2-control/CRUDFiltersControl.tsx
@@ -18,7 +18,7 @@ import {
   autobind
 } from 'amis';
 import {TooltipWrapper} from 'amis-ui';
-import {DSFeatureEnum} from '../../builder/constants';
+import {DSFeatureEnum, ModelDSBuilderKey} from '../../builder/constants';
 import {traverseSchemaDeep} from '../../builder/utils';
 import {deepRemove} from '../../plugin/CRUD2/utils';
 
@@ -650,7 +650,8 @@ export class CRUDFiltersControl extends React.Component<
 
   @autobind
   async handleToggle(checked: boolean) {
-    const {feat, builder} = this.props;
+    const {manager, nodeId, feat, builder} = this.props;
+    const store = manager.store;
     this.setState({loading: true, checked});
 
     try {
@@ -665,6 +666,23 @@ export class CRUDFiltersControl extends React.Component<
       if (feat === DSFeatureEnum.FuzzyQuery && builder.filterByFeat(feat)) {
         await this.updateFuzzyQuery(checked);
       }
+
+      // crud模型实体每次都需要重新生成jsonql的筛选条件
+      if (builder.key === ModelDSBuilderKey) {
+        const node = store.getNodeById(nodeId);
+        const crudSchema = node?.schema;
+        if (crudSchema) {
+          let schema = await builder.buildApiSchema({
+            schema: node.schema,
+            renderer: 'crud',
+            sourceKey: 'api',
+            feat: DSFeatureEnum.List
+          });
+          node.updateSchema({
+            api: schema.api
+          });
+        }
+      }
     } catch (error) {}
 
     this.setState({loading: false, checked});

diff --git a/packages/amis-ui/scss/components/_table.scss b/packages/amis-ui/scss/components/_table.scss
@@ -262,8 +262,13 @@
 
       & > .#{$ns}Form,
       & > .#{$ns}Form-item > .#{$ns}Form-control:not(.is-thin) {
-        // todo 优化这个，有些表单项宽度其实是很小的比如 switch，button，checkbox，radio
         min-width: var(--Form-control-widthBase);
+
+        &.#{$ns}CheckboxControl,
+        &.#{$ns}SwitchControl,
+        &.#{$ns}RadiosControl {
+          min-width: auto;
+        }
       }
 
       .#{$ns}Form-static {

diff --git a/packages/amis/src/renderers/CRUD2.tsx b/packages/amis/src/renderers/CRUD2.tsx
@@ -30,7 +30,8 @@ import {
   isApiOutdated,
   isPureVariable,
   resolveVariableAndFilter,
-  parsePrimitiveQueryString
+  parsePrimitiveQueryString,
+  JSONTraverse
 } from 'amis-core';
 import pickBy from 'lodash/pickBy';
 import {Html, SpinnerExtraProps} from 'amis-ui';
@@ -285,7 +286,6 @@ export default class CRUD2 extends React.Component<CRUD2Props, any> {
     silentPolling: false,
     autoFillHeight: false,
     showSelection: true,
-    perPage: 10,
     primaryField: 'id',
     parsePrimitiveQuery: true
   };
@@ -350,12 +350,19 @@ export default class CRUD2 extends React.Component<CRUD2Props, any> {
   }
 
   componentDidMount() {
-    const {store, pickerMode, loadType, loadDataOnce, perPage} = this.props;
+    const {store, pickerMode, loadType, loadDataOnce, maxLoadNum} = this.props;
 
     // 初始化分页
-    let pagination = loadType && !!loadDataOnce;
+    let pagination = loadType && !loadDataOnce;
     if (pagination) {
+      // crud2的翻页每页条数是翻页组件里单独配置的
+      let perPage =
+        loadType === 'more'
+          ? this.props.perPage || 10
+          : this.getPaginationPerPage();
       store.changePage(store.page, perPage);
+    } else if (!loadType) {
+      store.changePage(1, maxLoadNum || 500); // 不分页时默认一次最多查询500条(jsonql)
     }
 
     // 初始化筛选条件
@@ -446,6 +453,24 @@ export default class CRUD2 extends React.Component<CRUD2Props, any> {
     clearTimeout(this.timer);
   }
 
+  @autobind
+  getPaginationPerPage() {
+    let perPage = 10;
+    let {headerToolbar, footerToolbar} = this.props;
+    JSONTraverse(
+      {
+        headerToolbar,
+        footerToolbar
+      },
+      (value: any, key: string, host: any) => {
+        if (key === 'type' && value === 'pagination' && !isNaN(host?.perPage)) {
+          perPage = +host.perPage;
+        }
+      }
+    );
+    return perPage;
+  }
+
   getParseQueryOptions(props: CRUD2Props) {
     const {parsePrimitiveQuery} = props;
     type PrimitiveQueryObj = Exclude<
@@ -503,7 +528,7 @@ export default class CRUD2 extends React.Component<CRUD2Props, any> {
    * 加载更多动作处理器
    */
   handleLoadMore() {
-    const {store, perPage} = this.props;
+    const {store, perPage = 10} = this.props;
 
     store.changePage(store.page + 1, perPage);
     this.getData(undefined, undefined, undefined, true);