对接完信息查询 -》会员信息变更

config/routes/memberRoute.ts

@@ -203,6 +203,13 @@ const MemberRoute = {
         },
       ],
     },
+    {
+      path: '/memberCenter/memberAbility/update',
+      name: 'memberUpdate',
+      key: 'memberUpdate', 
+      hideInMenu: true,
+      component: '@/pages/member/memberQuery/update',
+    },
   ]
 }
 

src/locales/zh-CN/menu.ts

 /*
  * @Author: LeeJiancong
  * @Date: 2020-07-13 14:08:50
- * @LastEditors: LeeJiancong
- * @LastEditTime: 2020-09-10 14:40:36
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2020-09-10 17:18:41
  */
 
 export default {
@@ -90,6 +90,7 @@ export default {
   'menu.memberAbility.memberQueryDetailed.levelInfo': '会员等级信息',
   'menu.memberAbility.memberQueryDetailed.equityInfo': '权益信息',
   'menu.memberAbility.memberQueryDetailed.sincerityInfo': '诚信信息',
+  'menu.memberAbility.memberUpdate': '变更会员信息',
 
   // 店铺能力
   'menu.shopAbility': '店铺',

src/pages/member/memberImport/addMember.tsx

@@ -184,8 +184,8 @@ const AddMember: React.FC<any> = props => {
           return;
         }
         setTimeout(() => {
-          history.replace('/memberCenter/memberAbility/manage/import');
-        }, 1000);
+          history.goBack();
+        }, 800);
       }).finally(() => {
         msg();
         setSubmitLoading(false);
@@ -213,9 +213,10 @@ const AddMember: React.FC<any> = props => {
         if (res.code !== 1000) {
           return;
         }
+        setUnsaved(false);
         setTimeout(() => {
           history.replace('/memberCenter/memberAbility/manage/import');
-        }, 1000);
+        }, 800);
       }).finally(() => {
         msg();
         setSubmitLoading(false);

src/pages/member/memberPr1/auditPr1.tsx

@@ -107,7 +107,7 @@ const AuditPr1: React.FC<{}> = () => {
       setModalVisible(false);
       setTimeout(() => {
         history.goBack();
-      }, 1000);
+      }, 800);
     }).catch(err => {
       setConfirmLoading(false);
     });

src/pages/member/memberPr2/auditPr2.tsx

@@ -107,7 +107,7 @@ const AuditPr2: React.FC<{}> = () => {
       setModalVisible(false);
       setTimeout(() => {
         history.goBack();
-      }, 1000);
+      }, 800);
     }).catch(err => {
       setConfirmLoading(false);
     });

src/pages/member/memberPrConfirm/auditPrComfirm.tsx

@@ -107,7 +107,7 @@ const AuditPrComfirm: React.FC<{}> = () => {
       setModalVisible(false);
       setTimeout(() => {
         history.goBack();
-      }, 1000);
+      }, 800);
     }).catch(err => {
       setConfirmLoading(false);
     });

src/pages/member/memberPrSubmit/auditPrSubmit.tsx

@@ -174,9 +174,10 @@ const AuditPrSubmit: React.FC<{}> = () => {
     Promise.all(promises).then(res => {
       setConfirmLoading(false);
       setModalVisible(false);
+      setUnsaved(false);
       setTimeout(() => {
         history.goBack();
-      }, 1000);
+      }, 800);
     }).catch(err => {
       setConfirmLoading(false);
     });

src/pages/member/memberQuery/index.tsx

@@ -36,33 +36,6 @@ import {
   MEMBER_OUTER_STATUS_BADGE_COLOR, 
 } from '../constant';
 
-const mock = [
-  {
-    memberId: 1, 
-    validateId: 1, 
-    name: '模拟会员1', 
-    memberTypeName: '模拟会员类型1', 
-    roleName: '模拟角色', 
-    sourceName: '2020.08.28 15:14:00', 
-    memberStatus: '正常',
-    status: 1, 
-    outerStatusName: '待审核', 
-    innerStatusName: '审核通过', 
-  }, 
-  {
-    memberId: 2, 
-    validateId: 2, 
-    name: '模拟会员1', 
-    memberTypeName: '模拟会员类型1', 
-    roleName: '模拟角色', 
-    sourceName: '2020.08.28 15:14:00', 
-    memberStatus: '正常',
-    status: 0, 
-    outerStatusName: '待审核', 
-    innerStatusName: '待提交审核', 
-  }, 
-];
-
 const formActions = createFormActions();
 
 const fetchData = async (params: any) => {
@@ -74,6 +47,10 @@ const MemberQuery: React.FC<[]> = () => {
   const ref = useRef<any>({});
   const [selectedRowKeys, setSelectedRowKeys] = useState<Array<string>>([]);
 
+  const handleJumpUpdate = record => {
+    history.push(`/memberCenter/memberAbility/update?id=${record.memberId}&validateId=${record.validateId}`);
+  };
+
   const defaultColumns: ColumnType<any>[] = [
     {
       title: 'ID',
@@ -86,7 +63,7 @@ const MemberQuery: React.FC<[]> = () => {
       align: 'center',
       render: (text, record) => (
         <EyePreview
-          url={`/memberCenter/memberAbility/query/detailed?id=${record.memberId}&validateId=${record.validateId}&preview=1`}
+          url={`/memberCenter/memberAbility/query/detailed?id=${record.memberId}&validateId=${record.validateId}`}
         >
           {text}
         </EyePreview>
@@ -145,7 +122,7 @@ const MemberQuery: React.FC<[]> = () => {
       render: (text, record) => (
         <Button
           type="link"
-          onClick={() => {}}
+          onClick={() => handleJumpUpdate(record)}
         >
           变更信息
         </Button>

src/pages/member/memberQuery/schema/index.tsx

@@ -59,3 +59,91 @@ export const maintianSchema: ISchema = {
     },
   },
 };
+
+const FIELD_TYPE_MAP = {
+  'string': 'string', 
+  'long': 'string', 
+  'upload': 'customUpload', 
+};
+
+const getXComponentProps = (type, item) => {
+  const MAP = {
+    'string': {
+      placeholder: item.fieldRemark, 
+    }, 
+    'upload': {
+      listType: 'card',
+      action: '/api/file/file/upload',
+      data: { fileType: UPLOAD_TYPE },
+      fileList: [],
+      onChange: file => console.log(file),
+    }, 
+  };
+  return MAP[type];
+};
+
+const getCompnentValue = (elements: any) => {
+  const components = {};
+  for (let item of elements) {
+
+    // 先判断是否存在 type，防止不存在的 type 报错
+    const realType = FIELD_TYPE_MAP[item.fieldType];
+    if (realType) {
+      components[item.fieldName] = {
+        type: FIELD_TYPE_MAP[item.fieldType],
+        required: item.fieldEmpty === 0,
+        title: item.fieldCNName,
+        default: item.fieldValue, 
+        'x-component-props': getXComponentProps(realType, item),
+      };
+    }
+  }
+  return components;
+};
+
+export const initDetailSchema = (props: any) => {
+  let tabSchema: ISchema = {
+    properties: {}, 
+  };
+
+  if (Array.isArray(props)) {
+    for (let [index, item] of props.entries()) {
+      tabSchema.properties[`tab-${index}`] = {
+        type: 'object',
+        'x-component': 'TabPane',
+        'x-component-props': {
+          tab: item.groupName,
+        },
+        properties: {
+          [`MEGA_LAYOUT${index}`]: {
+            type: 'object',
+            'x-component': 'Mega-Layout',
+            'x-component-props': {
+              labelCol: 4,
+              wrapperCol: 8,
+              labelAlign: 'left',
+            },
+            properties: getCompnentValue(item.elements),
+          },
+        },
+      };
+    }
+  }
+
+  let detailSchema: ISchema = {
+    type: 'object',
+    properties: {
+      tabs: {
+        type: 'object',
+        'x-component': 'Tab',
+        'x-component-props': {
+          type: 'card', 
+          hiddenKeys: ['tab-2'],
+        },
+        ...tabSchema,
+      },
+    },
+  };
+  const maintianDetailSchema: ISchema = detailSchema;
+  return maintianDetailSchema;
+};

src/pages/member/memberQuery/update.tsx

+import React, { useState, useEffect, useRef, ReactNode } from 'react';
+import { history, Prompt } from 'umi';
+import { Badge, Button, Card, Spin, message } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { SaveOutlined } from '@ant-design/icons';
+import { createFormActions, FormEffectHooks, FormPath } from '@formily/antd';
+import { usePageStatus } from '@/hooks/usePageStatus';
+import ReutrnEle from '@/components/ReturnEle';
+import NiceForm from '@/components/NiceForm';
+import { useLinkageUtils } from '@/utils/formEffectUtils';
+import { PublicApi } from '@/services/api';
+import { GetMemberAbilitySubGetResponse } from '@/services/MemberApi';
+import { initDetailSchema } from './schema';
+
+const formActions = createFormActions();
+const { 
+  onFieldValueChange$, 
+  onFieldInputChange$, 
+  onFormInputChange$, 
+} = FormEffectHooks;
+
+const MemberUpdate: React.FC<any> = props => {
+  const areaRef = useRef<any[]>([])
+  const { id, validateId } = usePageStatus();
+  const [memberItems, setMemberItems] = useState<any>({});
+  const [memberInfo, setMemberInfo] = useState<GetMemberAbilitySubGetResponse>(null);
+  const [submitLoading, setSubmitLoading] = useState(false);
+  const [infoLoading, setInfoLoading] = useState(false);
+  const [unsaved, setUnsaved] = useState(false);
+
+  const getDetailedInfo = async () => {
+    if (id && validateId) {
+      setInfoLoading(true);
+      const infoRes = await PublicApi.getMemberAbilityInfoDetailUpdateGet({
+        memberId: id, 
+        validateId,
+      });
+
+      if (infoRes.code !== 1000) {
+        return;
+      }
+      const { groups = [] } = infoRes.data;
+
+      setMemberItems(groups);
+
+      setInfoLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getDetailedInfo();
+  }, []);
+
+  const handleSubmit = (values: any) => {
+    const { 
+      memberTypeId, 
+      roleId, 
+      levelId, 
+      countryCodeId, 
+      phone, 
+      email, 
+      channelLevel, 
+      channelTypeId, 
+      areas, 
+      remark, 
+
+      outerStatus, 
+      status, 
+      statusName, 
+      ...rest 
+    } = values;
+
+    setSubmitLoading(true);
+    const msg = message.loading({
+      content: '正在保存，请稍候...', 
+      duration: 0,
+    });
+    PublicApi.postMemberAbilityInfoDetailUpdate({
+      memberId: id, 
+      validateId, 
+      detail: values, 
+    }).then(res => {
+      if (res.code !== 1000) {
+        return;
+      }
+      setUnsaved(false);
+      setTimeout(() => {
+        history.goBack();
+      }, 800);
+    }).finally(() => {
+      msg();
+      setSubmitLoading(false);
+    });
+  };
+
+  const useAsyncLinkageEffect = () => {
+    const linkage = useLinkageUtils();
+
+    // 根据会员角色，查询其他注册资料
+    onFieldValueChange$('roleId').subscribe(fieldState => {
+      if (!fieldState.value) {
+        return;
+      }
+      PublicApi.getMemberAbilitySubPageitemsDetail({
+        roleId: fieldState.value,
+      }).then(res => {
+        if (res.code === 1000) {
+          const { data = [] } = res;
+          setMemberItems(data);
+        }
+      });
+    });
+  }
+
+  return (
+    <Spin spinning={infoLoading}>
+      <PageHeaderWrapper
+        onBack={() => history.goBack()}
+        backIcon={<ReutrnEle description="返回" />}
+        title="编辑会员"
+        extra={[
+          <Button
+            key="1"
+            type="primary"
+            icon={<SaveOutlined />}
+            loading={submitLoading}
+            onClick={() => formActions.submit()}
+          >
+            保存
+          </Button>,
+        ]}
+      >
+        <Card>
+          <NiceForm
+            onSubmit={handleSubmit}
+            actions={formActions}
+            initialValues={memberInfo || {}}
+            effects={($, actions) => {
+              onFormInputChange$().subscribe(() => {
+                if (!unsaved) {
+                  setUnsaved(true);
+                }
+              });
+            }}
+            schema={initDetailSchema(memberItems)}
+          />
+        </Card>
+      </PageHeaderWrapper>
+
+      <Prompt when={unsaved} message="您还有未保存的内容，是否确定要离开？" />
+    </Spin>
+  );
+};
+
+export default MemberUpdate;
\ No newline at end of file