style: 我的工单列表style

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

@@ -144,7 +144,7 @@ function TaskDetail(props) {
                         return;
                       }
                       // @ts-ignore
-                      goTaskOrder(
+                      goMyWorkOrder(
                         record.Id,
                         record.RecordType?.value,
                         tempMandate?.MandateClass.value,
@@ -250,9 +250,12 @@ function TaskDetail(props) {
     setMandateTable(dataSource);
   }, [mandateChild]);
 
-  const goTaskOrder = (orderID, orderType, mandateClass) => {
+  const goMyWorkOrder = (orderID, orderType, mandateClass) => {
+    if (orderType === undefined) {
+      return;
+    }
     navigate(
-      `/task-manage/list/order-detail?project_id=${project_id}&order_id=${orderID}&order_type=${orderType}&mandate_class=${mandateClass}`,
+      `/center/my-task/work-order-detail?project_id=${project_id}&order_id=${orderID}&order_type=${orderType}&mandate_class=${mandateClass}`,
     );
   };
 

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

@@ -12,7 +12,7 @@ import {
 } from '@/services/TaskManage';
 import { useLocation } from '@@/exports';
 import { connect, useRequest } from '@umijs/max';
-import { Col, Row, Steps } from 'antd';
+import { Col, Divider, Row, Steps } from 'antd';
 import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
 import styles from './workOrderDetail.less';
@@ -297,52 +297,57 @@ const WorkOrderDetail = (props) => {
       <PageTitle returnable>工单详情</PageTitle>
       <div className={styles.selfCardBox}>
         <div className={styles.orderInfo}>
-          <SubTitle
-            title="工单信息"
-            // @ts-ignore
-            showStatus={orderInfo?.OrderStatus.value === 2}
-            radius
-          />
+          <SubTitle title="工单信息" radius />
+
           <div style={{ padding: '0.15rem', letterSpacing: '0.015rem' }}>
-            <Row className={styles.rowMargin}>
-              <Col className={styles.fontS28} span={15}>
-                {/* @ts-ignore */}
-                工单类型：
-                {OrderType.find((item) => item.value === order_type)?.label ||
-                  '-'}
-              </Col>
-              <Col className={styles.fontS28} span={9}>
-                {/* @ts-ignore */}
-                工单负责人：{orderInfo?.Repairman?.CName || '-'}
-              </Col>
-            </Row>
-            <Row className={styles.rowMargin}>
-              <Col className={styles.fontS28} span={15}>
-                {/*  @ts-ignore */}
-                工单状态：{orderInfo?.OrderStatus?.label}
-              </Col>
-              <Col className={styles.fontS28} span={9}>
-                {/* @ts-ignore */}
-                派单人员：{orderInfo?.DispatchMan?.CName || '-'}
-              </Col>
-            </Row>
-            <Row className={styles.rowMargin}>
-              <Col className={styles.fontS28}>
-                派单时间：{orderInfo?.CreateTime || '-'}
-              </Col>
-            </Row>
-            <Row className={styles.rowMargin}>
-              <Col className={styles.fontS28}>
-                计划完成时间：{orderInfo?.PlanTime || '-'}
-              </Col>
-            </Row>
-            <Row className={styles.rowMargin}>
-              <Col className={styles.fontS28}>
-                实际完成时间：{orderInfo?.RepairTime || '-'}
+            <div
+              style={{
+                background: 'rgba(23, 85, 255, 0.06)',
+                padding: '0.2rem',
+                marginBottom: '0.2rem',
+              }}
+            >
+              <Row className={styles.rowMargin}>
+                <Col className={styles.fontS28} span={13}>
+                  {/* @ts-ignore */}
+                  工单类型：
+                  {OrderType.find((item) => item.value === order_type)?.label ||
+                    '-'}
+                </Col>
+                <Col className={styles.fontS28} span={9}>
+                  {/* @ts-ignore */}
+                  工单负责人：{orderInfo?.Repairman?.CName || '-'}
+                </Col>
+              </Row>
+              <Row className={styles.rowMargin}>
+                <Col className={styles.fontS28} span={13}>
+                  {/*  @ts-ignore */}
+                  工单状态：{orderInfo?.OrderStatus?.label}
+                </Col>
+                <Col className={styles.fontS28} span={9}>
+                  {/* @ts-ignore */}
+                  派单人员：{orderInfo?.DispatchMan?.CName || '-'}
+                </Col>
+              </Row>
+              <Row className={styles.rowMargin}>
+                <Col className={styles.fontS28}>
+                  派单时间：{orderInfo?.CreateTime || '-'}
+                </Col>
+              </Row>
+              <Row>
+                <Col className={styles.fontS28} span={13}>
+                  计划完成时间：{orderInfo?.PlanTime || '-'}
+                </Col>
+                <Col className={styles.fontS28}>
+                  实际完成时间：{orderInfo?.RepairTime || '-'}
+                </Col>
+              </Row>
+            </div>
+
+            <Row style={{ padding: '0 0.2rem' }}>
+              <Col className={styles.fontS28} style={{ fontWeight: '600' }}>
+                工单详情：
               </Col>
-            </Row>
-            <Row>
-              <Col className={styles.fontS28}>工单详情：</Col>
               <Col className={styles.fontS28} span={18}>
                 {orderInfo?.Reason}
               </Col>
@@ -361,28 +366,35 @@ const WorkOrderDetail = (props) => {
           <div>
             <SubTitle title="维修内容" />
             <div style={{ padding: '0.15rem' }}>
-              <Row className={styles.rowMargin} justify={'space-around'}>
-                <Col className={styles.fontS28} span={8}>
-                  是否润滑/加油：{orderInfo?.Lubrication === 1 ? '是' : '否'}
-                </Col>
-                <Col className={styles.fontS28} span={8}>
-                  是否拆检：{orderInfo?.Check === 1 ? '是' : '否'}
-                </Col>
-                <Col className={styles.fontS28} span={8}>
-                  是否清洁：{orderInfo?.Clean === 1 ? '是' : '否'}
-                </Col>
-              </Row>
-              <Row justify={'space-around'}>
-                <Col className={styles.fontS28} span={8}>
-                  是否紧固：{orderInfo?.Fasten === 1 ? '是' : '否'}
-                </Col>
-                <Col className={styles.fontS28} span={8}>
-                  是否除锈：{orderInfo?.AntiCorrosive === 1 ? '是' : '否'}
-                </Col>
-                <Col className={styles.fontS28} span={8}>
-                  是否防腐：{orderInfo?.RustRemoval === 1 ? '是' : '否'}
-                </Col>
-              </Row>
+              <div
+                style={{
+                  padding: '0.15rem 0.2rem',
+                  background: 'rgba(23, 85, 255, 0.06)',
+                }}
+              >
+                <Row className={styles.rowMargin} justify={'space-around'}>
+                  <Col className={styles.fontS28} span={8}>
+                    是否润滑/加油：{orderInfo?.Lubrication === 1 ? '是' : '否'}
+                  </Col>
+                  <Col className={styles.fontS28} span={8}>
+                    是否拆检：{orderInfo?.Check === 1 ? '是' : '否'}
+                  </Col>
+                  <Col className={styles.fontS28} span={8}>
+                    是否清洁：{orderInfo?.Clean === 1 ? '是' : '否'}
+                  </Col>
+                </Row>
+                <Row justify={'space-around'}>
+                  <Col className={styles.fontS28} span={8}>
+                    是否紧固：{orderInfo?.Fasten === 1 ? '是' : '否'}
+                  </Col>
+                  <Col className={styles.fontS28} span={8}>
+                    是否除锈：{orderInfo?.AntiCorrosive === 1 ? '是' : '否'}
+                  </Col>
+                  <Col className={styles.fontS28} span={8}>
+                    是否防腐：{orderInfo?.RustRemoval === 1 ? '是' : '否'}
+                  </Col>
+                </Row>
+              </div>
             </div>
           </div>
         )}
@@ -391,7 +403,12 @@ const WorkOrderDetail = (props) => {
           <div>
             <SubTitle title="加药详情" />
             <div style={{ padding: '0.15rem' }}>
-              <Row>
+              <Row
+                style={{
+                  padding: '0.15rem 0.2rem',
+                  background: 'rgba(23, 85, 255, 0.06)',
+                }}
+              >
                 <Col className={styles.fontS28} span={8}>
                   药剂名称：{additionalInfo?.name || '-'}
                 </Col>
@@ -409,6 +426,16 @@ const WorkOrderDetail = (props) => {
         {stepInfo?.length > 0 && (
           <div>
             <SubTitle title="工单流程" />
+            <Divider
+              type="horizontal"
+              style={{
+                height: '0.02rem',
+                margin: 0,
+                padding: 0,
+                color: 'rgba(23, 85, 255, 0.50)',
+                background: 'rgba(23, 85, 255, 0.50)',
+              }}
+            />
             <div style={{ padding: '0.15rem 0.2rem' }}>
               <Steps
                 direction="vertical"

src/pages/Center/MyTask/Detail/workOrderDetail.less

@@ -1,7 +1,7 @@
 .selfCardBox {
   margin-top: 0.15rem;
+  margin-left: 0.15rem;
   border-radius: 0.08rem;
-  box-shadow: 0.02rem 0 0.08rem 0 rgba(0, 0, 0, 30%);
   background-color: white;
 }
 

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

@@ -52,26 +52,38 @@ const WorkOrderList = (props) => {
           key={workOrder.id || workOrder.Id}
           className={styles.workOrderCard}
         >
-          <Row justify="space-between" style={{ marginBottom: '0.2rem' }}>
-            <Col className={styles.fontS24}>{workOrder?.CreateTime}</Col>
-            <Col className={styles.fontS24}>
-              工单负责人：{workOrder?.Repairman?.CName || '-'}
-            </Col>
-          </Row>
-          <Row justify="space-between">
-            <Col className={styles.fontS24}>
-              工单状态：{workOrder?.OrderStatus?.label}
-            </Col>
-            <Col className={styles.detailBtnContainer}>
-              <Button
-                type="primary"
-                style={{ height: '0.4rem', fontSize: '0.24rem' }}
-                onClick={() => goWorkOrderDetail(workOrder)}
-              >
-                工单详情
-              </Button>
-            </Col>
-          </Row>
+          <span
+            style={{
+              margin: '-0.2rem',
+              position: 'absolute',
+              height: '1.37rem',
+              width: '0.2rem',
+              background: 'rgba(23, 85, 255, 0.20)',
+            }}
+          ></span>
+          <div style={{ marginLeft: '0.1rem' }}>
+            <Row justify="space-between" style={{ marginBottom: '0.2rem' }}>
+              <Col className={styles.fontS24}>{workOrder?.CreateTime}</Col>
+              <Col className={styles.fontS24}>
+                工单负责人：{workOrder?.Repairman?.CName || '-'}
+              </Col>
+            </Row>
+            <Row justify="space-between">
+              <Col className={styles.fontS24}>
+                工单状态：{workOrder?.OrderStatus?.label}
+              </Col>
+              <Col className={styles.detailBtnContainer}>
+                <Button
+                  type="primary"
+                  style={{ height: '0.45rem', fontSize: '0.24rem' }}
+                  onClick={() => goWorkOrderDetail(workOrder)}
+                  shape="round"
+                >
+                  工单详情
+                </Button>
+              </Col>
+            </Row>
+          </div>
         </div>
       );
     });

src/pages/Center/MyTask/List/WorkOrderList.less

@@ -1,21 +1,32 @@
 .identifyTab :global {
+  .ant-tabs-nav {
+    margin: 0;
+  }
+
+  .ant-tabs-nav .ant-tabs-tab {
+    padding: 0.16rem 0;
+  }
+
   .ant-tabs-nav-list {
     justify-content: space-around;
     width: 100%;
     .ant-tabs-tab-btn {
       font-size: 0.24rem;
+      font-weight: 600;
     }
   }
 }
 
 .workOrderCard {
+  height: 1.37rem;
   background-color: white;
   padding: 0.2rem;
   margin-top: 0.2rem;
   margin-bottom: 0.1rem;
   margin-left: 0.05rem;
-  border-radius: 0.1rem;
+  margin-right: 0.2rem;
   box-shadow: 0rem 0rem 0.08rem 0.02rem rgba(191, 191, 191, 0.2);
+  position: relative;
 }
 
 .detailBtnContainer {
@@ -24,6 +35,13 @@
   align-items: center;
 }
 
+.loadMoreBtn {
+  margin: 0.2rem 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .fontS24 {
   font-size: 0.24rem;
 }

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

@@ -328,12 +328,7 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
       <PageTitle returnable>工单详情</PageTitle>
       <div className={styles.selfCardBox}>
         <div className={styles.orderInfo}>
-          <SubTitle
-            title="工单信息"
-            // @ts-ignore
-            // showStatus={orderInfo?.OrderStatus.value === 2}
-            radius
-          />
+          <SubTitle title="工单信息" radius />
           <div style={{ padding: '0.15rem', letterSpacing: '0.015rem' }}>
             <div
               style={{