WorkloadWeb/src/pages/PurchaseAdmin/PurchaseList/Detail/FlowModal.js

import React, { useEffect, useState, useRef, useMemo } from 'react';
import { Modal, Input, Select, List, Row, Col, Table, message, Steps, Space, Button } from 'antd';
import Flow from '@/components/Flow/index';
import { connect } from 'dva';
import { GetTokenFromUrl, getToken } from '@/utils/utils';
import { MODELS, useXFlowApp, useModelAsync } from '@antv/xflow';
import { CheckOutlined } from '@ant-design/icons';
import { queryVserionByNode } from '@/services/boom';
import { async } from '@antv/x6/lib/registry/marker/async';
const { Step } = Steps;

const { TextArea } = Input;
const localData = JSON.parse(localStorage.ggDetaiData || '{}');
const PAGE_SIZE = 8

// 提交
function FlowModal(props) {
  const { visible, version, onClose, onChangeVersion, form, loading, flowDetail, dispatch } = props;
  const [data, setData] = useState([]);
  const [nodeLoading, setNodeLoading] = useState(false);
  const [pageSize, setPageSize] = useState(PAGE_SIZE)
  const [stepsData, setStepsData] = useState([])
  // const app = useXFlowApp();
  // const appRef = userRef()

  const graphData = useMemo(() => {
    let nodes = flowDetail.nodes.map(item => ({
      ...item,
      isCheck: item.Id == version.template_node_id,
    }));
    return {
      nodes,
      edges: flowDetail.edges,
    };
  }, [flowDetail, version.template_node_id]);

  useEffect(() => {
    if(!visible) updateSteps([]);
  }, [visible, version])

  useEffect(()=>{
    if(stepsData.length <= 0){
      setPageSize(PAGE_SIZE);
    }else{
      setPageSize(PAGE_SIZE - stepsData.length)
    }
  },[stepsData])

  const handleSelectNode = async args => {
    let res;
    const id = args.nodeId || args.nodeIds[0];
    if (!id) return;
    let node = graphData.nodes.find(item => item.id == id);
    setNodeLoading(true);
    try {
      res = await queryVserionByNode({ template_node_id: node.Id});
      let data = [];
      res.data.excel_version_tree.map(arr => {
        if (res.data.flow_id) {
          data = [...data, {...arr, flow_id:res.data.flow_id}];
        } else {
          data = [...data, arr];
        }
      });
      
      data.forEach((item, id)=>{
        //解决key报错问题
        data[id].key=`${id}-${item.name}`;
        item.isParent = true;
      })

      // let dataNew = [...nameSet].map(name=>{
      //   let list = data.filter(item=>item.version_name == name)
      //   if(list.length == 1) {
      //     return list[0]
      //   }else if(list.filter(item=>!item.version_no).length > 0) {
      //     return list.filter(item=>!item.version_no)[0]
      //   }else {
      //     return list.reduce((a, b)=> a.version_no > b.version_no ? b : a)
      //   }
      // })
      // // let dataNew = data.filter(item=>!item.version_no);
      // dataNew.forEach(item=>{
      //   let curItem = data.find(node => node.version_name == item.version_name && node.version_id != item.version_id)
      //   if(curItem) {
      //     curItem.isChild = true;
      //     item.children = [curItem]
      //   };
      // })
      // setData(dataNew);
      setData(data);
    } catch (error) {
      console.log(error);
    }
    setNodeLoading(false);
    updateSteps([]);
  };

  const updateSteps = (data, curNodeId) => {
    let newData = [];
    let set = new Set()
    data.forEach(item=>set.add(item.template_node_id));
    let list = [...set];
    if(set.has(curNodeId)){
      set.delete(curNodeId);
      list = [curNodeId, ...set]
    } 
    let dataList = list.map(template_node_id=>{
      let itemDataList = data.filter(item => item.template_node_id == template_node_id)
      let  curid = 3
      let status = 'process';
      itemDataList.forEach(item=>{
        if(item.audit_status != 3 && item.node_id <= curid) curid = item.node_id - 1;
        if(item.audit_status == 2) status = 'error';
      })
      let curNode = flowDetail.nodes.find(item=>item.Id == itemDataList[0].template_node_id)
      let obj = { 
        status,
        current:curid,
        list: itemDataList[0].FlowInfo.FlowNodes,
        name: curNode?.label || itemDataList[0].FlowInfo.name,
      }
      itemDataList.forEach((itemData, idx) => {
        if(idx >= obj.list.length) return;
        obj.list[idx].auditor = itemData.AuthorInfo.CName;
      })
      return obj
    })
    setStepsData(dataList)
  };

  const handleChangeClick = (item) => {
    let type = item.flow_id ? 'detail/queryAuditRecord' : 'detail/queryAuditExcel'
    dispatch({
      type,
      payload: {
        excel_id: item.id,
        pageSize: 100,
      },
      callback: res => {
        updateSteps(res, item.template_node_id);
      },
    });
  }
  const columns = useMemo(() => {
    return [
      {
        title: '名称',
        // width: '33%',
        render: item => (
          <span style={{ color: item.audit_status != 0 ? '#9b9b9b' : '' }}>
            {item.id == version.id && <CheckOutlined style={{ marginRight: 10 }} />}
            {item.version_no && !item.isParent ? `${item.version_name}.${item.version_no}` : item.version_name}
          </span>
        ),
      },
      {
        title: '状态',
        width: '20%',
        render: item => {
          let style = {  color: getColor(item) };
          let txt = '';
          switch (item.audit_status) {
            case 0:
              txt = '未提交';
              break;
            case 1:
              txt = '待审批';
              break;
            case 2:
              txt = '拒绝';
              break;
            case 3:
              txt = '通过';
              break;
            case 4:
              txt = '已提交';
              break;
          }
          if(item.status == 1)  txt = '失效';
          return  item.audit_status != 0  ? 
            <Button onClick={()=>handleChangeClick(item)}>{txt}</Button> :
            <span style={style} >{txt}</span>
        },
      },
      {
        title: '操作',
        width: '20%',
        render: item =>
          item.id != version.id && (
            <a
              onClick={() => {
                onChangeVersion(item);
                onClose();
              }}
            >
              切换
            </a>
          ),
      },
    ];
  }, [version]);

  const onChange = () => {
    updateSteps([]);
  }

  return (
    <Modal
      confirmLoading={loading}
      destroyOnClose
      title="流程图"
      visible={visible}
      onCancel={onClose}
      footer={false}
      width="98%"
    >
      <Row gutter={8}>
        <Col span={16}>
          <Flow meta={{ type: 'view' }} flowDetail={graphData} onSelectNode={handleSelectNode} />
        </Col>
        <Col span={8} >
          <div style={{width:'100%'}}>         
            <Table style={{maxHeight:'90%'}} columns={columns} dataSource={data} loading={nodeLoading} bordered={false} pagination={{pageSize:8,  onChange}} scroll={{ y: 65*pageSize }}/>
          </div>
          {stepsData.map((item ,idx)=> <div key={`${item.name}_${idx}`} style={{marginBottom:'20px'}}>
            <div style={{marginBottom:'4px'}}>{item.name}</div>
            <Steps size='small' current={item.current} status={item.status} >
              {item.list.map(node => 
                <Step
                  key={`${node.id}_${node.node}`}
                  title={node.node}
                  description={`审批人：${node.auditor || '-'}`}
                />
              )}
            </Steps>
          </div>)}
        </Col>
      </Row>
    </Modal>
  );
}

const getColor = item => {
  let color = '';
  switch (item.audit_status) {
    case 2:
      // 审批拒绝
      color = '#f5222d';
      break;
    case 3:
      // 审批成功
      color = '#7cb305';
      break;
    case 4:
      // 历史清单
      color = '#9b9b9b';
      break;

    default:
      break;
  }
  return color;
};

export default connect(({ xflow, detail }) => ({
  flowDetail: xflow.flowDetail,
}))(FlowModal);