feat(firmware): task history

src/pages/device/Firmware/Detail/History/index.tsx

@@ -1,12 +1,19 @@
 import type { ProColumns } from '@jetlinks/pro-table';
 import ProTable from '@jetlinks/pro-table';
-import { service } from '@/pages/device/Firmware';
+import { service, state } from '@/pages/device/Firmware';
 import type { HistoryItem } from '@/pages/device/Firmware/typings';
 import { useParams } from 'umi';
+import { useEffect, useState } from 'react';
 
 const History = () => {
   const param = useParams<{ id: string }>();
 
+  const [defaultParams, setParams] = useState<Record<string, unknown>>();
+  useEffect(() => {
+    if (state.historyParams) {
+      setParams({ ...state.historyParams });
+    }
+  }, []);
   const columns: ProColumns<HistoryItem>[] = [
     {
       dataIndex: 'index',
@@ -44,6 +51,7 @@ const History = () => {
     <ProTable
       columns={columns}
       defaultParams={{
+        ...defaultParams,
         firmwareId: param.id,
       }}
       request={(params) => service.history(params)}

src/pages/device/Firmware/Detail/Task/Detail/index.tsx

@@ -51,38 +51,56 @@ const Detail = (props: Props) => {
         }),
       )
       .then((resp) => {
-        setCount({ ...count, [`${status}`]: resp.result });
+        count[`${status}`] = resp.result;
+        setCount({ ...count });
       });
 
   useEffect(() => {
     (['waiting', 'processing', 'success', 'failed'] as TaskState[]).forEach((s) => {
-      getStateCount(s);
+      if (state.taskItem?.id) {
+        getStateCount(s);
+      }
     });
   }, [state.taskItem]);
 
   return (
     <Modal width="30vw" visible={props.visible} onCancel={() => props.close()} title="任务详情">
       <Row gutter={16}>
-        {
-          // todo 数据展示错误
-          Object.keys(count)
-            .reduce((previousValue: any[], currentValue) => {
-              previousValue.push({
-                key: currentValue,
-                value: count[currentValue],
-                ...map[currentValue],
-              });
-              return previousValue;
-            }, [])
-            .map((item) => (
-              <Col span={6}>
-                <Statistic
-                  title={<Badge status={item.status} text={item.text} />}
-                  value={item.value}
-                />
-              </Col>
-            ))
-        }
+        {Object.keys(count)
+          .reduce((previousValue: any[], currentValue) => {
+            previousValue.push({
+              key: currentValue,
+              value: count[currentValue],
+              ...map[currentValue],
+            });
+            return previousValue;
+          }, [])
+          .map((item) => (
+            <Col span={6} key={item.key}>
+              <Statistic
+                title={
+                  <Badge
+                    status={item.status}
+                    text={
+                      <a
+                        onClick={() => {
+                          state.taskDetail = false;
+                          state.tab = 'history';
+                          state.historyParams = {
+                            taskId: state.taskItem?.id,
+                            state: item.key,
+                          };
+                        }}
+                      >
+                        {item.text}
+                      </a>
+                    }
+                  />
+                }
+                value={item.value}
+              />
+            </Col>
+          ))}
       </Row>
     </Modal>
   );

src/pages/device/Firmware/Detail/index.tsx

@@ -6,8 +6,9 @@ import History from './History';
 import { useEffect, useState } from 'react';
 import type { FirmwareItem } from '@/pages/device/Firmware/typings';
 import Task from '@/pages/device/Firmware/Detail/Task';
+import { observer } from '@formily/react';
 
-const Detail = () => {
+const Detail = observer(() => {
   const [data, setData] = useState<FirmwareItem | undefined>(state.current);
   const param = useParams<{ id: string }>();
   useEffect(() => {
@@ -19,7 +20,7 @@ const Detail = () => {
       });
     }
   }, [param.id]);
-  const [tab, setTab] = useState<string>('task');
+
   const list = [
     {
       key: 'task',
@@ -34,8 +35,11 @@ const Detail = () => {
   ];
   return (
     <PageContainer
+      tabActiveKey={state.tab}
       onBack={history.goBack}
-      onTabChange={setTab}
+      onTabChange={(key) => {
+        state.tab = key as 'task' | 'history';
+      }}
       content={
         <>
           <Descriptions size="small" column={3}>
@@ -47,7 +51,9 @@ const Detail = () => {
               { key: '签名方式', value: data?.signMethod },
               { key: '签名', value: data?.sign },
             ].map((item) => (
-              <Descriptions.Item label={item.key}>{item.value}</Descriptions.Item>
+              <Descriptions.Item key={item.key} label={item.key}>
+                {item.value}
+              </Descriptions.Item>
             ))}
           </Descriptions>
         </>
@@ -55,8 +61,8 @@ const Detail = () => {
       title={<>固件: {state.current?.name}</>}
       tabList={list}
     >
-      {list.find((k) => k.key === tab)?.component}
+      {list.find((k) => k.key === state.tab)?.component}
     </PageContainer>
   );
-};
+});
 export default Detail;

src/pages/device/Firmware/index.tsx

@@ -22,11 +22,14 @@ export const state = model<{
   release: boolean;
   taskItem?: TaskItem;
   taskDetail: boolean;
+  tab: 'task' | 'history';
+  historyParams?: Record<string, unknown>;
 }>({
   visible: false,
   task: false,
   release: false,
   taskDetail: false,
+  tab: 'task',
 });
 const Firmware = observer(() => {
   const actionRef = useRef<ActionType>();