refactor(Detail Page): 修改审批时间轴为垂直

src/pages/Detail/FlowModal.js

@@ -384,19 +384,30 @@ function FlowModal(props) {
   };
 
   const getDescription = node => {
-    let str = `审批人：${node.AuditorUser?.CName || '-'}`;
-    if (node.desc) {
-      return (
+    // let str = `审批人：${node.AuditorUser?.CName || '-'}`;
+    // if (node.desc) {
+    //   return (
+    //     <div>
+    //       {str}
+    //       <div>
+    //         <Tooltip title={node.desc}>
+    //           <span style={{ color: '#1A73E8', textDecoration: 'undeline' }}>审批意见</span>
+    //         </Tooltip>
+    //       </div>
+    //     </div>
+    //   );
+    // }
+    console.log(node);
+    let str = (
+      <div>
+        审批人：{node.AuditorUser?.CName || '-'}
         <div>
-          {str}
-          <div>
-            <Tooltip title={node.desc}>
-              <span style={{ color: '#1A73E8', textDecoration: 'undeline' }}>审批意见</span>
-            </Tooltip>
-          </div>
+          <span style={{ color: '#1A73E8', textDecoration: 'undeline' }}>
+            审批意见：{node.desc || '-'}
+          </span>
         </div>
-      );
-    }
+      </div>
+    );
     return str;
   };
 
@@ -548,20 +559,27 @@ function FlowModal(props) {
               />
             </div>
             {/* <Spin spinning={loading.global}> */}
-            {stepsData.map((item, idx) => (
-              <div key={`${item.name}_${idx}`} style={{ marginBottom: '20px' }}>
-                <div style={{ marginBottom: '4px' }}>{item.name}</div>
-                <Steps size="small" current={item.current} status={item.status}>
-                  {item.list.map(node => (
-                    <Step
-                      key={`${node.id}_${node.node}`}
-                      title={node.node}
-                      description={getDescription(node)}
-                    />
-                  ))}
-                </Steps>
-              </div>
-            ))}
+            <div style={{ display: 'flex', justifyContent: 'space-around' }}>
+              {stepsData.map((item, idx) => (
+                <div key={`${item.name}_${idx}`} style={{ marginTop: '20px', display: 'inline' }}>
+                  <div style={{ marginBottom: '4px' }}>{item.name}</div>
+                  <Steps
+                    direction="vertical"
+                    size="small"
+                    current={item.current}
+                    status={item.status}
+                  >
+                    {item.list.map(node => (
+                      <Step
+                        key={`${node.id}_${node.node}`}
+                        title={node.node}
+                        description={getDescription(node)}
+                      />
+                    ))}
+                  </Steps>
+                </div>
+              ))}
+            </div>
             {/* </Spin> */}
           </Col>
         </Row>

src/pages/Detail/Index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef, useMemo } from 'react';
-import { UnorderedListOutlined, PlusOutlined } from '@ant-design/icons';
+import { UnorderedListOutlined, PlusOutlined, InfoOutlined } from '@ant-design/icons';
 import { Button, Modal, message, Alert, Avatar } from 'antd';
 import { connect } from 'dva';
 import styles from './Index.less';
@@ -512,7 +512,7 @@ function Detail(props) {
   }, [versionList]);
 
   return (
-    <div>
+    <>
       <div className={styles.top}>
         <div>
           <Button type="primary" style={{ marginRight: 20 }} onClick={() => setFlowVisible(true)}>
@@ -573,54 +573,60 @@ function Detail(props) {
           onChange={e => exportExcl(e.target.files)}
         />
       </div>
-      <TimeNode
-        flow={flow}
-        flowDetail={flowDetail}
-        isAuditor={isAuditor}
-        version={version}
-        templateId={templateId}
-        projectId={projectId}
-        setAuditVisible={setAuditVisible}
-      ></TimeNode>
-      <div
-        className={styles.content}
-        style={{
-          // 合同清单先显示附件再显示清单详情
-          flexDirection: version?.TemplateNodeInfo?.flow_id == 9 ? 'column-reverse' : 'column',
-        }}
-      >
-        {/* 判断是否为比对模式 */}
-        {compareList.length == 2 ? (
-          <>
-            <Alert
-              message={`比对结果：${updateCount.diff}项差异。${updateCount.add}项新增`}
-              type="info"
-            />
-            <div className={styles.sheetBox}>{compareList.map(renderSheetDom)}</div>
-          </>
-        ) : (
-          <div className={styles.sheetBox}>
-            {version.id && (
-              <LuckySheet
-                className={styles.sheet}
-                ref={sheetRef}
-                onClickCell={onClickCell}
-                version={version}
-                templateId={templateId}
-                getUser={getUser}
-                onUpdate={onUpdate}
-                onDelSheet={onDelSheet}
+      <div style={{ display: 'flex' }}>
+        <TimeNode
+          flow={flow}
+          flowDetail={flowDetail}
+          isAuditor={isAuditor}
+          version={version}
+          templateId={templateId}
+          projectId={projectId}
+          setAuditVisible={setAuditVisible}
+          stepDirection="vertical"
+          style={{ maxWidth: '20%', display: 'inline', marginRight: '20px' }}
+        ></TimeNode>
+        <div
+          className={styles.content}
+          style={{
+            width: '100%',
+            // 合同清单先显示附件再显示清单详情
+            flexDirection: version?.TemplateNodeInfo?.flow_id == 9 ? 'column-reverse' : 'column',
+          }}
+        >
+          {/* 判断是否为比对模式 */}
+          {compareList.length == 2 ? (
+            <>
+              <Alert
+                message={`比对结果：${updateCount.diff}项差异。${updateCount.add}项新增`}
+                type="info"
               />
-            )}
-          </div>
-        )}
+              <div className={styles.sheetBox}>{compareList.map(renderSheetDom)}</div>
+            </>
+          ) : (
+            <div className={styles.sheetBox}>
+              {version.id && (
+                <LuckySheet
+                  className={styles.sheet}
+                  ref={sheetRef}
+                  onClickCell={onClickCell}
+                  version={version}
+                  templateId={templateId}
+                  getUser={getUser}
+                  onUpdate={onUpdate}
+                  onDelSheet={onDelSheet}
+                />
+              )}
+            </div>
+          )}
 
-        <FormAndFilesNode
-          formData={version?.ding_schema}
-          excelFileList={excelFileList}
-          version={version}
-        />
+          <FormAndFilesNode
+            formData={version?.ding_schema}
+            excelFileList={excelFileList}
+            version={version}
+          />
+        </div>
       </div>
+
       <CommentContent
         title="单元格沟通记录"
         comment={comment}
@@ -694,7 +700,7 @@ function Detail(props) {
         luckysheet={sheetRef}
         templateId={templateId}
       />
-    </div>
+    </>
   );
 }
 

src/pages/Detail/TimeNode.js

@@ -12,7 +12,7 @@ function TimeNode(props) {
   const {
     isAuditor,
     flowDetail,
-
+    style,
     flow,
     versionList,
     version,
@@ -20,7 +20,7 @@ function TimeNode(props) {
     setAuditVisible,
     projectId,
     dispatch,
-
+    stepDirection,
     currentUser,
   } = props;
   const { current, list, active } = flow;
@@ -29,25 +29,29 @@ function TimeNode(props) {
     let str = node?.AuditRoleInfo
       ? `审批人：${node?.AuditRoleInfo.Name || '-'}`
       : `审批人：${node?.AuditorUser.CName || '-'}`;
-    if (node.desc) {
-      return (
+
+    return (
+      <div>
+        {str}
         <div>
-          {str}
-          <div>
-            <Tooltip title={node.desc}>
-              <span style={{ color: '#1A73E8', textDecoration: 'undeline' }}>审批意见</span>
-            </Tooltip>
-          </div>
+          <span style={{ color: '#1A73E8', textDecoration: 'undeline' }}>
+            审批意见：{node.desc || '-'}
+          </span>
         </div>
-      );
-    }
-    return str;
+      </div>
+    );
+
+    // return str;
   };
 
   if (!list || list.FlowNodes?.length != 0) {
     return (
-      <>
-        <Steps current={current} status={active == 0 ? 'error' : 'process'}>
+      <div style={style}>
+        <Steps
+          direction={stepDirection || 'horizontal'}
+          current={current}
+          status={active == 0 ? 'error' : 'process'}
+        >
           {list.FlowNodes.map(item => (
             <Step key={item.id} title={item.node} description={getDescription(item)} />
           ))}
@@ -62,7 +66,7 @@ function TimeNode(props) {
             </Button>
           </div>
         )}
-      </>
+      </div>
     );
   }
   // else {