GtDigManageWeb/src/pages/Flow/components/ApprovalProcess.tsx

import React, { useEffect, useMemo, useState } from 'react';
import { queryUserListByRoleID } from '@/services/boom';
import { connect } from 'umi';
import { PlusOutlined } from '@ant-design/icons';
import { Popover, Radio, RadioChangeEvent, Spin, Steps } from 'antd';
import { useModel } from '@umijs/max';

const { Step } = Steps;

enum TYPR {
  ROLE = 'role',
  USER = 'user',
}

const ApprovalProcess = (props: any) => {
  const { approvalProcess, dispatch, onChange, roleList = [] } = props;
  const [selectUserList, setSelectUserList] = useState([]);
  const [curNodeIdx, setCurNodeIdx] = useState(-1);
  const [loading, setLoading] = useState(false);
  const { userList, run } = useModel('userList');

  const list = useMemo(() => {
    approvalProcess?.forEach((item: any) => {
      if (item.length > 1 && item[0].type == TYPR.USER) {
        item.forEach((curUser: any) => {
          curUser.name =
            userList.find((user: any) => user.ID == curUser.value)?.CName ||
            '-';
        });
      } else if (item.length == 1 && item[0].type == TYPR.USER) {
        item[0].name =
          userList.find((user: any) => user.ID == item[0].value)?.CName || '-';
      } else if (item.length == 1 && item[0].nowType == TYPR.USER) {
        item[0].name =
          userList.find((user: any) => user.ID == item[0].nowValue)?.CName ||
          '-';
      } else {
        item[0].name = null;
      }
    });
    return approvalProcess;
  }, [approvalProcess]);

  const onStepsChange = async (current: any, list: any) => {
    setLoading(true);
    const itemNode = list[current][0];
    if (itemNode.type !== 'role') return;
    const data = await queryUserListByRoleID({ role_id: itemNode.value });
    setCurNodeIdx(current);
    setSelectUserList(data);
    setLoading(false);
  };

  const selectedUserId = ({ target: { value } }: RadioChangeEvent) => {
    //userId
    const name = userList.find((user: any) => user.ID == value)?.CName || '-';
    const data = { nowType: TYPR.USER, nowValue: Number(value), name }; //type: TYPR.USER, value: Number(value)
    list[curNodeIdx][0] = { ...list[curNodeIdx][0], ...data };
    console.log([...list]);
    onChange?.([...list]);
  };

  const content = (
    <Spin spinning={loading}>
      <Radio.Group onChange={selectedUserId}>
        {selectUserList.map((item: any) => (
          // <Button onClick={() => selectedUserId(item.user_id)}>{item.c_name}</Button>
          <Radio.Button value={item.user_id}>{item.c_name}</Radio.Button>
        ))}
      </Radio.Group>
    </Spin>
  );

  useEffect(() => {
    dispatch({
      type: 'user/getRoleList',
    });
    run();
  }, []);

  return (
    <>
      <Steps
        current={-1}
        direction="vertical"
        onChange={(value) => onStepsChange(value, list)}
      >
        {list?.map((item: any) => (
          <Step
            key={item[0]?.value}
            icon={
              <Popover
                placement="bottomLeft"
                title={'选择审批人'}
                content={content}
                trigger="click"
                overlayStyle={{ width: '300px' }}
              >
                <PlusOutlined />
              </Popover>
            }
            title={
              item[0]?.name ||
              `从${
                roleList?.find((cur: any) => cur.ID == item[0]?.value)?.Name ||
                '-'
              }选择`
            }
          />
        ))}
      </Steps>
    </>
  );
};
export default connect(({ user }: any) => ({
  roleList: user.roleList,
}))(ApprovalProcess);