Commit 7708b229 authored by XieZhiXiong's avatar XieZhiXiong

feat: 完成 待审核入库(二级) 相关UI

parent 755d7dd5
/*
* @Author: XieZhiXiong
* @Date: 2021-05-25 18:02:45
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-05-25 18:09:26
* @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 MemberDocIncomingInfo from '../components/MemberDocIncomingInfo';
import MemberInvestigateInfo from '../components/MemberInvestigateInfo';
import MemberDocCategory from '../components/MemberDocCategory';
import PicWrap from '../components/PicWrap';
const MemberPrVerifyComing2Detail: 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: 'incomingInfo',
name: '入库信息',
},
{
key: 'investigateInfo',
name: '考察信息',
},
{
key: 'ClassifyInfo',
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
}
{/* 其他注册信息 */}
{
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}>
<MemberDocIncomingInfo
id="incomingInfo"
/>
</Col>
{/* 考察信息 */}
<Col span={24}>
<MemberInvestigateInfo
id="investigateInfo"
/>
</Col>
{/* 分类信息 */}
<Col span={24}>
<MemberDocCategory
id="ClassifyInfo"
/>
</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 MemberPrVerifyComing2Detail;
/*
* @Author: XieZhiXiong
* @Date: 2021-05-25 18:01:57
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-05-26 10:08: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 verifyComingSchema from '../common/schames/verifyComingSchema';
import verifyComingColumn from '../common/columns/verifyComingColumn';
const { confirm } = Modal;
const formActions = createFormActions();
const MemberPrVerifyComing2: 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/memberPrVerifyComing2/verify?id=${record.memberId}&validateId=${record.validateId}`);
};
const defaultColumns = verifyComingColumn('/memberCenter/memberAbility/manage/memberPrVerifyComing2/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 MemberPrVerifyComing2;
/*
* @Author: XieZhiXiong
* @Date: 2021-05-25 18:02:54
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-05-25 18:11:16
* @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 CustomizeColumn from '@/components/CustomizeColumn';
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 MemberInvestigateInfo from '../components/MemberInvestigateInfo';
import MemberDocCategory from '../components/MemberDocCategory';
import PicWrap from '../components/PicWrap';
import VerifyModal from '../components/VerifyModal';
const MemberPrVerifyComing2Verify: 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
),
...(
memberInfo && memberInfo.groups
? memberInfo.groups.map((item, index) => ({
key: `group${index}`,
name: item.groupName,
}))
: []
),
{
key: 'incomingInfo',
name: '入库信息',
},
{
key: 'investigateInfo',
name: '考察信息',
},
{
key: 'ClassifyInfo',
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
}
{/* 其他注册信息 */}
{
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}>
<MemberDocIncomingInfo
id="incomingInfo"
/>
</Col>
{/* 考察信息 */}
<Col span={24}>
<MemberInvestigateInfo
id="investigateInfo"
/>
</Col>
{/* 分类信息 */}
<Col span={24}>
<MemberDocCategory
id="ClassifyInfo"
/>
</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 MemberPrVerifyComing2Verify;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment