1

src/components/CustomPages/SK/OperateLog.css

@@ -156,59 +156,6 @@
   /* margin-right: 15px; */
   width: 120px;
   height: 40px;
-  background-color: #70AD47;
-  color: white;
-  border: 1px solid white;
-  /* border: 1px solid #ddd; */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 20px;
-  position: relative;
-  border-radius: 50px;
-  margin-left: 25px;
-}
-
-/* 超时处理 */
-.stepxOutTime {
-  /* margin-right: 15px; */
-  width: 120px;
-  height: 40px;
-  background-color: #FFC000;
-  color: white;
-  border: 1px solid white;
-  /* border: 1px solid #ddd; */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 20px;
-  position: relative;
-  border-radius: 50px;
-  margin-left: 25px;
-}
-
-.stepxOver {
-  width: 120px;
-  height: 40px;
-  background-color: #303133;
-  color: white;
-  border: 1px solid white;
-  /* border: 1px solid #ddd; */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 20px;
-  position: relative;
-  border-radius: 50px;
-  margin-left: 25px;
-}
-
-/* 未处理 */
-.stepxEnable {
-  /* margin-right: 15px; */
-  width: 120px;
-  height: 40px;
-  background-color: #A5A5A5;
   color: white;
   border: 1px solid white;
   /* border: 1px solid #ddd; */

src/components/CustomPages/SK/SK006ShowOperateLog.js

@@ -1,4 +1,4 @@
-import { Button, Descriptions, Badge, Popconfirm, Row, Col, Form, Input, Select, Table } from 'antd';
+import { Button, Descriptions, Badge, Popconfirm, Row, Col, Form, Input, Select, Table, Modal } from 'antd';
 import React from 'react';
 import {
   initFilter,
@@ -8,6 +8,7 @@ import {
   showApprove,
   guid,
   ShowDateTime,
+  GetFileModel,
 } from '../../../utils/common.js';
 import ReactToPrint from 'react-to-print';
 import { ExportToExcel } from '@woowalker/feui';
@@ -17,6 +18,7 @@ import moment from 'moment';
 import { message } from 'antd/lib/index';
 import styles from './OperateLog.css';
 import config from '../../../config.js';
+import FormPage from '../../FormPage';
 
 class SK006ShowOperateLog extends React.Component {
   constructor(props) {
@@ -26,6 +28,17 @@ class SK006ShowOperateLog extends React.Component {
       riskCount: 1,
       riskHeight: 50,
       opEnd: null,
+      detailForm: {
+        isShow: false,
+        formCode: '',
+        title: '',
+        ID: '',
+      },
+      fileData: [],
+      fileForm: {
+        title: '',
+        visible: false,
+      },
       // dateFirst: [
       //     [{ OPERATEPOINT: 10 }, { OPERATEPOINT: 20 }, { OPERATEPOINT: 30 }, { OPERATEPOINT: 40 }],
       //     [{ OPERATEPOINT: 48 }, { OPERATEPOINT: 50 }, { OPERATEPOINT: 60 }, { OPERATEPOINT: 70 }, { OPERATEPOINT: 80 }],
@@ -87,6 +100,35 @@ class SK006ShowOperateLog extends React.Component {
       },
     });
   };
+  showDetailModalPage = (ID, CODE) => {
+    if (ID == null) return message.warning('暂无待办');
+    const newtmpData = {
+      data: {
+        id: ID,
+        // USER_ID: USER_ID,
+      },
+      formCode: CODE,
+    };
+    this.setState({ tmpDataPage: newtmpData }, () => {
+      var detailForm = {
+        isShow: true,
+        title: '',
+      };
+      console.log(this.state.tmpDataPage, '00');
+      this.setState({
+        detailForm: detailForm,
+      });
+    });
+  };
+  //详情弹窗关闭（隐藏）
+  detailFormClose = () => {
+    var detailForm = {
+      isShow: false,
+    };
+    this.setState({
+      detailForm: detailForm,
+    });
+  };
   render() {
     const { data, riskCount, dataRiskMore, opEnd, riskHeight } = this.state;
     const enums = this.props.data.enums ? this.props.data.enums : this.props.app.enums;
@@ -108,14 +150,22 @@ class SK006ShowOperateLog extends React.Component {
               data?.map((item, index) => {
                 // 判断当前item的logList中是否所有STATUS都是0
                 const allStatusZero = item.logList?.every((log) => log.STATUS === 0);
+                // 获取上一个item的FORM_NAME
+                const prevFormName = index > 0 ? data[index - 1].FORM_NAME : null;
+                // 判断当前FORM_NAME是否与上一个重复
+                const isDuplicate = item.FORM_NAME === prevFormName;
+
                 {
                   return (
                     <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start' }}>
                       <div style={{ width: '150px', textAlign: 'center', marginRight: '30px' }}>
+                        {/* 当不是重复的FORM_NAME时才显示步骤名称 */}
+                        {!isDuplicate && (
                           <div className={allStatusZero ? styles.stepno : styles.step} id="ste1">
                             {item.FORM_NAME}
                           </div>
-                        {index < data.length - 1 && (
+                        )}
+                        {!isDuplicate && index < data.length - 1 && (
                           <div className={allStatusZero ? styles.rectangleno : styles.rectangle} id="step1"></div>
                         )}
                       </div>
@@ -134,17 +184,21 @@ class SK006ShowOperateLog extends React.Component {
                                     }}
                                     key={index1}
                                   >
-                                    <div>
+                                    <div onClick={() => this.showDetailModalPage(item1.ID, item1.CODE)}>
                                       <div
-                                        className={
+                                        className={styles.stepx}
-                                          item1.STATUS == 0
+                                        style={{
-                                            ? styles.stepxEnable //hui
+                                          backgroundColor:
-                                            : item1.STATUS == 5
+                                            item1.STATUS === 0
-                                            ? styles.stepx //lv
+                                              ? '#A5A5A5' // STATUS=0 → 灰色背景
-                                            : item1.STATUS == 10
+                                              : item1.STATUS === 10
-                                            ? styles.stepxOutTime //cheng
+                                              ? '#FFC000' // STATUS=10 → 橙色背景
-                                            : styles.stepx //hei
+                                              : item1.STATUS === 20
-                                        }
+                                              ? '#f56c6c' // STATUS=20 → 红色背景
+                                              : item1.STATUS === 16
+                                              ? '#ADCDEA' // STATUS=16 → 蓝色背景
+                                              : '#70AD47', // STATUS=5，15 → 绿色背景
+                                        }}
                                         id="step20"
                                       >
                                         {item1.NAME}
@@ -174,6 +228,20 @@ class SK006ShowOperateLog extends React.Component {
             {/* 隐患整改记录 */}
           </tbody>
         </table>
+        <div style={{ display: 'inline-block' }}>
+          <Modal
+            visible={this.state.detailForm.isShow}
+            title={this.state.detailForm.title}
+            maskClosable={false}
+            closeModal={this.detailFormClose}
+            onCancel={this.detailFormClose}
+            footer={null}
+            width="95%"
+          >
+            <FormPage {...this.state.tmpDataPage} />
+          </Modal>
+        </div>
+        {GetFileModel(Modal, FormPage, this, this.state.fileForm.visible)}
       </div>
     );
   }