TaskOrder.tsx 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
  1. import PageContent from '@/components/PageContent';
  2. import PageTitle from '@/components/PageTitle';
  3. import { IUserType } from '@/pages/TaskManage/Detail/TaskList/taskList.types';
  4. import SubTitle from '@/pages/TaskManage/components/SubTitle';
  5. import { OrderStatus } from '@/pages/TaskManage/constent';
  6. import {
  7. getCraftRecordList,
  8. getMaintainRecordList,
  9. getRepairRecordList,
  10. } from '@/services/TaskManage';
  11. import { useLocation } from '@@/exports';
  12. import { connect, useRequest } from '@umijs/max';
  13. import { Col, Row } from 'antd';
  14. import moment from 'moment';
  15. import { DefaultOptionType } from 'rc-select/es/Select';
  16. import React, { useEffect, useState } from 'react';
  17. import styles from './taskOrder.less';
  18. interface IPropsType {
  19. userList: IUserType[];
  20. dispatch: (args: { type: string; payload: object }) => {};
  21. }
  22. interface IOrderInfo {
  23. CreateTime: string;
  24. PlanTime: string;
  25. RepairTime: string;
  26. Reason: string;
  27. Repairman: string | IUserType;
  28. DispatchMan: string | IUserType;
  29. OrderStatus: string | DefaultOptionType;
  30. Lubrication?: number;
  31. Fasten?: number;
  32. RustRemoval?: number;
  33. AntiCorrosive?: number;
  34. Clean?: number;
  35. Check?: number;
  36. }
  37. const TaskOrder: React.FC<IPropsType> = (props) => {
  38. const { userList, dispatch } = props;
  39. const location = useLocation();
  40. const queryParams = new URLSearchParams(location.search);
  41. const project_id = Number(queryParams.get('project_id'));
  42. const order_id = Number(queryParams.get('order_id'));
  43. const order_type = Number(queryParams.get('order_type'));
  44. const [orderInfo, setOrderInfo] = useState<IOrderInfo>();
  45. // 根据type请求详情
  46. const { run: getMaintainDetail } = useRequest(getMaintainRecordList, {
  47. manual: true,
  48. formatResult: (result) => {
  49. console.log(moment('2022-12-12 00:00:00').format('YYYY-MM-DD HH:mm'));
  50. const temp = result.data.list[0];
  51. const tempDetail = {
  52. CreateTime: moment(temp.CreateTime).format('YYYY-MM-DD HH:mm'),
  53. PlanTime: moment(temp.PlanTime).format('YYYY-MM-DD HH:mm'),
  54. RepairTime: moment(temp.RepairTime).format('YYYY-MM-DD HH:mm') || '-',
  55. Reason: temp.Note,
  56. Lubrication: temp.Lubrication,
  57. Fasten: temp.Fasten,
  58. RustRemoval: temp.RustRemoval,
  59. AntiCorrosive: temp.Anticorrosive,
  60. Clean: temp.Clean,
  61. Check: temp.Check,
  62. Repairman:
  63. userList.find((item) => item.ID === temp.MaintenancePerson) || '-',
  64. DispatchMan:
  65. userList.find((item) => (item.ID = temp.Operators[0].Operator.ID)) ||
  66. '-',
  67. OrderStatus:
  68. OrderStatus.find((item) => item.value === temp.Status) || '-',
  69. };
  70. setOrderInfo(tempDetail);
  71. },
  72. });
  73. // 根据type请求详情
  74. const { run: getRepairDetail } = useRequest(getRepairRecordList, {
  75. manual: true,
  76. formatResult: (result: any) => {
  77. const temp = result.data.list[0];
  78. const tempDetail: IOrderInfo = {
  79. CreateTime: moment(temp.CreateTime).format('YYYY-MM-DD HH:mm'),
  80. PlanTime: moment(temp.PlanTime).format('YYYY-MM-DD HH:mm'),
  81. RepairTime: moment(temp.RepairTime).format('YYYY-MM-DD HH:mm'),
  82. Reason: temp.Reason,
  83. Repairman: userList.find((item) => item.ID === temp.Repairman) || '-',
  84. DispatchMan:
  85. userList.find((item) => {
  86. item.ID === temp.operator_id;
  87. }) || '-',
  88. OrderStatus:
  89. OrderStatus.find((item) => item.value === temp.AcceptanceStatus) ||
  90. '-',
  91. };
  92. setOrderInfo(tempDetail);
  93. },
  94. });
  95. // 根据type请求详情
  96. const { run: getCraftDetail } = useRequest(getCraftRecordList, {
  97. manual: true,
  98. formatResult: (result) => {
  99. const temp = result.data.list[0];
  100. const tempDetail = {
  101. CreateTime: moment(temp.start_time).format('YYYY-MM-DD HH:mm'),
  102. PlanTime: moment(temp.plan_end_time).format('YYYY-MM-DD HH:mm'),
  103. RepairTime:
  104. (temp.actual_end_time &&
  105. moment(temp.actual_end_time).format('YYYY-MM-DD HH:mm')) ||
  106. '-',
  107. Reason: temp.detail,
  108. Repairman: userList.find((item) => item.ID === temp.checker_id) || '-',
  109. DispatchMan:
  110. userList.find((item) => item.ID === temp.operator_id) || '-',
  111. OrderStatus:
  112. OrderStatus.find((item) => item.value === temp.status) || '-',
  113. };
  114. setOrderInfo(tempDetail);
  115. },
  116. });
  117. useEffect(() => {
  118. if (userList.length === 0) {
  119. dispatch({
  120. type: 'taskUser/fetchUserList',
  121. payload: { project_id },
  122. });
  123. }
  124. console.log(order_type);
  125. switch (order_type) {
  126. // 工艺
  127. case 1:
  128. getCraftDetail({ project_id, work_id: order_id });
  129. break;
  130. // 维修
  131. case 2:
  132. getRepairDetail({ project_id, id: order_id });
  133. break;
  134. // 保养
  135. case 3:
  136. getMaintainDetail({ project_id, id: order_id });
  137. break;
  138. }
  139. }, []);
  140. return (
  141. <PageContent closeable={false}>
  142. <PageTitle returnable>工单详情</PageTitle>
  143. <div className={styles.selfCardBox}>
  144. <div className={styles.orderInfo}>
  145. <SubTitle
  146. title="工单信息"
  147. // @ts-ignore
  148. showStatus={orderInfo?.OrderStatus.value === 2}
  149. radius
  150. />
  151. <div style={{ padding: '15px' }}>
  152. <Row className={styles.rowMargin}>
  153. <Col className={styles.fontS26} span={16}>
  154. 派单时间:{orderInfo?.CreateTime || '-'}
  155. </Col>
  156. <Col className={styles.fontS26} span={8}>
  157. {/*// @ts-ignore*/}
  158. 工单负责人:{orderInfo?.Repairman?.CName || '-'}
  159. </Col>
  160. </Row>
  161. <Row className={styles.rowMargin}>
  162. <Col className={styles.fontS26} span={8}>
  163. {/*// @ts-ignore*/}
  164. 工单状态:{orderInfo?.OrderStatus?.label}
  165. </Col>
  166. <Col className={styles.fontS26} span={8}>
  167. {/*// @ts-ignore*/}
  168. 工单类型:
  169. {order_type === 1 ? '工艺' : order_type === 2 ? '维修' : '保养'}
  170. </Col>
  171. <Col className={styles.fontS26} span={8}>
  172. 派单人员:{orderInfo?.DispatchMan?.CName}
  173. </Col>
  174. </Row>
  175. {/*<Row className={styles.rowMargin}>*/}
  176. {/* <Col className={styles.fontS26}>*/}
  177. {/* 派单时间:{orderInfo?.CreateTime || '-'}*/}
  178. {/* </Col>*/}
  179. {/*</Row>*/}
  180. <Row className={styles.rowMargin}>
  181. <Col className={styles.fontS26}>
  182. 计划完成时间:{orderInfo?.PlanTime || '-'}
  183. </Col>
  184. </Row>
  185. <Row className={styles.rowMargin}>
  186. <Col className={styles.fontS26}>
  187. 实际完成时间:{orderInfo?.RepairTime || '-'}
  188. </Col>
  189. </Row>
  190. <Row>
  191. <Col className={styles.fontS26}>工单详情:</Col>
  192. <Col className={styles.fontS26} span={18}>
  193. {orderInfo?.Reason}
  194. {/*<Table />*/}
  195. </Col>
  196. </Row>
  197. </div>
  198. </div>
  199. {order_type === 3 && (
  200. <div>
  201. <SubTitle title="维修内容" />
  202. <div style={{ padding: '15px' }}>
  203. <Row className={styles.rowMargin} justify={'space-around'}>
  204. <Col className={styles.fontS26} span={8}>
  205. 是否润滑/加油:{orderInfo?.Lubrication === 1 ? '是' : '否'}
  206. </Col>
  207. <Col className={styles.fontS26} span={8}>
  208. 是否拆检:{orderInfo?.Check === 1 ? '是' : '否'}
  209. </Col>
  210. <Col className={styles.fontS26} span={8}>
  211. 是否清洁:{orderInfo?.Clean === 1 ? '是' : '否'}
  212. </Col>
  213. </Row>
  214. <Row justify={'space-around'}>
  215. <Col className={styles.fontS26} span={8}>
  216. 是否紧固:{orderInfo?.Fasten === 1 ? '是' : '否'}
  217. </Col>
  218. <Col className={styles.fontS26} span={8}>
  219. 是否除锈:{orderInfo?.AntiCorrosive === 1 ? '是' : '否'}
  220. </Col>
  221. <Col className={styles.fontS26} span={8}>
  222. 是否防腐:{orderInfo?.RustRemoval === 1 ? '是' : '否'}
  223. </Col>
  224. </Row>
  225. </div>
  226. </div>
  227. )}
  228. {/*<div>*/}
  229. {/* <SubTitle title="工单流程" />*/}
  230. {/* <div style={{ padding: '15px' }}>*/}
  231. {/* <Steps*/}
  232. {/* direction="vertical"*/}
  233. {/* style={{ fontSize: '14px' }}*/}
  234. {/* current={1}*/}
  235. {/* items={[*/}
  236. {/* {*/}
  237. {/* title: '工单已派遣至值班人员张**',*/}
  238. {/* description: '2023-08-02 13:23',*/}
  239. {/* },*/}
  240. {/* {*/}
  241. {/* title: '张**接收工单',*/}
  242. {/* description: '2023-08-02 13:23',*/}
  243. {/* },*/}
  244. {/* {*/}
  245. {/* title: '张**提交处理结果',*/}
  246. {/* description: '2023-08-02 13:23',*/}
  247. {/* },*/}
  248. {/* {*/}
  249. {/* title: '工单审批通过',*/}
  250. {/* description: '2023-08-02 13:23',*/}
  251. {/* },*/}
  252. {/* ]}*/}
  253. {/* />*/}
  254. {/* </div>*/}
  255. {/*</div>*/}
  256. </div>
  257. </PageContent>
  258. );
  259. };
  260. export default connect(({ taskUser }: any): { userList: IUserType[] } => {
  261. return {
  262. userList: taskUser.userList,
  263. };
  264. })(TaskOrder);