任务执行情况权限

src/view/Manage/MetadataHarvester/Component/TaskReport.jsx

 import React, { useState, useEffect, useContext, useMemo } from 'react';
-import { Space, DatePicker, Row, Col, Card, Spin, Empty, Typography, Pagination, Input, Select, Tooltip, Button } from 'antd';
+import { Space, DatePicker, Row, Col, Card, Spin, Empty, Typography, Pagination, Input, Select, Tooltip, Button, Modal } from 'antd';
 import 'moment/locale/zh-cn';
 import locale from 'antd/es/date-picker/locale/zh_CN';
 
 import { AppContext } from '../../../../App';
 import { dispatch } from '../../../../model';
-import { paginate } from '../../../../util'; 
+import { paginate, showMessage } from '../../../../util'; 
 import Table from '../../ResizeableTable';
+import PermissionButton from '../../../../util/Component/PermissionButton';
 // import env from '../../../../service/samples/env.json';
 
 const { RangePicker } = DatePicker;
@@ -29,7 +30,6 @@ const FC = (props) => {
   const [rangeValue, setRangeValue] = useState(undefined);
   const [summaryData, setSummaryData] = useState(undefined);
   const [reportData, setReportData] = useState(undefined);
-  const [tracerData, setTracerData] = useState(undefined);
   const [loadingReport, setLoadingReport] = useState(false);
   const [pagination, setPagination] = useState({pageNum: 1, pageSize: 20});
   
@@ -42,9 +42,68 @@ const FC = (props) => {
   const [tasks, setTasks] = useState(undefined);
   const [loadingDatasources, setLoadingDatasources] = useState(false);
   const [datasources, setDatasources] = useState([]);
+  const [permissions, setPermissions] = useState(undefined);
+  const [detailParam, setDetailParam] = useState({
+    visible: false,
+    id: undefined
+  });
 
   const {pageNum, pageSize} = pagination;
 
+  const [modal, contextHolder] = Modal.useModal();
+
+  const indexCol = {
+    title: '序号',
+    dataIndex: 'key',
+    render: (text, record, index) => {
+      return (index+1).toString();
+    },
+    width:80
+  };
+
+  const actionCol = {
+    title: '操作',
+    dataIndex: 'action',
+    width: 80,
+    fixed: 'right',
+    render: (_, record) => {
+      return <PermissionButton 
+          type='link'
+          onClick={() => onActionClick(record)}
+          permissionKey={record.state==='STARTED'?'edit':''}
+          permissions={permissions?.map(item => item.name)}
+          style={{ padding: 0 }}
+        >
+          {record.state==='STARTED'?'取消':'日志'}
+        </PermissionButton>
+    }
+  }
+
+  const onActionClick = (record) => {
+    if (record.state==='STARTED') {
+      modal.confirm({
+        title: '是否取消该任务?',
+        content: '',
+        onOk: () => {
+          dispatch({
+            type: 'datasource.cancelTask',
+            payload: {
+              params: {
+                harvestingTaskId: record.harvestingTaskId
+              }
+            },
+            callback: () => {
+              showMessage('success', '取消成功!');
+              getTaskReportDetail();
+            }
+          });
+        }
+      });
+    } else {
+      setDetailParam({visible: true, id: record.taskStateId});
+    }
+  }
+
   const columns = useMemo(() => {
     if (reportData) {
       let newColumns = [...(reportData.title||[])];
@@ -63,26 +122,20 @@ const FC = (props) => {
         }
       });
 
-      newColumns = [{
-        title: '序号',
-        dataIndex: 'key',
-        render: (text, record, index) => {
-          return (index+1).toString();
-        },
-        width:80
-      }, ...newColumns];
+      newColumns = [indexCol, ...newColumns, actionCol];
 
       return newColumns;
     }
 
     return [];
-  }, [reportData])
+  }, [reportData, permissions, onActionClick])
 
   const taskCodes = useMemo(() => {
     return tasks?.filter(item => item.target?.namespace===env?.domainId?.toString() && item.taskCode).map(item => item.taskCode)
   }, [tasks, env])
 
   useEffect(() => {
+    getPermissions();
     setTaskCode(undefined);
     setDatasourceName(undefined);
     setReportState(undefined);
@@ -133,6 +186,19 @@ const FC = (props) => {
     return (newTasks||[]).length;
   }, [reportData, taskCode, datasourceName, reportState, keyword, pagination])
 
+  const getPermissions = () => {
+    dispatch({
+      type: 'datasource.getPermissions',
+      payload: {
+        range: 'harvester_taskManage',
+        optionId: '任务执行情况',
+      },
+      callback: data => {
+        setPermissions(data);
+      }
+    })
+  }
+
   const getAllTasks = () => {
     setLoadingTasks(true);
     dispatch({
@@ -206,25 +272,6 @@ const FC = (props) => {
     })
   }
 
-  const getTaskTracer = (record) => {
-    dispatch({
-      type: 'datasource.getTaskTracerByStateId',
-      payload: {
-        taskStateId: record.taskStateId
-      },
-      callback: data => {
-        if (data) {
-          setTracerData(prevTracerData => {
-            return [...(prevTracerData||[]), {
-              id: record.taskStateId,
-              data
-            }];
-          });
-        }
-      }
-    });
-  }
-
   const onTimeChange = (value, dateString) => {
     if (!value) {
       setRangeValue(undefined);
@@ -260,6 +307,10 @@ const FC = (props) => {
     setPagination({pageNum: page, pageSize: size });
   }
 
+  const onDetailCancel = () => {
+    setDetailParam({visible: false, id: undefined});
+  }
+
   return (
     <div style={{ overflowX: 'hidden' }}>
       <div className='flex' style={{ justifyContent: 'space-between' }}>
@@ -342,50 +393,6 @@ const FC = (props) => {
         rowKey='taskStateId'
         dataSource={tableData||[]}
         extraColWidth={48}
-        expandable={{
-          onExpand: (expanded, record) => {
-            if (expanded) {
-              getTaskTracer(record);
-            } else {
-              setTracerData(prevTracerData => {
-                const newTracerData = [...(prevTracerData||[])];
-                const index = newTracerData?.findIndex(item => item.id === record.taskStateId);
-                if (index !== -1) {
-                  newTracerData.splice(index, 1);
-                }
-
-                return newTracerData;
-              })
-            }
-          },
-          expandedRowRender: record => {
-            const index = (tracerData||[]).findIndex(item => item.id === record.taskStateId);
-
-            let _tracer = null;
-            if (index !== -1) {
-              _tracer = tracerData[index].data;
-            }
-      
-            return (
-              <Spin spinning={index===-1}>
-              {
-                (_tracer||[]).length === 0 ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无日志" /> 
-                : <React.Fragment>
-                  {
-                    _tracer?.map((_item, index) => {
-                      return (
-                        <Typography.Paragraph key={index} >
-                        {_item.value||''}
-                        </Typography.Paragraph>
-                      )
-                    })
-                  }
-                </React.Fragment>
-              }
-              </Spin>
-            );
-          },
-        }}
         pagination={false} 
         scroll={{ y: 'calc(100vh - 400px)' }}
         sticky
@@ -403,6 +410,14 @@ const FC = (props) => {
         total={total}
         showTotal={total => `共 ${total} 条`}
       />
+
+      <Detail
+        visible={detailParam.visible}
+        id={detailParam.id}
+        onCancel={onDetailCancel}
+      />
+
+      {contextHolder}
     </div>
   )
 }
@@ -435,4 +450,65 @@ const Summary = ({ data }) => {
       }  
     </Row>
   )
+}
+
+const Detail = ({ visible, id, onCancel }) => {
+  const [tracer, setTracer] = useState(undefined);
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    if (visible) {
+      getTaskTracer();
+    }
+  }, [visible, id])
+
+  const getTaskTracer = () => {
+    setLoading(true);
+    dispatch({
+      type: 'datasource.getTaskTracerByStateId',
+      payload: {
+        taskStateId: id
+      },
+      callback: data => {
+        setLoading(false);
+        setTracer(data);
+      },
+      error: () => {
+        setLoading(false);
+      }
+    });
+  }
+
+  return (
+    <Modal
+      title='导入详情'
+      width={600}
+      visible={visible}
+      footer={null}
+      onCancel={() => { 
+        setLoading(false);
+        onCancel?.(); 
+      }}
+      bodyStyle={{ 
+        height: 400,
+        overflow: 'auto'
+      }}
+    >
+      <Spin spinning={loading}>
+      {
+        (tracer||[]).length === 0 ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无日志" /> 
+        : <React.Fragment>
+          {
+            tracer?.map((item, index) => {
+              return (
+                <Typography.Paragraph key={index} >
+                {item.value||''}
+                </Typography.Paragraph>
+              )
+            })
+          }
+        </React.Fragment>
+      }
+      </Spin>
+    </Modal>
+  )
 }
\ No newline at end of file