WorkFLow.jsx

import React, {useEffect, useState} from 'react';
import { connect } from 'umi';
import classname from 'classnames'
import {Form, Select, Avatar} from 'antd'

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

const WorkFLow = (props) => {
  const {
    dispatch, form,
    opsStaff: {workforceRule, workforceInfo}
  } = props
  const [ruleId, setRuleId] = useState();

  const ruleItem = workforceRule?.length > 0 && workforceRule.filter(item => item.id === ruleId) || 0;
  const approvePerson = ruleItem?.length === 1 && ruleItem[0]?.approvedBy || [];
  const ccPerson = ruleItem?.length === 1 && ruleItem[0]?.ccPersonBy || []

  useEffect(() => {
    if (workforceInfo?.auditRuleId) setRuleId(workforceInfo.auditRuleId)
  }, [workforceInfo])

  useEffect(() => {
    dispatchHandle(dispatch, 'opsStaff/common_service_m_audit_rule_list_post', {businessType: 'schedule'})
  }, [])

  useEffect(() => {
    if (props.type === 'add') setRuleId(workforceRule?.[0]?.id);
    form?.setFieldsValue({auditRuleId: workforceRule?.[0]?.id});
  }, [workforceRule])

  return (
    <div>
      <Form.Item initialValue={workforceRule?.[0]?.id} name='auditRuleId' label='请选择审批流程' style={{marginBottom: 0}} rules={[{required: true, message: '请选择审批流程'}]}>
        <Select style={{width: "100%"}} onChange={setRuleId} allowClear>
          {workforceRule?.length > 0 && workforceRule.map(item => (
            <Select.Option key={item.id} value={item.id}>{item?.auditRuleName || '默认流程'}</Select.Option>
          ))}
        </Select>
      </Form.Item>

      {ruleId && (
        <div className={classname("pos_aline")} style={{marginTop: 35}}>
          {/* <div className={style.flow_item}> */}
          {/*   <h4 className={style.flow_title}>审批发起人</h4> */}
          {/*   <Avatar */}
          {/*     size={40} */}
          {/*     alt="avatar" */}
          {/*     style={{marginRight: 10}} */}
          {/*     icon={workforceInfo?.userUrl ? null : <img src="/img/tempHead.png"/>} */}
          {/*   /> */}
          {/*   {workforceInfo?.creationName || ''} */}
          {/* </div> */}
          {approvePerson?.length > 0 && approvePerson.map((item, index) => (
            <div key={`app-${item.id}`} className={index < approvePerson.length - 1 ? style.flow_item : style.flow_item_default}>
              <h4 className={style.flow_title}>部门审批人</h4>
              <Avatar
                src={item.userUrl}
                size={40}
                alt="avatar"
                style={{marginRight: 10}}
                icon={<img src="/img/tempHead.png"/>}
              />{item.userName}
            </div>
          ))}
        </div>
      )}

      {ccPerson?.length > 0 && (
        <div style={{marginTop: 15}}>
          <h4>抄送人</h4>
          <div className={classname("pos_aline")}>
            {ccPerson.map(item => (
              <div key={item.id} style={{marginRight: 10}}>
                <Avatar
                  src={item.userUrl}
                  size={40}
                  alt="avatar"
                  style={{marginRight: 10}}
                  icon={<img src="/img/tempHead.png"/>}
                />
                {item.userName}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default connect(({ opsStaff, loading }) => ({
  opsStaff,
  loading: loading.models.opsStaff,
}))(WorkFLow);