index.jsx

import React, { useState, useEffect } from 'react';
import { connect, history } from 'umi';
import classname from 'classnames'
import moment from 'moment'
import { Button, Avatar, Input,Row,Col } from 'antd';

import style from './index.less';
import utilsStyles from '@/utils/utils.less';
const { TextArea } = Input

const Index = (props) => {
  const { stepList, onPass, onRefuse, requestType, onEdit, disabled, remark, auditDetail } = props;
  const [initRemark, setInitRemark] = useState('');
  const [hasBtn, setHasBtn] = useState(false);
  console.log('props', props, `stepList is:`, stepList);
  useEffect(() => {
    const { currentUser: {
      id
    } } = props.user;
    const findNodeItem = stepList.filter(item => item.userId === id);
    console.log(`findNodeItem  is:`, findNodeItem);
    // personalAuditState auditState 为4代表待审核，2 通过,3 不通过,1为待我审核，流程里有我，但是，还没有到我
    const personalAuditState = findNodeItem && findNodeItem.length > 0 && findNodeItem[0].auditState;
    //从 approveBy里面去拿定单领导审核状态
    if (findNodeItem && findNodeItem.length > 0 && personalAuditState != 1) {
      setInitRemark(findNodeItem[0].remarks || '');
    }
    if (personalAuditState === 4) {
      setHasBtn(true);
    } else {
      setHasBtn(false);
    }
  }, [auditDetail, stepList]);

  //总流程 1待审核 2审核通过 3审核不通过
  const totalProcessAuditState = auditDetail?.auditState;
  const totalProcessIsOver = (totalProcessAuditState === 2 || totalProcessAuditState === 3) ? true : false;
  // 4 //待我审批,2 //通过,3 //不通过,1,//待审批
  return (
    <div>
      <Row justify="space-between" style={{marginBottom:16}} align='middle'>
        <Col flex={ 1 }><h3 style={{ margin: 0 ,fontSize:14 }} className={classname(utilsStyles.comTitleBar)}>审批信息</h3></Col>
        <Col flex= 'auto' style={{textAlign:'right'}}>
            {
              (Number(totalProcessAuditState) === 4 || Number(totalProcessAuditState) === 1 ) && <span className={utilsStyles?.comTag} type='warn'>待审批</span> ||
              (Number(totalProcessAuditState) === 2) && <span className={utilsStyles?.comTag} type='success'>审批通过</span> ||
              (Number(totalProcessAuditState) === 3) && <span className={utilsStyles?.comTag} type='error'>已驳回</span>
            }
        </Col>
      </Row>
      <ul className={style.step_box}>
        <li key={-1} style={{ minHeight: 100 }} className={classname(style.step_list, style.step_success, style.step_before)}>
          <div className={style.step_title}>
            <span>发起审批</span>
            <span>
              {auditDetail?.creationTime ? moment(auditDetail?.creationTime).format("YYYY-MM-DD HH:mm:ss") : ''}
            </span>
          </div>
          <div style={{ padding: 20 }}>
            <div className="pos_start">
              <Avatar size={40} style={{ marginRight: 10 }} src={auditDetail?.applicantUrl} />
              {auditDetail?.applicantName}
            </div>
          </div>
        </li>
        {stepList && stepList?.length > 0 && stepList.map((item, index) => {
          return (
            <li
              key={index}
              style={{ minHeight: 100 }}
              className={
                classname(
                  style.step_list,
                  index < stepList.length - 1 && style.step_before,
                  [style.step_ing, style.step_success, style.step_fail, style.step_ing][parseInt(item.auditState, 10) - 1],
                  ((parseInt(item.auditState, 10) === 1)) ? style.stepGrayStep : '',
                  totalProcessIsOver ? style.stepProcessOver : ''
                )
              }>
              <div className={style.step_title}>
                <span>{item?.departmentName || '未知部门'}</span>
                <span>
                  {
                    // ((totalProcessAuditState === 3 && (Number(item.auditState) === 1 || Number(item.auditState) === 4) && <span className="btn_disabled" type='warn'>无需审批</span>) || 
                    // ((Number(item.auditState) === 1 || Number(item.auditState) === 4) && <span className={utilsStyles?.comTag} type='warn'>待审批</span>)) ||
                    // (Number(item.auditState) === 2) && <span className={utilsStyles?.comTag} type='success'>审批成功</span> ||
                    // (Number(item.auditState) === 3) && (
                    //   <div style={{ display: 'flex' , alignItems: 'center'}}>
                    //     <span style={{ marginRight: 5 }}>{
                    //       item.auditTime && moment(item.auditTime).format("YYYY-MM-DD HH:mm:ss") || '暂无'
                    //     }</span>
                    //     <span className={utilsStyles?.comTag} type='error'>已驳回</span>
                    //   </div>
                    // ) ||
                    (item.auditTime && moment(item.auditTime).format("YYYY-MM-DD HH:mm:ss") || '')
                  }
                </span>
              </div>
              <div style={{ padding: 20 }}>
                <div className="pos_start">
                  <Avatar size={40} style={{ marginRight: 10 }} src={item?.userUrl} />
                  {item.userName}
                </div>
                {item.remarks && (
                  <div className={style.step_content}>{item.remarks}</div>
                )}
              </div>
            </li>
          )
        })}
        {/* {requestType === '2' && (
          <li style={{ marginTop:10 }}> */}
        {/* <TextArea rows={6} disabled={disabled} onChange={e => onEdit(e.target.value)} placeholder="请输入" value ={ initRemark || remark || '' } /> */}
        {/* <div style={{background:'#f6f6f6',padding:12,lineHeight:2,borderRadius:4,minHeight:48,color:'#7a7a7a' }}>{ initRemark || remark || '' }</div>
          </li>
        )} */}

      </ul>
      { hasBtn && (
        <div className={style.bottom_btn}>
          <Button disabled={disabled} onClick={onRefuse} style={{ marginRight: 10 }}>驳回</Button>
          <Button disabled={disabled} onClick={onPass} type="primary">通过</Button>
        </div>
      )}
    </div>
  );
};


export default connect(({ user, dict, universal, loading }) => ({
  dict, universal, user,
  queryLoading: loading.models.user,
}))(Index);