feat: 添加虚假的分页

src/pages/member/memberFlowRule/components/FlowRuleForm/components/ComingConfigTable/index.less

+.config-table {
+  :global {
+    .ant-pagination-options-size-changer {
+      &.ant-select {
+        width: auto !important;
+      }
+    }
+  }
+}
\ No newline at end of file

src/pages/member/memberFlowRule/components/FlowRuleForm/components/ComingConfigTable/index.tsx

@@ -2,16 +2,20 @@
  * @Author: XieZhiXiong
  * @Date: 2021-05-28 15:24:56
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-06-01 14:44:31
+ * @LastEditTime: 2021-06-18 15:57:10
  * @Description: 
  */
-import React from 'react';
+import React, { useState } from 'react';
 import { Popconfirm, Button, Row, Col } from 'antd';
 import theme from '../../../../../../../../config/lingxi.theme.config';
 import PolymericTable from '@/components/PolymericTable';
 import { EditableColumns } from '@/components/PolymericTable/interface';
+import { pagingArr } from './utils';
 import ComingCtl, { ValueType as ComingCtlValueType } from '../ComingCtl';
 import Search from '../Search';
+import styles from './index.less';
+
+const PAGE_SIZE = 5;
 
 const ComingConfigTable = (props) => {
   const {
@@ -20,6 +24,9 @@ const ComingConfigTable = (props) => {
     editable,
   } = props;
   const { roleId } = (props.props['x-component-props'] || {});
+  const [keyword, setKeyword] = useState('');
+  const [page, setPage] = useState(1);
+  const [size, setSize] = useState(PAGE_SIZE);
 
   const handleDelete = (id: number) => {
     const newData = [...value];
@@ -70,12 +77,25 @@ const ComingConfigTable = (props) => {
     },
   ];
 
+  const handleSearch = (next: string) => {
+    setKeyword(next);
+    setPage(1);
+  };
+
   const handleConfirm = (value: ComingCtlValueType[]) => {
     mutators.change(value);
   };
 
+  const handlePaginationChange = (current: number, pageSize: number) => {
+    setPage(current);
+    setSize(pageSize);
+  };
+
+  const filtered = keyword ? value.filter((item) => item.fieldLocalName.includes(keyword)) : [...value];
+  const dataSource = pagingArr(page, size, filtered);
+
   return (
-    <>
+    <div className={styles['config-table']}>
       <Row
         justify="space-between"
         style={{
@@ -91,17 +111,26 @@ const ComingConfigTable = (props) => {
           />
         </Col>
         <Col span={6}>
-          <Search value={''} onChange={() => {}} onSearch={() => {}} />
+          <Search onSearch={handleSearch} />
         </Col>
       </Row>
       <PolymericTable
         rowKey="id"
-        dataSource={value}
+        dataSource={dataSource}
         columns={columns}
         loading={false}
-        pagination={null}
+        pagination={(
+          !editable
+            ? {
+              current: page,
+              pageSize: size,
+              total: filtered.length,
+            }
+            : null
+        )}
+        onPaginationChange={handlePaginationChange}
       />
-    </>
+    </div>
   );
 };
 

src/pages/member/memberFlowRule/components/FlowRuleForm/components/ComingConfigTable/utils.ts

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-06-18 14:56:03
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-06-18 15:26:10
+ * @Description: 
+ */
+export function pagingArr(page, size, arr) {
+  const sub = [...arr];
+  const star = (page - 1) * size;
+  const end = star + size;
+  return sub.slice(star, end);
+};
\ No newline at end of file

src/pages/member/memberFlowRule/components/FlowRuleForm/components/Search/index.tsx

@@ -5,7 +5,7 @@
  * @LastEditTime: 2021-06-08 16:27:02
  * @Description: 搜索组件
  */
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Input, Button } from 'antd';
 import styles from './index.less';
 
@@ -13,15 +13,15 @@ interface IProps {
   /**
    * 值
    */
-  value: string,
+  value?: string,
   /**
    * 输入改变触发事件
    */
-  onChange: (value: string) => void,
+  onChange?: (value: string) => void,
   /**
    * 搜索事触发事件
    */
-  onSearch: (value: string) => void,
+  onSearch?: (value: string) => void,
   /**
    * 点击重置按钮触发事件
    */
@@ -41,8 +41,18 @@ const MySearch: React.FC<IProps> = (props: IProps) => {
     searchOnResetAction,
     ...rest
   } = props;
+  const [keyword, setKeyword] = useState('');
+
+  useEffect(() => {
+    if ('value' in props) {
+      setKeyword(value);
+    }
+  }, [value]);
 
   const handleChange = (e) => {
+    if (!('value' in props)) {
+      setKeyword(e.target.value);
+    }
     if (onChange) {
       onChange(e.target.value);
     }
@@ -68,7 +78,7 @@ const MySearch: React.FC<IProps> = (props: IProps) => {
     <div className={styles.search}>
       <Input.Search
         style={{ width: '200px', marginRight: 16 }}
-        value={props.value || ''}
+        value={keyword}
         onChange={handleChange}
         onSearch={handleSearch}
         {...rest}

src/pages/member/memberFlowRule/components/FlowRuleForm/index.tsx

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2021-05-27 16:13:05
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-06-01 14:56:14
+ * @LastEditTime: 2021-06-18 15:54:33
  * @Description: 
  */
 import React, { useState, useEffect } from 'react';
@@ -153,6 +153,11 @@ const FlowRuleForm: React.FC<MemberFormProps> = ({
     }
   };
 
+  const isAdd = !id && isEdit;
+  const configIdsProps = {
+    isAdd,
+  };
+
   return (
     <Spin spinning={infoLoading}>
       <PageHeaderWrapper
@@ -161,7 +166,7 @@ const FlowRuleForm: React.FC<MemberFormProps> = ({
         }}
         onBack={() => history.goBack()}
         backIcon={<ReutrnEle description="返回" />}
-        title={!id ? isEdit ? '新增会员管理流程规则' : '查看会员管理流程规则' : '编辑会员管理流程规则会员'}
+        title={!id ? '新增会员管理流程规则' : isEdit ? '编辑会员管理流程规则会员' : '查看会员管理流程规则'}
         extra={[
           (isEdit ? (
             <Button
@@ -190,6 +195,9 @@ const FlowRuleForm: React.FC<MemberFormProps> = ({
               PlatformConfigTable,
               ComingConfigTable,
             }}
+            expressionScope={{
+              configIdsProps,
+            }}
             effects={($, actions) => {
               createEffects($, actions);
               onFormInputChange$().subscribe(() => {

src/pages/member/memberFlowRule/components/FlowRuleForm/schema.ts

@@ -147,9 +147,7 @@ const formSchema: ISchema = {
             configIds: {
               type: 'string',
               'x-component': 'ComingConfigTable',
-              'x-component-props': {
-
-              },
+              'x-component-props': {},
             },
           },
         },