流程图

src/view/Manage/AssetTask/AuditTask.jsx

@@ -3,7 +3,7 @@ import { Modal, Form, Input, Select, Space, Button } from 'antd';
 
 import { AppContext } from '../../../App';
 import { dispatch } from '../../../model';
-import { Basic, Process, Template } from './TaskDetail';
+import { AuditProgress, Basic, Process, Template } from './TaskDetail';
 
 const FC = (props) => {
   const { visible, onCancel, task, action } = props;
@@ -27,7 +27,7 @@ const FC = (props) => {
             dealUser: user?.userName??'test',
             processDate: new Date().toLocaleString(),
             status,
-            title: `${action}意见`,
+            title: action,
             value: values.content
           }
         },
@@ -82,6 +82,7 @@ const FC = (props) => {
         </Form.Item>
       </Form>
 
+      <AuditProgress task={task} />
       <Basic task={task} />
       <Process task={task} />
       <Template task={task} />

src/view/Manage/AssetTask/CheckTask.jsx

@@ -6,7 +6,7 @@ import LocalStorage from 'local-storage';
 import { AppContext } from '../../../App';
 import { dispatch } from '../../../model';
 import { showMessage } from '../../../util';
-import { Basic, Process, Template } from './TaskDetail';
+import { AuditProgress, Basic, Process, Template } from './TaskDetail';
 
 const FC = (props) => {
   const { visible, onCancel, task } = props;
@@ -120,6 +120,8 @@ const FC = (props) => {
           </Upload>
         </Form.Item>
       </Form>
+
+      <AuditProgress task={task} />
       <Basic task={task} />
       <Process task={task} />
       <Template task={task} />

src/view/Manage/AssetTask/TaskDetail.jsx

 import React, { useMemo } from 'react';
-import { Modal, Divider, Descriptions, Button, Table } from 'antd';
+import { Modal, Divider, Descriptions, Button, Table, Timeline, Row, Col } from 'antd';
 import { DownloadOutlined } from '@ant-design/icons';
 import LocalStorage from 'local-storage';
 
@@ -18,6 +18,7 @@ const FC = (props) => {
         <Button onClick={() => onCancel?.() }>取消</Button>
       }
     >
+      <AuditProgress task={task} />
       <Basic task={task} />
       <Process task={task} />
       <Template task={task} />
@@ -27,6 +28,86 @@ const FC = (props) => {
 
 export default FC;
 
+export const AuditProgress = ({ task }) => {
+  const auditStatus = useMemo(() => {
+    return ['分发', '提交', '审核'];
+  }, [])
+
+  const backgroundColor = '#F5F5F5';
+  const hightBackgroundColor = '#2E90F1';
+
+  const stateCompleted = (state) => {
+    const index = task?.contents?.findIndex(item => item.title.indexOf(state)!==-1);
+    return (index !== -1);
+  }
+
+  const stateContent = (state) => {
+    return task?.contents?.find(item => item.title.indexOf(state)!==-1);
+  }
+
+  const leftLineColor = (state) => {
+    const index = task?.contents?.findIndex(item => item.title.indexOf(state)!==-1);
+    return (index !== -1) ? hightBackgroundColor : backgroundColor;
+  }
+
+  const rightLineColor = (state) => {
+    const index = auditStatus.findIndex(item => item === state);
+    if (index === auditStatus.length -1) {
+      return hightBackgroundColor;
+    } else {
+      return leftLineColor(auditStatus[index+1]);
+    }
+  }
+
+  return (
+    <React.Fragment>
+      <Divider>审批进度</Divider>
+      <Row>
+      {
+        auditStatus.map((item, index) => {
+          return (
+            <Col span={8} key={index} style={{ height: 6 }} >
+            {
+              <Row align='middle'>
+                <Col span={11} style={{ backgroundColor: leftLineColor(item), height: 4, visibility: (index===0?'hidden':'visible') }}></Col>
+                <Col span={2} className='flex' style={{ justifyContent: 'center' }} >
+                  <div style={{ backgroundColor: leftLineColor(item), width: 16, height: 16, borderRadius: '50%' }}></div>
+                </Col>
+                <Col span={11} style={{ backgroundColor: rightLineColor(item), height: 4, visibility: (index===auditStatus.length-1?'hidden':'visible')  }}></Col>
+              </Row>
+            }
+            </Col>
+          )
+        })
+      } 
+      </Row>
+      <Row className='pt-3'>
+      {
+        auditStatus.map((item, index) => {
+          const currentContent = stateContent(item);
+
+          return (
+            <Col span={8} key={index} >
+              <div style={{ textAlign: 'center' }}>
+                <div>{item}</div>
+                {
+                  stateCompleted(item) && <React.Fragment>
+                    <div>{`审批人: ${currentContent.dealUser}`}</div>
+                    <div>{`审批状态: ${currentContent.status==='1'?'通过':'不通过'}`}</div>
+                    <div>{`审批意见: ${currentContent.value}`}</div>
+                    <div>{`审批日期: ${currentContent.processDate}`}</div>
+                  </React.Fragment>
+                }
+              </div> 
+            </Col>
+          )
+        })
+      } 
+      </Row>
+    </React.Fragment>
+  )
+}
+
 export const Basic = ({ task }) => {
   return (
     <React.Fragment>
@@ -67,7 +148,7 @@ export const Process = ({ task }) => {
       {
         title: '答复内容',
         dataIndex: 'content',
-        render: (_, record) => `${record.title}: ${record.value}`
+        render: (_, record) => `${record.title}意见: ${record.value}`
       }
     ]
   }, [])