feat: 完成关闭工单

src/pages/Center/MyTask/Detail/TaskDetail.js

@@ -154,7 +154,7 @@ function TaskDetail(props) {
                   >
                     查看工单
                   </div>
-                  <div
+                  {/* <div
                     className={styles.rightButton}
                     style={{ color: '#5697e4' }}
                     onClick={() => {
@@ -170,7 +170,7 @@ function TaskDetail(props) {
                     }}
                   >
                     关闭工单
-                  </div>
+                  </div> */}
                 </div>
               </div>
             );

src/pages/Center/MyTask/List/TaskList.js

@@ -210,7 +210,7 @@ const MyTaskList = (props) => {
                 >
                   查看工单
                 </div>
-                <div
+                {/* <div
                   className={styles.rightButton}
                   style={{ color: '#5697e4' }}
                   onClick={() => {
@@ -222,7 +222,7 @@ const MyTaskList = (props) => {
                   }}
                 >
                   关闭工单
-                </div>
+                </div> */}
               </div>
             </div>
           );

src/pages/TaskManage/Detail/TaskDetail/TaskDetail.tsx

@@ -16,11 +16,26 @@ import {
   OrderStatus,
   OrderType,
 } from '@/pages/TaskManage/constent';
-import { getDiagnosticDetail, getMandateDetail } from '@/services/TaskManage';
+import {
+  getDiagnosticDetail,
+  getMandateDetail,
+  withdrawOrderRequest,
+} from '@/services/TaskManage';
 import { useLocation } from '@@/exports';
 import { UpOutlined } from '@ant-design/icons';
 import { connect, useRequest } from '@umijs/max';
-import { Col, Collapse, CollapseProps, Divider, Row, Table } from 'antd';
+import {
+  Col,
+  Collapse,
+  CollapseProps,
+  Divider,
+  Form,
+  Input,
+  Modal,
+  Row,
+  Table,
+  message,
+} from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
@@ -50,6 +65,9 @@ function TaskDetail(props: IPropsType) {
     CollapseProps['items']
   >([]);
   const [mandateTable, setMandateTable] = useState<IColumn[]>([]);
+  const [withdrawReason, setWithdrawReason] = useState('');
+  const [withdrawOrderOpen, setWithdrawOrderOpen] = useState(false);
+  const [clickedOrder, setClickedOrder] = useState({});
 
   const columnDef: ColumnsType<IColumn> = [
     {
@@ -156,24 +174,12 @@ function TaskDetail(props: IPropsType) {
                 <div className={styles.rightButtonContainer}>
                   <div
                     className={styles.rightButton}
-                    style={{ color: '#5697e4' }}
-                    onClick={() => {
-                      if (typeof record.RecordType === 'number') {
-                        return;
-                      }
-                      // @ts-ignore
-                      goTaskOrder(
-                        record.Id,
-                        record.RecordType?.value,
-                        tempMandate?.MandateClass.value,
-                      );
+                    style={{
+                      color: '#5697e4',
+                      marginBottom: `${
+                        record.Status.value === 0 ? '0.15rem' : '0'
+                      }`,
                     }}
-                  >
-                    查看工单
-                  </div>
-                  <div
-                    className={styles.rightButton}
-                    style={{ color: '#5697e4' }}
                     onClick={() => {
                       if (typeof record.RecordType === 'number') {
                         return;
@@ -186,8 +192,20 @@ function TaskDetail(props: IPropsType) {
                       );
                     }}
                   >
-                    关闭工单
+                    查看
                   </div>
+                  {record?.Status?.value === 0 && (
+                    <div
+                      className={styles.rightButton}
+                      style={{ color: '#5697e4' }}
+                      onClick={() => {
+                        setWithdrawOrderOpen(true);
+                        setClickedOrder(record);
+                      }}
+                    >
+                      关闭
+                    </div>
+                  )}
                 </div>
               </div>
             );
@@ -282,6 +300,24 @@ function TaskDetail(props: IPropsType) {
     );
   };
 
+  const withdrawOrderConfirm = async () => {
+    if (!withdrawReason) {
+      message.warning('请输入关闭理由');
+      return;
+    }
+    const res = await withdrawOrderRequest({
+      record_id: clickedOrder.Id,
+      note: withdrawReason,
+      type: clickedOrder.RecordType.value,
+    });
+    if (res.code === 200) {
+      message.success('关闭工单成功');
+      setClickedOrder({});
+      setWithdrawOrderOpen(false);
+      refreshDetail();
+    }
+  };
+
   return (
     <PageContent closeable={false}>
       <PageTitle returnable>任务详情</PageTitle>
@@ -411,6 +447,25 @@ function TaskDetail(props: IPropsType) {
           </div>
         </div>
       </div>
+      <Modal
+        className={styles.handleModal}
+        title="关闭工单"
+        open={withdrawOrderOpen}
+        onCancel={() => {
+          setWithdrawOrderOpen(false);
+        }}
+        onOk={withdrawOrderConfirm}
+      >
+        <Form>
+          <Form.Item label="关闭原因">
+            <Input
+              onChange={(e) => {
+                setWithdrawReason(e.target.value);
+              }}
+            />
+          </Form.Item>
+        </Form>
+      </Modal>
     </PageContent>
   );
 }

src/pages/TaskManage/Detail/TaskDetail/taskDetail.less

@@ -104,6 +104,52 @@
   }
 }
 
+.handleModal {
+  :global {
+    .ant-modal-close {
+      width: 0.36rem;
+      height: 0.36rem;
+    }
+    .ant-modal-close-x {
+      font-size: 0.36rem;
+      line-height: 0.36rem;
+    }
+    .ant-modal-title {
+      font-size: 0.28rem;
+    }
+    .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
+      height: 0.6rem;
+      padding-top: 0.15rem;
+    }
+    .ant-form-item .ant-form-item-label > label {
+      font-size: 0.28rem;
+      height: 0.6rem;
+    }
+    .ant-input {
+      font-size: 0.28rem;
+      height: 0.6rem;
+    }
+    .ant-btn {
+      font-size: 0.28rem;
+      height: 0.6rem;
+      width: 1.2rem;
+    }
+    .ant-checkbox {
+      .ant-checkbox-inner {
+        width: 0.28rem;
+        height: 0.28rem;
+      }
+      .ant-checkbox-inner:after {
+        height: 0.16rem;
+        width: 0.09rem;
+      }
+    }
+    .ant-picker {
+      height: 0.6rem;
+    }
+  }
+}
+
 .fontS28 {
   font-size: 0.28rem;
 }

src/pages/TaskManage/Detail/TaskList/TaskList.tsx

@@ -18,10 +18,21 @@ import TopFilter from '@/pages/TaskManage/components/TopFilter';
 import { IMandateType } from '@/pages/TaskManage/index.types';
 import { useNavigate } from '@@/exports';
 import { DownOutlined } from '@ant-design/icons';
-import { Col, Collapse, CollapseProps, Divider, List, Row } from 'antd';
+import {
+  Col,
+  Collapse,
+  CollapseProps,
+  Divider,
+  Form,
+  Input,
+  List,
+  Modal,
+  Row,
+  message,
+} from 'antd';
 
 import ScrollLoading from '@/components/ScrollLoading';
-import { getMandateList } from '@/services/TaskManage';
+import { getMandateList, withdrawOrderRequest } from '@/services/TaskManage';
 import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
 import styles from './taskList.less';
@@ -50,6 +61,9 @@ const TaskList: React.FC<IPropsType> = (props) => {
     total: 0,
     pageSize: 20,
   });
+  const [withdrawOrderOpen, setWithdrawOrderOpen] = useState(false);
+  const [clickedOrder, setClickedOrder] = useState({});
+  const [withdrawReason, setWithdrawReason] = useState('');
 
   const { run: getList, loading: loadData } = useRequest(getMandateList, {
     defaultParams: [currentParams],
@@ -151,6 +165,29 @@ const TaskList: React.FC<IPropsType> = (props) => {
     );
   };
 
+  const withdrawOrder = (order: any) => {
+    setWithdrawOrderOpen(true);
+    setClickedOrder(order);
+  };
+
+  const withdrawOrderConfirm = async () => {
+    if (!withdrawReason) {
+      message.warning('请输入关闭理由');
+      return;
+    }
+    const res = await withdrawOrderRequest({
+      record_id: clickedOrder.Id,
+      note: withdrawReason,
+      type: clickedOrder.RecordType.value,
+    });
+    if (res.code === 200) {
+      message.success('关闭工单成功');
+      setClickedOrder({});
+      setWithdrawOrderOpen(false);
+      getList(currentParams);
+    }
+  };
+
   const buildTaskList = (item: IMandateType) => {
     const formatItem = {
       ...item,
@@ -210,20 +247,12 @@ const TaskList: React.FC<IPropsType> = (props) => {
               <div className={styles.rightButtonContainer}>
                 <div
                   className={styles.rightButton}
-                  style={{ color: '#5697e4' }}
-                  onClick={() => {
-                    goTaskOrder(
-                      order.Id,
-                      order.RecordType?.value,
-                      item.MandateClass,
-                    );
+                  style={{
+                    color: '#5697e4',
+                    marginBottom: `${
+                      order.Status?.value === 0 ? '0.15rem' : '0'
+                    }`,
                   }}
-                >
-                  查看工单
-                </div>
-                <div
-                  className={styles.rightButton}
-                  style={{ color: '#5697e4' }}
                   onClick={() => {
                     goTaskOrder(
                       order.Id,
@@ -232,8 +261,19 @@ const TaskList: React.FC<IPropsType> = (props) => {
                     );
                   }}
                 >
-                  关闭工单
+                  查看
                 </div>
+                {order.Status?.value === 0 && (
+                  <div
+                    className={styles.rightButton}
+                    style={{ color: '#5697e4' }}
+                    onClick={() => {
+                      withdrawOrder(order);
+                    }}
+                  >
+                    关闭
+                  </div>
+                )}
               </div>
             </div>
           );
@@ -322,6 +362,25 @@ const TaskList: React.FC<IPropsType> = (props) => {
           renderItem={buildTaskList}
         />
       </ScrollLoading>
+      <Modal
+        className={styles.handleModal}
+        title="关闭工单"
+        open={withdrawOrderOpen}
+        onCancel={() => {
+          setWithdrawOrderOpen(false);
+        }}
+        onOk={withdrawOrderConfirm}
+      >
+        <Form>
+          <Form.Item label="关闭原因">
+            <Input
+              onChange={(e) => {
+                setWithdrawReason(e.target.value);
+              }}
+            />
+          </Form.Item>
+        </Form>
+      </Modal>
     </PageContent>
   );
 };

src/pages/TaskManage/Detail/TaskList/taskList.less

@@ -70,6 +70,52 @@
   }
 }
 
+.handleModal {
+  :global {
+    .ant-modal-close {
+      width: 0.36rem;
+      height: 0.36rem;
+    }
+    .ant-modal-close-x {
+      font-size: 0.36rem;
+      line-height: 0.36rem;
+    }
+    .ant-modal-title {
+      font-size: 0.28rem;
+    }
+    .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
+      height: 0.6rem;
+      padding-top: 0.15rem;
+    }
+    .ant-form-item .ant-form-item-label > label {
+      font-size: 0.28rem;
+      height: 0.6rem;
+    }
+    .ant-input {
+      font-size: 0.28rem;
+      height: 0.6rem;
+    }
+    .ant-btn {
+      font-size: 0.28rem;
+      height: 0.6rem;
+      width: 1.2rem;
+    }
+    .ant-checkbox {
+      .ant-checkbox-inner {
+        width: 0.28rem;
+        height: 0.28rem;
+      }
+      .ant-checkbox-inner:after {
+        height: 0.16rem;
+        width: 0.09rem;
+      }
+    }
+    .ant-picker {
+      height: 0.6rem;
+    }
+  }
+}
+
 .fontS28 {
   font-size: 0.28rem;
 }

src/pages/TaskManage/components/MandateDetail.js

@@ -260,12 +260,12 @@ const MandateDetail = (props) => {
               >
                 查看工单
               </div>
-              <div
+              {/* <div
                 className={styles.rightButton}
                 onClick={() => openWorkOrderModal(item)}
               >
                 关闭工单
-              </div>
+              </div> */}
             </div>
           </div>
         );

src/pages/TaskManage/constent.ts

@@ -186,6 +186,10 @@ export const OrderStatus = [
     value: 3,
     label: '已拒绝',
   },
+  {
+    value: 6,
+    label: '已关闭',
+  },
 ];
 
 export const RepairOrderStatus = [

src/services/TaskManage.js

@@ -260,6 +260,6 @@ export async function getPatrolMandateRecord(params) {
  * @param {number} body.type 工单类型 【1】:工艺工单,【2】:维修工单,【3】:保养工单 【4】:巡检工单 【5】:加药工单 【6】:备品备件 【7】:盘点工单
  * @returns
  */
-export async function withdrawOrderRequest(body) {
-  return request(`/api/v1/work_order/close`, 'POST', body);
+export async function withdrawOrderRequest(data) {
+  return request(`/api/v1/work_order/close`, { method: 'POST', data });
 }