feat: 完成 待审核入库考察 相关UI

src/pages/member/memberPrComingInvestigate/components/VerifyComingInvestigateDrawer/index.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-05-24 17:47:32
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-05-25 10:14:05
+ * @Description: 审核Form抽屉
+ */
+import React from 'react';
+import {
+  Drawer,
+  Button,
+} from 'antd';
+import { DatePicker } from '@formily/antd-components';
+import NiceForm from '@/components/NiceForm';
+import {
+  createFormActions,
+} from '@formily/antd';
+import {
+  schema,
+} from './schema';
+
+interface IProps {
+  /**
+   * 是否可见
+   */
+  visible: boolean,
+  /**
+   * Form 确认事件
+   */
+  onSubmit: (values: any) => void,
+  /**
+   * 抽屉关闭事件
+   */
+  onClose: () => void,
+}
+
+const formActions = createFormActions();
+
+const VerifyComingInvestigateDrawer: React.FC<IProps> = (props: IProps) => {
+  const {
+    visible,
+    onSubmit,
+    onClose,
+  } = props;
+
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  const handleSubmit = (values: any) => {
+    if (onSubmit) {
+      onSubmit(values);
+    }
+  };
+
+  return (
+    <Drawer
+      title="入库资料审核"
+      width={600}
+      onClose={handleClose}
+      visible={visible}
+      getContainer="#root"
+      footer={
+        <div
+          style={{
+            textAlign: 'right',
+          }}
+        >
+          <Button onClick={handleClose} style={{ marginRight: 16 }}>
+            取消
+          </Button>
+          <Button onClick={() => formActions.submit()} type="primary">
+            确 定
+          </Button>
+        </div>
+      }
+    >
+      <NiceForm
+        previewPlaceholder="' '"
+        components={{
+          DatePicker,
+        }}
+        effects={() => {
+
+        }}
+        actions={formActions}
+        schema={schema}
+        onSubmit={values => handleSubmit(values)}
+      />
+    </Drawer>
+  );
+};
+
+export default VerifyComingInvestigateDrawer;

src/pages/member/memberPrComingInvestigate/components/VerifyComingInvestigateDrawer/schema/index.ts

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-05-24 18:00:52
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-05-25 09:59:12
+ * @Description: 
+ */
+import { ISchema } from '@formily/antd';
+import {
+  UPLOAD_TYPE,
+} from '@/constants';
+
+export const schema: ISchema = {
+  type: 'object',
+  properties: {
+    INVESTIGATE_INFO: {
+      type: 'object',
+      'x-component': 'CardBox',
+      'x-component-props': {
+        title: '考察信息',
+      },
+      properties: {
+        MEGA_LAYOUT: {
+          type: 'object',
+          'x-component': 'Mega-Layout',
+          'x-component-props': {
+            labelCol: 4,
+            wrapperCol: 18,
+            labelAlign: 'left',
+          },
+          properties: {
+            date: {
+              type: 'string',
+              title: '考察日期',
+              'x-component': 'DatePicker',
+              'x-component-props': {
+                placeholder: '请选择',
+                style: {
+                  width: '100%',
+                },
+              },
+              required: true,
+              // 'x-rules': [
+              //   {
+              //     required: true,
+              //     message: '请选择考察日期',
+              //   },
+              // ],
+            },
+            score: {
+              type: 'string',
+              title: '考察评分',
+              'x-component': 'DatePicker',
+              'x-component-props': {
+                placeholder: '请选择',
+                style: {
+                  width: '100%',
+                },
+              },
+              'x-rules': [
+                {
+                  required: true,
+                  message: '请选择考察评分',
+                },
+              ],
+            },
+            result: {
+              type: 'string',
+              title: '考察结果',
+              'x-component': 'Textarea',
+              'x-component-props': {
+                placeholder: '在此输入你的内容，最长120个字符，60个汉字',
+                maxLength: 60,
+                rows: 5,
+              },
+              'x-rules': [
+                {
+                  limitByte: true,  // 自定义校验规则
+                  maxByte: 120,
+                }
+              ],
+            },
+            files: {
+              type: 'string',
+              title: '考察报告',
+              'x-component': 'AntUpload',
+              'x-component-props': {
+                action: '/api/file/file/upload/prefix',
+                data: {
+                  fileType: UPLOAD_TYPE,
+                  prefix: '/afterService/returnApplication/',
+                }, 
+                // beforeUpload: '{{beforeUpload}}',
+                accept: '.xls, .xlsx, .doc, .docx, .wps, .pdf, .jpg, .png, .jpeg',
+              },
+              'x-rules': [
+                {
+                  required: true,
+                  message: '请上传考察报告',
+                },
+              ],
+            },
+          },
+        },
+      },
+    },
+    VERIFY_APPLY: {
+      type: 'object',
+      'x-component': 'CardBox',
+      'x-component-props': {
+        title: '单据审核',
+      },
+      properties: {
+        MEGA_LAYOUT: {
+          type: 'object',
+          'x-component': 'Mega-Layout',
+          'x-component-props': {
+            labelCol: 4,
+            wrapperCol: 18,
+            labelAlign: 'left',
+          },
+          properties: {
+            agree: {
+              type: 'string',
+              title: '是否通过',
+              default: 1,
+              'x-component': 'Radio',
+              required: true, 
+              enum: [
+                { label: '审核通过', value: 1 },
+                { label: '审核不通过', value: 0 },
+              ],
+              'x-component-props': {},
+            },
+            reason: {
+              type: 'string',
+              title: '不通过原因',
+              'x-component': 'Textarea', 
+              required: true, 
+              'x-component-props': {
+                placeholder: '在此输入你的内容，最长120个字符，60个汉字',
+                rows: 5, 
+              },
+              'x-rules': [
+                {
+                  limitByte: true,  // 自定义校验规则
+                  maxByte: 120, 
+                }
+              ],
+            },
+          },
+        },
+      },
+    },
+  },
+};
\ No newline at end of file

src/pages/member/memberPrComingInvestigate/detail.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-05-25 14:02:55
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-05-25 14:11:57
+ * @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 CustomizeColumn from '@/components/CustomizeColumn';
+import { 
+  MEMBER_OUTER_COLUMNS,
+  MEMBER_INNER_COLUMNS,
+} from '../constant';
+import MemberBasicInfo from '../components/MemberBasicInfo';
+import MemberChannelInfo from '../components/MemberChannelInfo';
+import PicWrap from '../components/PicWrap';
+
+const MemberPrComingInvestigate: 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
+    ),
+    ...(
+      memberInfo && memberInfo.groups
+        ? memberInfo.groups.map((item, index) => ({
+          key: `group${index}`,
+          name: item.groupName,
+        }))
+        : []
+    ),
+    {
+      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
+          }
+
+          {/* 其他注册信息 */}
+          {
+            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.fieldCNName,
+                        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}
+              id="flowRecords"
+            />
+          </Col>
+        </Row>
+      </AnchorPage>
+    </Spin>
+  );
+};
+
+export default MemberPrComingInvestigate;

src/pages/member/memberPrComingInvestigate/index.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-05-25 10:12:48
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-05-25 14:23:36
+ * @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 comingSchema from '../common/schames/comingSchema';
+import verifyComingColumn from '../common/columns/verifyComingColumn';
+
+const { confirm } = Modal;
+
+const formActions = createFormActions();
+
+const MemberPrComingInvestigate: 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/memberPrComingInvestigate/verify?id=${record.memberId}&validateId=${record.validateId}`);
+  };
+
+  const defaultColumns = verifyComingColumn('/memberCenter/memberAbility/manage/memberPrComingInvestigate/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 {};
+  };
+
+  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)}
+            effects={($, actions) => {
+              useStateFilterSearchLinkageEffect(
+                $,
+                actions,
+                'name',
+                FORM_FILTER_PATH,
+              );
+              useAsyncInitSelect(
+                ['memberTypeId', 'roleId', 'source'],
+                fetchSearchItems,
+              );
+            }}
+            schema={comingSchema}
+          />
+        }
+      />
+    </Card>
+  );
+};
+
+export default MemberPrComingInvestigate;

src/pages/member/memberPrComingInvestigate/verify.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-05-25 14:03:05
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-05-25 14:03:05
+ * @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 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 CustomizeColumn from '@/components/CustomizeColumn';
+import { 
+  MEMBER_OUTER_COLUMNS,
+  MEMBER_INNER_COLUMNS,
+} from '../constant';
+import MemberBasicInfo from '../components/MemberBasicInfo';
+import PicWrap from '../components/PicWrap';
+import VerifyComingInvestigateDrawer from './components/VerifyComingInvestigateDrawer';
+
+const MemberPrComingInvestigate: React.FC<{}> = () => {
+  const { id, validateId } = usePageStatus();
+  const [memberInfo, setMemberInfo] = useState<GetMemberAbilityMaintenanceDetailBasicResponse>(null);
+  const [infoLoading, setInfoLoaading] = useState(false);
+  const [visibleVerifyDrawer, setVisibleVerifyDrawer] = 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 handleVerify = () => {
+    console.log('审核')
+  };
+
+  const handleVisibleVerifyDrawer = (flag?) => {
+    setVisibleVerifyDrawer(!!flag);
+  };
+
+  const handleSubmit = () => {
+    console.log('表单提交')
+  };
+
+  const anchorsArr = [
+    {
+      key: 'verifySteps',
+      name: '流转进度',
+    },
+    {
+      key: 'basicInfo',
+      name: '基本信息',
+    },
+    ...(
+      memberInfo && memberInfo.groups
+        ? memberInfo.groups.map((item, index) => ({
+          key: `group${index}`,
+          name: item.groupName,
+        }))
+        : []
+    ),
+    {
+      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={() => handleVisibleVerifyDrawer(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 && memberInfo.groups
+              ? memberInfo.groups.map((item, index) => (
+                <Col span={24} key={`group${index}`}>
+                  <CustomizeColumn
+                    title={item.groupName}
+                    data={(
+                      item.elements.map((ele) => ({
+                        title: ele.fieldCNName,
+                        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}
+              id="flowRecords"
+            />
+          </Col>
+        </Row>
+      </AnchorPage>
+      
+      <VerifyComingInvestigateDrawer
+        visible={visibleVerifyDrawer}
+        onClose={() => handleVisibleVerifyDrawer(false)}
+        onSubmit={handleSubmit}
+      />
+    </Spin>
+  );
+};
+
+export default MemberPrComingInvestigate;
\ No newline at end of file