feat: 完成任务详情及工单详情页面

.umirc.ts

@@ -112,9 +112,19 @@ export default defineConfig({
       component: './TaskManage',
     },
     {
-      name: '任务管理-详情',
-      path: '/task-manage/detail',
-      component: './TaskManage/Detail/TaskDetail',
+      name: '任务列表',
+      path: '/task-manage/list',
+      component: './TaskManage/Detail/TaskList/TaskList',
+    },
+    {
+      name: '任务详情',
+      path: '/task-manage/list/detail',
+      component: './TaskManage/Detail/TaskDetail/TaskDetail',
+    },
+    {
+      name: '任务关联工单详情',
+      path: '/task-manage/list/order-detail',
+      component: './TaskManage/Detail/TaskOrder/TaskOrder',
     },
     {
       name: '消息中心',

src/pages/TaskManage/Detail/TaskDetail.tsx

@@ -1,327 +0,0 @@
-import PageContent from '@/components/PageContent';
-import PageTitle from '@/components/PageTitle';
-import {
-  IMandateChildType,
-  IMandateDetailType,
-  IPropsType,
-  ITopFilter,
-  IUserType,
-  IWorkOrderType,
-} from '@/pages/TaskManage/Detail/detail.types';
-import {
-  MandateClass,
-  MandateStatus,
-  MandateType,
-  OrderStatus,
-  OrderType,
-} from '@/pages/TaskManage/constent';
-import {
-  dispatchOrder,
-  getMandateChildList,
-  getMandateDetail,
-  getMandateList,
-  ignoreTask,
-  setTaskAutomation,
-} from '@/services/TaskManage';
-import { connect, useLocation, useRequest } from '@umijs/max';
-
-import TopFilter from '@/pages/TaskManage/components/TopFilter';
-import { IMandateType } from '@/pages/TaskManage/index.types';
-import { Col, Collapse, CollapseProps, Divider, List, Row } from 'antd';
-import React, { useEffect, useState } from 'react';
-import styles from './detail.less';
-
-const TaskDetail: React.FC<IPropsType> = (props) => {
-  const { userList, dispatch } = props;
-  const md5 = require('md5');
-  const location = useLocation();
-  const queryParams = new URLSearchParams(location.search);
-  const project_id = Number(queryParams.get('project_id'));
-  const mandateType = Number(queryParams.get('mandateType'));
-
-  const [mandateList, setMandateList] = useState<IMandateType[]>([]);
-  const [mandateDetail, setMandateDetail] = useState<IMandateDetailType>();
-  const [handledWorkOrders, setHandledWorkOrders] = useState<IWorkOrderType[]>(
-    [],
-  );
-  const [subMandateList, setSubMandateList] = useState<IMandateChildType[]>([]);
-
-  const [topFilters, setTopFilters] = useState<ITopFilter[]>([]);
-
-  const {
-    data: originMandateList,
-    run: runGetMandateList,
-    refresh: refreshMandateList,
-  } = useRequest(getMandateList, {
-    manual: true,
-    onSuccess: (data) => {
-      setMandateList(data.list);
-    },
-  });
-
-  const { run: getDetail, refresh: refreshDetail } = useRequest(
-    getMandateDetail,
-    {
-      manual: true,
-      formatResult: (result) => {
-        const mandate: IMandateDetailType = {
-          ...result.data,
-          Status: MandateStatus.find(
-            (item) => item.value === result.data.Status,
-          ),
-          MandateClass: MandateClass.find(
-            (item) => item.value === result.data.MandateClass,
-          ),
-          MandateType: MandateType.find(
-            (item) => item.value === result.data.MandateType,
-          ),
-          ResponsiblePeople: userList.find(
-            (item) => item.ID === result.data.ResponsiblePeople,
-          ),
-        };
-
-        const workOrderList: IWorkOrderType[] = result.data.Records.map(
-          (record: IWorkOrderType) => {
-            return {
-              ...record,
-              Status: OrderStatus.find((item) => item.value === record.Status),
-              RecordType: OrderType.find(
-                (item) => item.value === record.RecordType,
-              ),
-              Responsible: userList.find(
-                (item: IUserType) => item.ID === record.Responsible,
-              ),
-            };
-          },
-        );
-        setMandateDetail(mandate);
-        setHandledWorkOrders(workOrderList);
-      },
-    },
-  );
-
-  const { run: getMandateChild, refresh: refreshMandateChild } = useRequest(
-    getMandateChildList,
-    {
-      manual: true,
-      formatResult: (result) => {
-        setSubMandateList(result.data);
-      },
-    },
-  );
-
-  const { run: setAuto } = useRequest(setTaskAutomation, {
-    manual: true,
-    onSuccess: () => {
-      refreshDetail();
-      refreshMandateChild();
-    },
-  });
-
-  const { run: runIgnoreTask } = useRequest(ignoreTask, {
-    manual: true,
-    onSuccess: () => {
-      refreshDetail();
-      refreshMandateChild();
-    },
-  });
-
-  const { run: runDispatch } = useRequest(dispatchOrder, {
-    manual: true,
-    onSuccess: () => {
-      refreshDetail();
-      refreshMandateChild();
-    },
-  });
-
-  const onTopFilterChange = (value: any, item: ITopFilter, index: number) => {
-    switch (index) {
-      case 0:
-        setMandateList(
-          originMandateList.list.filter(
-            (item: IMandateType) => item.MandateClass === value,
-          ),
-        );
-        break;
-      case 1:
-        setMandateList(
-          originMandateList.list.filter(
-            (item: IMandateType) => item.Status === value,
-          ),
-        );
-        break;
-    }
-  };
-
-  const onTopFilterClean = () => {
-    setMandateList(originMandateList.list)
-  };
-
-  // 获取用户
-  useEffect(() => {
-    if (userList.length === 0) {
-      dispatch({
-        type: 'taskUser/fetchUserList',
-        payload: { project_id },
-      });
-    }
-  }, []);
-  // 获取列表
-  useEffect(() => {
-    runGetMandateList({
-      project_id,
-      pageSize: 9999,
-    });
-  }, [userList]);
-  // 顶部下拉过滤器
-  useEffect(() => {
-    const filters: ITopFilter[] = [];
-
-    filters.push({
-      key: '任务类别',
-      placeholder: '任务类别',
-      // @ts-ignore
-      options: MandateClass.map((item) => {
-        if (item.MandateType === mandateType) {
-          return {
-            value: item.value,
-            label: item.label,
-            key: item.value + '任务类别',
-          };
-        }
-      }).filter((item) => item),
-    });
-
-    filters.push({
-      key: '任务状态',
-      placeholder: '任务状态',
-      options: MandateStatus.map((item) => {
-        return {
-          ...item,
-          key: item.value + '任务状态',
-        };
-      }),
-    });
-    setTopFilters(filters);
-  }, [mandateType]);
-
-  const buildTaskList = (item: IMandateType, index: number) => {
-    const formatItem = {
-      ...item,
-      Status: MandateStatus.find((status) => status.value === item.Status),
-      MandateType: MandateType.find((type) => type.value === item.MandateType),
-      MandateClass: MandateClass.find(
-        (itemClass) => itemClass.value === item.MandateClass,
-      ),
-      ResponsiblePeople: userList.find(
-        (user) => user.ID === item.ResponsiblePeople,
-      ),
-    };
-
-    const workOrder = item.Records.map((record) => {
-      return {
-        ...record,
-        Status: OrderStatus.find((status) => status.value === record.Status),
-        RecordType: OrderType.find((type) => type.value === record.RecordType),
-        Responsible: userList.find((user) => user.ID === record.Responsible),
-      };
-    });
-
-    const collapseData: CollapseProps['items'] = [
-      {
-        key: '1',
-        label: (
-          <span style={{ color: '#5697e4' }}>关联工单({workOrder.length})</span>
-        ),
-        children: workOrder.map((order) => {
-          return (
-            <div className={styles.workOrderCard}>
-              <div className={styles.leftInfo}>
-                <Row>
-                  <Col span={12}>工单编号：{order.Id}</Col>
-                  <Col span={12}>时间：{order.CreateTime}</Col>
-                </Row>
-                <Row>
-                  <Col span={12}>
-                    工单状态：
-                    <span style={{ color: '#5697e4' }}>
-                      {order.Status?.label}
-                    </span>
-                  </Col>
-                  <Col span={12}>工单负责人：{order.Responsible?.CName}</Col>
-                </Row>
-              </div>
-              <Divider type="vertical" style={{ height: '40px' }} />
-              <div className={styles.rightButton}>查看工单</div>
-            </div>
-          );
-        }),
-      },
-    ];
-
-    return (
-      <List.Item>
-        <div className={`${styles.cardContainer} card-box`}>
-          <div className={styles.taskInfo}>
-            <Row justify="space-between" style={{ marginBottom: '20px' }}>
-              <Col>时间：{formatItem.CreateTime}</Col>
-              <Col>任务类别：{formatItem.MandateClass?.label}</Col>
-              <Col>
-                任务负责人：{formatItem.ResponsiblePeople?.CName || '-'}
-              </Col>
-            </Row>
-            <Row
-              justify="space-between"
-              style={{ paddingBottom: '10px', borderBottom: '1px solid gray' }}
-            >
-              <Col>任务状态：{formatItem.Status?.label || '-'}</Col>
-              <Col>
-                <div
-                  style={{
-                    width: '80px',
-                    color: 'white',
-                    backgroundColor: '#f5a623',
-                    textAlign: 'center',
-                  }}
-                >
-                  任务详情
-                </div>
-              </Col>
-            </Row>
-            <Row>
-              <Collapse
-                className={styles.collapseLabel}
-                ghost
-                items={collapseData}
-              />
-            </Row>
-          </div>
-        </div>
-      </List.Item>
-    );
-  };
-
-  return (
-    <PageContent>
-      <PageTitle returnable>
-        {MandateType.find((item) => item.value === mandateType)?.label}
-      </PageTitle>
-      <TopFilter
-        filters={topFilters}
-        onChange={onTopFilterChange}
-        onClean={onTopFilterClean}
-      />
-      <List
-        itemLayout="horizontal"
-        dataSource={mandateList}
-        renderItem={buildTaskList}
-      />
-    </PageContent>
-  );
-};
-
-export default connect(({ taskUser }: any): { userList: IUserType[] } => {
-  return {
-    userList: taskUser.userList,
-  };
-})(TaskDetail);

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

@@ -0,0 +1,159 @@
+import PageContent from '@/components/PageContent';
+import PageTitle from '@/components/PageTitle';
+import {
+IMandateDetailType,
+IUserType,
+IWorkOrderType,
+} from '@/pages/TaskManage/Detail/TaskList/taskList.types';
+import {
+MandateClass,
+MandateStatus,
+MandateType,
+OrderStatus,
+OrderType,
+} from '@/pages/TaskManage/constent';
+import { getMandateDetail } from '@/services/TaskManage';
+import { useLocation } from '@@/exports';
+import { connect,useRequest } from '@umijs/max';
+import { Button,Col,Divider,Row,Table } from 'antd';
+import { useState } from 'react';
+import { useNavigate } from 'umi';
+import styles from './taskDetail.less';
+
+interface IPropsType {
+  userList: IUserType[];
+  dispatch: (args: { type: string; payload: object }) => {};
+}
+
+function TaskDetail(props: IPropsType) {
+  const { userList, dispatch } = props;
+
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+  const project_id = Number(queryParams.get('project_id'));
+  const mandate_id = Number(queryParams.get('mandate_id'));
+
+  const navigate = useNavigate();
+
+  const [mandateDetail, setMandateDetail] = useState<IMandateDetailType>();
+  const [handledWorkOrder, setHandledWorkOrder] = useState<IWorkOrderType[]>(
+    [],
+  );
+
+  const { refresh: refreshDetail } = useRequest(getMandateDetail, {
+    defaultParams: [
+      {
+        mandate_id,
+        project_id,
+      },
+    ],
+    formatResult: (result) => {
+      const tempMandate: IMandateDetailType = {
+        ...result.data,
+        Status: MandateStatus.find((item) => item.value === result.data.Status),
+        MandateClass: MandateClass.find(
+          (item) => item.value === result.data.MandateClass,
+        ),
+        MandateType: MandateType.find(
+          (item) => item.value === result.data.MandateType,
+        ),
+        ResponsiblePeople: userList.find(
+          (item) => item.ID === result.data.ResponsiblePeople,
+        ),
+      };
+      const workOrder = result.data.Records;
+      const tempOrder = workOrder.map((record: 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),
+        };
+      });
+      setMandateDetail(tempMandate);
+      setHandledWorkOrder(tempOrder);
+    },
+  });
+  const goTaskOrder = (orderID: number) => {
+    navigate(
+      `/task-manage/list/order-detail?project_id=${project_id}&order_id=${orderID}`,
+    );
+  };
+
+  return (
+    <PageContent>
+      <PageTitle returnable>任务详情</PageTitle>
+      <div className={`${styles.cardContainer} card-box`}>
+        <div className={styles.normalInfo}>
+          <Row className={styles.infoRow}>
+            <Col span={16}>时间：{mandateDetail?.CreateTime}</Col>
+            <Col span={8}>任务类别：{mandateDetail?.MandateClass?.label}</Col>
+          </Row>
+          <Row>
+            <Col span={16}>任务状态：{mandateDetail?.Status?.label}</Col>
+            <Col span={8}>
+              任务负责人：{mandateDetail?.ResponsiblePeople?.CName}
+            </Col>
+          </Row>
+        </div>
+        <div className={styles.detailInfo}>
+          <Row className={styles.infoRow}>
+            <Col span={4}>任务总结</Col>
+            <Col>{mandateDetail?.Summary}</Col>
+          </Row>
+          <Row>
+            <Col span={4}>任务内容</Col>
+            <Col span={20}>
+              <Table />
+            </Col>
+          </Row>
+        </div>
+        <div>
+          <h3 style={{ marginLeft: '15px' }}>关联工单</h3>
+          {handledWorkOrder.map((order) => {
+            return (
+              <div className={styles.workOrderCard}>
+                <div className={styles.leftInfo}>
+                  <Row className={styles.infoRow}>
+                    <Col span={12}>工单编号：{order.Id}</Col>
+                    <Col span={12}>时间：{order.CreateTime}</Col>
+                  </Row>
+                  <Row>
+                    <Col span={12}>
+                      工单状态：
+                      <span style={{ color: '#5697e4' }}>
+                        {order.Status?.label}
+                      </span>
+                    </Col>
+                    <Col span={12}>工单负责人：{order.Responsible?.CName}</Col>
+                  </Row>
+                </div>
+                <Divider type="vertical" style={{ height: '40px' }} />
+                <div className={styles.rightButton}>
+                  <Button
+                    style={{ color: '#5697e4' }}
+                    type="text"
+                    ghost
+                    onClick={() => {
+                      goTaskOrder(order.Id);
+                    }}
+                  >
+                    查看工单
+                  </Button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </PageContent>
+  );
+}
+
+export default connect(({ taskUser }: any): { userList: IUserType[] } => {
+  return {
+    userList: taskUser.userList,
+  };
+})(TaskDetail);

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

@@ -0,0 +1,43 @@
+.cardContainer{
+  margin-top: 15px;
+  padding: 20px 20px;
+  background-color: white;
+
+  .normalInfo{
+    padding: 15px 15px;
+    background-color: #fdf2df;
+  }
+
+  .infoRow{
+    margin-bottom: 15px;
+  }
+
+
+  .detailInfo{
+    padding: 15px 15px;
+  }
+
+  .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;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+
+}

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

@@ -0,0 +1,287 @@
+import PageContent from '@/components/PageContent';
+import PageTitle from '@/components/PageTitle';
+import {
+  IPropsType,
+  ITopFilter,
+  IUserType,
+} from '@/pages/TaskManage/Detail/TaskList/taskList.types';
+import {
+  MandateClass,
+  MandateStatus,
+  MandateType,
+  OrderStatus,
+  OrderType,
+} from '@/pages/TaskManage/constent';
+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 {
+  Button,
+  Col,
+  Collapse,
+  CollapseProps,
+  Divider,
+  List,
+  Row,
+  Spin,
+} from 'antd';
+import React, { 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 location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+  const project_id = Number(queryParams.get('project_id'));
+  const mandateType = Number(queryParams.get('mandateType'));
+
+  const navigate = useNavigate();
+
+  // 用于展示的任务列表
+  const [mandateListShow, setMandateListShow] = useState<IMandateType[]>([
+    ...mandateList.filter((item) => item.MandateType === mandateType),
+  ]);
+  // 顶部选择器配置
+  const [topFilters, setTopFilters] = useState<ITopFilter[]>([]);
+
+  /**
+   * 处理选择器变化
+   * @param value 选择的值，当清空时等于null
+   * @param item
+   * @param index
+   */
+  const onTopFilterChange = (value: any, item: ITopFilter, index: number) => {
+    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);
+      }
+    }
+
+    setMandateListShow(tempList);
+  };
+
+  // 获取用户
+  useEffect(() => {
+    if (userList.length === 0) {
+      dispatch({
+        type: 'taskUser/fetchUserList',
+        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),
+    );
+  }, [mandateList]);
+
+  // 顶部下拉过滤器
+  useEffect(() => {
+    const filters: ITopFilter[] = [];
+    filters.push({
+      key: 'MandateClass',
+      placeholder: '任务类别',
+      // @ts-ignore
+      options: MandateClass.map((item) => {
+        if (item.MandateType === mandateType) {
+          return {
+            value: item.value,
+            label: item.label,
+            key: item.value + '任务类别',
+          };
+        }
+      }).filter((item) => item),
+    });
+
+    filters.push({
+      key: 'Status',
+      placeholder: '任务状态',
+      options: MandateStatus.map((item) => {
+        return {
+          ...item,
+          key: item.value + '任务状态',
+        };
+      }),
+    });
+    setTopFilters(filters);
+    setMandateListShow(
+      mandateList.filter((item) => item.MandateType === mandateType),
+    );
+  }, [mandateType]);
+
+  const goTaskDetail = (mandate: IMandateType) => {
+    navigate(
+      `/task-manage/list/detail?project_id=${project_id}&mandate_id=${mandate.Id}`,
+    );
+  };
+
+  const goTaskOrder = (orderID: number) => {
+    navigate(
+      `/task-manage/list/order-detail?project_id=${project_id}&order_id=${orderID}`,
+    );
+  };
+
+  const buildTaskList = (item: IMandateType, index: number) => {
+    const formatItem = {
+      ...item,
+      Status: MandateStatus.find((status) => status.value === item.Status),
+      MandateType: MandateType.find((type) => type.value === item.MandateType),
+      MandateClass: MandateClass.find(
+        (itemClass) => itemClass.value === item.MandateClass,
+      ),
+      ResponsiblePeople: userList.find(
+        (user) => user.ID === item.ResponsiblePeople,
+      ),
+    };
+
+    const workOrder = item.Records.map((record) => {
+      return {
+        ...record,
+        Status: OrderStatus.find((status) => status.value === record.Status),
+        RecordType: OrderType.find((type) => type.value === record.RecordType),
+        Responsible: userList.find((user) => user.ID === record.Responsible),
+      };
+    });
+
+    const collapseData: CollapseProps['items'] = [
+      {
+        key: '1',
+        label: (
+          <span style={{ color: '#5697e4' }}>关联工单({workOrder.length})</span>
+        ),
+        children: workOrder.map((order) => {
+          return (
+            <div className={styles.workOrderCard}>
+              <div className={styles.leftInfo}>
+                <Row style={{ marginBottom: '15px' }}>
+                  <Col span={12}>工单编号：{order.Id}</Col>
+                  <Col span={12}>时间：{order.CreateTime}</Col>
+                </Row>
+                <Row>
+                  <Col span={12}>
+                    工单状态：
+                    <span style={{ color: '#5697e4' }}>
+                      {order.Status?.label}
+                    </span>
+                  </Col>
+                  <Col span={12}>工单负责人：{order.Responsible?.CName}</Col>
+                </Row>
+              </div>
+              <Divider type="vertical" style={{ height: '40px' }} />
+              <div className={styles.rightButton}>
+                <Button
+                  style={{ color: '#5697e4' }}
+                  type="text"
+                  ghost
+                  onClick={() => {
+                    goTaskOrder(order.Id);
+                  }}
+                >
+                  查看工单
+                </Button>
+              </div>
+            </div>
+          );
+        }),
+      },
+    ];
+
+    return (
+      <List.Item>
+        <div className={`${styles.cardContainer} card-box`}>
+          <Row justify="space-between" style={{ marginBottom: '20px' }}>
+            <Col>时间：{formatItem.CreateTime}</Col>
+            <Col>任务类别：{formatItem.MandateClass?.label}</Col>
+            <Col>任务负责人：{formatItem.ResponsiblePeople?.CName || '-'}</Col>
+          </Row>
+          <Row
+            justify="space-between"
+            style={{ paddingBottom: '10px', borderBottom: '1px solid gray' }}
+          >
+            <Col>任务状态：{formatItem.Status?.label || '-'}</Col>
+            <Col>
+              <div
+                style={{
+                  backgroundColor: '#f5a623',
+                }}
+              >
+                <Button
+                  style={{ color: 'white' }}
+                  type="text"
+                  ghost
+                  onClick={() => {
+                    goTaskDetail(item);
+                  }}
+                >
+                  任务详情
+                </Button>
+              </div>
+            </Col>
+          </Row>
+          <Row>
+            <Collapse
+              className={styles.collapseLabel}
+              ghost
+              items={collapseData}
+            />
+          </Row>
+        </div>
+      </List.Item>
+    );
+  };
+
+  return (
+    <PageContent>
+      <PageTitle returnable>
+        {MandateType.find((item) => item.value === mandateType)?.label}
+      </PageTitle>
+      <TopFilter filters={topFilters} onChange={onTopFilterChange} />
+      <Spin spinning={loading}>
+        <List
+          itemLayout="horizontal"
+          dataSource={mandateListShow}
+          renderItem={buildTaskList}
+        />
+      </Spin>
+    </PageContent>
+  );
+};
+
+export default connect(
+  ({
+    taskUser,
+    mandate,
+    loading,
+  }: any): {
+    userList: IUserType[];
+    mandateList: IMandateType[];
+    loading: boolean;
+  } => {
+    return {
+      userList: taskUser.userList,
+      mandateList: mandate.mandateList,
+      loading: loading.models['taskUser'] || loading.models['mandate'],
+    };
+  },
+)(TaskList);

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

@@ -1,7 +1,10 @@
+import { IMandateType } from '@/pages/TaskManage/index.types';
 import { BaseOptionType } from 'rc-select/es/Select';
 
 export interface IPropsType {
   userList: IUserType[];
+  mandateList: IMandateType[];
+  loading: boolean;
   dispatch: (args: { type: string; payload: object }) => {};
 }
 
@@ -24,9 +27,9 @@ export interface IWorkOrderType {
   Id: number;
   Note: string;
   PlanDoneTime: string;
-  RecordType: number;
-  Responsible: number;
-  Status: number;
+  RecordType: number | BaseOptionType;
+  Responsible: number | IUserType;
+  Status: number | BaseOptionType;
 }
 
 export interface IMandateDetailType {
@@ -58,5 +61,5 @@ export interface IUserType {
 export interface ITopFilter {
   key?: string;
   placeholder: string;
-  options: { label:string|number, value: any }[];
+  options: { label: string | number; value: any }[];
 }

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

@@ -0,0 +1,84 @@
+import PageContent from '@/components/PageContent';
+import PageTitle from '@/components/PageTitle';
+import SubTitle from '@/pages/TaskManage/components/SubTitle';
+import { Col, Row, Steps, Table } from "antd";
+import styles from './taskOrder.less';
+
+function TaskOrder() {
+  return (
+    <PageContent>
+      <PageTitle returnable>工单详情</PageTitle>
+      <div className={styles.selfCardBox}>
+        <div className={styles.orderInfo}>
+          <SubTitle title="工单信息" statusStr="已完成" radius />
+          <div style={{ padding: '15px' }}>
+            <Row className={styles.rowMargin}>
+              <Col span={16}>时间：{}</Col>
+              <Col span={8}>工单负责人：{}</Col>
+            </Row>
+            <Row className={styles.rowMargin}>
+              <Col span={16}>工单状态：{}</Col>
+              <Col span={8}>派单人员：{}</Col>
+            </Row>
+            <Row className={styles.rowMargin}>
+              <Col>派单时间：{}</Col>
+            </Row>
+            <Row className={styles.rowMargin}>
+              <Col>计划完成时间：{}</Col>
+            </Row>
+            <Row className={styles.rowMargin}>
+              <Col>实际完成时间：{}</Col>
+            </Row>
+            <Row>
+              <Col span={4}>工单详情：{}</Col>
+              <Col span={20}>
+                <Table />
+              </Col>
+            </Row>
+          </div>
+        </div>
+        <div>
+          <SubTitle title="维修内容" />
+          <div style={{ padding: '15px' }}>
+            <Row className={styles.rowMargin}>
+              <Col>是否润滑加油：否</Col>
+            </Row>
+            <Row>
+              <Col>是否清洁：否</Col>
+            </Row>
+          </div>
+        </div>
+        <div>
+          <SubTitle title="工单流程" />
+          <div style={{padding: '15px'}}>
+            <Steps
+              direction="vertical"
+              style={{fontSize: '14px'}}
+              current={1}
+              items={[
+                {
+                  title: '工单已派遣至值班人员张**',
+                  description:'2023-08-02 13:23',
+                },
+                {
+                  title: '张**接收工单',
+                  description:'2023-08-02 13:23',
+                },
+                {
+                  title: '张**提交处理结果',
+                  description:'2023-08-02 13:23',
+                },{
+                  title: '工单审批通过',
+                  description:'2023-08-02 13:23',
+                },
+
+              ]}
+            />
+          </div>
+        </div>
+      </div>
+    </PageContent>
+  );
+}
+
+export default TaskOrder;

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

@@ -0,0 +1,15 @@
+.selfCardBox {
+  margin-top: 15px;
+  border-radius: 8px;
+  box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.3);
+  background-color: white;
+}
+
+.orderInfo {
+  border: 0;
+  margin: 0;
+}
+
+.rowMargin {
+  margin-bottom: 15px;
+}

src/pages/TaskManage/components/SubTitle.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+interface IPropsType {
+  title: string;
+  statusStr?: string;
+  radius?: boolean;
+}
+
+const SubTitle: React.FC<IPropsType> = ({ title, statusStr='', radius=false }) => {
+  return (
+    <div
+      style={{
+        border: 0,
+        margin: 0,
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingLeft: '10px',
+        paddingRight: '10px',
+        backgroundColor: '#d9e7f9',
+        fontSize: '18px',
+        height: '40px',
+        borderRadius: radius ? '8px 8px 0 0 ' : 'unset',
+      }}
+    >
+      <div>
+        <span style={{ border: '2px solid #4a90e2', marginRight: '5px' }} />
+        {title}
+      </div>
+      <div>{statusStr}</div>
+    </div>
+  );
+};
+
+export default SubTitle;

src/pages/TaskManage/components/TopFilter.tsx

@@ -1,46 +1,45 @@
-import { ITopFilter } from '@/pages/TaskManage/Detail/detail.types';
+import { ITopFilter } from '@/pages/TaskManage/Detail/TaskList/taskList.types';
 import { Divider, Select } from 'antd';
+import { useState } from 'react';
 
 interface IProps {
-  filters: ITopFilter | ITopFilter[];
+  filters: ITopFilter[];
   onChange: (value: any, item: ITopFilter, index: number) => void;
-  onClean: () => void;
 }
 
-const TopFilter: React.FC<IProps> = ({ filters, onChange, onClean }) => {
+const TopFilter: React.FC<IProps> = ({ filters, onChange }) => {
+  const [values, setValues] = useState<any[]>([]);
+
   return (
     <div style={{ display: 'flex', justifyContent: 'center' }}>
-      {Array.isArray(filters) ? (
-        filters.map((item, index) => {
-          return (
-            <>
-              <Select
-                key={`${index}${item.placeholder}`}
-                style={{ width: 120 }}
-                size="large"
-                bordered={false}
-                placeholder={item.placeholder}
-                options={item.options}
-                allowClear
-                onClear={onClean}
-                onChange={(value, option) => {
-                  onChange(value, item, index);
-                }}
-              />
-              {filters.length > 1 && index !== filters.length - 1 && (
-                <Divider type="vertical" style={{ margin: '0 50px' }} />
-              )}
-            </>
-          );
-        })
-      ) : (
-        <Select
-          style={{ width: 120 }}
-          bordered={false}
-          defaultValue={filters.placeholder}
-          options={filters.options}
-        />
-      )}
+      {filters.map((item, index) => {
+        return (
+          <>
+            <Select
+              key={`${index}${item.placeholder}`}
+              style={{ width: 120 }}
+              size="large"
+              bordered={false}
+              placeholder={item.placeholder}
+              options={item.options}
+              allowClear
+              onChange={(value, option) => {
+                const temp = filters.map((f, i) => {
+                  if (index === i) {
+                    return value !== undefined ? value : null;
+                  }
+                  return values[i] || null;
+                });
+                setValues(temp);
+                onChange(temp, item, index);
+              }}
+            />
+            {filters.length > 1 && index !== filters.length - 1 && (
+              <Divider type="vertical" style={{ margin: '0 30px' }} />
+            )}
+          </>
+        );
+      })}
     </div>
   );
 };

src/pages/TaskManage/index.tsx

@@ -12,27 +12,13 @@ import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'umi';
 
 const TaskManage: React.FC<IPropTypes> = (props) => {
-  const { mandateList, dispatch } = props;
+  const { mandateList,loading, dispatch } = props;
   const { projectID } = useParams();
   const project_id = Number(projectID === '' ? '0' : projectID);
 
   const navigate = useNavigate();
   const [mandateCount, setMandateCount] = useState<number[]>([0, 0, 0]);
 
-  const {
-    run: runGetMandateList,
-    loading,
-    refresh: refreshMandateList,
-  } = useRequest(getMandateList, {
-    manual: true,
-    defaultParams: [
-      {
-        project_id,
-        pageSize: 99999,
-      },
-    ],
-  });
-
   useEffect(() => {
     if (mandateList.length == 0) {
       dispatch({
@@ -52,9 +38,9 @@ const TaskManage: React.FC<IPropTypes> = (props) => {
     setMandateCount(typeCount);
   }, [mandateList]);
 
-  const goToDetail = (item: number) => {
+  const goTaskList = (item: number) => {
     navigate(
-      `/task-manage/detail?project_id=${project_id}&mandateType=${item}`,
+      `/task-manage/list?project_id=${project_id}&mandateType=${item}`,
     );
   };
 
@@ -63,7 +49,7 @@ const TaskManage: React.FC<IPropTypes> = (props) => {
       <List.Item
         className={styles.listItem}
         onClick={() => {
-          goToDetail(item.value);
+          goTaskList(item.value);
         }}
       >
         <List.Item.Meta title={item.label} />
@@ -93,10 +79,9 @@ const TaskManage: React.FC<IPropTypes> = (props) => {
   );
 };
 
-export default connect(({ mandate }: any): { mandateList: IMandateType[] } => {
+export default connect(({ mandate,loading }: any): { mandateList: IMandateType[], loading:boolean } => {
   return {
     mandateList: mandate.mandateList,
+    loading: loading.models['mandate']
   };
 })(TaskManage);
-
-// export default TaskManage;

src/pages/TaskManage/index.types.ts

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

src/services/TaskManage.js

@@ -24,7 +24,7 @@ export async function getMandateChildList(params) {
 
 /**
  * 获取任务详情
- * @param params.mandate_idz
+ * @param params.mandate_id
  * @param params.project_id
  * @returns {Promise<*>}
  */