chore: 完善组件

src/pages/member/components/MemberBasicInfo/index.tsx

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2021-05-18 16:27:14
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-06-29 15:37:48
+ * @LastEditTime: 2021-07-12 16:47:43
  * @Description: 会员基础信息
  */
 import React from 'react';
@@ -131,4 +131,4 @@ const MemberBasicInfo: React.FC<BasicInfoProps> = (props: BasicInfoProps) => {
   );
 };
 
-export default MemberBasicInfo;
+export default React.memo(MemberBasicInfo);

src/pages/member/components/MemberProfile/index.tsx

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2021-07-09 11:09:36
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-07-09 14:29:29
+ * @LastEditTime: 2021-07-12 15:56:22
  * @Description: 会员详情信息
  */
 import React from 'react';
@@ -26,6 +26,7 @@ import {
   MEMBER_OUTER_COLUMNS,
   MEMBER_INNER_COLUMNS,
 } from '../../constant';
+import { renderFieldTypeContent } from '../../utils';
 import MemberBasicInfo from '../MemberBasicInfo';
 import MemberChannelInfo from '../MemberChannelInfo';
 import MemberDocIncomingInfo from '../MemberDocIncomingInfo';
@@ -48,15 +49,20 @@ interface IProps {
   /**
    * 拓展区域
    */
-  extra?: React.ReactNode,
+  extra?: (info: DetailType) => React.ReactNode,
+  /**
+   * 是否展示渠道信息，默认 true
+   */
+  showChannelInfo?: boolean,
 }
 
 const MemberProfile: React.FC<IProps> = (props) => {
-  const { dataSource, loading, extra } = props;
   const {
-    basicInfo,
-    channelInfo,
-  } = dataSource;
+    dataSource,
+    loading,
+    extra,
+    showChannelInfo = true,
+  } = props;
 
   const anchorsArr = [
     {
@@ -68,8 +74,11 @@ const MemberProfile: React.FC<IProps> = (props) => {
       name: '基本信息',
     },
     (
-      basicInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_CORPORATE
-      || basicInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_INDIVIDUAL
+      showChannelInfo
+        && (
+          dataSource?.memberTypeEnum === MEMBER_TYPE_CHANNEL_CORPORATE
+          || dataSource?.memberTypeEnum === MEMBER_TYPE_CHANNEL_INDIVIDUAL
+        )
         ? {
           key: 'channelInfo',
           name: '渠道信息',
@@ -87,7 +96,6 @@ const MemberProfile: React.FC<IProps> = (props) => {
     (
       dataSource
       && dataSource.depositDetails
-      && dataSource.depositDetails.length
         ? {
           key: 'incomingInfo',
           name: '入库信息',
@@ -130,20 +138,23 @@ const MemberProfile: React.FC<IProps> = (props) => {
     },
   ].filter(Boolean);
 
+  const depositDetails = dataSource?.depositDetailTexts || dataSource?.depositDetails || [];
+
   return (
     <Spin spinning={loading}>
       <AnchorPage
         title={(
           <AvatarWrap 
             info={{
-              name: basicInfo?.name, 
+              name: dataSource?.name, 
             }} 
             extra={(
-              <LevelBrand level={basicInfo?.level} />
+              <LevelBrand level={dataSource?.level} />
             )}
           />
         )}
         anchors={anchorsArr}
+        extra={extra ? extra(dataSource) : null}
       >
         <Row gutter={[16, 16]}>
           {/* 会员审核流程 */}
@@ -161,17 +172,17 @@ const MemberProfile: React.FC<IProps> = (props) => {
           <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,
+                memberId: dataSource?.memberId,
+                memberTypeName: dataSource?.memberTypeName,
+                account: dataSource?.account,
+                name: dataSource?.name,
+                roleName: dataSource?.roleName,
+                phone: dataSource?.phone,
+                outerStatus: dataSource?.outerStatus,
+                outerStatusName: dataSource?.outerStatusName,
+                levelTag: dataSource?.levelTag,
+                email: dataSource?.email,
+                createTime: dataSource?.registerTime,
               }}
               id="basicInfo"
             />
@@ -179,16 +190,19 @@ const MemberProfile: React.FC<IProps> = (props) => {
           
           {/* 渠道信息 */}
           {
-            basicInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_CORPORATE
-            || basicInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_INDIVIDUAL
+            showChannelInfo
+              && (
+                dataSource?.memberTypeEnum === MEMBER_TYPE_CHANNEL_CORPORATE
+                || dataSource?.memberTypeEnum === MEMBER_TYPE_CHANNEL_INDIVIDUAL
+              )
               ? (
                 <Col span={24}>
                   <MemberChannelInfo
                     dataSource={{
-                      level: channelInfo?.level,
-                      type: channelInfo?.type,
-                      areas: channelInfo?.areas,
-                      desc: channelInfo?.desc,
+                      level: dataSource?.channelLevelTag,
+                      type: dataSource?.channelTypeName,
+                      areas: dataSource?.areaCodes as string[],
+                      desc: dataSource?.remark,
                     }}
                     id="channelInfo"
                   />
@@ -207,15 +221,7 @@ const MemberProfile: React.FC<IProps> = (props) => {
                     data={(
                       item.elements.map((ele) => ({
                         title: ele.fieldLocalName,
-                        value: (
-                          ele.fieldType !== 'upload'
-                            ? ele.fieldValue
-                            : (
-                              <PicWrap 
-                                pics={[ele.fieldValue]} 
-                              />
-                            )
-                        ),
+                        value: renderFieldTypeContent(ele.fieldType, ele.fieldValue),
                       }))
                     )}
                     id={`group${index}`}
@@ -226,10 +232,10 @@ const MemberProfile: React.FC<IProps> = (props) => {
           }
 
           {/* 入库信息 */}
-          {dataSource && dataSource.depositDetails && dataSource.depositDetails.length ? (
+          {depositDetails ? (
             <Col span={24}>
               <MemberDocIncomingInfo
-                dataSource={dataSource?.depositDetails}
+                dataSource={depositDetails}
                 id="incomingInfo"
               />
             </Col>

src/pages/member/components/MemberProfile/interface.ts

@@ -91,6 +91,11 @@ export type CategoriesItemType = {
   taxPoint: string,
 }
 
+export type AreaCodeType = {
+  provinceCode: string,
+  cityCode: string,
+}
+
 export type DetailType = {
   /**
    * 内部流转
@@ -109,9 +114,91 @@ export type DetailType = {
    */
   currentOuterStep: number,
   /**
-   * 基础信息
+   * 会员id
+   */
+  memberId: number,
+  /**
+   * 会员类型
+   */
+  memberTypeName: string,
+  /**
+   * 登录账号
+   */
+  account: string,
+  /**
+   * 会员名称
+   */
+  name: string,
+  /**
+   * 会员角色
+   */
+  roleName: string,
+  /**
+   * 注册手机号
+   */
+  phone: string,
+  /**
+   * 上级会员列表
+   */
+  upperMembers?: {
+    /**
+     * 上级会员关系Id
+     */
+    upperRelationId: number
+    /**
+     * 上级会员公司名称+角色名称
+     */
+    name: string
+  }[],
+  /**
+   * 渠道类型列表
+   */
+  channelTypes?: {
+    /**
+     * 渠道类型Id
+     */
+    channelTypeId: number
+    /**
+     * 渠道类型名称
+     */
+    channelTypeName: string
+  }[],
+  /**
+   * 上级渠道id
+   */
+  upperRelationId?: number,
+  /**
+   * 渠道类型Id
+   */
+  channelTypeId?: number
+  /**
+   * 外部状态
+   */
+  outerStatus: number,
+  /**
+   * 外部状态名称
+   */
+  outerStatusName: string,
+  /**
+   * 等级
+   */
+  level?: number,
+  /**
+   * 会员等级
+   */
+  levelTag: string,
+  /**
+   * 注册邮箱
+   */
+  email: string,
+  /**
+   * 申请时间
+   */
+  registerTime: string,
+  /**
+   * 会员类型枚举，前端不展示，当值为3或4时，展示渠道信息
    */
-  basicInfo: BasicInfoProps['dataSource'],
+  memberTypeEnum?: number,
   /**
    * 注册信息
    */
@@ -126,9 +213,21 @@ export type DetailType = {
     elements: ElementsItemType[],
   }[],
   /**
-   * 渠道信息
+   * 渠道信息-渠道级别
+   */
+  channelLevelTag: string,
+  /**
+   * 渠道信息-渠道级别
+   */
+  channelTypeName?: string,
+  /**
+   * 渠道信息-代理地市
+   */
+  areaCodes?: (string | AreaCodeType)[],
+  /**
+   * 渠道信息-渠道描述
    */
-  channelInfo: ChannelInfoProps['dataSource'],
+  remark: string,
   /**
    * 入库信息，表单用
    */
@@ -145,7 +244,7 @@ export type DetailType = {
   /**
    * 入库信息，展示用
    */
-  depositDetailTexts: {
+  depositDetailTexts?: {
     /**
      * 分组名称
      */
@@ -162,11 +261,11 @@ export type DetailType = {
   /**
    * 考察信息
    */
-  inspection: InvestigateInfoProps['dataSource'],
+  inspection?: InvestigateInfoProps['dataSource'],
   /**
    * 分类信息
    */
-  classification: DocCategoryProps['dataSource'],
+  classification?: DocCategoryProps['dataSource'],
   /**
    * 内部流转记录
    */