fix: 任务列表未分页问题修复

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

@@ -142,7 +142,7 @@ function TaskDetail(props: IPropsType) {
   };
 
   return (
-    <PageContent>
+    <PageContent closeable={false}>
       <PageTitle returnable>任务详情</PageTitle>
       <div className={`${styles.cardContainer} card-box`}>
         <div className={styles.normalInfo}>

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

@@ -12,22 +12,32 @@ import {
   OrderStatus,
   OrderType,
 } from '@/pages/TaskManage/constent';
-import { connect, useLocation } from '@umijs/max';
+import { connect, useLocation, useRequest } 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 {
+  Button,
+  Col,
+  Collapse,
+  CollapseProps,
+  Divider,
+  List,
+  Row,
+  Spin,
+} from 'antd';
 
+import { getMandateList } from '@/services/TaskManage';
 import moment from 'moment';
 import { useEffect, useState } from 'react';
 import styles from './taskList.less';
 
 const TaskList: React.FC<IPropsType> = (props) => {
-  const { userList, mandateList, loading, dispatch } = props;
-  // const md5 = require('md5');
+  const { userList, loading, dispatch } = props;
   const location = useLocation();
+
   const queryParams = new URLSearchParams(location.search);
   const project_id = Number(queryParams.get('project_id'));
   const mandateType = Number(queryParams.get('mandateType'));
@@ -35,36 +45,42 @@ const TaskList: React.FC<IPropsType> = (props) => {
   const navigate = useNavigate();
 
   // 用于展示的任务列表
-  const [mandateListShow, setMandateListShow] = useState<IMandateType[]>([
-    ...mandateList.filter((item) => item.MandateType === mandateType),
-  ]);
+  const [mandateListShow, setMandateListShow] = useState<IMandateType[]>([]);
   // 顶部选择器配置
-  const [topFilters, setTopFilters] = useState<ITopFilter[]>([]);
+  const [topFiltersConfig, setTopFiltersConfig] = useState<ITopFilter[]>([]);
+  const [mandateList, setMandateList] = useState<IMandateType[]>([]);
+  const [mandatePage, setMandatePage] = useState({
+    pageSize: 20,
+    total: 0,
+    current: 1,
+  });
+  const [currentParams, setCurrentParams] = useState({
+    project_id,
+    mandate_type: mandateType,
+    pageSize: 20,
+    currentPage: 2,
+  });
 
-  /**
-   * 处理选择器变化
-   * @param value 选择的值，当清空时等于null
-   */
-  const onTopFilterChange = (value: any) => {
-    if (topFilters.length === 0) {
-      return;
-    }
-    let tempList = mandateList.filter(
-      (item) => item.MandateType === mandateType,
-    );
-
-    for (let i = 0; i < value.length; i++) {
-      if (value[i] !== null) {
-        tempList = tempList.filter(
-          // @ts-ignore
-          (item) => item[topFilters[i].key] === value[i],
-        );
-        console.log(tempList.length);
+  const { run: getList, loading: loadData } = useRequest(getMandateList, {
+    defaultParams: [
+      {
+        project_id,
+        mandate_type: mandateType,
+        pageSize: mandatePage.pageSize,
+        currentPage: mandatePage.current,
+      },
+    ],
+    formatResult: (result) => {
+      if (result.data.pagination.current === 1) {
+        setMandateList(result.data.list);
+      } else {
+        setMandateList([...mandateList, ...result.data.list]);
       }
-    }
-
-    setMandateListShow(tempList);
-  };
+      const pageInfo = result.data.pagination;
+      pageInfo.current += 1;
+      setMandatePage(pageInfo);
+    },
+  });
 
   // 获取用户
   useEffect(() => {
@@ -74,26 +90,19 @@ const TaskList: React.FC<IPropsType> = (props) => {
         payload: { project_id },
       });
     }
-    if (mandateList.length === 0) {
-      dispatch({
-        type: 'mandate/fetchMandateList',
-        payload: { project_id, mandate_type: mandateType, pageSize: 9999 },
-      });
-    }
   }, []);
 
-  // 获取列表
+  // 首次获取任务数据
+
   useEffect(() => {
-    setMandateListShow(
-      mandateList.filter((item) => item.MandateType === mandateType),
-    );
+    setMandateListShow(mandateList);
   }, [mandateList]);
 
-  // 顶部下拉过滤器
+  // 顶部下拉过滤器配置
   useEffect(() => {
     const filters: ITopFilter[] = [];
     filters.push({
-      key: 'MandateClass',
+      key: 'mandate_class',
       placeholder: '任务类别',
       // @ts-ignore
       options: MandateClass.map((item) => {
@@ -109,7 +118,7 @@ const TaskList: React.FC<IPropsType> = (props) => {
     });
 
     filters.push({
-      key: 'Status',
+      key: 'status',
       placeholder: '任务状态',
       options: MandateStatus.map((item) => {
         return {
@@ -117,12 +126,55 @@ const TaskList: React.FC<IPropsType> = (props) => {
         };
       }),
     });
-    setTopFilters(filters);
-    setMandateListShow(
-      mandateList.filter((item) => item.MandateType === mandateType),
-    );
+    setTopFiltersConfig(filters);
+    // setMandateListShow(
+    //   mandateList.filter((item) => item.MandateType === mandateType),
+    // );
   }, [mandateType]);
 
+  /**
+   * 处理选择器变化
+   * @param value 选择的值，当清空时等于null
+   */
+  const onTopFilterChange = (value: any) => {
+    if (topFiltersConfig.length === 0) {
+      return;
+    }
+    const params: any = {
+      project_id,
+      mandate_type: mandateType,
+      pageSize: mandatePage.pageSize,
+      currentPage: 1,
+    };
+    for (let i = 0; i < value.length; i++) {
+      if (value[i] !== null && topFiltersConfig[i] !== undefined) {
+        params[topFiltersConfig[i].key] = value[i];
+      }
+    }
+    getList(params);
+    params.currentPage += 1;
+    setCurrentParams(params);
+  };
+
+  const loadMoreMandate = !loadData ? (
+    <div
+      style={{
+        textAlign: 'center',
+        marginTop: 12,
+        height: 32,
+        lineHeight: '32px',
+      }}
+    >
+      <Button
+        onClick={() => {
+          getList(currentParams);
+        }}
+      >
+        加载更多
+      </Button>
+    </div>
+  ) : null;
+
   const goTaskDetail = (mandate: IMandateType) => {
     navigate(
       `/task-manage/list/detail?project_id=${project_id}&mandate_id=${mandate.Id}`,
@@ -270,22 +322,22 @@ const TaskList: React.FC<IPropsType> = (props) => {
   };
 
   return (
-    <PageContent>
+    <PageContent closeable={false}>
       <PageTitle returnable>
         {MandateType.find((item) => item.value === mandateType)?.label}
       </PageTitle>
-      <TopFilter filters={topFilters} onChange={onTopFilterChange} />
-      <Spin spinning={loading}>
+      <TopFilter filters={topFiltersConfig} onChange={onTopFilterChange} />
+      <Spin spinning={loading || loadData}>
         <List
           itemLayout="horizontal"
           dataSource={mandateListShow}
           renderItem={buildTaskList}
+          loadMore={loadMoreMandate}
         />
       </Spin>
     </PageContent>
   );
 };
-
 export default connect(
   ({
     taskUser,
@@ -293,13 +345,11 @@ export default connect(
     loading,
   }: any): {
     userList: IUserType[];
-    mandateList: IMandateType[];
     loading: boolean;
   } => {
     return {
       userList: taskUser.userList,
-      mandateList: mandate.mandateList,
-      loading: loading.models['taskUser'] || loading.models['mandate'],
+      loading: loading.models['taskUser'],
     };
   },
 )(TaskList);

src/pages/TaskManage/Detail/TaskList/taskList.types.ts

@@ -3,7 +3,6 @@ import { DefaultOptionType } from 'rc-select/es/Select';
 
 export interface IPropsType {
   userList: IUserType[];
-  mandateList: IMandateType[];
   loading: boolean;
   dispatch: (args: { type: string; payload: object }) => {};
 }
@@ -59,7 +58,7 @@ export interface IUserType {
 }
 
 export interface ITopFilter {
-  key?: string;
+  key: string;
   placeholder: string;
   options: { label: string | number; value: any }[];
 }

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

@@ -132,7 +132,7 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
   }, []);
 
   return (
-    <PageContent>
+    <PageContent closeable={false}>
       <PageTitle returnable>工单详情</PageTitle>
       <div className={styles.selfCardBox}>
         <div className={styles.orderInfo}>

src/pages/TaskManage/components/TopFilter.tsx

@@ -11,7 +11,9 @@ interface IProps {
 }
 
 const TopFilter: React.FC<IProps> = ({ filters, onChange }) => {
-  const [values, setValues] = useState<any[]>([]);
+  const [values, setValues] = useState<any[]>(
+    new Array(filters.length).fill(undefined),
+  );
 
   return (
     <Row justify="space-around" style={{ marginTop: '30px' }}>
@@ -30,7 +32,7 @@ const TopFilter: React.FC<IProps> = ({ filters, onChange }) => {
               options={item.options}
               popupMatchSelectWidth={250}
               suffixIcon={
-                values[index] === null || values.length === 0 ? (
+                values[index]===null || values[index]===undefined ? (
                   <CaretDownFilled
                     style={{
                       fontSize: '28px',
@@ -44,7 +46,7 @@ const TopFilter: React.FC<IProps> = ({ filters, onChange }) => {
                   style={{
                     fontSize: '28px',
                     color: 'black',
-                    paddingBottom:'20px'
+                    paddingBottom: '20px',
                   }}
                 />
               }
@@ -59,13 +61,12 @@ const TopFilter: React.FC<IProps> = ({ filters, onChange }) => {
                 setValues(temp);
                 onChange(temp);
               }}
-              onClear={() =>{
-
+              onClear={() => {
                 const temp = filters.map((f, i) => {
                   if (index === i) {
                     return null;
                   }
-                  return values[i] || null;
+                  return values[i];
                 });
                 setValues(temp);
                 onChange(temp);

src/pages/TaskManage/constent.ts

@@ -83,12 +83,6 @@ export const MandateClass = [
     MandateType: 3,
     OrderType: 2,
   },
-  {
-    value: 14,
-    label: '数据超限',
-    MandateType: 3,
-    OrderType: 2,
-  },
   {
     value: 15,
     label: '备品预警',

src/pages/TaskManage/index.less

@@ -3,7 +3,7 @@
 
   .listItem {
     margin: 20px 20px 20px 0;
-    height: 12vh;
+    height: 16vh;
     box-shadow: 0 0 6px 3px rgba(0, 150, 255, 10%);
     border-radius: 10px;
     background-color: #ffffff;

src/pages/TaskManage/index.tsx

@@ -2,40 +2,52 @@ import PageContent from '@/components/PageContent';
 import PageTitle from '@/components/PageTitle';
 import { MandateType } from '@/pages/TaskManage/constent';
 import styles from '@/pages/TaskManage/index.less';
-import { IMandateType, IPropTypes } from '@/pages/TaskManage/index.types';
+import { getMandateList } from '@/services/TaskManage';
 import { RightOutlined } from '@ant-design/icons';
-import { connect, useParams } from '@umijs/max';
-import { List, Spin } from 'antd';
+import { useParams } from '@umijs/max';
+import { List, Spin } from "antd";
 import { BaseOptionType } from 'rc-select/es/Select';
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'umi';
 
-const TaskManage: React.FC<IPropTypes> = (props) => {
-  const { mandateList, loading, dispatch } = props;
+const TaskManage = () => {
   const { projectID } = useParams();
   const project_id = Number(projectID === '' ? '0' : projectID);
-
   const navigate = useNavigate();
-  const [mandateCount, setMandateCount] = useState<number[]>([0, 0, 0]);
 
-  useEffect(() => {
-    if (mandateList.length === 0) {
-      dispatch({
-        type: 'mandate/fetchMandateList',
-        payload: { project_id, pageSize: 9999 },
-      });
-    }
-  }, []);
+  const [mandateCount, setMandateCount] = useState<number[]>([0, 0, 0]);
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
-    const typeCount = [];
+    const requests = [];
     for (let i = 0; i < 3; i++) {
-      typeCount[i] = mandateList.filter(
-        (item: IMandateType) => item.MandateType === i + 1,
-      ).length;
+      requests.push(
+        getMandateList({
+          project_id,
+          pageSize: 1,
+          currentPage: 1,
+          mandate_type: i + 1,
+        }),
+      );
     }
-    setMandateCount(typeCount);
-  }, [mandateList]);
+    setLoading(true)
+    Promise.all(requests)
+      .then((resList) => {
+        if (resList.filter((item) => item.code !== 200).length) {
+          throw new Error('请求错误');
+        }
+        const typeCount = [0, 0, 0];
+        resList.forEach((item, index) => {
+          typeCount[index] = item.data.pagination?.total;
+        });
+        setMandateCount(typeCount);
+      })
+      .catch((err) => {
+        console.log(err);
+      }).finally(()=>{
+        setLoading(false)
+    });
+  }, []);
 
   const goTaskList = (item: number) => {
     navigate(`/task-manage/list?project_id=${project_id}&mandateType=${item}`);
@@ -49,7 +61,9 @@ const TaskManage: React.FC<IPropTypes> = (props) => {
           goTaskList(item.value);
         }}
       >
-        <List.Item.Meta title={<span className={styles.fontS28}>{item.label}</span>} />
+        <List.Item.Meta
+          title={<span className={styles.fontS28}>{item.label}</span>}
+        />
         <div className={styles.itemCount}>
           <div className={styles.countNumber}>{mandateCount[index]}</div>
           <div className={styles.fontS22}>任务数量</div>
@@ -61,7 +75,7 @@ const TaskManage: React.FC<IPropTypes> = (props) => {
 
   return (
     <PageContent>
-      <PageTitle>任务管理</PageTitle>
+      <PageTitle clo>任务管理</PageTitle>
       <Spin spinning={loading}>
         <List
           className={styles.taskList}
@@ -72,18 +86,21 @@ const TaskManage: React.FC<IPropTypes> = (props) => {
           pagination={false}
         />
       </Spin>
+
     </PageContent>
   );
 };
 
-export default connect(
-  ({
-    mandate,
-    loading,
-  }: any): { mandateList: IMandateType[]; loading: boolean } => {
-    return {
-      mandateList: mandate.mandateList,
-      loading: loading.models['mandate'],
-    };
-  },
-)(TaskManage);
+export default TaskManage;
+
+// export default connect(
+//   ({
+//     mandate,
+//     loading,
+//   }: any): { mandateList: IMandateType[]; loading: boolean } => {
+//     return {
+//       mandateList: mandate.mandateList,
+//       loading: loading.models['mandate'],
+//     };
+//   },
+// )(TaskManage);

src/pages/TaskManage/index.types.ts

@@ -1,11 +1,11 @@
 import { IWorkOrderType } from '@/pages/TaskManage/Detail/TaskList/taskList.types';
 import { DefaultOptionType } from 'rc-select/es/Select';
 
-export interface IPropTypes {
-  mandateList: IMandateType[];
-  loading: boolean;
-  dispatch: (args: { type: string; payload: object }) => void;
-}
+// export interface IPropTypes {
+//   mandateList: IMandateType[];
+//   loading: boolean;
+//   dispatch: (args: { type: string; payload: object }) => void;
+// }
 
 export interface IMandateType {
   Id: number;