index.jsx 13 KB

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