feat: 完成 待确认会员变更 相关UI

src/pages/member/memberPrVerifyChangeConfirm/detail.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-05-26 10:26:33
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-05-26 10:38:08
+ * @Description: 待确认会员变更详情
+ */
+import React, { useState, useEffect } from 'react';
+import {
+  Row,
+  Col,
+  Spin,
+} from 'antd';
+import { usePageStatus } from '@/hooks/usePageStatus';
+import { PublicApi } from '@/services/api';
+import { GetMemberAbilityMaintenanceDetailBasicResponse } from '@/services/MemberApi';
+import { 
+  MEMBER_TYPE_CHANNEL_CORPORATE,
+  MEMBER_TYPE_CHANNEL_INDIVIDUAL,
+} from '@/constants/member';
+import AnchorPage from '@/layouts/AnchorPage';
+import AvatarWrap from '@/components/AvatarWrap';
+import AuditProcess from '@/components/AuditProcess';
+import LevelBrand from '@/components/LevelBrand';
+import FlowRecords from '@/components/FlowRecords';
+import { 
+  MEMBER_OUTER_COLUMNS,
+  MEMBER_INNER_COLUMNS,
+} from '../constant';
+import MemberBasicInfo from '../components/MemberBasicInfo';
+import MemberChannelInfo from '../components/MemberChannelInfo';
+import MemberDocIncomingInfo from '../components/MemberDocIncomingInfo';
+import MemberDocQualification from '../components/MemberDocQualification';
+
+const MemberPrVerifyChangeConfirmDetail: React.FC<{}> = () => {
+  const { id, validateId } = usePageStatus();
+  const [memberInfo, setMemberInfo] = useState<GetMemberAbilityMaintenanceDetailBasicResponse>(null);
+  const [infoLoading, setInfoLoaading] = useState(false);
+
+  const getBasicInfo = () => {
+    if (!id || !validateId) {
+      return;
+    }
+    setInfoLoaading(true);
+    PublicApi.getMemberAbilityMaintenanceDetailBasic({
+      memberId: id, 
+      validateId,
+    }).then(res => {
+      if (res.code === 1000) {
+        setMemberInfo(res.data);
+      }
+    }).finally(() => {
+      setInfoLoaading(false);
+    });
+  };
+
+  useEffect(() => {
+    getBasicInfo();
+  }, []);
+
+  const anchorsArr = [
+    {
+      key: 'verifySteps',
+      name: '流转进度',
+    },
+    {
+      key: 'basicInfo',
+      name: '基本信息',
+    },
+    (
+      memberInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_CORPORATE
+      || memberInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_INDIVIDUAL
+        ? {
+          key: 'channelInfo',
+          name: '渠道信息',
+        }
+        : null
+    ),
+    {
+      key: 'incomingInfo',
+      name: '入库信息',
+    },
+    {
+      key: 'qualificationInfo',
+      name: '资质证明',
+    },
+    {
+      key: 'flowRecords',
+      name: '流转记录',
+    },
+  ].filter(Boolean);
+
+  return (
+    <Spin spinning={infoLoading}>
+      <AnchorPage
+        title={(
+          <AvatarWrap 
+            info={{
+              name: memberInfo?.name, 
+            }} 
+            extra={(
+              <LevelBrand level={2} />
+            )}
+          />
+        )}
+        anchors={anchorsArr}
+      >
+        <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}>
+            <MemberBasicInfo
+              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
+          }
+          
+          {/* 入库信息 */}
+          <Col span={24}>
+            <MemberDocIncomingInfo
+              id="incomingInfo"
+            />
+          </Col>
+
+          {/* 资质证明 */}
+          <Col span={24}>
+            <MemberDocQualification
+              id="qualificationInfo"
+            />
+          </Col>
+
+          {/* 流转记录 */}
+          <Col span={24}>
+            <FlowRecords
+              outerColumns={MEMBER_OUTER_COLUMNS}
+              innerColumns={MEMBER_INNER_COLUMNS}
+              outerRowkey="id"
+              innerRowkey="id"
+              outerDataSource={memberInfo?.outerHistory}
+              id="flowRecords"
+            />
+          </Col>
+        </Row>
+      </AnchorPage>
+    </Spin>
+  );
+};
+
+export default MemberPrVerifyChangeConfirmDetail;

src/pages/member/memberPrVerifyChangeConfirm/index.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-05-26 10:26:20
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-05-26 10:37:57
+ * @Description: 待确认会员变更
+ */
+import React, { useState, useRef } from 'react';
+import { history } from 'umi';
+import { Card, Space, Button, Modal, message } from 'antd';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { StandardTable } from 'god';
+import moment from 'moment';
+import { ColumnType } from 'antd/lib/table/interface';
+import { createFormActions } from '@formily/antd';
+import NiceForm from '@/components/NiceForm';
+import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
+import { FORM_FILTER_PATH } from '@/formSchema/const';
+import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
+import { PublicApi } from '@/services/api';
+import useSpliceArray from '@/hooks/useSpliceArray';
+import verifyComingSchema from '../common/schames/verifyComingSchema';
+import verifyComingColumn from '../common/columns/verifyComingColumn';
+
+const { confirm } = Modal;
+
+const formActions = createFormActions();
+
+const MemberPrVerifyChangeConfrim: React.FC<{}> = props => {
+  const ref = useRef<any>({});
+  const [selectedRowKeys, setSelectedRowKeys] = useState<Array<string>>([]);
+  const [selectedList, setSelectList] = useState<any>([]);
+
+  const handleJumpAudit = record => {
+    history.push(`/memberCenter/memberAbility/manage/memberPrVerifyChangeConfirm/verify?id=${record.memberId}&validateId=${record.validateId}`);
+  };
+
+  const defaultColumns = verifyComingColumn('/memberCenter/memberAbility/manage/memberPrVerifyChangeConfirm/detail').concat([
+    {
+      title: '操作',
+      dataIndex: 'option',
+      align: 'center',
+      render: (_, record) => (
+        <Button 
+          type="link" 
+          onClick={() => handleJumpAudit(record)}
+        >
+          审核
+        </Button>
+      ),
+    },
+  ]);
+
+  const [columns, columnsHandle] = useSpliceArray<ColumnType<any>>(defaultColumns);
+
+  const rowSelection = {
+    onChange: (keys: any, rows: {}[]) => {
+      setSelectedRowKeys(keys);
+      setSelectList(rows);
+    },
+    selectedRowKeys: selectedRowKeys,
+  };
+
+  const fetchListData = async (params: any) => {
+    const { startDate = null, endDate = null } = params;
+    const payload = { ...params };
+  
+    if (startDate) {
+      payload.startDate = moment(+startDate).format('YYYY-MM-DD');
+    }
+    if (endDate) {
+      payload.endDate = moment(+endDate).format('YYYY-MM-DD');
+    }
+
+    const res = await PublicApi.getMemberAbilityMaintenancePage(payload);
+
+    if (res.code === 1000) {
+      return res.data;
+    }
+    return [];
+  };
+
+  const handleBatch = () => {
+    if (!selectedList.length) {
+      message.warning('未选择任何会员');
+      return;
+    }
+    confirm({
+      title: '提示',
+      icon: <QuestionCircleOutlined />,
+      content: '确定要审核通过选中的会员吗？',
+      onOk() {
+        const members = selectedList.map(item => ({ memberId: item.memberId, validateId: item.validateId }));
+        return new Promise<void>((resolve, reject) => {
+          PublicApi.postMemberAbilityValidateCommitBatch(members)
+            .then(res => {
+              if (res.code === 1000) {
+                ref.current.reload();
+                setSelectedRowKeys([]);
+                resolve();
+              }
+              reject();
+            })
+            .catch(() => {
+              reject();
+            });
+        });
+      },
+    });
+  };
+
+  // 初始化高级筛选选项
+  const fetchSearchItems = async () => {
+    const res = await PublicApi.getMemberAbilityValidateCommitPageitems();
+    
+    if (res.code === 1000) {
+      const { data = {} }: any = res;
+      const { 
+        memberTypes = [], 
+        roles = [], 
+        sources = [], 
+      } = data;
+
+      const memberTypeIndex = columns.findIndex((item) => item.dataIndex === 'memberTypeName');
+      const roleIndex = columns.findIndex((item) => item.dataIndex === 'roleName');
+      
+      if (memberTypeIndex) {
+        columnsHandle.replace(memberTypeIndex, {
+          ...columns[memberTypeIndex],
+          filters: memberTypes.map(item => ({ text: item.memberTypeName, value: item.memberTypeId })),
+        });
+      }
+      if (roleIndex) {
+        columnsHandle.replace(roleIndex, {
+          ...columns[roleIndex],
+          filters: roles.map(item => ({ text: item.roleName, value: item.roleId })),
+        });
+      }
+      return {
+        memberTypeId: memberTypes.map(item => ({ label: item.memberTypeName, value: item.memberTypeId })),
+        roleId: roles.map(item => ({ label: item.roleName, value: item.roleId })),
+        source: sources.map(item => ({ label: item.text, value: item.id })),
+      };
+    }
+    return {};
+  };
+
+  const controllerBtns = (
+    <Space>
+      <Button onClick={handleBatch}>
+        批量审核通过
+      </Button>
+    </Space>
+  );
+
+  return (
+    <Card>
+      <StandardTable
+        tableProps={{
+          rowKey: 'validateId', 
+        }}
+        columns={columns}
+        currentRef={ref}
+        fetchTableData={(params: any) => fetchListData(params)}
+        rowSelection={rowSelection}
+        controlRender={
+          <NiceForm
+            actions={formActions}
+            onSubmit={values => ref.current.reload(values)}
+            expressionScope={{
+              controllerBtns,
+            }}
+            effects={($, actions) => {
+              useStateFilterSearchLinkageEffect(
+                $,
+                actions,
+                'name',
+                FORM_FILTER_PATH,
+              );
+              useAsyncInitSelect(
+                ['memberTypeId', 'roleId', 'source'],
+                fetchSearchItems,
+              );
+            }}
+            schema={verifyComingSchema}
+          />
+        }
+      />
+    </Card>
+  );
+};
+
+export default MemberPrVerifyChangeConfrim;

src/pages/member/memberPrVerifyChangeConfirm/verify.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-05-26 10:26:37
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-05-26 10:49:39
+ * @Description: 确认会员变更
+ */
+import React, { useState, useEffect } from 'react';
+import {
+  Row,
+  Col,
+  Spin,
+  Button,
+} from 'antd';
+import {
+  CheckCircleOutlined,
+} from '@ant-design/icons';
+import { usePageStatus } from '@/hooks/usePageStatus';
+import { PublicApi } from '@/services/api';
+import { GetMemberAbilityMaintenanceDetailBasicResponse } from '@/services/MemberApi';
+import { 
+  MEMBER_TYPE_CHANNEL_CORPORATE,
+  MEMBER_TYPE_CHANNEL_INDIVIDUAL,
+} from '@/constants/member';
+import AnchorPage from '@/layouts/AnchorPage';
+import AvatarWrap from '@/components/AvatarWrap';
+import AuditProcess from '@/components/AuditProcess';
+import LevelBrand from '@/components/LevelBrand';
+import FlowRecords from '@/components/FlowRecords';
+import { 
+  MEMBER_OUTER_COLUMNS,
+  MEMBER_INNER_COLUMNS,
+} from '../constant';
+import MemberBasicInfo from '../components/MemberBasicInfo';
+import MemberChannelInfo from '../components/MemberChannelInfo';
+import MemberDocIncomingInfo from '../components/MemberDocIncomingInfo';
+import MemberDocQualification from '../components/MemberDocQualification';
+import VerifyModal from '../components/VerifyModal';
+
+const MemberPrVerifyChangeConfirmVerify: React.FC<{}> = () => {
+  const { id, validateId } = usePageStatus();
+  const [memberInfo, setMemberInfo] = useState<GetMemberAbilityMaintenanceDetailBasicResponse>(null);
+  const [infoLoading, setInfoLoaading] = useState(false);
+  const [visibleVerifyModal, setVisibleVerifyModal] = useState(false);
+
+  const getBasicInfo = () => {
+    if (!id || !validateId) {
+      return;
+    }
+    setInfoLoaading(true);
+    PublicApi.getMemberAbilityMaintenanceDetailBasic({
+      memberId: id, 
+      validateId,
+    }).then(res => {
+      if (res.code === 1000) {
+        setMemberInfo(res.data);
+      }
+    }).finally(() => {
+      setInfoLoaading(false);
+    });
+  };
+
+  useEffect(() => {
+    getBasicInfo();
+  }, []);
+
+  const handleVisibleVerifyModal = (flag?) => {
+    setVisibleVerifyModal(!!flag);
+  };
+
+  const handleSubmit = () => {
+    console.log('表单提交')
+  };
+
+  const anchorsArr = [
+    {
+      key: 'verifySteps',
+      name: '流转进度',
+    },
+    {
+      key: 'basicInfo',
+      name: '基本信息',
+    },
+    (
+      memberInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_CORPORATE
+      || memberInfo?.memberTypeEnum === MEMBER_TYPE_CHANNEL_INDIVIDUAL
+        ? {
+          key: 'channelInfo',
+          name: '渠道信息',
+        }
+        : null
+    ),
+    {
+      key: 'incomingInfo',
+      name: '入库信息',
+    },
+    {
+      key: 'qualificationInfo',
+      name: '资质证明',
+    },
+    {
+      key: 'flowRecords',
+      name: '流转记录',
+    },
+  ].filter(Boolean);
+
+  return (
+    <Spin spinning={infoLoading}>
+      <AnchorPage
+        title={(
+          <AvatarWrap 
+            info={{
+              name: memberInfo?.name, 
+            }} 
+            extra={(
+              <LevelBrand level={2} />
+            )}
+          />
+        )}
+        anchors={anchorsArr}
+        extra={(
+          <Button
+            type="primary"
+            icon={<CheckCircleOutlined />}
+            onClick={() => handleVisibleVerifyModal(true)}
+          >
+            单据审核
+          </Button>
+        )}
+      >
+        <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}>
+            <MemberBasicInfo
+              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
+          }
+
+          {/* 入库信息 */}
+          <Col span={24}>
+            <MemberDocIncomingInfo
+              id="incomingInfo"
+            />
+          </Col>
+
+          {/* 资质证明 */}
+          <Col span={24}>
+            <MemberDocQualification
+              id="qualificationInfo"
+            />
+          </Col>
+
+          {/* 流转记录 */}
+          <Col span={24}>
+            <FlowRecords
+              outerColumns={MEMBER_OUTER_COLUMNS}
+              innerColumns={MEMBER_INNER_COLUMNS}
+              outerRowkey="id"
+              innerRowkey="id"
+              outerDataSource={memberInfo?.outerHistory}
+              id="flowRecords"
+            />
+          </Col>
+        </Row>
+      </AnchorPage>
+
+      <VerifyModal
+        visible={visibleVerifyModal}
+        onClose={() => handleVisibleVerifyModal(false)}
+        onSubmit={handleSubmit}
+      />
+    </Spin>
+  );
+};
+
+export default MemberPrVerifyChangeConfirmVerify;