Skip to content

J
jinfa-platform
Commit e127789f authored by XieZhiXiong's avatar XieZhiXiong
Browse files
Options

feat: 添加 会员详情组件

parent 19ee67aa
Hide whitespace changes
Inline Side-by-side
Showing with 531 additions and 0 deletions
src/pages/member/components/MemberProfile/index.tsx 0 → 100644
View file @ e127789f
/*
* @Author: XieZhiXiong
* @Date: 2021-07-09 11:09:36
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-07-09 14:29:29
* @Description: 会员详情信息
*/
import React from 'react';
import {
Row,
Col,
Spin,
} from 'antd';
import {
MEMBER_TYPE_CHANNEL_CORPORATE,
MEMBER_TYPE_CHANNEL_INDIVIDUAL,
} from '@/constants/member';
import AnchorPage from '@/layouts/AnchorPage';
import AvatarWrap from '@/components/AvatarWrap';
import AuditProcess from '@/components/AuditProcess';
import LevelBrand from '@/components/LevelBrand';
import FlowRecords from '@/components/FlowRecords';
import CustomizeColumn from '@/components/CustomizeColumn';
import { DetailType } from './interface';
import {
MEMBER_OUTER_COLUMNS,
MEMBER_INNER_COLUMNS,
} from '../../constant';
import MemberBasicInfo from '../MemberBasicInfo';
import MemberChannelInfo from '../MemberChannelInfo';
import MemberDocIncomingInfo from '../MemberDocIncomingInfo';
import MemberInvestigateInfo from '../MemberInvestigateInfo';
import MemberDocCategory from '../MemberDocCategory';
import MemberDocQualification from '../MemberDocQualification';
import PicWrap from '../PicWrap';
export * from './interface';
interface IProps {
/**
* 数据，待定
*/
dataSource: DetailType,
/**
* 是否加载中
*/
loading: boolean,
/**
* 拓展区域
*/
extra?: React.ReactNode,
}
const MemberProfile: React.FC<IProps> = (props) => {
const { dataSource, loading, extra } = props;
const {
basicInfo,
channelInfo,
} = dataSource;
const anchorsArr = [
{
key: 'verifySteps',
name: '流转进度',
},
{
key: 'basicInfo',
name: '基本信息',
},
(
basicInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_CORPORATE
|| basicInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_INDIVIDUAL
? {
key: 'channelInfo',
name: '渠道信息',
}
: null
),
...(
dataSource && dataSource.registerDetails
? dataSource.registerDetails.map((item, index) => ({
key: `group${index}`,
name: item.groupName,
}))
: []
),
(
dataSource
&& dataSource.depositDetails
&& dataSource.depositDetails.length
? {
key: 'incomingInfo',
name: '入库信息',
}
: null
),
(
dataSource
&& dataSource.qualities
&& dataSource.qualities.length
? {
key: 'qualificationInfo',
name: '资质证明',
}
: null
),
(
dataSource
&& dataSource.inspection
&& dataSource.inspection.inspectDay
? {
key: 'investigateInfo',
name: '考察信息',
}
: null
),
(
dataSource
&& dataSource.classification
&& dataSource.classification.code
? {
key: 'classifyInfo',
name: '分类信息',
}
: null
),
{
key: 'flowRecords',
name: '流转记录',
},
].filter(Boolean);
return (
<Spin spinning={loading}>
<AnchorPage
title={(
<AvatarWrap
info={{
name: basicInfo?.name,
}}
extra={(
<LevelBrand level={basicInfo?.level} />
)}
/>
)}
anchors={anchorsArr}
>
<Row gutter={[16, 16]}>
{/* 会员审核流程 */}
<Col span={24}>
<AuditProcess
outerVerifySteps={dataSource?.outerVerifySteps}
outerVerifyCurrent={dataSource?.currentOuterStep}
innerVerifySteps={dataSource?.innerVerifySteps}
innerVerifyCurrent={dataSource?.currentInnerStep}
id="verifySteps"
/>
</Col>
{/* 基本信息 */}
<Col span={24}>
<MemberBasicInfo
dataSource={{
memberId: basicInfo?.memberId,
memberTypeName: basicInfo?.memberTypeName,
account: basicInfo?.account,
name: basicInfo?.name,
roleName: basicInfo?.roleName,
phone: basicInfo?.phone,
outerStatus: basicInfo?.outerStatus,
outerStatusName: basicInfo?.outerStatusName,
levelTag: basicInfo?.levelTag,
email: basicInfo?.email,
createTime: basicInfo?.createTime,
}}
id="basicInfo"
/>
</Col>
{/* 渠道信息 */}
{
basicInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_CORPORATE
|| basicInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_INDIVIDUAL
? (
<Col span={24}>
<MemberChannelInfo
dataSource={{
level: channelInfo?.level,
type: channelInfo?.type,
areas: channelInfo?.areas,
desc: channelInfo?.desc,
}}
id="channelInfo"
/>
</Col>
)
: null
}
{/* 其他注册信息 */}
{
dataSource && dataSource.registerDetails
? dataSource.registerDetails.map((item, index) => (
<Col span={24} key={`group${index}`}>
<CustomizeColumn
title={item.groupName}
data={(
item.elements.map((ele) => ({
title: ele.fieldLocalName,
value: (
ele.fieldType !== 'upload'
? ele.fieldValue
: (
<PicWrap
pics={[ele.fieldValue]}
/>
)
),
}))
)}
id={`group${index}`}
/>
</Col>
))
: null
}
{/* 入库信息 */}
{dataSource && dataSource.depositDetails && dataSource.depositDetails.length ? (
<Col span={24}>
<MemberDocIncomingInfo
dataSource={dataSource?.depositDetails}
id="incomingInfo"
/>
</Col>
) : null}
{/* 资质证明 */}
{dataSource && dataSource.qualities && dataSource.qualities.length ? (
<Col span={24}>
<MemberDocQualification
dataSource={dataSource?.qualities}
id="qualificationInfo"
/>
</Col>
) : null}
{/* 考察信息 */}
{dataSource && dataSource.inspection && dataSource.inspection.inspectDay ? (
<Col span={24}>
<MemberInvestigateInfo
dataSource={dataSource?.inspection}
id="investigateInfo"
/>
</Col>
) : null}
{/* 分类信息 */}
{dataSource && dataSource.classification && dataSource.classification.code ? (
<Col span={24}>
<MemberDocCategory
dataSource={dataSource?.classification}
id="classifyInfo"
/>
</Col>
) : null}
{/* 流转记录 */}
<Col span={24}>
<FlowRecords
outerColumns={MEMBER_OUTER_COLUMNS}
innerColumns={MEMBER_INNER_COLUMNS}
outerRowkey="id"
innerRowkey="id"
outerDataSource={dataSource?.outerHistory}
innerDataSource={dataSource?.innerHistory}
id="flowRecords"
/>
</Col>
</Row>
</AnchorPage>
</Spin>
);
};
export default MemberProfile;
src/pages/member/components/MemberProfile/interface.ts 0 → 100644
View file @ e127789f
/*
* @Author: XieZhiXiong
* @Date: 2021-07-09 15:30:53
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-07-09 15:30:54
* @Description:
*/
import { BasicInfoProps } from '../MemberBasicInfo';
import { ChannelInfoProps } from '../MemberChannelInfo';
import { InvestigateInfoProps } from '../MemberInvestigateInfo';
import { DocCategoryProps } from '../MemberDocCategory';
import { ElementType } from '../../utils';
export type VerifyStepsItemType = {
/**
* 角色名称
*/
roleName: string,
/**
* 当前步骤
*/
step: number,
/**
* 步骤名称
*/
stepName: string,
}
export type ElementsItemType = {
/**
* 分组内的字段顺序
*/
fieldOrder?: number
/**
* 字段类型
*/
fieldType?: string
/**
* 字段中文名称
*/
fieldLocalName?: string
/**
* 字段值
*/
fieldValue?: string
/**
* 修改之前的值，如果没有为空字符串
*/
lastValue?: string
}
export type QualitiesItemType = {
/**
* 文件Url
*/
url: string
/**
* 文件名称
*/
name: string
/**
* 有效日期，格式为yyyy-MM-dd，当permanent=1时为空字符串
*/
expireDay: string
/**
* 是否长期有效，0-否，1-是
*/
permanent: number
}
export type CategoriesItemType = {
/**
* 品类信息id
*/
id: number,
/**
* 品类名称
*/
name: string,
/**
* 付款周期（天）
*/
paymentDay: number,
/**
* 发票类型名称
*/
invoiceTypeName: string,
/**
* 税点，百分比的分子部分
*/
taxPoint: string,
}
export type DetailType = {
/**
* 内部流转
*/
innerVerifySteps: VerifyStepsItemType[],
/**
* 内部审核流程当前的步骤
*/
currentInnerStep: number,
/**
* 外部流转
*/
outerVerifySteps: VerifyStepsItemType[],
/**
* 外部审核流程当前的步骤
*/
currentOuterStep: number,
/**
* 基础信息
*/
basicInfo: BasicInfoProps['dataSource'],
/**
* 注册信息
*/
registerDetails: {
/**
* 分组名称
*/
groupName: string,
/**
* 分组内的元素
*/
elements: ElementsItemType[],
}[],
/**
* 渠道信息
*/
channelInfo: ChannelInfoProps['dataSource'],
/**
* 入库信息，表单用
*/
depositDetails: {
/**
* 分组名称
*/
groupName: string,
/**
* 分组内的元素
*/
elements: ElementType[],
}[],
/**
* 入库信息，展示用
*/
depositDetailTexts: {
/**
* 分组名称
*/
groupName: string,
/**
* 分组内的元素
*/
elements: ElementsItemType[],
}[],
/**
* 资质证明
*/
qualities: QualitiesItemType[],
/**
* 考察信息
*/
inspection: InvestigateInfoProps['dataSource'],
/**
* 分类信息
*/
classification: DocCategoryProps['dataSource'],
/**
* 内部流转记录
*/
innerHistory: {
/**
* 记录Id
*/
id: number
/**
* 操作时间
*/
createTime: string
/**
* 操作人员姓名
*/
operatorName: string
/**
* 操作人员组织机构名称
*/
operatorOrgName: string
/**
* 操作人员职位
*/
operatorJobTitle: string
/**
* 操作方法
*/
operation: string
/**
* 内部状态枚举
*/
innerStatus: number
/**
* 会员内部状态名称
*/
innerStatusName: string
/**
* 操作说明（审核意见）
*/
remark: string
}[],
/**
* 外部流转记录
*/
outerHistory: {
/**
* 记录Id
*/
id: number
/**
* 操作时间
*/
createTime: string
/**
* 操作角色
*/
operatorRoleName: string
/**
* 外部状态枚举
*/
outerStatus: number
/**
* 外部状态名称
*/
outerStatusName: string
/**
* 操作
*/
operation: string
/**
* 备注（审核意见）
*/
remark: string
}[],
};
\ No newline at end of file
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