index.jsx 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340
  1. import React, { Component } from "react";
  2. import { Button, Steps, notification, message } from "antd";
  3. import $ from "jquery/src/ajax";
  4. import "./index.less";
  5. /**
  6. * 开单、变更流程图
  7. * 派单传订单编号
  8. * 变更传变更id
  9. */
  10. const Step = Steps.Step;
  11. let num = 1;
  12. class FlowChart extends Component {
  13. constructor(props) {
  14. super(props);
  15. this.state = {
  16. details: {},
  17. processStatus: 0,
  18. list: [],
  19. };
  20. this.openNotification = this.openNotification.bind(this);
  21. this.handleClick = this.handleClick.bind(this);
  22. }
  23. componentDidMount() {
  24. }
  25. componentWillUnmount() {
  26. this.handleClick();
  27. }
  28. componentWillReceiveProps(nextProps) {
  29. // 防止重复请求
  30. if (num < 2) {
  31. (!!this.props.orderNo || !!this.props.id) &&
  32. (
  33. this.getData(),
  34. num++
  35. )
  36. }
  37. }
  38. // 派单流程/变更流程
  39. getData() {
  40. const { orderNo, id } = this.props
  41. // 派单流程
  42. if (!!orderNo) {
  43. $.ajax({
  44. method: "get",
  45. dataType: "json",
  46. crossDomain: false,
  47. url: globalConfig.context + "/api/admin/newOrder/getProcessName",
  48. data: {
  49. orderNo,
  50. },
  51. success: function (data) {
  52. let theArr = [];
  53. if (!data.data) {
  54. if (data.error && data.error.length) {
  55. message.warning(data.error[0].message);
  56. }
  57. } else {
  58. let pstatus = -1;
  59. let info = data.data;
  60. let tpname = ["-", info.zc, info.zc, info.zc, info.dsz, info.dsz, info.dsz][info.approval];
  61. theArr = [
  62. { status: 0, title: "营销员发起", name: info.yxy, time: "" },
  63. { status: 1, title: "经理审核", name: !info.yxjl ? "-" : info.yxjl, time: "" },
  64. { status: 2, title: "营销管理员审核", name: info.yxgly, time: "" },
  65. { status: 3, title: "财务/复审/技术总监审核", name: info.cwzy, time: "" },
  66. { status: 4, title: "特批审核", name: tpname, time: "" },
  67. { status: 5, title: "技术总监派单", name: info.zxsgly, time: "" },
  68. { status: 6, title: "技术接单", name: "", time: "" },
  69. ]
  70. // name为“-”不需要显示
  71. let list = theArr.filter(v => {
  72. return v.name != "-"
  73. })
  74. list.forEach((item, index) => {
  75. if (item.status == info.processStatus) {
  76. pstatus = index
  77. }
  78. })
  79. // 状态为7就是全部分配 同样显示技术接单
  80. if (info.processStatus == 7) {
  81. pstatus = list.length - 1
  82. }
  83. this.setState({
  84. details: info,
  85. list: list,
  86. processStatus: pstatus,
  87. }, () => {
  88. this.openNotification(1)
  89. })
  90. }
  91. }.bind(this),
  92. }).always(
  93. function () {
  94. this.setState({
  95. loading: false,
  96. });
  97. }.bind(this)
  98. );
  99. }
  100. // 变更流程
  101. if (!!id) {
  102. $.ajax({
  103. method: "get",
  104. dataType: "json",
  105. crossDomain: false,
  106. url: globalConfig.context + "/api/admin/orderChange/getChangeProcessName",
  107. data: {
  108. id,
  109. },
  110. success: function (data) {
  111. let theArr = [];
  112. if (!data.data) {
  113. if (data.error && data.error.length) {
  114. message.warning(data.error[0].message);
  115. }
  116. } else {
  117. let info = data.data;
  118. let pstatus = -1;
  119. // 0 退单退款
  120. let theArr0 = [
  121. { status: 0, title: "营销员发起", name: info.yxy, time: "" },
  122. { status: 1, title: "经理审核", name: !info.yxjl ? "-" : info.yxjl, time: "" },
  123. { status: 2, title: "营销管理员审核", name: info.yxgly, time: "" },
  124. { status: 3, title: "技术员审核", name: info.zxs, time: "" },
  125. { status: 4, title: "技术经理审核", name: info.zxsjl, time: "" },
  126. { status: 5, title: "技术总监审核", name: info.zxsgly, time: "" },
  127. { status: 6, title: "财务专员审核", name: info.cwzy, time: "" },
  128. { status: 7, title: "财务总监审核", name: info.cwgly, time: "" },
  129. { status: 8, title: "总裁审核", name: info.zc, time: "" },
  130. { status: 9, title: "董事长审核", name: info.changeAmount > 0.2 ? info.dsz : "-", time: "" },
  131. ]
  132. // 1 项目&金额
  133. let theArr1 = [
  134. { status: 0, title: "营销员发起", name: info.yxy, time: "" },
  135. { status: 1, title: "经理审核", name: !info.yxjl ? "-" : info.yxjl, time: "" },
  136. { status: 2, title: "营销管理员审核", name: info.yxgly, time: "" },
  137. { status: 3, title: "技术员审核", name: info.zxs, time: "" },
  138. { status: 4, title: "技术经理审核", name: info.zxsjl, time: "" },
  139. { status: 5, title: "技术总监审核", name: info.zxsgly, time: "" },
  140. { status: 6, title: "财务专员审核", name: info.cwzy, time: "" },
  141. { status: 7, title: "财务总监审核", name: info.cwgly, time: "" },
  142. { status: 8, title: "总裁审核", name: info.zc, time: "" },
  143. ]
  144. // 2 仅项目
  145. let theArr2 = [
  146. { status: 0, title: "营销员发起", name: info.yxy, time: "" },
  147. { status: 1, title: "经理审核", name: !info.yxjl ? "-" : info.yxjl, time: "" },
  148. { status: 2, title: "营销管理员审核", name: info.yxgly, time: "" },
  149. { status: 3, title: "技术员审核", name: info.zxs, time: "" },
  150. { status: 4, title: "技术经理审核", name: info.zxsjl, time: "" },
  151. { status: 5, title: "技术总监审核", name: info.zxsgly, time: "" },
  152. { status: 6, title: "财务专员审核", name: info.cwzy, time: "" },
  153. { status: 7, title: "财务总监审核", name: info.cwgly, time: "" },
  154. { status: 8, title: "总裁审核", name: info.zc, time: "" },
  155. ]
  156. // 3 仅金额
  157. let theArr3 = [
  158. { status: 0, title: "营销员发起", name: info.yxy, time: "" },
  159. { status: 1, title: "经理审核", name: !info.yxjl ? "-" : info.yxjl, time: "" },
  160. { status: 2, title: "营销管理员审核", name: info.yxgly, time: "" },
  161. { status: 5, title: "技术总监审核", name: info.zxsgly, time: "" },
  162. { status: 6, title: "财务专员审核", name: info.cwzy, time: "" },
  163. { status: 7, title: "财务总监审核", name: info.cwgly, time: "" },
  164. { status: 8, title: "总裁审核", name: info.zc, time: "" },
  165. ]
  166. // 4 重报
  167. let theArr4 = [
  168. { status: 0, title: "营销员发起", name: info.yxy, time: "" },
  169. { status: 1, title: "经理审核", name: !info.yxjl ? "-" : info.yxjl, time: "" },
  170. { status: 2, title: "营销管理员审核", name: info.yxgly, time: "" },
  171. { status: 3, title: "技术员审核", name: info.zxs, time: "" },
  172. { status: 4, title: "技术经理审核", name: info.zxsjl, time: "" },
  173. { status: 6, title: "财务专员审核", name: info.cwzy, time: "" },
  174. { status: 7, title: "财务总监审核", name: info.cwgly, time: "" },
  175. { status: 8, title: "总裁审核", name: info.zc, time: "" },
  176. ]
  177. // 5 赠送
  178. let theArr5 = [
  179. { status: 0, title: "营销员发起", name: info.yxy, time: "" },
  180. { status: 1, title: "经理审核", name: !info.yxjl ? "-" : info.yxjl, time: "" },
  181. { status: 2, title: "营销管理员审核", name: info.yxgly, time: "" },
  182. { status: 6, title: "财务专员审核", name: info.cwzy, time: "" },
  183. { status: 8, title: "总裁审核", name: info.zc, time: "" },
  184. ]
  185. // 6 退单不退款
  186. let theArr6 = [
  187. { status: 0, title: "营销员发起", name: info.yxy, time: "" },
  188. { status: 1, title: "经理审核", name: !info.yxjl ? "-" : info.yxjl, time: "" },
  189. { status: 2, title: "营销管理员审核", name: info.yxgly, time: "" },
  190. { status: 3, title: "技术员审核", name: info.zxs, time: "" },
  191. { status: 4, title: "技术经理审核", name: info.zxsjl, time: "" },
  192. { status: 5, title: "技术总监审核", name: info.zxsgly, time: "" },
  193. { status: 6, title: "财务专员审核", name: info.cwzy, time: "" },
  194. { status: 7, title: "财务总监审核", name: info.cwgly, time: "" },
  195. { status: 8, title: "总裁审核", name: info.zc, time: "" },
  196. ]
  197. // 7 仅变更合同
  198. let theArr7 = [
  199. { status: 0, title: "营销员发起", name: info.yxy, time: "" },
  200. { status: 2, title: "营销管理员审核", name: info.yxgly, time: "" },
  201. ]
  202. // 8 框架协议
  203. let theArr8 = [
  204. { status: 0, title: "营销员发起", name: info.yxy, time: "" },
  205. { status: 1, title: "经理审核", name: !info.yxjl ? "-" : info.yxjl, time: "" },
  206. { status: 2, title: "营销管理员审核", name: info.yxgly, time: "" },
  207. { status: 6, title: "财务专员审核", name: info.cwzy, time: "" },
  208. ]
  209. theArr = info.type == 0
  210. ? theArr0 : info.type == 1
  211. ? theArr1 : info.type == 2
  212. ? theArr2 : info.type == 3
  213. ? theArr3 : info.type == 4
  214. ? theArr4 : info.type == 5
  215. ? theArr5 : info.type == 6
  216. ? theArr6 : info.type == 7
  217. ? theArr7 : info.type == 8 && theArr8
  218. // name为“-”不需要显示
  219. let list = theArr.filter(v => {
  220. return v.name != "-"
  221. })
  222. // 如果是曹津
  223. if (info.special == 1) {
  224. for (var i = 0; i < list.length; i++) {
  225. // 如果是 退单退款
  226. if (info.type == 0) {
  227. // 去掉 董事长审核
  228. list.splice(9, 1);
  229. }
  230. // 把 总裁审核 改成 董事长审核
  231. if (list[i].status == 8) {
  232. list[i].status = 9;
  233. list[i].title = "董事长审核";
  234. list[i].name = info.dsz;
  235. }
  236. }
  237. }
  238. if (info.type == 0 || info.type == 6) {
  239. list.push({ status: 10, title: "财务退票", name: info.cwzy, time: "" },)
  240. }
  241. list.push({ status: 11, title: "完成", name: "", time: "" },)
  242. // 显示当前流程处理
  243. if (info.status == 0 || info.status == 1 || info.status == 3) {
  244. list.forEach((item, index) => {
  245. if (item.status == info.processState) {
  246. pstatus = index
  247. }
  248. })
  249. } else if (info.status == 2) {
  250. pstatus = list.length - 2
  251. } else if (info.status == 4) {
  252. pstatus = list.length - 1
  253. } else if (info.status == 5) {
  254. list = [{ status: -1, title: "变更已取消", name: "", time: "" }]
  255. pstatus = 0
  256. }
  257. this.setState({
  258. details: info,
  259. list: list,
  260. processStatus: pstatus,
  261. }, () => {
  262. this.openNotification(1)
  263. })
  264. }
  265. }.bind(this),
  266. }).always(
  267. function () {
  268. this.setState({
  269. loading: false,
  270. });
  271. }.bind(this)
  272. );
  273. }
  274. }
  275. openNotification(key) {
  276. const { list, details, processStatus } = this.state
  277. const { orderNo, id } = this.props
  278. notification.open({
  279. message: <div style={{ color: "#58A3FF" }}>{!!orderNo && "派单流程"}{!!id && "变更流程"}</div>,
  280. description: <Steps direction="vertical" size="default" current={processStatus}>
  281. {
  282. list.map((item) =>
  283. <Step title={item.title} description={item.name} key={item.status} />
  284. )
  285. }
  286. </Steps>,
  287. duration: null,
  288. key,
  289. style: {
  290. width: 250,
  291. }
  292. });
  293. }
  294. handleClick() {
  295. this.setState({
  296. details: {},
  297. processStatus: 0,
  298. list: [],
  299. })
  300. num = 1
  301. notification.close(1)
  302. }
  303. render() {
  304. return (
  305. <Button type="primary"
  306. style={{ marginLeft: 10 }}
  307. onClick={() => { this.getData() }}
  308. >查看流程</Button>
  309. );
  310. }
  311. }
  312. export default FlowChart;