添加输入框输入错误收集事件

src/components/PolymericTable/EditableCellTable.tsx

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2020-08-20 16:15:59
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2020-08-21 17:08:26
+ * @LastEditTime: 2020-12-15 14:27:38
  * @Description: 基于 NormalTable 简单的可编辑列 Table
  */
 import React, { useContext, useState, useEffect, useRef } from 'react';
@@ -20,12 +20,24 @@ const EditableContext = React.createContext<any>({});
 
 interface EditableRowProps {
   index: number;
+  onFieldsChange: (changedFields: []) => {};
 }
 
-const EditableRow: React.FC<EditableRowProps> = ({ index, ...props }) => {
+const EditableRow: React.FC<EditableRowProps> = ({ 
+  index, 
+  onFieldsChange, 
+  ...props 
+}) => {
   const [form] = Form.useForm();
+  
+  const handleFieldsChange = (changedFields, allFields) => {
+    if (onFieldsChange) {
+      onFieldsChange(changedFields);
+    }
+  };
+
   return (
-    <Form form={form} component={false}>
+    <Form form={form} component={false} onFieldsChange={handleFieldsChange}>
       <EditableContext.Provider value={form}>
         <tr {...props} />
       </EditableContext.Provider>

src/components/PolymericTable/interface.d.ts

@@ -25,6 +25,18 @@ export interface EditableCellProps {
   addonAfter?: React.ReactNode;
 }
 
+export interface ChangedFieldsItem {
+  errors: string[], 
+  name: string[], 
+  touched: boolean, 
+  validating: boolean, 
+  value: string, 
+};
+
+export interface EditableRowProps extends React.HTMLAttributes<HTMLElement> {
+  onFieldsChange?: (changedFields: ChangedFieldsItem[]) => void, 
+}
+
 interface EditableColumns extends ColumnType<any> {
   dataIndex?: string | number;
   editable?: boolean;

src/pages/member/memberLevel/components/DetailInfo/index.tsx

@@ -7,6 +7,8 @@ import {
   Input, 
   Slider, 
   Spin, 
+  Descriptions, 
+  PageHeader, 
   message, 
 } from 'antd';
 import classNames from 'classnames';
@@ -14,9 +16,10 @@ import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { ContainerOutlined } from '@ant-design/icons';
 import { PublicApi } from '@/services/api';
 import StatusSwitch from '@/components/StatusSwitch';
+import AvatarWrap from '@/components/AvatarWrap';
 import { EditableCellTable } from '@/components/PolymericTable';
-import { EditableCellProps, EditableColumns } from '@/components/PolymericTable/interface';
-import { GetMemberAbilityLevelGetResponse } from '@/services';
+import { EditableCellProps, EditableRowProps, EditableColumns } from '@/components/PolymericTable/interface';
+import { GetMemberAbilityLevelGetResponse } from '@/services/MemberApi';
 import styles from './index.less';
 
 interface DetailInfoProps {
@@ -33,15 +36,7 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
   const [thresholdValue, setThresholdValue] = useState(100);
   const [infoLoading, setInfoLoading] = useState(true);
   const [submitLoading, setSubmitLoading] = useState(false);
-
-  const marks = {
-    0: '0',
-    5000: '5000',
-    10000: '10000',
-    15000: '15000',
-    20000: '20000',
-    50000: '50000',
-  };
+  const [submitDisabled, setSubmitDisabled] = useState(false);
 
   const getMemberLevelInfo = () => {
     setInfoLoading(true);
@@ -231,67 +226,69 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
     };
   });
 
+  const handleFieldsChange = (changedFields) => {
+    const first = changedFields[0];
+    if (first && first.errors.length) {
+      setSubmitDisabled(true);
+    } else {
+      setSubmitDisabled(false);
+    }
+  };
+
   return (
     <Spin spinning={infoLoading}>
       <PageHeaderWrapper 
         style={{
           padding: 24, 
         }}
-        onBack={() => history.goBack()}
+        extra={(
+          <>
+            {isEdit && (
+              <Button 
+                type="primary"
+                icon={<ContainerOutlined />}
+                loading={submitLoading}
+                disabled={submitDisabled}
+                onClick={handleSubmit}
+              >
+                保存
+              </Button>
+            )}
+          </>
+        )}
         title={
           <>
-            <div className={styles.headerTop}>
-              <div className={styles['headerTop-icon']}>
-                { levelInfo && levelInfo.levelTag.length ? levelInfo.levelTag[0] : '' }
-              </div>
-              <div className={styles['headerTop-level']}>{ levelInfo?.levelTag }</div>
-              <div className={styles['headerTop-identity']}>{ levelInfo?.memberLevelTypeName }</div>
-            </div>
+            <PageHeader
+              style={{ padding: '0' }}
+              onBack={() => history.goBack()}
+              title={
+                <AvatarWrap 
+                  info={{
+                    name: levelInfo?.levelTag, 
+                  }} 
+                  extra={(
+                    <div className={styles['headerTop-identity']}>{ levelInfo?.memberLevelTypeName }</div>
+                  )}
+                />
+              }
+            >
+              <Descriptions 
+                size="small" 
+                column={3} 
+                style={{ 
+                  padding: '0 32px', 
+                }}
+              >
+                <Descriptions.Item label="会员等级">{ levelInfo?.level }</Descriptions.Item>
+                <Descriptions.Item label="升级分值标签">{ levelInfo?.scoreTag }</Descriptions.Item>
+                <Descriptions.Item label="角色类型">{ levelInfo?.roleTypeName }</Descriptions.Item>
+                <Descriptions.Item label="会员等级说明">{ levelInfo?.levelRemark }</Descriptions.Item>
+                <Descriptions.Item label="会员角色名称">{ levelInfo?.roleName }</Descriptions.Item>
+                <Descriptions.Item label="会员类型">{ levelInfo?.memberTypeName }</Descriptions.Item>
+              </Descriptions>
+            </PageHeader>
           </>
         }
-        content={
-          <div className={styles.headerMain}>
-            <div className={styles['headerMain-left']}>
-              <div className={styles['headerMain-left-option']}>
-                <div>会员等级：</div>
-                <div>{ levelInfo?.level }</div>
-              </div>
-              <div className={styles['headerMain-left-option']}>
-                <div>升级分值标签：</div>
-                <div>{ levelInfo?.scoreTag }</div>
-              </div>
-              <div className={styles['headerMain-left-option']}>
-                <div>角色类型：</div>
-                <div>{ levelInfo?.roleTypeName }</div>
-              </div>
-              <div className={styles['headerMain-left-option']}>
-                <div>会员等级说明：</div>
-                <div>{ levelInfo?.levelRemark }</div>
-              </div>
-              <div className={styles['headerMain-left-option']}>
-                <div>会员角色名称：</div>
-                <div>{ levelInfo?.roleName }</div>
-              </div>
-              <div className={styles['headerMain-left-option']}>
-                <div>会员类型：</div>
-                <div>{ levelInfo?.memberTypeName }</div>
-              </div>
-            </div>
-
-            <div className={styles['headerMain-right']}>
-              {isEdit && (
-                <Button 
-                  type="primary"
-                  icon={<ContainerOutlined />}
-                  loading={submitLoading}
-                  onClick={handleSubmit}
-                >
-                  保存
-                </Button>
-              )}
-            </div>
-          </div>
-        }
       >
         <Card 
           title="升级阀值" 
@@ -343,6 +340,9 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
             columns={newColumns}
             loading={false}
             pagination={null}
+            onRow={(record): EditableRowProps => ({
+              onFieldsChange: handleFieldsChange,
+            })}
           />
         </Card>
       </PageHeaderWrapper>

src/pages/member/memberUpgradeRule/index.tsx

@@ -9,7 +9,7 @@ import { VIP_RULE_TRANSACTION, VIP_RULE_LOGIN, VIP_RULE_COMMENT } from '@/consta
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { ContainerOutlined } from '@ant-design/icons';
 import { EditableCellTable } from '@/components/PolymericTable';
-import { EditableCellProps, EditableColumns } from '@/components/PolymericTable/interface';
+import { EditableCellProps, EditableRowProps, EditableColumns } from '@/components/PolymericTable/interface';
 
 const MemberUpgradeRule: React.FC<[]> = () => {
   const PAGE_SIZE = 10;
@@ -96,6 +96,7 @@ const MemberUpgradeRule: React.FC<[]> = () => {
   // 表单元素校验失败事件
   const handleValidateError = errInfo => {
     // do something
+    console.log('errInfo', errInfo)
   };
 
   const handleSubmit = async () => {
@@ -172,6 +173,15 @@ const MemberUpgradeRule: React.FC<[]> = () => {
     };
   });
 
+  const handleFieldsChange = (changedFields) => {
+    const first = changedFields[0];
+    if (first && first.errors.length) {
+      setSubmitDisabled(true);
+    } else {
+      setSubmitDisabled(false);
+    }
+  };
+
   return (
     <PageHeaderWrapper
       extra={
@@ -196,6 +206,9 @@ const MemberUpgradeRule: React.FC<[]> = () => {
             total,
           }}
           onPaginationChange={handlePaginationChange}
+          onRow={(record): EditableRowProps => ({
+            onFieldsChange: handleFieldsChange,
+          })}
         />
       </Card>
     </PageHeaderWrapper>