kede-client/js/component/common/flowchart/index.jsx

import React, { Component } from "react";
import { Button, Steps, notification, message } from "antd";
import $ from "jquery/src/ajax";
import "./index.less";

/**
 * 开单、变更流程图
 * 派单传订单编号
 * 变更传变更id
 */
const Step = Steps.Step;
let num = 1;

class FlowChart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      details: {},
      processStatus: 0,
      list: [],
    };
    this.openNotification = this.openNotification.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }


  componentDidMount() {

  }

  componentWillUnmount() {
    this.handleClick();
  }

  componentWillReceiveProps(nextProps) {
    // 防止重复请求
    if (num < 2) {
      (!!this.props.orderNo || !!this.props.id) &&
        (
          this.getData(),
          num++
        )
    }
  }

  // 派单流程/变更流程
  getData() {
    const { orderNo, id } = this.props
    // 派单流程
    if (!!orderNo) {
      $.ajax({
        method: "get",
        dataType: "json",
        crossDomain: false,
        url: globalConfig.context + "/api/admin/newOrder/getProcessName",
        data: {
          orderNo,
        },
        success: function (data) {
          let theArr = [];
          if (!data.data) {
            if (data.error && data.error.length) {
              message.warning(data.error[0].message);
            }
          } else {
            let pstatus = -1;
            let info = data.data;
            // 0非特批 1总裁待审核 2总裁通过 3总裁驳回 4董事长待审核 5董事长通过 6董事长驳回 7副总裁待审核 8副总裁通过 9副总裁驳回
            let tpname = ["-", info.approvalName, info.approvalName, info.approvalName, info.dsz, info.dsz, info.dsz][info.approval];
            theArr = [
              { status: 0, title: "营销员发起", name: info.yxy, time: "" },
              { status: 1, title: "经理审核", name: !info.yxjl ? "-" : info.yxjl, time: "" },
              { status: 2, title: "营销管理员审核", name: info.yxgly, time: "" },
              { status: 3, title: "财务/复审/技术总监审核", name: info.cwzy, time: "" },
              { status: 4, title: "运营保障审核 ", name: info.yybz, time: "" },
              { status: 5, title: "特批审核", name: tpname, time: "" },
              { status: 6, title: "技术总监派单", name: info.zxsgly, time: "" },
              { status: 7, title: "技术接单", name: "", time: "" },
            ]
            // name为“-”不需要显示
            let list = theArr.filter(v => {
              return v.name != "-"
            })

            list.forEach((item, index) => {
              if (item.status == info.processStatus) {
                pstatus = index
              }
            })

            // 状态为7就是全部分配 同样显示技术接单
            if (info.processStatus == 8) {
              pstatus = list.length - 1
            }

            this.setState({
              details: info,
              list: list,
              processStatus: pstatus,
            }, () => {
              this.openNotification(1)
            })
          }
        }.bind(this),
      }).always(
        function () {
          this.setState({
            loading: false,
          });
        }.bind(this)
      );
    }

    // 变更流程
    if (!!id) {
      $.ajax({
        method: "get",
        dataType: "json",
        crossDomain: false,
        url: globalConfig.context + "/api/admin/orderChange/getChangeProcessName",
        data: {
          id,
        },
        success: function (data) {
          let theArr = [];
          if (!data.data) {
            if (data.error && data.error.length) {
              message.warning(data.error[0].message);
            }
          } else {
            let info = data.data;
            let pstatus = -1;
            // 0 退单退款
            let theArr0 = [
              { status: 0, title: "营销员发起", name: info.yxy, time: "" },
              { status: 1, title: "经理审核", name: !info.yxjl ? "-" : info.yxjl, time: "" },
              { status: 2, title: "营销管理员审核", name: info.yxgly, time: "" },
              { status: 3, title: "技术员审核", name: info.zxs, time: "" },
              { status: 4, title: "技术经理审核", name: info.zxsjl, time: "" },
              { status: 5, title: "技术总监审核", name: info.zxsgly, time: "" },
              { status: 6, title: "财务专员审核", name: info.cwzy, time: "" },
              { status: 7, title: "财务总监审核", name: info.cwgly, time: "" },
              { status: 8, title: "运营保障审核", name: info.yybz, time: "" },
              { status: 9, title: "公司/部门管理审核", name: info.special == 1 ? "-" : info.approvalName },
              { status: 10, title: "董事长审核", name: info.special == 1 ? info.dsz : (info.changeAmount > 0.2 ? info.dsz : "-"), time: "" },
            ]
            // 1 项目&金额
            let theArr1 = [
              { status: 0, title: "营销员发起", name: info.yxy, time: "" },
              { status: 1, title: "经理审核", name: !info.yxjl ? "-" : info.yxjl, time: "" },
              { status: 2, title: "营销管理员审核", name: info.yxgly, time: "" },
              { status: 3, title: "技术员审核", name: info.zxs, time: "" },
              { status: 4, title: "技术经理审核", name: info.zxsjl, time: "" },
              { status: 5, title: "技术总监审核", name: info.zxsgly, time: "" },
              { status: 6, title: "财务专员审核", name: info.cwzy, time: "" },
              { status: 7, title: "财务总监审核", name: info.cwgly, time: "" },
              { status: 8, title: "运营保障审核", name: info.yybz, time: "" },
              { status: 9, title: "公司/部门管理审核", name: info.approvalName, time: "" },
            ]
            // 2 仅项目
            let theArr2 = [
              { status: 0, title: "营销员发起", name: info.yxy, time: "" },
              { status: 1, title: "经理审核", name: !info.yxjl ? "-" : info.yxjl, time: "" },
              { status: 2, title: "营销管理员审核", name: info.yxgly, time: "" },
              { status: 3, title: "技术员审核", name: info.zxs, time: "" },
              // { status: 4, title: "技术经理审核", name: info.zxsjl, time: "" },
              { status: 5, title: "技术总监审核", name: info.zxsgly, time: "" },
              { status: 6, title: "财务专员审核", name: info.cwzy, time: "" },
              { status: 7, title: "财务总监审核", name: info.cwgly, time: "" },
              { status: 8, title: "运营保障审核", name: info.yybz, time: "" },
              { status: 9, title: "公司/部门管理审核", name: info.approvalName, time: "" },
            ]
            // 3 仅金额
            let theArr3 = [
              { status: 0, title: "营销员发起", name: info.yxy, time: "" },
              { status: 1, title: "经理审核", name: !info.yxjl ? "-" : info.yxjl, time: "" },
              { status: 2, title: "营销管理员审核", name: info.yxgly, time: "" },
              { status: 5, title: "技术总监审核", name: info.zxsgly, time: "" },
              { status: 6, title: "财务专员审核", name: info.cwzy, time: "" },
              { status: 7, title: "财务总监审核", name: info.cwgly, time: "" },
              { status: 8, title: "运营保障审核", name: info.yybz, time: "" },
              { status: 9, title: "公司/部门管理审核", name: info.approvalName, time: "" },
            ]
            // 4 重报
            let theArr4 = [
              { status: 0, title: "营销员发起", name: info.yxy, time: "" },
              { status: 1, title: "经理审核", name: !info.yxjl ? "-" : info.yxjl, time: "" },
              { status: 2, title: "营销管理员审核", name: info.yxgly, time: "" },
              { status: 3, title: "技术员审核", name: info.zxs, time: "" },
              // { status: 4, title: "技术经理审核", name: info.zxsjl, time: "" },
              { status: 6, title: "财务专员审核", name: info.cwzy, time: "" },
              { status: 7, title: "财务总监审核", name: info.cwgly, time: "" },
              { status: 8, title: "运营保障审核", name: info.yybz, time: "" },
              { status: 9, title: "公司/部门管理审核", name: info.approvalName, time: "" },
            ]
            // 5 赠送
            let theArr5 = [
              { status: 0, title: "营销员发起", name: info.yxy, time: "" },
              { status: 1, title: "经理审核", name: !info.yxjl ? "-" : info.yxjl, time: "" },
              { status: 2, title: "营销管理员审核", name: info.yxgly, time: "" },
              { status: 6, title: "财务专员审核", name: info.cwzy, time: "" },
              { status: 8, title: "运营保障审核", name: info.yybz, time: "" },
              { status: 9, title: "公司/部门管理审核", name: info.approvalName, time: "" },
            ]
            // 6 退单不退款
            let theArr6 = [
              { status: 0, title: "营销员发起", name: info.yxy, time: "" },
              { status: 1, title: "经理审核", name: !info.yxjl ? "-" : info.yxjl, time: "" },
              { status: 2, title: "营销管理员审核", name: info.yxgly, time: "" },
              { status: 3, title: "技术员审核", name: info.zxs, time: "" },
              { status: 4, title: "技术经理审核", name: info.zxsjl, time: "" },
              { status: 5, title: "技术总监审核", name: info.zxsgly, time: "" },
              { status: 6, title: "财务专员审核", name: info.cwzy, time: "" },
              { status: 7, title: "财务总监审核", name: info.cwgly, time: "" },
              { status: 8, title: "运营保障审核", name: info.yybz, time: "" },
              { status: 9, title: "公司/部门管理审核", name: info.approvalName, time: "" },
            ]
            // 7 仅变更合同
            let theArr7 = [
              { status: 0, title: "营销员发起", name: info.yxy, time: "" },
              { status: 2, title: "营销管理员审核", name: info.yxgly, time: "" },
              { status: 8, title: "运营保障审核", name: info.yybz, time: "" },
            ]

            // 8 框架协议
            let theArr8 = [
              { status: 0, title: "营销员发起", name: info.yxy, time: "" },
              { status: 1, title: "经理审核", name: !info.yxjl ? "-" : info.yxjl, time: "" },
              { status: 2, title: "营销管理员审核", name: info.yxgly, time: "" },
              { status: 6, title: "财务专员审核", name: info.cwzy, time: "" },
              { status: 8, title: "运营保障审核", name: info.yybz, time: "" },
            ]

            theArr = info.type == 0
              ? theArr0 : info.type == 1
                ? theArr1 : info.type == 2
                  ? theArr2 : info.type == 3
                    ? theArr3 : info.type == 4
                      ? theArr4 : info.type == 5
                        ? theArr5 : info.type == 6
                          ? theArr6 : info.type == 7
                            ? theArr7 : info.type == 8 && theArr8

            // name为“-”不需要显示
            let list = theArr.filter(v => {
              return v.name != "-"
            })

            // 如果是曹津
            if (info.special == 1) {
              for (var i = 0; i < list.length; i++) {
                // 如果是 退单退款
                if (info.type == 0) {
                  // 去掉 董事长审核
                  list.splice(9, 1);
                }
                // 把 总裁审核 改成 董事长审核
                if (list[i].status == 9) {
                  list[i].status = 10;
                  list[i].title = "董事长审核";
                  list[i].name = info.dsz;
                }
              }
            }

            if (info.type == 0 || info.type == 6) {
              list.push({ status: 11, title: "财务退票", name: info.cwzy, time: "" },)
            }

            list.push({ status: 12, title: "完成", name: "", time: "" },)

            // 显示当前流程处理
            if (info.status == 0 || info.status == 1 || info.status == 3) {
              list.forEach((item, index) => {
                if (info.processState == 11 && item.status == 8) { // 副总裁审核processState == 11 
                  pstatus = index
                } else if ((item.status == info.processState) && info.processState != 11) {
                  pstatus = index
                }
              })
            } else if (info.status == 2) {
              pstatus = list.length - 2
            } else if (info.status == 4) {
              pstatus = list.length - 1
            } else if (info.status == 5) {
              list = [{ status: -1, title: "变更已取消", name: "", time: "" }]
              pstatus = 0
            }
            this.setState({
              details: info,
              list: list,
              processStatus: pstatus,
            }, () => {
              this.openNotification(1)
            })
          }
        }.bind(this),
      }).always(
        function () {
          this.setState({
            loading: false,
          });
        }.bind(this)
      );
    }

  }



  openNotification(key) {
    const { list, details, processStatus } = this.state
    const { orderNo, id } = this.props
    notification.open({
      message: <div style={{ color: "#58A3FF" }}>{!!orderNo && "派单流程"}{!!id && "变更流程"}</div>,
      description: <Steps direction="vertical" size="default" current={processStatus}>
        {
          list.map((item) =>
            <Step title={item.title} description={item.name} key={item.status} />
          )
        }
      </Steps>,
      duration: null,
      key,
      style: {
        width: 250,
      }
    });
  }

  handleClick() {
    this.setState({
      details: {},
      processStatus: 0,
      list: [],
    })
    num = 1
    notification.close(1)
  }

  render() {
    return (
      <Button type="primary"
        style={{ marginLeft: 10 }}
        onClick={() => { this.getData() }}
      >查看流程</Button>
    );
  }
}

export default FlowChart;