feat: 添加修改渠道信息相关

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

@@ -2,13 +2,16 @@
  * @Author: XieZhiXiong
  * @Date: 2021-05-18 17:26:14
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-05-18 17:59:46
+ * @LastEditTime: 2021-07-07 15:12:56
  * @Description: 会员渠道信息
  */
 
-import React from 'react';
-import { Row, Col, Descriptions } from 'antd';
+import React, { useState } from 'react';
+import { Row, Col, Descriptions, Button, message } from 'antd';
+import { PublicApi } from '@/services/api';
+import { GetMemberAbilityMaintenanceDetailBasicChannelResponse } from '@/services/MemberV2Api';
 import MellowCard, { MellowCardProps } from '@/components/MellowCard';
+import ModifyChannelDrawer, { ValueType } from '../ModifyChannelDrawer';
 import styles from './index.less';
 
 interface IProps extends MellowCardProps {
@@ -33,16 +36,88 @@ interface IProps extends MellowCardProps {
      */
     desc: string,
   },
+  /**
+   * 审核id
+   */
+  validateId?: string,
+  /**
+   * 修改渠道信息之后触发事件
+   */
+  onModifyAfter?: () => void,
 }
 
 const MemberChannelInfo: React.FC<IProps> = (props: IProps) => {
-  const { dataSource, ...rest } = props;
+  const { dataSource, validateId, onModifyAfter, ...rest } = props;
+  const [visibleDrawer, setVisibleDrawer] = useState(false);
+  const [channelInfo, setChannerlInfo] = useState<GetMemberAbilityMaintenanceDetailBasicChannelResponse>();
+  const [infoLoading, setInfoLoading] = useState(false);
+  const [submitLoading, setSubmitLoading] = useState(false);
+
+  const handleVisibleDrawer = (flag?) => {
+    setVisibleDrawer(!!flag);
+  };
+
+  const handleModifyChannelInfo = () => {
+    if (!validateId) {
+      return;
+    }
+    setInfoLoading(true);
+    PublicApi.getMemberAbilityMaintenanceDetailBasicChannel({
+      validateId,
+    }).then(res => {
+      if (res.code === 1000) {
+        setChannerlInfo(res.data);
+        handleVisibleDrawer(true);
+      }
+    }).finally(() => {
+      setInfoLoading(false);
+    });
+  };
+
+  const handleSubmit = (value: ValueType) => {
+    const { areaCodes, ...rest } = value;
+    setSubmitLoading(true);
+    const payload = {
+      validateId: +validateId,
+      areas: areaCodes,
+      ...rest,
+    };
+    const msg = message.loading({
+      content: '正在提交，请稍候...',
+      duration: 0,
+    });
+    PublicApi.postMemberAbilityMaintenanceDetailBasicChannelUpdate(payload, {
+      timeout: 0,
+    }).then(res => {
+      if (res.code !== 1000) {
+        return;
+      }
+      handleVisibleDrawer(false);
+      onModifyAfter?.();
+    }).finally(() => {
+      msg();
+      setSubmitLoading(false);
+    });
+  };
 
   return (
     <MellowCard
       title="渠道信息"
       {...rest}
       className={styles['channel-info']}
+      extra={(
+        <>
+          {validateId && (
+            <Button
+              type="link"
+              loading={infoLoading}
+              onClick={handleModifyChannelInfo}
+            >
+              修改
+            </Button>
+          )}
+        </>
+      )}
     >
       <Row gutter={16}>
         <Col span={8}>
@@ -74,6 +149,24 @@ const MemberChannelInfo: React.FC<IProps> = (props: IProps) => {
           </Descriptions>
         </Col>
       </Row>
+
+      <ModifyChannelDrawer
+        visible={visibleDrawer}
+        onClose={() => handleVisibleDrawer(false)}
+        onSubmit={handleSubmit}
+        submitLoading={submitLoading}
+        channelInfo={{
+          upperMembers: channelInfo?.upperMembers,
+          channelTypes: channelInfo?.channelTypes,
+        }}
+        channelValue={{
+          upperRelationId: channelInfo?.upperRelationId,
+          channelTypeId: channelInfo?.channelTypeId,
+          channelLevel: channelInfo?.channelLevelTag,
+          areaCodes: channelInfo?.areaCodes,
+          remark: channelInfo?.remark,
+        }}
+      />
     </MellowCard>
   );
 };

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

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-07-07 13:47:02
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-07-07 15:16:50
+ * @Description: 修改渠道信息 抽屉
+ */
+import React, { useEffect } from 'react';
+import {
+  Drawer,
+  Button,
+} from 'antd';
+import { DatePicker } from '@formily/antd-components';
+import {
+  createFormActions,
+  createAsyncFormActions,
+  FormEffectHooks,
+  FormPath,
+} from '@formily/antd';
+import { useLinkageUtils } from '@/utils/formEffectUtils';
+import { PublicApi } from '@/services/api';
+import NiceForm from '@/components/NiceForm';
+import { schema } from './schema';
+
+export type AreaCodesType = {
+  /**
+   * 省编码
+   */
+  provinceCode: string,
+  /**
+   * 市编码
+   */
+  cityCode: string,
+}
+
+export type ValueType = {
+  /**
+   * 渠道类型Id，当会员是渠道会员时必填
+   */
+  channelTypeId: number,
+  /**
+   * 上级会员Id，当会员是渠道会员时要大于等于0
+   */
+  upperRelationId: number,
+  /**
+   * 上级会员Id，当会员是渠道会员时要大于等于0
+   */
+  areaCodes: AreaCodesType[],
+  /**
+   * 渠道描述
+   */
+  remark: string,
+}
+
+interface IProps {
+  /**
+   * 是否可见
+   */
+  visible: boolean,
+  /**
+   * Form 确认事件
+   */
+  onSubmit: (values: ValueType) => void,
+  /**
+   * 抽屉关闭事件
+   */
+  onClose: () => void,
+  /**
+   * 渠道信息
+   */
+  channelInfo: {
+    /**
+     * 上级会员列表
+     */
+    upperMembers: {
+      /**
+       * 上级会员关系Id
+       */
+      upperRelationId: number,
+      /**
+       * 上级会员公司名称+角色名称
+       */
+      name: string,
+    }[],
+    /**
+     * 渠道类型
+     */
+    channelTypes: {
+      /**
+       * 渠道类型Id
+       */
+      channelTypeId: number,
+      /**
+       * 渠道类型名称
+       */
+      channelTypeName: string,
+    }[],
+  },
+  /**
+   * 渠道信息值
+   */
+  channelValue: {
+    /**
+     * 已经选择的上级会员关系Id
+     */
+    upperRelationId: number,
+    /**
+     * 渠道类型
+     */
+    channelTypeId: number,
+    /**
+     * 渠道信息-渠道级别
+     */
+    channelLevel: string,
+    /**
+     * 代理城市编码列表
+     */
+    areaCodes: AreaCodesType[],
+    /**
+     * 渠道信息-渠道描述
+     */
+    remark: string,
+  },
+  /**
+   * 确认按钮 loading
+   */
+  submitLoading: boolean,
+}
+
+const formActions = createAsyncFormActions();
+const {
+  onFieldValueChange$,
+  onFieldInputChange$,
+  onFormInputChange$,
+} = FormEffectHooks;
+
+const VerifyComingDataDrawer: React.FC<IProps> = (props: IProps) => {
+  const {
+    visible,
+    onSubmit,
+    onClose,
+    channelInfo,
+    channelValue,
+    submitLoading,
+  } = props;
+
+  useEffect(() => {
+    if (!channelInfo) {
+      return;
+    }
+    let {
+      upperMembers,
+      channelTypes,
+    } = channelInfo;
+    upperMembers = upperMembers || [];
+    channelTypes = channelTypes || [];
+    const channelType = channelTypes.map(item => ({ label: item.channelTypeName, value: item.channelTypeId }));
+
+    // 渠道上级id，如果没有也是返回只有一项的数组
+    if (upperMembers.length === 1 && !upperMembers[0].upperRelationId) {
+      formActions.setFieldState('upperRelationId', state => {
+        FormPath.setIn(state, 'visible', false);
+      });
+    } else {
+      const upperMembersOptions = upperMembers.map(item => ({ label: item.name, value: item.upperRelationId }));
+      formActions.setFieldState('upperRelationId', state => {
+        FormPath.setIn(state, 'props.enum', upperMembersOptions);
+      });
+    }
+
+    formActions.setFieldState('channelTypeId', state => {
+      FormPath.setIn(state, 'props.enum', channelType);
+    });
+  }, [channelInfo]);
+  
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  const handleSubmit = (values: ValueType) => {
+    if (onSubmit) {
+      const { upperRelationId, ...rest } = values;
+      onSubmit({ upperRelationId: upperRelationId || 0, ...rest });
+    }
+  };
+
+  const useBusinessEffects = () => {
+    const linkage = useLinkageUtils();
+
+    // 渠道上级改变时，请求出对应的省级数据
+    onFieldInputChange$('upperRelationId').subscribe(fieldState => {
+      // 清空渠道原来数据
+      linkage.value('areaCodes', []);
+    });
+    
+    // 渠道上级改变时，请求出对应的省级数据
+    onFieldValueChange$('upperRelationId').subscribe(fieldState => {
+      if (fieldState.value === undefined) {
+        return;
+      }
+      
+      PublicApi.getMemberAbilityMaintenanceDetailBasicChannelProvince({
+        upperRelationId: fieldState.value,
+      }).then(res => {
+        if (res.code === 1000) {
+          const { data = [] } = res;
+          const options = data.map(item => ({ label: item.name, value: item.code }));
+          formActions.setFieldState('areaCodes.*.provinceCode', state => {
+            FormPath.setIn(state, 'props.enum', options);
+          });
+        }
+      });
+    });
+
+    // 省级改变时，，请求出对应的市级数据
+    onFieldInputChange$('areaCodes.*.provinceCode').subscribe(fieldState => {
+      formActions.setFieldState(
+        FormPath.transform(fieldState.name, /\d/, $1 => `areaCodes.${$1}.cityCode`),
+        state => {
+          FormPath.setIn(state, 'value', undefined);
+        }
+      );
+    });
+    
+    // 省级改变时，，请求出对应的市级数据
+    onFieldValueChange$('areaCodes.*.provinceCode').subscribe(async (fieldState) => {
+      if (fieldState.value === undefined) {
+        return;
+      }
+      const upperRelationValue = await formActions.getFieldValue('upperRelationId');
+
+      formActions.setFieldState(
+        FormPath.transform(fieldState.name, /\d/, $1 => `areaCodes.${$1}.cityCode`),
+        state => {
+          FormPath.setIn(state, 'props.x-props.hasFeedback', true);
+          FormPath.setIn(state, 'loading', true);
+        }
+      );
+
+      PublicApi.getMemberAbilityMaintenanceDetailBasicChannelCity({
+        upperRelationId: upperRelationValue,
+        provinceCode: fieldState.value,
+      }).then(res => {
+        if (res.code === 1000) {
+          const { data = [] } = res;
+          const options = data.map(item => ({ label: item.name, value: item.code }));
+          formActions.setFieldState(
+            FormPath.transform(fieldState.name, /\d/, $1 => `areaCodes.${$1}.cityCode`),
+            state => {
+              FormPath.setIn(state, 'props.enum', options);
+              FormPath.setIn(state, 'loading', false);
+            }
+          );
+        }
+      });
+    });
+  }
+
+  return (
+    <Drawer
+      title="修改渠道信息"
+      width={600}
+      onClose={handleClose}
+      visible={visible}
+      footer={
+        <div
+          style={{
+            textAlign: 'right',
+          }}
+        >
+          <Button onClick={handleClose} style={{ marginRight: 16 }}>
+            取 消
+          </Button>
+          <Button
+            onClick={() => formActions.submit()}
+            type="primary"
+            loading={submitLoading}
+          >
+            确 定
+          </Button>
+        </div>
+      }
+    >
+      <NiceForm
+        previewPlaceholder="' '"
+        initialValues={channelValue}
+        components={{
+          DatePicker,
+        }}
+        effects={($, { setFieldState }) => {
+          useBusinessEffects();
+        }}
+        actions={formActions}
+        schema={schema}
+        onSubmit={values => handleSubmit(values)}
+      />
+    </Drawer>
+  );
+};
+
+export default VerifyComingDataDrawer;

src/pages/member/components/ModifyChannelDrawer/schema.ts

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-07-07 13:48:35
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-07-07 13:48:36
+ * @Description: 
+ */
+import { ISchema } from '@formily/antd';
+
+export const schema: ISchema = {
+  type: 'object',
+  properties: {
+    INVESTIGATE_INFO: {
+      type: 'object',
+      'x-component': 'FlagBox',
+      'x-component-props': {
+        title: '渠道信息',
+      },
+      properties: {
+        MEGA_LAYOUT: {
+          type: 'object',
+          'x-component': 'Mega-Layout',
+          'x-component-props': {
+            labelCol: 4,
+            wrapperCol: 20,
+            labelAlign: 'left',
+          },
+          properties: {
+            upperRelationId: {
+              type: 'string', 
+              enum: [],
+              title: '上级渠道', 
+              required: true, 
+              'x-component-props': {
+                
+              },
+            },
+            channelLevel: {
+              type: 'text', 
+              title: '渠道级别', 
+            },
+            channelTypeId: {
+              type: 'string', 
+              enum: [],
+              title: '渠道类型', 
+              required: true, 
+              'x-component-props': {
+                
+              },
+            }, 
+            areaCodes: {
+              type: 'array',
+              title: '代理城市',
+              'x-component': 'CustomAddArray',
+              default: [],
+              items: {
+                type: 'object',
+                properties: {
+                  provinceCode: {
+                    type: 'string', 
+                    enum: [],
+                    'x-component-props': {
+                      allowClear: true, 
+                    },
+                  },
+                  cityCode: {
+                    type: 'string', 
+                    enum: [],
+                    'x-component-props': {
+                      allowClear: true, 
+                    },
+                  }
+                }
+              }
+            },
+            remark: {
+              type: 'string',
+              title: '渠道描述',
+              required: true, 
+              'x-component': 'TextArea',
+              'x-component-props': {
+                rows: 4, 
+                placeholder: '最大200个字符，100个汉字', 
+              },
+              'x-rules': [
+                {
+                  limitByte: true,  // 自定义校验规则
+                  maxByte: 200, 
+                }
+              ],
+            },
+          },
+        },
+      },
+    },
+  },
+};
\ No newline at end of file

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

@@ -2,16 +2,19 @@
  * @Author: XieZhiXiong
  * @Date: 2021-01-06 11:36:35
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-05-20 14:28:31
+ * @LastEditTime: 2021-07-07 15:17:21
  * @Description: 会员基础信息详情
  */
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Row,
   Col,
+  Spin,
 } from 'antd';
 import { observer, inject } from 'mobx-react';
 import { IMemberModule } from '@/module/memberModule';
+import { usePageStatus } from '@/hooks/usePageStatus';
+import { PublicApi } from '@/services/api';
 import { 
   MEMBER_TYPE_CHANNEL_CORPORATE,
   MEMBER_TYPE_CHANNEL_INDIVIDUAL,
@@ -35,100 +38,128 @@ const MemberBasicInfo: React.FC<MemberBasicInfoProps> = ({
   MemberStore,
 }) => {
   const { memberInfo } = MemberStore;
-  return (
-    <Row gutter={[16, 16]}>
-      {/* 会员审核流程 */}
-      <Col span={24}>
-        <AuditProcess
-          outerVerifySteps={memberInfo?.outerVerifySteps}
-          outerVerifyCurrent={memberInfo?.currentOuterStep}
-          innerVerifySteps={memberInfo?.innerVerifySteps}
-          innerVerifyCurrent={memberInfo?.currentInnerStep}
-          id="verifySteps"
-        />
-      </Col>
-      
-      {/* 基本信息 */}
-      <Col span={24}>
-        <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,
-          }}
-          id="basicInfo"
-        />
-      </Col>
-      
-      {/* 渠道信息 */}
-      {
-        memberInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_CORPORATE
-        || memberInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_INDIVIDUAL
-          ? (
-            <Col span={24}>
-              <MemberChannelInfo
-                dataSource={{
-                  level: memberInfo?.channelLevelTag,
-                  type: memberInfo?.channelTypeName,
-                  areas: memberInfo?.areas,
-                  desc: memberInfo?.remark,
-                }}
-                id="channelInfo"
-              />
-            </Col>
-          )
-          : null
-      }
+  const { id, validateId } = usePageStatus();
+  const [infoLoading, setInfoLoading] = useState(false);
 
-      {/* 其他注册信息 */}
-      {
-        memberInfo && memberInfo.groups
-          ? memberInfo.groups.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
+  const getBasicInfo = () => {
+    if (!validateId) {
+      return;
+    }
+    setInfoLoading(true);
+    PublicApi.getMemberAbilityMaintenanceDetailBasic({
+      validateId,
+    }).then(res => {
+      if (res.code !== 1000) {
+        return;
       }
+      MemberStore.setMemberInfo(res.data);
+    }).finally(() => {
+      setInfoLoading(false);
+    });
+  };
+
+  const handleModifyAfter = () => {
+    getBasicInfo();
+  };
+
+  return (
+    <Spin spinning={infoLoading}>
+      <Row gutter={[16, 16]}>
+        {/* 会员审核流程 */}
+        <Col span={24}>
+          <AuditProcess
+            outerVerifySteps={memberInfo?.outerVerifySteps}
+            outerVerifyCurrent={memberInfo?.currentOuterStep}
+            innerVerifySteps={memberInfo?.innerVerifySteps}
+            innerVerifyCurrent={memberInfo?.currentInnerStep}
+            id="verifySteps"
+          />
+        </Col>
+        
+        {/* 基本信息 */}
+        <Col span={24}>
+          <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,
+            }}
+            id="basicInfo"
+          />
+        </Col>
+        
+        {/* 渠道信息 */}
+        {
+          memberInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_CORPORATE
+          || memberInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_INDIVIDUAL
+            ? (
+              <Col span={24}>
+                <MemberChannelInfo
+                  dataSource={{
+                    level: memberInfo?.channelLevelTag,
+                    type: memberInfo?.channelTypeName,
+                    areas: memberInfo?.areas,
+                    desc: memberInfo?.remark,
+                  }}
+                  validateId={memberInfo?.validateId}
+                  onModifyAfter={handleModifyAfter}
+                  id="channelInfo"
+                />
+              </Col>
+            )
+            : null
+        }
+
+        {/* 其他注册信息 */}
+        {
+          memberInfo && memberInfo.groups
+            ? memberInfo.groups.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
+        }
 
-      {/* 流转记录 */}
-      <Col span={24}>
-        <FlowRecords
-          outerColumns={MEMBER_OUTER_COLUMNS}
-          innerColumns={MEMBER_INNER_COLUMNS}
-          outerRowkey="id"
-          innerRowkey="id"
-          outerDataSource={memberInfo?.outerHistory}
-          innerDataSource={memberInfo?.innerHistory}
-          id="flowRecords"
-        />
-      </Col>
-    </Row>
+        {/* 流转记录 */}
+        <Col span={24}>
+          <FlowRecords
+            outerColumns={MEMBER_OUTER_COLUMNS}
+            innerColumns={MEMBER_INNER_COLUMNS}
+            outerRowkey="id"
+            innerRowkey="id"
+            outerDataSource={memberInfo?.outerHistory}
+            innerDataSource={memberInfo?.innerHistory}
+            id="flowRecords"
+          />
+        </Col>
+      </Row>
+    </Spin>
   );
 };