style: 微调样式

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

@@ -14,8 +14,9 @@ import {
 } from '@/pages/TaskManage/constent';
 import { getMandateDetail } from '@/services/TaskManage';
 import { useLocation } from '@@/exports';
+import { UpOutlined } from '@ant-design/icons';
 import { connect, useRequest } from '@umijs/max';
-import { Col, Divider, Row } from 'antd';
+import { Col, Collapse, CollapseProps, Divider, Row } from 'antd';
 import moment from 'moment';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'umi';
@@ -37,9 +38,9 @@ function TaskDetail(props: IPropsType) {
   const navigate = useNavigate();
 
   const [mandateDetail, setMandateDetail] = useState<IMandateDetailType>();
-  const [handledWorkOrder, setHandledWorkOrder] = useState<IWorkOrderType[]>(
-    [],
-  );
+  const [handledWorkOrder, setHandledWorkOrder] = useState<
+    CollapseProps['items']
+  >([]);
 
   const { refresh: refreshDetail } = useRequest(getMandateDetail, {
     defaultParams: [
@@ -63,18 +64,63 @@ function TaskDetail(props: IPropsType) {
         ),
         CreateTime: moment(result.data.CreateTime).format('YYYY-MM-DD HH:mm'),
       };
-      const workOrder = result.data.Records;
-      const tempOrder = workOrder.map((record: IWorkOrderType) => {
+      const workOrder = result.data.Records.map((item: IWorkOrderType) => {
         return {
-          ...record,
-          RecordType: OrderType.find(
-            (item) => item.value === record.RecordType,
-          ),
-          Status: OrderStatus.find((item) => item.value === record.Status),
-          Responsible: userList.find((item) => item.ID === record.Responsible),
-          CreateTime: moment(record.CreateTime).format('YYYY-MM-DD HH:mm')
+          ...item,
+          CreateTime: moment(item.CreateTime).format('YYYY-MM-DD HH:mm'),
+          Status: OrderStatus.find((status) => status.value === item.Status),
+          RecordType: OrderType.find((type) => type.value === item.RecordType),
+          Responsible: userList.find((user) => user.ID === item.Responsible),
         };
       });
+      const tempOrder = [
+        {
+          key: '1',
+          label: (
+            <span style={{ color: '#5697e4' }}>
+              关联工单({workOrder.length})
+            </span>
+          ),
+          children: workOrder.map((record: IWorkOrderType) => {
+            return (
+              <div key={record.Id} className={styles.workOrderCard}>
+                <div className={styles.leftInfo}>
+                  <Row style={{ marginBottom: '15px' }}>
+                    <Col className={styles.fontS24} span={12}>
+                      工单编号：{record.Id}
+                    </Col>
+                    <Col className={styles.fontS24} span={12}>
+                      时间：{record.CreateTime}
+                    </Col>
+                  </Row>
+                  <Row>
+                    <Col className={styles.fontS24} span={12}>
+                      工单状态：
+                      <span style={{ color: '#5697e4' }}>
+                        {record.Status?.label}
+                      </span>
+                    </Col>
+                    <Col className={styles.fontS24} span={12}>
+                      工单负责人：{record.Responsible?.CName}
+                    </Col>
+                  </Row>
+                </div>
+                <Divider type="vertical" style={{ height: '40px' }} />
+                <div
+                  className={styles.rightButton}
+                  style={{ color: '#5697e4' }}
+                  onClick={() => {
+                    goTaskOrder(record.Id, record.RecordType?.value);
+                  }}
+                >
+                  查看工单
+                </div>
+              </div>
+            );
+          }),
+        },
+      ];
+
       setMandateDetail(tempMandate);
       setHandledWorkOrder(tempOrder);
     },
@@ -100,7 +146,7 @@ function TaskDetail(props: IPropsType) {
       <PageTitle returnable>任务详情</PageTitle>
       <div className={`${styles.cardContainer} card-box`}>
         <div className={styles.normalInfo}>
-          <Row className={styles.infoRow} justify='space-between'>
+          <Row className={styles.infoRow} justify="space-between">
             <Col className={styles.fontS24}>
               时间：{mandateDetail?.CreateTime}
             </Col>
@@ -110,12 +156,12 @@ function TaskDetail(props: IPropsType) {
               任务类别：{mandateDetail?.MandateClass?.label}
             </Col>
           </Row>
-          <Row justify='space-between'>
-            <Col className={styles.fontS24} >
+          <Row justify="space-between">
+            <Col className={styles.fontS24}>
               {/*//@ts-ignore*/}
               任务状态：{mandateDetail?.Status?.label}
             </Col>
-            <Col className={styles.fontS24} >
+            <Col className={styles.fontS24}>
               {/*// @ts-ignore*/}
               任务负责人：{mandateDetail?.ResponsiblePeople?.CName}
             </Col>
@@ -139,52 +185,17 @@ function TaskDetail(props: IPropsType) {
           </Row>
         </div>
         <div className={styles.relatedOrder}>
-          <div
-            className={styles.fontS28}
-            style={{ marginLeft: '5px', marginBottom: '25px' }}
-          >
-            关联工单
-          </div>
-          {handledWorkOrder.map((order) => {
-            return (
-              <div key={order.Id} className={styles.workOrderCard}>
-                <div className={styles.leftInfo}>
-                  <Row className={styles.infoRow}>
-                    <Col className={styles.fontS24} span={12}>
-                      工单编号：{order.Id}
-                    </Col>
-                    <Col className={styles.fontS24} span={12}>
-                      时间：{order.CreateTime}
-                    </Col>
-                  </Row>
-                  <Row>
-                    <Col className={styles.fontS24} span={12}>
-                      工单状态：
-                      <span style={{ color: '#5697e4' }}>
-                        {/*// @ts-ignore*/}
-                        {order.Status?.label}
-                      </span>
-                    </Col>
-                    <Col className={styles.fontS24} span={12}>
-                      {/*// @ts-ignore*/}
-                      工单负责人：{order.Responsible?.CName}
-                    </Col>
-                  </Row>
-                </div>
-                <Divider type="vertical" style={{ height: '40px' }} />
-                <div
-                  className={styles.rightButton}
-                  style={{ color: '#5697e4' }}
-                  onClick={() => {
-                    // @ts-ignore
-                    goTaskOrder(order.Id, order.RecordType?.value);
-                  }}
-                >
-                  查看工单
-                </div>
-              </div>
-            );
-          })}
+          <Collapse
+            className={styles.collapseLabel}
+            ghost
+            expandIcon={({ isActive }) => (
+              <UpOutlined
+                style={{ color: '#5697e4' }}
+                rotate={isActive ? 180 : 0}
+              />
+            )}
+            items={handledWorkOrder}
+          />
         </div>
       </div>
     </PageContent>

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

@@ -21,6 +21,61 @@
   .relatedOrder {
     padding: 0 15px;
     margin-top: 15px;
+
+    .collapseLabel {
+      width: 100%;
+
+      .ant-collapse-arrow {
+        font-size: 24px;
+      }
+
+      :global {
+        .ant-collapse-item {
+          margin-bottom: 0;
+        }
+
+        .ant-collapse-header {
+          justify-content: center;
+          flex-direction: row-reverse;
+          align-items: center;
+          margin-top: 10px;
+
+          .ant-collapse-header-text {
+            font-size: 24px;
+            flex: unset;
+            margin-inline-end: unset;
+          }
+
+          .ant-collapse-arrow {
+            font-size: 24px;
+          }
+        }
+      }
+
+      .workOrderCard {
+        margin-bottom: 20px;
+        padding: 20px 10px;
+        border-radius: 8px;
+        background-color: #e5effa;
+        display: flex;
+        align-items: center;
+
+        .leftInfo {
+          width: 80%;
+        }
+
+        .rightButton {
+          flex: auto;
+          color: #5697e4;
+          font-size: 24px;
+          text-align: center;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+    }
+
   }
 
   .workOrderCard {

src/pages/TaskManage/Detail/TaskOrder/TaskOrder.tsx

@@ -152,14 +152,17 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
                 工单负责人：{orderInfo?.Repairman?.CName || '-'}
               </Col>
             </Row>
-            <Row className={styles.rowMargin}>
-              <Col className={styles.fontS24} span={16}>
+            <Row className={styles.rowMargin} >
+              <Col className={styles.fontS24} span={8}>
                 {/*// @ts-ignore*/}
                 工单状态：{orderInfo?.OrderStatus?.label}
               </Col>
               <Col className={styles.fontS24} span={8}>
-                派单人员：{'-'}
+                {/*// @ts-ignore*/}
+                工单类型：
+                {order_type === 1 ? '工艺' : order_type === 2 ? '维修' : '保养'}
               </Col>
+              <Col className={styles.fontS24} span={8}>派单人员：{'-'}</Col>
             </Row>
             <Row className={styles.rowMargin}>
               <Col className={styles.fontS24}>
@@ -189,7 +192,7 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
           <div>
             <SubTitle title="维修内容" />
             <div style={{ padding: '15px' }}>
-              <Row className={styles.rowMargin} justify={"space-between"}>
+              <Row className={styles.rowMargin} justify={'space-between'}>
                 <Col className={styles.fontS24}>
                   是否润滑/加油：{orderInfo?.Lubrication === 1 ? '是' : '否'}
                 </Col>

src/pages/TaskManage/Detail/TaskOrder/taskOrder.less

@@ -11,7 +11,7 @@
 }
 
 .rowMargin {
-  margin-bottom: 15px;
+  margin-bottom: 30px;
 }
 
 .fontS28 {

src/pages/TaskManage/index.less

@@ -31,10 +31,6 @@
   padding-left: 10px;
 }
 
-.ant-select:hover .ant-select-clear{
-  opacity: 0;
-}
-
 .antdSelect .ant-select-selection-item,
 .antdSelect .ant-select-selection-placeholder,
 .ant-select-item-option-content