ShowApproval.jsx

import React, { useEffect } from "react";
import { Divider, Row, Col, Card , Image , Avatar} from 'antd'
import { connect } from 'umi';
import classname from 'classnames'

import { IconFont } from '@/utils/utils';
import { dispatchHandle } from '@/utils/publicHandle';
import style from './index.less';

const ShowApproval = (props) => {
    const {
        dispatch,
        businessType,
        universal: {
            approvalDetail,
        },
        user: {
            currentUser
        }
    } = props;
    useEffect((payload = {}) => {
        dispatchHandle(
            dispatch,
            'universal/common_service_m_audit_rule_list_post',
            { businessType },
        )
    }, []);
    console.log(`approvalDetail is:`,approvalDetail);
    return <Card bordered={false} className={style.approval_content}>
        <div style={{ flex: 1 }}>
            {
                approvalDetail.length !== 0 && approvalDetail[0]?.whetherNeedAudit && (<div className={style.process_config}>
                    <div>
                        {/* <div>
                            <p style={{ paddingBottom: 16 }}>发起人</p>
                            <div style={{ display: 'flex', alignItems: 'center' }}>
                                <div className={style.flow_item} key={currentUser?.id}>
                                    <img className={style.flow_img} src={currentUser?.avatarUrl} alt="" />
                                    <span>{currentUser?.name}</span>
                                </div>
                            </div>
                        </div> */}
                        <div style={{ display: 'flex', flexDirection: 'column' }}>
                            <p className={style.flow_title}>审批人</p>
                            <div className={classname('pos_aline')} style={{ marginTop: 20 }}>
                                {(approvalDetail.length !== 0 &&
                                    approvalDetail[0]?.approvedBy &&
                                    approvalDetail[0]?.approvedBy.length !== 0 &&
                                    approvalDetail[0]?.approvedBy.map((item, index) => {
                                        console.log(`user item is:`,item);
                                        return (
                                            <div className={style.flow_item} key={item?.id}>
                                                {/* <p className={style.flow_title}>{item?.title}</p> */}
                                                {/* <Image className={style.flow_img} src={item?.userUrl || ''} placeholder={true} preview={false}/> */}
                                                <Avatar className={style.flow_img} size={40} src={item?.userUrl || '/pageImg/default@2x.png'} />
                                                <span>{item?.userName}</span>
                                                {
                                                    approvalDetail[0]?.approvedBy[approvalDetail[0]?.approvedBy.length - 1] !== approvalDetail[0]?.approvedBy[index] &&
                                                    <IconFont type="icon-jiantou" className={style.icon} />
                                                }
                                            </div>
                                        );
                                    })) || <p style={{ paddingTop: 20 }}>无审批人</p>}
                            </div>
                        </div>

                        <div>
                            <p className={style.flow_title_chao}>抄送人</p>
                            <div className="pos_aline" style={{ padding: '16px 0' }}>
                                {(approvalDetail.length !== 0 &&
                                    approvalDetail[0]?.ccPersonBy &&
                                    approvalDetail[0]?.ccPersonBy.length !== 0 &&
                                    approvalDetail[0]?.ccPersonBy.map((item, index) => {
                                        return (
                                            <div className={style.flow_item} key={item.id} style={{ display: 'flex', alignItems: 'center' }}>
                                                {/* <p className={style.flow_title}>{item?.title}</p> */}
                                                {/* <Image className={style.flow_img} alt="" src={item?.userUrl || ''} placeholder={true} preview={false}/> */}
                                                <Avatar className={style.flow_img} size={40} src={item?.userUrl || '/pageImg/default@2x.png'} />
                                                <span>{item?.userName}</span>
                                                {/* <IconFont type="icon-jiantou" className={style.icon} /> */}
                                                {
                                                    approvalDetail[0]?.ccPersonBy[approvalDetail[0]?.ccPersonBy.length - 1] !== approvalDetail[0]?.ccPersonBy[index] &&
                                                    <span style={{ color: '#ececec' }} className={style.icon}>+</span>
                                                }
                                            </div>
                                        );
                                    })) || <p style={{ paddingTop: 20 }}>无抄送人</p>}
                            </div>
                        </div>
                    </div>
                </div>)
            }
        </div>
    </Card>
}

export default connect(({ universal, user, loading }) => ({
    universal,
    user,
    loading: loading.models.user || loading.models.universal
}))(ShowApproval);