style: 微调样式

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

@@ -16,6 +16,7 @@ import { getMandateDetail } from '@/services/TaskManage';
 import { useLocation } from '@@/exports';
 import { connect, useRequest } from '@umijs/max';
 import { Col, Divider, Row } from 'antd';
+import moment from 'moment';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'umi';
 import styles from './taskDetail.less';
@@ -60,6 +61,7 @@ function TaskDetail(props: IPropsType) {
         ResponsiblePeople: userList.find(
           (item) => item.ID === result.data.ResponsiblePeople,
         ),
+        CreateTime: moment(result.data.CreateTime).format('YYYY-MM-DD HH:mm'),
       };
       const workOrder = result.data.Records;
       const tempOrder = workOrder.map((record: IWorkOrderType) => {
@@ -70,6 +72,7 @@ function TaskDetail(props: IPropsType) {
           ),
           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')
         };
       });
       setMandateDetail(tempMandate);
@@ -97,22 +100,22 @@ function TaskDetail(props: IPropsType) {
       <PageTitle returnable>任务详情</PageTitle>
       <div className={`${styles.cardContainer} card-box`}>
         <div className={styles.normalInfo}>
-          <Row className={styles.infoRow}>
-            <Col className={styles.fontS24} span={16}>
+          <Row className={styles.infoRow} justify='space-between'>
+            <Col className={styles.fontS24}>
               时间：{mandateDetail?.CreateTime}
             </Col>
             {/*// @ts-ignore*/}
-            <Col className={styles.fontS24} span={8}>
+            <Col className={styles.fontS24}>
               {/*//@ts-ignore*/}
               任务类别：{mandateDetail?.MandateClass?.label}
             </Col>
           </Row>
-          <Row>
-            <Col className={styles.fontS24} span={16}>
+          <Row justify='space-between'>
+            <Col className={styles.fontS24} >
               {/*//@ts-ignore*/}
               任务状态：{mandateDetail?.Status?.label}
             </Col>
-            <Col className={styles.fontS24} span={8}>
+            <Col className={styles.fontS24} >
               {/*// @ts-ignore*/}
               任务负责人：{mandateDetail?.ResponsiblePeople?.CName}
             </Col>

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

@@ -15,7 +15,7 @@
 
   .detailInfo {
     padding: 25px 15px;
-    border-bottom: 1px solid gray;
+    border-bottom: 1px solid rgba(0, 0, 0, 10%);
   }
 
   .relatedOrder {

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

@@ -17,8 +17,11 @@ import { connect, useLocation } from '@umijs/max';
 import TopFilter from '@/pages/TaskManage/components/TopFilter';
 import { IMandateType } from '@/pages/TaskManage/index.types';
 import { useNavigate } from '@@/exports';
+import { UpOutlined } from '@ant-design/icons';
 import { Col, Collapse, CollapseProps, Divider, List, Row, Spin } from 'antd';
-import React, { useEffect, useState } from 'react';
+
+import moment from 'moment';
+import { useEffect, useState } from 'react';
 import styles from './taskList.less';
 
 const TaskList: React.FC<IPropsType> = (props) => {
@@ -146,6 +149,7 @@ const TaskList: React.FC<IPropsType> = (props) => {
       ResponsiblePeople: userList.find(
         (user) => user.ID === item.ResponsiblePeople,
       ),
+      CreateTime: moment(item.CreateTime).format('YYYY-MM-DD HH:mm'),
     };
 
     const workOrder = item.Records.map((record) => {
@@ -155,6 +159,7 @@ const TaskList: React.FC<IPropsType> = (props) => {
         Status: OrderStatus.find((status) => status.value === record.Status),
         RecordType: OrderType.find((type) => type.value === record.RecordType),
         Responsible: userList.find((user) => user.ID === record.Responsible),
+        CreateTime: moment(record.CreateTime).format('YYYY-MM-DD HH:mm'),
       };
     });
 
@@ -208,17 +213,20 @@ const TaskList: React.FC<IPropsType> = (props) => {
       <List.Item>
         <div className={`${styles.cardContainer} card-box`}>
           <Row justify="space-between" style={{ marginBottom: '20px' }}>
-            <Col className={styles.fontS24}>时间：{formatItem.CreateTime}</Col>
+            <Col className={styles.fontS24}>时间:{formatItem.CreateTime}</Col>
             <Col className={styles.fontS24}>
-              任务类别：{formatItem.MandateClass?.label}
+              任务类别:{formatItem.MandateClass?.label}
             </Col>
             <Col className={styles.fontS24}>
-              任务负责人：{formatItem.ResponsiblePeople?.CName || '-'}
+              任务负责人:{formatItem.ResponsiblePeople?.CName || '-'}
             </Col>
           </Row>
           <Row
             justify="space-between"
-            style={{ paddingBottom: '10px', borderBottom: '1px solid gray' }}
+            style={{
+              paddingBottom: '10px',
+              borderBottom: '1px solid rgba(0,0,0,10%)',
+            }}
           >
             <Col className={styles.fontS24}>
               任务状态：{formatItem.Status?.label || '-'}
@@ -247,6 +255,12 @@ const TaskList: React.FC<IPropsType> = (props) => {
             <Collapse
               className={styles.collapseLabel}
               ghost
+              expandIcon={({ isActive }) => (
+                <UpOutlined
+                  style={{ color: '#5697e4' }}
+                  rotate={isActive ? 180 : 0}
+                />
+              )}
               items={collapseData}
             />
           </Row>

src/pages/TaskManage/components/TopFilter.tsx

@@ -1,7 +1,9 @@
 import { ITopFilter } from '@/pages/TaskManage/Detail/TaskList/taskList.types';
-import { Col,  Row, Select } from 'antd';
-import {  useState } from "react";
-import '../index.less'
+import { CaretDownFilled, CloseCircleFilled } from '@ant-design/icons';
+import { Col, Row, Select } from 'antd';
+
+import { useState } from 'react';
+import '../index.less';
 
 interface IProps {
   filters: ITopFilter[];
@@ -12,7 +14,7 @@ const TopFilter: React.FC<IProps> = ({ filters, onChange }) => {
   const [values, setValues] = useState<any[]>([]);
 
   return (
-    <Row justify="space-around" style={{marginTop:'30px'}}>
+    <Row justify="space-around" style={{ marginTop: '30px' }}>
       {filters.map((item, index) => {
         return (
           <Col
@@ -21,11 +23,31 @@ const TopFilter: React.FC<IProps> = ({ filters, onChange }) => {
             style={{ textAlign: 'center' }}
           >
             <Select
-              className='antdSelect'
+              className="antdSelect"
               size="large"
               bordered={false}
               placeholder={item.placeholder}
               options={item.options}
+              popupMatchSelectWidth={250}
+              suffixIcon={
+                values[index] === null || values.length === 0 ? (
+                  <CaretDownFilled
+                    style={{
+                      fontSize: '28px',
+                      color: 'black',
+                    }}
+                  />
+                ) : null
+              }
+              clearIcon={
+                <CloseCircleFilled
+                  style={{
+                    fontSize: '28px',
+                    color: 'black',
+                    paddingBottom:'20px'
+                  }}
+                />
+              }
               allowClear
               onChange={(value) => {
                 const temp = filters.map((f, i) => {
@@ -37,6 +59,17 @@ const TopFilter: React.FC<IProps> = ({ filters, onChange }) => {
                 setValues(temp);
                 onChange(temp);
               }}
+              onClear={() =>{
+
+                const temp = filters.map((f, i) => {
+                  if (index === i) {
+                    return null;
+                  }
+                  return values[i] || null;
+                });
+                setValues(temp);
+                onChange(temp);
+              }}
             />
           </Col>
         );

src/pages/TaskManage/index.less

@@ -6,6 +6,7 @@
     height: 12vh;
     box-shadow: 0 0 6px 3px rgba(0, 150, 255, 10%);
     border-radius: 10px;
+    background-color: #ffffff;
 
     .itemCount {
       display: flex;
@@ -23,21 +24,24 @@
   }
 }
 
+.ant-select-clear{
+  top: 32% !important;
+  opacity: 1!important;
+  transition: unset;
+  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
 {
   font-size: 28px;
-  width: 10rem;
-  text-align: center;
-}
-
-.antdSelect .ant-select-selection-placeholder{
-  color: rgba(0,0,0,0.75);
-}
-
-.ant-select-dropdown{
-  width: unset;
+  color: black;
+  margin-right: 10px;
 }
 
 .fontS28{