merge: 合并0418-1

src/components/AuthButton/按钮状态.md

-# btnCode 是pass 平台配置唯一表示 
+# btnCode 是pass 平台配置唯一表示 
@@ -95,6 +95,7 @@
       memberImport.add	会员导入-新曾	会员导入-新曾-按钮	
       memberImport.commit	会员导入-提交平台审核	会员导入-提交平台审核-按钮
       memberImport.introduce 会员导入-会员引入 会员导入-会员引入-按钮
+      memberImport.import 会员导入-会员导入 会员导入-导入-按钮
     1.2 会员信息
       memberMaintain.see	会员信息-查看	会员信息-查看-按钮	
       memberMaintain.freeze	会员信息-冻结	会员信息-冻结-按钮	

src/components/UploadModal/index.less

-.step0Description{
-  text-align: left;
-  width: 280px;
-  margin: 0 auto;
-  list-style-type: decimal;
-  li{
-    color: #909399;
-    font-size: 12px;
+@import '~antd/es/style/themes/default.less';
+
+.upload-modal {
+  &-step1 {
+    text-align: center;
+    padding: 32px 63px;
   }
-}
-.step1Description{
-  h4{
-    height:22px;
-    font-size: 12px;
-    font-weight:500;
-    color:rgba(23,43,77,1);
-    line-height:22px;
-  }
-  p{
-    height:20px;
-    font-size: 12px;
-    font-weight:400;
-    color:rgba(107,119,140,1);
-    line-height:20px;
+
+  &-step2 {
+    text-align: center;
+    padding: 32px 0 152px;
+  }
+  
+  &-step3,
+  &-step4 {
+    text-align: center;
+    padding: 32px 0 80px;
+  }
+
+  &-xls {
+    padding-bottom: 32px;
+    text-align: center;
+  }
+
+  &-descriptions {
+    width: 262px;
+    margin: 0 auto;
+    padding: 0;
+    list-style: none;
+
+    &-circle {
+      width: 16px;
+      height: 16px;
+      display: inline-block;
+      margin-right: @margin-xs;
+      background-color: #4787F0;
+      border-radius: 16px;
+      color: @white;
+    }
+
+    &-item {
+      display: flex;
+      align-items: center;
+      padding: @padding-xss 0;
+
+      &-txt {
+        margin-bottom: 0;
+        font-size: @font-size-base;
+        color: @text-color-secondary;
+      }
+    }
+  }
+
+  &-download {
+    padding: 0 @padding-xs;
+  }
+  
+  &-actions {
+    text-align: center;
+
+    &-chuRiver {
+      margin-top: 40px;
+    }
+  }
+
+  &-spin {
+    padding-bottom: 40px;
+    text-align: center;
+    color: #4787F0;
+
+    &-success {
+      color: #00A98F;
+    }
+    
+    &-error {
+      color: #E34D59;
+    }
+  }
+
+  &-step {
+    &-title {
+      margin-bottom: @margin-xss;
+      color: @text-color;
+      font-size: @font-size-base;
+    }
+
+    &-desc {
+      color: @text-color-secondary;
+      font-size: @font-size-base;
+    }
   }
 }

src/locales/en-US/components.ts

@@ -274,4 +274,19 @@ export default {
   'components.xuanzezhidinghetong': 'Select the designated contract',
   'componnets.standardTablePages': 'A total of {totalPage}',
   'componnets.maxTextLength': 'Enter your reason here, up to {char} characters,{hanzi} Chinese characters',
+  'componnets.error.diary': '{fileTitle} error log.txt',
+  'componnets.excel.template': 'Click to download EXCEL file template',
+  'componnets.download': 'download',
+  'componnets.finishing': 'Organize by template',
+  'componnets.import.sorted': 'Click the Import button to import the sorted',
+  'componnets.data.import': 'Data import in progress',
+  'componnets.please.later': 'please wait',
+  'componnets.import.success': 'All data imported successfully',
+  'componnets.continue.import.or.import.is.complete': 'To continue importing, please click to continue importing, and to complete the import, please click to complete the import',
+  'componnets.continue.import': 'continue to import',
+  'componnets.import.is.complete': 'Import complete',
+  'componnets.import.exception': 'Data import failed, there is data that cannot be imported',
+  'componnets.generating.error.logs': 'An error log has been generated, please export the error log correction data and import it again',
+  'componnets.exporting.error.logs': 'Export error log',
+  'componnets.import': 'import'
 }

src/locales/en-US/member.ts

@@ -1095,4 +1095,8 @@ export default {
   'member.memberVisitManage.job': 'Job',
   'member.memberVisitManage.visitor.required': 'Please choose a user',
   'member.memberVisitManage.visitor.placeholder2': 'Choose a user',
+
+  // 导入会员弹窗
+  'member.memberImport.components.MemberRolesModal.title': 'Select role to import',
+  'member.memberImport.components.MemberRolesModal.next.step': 'Next step',
 }

src/locales/en-US/supplier.ts

@@ -158,4 +158,8 @@ export default {
   'supplier.supplierFlowRule.defaultColumns.supplierTypeName': 'Supplier Type',
   'supplier.management.supplierPrVerifyComingData.query.get-tip':
     'Are you sure you want to pick up the selected supplier',
+
+  // 导入会员弹窗
+  'supplier.memberImport.component.MemberRolesModal.title': 'Select import Roles',
+  'supplier.memberImport.component.MemberRolesModal.next.step': 'Next step'
 };

src/locales/ko-KR/components.ts

@@ -274,4 +274,19 @@ export default {
   'components.xuanzezhidinghetong': '선택지정계약',
   'componnets.standardTablePages': '총 {totalPage}',
   'componnets.maxTextLength': '여기에 이유를 입력하세요. 최대 {char}자,{hanzi}자',
+  'componnets.error.diary': '{fileTitle} 오류 로그.txt',
+  'componnets.excel.template': 'Excel 파일 템플릿을 다운로드하려면 클릭하십시오.',
+  'componnets.download': '다운로드',
+  'componnets.finishing': '템플릿으로 구성',
+  'componnets.import.sorted': '가져오기 버튼을 클릭하여 정렬된 항목을 가져옵니다.',
+  'componnets.data.import': '데이터 가져오기 진행 중',
+  'componnets.please.later': '기다리세요.',
+  'componnets.import.success': '모든 데이터를 성공적으로 가져왔습니다.',
+  'componnets.continue.import.or.import.is.complete': '가져오기를 계속하려면 를 클릭하여 가져오기를 계속하고 가져오기를 완료하려면 를 클릭하여 가져오기를 완료하십시오.',
+  'componnets.continue.import': '계속 수입',
+  'componnets.import.is.complete': '가져오기 완료',
+  'componnets.import.exception': '데이터 가져오기에 실패했습니다. 가져올 수 없는 데이터가 있습니다.',
+  'componnets.generating.error.logs': '오류 로그가 생성되었습니다. 오류 로그 수정 데이터를 내보내고 다시 가져오십시오.',
+  'componnets.exporting.error.logs': '오류 로그 내보내기',
+  'componnets.import': '수입',
 }

src/locales/ko-KR/member.ts

@@ -1089,4 +1089,8 @@ export default {
   'member.memberVisitManage.job': '위치',
   'member.memberVisitManage.visitor.required': '사용자를 선택하십시오',
   'member.memberVisitManage.visitor.placeholder2': '사용자 선택',
-}
+
+  // 导入会员弹窗
+  'member.memberImport.components.MemberRolesModal.title': '가져올 역할 선택',
+  'member.memberImport.components.MemberRolesModal.next.step': '다음 단계',
+}
\ No newline at end of file

src/locales/ko-KR/supplier.ts

@@ -152,4 +152,8 @@ export default {
   'supplier.supplierFlowRule.defaultColumns.supplierTypeName': '공급업체 유형',
   'supplier.management.supplierPrVerifyComingData.query.get-tip':
     '선택된 공급자를 선택할 것인지를 결정합니까?',
+
+  // 导入会员弹窗
+  'supplier.memberImport.component.MemberRolesModal.title': '가져올 역할 선택',
+  'supplier.memberImport.component.MemberRolesModal.next.step': '다음 단계'
 };

src/locales/zh-CN/components.ts

@@ -274,4 +274,19 @@ export default {
   'components.xuanzezhidinghetong': '选择指定合同',
   'componnets.standardTablePages': '共 {totalPage} 条',
   'componnets.maxTextLength': '在此输入您的原因, 最长{char}个字符,{hanzi}个汉字',
+  'componnets.error.diary': '{fileTitle}错误日记.txt',
+  'componnets.excel.template': '点击下载 EXCEL文件模板',
+  'componnets.download': '下载',
+  'componnets.finishing': '按照模板整理',
+  'componnets.import.sorted': '点击导入按钮，导入整理好的',
+  'componnets.data.import': '正在进行数据导入',
+  'componnets.please.later': '请稍后',
+  'componnets.import.success': '数据全部导入成功',
+  'componnets.continue.import.or.import.is.complete': '继续导入请点击继续导入，导入完成请点击导入完成',
+  'componnets.continue.import': '继续导入',
+  'componnets.import.is.complete': '导入完成',
+  'componnets.import.exception': '数据导入失败，存在无法导入的数据',
+  'componnets.generating.error.logs': '已生成错误日志，请导出错误日志修正数据后再次导入',
+  'componnets.exporting.error.logs': '导出错误日志',
+  'componnets.import': '导入',
 }

src/locales/zh-CN/member.ts

@@ -1111,4 +1111,8 @@ export default {
   'member.memberVisitManage.job': '职位',
   'member.memberVisitManage.visitor.required': '请选择用户',
   'member.memberVisitManage.visitor.placeholder2': '选择用户',
-}
+
+  // 导入会员弹窗
+  'member.memberImport.components.MemberRolesModal.title': '选择角色导入',
+  'member.memberImport.components.MemberRolesModal.next.step': '下一步',
+}
\ No newline at end of file

src/locales/zh-CN/supplier.ts

@@ -243,4 +243,8 @@ export default {
   'supplier.supplierFlowRule.defaultColumns.supplierTypeName': '供应商类型',
   'supplier.management.supplierPrVerifyComingData.query.get-tip':
     '确定要领取选中的供应商吗?',
+
+  // 导入会员弹窗
+  'supplier.memberImport.component.MemberRolesModal.title': '选择角色导入',
+  'supplier.memberImport.component.MemberRolesModal.next.step': '下一步'
 };

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

@@ -427,51 +427,6 @@ const MemberDocCategoryPro: React.ForwardRefRenderFunction<MemberDocCategoryProR
         );
       });
     });
-
-    // 结算方式改变，联动显示对应的 FormItem
-    onFieldValueChange$('categories.*.payType').subscribe((fieldState) => {
-      formActions.setFieldState(
-        FormPath.transform(fieldState.name, /\d/, $1 => `categories.${$1}.*(PAYMENT_DAYS_MONTH_WRAP,PAYMENT_DAYS_DAY_WRAP,MONTHLY_TATEMENT_WRAP)`),
-        state => {
-          FormPath.setIn(state, 'visible', false);
-        }
-      );
-
-      switch (fieldState.value) {
-        case PAY_TYPE_CASH: {
-          break;
-        }
-        case PAY_TYPE_PAYMENT_DAYS_DAY: {
-          formActions.setFieldState(
-            FormPath.transform(fieldState.name, /\d/, $1 => `categories.${$1}.PAYMENT_DAYS_MONTH_WRAP`),
-            state => {
-              FormPath.setIn(state, 'visible', true);
-            }
-          );
-          break;
-        }
-        case PAY_TYPE_PAYMENT_DAYS_MONTH: {
-          formActions.setFieldState(
-            FormPath.transform(fieldState.name, /\d/, $1 => `categories.${$1}.PAYMENT_DAYS_DAY_WRAP`),
-            state => {
-              FormPath.setIn(state, 'visible', true);
-            }
-          );
-          break;
-        }
-        case PAY_TYPE_MONTHLY_STATEMENT: {
-          formActions.setFieldState(
-            FormPath.transform(fieldState.name, /\d/, $1 => `categories.${$1}.MONTHLY_TATEMENT_WRAP`),
-            state => {
-              FormPath.setIn(state, 'visible', true);
-            }
-          );
-          break;
-        }
-        default:
-          break;
-      }
-    });
   };
 
   const renderAddition = () => {
@@ -604,45 +559,45 @@ const MemberDocCategoryPro: React.ForwardRefRenderFunction<MemberDocCategoryProR
               ITEMS_API_MAP[isVerify]().then(res => {
                 if (res.code === 1000 && res.data) {
                   const {
-                    payTypes = [],
-                    invoiceTypes = [],
-                    advanceCharges = [],
-                    paymentTypes = [],
-                    settlementDocuments = [],
-                    currencyTypes = [],
+                    payTypes,
+                    invoiceTypes,
+                    advanceCharges,
+                    paymentTypes,
+                    settlementDocuments,
+                    currencyTypes,
                   } = res.data;
                   formActions.setFieldState('categories.*.payType', state => {
-                    FormPath.setIn(state, 'props.enum', payTypes.map((item) => ({
+                    FormPath.setIn(state, 'props.enum', payTypes?.map((item) => ({
                       label: item.payTypeName,
                       value: item.payType,
                     })));
                   });
                   formActions.setFieldState('categories.*.invoiceType', state => {
-                    FormPath.setIn(state, 'props.enum', invoiceTypes.map((item) => ({
+                    FormPath.setIn(state, 'props.enum', invoiceTypes?.map((item) => ({
                       label: item.invoiceTypeName,
                       value: item.invoiceType,
                     })));
                   });
                   formActions.setFieldState('categories.*.advanceCharge', state => {
-                    FormPath.setIn(state, 'props.enum', advanceCharges.map((item) => ({
+                    FormPath.setIn(state, 'props.enum', advanceCharges?.map((item) => ({
                       label: item.advanceChargeTypeName,
                       value: item.advanceChargeType,
                     })));
                   });
                   formActions.setFieldState('categories.*.paymentType', state => {
-                    FormPath.setIn(state, 'props.enum', paymentTypes.map((item) => ({
+                    FormPath.setIn(state, 'props.enum', paymentTypes?.map((item) => ({
                       label: item.paymentTypeName,
                       value: item.paymentType,
                     })));
                   });
                   formActions.setFieldState('categories.*.settlementDocuments', state => {
-                    FormPath.setIn(state, 'props.enum', settlementDocuments.map((item) => ({
+                    FormPath.setIn(state, 'props.enum', settlementDocuments?.map((item) => ({
                       label: item.settlementDocumentsTypeName,
                       value: item.settlementDocumentsType,
                     })));
                   });
                   formActions.setFieldState('currencyType', state => {
-                    FormPath.setIn(state, 'props.enum', currencyTypes.map((item) => ({
+                    FormPath.setIn(state, 'props.enum', currencyTypes?.map((item) => ({
                       label: item.currencyTypeName,
                       value: item.currencyType,
                     })));

src/pages/member/memberImport/components/MemberRolesModal/index.less

+@import '~antd/es/style/themes/default.less';
+
+@member-roles-prefix: member-roles;
+
+.@{member-roles-prefix} {
+  display: block !important;
+  padding: 0 @padding-xs;
+  height: 224px;
+  overflow-y: auto;
+
+  &-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: @padding-sm - 2 @padding-md;
+    background-color: @background-color-base;
+    border-radius: 4px;
+    cursor: pointer;
+    box-sizing: border-box;
+    border: 1px solid transparent;
+    transition: all .3s;
+
+    &:not(:last-child) {
+      margin-bottom: @margin-md;
+    }
+
+    &:hover {
+      background-color: @white;
+      border-color: @primary-color;
+
+      .@{member-roles-prefix}-item-actions {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+
+    &-left {
+      display: flex;
+      align-items: center;
+    }
+
+    &-right {
+      flex-shrink: 0;
+    }
+  }
+}
\ No newline at end of file

src/pages/member/memberImport/components/MemberRolesModal/index.tsx

+/**
+ * @Description 导入会员弹窗
+ */
+import React, { useEffect, useMemo, useState } from 'react';
+import { useIntl } from 'umi';
+import { Modal, Spin, Radio, RadioChangeEvent } from 'antd';
+import { getMemberAbilitySubExcelRole } from '@/services/MemberV2Api';
+import themeConfig from '@/../config/lingxi.theme.config';
+import styles from './index.less';
+
+export type AddressValueType = {
+  /**
+   * 角色Id
+   */
+  roleId: number,
+  /**
+   * 角色Id
+   */
+  roleName: string,
+}
+
+interface MemberRolesModalProps {
+  /**
+   * 是否可见
+   */
+  visible: boolean,
+  /**
+   * 关闭触发函数
+   */
+  onClose: () => void,
+  /**
+   * 点击确认触发事件
+   */
+  onConfirm: (roleId: number) => void,
+}
+
+const MemberRolesModal: React.FC<MemberRolesModalProps> = (props) => {
+  const { visible, onClose, onConfirm } = props;
+  
+  const [list, setList] = useState<AddressValueType[]>([]);
+  const [listLoading, setListLoading] = useState(false);
+  const [internalValue, setInternalValue] = useState<number>(0);
+  
+  const intl = useIntl();
+
+  const fetchRolesList = () => {
+    setListLoading(true);
+    getMemberAbilitySubExcelRole().then((res) => {
+      if (res.code === 1000) {
+        setList(res.data);
+      }
+    }).finally(() => {
+      setListLoading(false);
+    });
+  };
+
+  useEffect(() => {
+    if (visible) {
+      fetchRolesList();
+    }
+  }, [visible]);
+
+  const handleClose = () => {
+    onClose?.();
+  };
+
+  const handleSelectItem = (id: number) => {
+    setInternalValue(id);
+  };
+
+  const handleRadioChange = (e: RadioChangeEvent) => {
+    setInternalValue(e.target.value);
+  };
+
+  const handleRadioClick = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    e.stopPropagation();
+  };
+
+  const handleConfirm = () => {
+    onConfirm?.(internalValue);
+  };
+
+  const options = useMemo(() => {
+    return list.map((item) => ({
+      value: item.roleId,
+      label: item.roleName,
+    }));
+  }, [list]);
+
+  return (
+    <Modal
+      title={intl.formatMessage({ id: 'member.memberImport.components.MemberRolesModal.title' }, { default: '选择导入角色' })}
+      cancelText={intl.formatMessage({ id: 'common.button.cancel' }, { default: '取消' })}
+      okText={intl.formatMessage({ id: 'member.memberImport.components.MemberRolesModal.next.step' }, { default: '下一步' })}
+      visible={visible}
+      onCancel={handleClose}
+      onOk={handleConfirm}
+      width={400}
+      bodyStyle={{
+        padding: themeConfig['@padding-xs'],
+      }}
+      maskClosable={false}
+    >
+      <Spin spinning={listLoading}>
+        <Radio.Group value={internalValue} className={styles['member-roles']}>
+          {options.map((item) => (
+            <div
+              key={item.value}
+              className={styles['member-roles-item']}
+              onClick={() => handleSelectItem(item.value)}
+            >
+              <div className={styles['member-roles-item-left']}>
+                <Radio
+                  value={item.value}
+                  onClick={handleRadioClick}
+                  onChange={handleRadioChange}
+                >
+                  {item.label}
+                </Radio>
+              </div>
+            </div>
+          ))}
+        </Radio.Group>
+      </Spin>
+    </Modal>
+  );
+};
+
+export default MemberRolesModal;

src/pages/member/memberImport/index.tsx

@@ -18,6 +18,7 @@ import { ColumnType } from 'antd/lib/table/interface';
 import { createFormActions } from '@formily/antd';
 import {
   getMemberAbilityMaintenancePlatformPage,
+  getMemberAbilitySubExcelExportTemplate,
   getMemberAbilitySubPage,
   getMemberAbilitySubPageitems,
   postMemberAbilitySubCommit,
@@ -29,14 +30,15 @@ import { FORM_FILTER_PATH } from '@/formSchema/const';
 import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
 import { getAuth } from '@/utils/auth';
 import EyePreview from '@/components/EyePreview';
-import UploadModal from '@/components/UploadModal';
 import NiceForm from '@/components/NiceForm';
 import StatusTag from '@/components/StatusTag';
 import { AuthUrl } from '@/components/AuthButton/AuthUrl';
 import AuthButton from '@/components/AuthButton';
+import UploadModal, { DownloadFileResponseType, UploadModalRef } from '@/components/UploadModal';
 import { importSchema } from './schema';
 import { MEMBER_OUTER_STATUS_TYPE } from '../constant';
 import MemberIntroduceDrewer, { MemberIntroduceDrawerSubmitValue, MemberIntroduceDrawerProps } from './components/MemberIntroduceDrewer';
+import MemberRolesModal from './components/MemberRolesModal';
 import styles from './index.less';
 
 const formActions = createFormActions();
@@ -61,8 +63,12 @@ const fetchListData = async (params: any) => {
 
 const MemberMaintain: React.FC<[]> = () => {
   const ref = useRef<any>({});
-  const [visibleModal, setVisibleModal] = useState(false);
   const [visibleIntroduceDrewer, setVisibleIntroduceDrewer] = useState(false);
+  const [visibleUploadModal, setVisibleUploadModal] = useState(false);
+  const [visibleUploadMemberModal, setVisibleUploadMemberModal] = useState(false);
+
+  const uploadModalRef = useRef<UploadModalRef | null>(null);
+  const uploadRoleId = useRef(0);
 
   const userInfo = getAuth();
   const intl = useIntl();
@@ -284,10 +290,34 @@ const MemberMaintain: React.FC<[]> = () => {
     });
   };
 
+  const handleVisibleUploadModal = (flag?: boolean) => {
+    setVisibleUploadModal(!!flag);
+  };
+  
+  const handleVisibleMemberRolesModal = (flag?: boolean) => {
+    setVisibleUploadMemberModal(!!flag);
+  };
+
+  const handleMemberRolesConfirm = (roleId: number) => {
+    uploadRoleId.current = roleId;
+    handleVisibleMemberRolesModal(false);
+    handleVisibleUploadModal(true);
+  };
+
+  const fetchDownloadFile = async () => {
+    const ret = await getMemberAbilitySubExcelExportTemplate({
+      roleId: `${uploadRoleId.current}`,
+    }, {
+      responseType: 'blob',
+      getResponse: true,
+    });
+    return ret as unknown as DownloadFileResponseType;
+  };
+
   const ControllerBtns = () => (
     <>
       {/* {(userInfo && userInfo.memberRoleType === MEMBER_ROLE_TYPE_SERVICE_PROVIDER) && (
-        <Space>
+        <Space size="middle">
           <Button
             type="primary"
             onClick={() =>
@@ -307,19 +337,21 @@ const MemberMaintain: React.FC<[]> = () => {
           </Dropdown.Button>
         </Space>
       )} */}
-      <Space>
+      <Space size="middle">
         <AuthButton btnCode='memberImport.add' >
           <Button
             type="primary"
+            icon={(<PlusOutlined />)}
             onClick={() =>
               history.push(`/memberCenter/memberAbility/manage/import/add`)
             }
           >
-            <PlusOutlined />
             {intl.formatMessage({ id: 'member.xinjian' })}
           </Button>
         </AuthButton>
-        {/* <Button onClick={() => setVisibleModal(true)}>导入</Button> */}
+        <AuthButton btnCode="memberImport.import">
+          <Button onClick={() => handleVisibleMemberRolesModal(true)}>导入</Button>
+        </AuthButton>
         {/* <Dropdown.Button
           overlay={menu}
           trigger={['click']}
@@ -327,9 +359,8 @@ const MemberMaintain: React.FC<[]> = () => {
         >
           更多
         </Dropdown.Button> */}
-        <AuthButton btnCode="memberImport.introduce" >
+        <AuthButton btnCode="memberImport.introduce">
           <Button
-            type="primary"
             onClick={() => handleVisibleIntroduceDrewer(true)}
           >
             会员引入
@@ -371,18 +402,32 @@ const MemberMaintain: React.FC<[]> = () => {
           />
         }
       />
-
-      <UploadModal
-        visibleModal={visibleModal}
-        fileText={intl.formatMessage({ id: 'member.huiyuanziliao' })}
-        onCancel={() => setVisibleModal(false)}
-      />
       <MemberIntroduceDrewer
         visible={visibleIntroduceDrewer}
         fetchDataSource={fetchIntroduceMemberList}
         onClose={() => handleVisibleIntroduceDrewer(false)}
         onSubmit={handleIntroduceMember}
       />
+      {/* 会员导入 - 选择会员 */}
+      <MemberRolesModal
+        visible={visibleUploadMemberModal}
+        onClose={() => handleVisibleMemberRolesModal(false)}
+        onConfirm={handleMemberRolesConfirm}
+      />
+      {/* 会员导入 */}
+      <UploadModal
+        visible={visibleUploadModal}
+        onClose={() => handleVisibleUploadModal(false)}
+        fileTitle="会员资料"
+        ref={uploadModalRef}
+        fetchDownloadFile={fetchDownloadFile}
+        uploadProps={{
+          action: '/api/member/ability/sub/excel/importMembers',
+          data: {
+            subRoleId: `${uploadRoleId.current}`,
+          },
+        }}
+      />
     </Card>
   );
 };

src/pages/member/memberMaintain/index.tsx

@@ -15,7 +15,7 @@ import { FORM_FILTER_PATH } from '@/formSchema/const';
 import EyePreview from '@/components/EyePreview';
 import NiceForm from '@/components/NiceForm';
 import StatusTag from '@/components/StatusTag';
-import { getMemberAbilityMaintenancePage, getMemberAbilityMaintenancePageitems, GetMemberAbilityMaintenancePageResponseDetail } from '@/services/MemberV2Api';
+import { postMemberAbilityMaintenancePage, getMemberAbilityMaintenancePageitems, PostMemberAbilityMaintenancePageResponseDetail } from '@/services/MemberV2Api';
 import useSpliceArray from '@/hooks/useSpliceArray';
 import { querySchema } from './schema';
 import {
@@ -38,7 +38,7 @@ const fetchData = async (params: any) => {
   if (endDate) {
     payload.endDate = moment(+endDate).format('YYYY-MM-DD');
   }
-  const res = await getMemberAbilityMaintenancePage(payload);
+  const res = await postMemberAbilityMaintenancePage(payload, { ctlType: 'none' });
 
   if (res.code === 1000) {
     return res.data;
@@ -50,7 +50,7 @@ const MemberMaintain: React.FC<[]> = () => {
   const ref = useRef<any>({});
   const intl = useIntl();
 
-  const defaultColumns: ColumnType<GetMemberAbilityMaintenancePageResponseDetail>[] = [
+  const defaultColumns: ColumnType<PostMemberAbilityMaintenancePageResponseDetail>[] = [
     {
       title: `${intl.formatMessage({ id: 'member.management.maintain.query.memberId' })}/${intl.formatMessage({ id: 'member.management.maintain.query.memberName' })}`,
       dataIndex: 'memberId',

src/pages/member/memberPrComingClassify/verify.tsx

@@ -12,9 +12,10 @@ import {
 } from '@ant-design/icons';
 import { history, useIntl } from 'umi';
 import { usePageStatus } from '@/hooks/usePageStatus';
+import { useHttpRequest } from '@/hooks/useHttpRequest';
 import { postMemberDepositClassify, getMemberDepositClassifyDetail } from '@/services/MemberV2Api';
-import fetchDetailHoc from '../common/hoc/fetchDetailHoc';
-import MemberProfile from '../components/MemberProfile';
+import { IRequestSuccess } from '@/index';
+import MemberProfile, { DetailType } from '../components/MemberProfile';
 import { MemberDocCategoryProRef, MemberDocCategoryProProps, SubmitValueType } from '../components/MemberDocCategoryPro';
 import VerifyModal, { ValueType as VerifyData } from '../components/VerifyModal';
 
@@ -28,6 +29,17 @@ const MemberPrComingClassifyVerify: React.FC<{}> = () => {
 
   const intl = useIntl();
 
+  const fetchDetail = (): Promise<IRequestSuccess<DetailType>> => (
+    getMemberDepositClassifyDetail({
+      validateId,
+    })
+  );
+
+  const {
+    data: dataSource,
+    loading,
+  } = useHttpRequest<DetailType>(fetchDetail, { manual: false });
+
   const handleVisibleVerifyModal = (flag?) => {
     setVisibleVerifyModal(!!flag);
   };
@@ -58,12 +70,6 @@ const MemberPrComingClassifyVerify: React.FC<{}> = () => {
     });
   };
 
-  const MemberProfilePro = fetchDetailHoc({
-    fetchDetail: () => getMemberDepositClassifyDetail({
-      validateId,
-    }),
-  }, MemberProfile);
-
   const handleVerify = () => {
     categoryFormRef?.current.submit();
   };
@@ -74,7 +80,9 @@ const MemberPrComingClassifyVerify: React.FC<{}> = () => {
   };
 
   return (
-    <MemberProfilePro
+    <MemberProfile
+      dataSource={dataSource}
+      loading={loading}
       extra={() => (
         <>
           <Button

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

@@ -421,51 +421,6 @@ const MemberDocCategoryPro: React.ForwardRefRenderFunction<MemberDocCategoryProR
         );
       });
     });
-
-    // 结算方式改变，联动显示对应的 FormItem
-    onFieldValueChange$('categories.*.payType').subscribe((fieldState) => {
-      formActions.setFieldState(
-        FormPath.transform(fieldState.name, /\d/, $1 => `categories.${$1}.*(PAYMENT_DAYS_MONTH_WRAP,PAYMENT_DAYS_DAY_WRAP,MONTHLY_TATEMENT_WRAP)`),
-        state => {
-          FormPath.setIn(state, 'visible', false);
-        }
-      );
-
-      switch (fieldState.value) {
-        case PAY_TYPE_CASH: {
-          break;
-        }
-        case PAY_TYPE_PAYMENT_DAYS_DAY: {
-          formActions.setFieldState(
-            FormPath.transform(fieldState.name, /\d/, $1 => `categories.${$1}.PAYMENT_DAYS_MONTH_WRAP`),
-            state => {
-              FormPath.setIn(state, 'visible', true);
-            }
-          );
-          break;
-        }
-        case PAY_TYPE_PAYMENT_DAYS_MONTH: {
-          formActions.setFieldState(
-            FormPath.transform(fieldState.name, /\d/, $1 => `categories.${$1}.PAYMENT_DAYS_DAY_WRAP`),
-            state => {
-              FormPath.setIn(state, 'visible', true);
-            }
-          );
-          break;
-        }
-        case PAY_TYPE_MONTHLY_STATEMENT: {
-          formActions.setFieldState(
-            FormPath.transform(fieldState.name, /\d/, $1 => `categories.${$1}.MONTHLY_TATEMENT_WRAP`),
-            state => {
-              FormPath.setIn(state, 'visible', true);
-            }
-          );
-          break;
-        }
-        default:
-          break;
-      }
-    });
   };
 
   const renderAddition = () => {
@@ -598,45 +553,45 @@ const MemberDocCategoryPro: React.ForwardRefRenderFunction<MemberDocCategoryProR
               ITEMS_API_MAP[isVerify]().then(res => {
                 if (res.code === 1000 && res.data) {
                   const {
-                    payTypes = [],
-                    invoiceTypes = [],
-                    advanceCharges = [],
-                    paymentTypes = [],
-                    settlementDocuments = [],
-                    currencyTypes = [],
+                    payTypes,
+                    invoiceTypes,
+                    advanceCharges,
+                    paymentTypes,
+                    settlementDocuments,
+                    currencyTypes,
                   } = res.data;
                   formActions.setFieldState('categories.*.payType', state => {
-                    FormPath.setIn(state, 'props.enum', payTypes.map((item) => ({
+                    FormPath.setIn(state, 'props.enum', payTypes?.map((item) => ({
                       label: item.payTypeName,
                       value: item.payType,
                     })));
                   });
                   formActions.setFieldState('categories.*.invoiceType', state => {
-                    FormPath.setIn(state, 'props.enum', invoiceTypes.map((item) => ({
+                    FormPath.setIn(state, 'props.enum', invoiceTypes?.map((item) => ({
                       label: item.invoiceTypeName,
                       value: item.invoiceType,
                     })));
                   });
                   formActions.setFieldState('categories.*.advanceCharge', state => {
-                    FormPath.setIn(state, 'props.enum', advanceCharges.map((item) => ({
+                    FormPath.setIn(state, 'props.enum', advanceCharges?.map((item) => ({
                       label: item.advanceChargeTypeName,
                       value: item.advanceChargeType,
                     })));
                   });
                   formActions.setFieldState('categories.*.paymentType', state => {
-                    FormPath.setIn(state, 'props.enum', paymentTypes.map((item) => ({
+                    FormPath.setIn(state, 'props.enum', paymentTypes?.map((item) => ({
                       label: item.paymentTypeName,
                       value: item.paymentType,
                     })));
                   });
                   formActions.setFieldState('categories.*.settlementDocuments', state => {
-                    FormPath.setIn(state, 'props.enum', settlementDocuments.map((item) => ({
+                    FormPath.setIn(state, 'props.enum', settlementDocuments?.map((item) => ({
                       label: item.settlementDocumentsTypeName,
                       value: item.settlementDocumentsType,
                     })));
                   });
                   formActions.setFieldState('currencyType', state => {
-                    FormPath.setIn(state, 'props.enum', currencyTypes.map((item) => ({
+                    FormPath.setIn(state, 'props.enum', currencyTypes?.map((item) => ({
                       label: item.currencyTypeName,
                       value: item.currencyType,
                     })));

src/pages/supplier/memberImport/components/MemberRolesModal/index.less

+@import '~antd/es/style/themes/default.less';
+
+@member-roles-prefix: member-roles;
+
+.@{member-roles-prefix} {
+  display: block !important;
+  padding: 0 @padding-xs;
+  height: 224px;
+  overflow-y: auto;
+
+  &-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: @padding-sm - 2 @padding-md;
+    background-color: @background-color-base;
+    border-radius: 4px;
+    cursor: pointer;
+    box-sizing: border-box;
+    border: 1px solid transparent;
+    transition: all .3s;
+
+    &:not(:last-child) {
+      margin-bottom: @margin-md;
+    }
+
+    &:hover {
+      background-color: @white;
+      border-color: @primary-color;
+
+      .@{member-roles-prefix}-item-actions {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+
+    &-left {
+      display: flex;
+      align-items: center;
+    }
+
+    &-right {
+      flex-shrink: 0;
+    }
+  }
+}
\ No newline at end of file

src/pages/supplier/memberImport/components/MemberRolesModal/index.tsx

+/**
+ * @Description 导入会员弹窗
+ */
+import React, { useEffect, useMemo, useState } from 'react';
+import { useIntl } from 'umi';
+import { Modal, Spin, Radio, RadioChangeEvent } from 'antd';
+import { getMemberAbilitySubExcelRole } from '@/services/MemberV2Api';
+import themeConfig from '@/../config/lingxi.theme.config';
+import styles from './index.less';
+
+export type AddressValueType = {
+  /**
+   * 角色Id
+   */
+  roleId: number,
+  /**
+   * 角色Id
+   */
+  roleName: string,
+}
+
+interface MemberRolesModalProps {
+  /**
+   * 是否可见
+   */
+  visible: boolean,
+  /**
+   * 关闭触发函数
+   */
+  onClose: () => void,
+  /**
+   * 点击确认触发事件
+   */
+  onConfirm: (roleId: number) => void,
+}
+
+const MemberRolesModal: React.FC<MemberRolesModalProps> = (props) => {
+  const { visible, onClose, onConfirm } = props;
+  
+  const [list, setList] = useState<AddressValueType[]>([]);
+  const [listLoading, setListLoading] = useState(false);
+  const [internalValue, setInternalValue] = useState<number>(0);
+  
+  const intl = useIntl();
+  
+  const fetchRolesList = () => {
+    setListLoading(true);
+    getMemberAbilitySubExcelRole().then((res) => {
+      if (res.code === 1000) {
+        setList(res.data);
+      }
+    }).finally(() => {
+      setListLoading(false);
+    });
+  };
+
+  useEffect(() => {
+    if (visible) {
+      fetchRolesList();
+    }
+  }, [visible]);
+
+  const handleClose = () => {
+    onClose?.();
+  };
+
+  const handleSelectItem = (id: number) => {
+    setInternalValue(id);
+  };
+
+  const handleRadioChange = (e: RadioChangeEvent) => {
+    setInternalValue(e.target.value);
+  };
+
+  const handleRadioClick = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    e.stopPropagation();
+  };
+
+  const handleConfirm = () => {
+    onConfirm?.(internalValue);
+  };
+
+  const options = useMemo(() => {
+    return list.map((item) => ({
+      value: item.roleId,
+      label: item.roleName,
+    }));
+  }, [list]);
+
+  return (
+    <Modal
+      title={intl.formatMessage({ id: 'supplier.memberImport.component.MemberRolesModal.title' }, { default: '选择导入角色' })}
+      cancelText={intl.formatMessage({ id: 'common.button.cancel' }, { default: '取消' })}
+      okText={intl.formatMessage({ id: 'supplier.memberImport.component.MemberRolesModal.next.step' }, { default: '下一步' })}
+      visible={visible}
+      onCancel={handleClose}
+      onOk={handleConfirm}
+      width={400}
+      bodyStyle={{
+        padding: themeConfig['@padding-xs'],
+      }}
+      maskClosable={false}
+    >
+      <Spin spinning={listLoading}>
+        <Radio.Group value={internalValue} className={styles['member-roles']}>
+          {options.map((item) => (
+            <div
+              key={item.value}
+              className={styles['member-roles-item']}
+              onClick={() => handleSelectItem(item.value)}
+            >
+              <div className={styles['member-roles-item-left']}>
+                <Radio
+                  value={item.value}
+                  onClick={handleRadioClick}
+                  onChange={handleRadioChange}
+                >
+                  {item.label}
+                </Radio>
+              </div>
+            </div>
+          ))}
+        </Radio.Group>
+      </Spin>
+    </Modal>
+  );
+};
+
+export default MemberRolesModal;

src/pages/supplier/memberImport/index.tsx

@@ -18,6 +18,7 @@ import { ColumnType } from 'antd/lib/table/interface';
 import { createFormActions } from '@formily/antd';
 import {
   getMemberAbilityMaintenancePlatformPage,
+  getMemberAbilitySubExcelExportTemplate,
   getMemberAbilitySubPage,
   getMemberAbilitySubPageitems,
   postMemberAbilitySubCommit,
@@ -29,14 +30,15 @@ import { FORM_FILTER_PATH } from '@/formSchema/const';
 import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
 import { getAuth } from '@/utils/auth';
 import EyePreview from '@/components/EyePreview';
-import UploadModal from '@/components/UploadModal';
 import NiceForm from '@/components/NiceForm';
 import StatusTag from '@/components/StatusTag';
 import { AuthUrl } from '@/components/AuthButton/AuthUrl';
 import AuthButton from '@/components/AuthButton';
+import UploadModal, { DownloadFileResponseType, UploadModalRef } from '@/components/UploadModal';
 import { importSchema } from './schema';
 import { MEMBER_OUTER_STATUS_TYPE } from '../constant';
 import MemberIntroduceDrewer, { MemberIntroduceDrawerSubmitValue, MemberIntroduceDrawerProps } from './components/MemberIntroduceDrewer';
+import MemberRolesModal from './components/MemberRolesModal';
 import styles from './index.less';
 
 const formActions = createFormActions();
@@ -61,8 +63,12 @@ const fetchListData = async (params: any) => {
 
 const MemberMaintain: React.FC<[]> = () => {
   const ref = useRef<any>({});
-  const [visibleModal, setVisibleModal] = useState(false);
   const [visibleIntroduceDrewer, setVisibleIntroduceDrewer] = useState(false);
+  const [visibleUploadModal, setVisibleUploadModal] = useState(false);
+  const [visibleUploadMemberModal, setVisibleUploadMemberModal] = useState(false);
+
+  const uploadModalRef = useRef<UploadModalRef | null>(null);
+  const uploadRoleId = useRef(0);
 
   const userInfo = getAuth();
   const intl = useIntl();
@@ -284,10 +290,34 @@ const MemberMaintain: React.FC<[]> = () => {
     });
   };
 
+  const handleVisibleUploadModal = (flag?: boolean) => {
+    setVisibleUploadModal(!!flag);
+  };
+  
+  const handleVisibleMemberRolesModal = (flag?: boolean) => {
+    setVisibleUploadMemberModal(!!flag);
+  };
+
+  const handleMemberRolesConfirm = (roleId: number) => {
+    uploadRoleId.current = roleId;
+    handleVisibleMemberRolesModal(false);
+    handleVisibleUploadModal(true);
+  };
+
+  const fetchDownloadFile = async () => {
+    const ret = await getMemberAbilitySubExcelExportTemplate({
+      roleId: `${uploadRoleId.current}`,
+    }, {
+      responseType: 'blob',
+      getResponse: true,
+    });
+    return ret as unknown as DownloadFileResponseType;
+  };
+
   const ControllerBtns = () => (
     <>
       {/* {(userInfo && userInfo.memberRoleType === MEMBER_ROLE_TYPE_SERVICE_PROVIDER) && (
-        <Space>
+        <Space size="middle">
           <Button
             type="primary"
             onClick={() =>
@@ -307,19 +337,19 @@ const MemberMaintain: React.FC<[]> = () => {
           </Dropdown.Button>
         </Space>
       )} */}
-      <Space>
+      <Space size="middle">
         <AuthButton btnCode='memberImport.add' >
           <Button
             type="primary"
+            icon={(<PlusOutlined />)}
             onClick={() =>
               history.push(`/memberCenter/supplierAbility/manage/import/add`)
             }
           >
-            <PlusOutlined />
             {intl.formatMessage({ id: 'member.xinjian' })}
           </Button>
         </AuthButton>
-        {/* <Button onClick={() => setVisibleModal(true)}>导入</Button> */}
+        <Button onClick={() => handleVisibleMemberRolesModal(true)}>导入</Button>
         {/* <Dropdown.Button
           overlay={menu}
           trigger={['click']}
@@ -327,15 +357,8 @@ const MemberMaintain: React.FC<[]> = () => {
         >
           更多
         </Dropdown.Button> */}
-        {/* <Button
-          type="primary"
-          onClick={() => handleVisibleIntroduceDrewer(true)}
-        >
-          供应商引入
-        </Button> */}
         <AuthButton btnCode="memberImport.introduce">
           <Button
-            type="primary"
             onClick={() => handleVisibleIntroduceDrewer(true)}
           >
             供应商引入
@@ -377,18 +400,32 @@ const MemberMaintain: React.FC<[]> = () => {
           />
         }
       />
-
-      <UploadModal
-        visibleModal={visibleModal}
-        fileText={intl.formatMessage({ id: 'supplier.huiyuanziliao' })}
-        onCancel={() => setVisibleModal(false)}
-      />
       <MemberIntroduceDrewer
         visible={visibleIntroduceDrewer}
         fetchDataSource={fetchIntroduceMemberList}
         onClose={() => handleVisibleIntroduceDrewer(false)}
         onSubmit={handleIntroduceMember}
       />
+      {/* 会员导入 - 选择会员 */}
+      <MemberRolesModal
+        visible={visibleUploadMemberModal}
+        onClose={() => handleVisibleMemberRolesModal(false)}
+        onConfirm={handleMemberRolesConfirm}
+      />
+      {/* 会员导入 */}
+      <UploadModal
+        visible={visibleUploadModal}
+        onClose={() => handleVisibleUploadModal(false)}
+        fileTitle="会员资料"
+        ref={uploadModalRef}
+        fetchDownloadFile={fetchDownloadFile}
+        uploadProps={{
+          action: '/api/member/ability/sub/excel/importMembers',
+          data: {
+            subRoleId: `${uploadRoleId.current}`,
+          },
+        }}
+      />
     </Card>
   );
 };

src/pages/supplier/memberMaintain/index.tsx

@@ -15,7 +15,7 @@ import { FORM_FILTER_PATH } from '@/formSchema/const';
 import EyePreview from '@/components/EyePreview';
 import NiceForm from '@/components/NiceForm';
 import StatusTag from '@/components/StatusTag';
-import { getMemberAbilityMaintenancePage, getMemberAbilityMaintenancePageitems, GetMemberAbilityMaintenancePageResponseDetail } from '@/services/MemberV2Api';
+import { postMemberAbilityMaintenancePage, getMemberAbilityMaintenancePageitems, PostMemberAbilityMaintenancePageResponseDetail } from '@/services/MemberV2Api';
 import useSpliceArray from '@/hooks/useSpliceArray';
 import { querySchema } from './schema';
 import {
@@ -38,7 +38,7 @@ const fetchData = async (params: any) => {
   if (endDate) {
     payload.endDate = moment(+endDate).format('YYYY-MM-DD');
   }
-  const res = await getMemberAbilityMaintenancePage(payload);
+  const res = await postMemberAbilityMaintenancePage(payload, { ctlType: 'none' });
 
   if (res.code === 1000) {
     return res.data;
@@ -50,7 +50,7 @@ const MemberMaintain: React.FC<[]> = () => {
   const ref = useRef<any>({});
   const intl = useIntl();
 
-  const defaultColumns: ColumnType<GetMemberAbilityMaintenancePageResponseDetail>[] = [
+  const defaultColumns: ColumnType<PostMemberAbilityMaintenancePageResponseDetail>[] = [
     {
       title: `${intl.formatMessage({ id: 'supplier.management.maintain.query.supplierId' })}/${intl.formatMessage({ id: 'supplier.management.maintain.query.supplierName' })}`,
       dataIndex: 'memberId',

src/pages/supplier/memberPrComingClassify/verify.tsx

@@ -12,9 +12,10 @@ import {
 } from '@ant-design/icons';
 import { history, useIntl } from 'umi';
 import { usePageStatus } from '@/hooks/usePageStatus';
+import { useHttpRequest } from '@/hooks/useHttpRequest';
 import { postMemberDepositClassify, getMemberDepositClassifyDetail } from '@/services/MemberV2Api';
-import fetchDetailHoc from '../common/hoc/fetchDetailHoc';
-import MemberProfile from '../components/MemberProfile';
+import { IRequestSuccess } from '@/index';
+import MemberProfile, { DetailType } from '../components/MemberProfile';
 import { MemberDocCategoryProRef, MemberDocCategoryProProps, SubmitValueType } from '../components/MemberDocCategoryPro';
 import VerifyModal, { ValueType as VerifyData } from '../components/VerifyModal';
 
@@ -29,6 +30,17 @@ const MemberPrComingClassifyVerify: React.FC<{}> = () => {
 
   const intl = useIntl();
 
+  const fetchDetail = (): Promise<IRequestSuccess<DetailType>> => (
+    getMemberDepositClassifyDetail({
+      validateId,
+    })
+  );
+
+  const {
+    data: dataSource,
+    loading,
+  } = useHttpRequest<DetailType>(fetchDetail, { manual: false });
+
   const handleVisibleVerifyModal = (flag?) => {
     setVisibleVerifyModal(!!flag);
   };
@@ -59,12 +71,6 @@ const MemberPrComingClassifyVerify: React.FC<{}> = () => {
     });
   };
 
-  const MemberProfilePro = fetchDetailHoc({
-    fetchDetail: () => getMemberDepositClassifyDetail({
-      validateId,
-    }),
-  }, MemberProfile);
-
   const handleVerify = () => {
     categoryFormRef?.current.submit();
   };
@@ -75,7 +81,9 @@ const MemberPrComingClassifyVerify: React.FC<{}> = () => {
   };
 
   return (
-    <MemberProfilePro
+    <MemberProfile
+      dataSource={dataSource}
+      loading={loading}
       extra={() => (
         <>
           <Button

src/utils/request.ts

@@ -66,7 +66,7 @@ const requestLanguageMaps = {
   'ko-KR': 'ko',
 }
 
-const defaultHeaders = {
+export const defaultHeaders = {
   'Content-Type': 'Application/json',
   'source': '1',
   'environment': '1',