Commit 77dca80f authored by XieZhiXiong's avatar XieZhiXiong

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

parent 756ac5e3
......@@ -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>
......
......@@ -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;
......
......@@ -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>
......
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment