index.jsx 6.22 KB
Newer Older
DarkForst's avatar
DarkForst committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133
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);