feat: 入库资料拆分分组展示

src/pages/member/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/member/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/member/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/member/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';
@@ -38,7 +38,6 @@ import MemberDocIncomingInfoForm, { DepositValueType, DepositRefHandle } from '.
 import MemberQualitiesForm, { QualitiesSubmitValueType, QualitiesRefHandle } from '../MemberQualitiesForm';
 
 export * from './interface';
-
 interface IProps {
   /**
    * 数据，待定
@@ -118,6 +117,13 @@ const MemberProfile: React.FC<IProps> = (props) => {
 
   const intl = useIntl();
 
+  const depositDetails = useMemo(() => (
+    dataSource?.depositDetailTexts
+    && dataSource?.depositDetailTexts.length > 0
+      ? dataSource?.depositDetailTexts
+      : dataSource?.depositDetails || []
+  ), [dataSource?.depositDetailTexts, dataSource?.depositDetails]);
+
   const anchorsArr = [
     {
       key: 'verifySteps',
@@ -147,22 +153,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' }),
@@ -343,15 +345,16 @@ const MemberProfile: React.FC<IProps> = (props) => {
             ) > 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}
           
           {/* 入库信息，可编辑的 */}
@@ -359,15 +362,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/member/utils.tsx

@@ -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