| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342 | 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: tpname, time: "" },              { status: 5, title: "技术总监派单", name: info.zxsgly, time: "" },              { status: 6, 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 == 7) {              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.special == 1 ? "-" : info.approvalName },              { status: 9, 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.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.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.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.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.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.approvalName, time: "" },            ]            // 7 仅变更合同            let theArr7 = [              { status: 0, title: "营销员发起", name: info.yxy, time: "" },              { status: 2, title: "营销管理员审核", name: info.yxgly, 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: "" },            ]            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 == 8) {                  list[i].status = 9;                  list[i].title = "董事长审核";                  list[i].name = info.dsz;                }              }            }            if (info.type == 0 || info.type == 6) {              list.push({ status: 10, title: "财务退票", name: info.cwzy, time: "" },)            }            list.push({ status: 11, title: "完成", name: "", time: "" },)            // 显示当前流程处理            if (info.status == 0 || info.status == 1 || info.status == 3) {              list.forEach((item, index) => {                if (info.processState == 10 && item.status == 8) { // 副总裁审核processState == 10                   pstatus = index                } else if ((item.status == info.processState) && info.processState != 10) {                  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;
 |