feat: 同步会员能力修改分类信息分组展示

src/pages/supplier/components/Bookmark/Item.tsx

@@ -44,19 +44,21 @@ const BookmarkItem: React.FC<IProps> = (props: IProps) => {
   };
 
   return (
-    <li
-      className={classNames(styles['bookmark-item'], {
-        [styles['bookmark-item-active']]: value === bookmarkContext.value,
-      })}
-      onClick={handleClick}
-    >
-      {icon ? (
-        <div className={styles['bookmark-item-left']}>
-          {icon}
+    <li className={styles['bookmark-itemWrap']}>
+      <div
+        className={classNames(styles['bookmark-item'], {
+          [styles['bookmark-item-active']]: value === bookmarkContext.value,
+        })}
+        onClick={handleClick}
+      >
+        {icon ? (
+          <div className={styles['bookmark-item-left']}>
+            {icon}
+          </div>
+        ) : null}
+        <div className={styles['bookmark-item-center']}>
+          {title}
         </div>
-      ) : null}
-      <div className={styles['bookmark-item-center']}>
-        {title}
       </div>
     </li>
   );

src/pages/supplier/components/Bookmark/index.less

 @import '~antd/es/style/themes/default.less';
 
 .bookmark {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  border: 1px solid #E4E6EB;
   list-style: none;
   padding: 0;
-  margin: 0;
+  margin: -@padding-xss;
+
+  &-itemWrap {
+    padding: @padding-xss;
+  }
 
   &-item {
     padding: @padding-xs @padding-md;
     display: flex;
     align-items: center;
-    background-color: #FFFFFF;
-    color: #6B778C;
+    background-color: @background-color-light;
+    color: @text-color-secondary;
     cursor: pointer;
-
-    &:not(:last-child) {
-      border-right: 1px solid #E4E6EB;
-    }
+    border-radius: 4px;
 
     &-left {
       flex-shrink: 0;
@@ -31,8 +31,8 @@
 
     &-active,
     &:hover {
-      background-color: #6B778C;
-      color: #FFFFFF;
+      background-color: @background-color-base;
+      color: @primary-color;
     }
   }
 }
\ No newline at end of file

src/pages/supplier/components/MemberDocIncomingInfo/index.tsx

@@ -14,9 +14,13 @@ import styles from './index.less';
 
 interface IProps extends Omit<CustomizeColumnProps, 'data' | 'columns'>  {
   /**
-   * 数据
+   * 是否展示 new
+   */
+  showNew?: boolean,
+  /**
+   * 组数据
    */
-  dataSource: {
+  groupData: {
     /**
      * 分组名
      */
@@ -46,27 +50,22 @@ interface IProps extends Omit<CustomizeColumnProps, 'data' | 'columns'>  {
        */
       fieldType?: string,
     }[],
-  }[],
-  /**
-   * 是否展示 new
-   */
-  showNew?: boolean,
+  },
 }
 
 const MemberDocIncomingInfo: React.FC<IProps> = (props: IProps) => {
   const {
-    dataSource = [],
     showNew = false,
+    groupData,
     ...rest
   } = props;
 
   const intl = useIntl();
 
-  const data: DataItem[] = [];
-
-  dataSource.forEach((item) => {
-    item.elements.forEach((ele) => {
-      data.push({
+  return (
+    <CustomizeColumn
+      title={groupData.groupName}
+      data={groupData.elements.map((ele) => ({
         title: ele.fieldLocalName,
         value: (
           <div className={styles.changed}>
@@ -82,14 +81,7 @@ const MemberDocIncomingInfo: React.FC<IProps> = (props: IProps) => {
         columnProps: {
           span: 1,
         },
-      });
-    });
-  });
-
-  return (
-    <CustomizeColumn
-      title={intl.formatMessage({ id: 'member.components.MemberDocIncomingInfo.title' })}
-      data={data}
+      }))}
       {...rest}
     />
   );

src/pages/supplier/components/MemberDocIncomingInfoForm/index.tsx

@@ -10,9 +10,9 @@ import { useIntl } from 'umi';
 import { Radio, Checkbox } from '@formily/antd-components';
 import { createAsyncFormActions, FormEffectHooks } from '@formily/antd';
 import { ValidateNodeResult } from '@formily/validator';
+import themeConfig from '@/../config/lingxi.theme.config';
 import NiceForm from '@/components/NiceForm';
-import MellowCard from '@/components/MellowCard';
-import { schema, GroupItem } from './schema';
+import { schemaPro, GroupItem } from './schema';
 import AreaSelect from '../AreaSelect';
 
 export type DepositValueType = { [key: string]: any }
@@ -51,29 +51,25 @@ const MemberDocIncomingInfoForm: React.ForwardRefRenderFunction<DepositRefHandle
   }));
 
   return (
-    <MellowCard
-      title={intl.formatMessage({ id: 'member.components.MemberDocIncomingInfoForm.title' })}
-      bodyStyle={{
-        paddingBottom: 0,
+    <NiceForm
+      previewPlaceholder="' '"
+      components={{
+        RadioGroup: Radio.Group,
+        CheckboxGroup: Checkbox.Group,
+        AreaSelect,
       }}
-      {...rest}
-    >
-      <NiceForm
-        previewPlaceholder="' '"
-        components={{
-          RadioGroup: Radio.Group,
-          CheckboxGroup: Checkbox.Group,
-          AreaSelect,
-        }}
-        effects={() => {
-          onFormInputChange$().subscribe((state) => {
-            onInputChange?.(state.values);
-          });
-        }}
-        actions={formActions}
-        schema={schema(groups)}
-      />
-    </MellowCard>
+      effects={() => {
+        onFormInputChange$().subscribe((state) => {
+          onInputChange?.(state.values);
+        });
+      }}
+      actions={formActions}
+      schema={schemaPro(groups)}
+      style={{
+        paddingLeft: themeConfig['@margin-xs'],
+        paddingRight: themeConfig['@margin-xs'],
+      }}
+    />
   );
 });
 

src/pages/supplier/components/MemberDocIncomingInfoForm/schema.ts

@@ -6,7 +6,8 @@
  * @Description: 
  */
 import { ISchema } from '@formily/antd';
-import { createMemberSchema, ElementType } from '../../utils';
+import themeConfig from '@/../config/lingxi.theme.config';
+import { createMemberSchema, ElementType, getIncomingInfoAnchorKey } from '../../utils';
 
 export type GroupItem = {
   /**
@@ -19,28 +20,38 @@ export type GroupItem = {
   elements: ElementType[],
 };
 
-export const schema = (groups: GroupItem[]): ISchema => {
+export const schemaPro = (groups: GroupItem[]): ISchema => {
+  const groupArr = groups || [];
   const depositSchema: ISchema = {
     type: 'object',
-    properties: {
-      COlUMN_LAYOUT: {
-        type: 'object',
-        'x-component': 'ColumnLayout',
-        'x-component-props': {},
-        properties: {},
-      },
-    },
+    properties: {},
   };
-  (groups || []).forEach((item, index) => {
-    depositSchema.properties.COlUMN_LAYOUT.properties[`MEGA_LAYOUT_${index}`] = {
+  groupArr.forEach((item, index) => {
+    depositSchema.properties[`DEPOSIT_GROUP_${index}`] = {
       type: 'object',
-      'x-component': 'Mega-Layout',
+      'x-component': 'MellowCardBox',
       'x-component-props': {
-        labelCol: 6,
-        wrapperCol: 18,
-        labelAlign: 'left',
+        title: item.groupName,
+        id: getIncomingInfoAnchorKey(index),
+        style: {
+          marginBottom: index !== groupArr.length - 1 ? themeConfig['@margin-md'] : 0,
+        },
+      },
+      properties: {
+        MEGA_LADYOUT: {
+          type: 'object',
+          'x-component': 'Mega-Layout',
+          'x-component-props': {
+            grid: true,
+            full: true,
+            autoRow: true,
+            columns: 2,
+            labelWidth: 144,
+            labelAlign: 'left',
+          },
+          properties: createMemberSchema(item.elements),
+        },
       },
-      properties: createMemberSchema(item.elements),
     };
   });
   return depositSchema;

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

@@ -5,7 +5,7 @@
  * @LastEditTime: 2021-12-04 15:35:31
  * @Description: 会员详情信息
  */
-import React, { Ref } from 'react';
+import React, { Ref, useMemo } from 'react';
 import {
   Row,
   Col,
@@ -26,7 +26,7 @@ import {
   MEMBER_OUTER_COLUMNS,
   MEMBER_INNER_COLUMNS,
 } from '../../constant';
-import { renderFieldTypeContent } from '../../utils';
+import { renderFieldTypeContent, getIncomingInfoAnchorKey } from '../../utils';
 import MemberBasicInfo from '../MemberBasicInfo';
 import MemberChannelInfo from '../MemberChannelInfo';
 import MemberDocIncomingInfo from '../MemberDocIncomingInfo';
@@ -134,6 +134,8 @@ const MemberProfile: React.FC<IProps> = (props) => {
 
   const intl = useIntl();
 
+  const depositDetails = dataSource?.depositDetails || [];
+
   const anchorsArr = [
     {
       key: 'verifySteps',
@@ -163,22 +165,18 @@ const MemberProfile: React.FC<IProps> = (props) => {
         }))
         : []
     ),
-    (
-      dataSource
-      && (
-        dataSource.depositDetailTexts?.length
-        || dataSource.depositDetails?.length
-      )
-        ? {
-          key: 'incomingInfo',
-          name: intl.formatMessage({ id: 'member.components.MemberProfile.incomingInfo' }),
-        }
-        : null
+    ...(
+      depositDetails.map((item, index) => ({
+        key: getIncomingInfoAnchorKey(index),
+        name: item.groupName,
+      }))
     ),
     (
-      dataSource
-      && dataSource.qualities
-      && dataSource.qualities.length
+      (
+        dataSource
+        && dataSource.qualities
+        && dataSource.qualities.length
+      ) || editableQualities
         ? {
           key: 'qualificationInfo',
           name: intl.formatMessage({ id: 'member.components.MemberProfile.qualificationInfo' }),
@@ -355,21 +353,19 @@ const MemberProfile: React.FC<IProps> = (props) => {
 
           {/* 入库信息 */}
           {(
-            (
-              dataSource?.depositDetailTexts?.length
-              || dataSource?.depositDetails?.length
-            ) > 0
+            depositDetails.length > 0
             && !editableDeposit
           ) ? (
-            <Col span={24}>
-              <AnchorPage.Item itemKey="incomingInfo">
-                <MemberDocIncomingInfo
-                  dataSource={dataSource?.depositDetailTexts || dataSource?.depositDetails || []}
-                  showNew={showNew}
-                  id="incomingInfo"
-                />
-              </AnchorPage.Item>
-            </Col>
+            depositDetails.map((item, index) => (
+              <Col span={24} key={index}>
+                <AnchorPage.Item itemKey={getIncomingInfoAnchorKey(index)}>
+                  <MemberDocIncomingInfo
+                    groupData={item}
+                    showNew={showNew}
+                  />
+                </AnchorPage.Item>
+              </Col>
+            ))
           ) : null}
           
           {/* 入库信息，可编辑的 */}
@@ -377,15 +373,11 @@ const MemberProfile: React.FC<IProps> = (props) => {
             dataSource?.depositDetails?.length > 0
             && editableDeposit
           ) ? (
-            <Col span={24}>
-              <AnchorPage.Item itemKey="incomingInfo">
-                <MemberDocIncomingInfoForm
-                  groups={dataSource?.depositDetails || []}
-                  ref={depositRef}
-                  onInputChange={handleDepositChange}
-                />
-              </AnchorPage.Item>
-            </Col>
+            <MemberDocIncomingInfoForm
+              groups={dataSource?.depositDetails}
+              ref={depositRef}
+              onInputChange={handleDepositChange}
+            />
           ) : null}
 
           {/* 资质证明 */}

src/pages/supplier/memberDetailsContext.ts

+/**
+ * @Description 会员详情context，主要用于会员管理-会员详情、会员查询-会员详情下
+ */
+ import * as React from 'react';
+ import { GetMemberAbilityMaintenanceDetailBasicResponse } from '@/services/MemberV2Api';
+ import { AnchorsItem } from '@/components/AnchorPage';
+ 
+ export type MemberDetails = GetMemberAbilityMaintenanceDetailBasicResponse & {}
+ 
+ export interface MemberDetailsContextProps {
+   /**
+    * 详情信息
+    */
+   details: MemberDetails,
+   /**
+    * 重新详情信息，用于某些修改请求的操作需要重现获取信息
+    */
+   refreshDetails?: () => void,
+   /**
+    * 锚点数据
+    */
+   onAnchorsReady: (anchores: AnchorsItem[]) => void,
+ }
+ 
+ const MemberDetailsContext = React.createContext<MemberDetailsContextProps | null>(null);
+ 
+ export const MemberDetailsContextProvider = MemberDetailsContext.Provider;
+ 
+ export default MemberDetailsContext;
+ 
\ No newline at end of file

src/pages/supplier/memberMaintain/detailed/archiveInfo.tsx

@@ -5,7 +5,7 @@
  * @LastEditTime: 2021-11-29 20:07:02
  * @Description: 会员档案信息
  */
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { useIntl } from 'umi';
 import { Row, Col, Spin, message } from 'antd';
 import { usePageStatus } from '@/hooks/usePageStatus';
@@ -20,6 +20,8 @@ import {
 import BASE_CONFIG from '@/../config/base.config.json';
 import { EditableColumns } from '@/components/PolymericTable/interface';
 import AnchorPage from '@/components/AnchorPage';
+import { getIncomingInfoAnchorKey } from '../../utils';
+import MemberDetailsContext from '../../memberDetailsContext';
 import MemberDocCategoryPro, { MemberDocCategoryProProps, MemberDocCategoryProRef } from '../../components/MemberDocCategoryPro';
 import MemberDocIncomingInfo from '../../components/MemberDocIncomingInfo';
 import MemberDocQualification from '../../components/MemberDocQualification';
@@ -111,6 +113,8 @@ const MemberArchiveInfo = () => {
   const [archiveInfo, setArchiveInfo] = useState<GetMemberAbilityMaintenanceDetailRecordResponse>();
   const [loading, setLoading] = useState(false);
 
+  const contenxt = useContext(MemberDetailsContext);
+
   const categoryFormRef = useRef<MemberDocCategoryProRef | null>(null);
 
   const intl = useIntl();
@@ -263,9 +267,39 @@ const MemberArchiveInfo = () => {
     getArchiveInfo();
   }, []);
 
-  const handleModifyAfter = () => {
-    getArchiveInfo();
-  };
+  useEffect(() => {
+    const anchors = [
+      {
+        key: 'categoryInfo',
+        name: intl.formatMessage({ id: 'member.management.maintain.detail.categoryInfo' }),
+      },
+      ...(
+        archiveInfo?.depositDetails
+          ? archiveInfo?.depositDetails?.map((item, index) => ({
+            key: getIncomingInfoAnchorKey(index),
+            name: item.groupName,
+          }))
+          : []
+      ),
+      {
+        key: 'qualitiesInfo',
+        name: intl.formatMessage({ id: 'member.management.maintain.detail.qualitiesInfo' }),
+      },
+      {
+        key: 'inspectInfo',
+        name: intl.formatMessage({ id: 'member.management.maintain.detail.inspectInfo' }),
+      },
+      {
+        key: 'appraisalInfo',
+        name: intl.formatMessage({ id: 'member.management.maintain.detail.appraisalInfo' }),
+      },
+      {
+        key: 'rectifyInfo',
+        name: intl.formatMessage({ id: 'member.management.maintain.detail.rectifyInfo' }),
+      },
+    ].filter(Boolean);
+    contenxt.onAnchorsReady(anchors);
+  }, [archiveInfo]);
 
   const handleFinish = () => {
     categoryFormRef.current?.submit();
@@ -316,13 +350,15 @@ const MemberArchiveInfo = () => {
         </Col>
 
         {/* 入库信息 */}
-        <Col span={24}>
-          <AnchorPage.Item itemKey="depositDetails">
-            <MemberDocIncomingInfo
-              dataSource={archiveInfo?.depositDetails}
-            />
-          </AnchorPage.Item>
-        </Col>
+        {archiveInfo?.depositDetails.map((item, index) => (
+          <Col span={24} key={index}>
+            <AnchorPage.Item itemKey={getIncomingInfoAnchorKey(index)}>
+              <MemberDocIncomingInfo
+                groupData={item}
+              />
+            </AnchorPage.Item>
+          </Col>
+        ))}
 
         {/* 资质证明 */}
         <Col span={24}>

src/pages/supplier/memberMaintain/detailed/basicInfo.tsx

@@ -5,16 +5,12 @@
  * @LastEditTime: 2021-11-17 18:01:05
  * @Description: 会员基础信息详情
  */
-import React, { useState } from 'react';
+import React, { useContext, useEffect } from 'react';
+import { useIntl } from 'umi';
 import {
   Row,
   Col,
-  Spin,
 } from 'antd';
-import { observer, inject } from 'mobx-react';
-import { IMemberModule } from '@/module/memberModule';
-import { usePageStatus } from '@/hooks/usePageStatus';
-import { getMemberAbilityMaintenanceDetailBasic } from '@/services/MemberV2Api';
 import {
   MEMBER_TYPE_CHANNEL_CORPORATE,
   MEMBER_TYPE_CHANNEL_INDIVIDUAL,
@@ -27,149 +23,159 @@ import {
   MEMBER_OUTER_COLUMNS,
   MEMBER_INNER_COLUMNS,
 } from '../../constant';
+import MemberDetailsContext from '../../memberDetailsContext';
 import BasicInfo from '../../components/MemberBasicInfo';
 import MemberChannelInfo from '../../components/MemberChannelInfo';
-import MemberProfile from '../../components/MemberProfile';
 import PicWrap from '../../components/PicWrap';
 
-interface MemberBasicInfoProps {
-  MemberStore?: IMemberModule;
-};
+const MemberBasicInfo: React.FC<any> = () => {
 
-const MemberBasicInfo: React.FC<MemberBasicInfoProps> = ({
-  MemberStore,
-}) => {
-  const { memberInfo } = MemberStore;
-  const { id, validateId } = usePageStatus();
-  const [infoLoading, setInfoLoading] = useState(false);
+  const contenxt = useContext(MemberDetailsContext);
+  const { details: memberInfo } = contenxt;
 
-  const getBasicInfo = () => {
-    if (!validateId) {
-      return;
-    }
-    setInfoLoading(true);
-    getMemberAbilityMaintenanceDetailBasic({
-      validateId,
-    }).then(res => {
-      if (res.code !== 1000) {
-        return;
-      }
-      MemberStore.setMemberInfo(res.data);
-    }).catch((err) => {
-      console.warn(err);
-    }).finally(() => {
-      setInfoLoading(false);
-    });
-  };
+  const intl = useIntl();
+
+  useEffect(() => {
+    const anchors = [
+      {
+        key: 'verifySteps',
+        name: intl.formatMessage({ id: 'member.management.maintain.detail.verifySteps' }),
+      },
+      {
+        key: 'basicInfo',
+        name: intl.formatMessage({ id: 'member.management.maintain.basic' }),
+      },
+      (
+        memberInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_CORPORATE
+        || memberInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_INDIVIDUAL
+          ? {
+            key: 'channelInfo',
+            name: intl.formatMessage({ id: 'member.management.maintain.channel' }),
+          }
+          : null
+      ),
+      ...(
+        memberInfo && memberInfo.groups
+          ? memberInfo.groups.map((item, index) => ({
+            key: `group${index}`,
+            name: item.groupName,
+          }))
+          : []
+      ),
+      {
+        key: 'flowRecords',
+        name: intl.formatMessage({ id: 'member.management.maintain.flowRecords' }),
+      },
+    ].filter(Boolean);
+    contenxt.onAnchorsReady(anchors);
+  }, [memberInfo]);
 
   const handleModifyAfter = () => {
-    getBasicInfo();
+    contenxt.refreshDetails?.();
   };
 
   return (
-    <Spin spinning={infoLoading}>
-      <Row gutter={[16, 16]}>
-        {/* 会员审核流程 */}
-        <Col span={24}>
-          <AnchorPage.Item itemKey="verifySteps">
-            <AuditProcess
-              outerVerifySteps={memberInfo?.outerVerifySteps}
-              outerVerifyCurrent={memberInfo?.currentOuterStep}
-              innerVerifySteps={memberInfo?.innerVerifySteps}
-              innerVerifyCurrent={memberInfo?.currentInnerStep}
-            />
-          </AnchorPage.Item>
-        </Col>
+    <Row gutter={[16, 16]}>
+      {/* 会员审核流程 */}
+      <Col span={24}>
+        <AnchorPage.Item itemKey="verifySteps">
+          <AuditProcess
+            outerVerifySteps={memberInfo?.outerVerifySteps}
+            outerVerifyCurrent={memberInfo?.currentOuterStep}
+            innerVerifySteps={memberInfo?.innerVerifySteps}
+            innerVerifyCurrent={memberInfo?.currentInnerStep}
+          />
+        </AnchorPage.Item>
+      </Col>
 
-        {/* 基本信息 */}
-        <Col span={24}>
-          <AnchorPage.Item itemKey="basicInfo">
-            <BasicInfo
-              dataSource={{
-                memberId: memberInfo?.memberId,
-                memberTypeName: memberInfo?.memberTypeName,
-                account: memberInfo?.account,
-                name: memberInfo?.name,
-                roleName: memberInfo?.roleName,
-                phone: memberInfo?.phone,
-                outerStatus: memberInfo?.outerStatus,
-                outerStatusName: memberInfo?.outerStatusName,
-                levelTag: memberInfo?.levelTag,
-                email: memberInfo?.email,
-                createTime: memberInfo?.createTime,
-              }}
-            />
-          </AnchorPage.Item>
-        </Col>
+      {/* 基本信息 */}
+      <Col span={24}>
+        <AnchorPage.Item itemKey="basicInfo">
+          <BasicInfo
+            dataSource={{
+              memberId: memberInfo?.memberId,
+              memberTypeName: memberInfo?.memberTypeName,
+              account: memberInfo?.account,
+              name: memberInfo?.name,
+              roleName: memberInfo?.roleName,
+              phone: memberInfo?.phone,
+              outerStatus: memberInfo?.outerStatus,
+              outerStatusName: memberInfo?.outerStatusName,
+              levelTag: memberInfo?.levelTag,
+              email: memberInfo?.email,
+              createTime: memberInfo?.registerTime,
+            }}
+          />
+        </AnchorPage.Item>
+      </Col>
 
-        {/* 渠道信息 */}
-        {
-          memberInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_CORPORATE
-          || memberInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_INDIVIDUAL
-            ? (
-              <Col span={24}>
-                <AnchorPage.Item itemKey="channelInfo">
-                  <MemberChannelInfo
-                    dataSource={{
-                      level: memberInfo?.channelLevelTag,
-                      type: memberInfo?.channelTypeName,
-                      areas: memberInfo?.areas,
-                      desc: memberInfo?.remark,
-                    }}
-                    validateId={memberInfo?.validateId}
-                    onModifyAfter={handleModifyAfter}
-                  />
-                </AnchorPage.Item>
-              </Col>
-            )
-            : null
-        }
+      {/* 渠道信息 */}
+      {
+        memberInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_CORPORATE
+        || memberInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_INDIVIDUAL
+          ? (
+            <Col span={24}>
+              <AnchorPage.Item itemKey="channelInfo">
+                <MemberChannelInfo
+                  dataSource={{
+                    level: memberInfo?.channelLevelTag,
+                    type: memberInfo?.channelTypeName,
+                    areas: memberInfo?.areas,
+                    desc: memberInfo?.remark,
+                  }}
+                  validateId={`${memberInfo?.validateId || ''}`}
+                  onModifyAfter={handleModifyAfter}
+                />
+              </AnchorPage.Item>
+            </Col>
+          )
+          : null
+      }
 
-        {/* 其他注册信息 */}
-        {
-          memberInfo && memberInfo.groups
-            ? memberInfo.groups.map((item, index) => (
-              <Col span={24} key={`group${index}`}>
-                <AnchorPage.Item itemKey={`group${index}`}>
-                  <CustomizeColumn
-                    title={item.groupName}
-                    data={(
-                      item.elements.map((ele) => ({
-                        title: ele.fieldLocalName,
-                        value: (
-                          ele.fieldType !== 'upload'
-                            ? ele.fieldValue
-                            : (
-                              <PicWrap
-                                pics={[ele.fieldValue]}
-                              />
-                            )
-                        ),
-                      }))
-                    )}
-                  />
-                </AnchorPage.Item>
-              </Col>
-            ))
-            : null
-        }
+      {/* 其他注册信息 */}
+      {
+        memberInfo && memberInfo.groups
+          ? memberInfo.groups.map((item, index) => (
+            <Col span={24} key={`group${index}`}>
+              <AnchorPage.Item itemKey={`group${index}`}>
+                <CustomizeColumn
+                  title={item.groupName}
+                  data={(
+                    item.elements.map((ele) => ({
+                      title: ele.fieldLocalName,
+                      value: (
+                        ele.fieldType !== 'upload'
+                          ? ele.fieldValue
+                          : (
+                            <PicWrap
+                              pics={[ele.fieldValue]}
+                            />
+                          )
+                      ),
+                    }))
+                  )}
+                />
+              </AnchorPage.Item>
+            </Col>
+          ))
+          : null
+      }
 
-        {/* 流转记录 */}
-        <Col span={24}>
-          <AnchorPage.Item itemKey="flowRecords">
-            <FlowRecords
-              outerColumns={MEMBER_OUTER_COLUMNS}
-              innerColumns={MEMBER_INNER_COLUMNS}
-              outerRowkey="id"
-              innerRowkey="id"
-              outerDataSource={memberInfo?.outerHistory}
-              innerDataSource={memberInfo?.innerHistory}
-            />
-          </AnchorPage.Item>
-        </Col>
-      </Row>
-    </Spin>
+      {/* 流转记录 */}
+      <Col span={24}>
+        <AnchorPage.Item itemKey="flowRecords">
+          <FlowRecords
+            outerColumns={MEMBER_OUTER_COLUMNS}
+            innerColumns={MEMBER_INNER_COLUMNS}
+            outerRowkey="id"
+            innerRowkey="id"
+            outerDataSource={memberInfo?.outerHistory}
+            innerDataSource={memberInfo?.innerHistory}
+          />
+        </AnchorPage.Item>
+      </Col>
+    </Row>
   );
 };
 
-export default inject('MemberStore')(observer(MemberBasicInfo));
+export default MemberBasicInfo;

src/pages/supplier/memberMaintain/detailed/changedInfo.tsx

@@ -5,16 +5,22 @@
  * @LastEditTime: 2021-11-17 18:01:17
  * @Description: 会员变更信息详情
  */
-import React from 'react';
+import React, { useContext, useEffect } from 'react';
+import { useIntl } from 'umi';
 import { Row, Col } from 'antd';
 import { usePageStatus } from '@/hooks/usePageStatus';
 import { getMemberAbilityMaintenanceDetailDepositHistoryPage } from '@/services/MemberV2Api';
 import AnchorPage from '@/components/AnchorPage';
+import MemberDetailsContext from '../../memberDetailsContext';
 import ChangedInfo, { FetchParamsType, ReponseType } from '../../components/MemberChangedInfo';
 
 const MemberChangedInfo = () => {
   const { validateId } = usePageStatus();
 
+  const contenxt = useContext(MemberDetailsContext);
+
+  const intl = useIntl();
+
   const getInspectList = (params: FetchParamsType): Promise<ReponseType> => {
     return new Promise((resolve, reject) => {
       getMemberAbilityMaintenanceDetailDepositHistoryPage({
@@ -33,6 +39,16 @@ const MemberChangedInfo = () => {
     });
   };
 
+  useEffect(() => {
+    const anchors = [
+      {
+        key: 'changedInfo',
+        name: intl.formatMessage({ id: 'member.management.maintain.detail.changedInfo' }),
+      },
+    ];
+    contenxt.onAnchorsReady(anchors);
+  }, []);
+
   return (
     <Row gutter={[16, 16]}>
       {/* 分类信息 */}

src/pages/supplier/memberMaintain/detailed/index.tsx

@@ -6,44 +6,31 @@
  * @Description:
  */
 import React, { useState, useEffect } from 'react';
-import { history, useIntl } from 'umi';
+import { history, IRouteComponentProps, useIntl } from 'umi';
 import { Spin } from 'antd';
 import {
   UnorderedListOutlined,
   FolderOutlined,
-  BarChartOutlined,
-  InsuranceOutlined,
-  BulbOutlined,
+  // BarChartOutlined,
+  // InsuranceOutlined,
+  // BulbOutlined,
   EditOutlined,
 } from '@ant-design/icons';
-import { observer, inject } from 'mobx-react';
 import { usePageStatus } from '@/hooks/usePageStatus';
 import { getMemberAbilityMaintenanceDetailBasic, GetMemberAbilityMaintenanceDetailBasicResponse } from '@/services/MemberV2Api';
-import { IMemberModule } from '@/module/memberModule';
-import {
-  MEMBER_TYPE_CHANNEL_CORPORATE,
-  MEMBER_TYPE_CHANNEL_INDIVIDUAL,
-} from '@/constants/member';
-import AnchorPage from '@/components/AnchorPage';
+import AnchorPage, { AnchorsItem } from '@/components/AnchorPage';
 import AvatarWrap from '@/components/AvatarWrap';
+import { MemberDetailsContextProvider } from '../../memberDetailsContext';
 import Bookmark from '../../components/Bookmark';
 
-interface QueryProps {
-  match: {
-    url: string;
-    path: string;
-  };
-  location: {
-    pathname: string;
-  };
-  MemberStore?: IMemberModule;
-}
+interface IProps extends IRouteComponentProps {}
 
-const MemberMaintainDetailed: React.FC<QueryProps> = props => {
-  const { MemberStore, children } = props;
+const MemberMaintainDetailed: React.FC<IProps> = props => {
+  const { children } = props;
   const { id, validateId } = usePageStatus();
   const [memberInfo, setMemberInfo] = useState<GetMemberAbilityMaintenanceDetailBasicResponse>(null);
   const [infoLoading, setInfoLoading] = useState(false);
+  const [anchors, setAnchors] = useState<AnchorsItem[]>([]);
 
   const intl = useIntl();
 
@@ -59,7 +46,6 @@ const MemberMaintainDetailed: React.FC<QueryProps> = props => {
         return;
       }
       setMemberInfo(res.data);
-      MemberStore.setMemberInfo(res.data);
     }).catch((err) => {
       console.warn(err);
     }).finally(() => {
@@ -112,131 +98,8 @@ const MemberMaintainDetailed: React.FC<QueryProps> = props => {
     return 'basicInfo';
   };
 
-  const getAnchorsArr = () => {
-    const markKey = getBookmarkKey();
-    let ret = [];
-    switch (markKey) {
-      case 'basicInfo':
-        ret = [
-          {
-            key: 'verifySteps',
-            name: intl.formatMessage({ id: 'member.management.maintain.detail.verifySteps' }),
-          },
-          {
-            key: 'basicInfo',
-            name: intl.formatMessage({ id: 'member.management.maintain.basic' }),
-          },
-          (
-            memberInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_CORPORATE
-            || memberInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_INDIVIDUAL
-              ? {
-                key: 'channelInfo',
-                name: intl.formatMessage({ id: 'member.management.maintain.channel' }),
-              }
-              : null
-          ),
-          ...(
-            memberInfo && memberInfo.groups
-              ? memberInfo.groups.map((item, index) => ({
-                key: `group${index}`,
-                name: item.groupName,
-              }))
-              : []
-          ),
-          {
-            key: 'flowRecords',
-            name: intl.formatMessage({ id: 'member.management.maintain.flowRecords' }),
-          },
-        ].filter(Boolean);
-        break;
-      case 'levelInfo':
-        ret = [
-          {
-            key: 'memberLevel',
-            name: intl.formatMessage({ id: 'member.management.maintain.detail.memberLevel' }),
-          },
-          {
-            key: 'activePoints',
-            name: intl.formatMessage({ id: 'member.management.maintain.detail.activePoints' }),
-          },
-        ];
-        break;
-      case 'equityInfo':
-        ret = [
-          {
-            key: 'basicInfo',
-            name: intl.formatMessage({ id: 'member.management.maintain.basic' }),
-          },
-          {
-            key: 'memberEquity',
-            name: intl.formatMessage({ id: 'member.management.maintain.detail.memberEquity' }),
-          },
-          {
-            key: 'equityRecords',
-            name: intl.formatMessage({ id: 'member.management.maintain.detail.equityRecords' }),
-          },
-        ];
-        break;
-      case 'sincerityInfo':
-        ret = [
-          {
-            key: 'basicInfo',
-            name: intl.formatMessage({ id: 'member.management.maintain.basic' }),
-          },
-          {
-            key: 'orderEvaluation',
-            name: intl.formatMessage({ id: 'member.management.maintain.detail.orderEvaluation' }),
-          },
-          {
-            key: 'afterServiceEvaluation',
-            name: intl.formatMessage({ id: 'member.management.maintain.detail.afterServiceEvaluation' }),
-          },
-          {
-            key: 'feedbackRecords',
-            name: intl.formatMessage({ id: 'member.management.maintain.detail.feedbackRecords' }),
-          },
-        ];
-        break;
-      case 'archiveInfo':
-        ret = [
-          {
-            key: 'categoryInfo',
-            name: intl.formatMessage({ id: 'member.management.maintain.detail.categoryInfo' }),
-          },
-          {
-            key: 'depositDetails',
-            name: intl.formatMessage({ id: 'member.management.maintain.detail.depositDetails' }),
-          },
-          {
-            key: 'qualitiesInfo',
-            name: intl.formatMessage({ id: 'member.management.maintain.detail.qualitiesInfo' }),
-          },
-          {
-            key: 'inspectInfo',
-            name: intl.formatMessage({ id: 'member.management.maintain.detail.inspectInfo' }),
-          },
-          {
-            key: 'appraisalInfo',
-            name: intl.formatMessage({ id: 'member.management.maintain.detail.appraisalInfo' }),
-          },
-          {
-            key: 'rectifyInfo',
-            name: intl.formatMessage({ id: 'member.management.maintain.detail.rectifyInfo' }),
-          },
-        ];
-        break;
-      case 'changedInfo':
-          ret = [
-            {
-              key: 'changedInfo',
-              name: intl.formatMessage({ id: 'member.management.maintain.detail.changedInfo' }),
-            },
-          ];
-          break;
-      default:
-        break;
-    }
-    return ret;
+  const handleAnchorsReady = (anchors: AnchorsItem[]) => {
+    setAnchors(anchors);
   };
 
   return (
@@ -253,8 +116,8 @@ const MemberMaintainDetailed: React.FC<QueryProps> = props => {
           />
         )}
         onBack={() => history.push(`/memberCenter/supplierAbility/manage/maintain`)}
-        anchors={getAnchorsArr()}
-        extra={(
+        anchors={anchors}
+        desc={(
           <Bookmark value={getBookmarkKey()} onChange={handleBookmarkChange}>
             <Bookmark.Item value="basicInfo" title={intl.formatMessage({ id: 'member.management.maintain.basic' })} icon={<UnorderedListOutlined />} />
             <Bookmark.Item value="archiveInfo" title={intl.formatMessage({ id: 'member.management.maintain.detail.archivalInfo' })} icon={<FolderOutlined />} />
@@ -265,10 +128,18 @@ const MemberMaintainDetailed: React.FC<QueryProps> = props => {
           </Bookmark>
         )}
       >
-        {children}
+        <MemberDetailsContextProvider
+          value={{
+            details: memberInfo,
+            refreshDetails: getBasicInfo,
+            onAnchorsReady: handleAnchorsReady,
+          }}
+        >
+          {children}
+        </MemberDetailsContextProvider>
       </AnchorPage>
     </Spin>
   );
 };
 
-export default inject('MemberStore')(observer(MemberMaintainDetailed));
+export default MemberMaintainDetailed;

src/pages/supplier/memberPrVerifyComingData/detail.tsx

@@ -7,7 +7,8 @@
  */
 import React from 'react';
 import { usePageStatus } from '@/hooks/usePageStatus';
-import { getMemberDepositVerifyDetail } from '@/services/MemberV2Api';
+import { getMemberDepositVerifyDetail, GetMemberDepositVerifyDetailResponse } from '@/services/MemberV2Api';
+import { IRequestSuccess } from '@/index';
 import fetchDetailHoc from '../common/hoc/fetchDetailHoc';
 import MemberProfile from '../components/MemberProfile';
 
@@ -15,9 +16,18 @@ const MemberPrVerifyComingDataDetail: React.FC<{}> = () => {
   const { validateId } = usePageStatus();
 
   const MemberProfilePro = fetchDetailHoc({
-    fetchDetail: () => getMemberDepositVerifyDetail({
-      validateId,
-    }),
+    fetchDetail: (): Promise<IRequestSuccess<GetMemberDepositVerifyDetailResponse>> => (
+      new Promise((resolve, reject) => {
+        getMemberDepositVerifyDetail({
+          validateId,
+        }).then((res) => {
+          if (res.code === 1000) {
+            res.data.depositDetails = res.data.depositDetailTexts;
+          }
+          resolve(res);
+        })
+      })
+    ),
   }, MemberProfile);
 
   return (

src/pages/supplier/memberPrVerifyComingData/verify.tsx

@@ -16,10 +16,11 @@ import {
 } from '@ant-design/icons';
 import { history, useIntl } from 'umi';
 import { usePageStatus } from '@/hooks/usePageStatus';
+import { useHttpRequest } from '@/hooks/useHttpRequest';
 import { postMemberDepositVerify, getMemberDepositVerifyDetail } from '@/services/MemberV2Api';
 import { normalizeFiledata } from '@/utils';
+import { IRequestSuccess } from '@/index';
 import VerifyComingDataDrawer, { ValueType as VerifyData } from './components/VerifyComingDataDrawer';
-import fetchDetailHoc, { ResponseType } from '../common/hoc/fetchDetailHoc';
 import MemberProfile, { DetailType } from '../components/MemberProfile';
 import { ChannelValueType, ChannelRefHandle } from '../components/MemberChannelInfoForm';
 import { DepositValueType, DepositRefHandle } from '../components/MemberDocIncomingInfoForm';
@@ -37,6 +38,52 @@ const MemberPrVerifyComingDataVerify: React.FC<{}> = () => {
   const depositInfoRef = useRef<DepositValueType | null>(null);
   const qualitiesRef = useRef<QualitiesSubmitValueType[] | null>([]);
 
+  const fetchDetail = (): Promise<IRequestSuccess<DetailType>> => {
+    return new Promise((resolve, reject) => {
+      getMemberDepositVerifyDetail({
+        validateId,
+      }).then((res) => {
+        if (res.data && res.data.upperMembers) {
+          const newUpperMembers = [...(res.data.upperMembers || [])];
+
+          // 手动添加一个选项
+          if (newUpperMembers.findIndex((item) => item.upperRelationId === 0) === -1) {
+            newUpperMembers.unshift({
+              upperRelationId: 0,
+              name: intl.formatMessage({ id: 'member.management.memberPrVerifyComingData.verify.upperMember.null' }),
+            });
+          }
+          res.data.upperMembers = newUpperMembers;
+        }
+        if (res.code === 1000) {
+          // 要手动将旧数据带过去
+          const depositDetails = {};
+          res.data.depositDetails.forEach((item) => {
+            if (item.elements) {
+              item.elements.forEach((ele) => {
+                depositDetails[ele.fieldName] = ele.fieldValue;
+              });
+            }
+          });
+          depositInfoRef.current = depositDetails;
+          qualitiesRef.current = res.data.qualities.map((item) => ({
+            file: item.url ? [normalizeFiledata(item.url)] : [],
+            expireDay: item.expireDay,
+            permanent: item.permanent === 1 ? [item.permanent] : [],
+          }));
+        }
+        resolve(res);
+      }).catch(err => {
+        reject(err);
+      });
+    });
+  };
+
+  const {
+    data: dataSource,
+    loading,
+  } = useHttpRequest<DetailType>(fetchDetail, { manual: false });
+
   const intl = useIntl();
 
   const handleVisibleVerifyDrawer = (flag?) => {
@@ -101,30 +148,6 @@ const MemberPrVerifyComingDataVerify: React.FC<{}> = () => {
     });
   };
 
-  const fetchDetail = (): Promise<ResponseType<DetailType>> => {
-    return new Promise((resolve, reject) => {
-      getMemberDepositVerifyDetail({
-        validateId,
-      }).then((res) => {
-        if (res.data && res.data.upperMembers) {
-          const newUpperMembers = [...(res.data.upperMembers || [])];
-
-          // 手动添加一个选项
-          if (newUpperMembers.findIndex((item) => item.upperRelationId === 0) === -1) {
-            newUpperMembers.unshift({
-              upperRelationId: 0,
-              name: intl.formatMessage({ id: 'member.management.memberPrVerifyComingData.verify.upperMember.null' }),
-            });
-          }
-          res.data.upperMembers = newUpperMembers;
-        }
-        resolve(res);
-      }).catch(err => {
-        reject(err);
-      });
-    });
-  };
-
   const handleChannelInfoChange = (values: ChannelValueType) => {
     channelInfoRef.current = values;
   };
@@ -137,30 +160,11 @@ const MemberPrVerifyComingDataVerify: React.FC<{}> = () => {
     qualitiesRef.current = values;
   };
 
-  const MemberProfilePro = fetchDetailHoc({
-    fetchDetail: fetchDetail,
-    fetchCallback: (info) => {
-      // 要手动将旧数据带过去
-      const depositDetails = {};
-      info.depositDetails.forEach((item) => {
-        if (item.elements) {
-          item.elements.forEach((ele) => {
-            depositDetails[ele.fieldName] = ele.fieldValue;
-          });
-        }
-      });
-      depositInfoRef.current = depositDetails;
-      qualitiesRef.current = info.qualities.map((item) => ({
-        file: item.url ? [normalizeFiledata(item.url)] : [],
-        expireDay: item.expireDay,
-        permanent: item.permanent === 1 ? [item.permanent] : [],
-      }));
-    },
-  }, MemberProfile);
-
   return (
     <>
-      <MemberProfilePro
+      <MemberProfile
+        dataSource={dataSource}
+        loading={loading}
         extra={() => (
           <>
             <Space>

src/pages/supplier/utils.tsx

@@ -80,16 +80,16 @@ export type GroupItem = {
 }
 
 export function coverColFiltersItem(
-  data: Array<{[key: string]: any}>, 
-  dataIndex: string, 
-  item: {[key: string]: any}
+  data: Array<{ [key: string]: any }>,
+  dataIndex: string,
+  item: { [key: string]: any }
 ) {
   const index = data.findIndex(i => i.dataIndex === dataIndex);
-  
+
   if (index !== -1) {
     data.splice(index, 1, {
       ...data[index],
-      filters: item, 
+      filters: item,
     });
   }
 };
@@ -129,7 +129,7 @@ const getFieldType = (field: ElementType, editable: boolean = true) => {
   // 默认是 输入框
   let description: { [key: string]: any } = {
     'x-component-props': {
-      placeholder: field.fieldRemark, 
+      placeholder: field.fieldRemark,
       disabled: isDisabled,
     },
   };
@@ -151,7 +151,7 @@ const getFieldType = (field: ElementType, editable: boolean = true) => {
       (
         field.pattern
           ? {
-            pattern: field.pattern, 
+            pattern: field.pattern,
             message: field.msg,
           }
           : null
@@ -161,7 +161,7 @@ const getFieldType = (field: ElementType, editable: boolean = true) => {
 
   switch (field.fieldType as FieldType) {
     case 'upload': {
-      description =  {
+      description = {
         'x-component': 'CustomUpload',
         'x-component-props': {
           showDesc: false,
@@ -225,7 +225,7 @@ const getFieldType = (field: ElementType, editable: boolean = true) => {
  */
 export function createMemberSchema(elements: ElementType[], editable: boolean = true) {
   const components = {};
-  
+
   if (!Array.isArray(elements)) {
     return components;
   }
@@ -242,12 +242,12 @@ export function renderFieldTypeContent(fieldType: FieldType, fieldValue: any): R
   switch (fieldType) {
     case 'upload':
       node = (
-        <PicWrap 
-          pics={[fieldValue]} 
+        <PicWrap
+          pics={[fieldValue]}
         />
       );
       break;
-  
+
     default:
       break;
   }
@@ -292,4 +292,11 @@ export function completeCategory(ids: string[], dataSource: CategoryItemType[]):
     }
   });
   return ret;
-};
+};
\ No newline at end of file
+
+/**
+ * 获取入库信息锚点key
+ * @param index 索引
+ * @returns 
+ */
+export const getIncomingInfoAnchorKey = (index: number) => `incomingInfo-${index}`;
\ No newline at end of file