From 81196732928d722d2e84e0a4cbaaf3a0dffe93d7 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期三, 19 三月 2025 11:01:58 +0800
Subject: [PATCH] 任务日志展示方式/样式调整

---
 src/views/flowable/task/myProcess/send/index.vue    |  113 +++++++++---------
 src/views/flowable/task/myProcess/detail/index.vue  |   81 ++++++-------
 src/views/projectProcess/components/LogTimeLine.vue |  151 +++++++++++++++++++++++++
 3 files changed, 246 insertions(+), 99 deletions(-)

diff --git a/src/views/flowable/task/myProcess/detail/index.vue b/src/views/flowable/task/myProcess/detail/index.vue
index b8e9952..6dc7580 100644
--- a/src/views/flowable/task/myProcess/detail/index.vue
+++ b/src/views/flowable/task/myProcess/detail/index.vue
@@ -3,55 +3,49 @@
     <el-card class="box-card" >
       <div slot="header" class="clearfix" style="display: flex">
         <div style="flex: 1" class="el-icon-document">{{`浠诲姟璇︽儏锛歚 + this.goBackParams.processName}}</div>
-        <div style="flex: 2">{{projectName + '鈥斺��' + flowName}}</div>
+        <div style="flex: 2; color: #303133">{{projectName + '鈥斺��' + flowName}}</div>
         <el-button style="float: right;" size="mini" type="danger" @click="goBack">鍏抽棴</el-button>
       </div>
       <el-tabs  tab-position="top" v-model="activeName" @tab-click="handleClick">
         <!--琛ㄥ崟淇℃伅-->
         <el-tab-pane label="琛ㄥ崟淇℃伅" name="1">
           <!--鍒濆鍖栨祦绋嬪姞杞借〃鍗曚俊鎭�-->
-          <el-col :span="16" :offset="4" v-loading="formLoading" class="tab-min-height">
+          <el-col :span="24" v-loading="formLoading" class="tab-min-height">
             <div v-if="formDataList && formDataList.length > 0">
               <div v-for="(formDataObj, index) in formDataList" :key="index" class="form-warp" style="position: relative">
-                <div v-if="formDataObj.current">
-                  <div class="current">褰撳墠闃舵锛�<span>{{formDataObj.beforeNodeName}}</span></div>
-                </div>
-                <div v-else-if="formDataList.length > 1">
-                  <div class="before">鍓嶇疆闃舵锛�<span>{{formDataObj.beforeNodeName}}</span></div>
-                </div>
-                <div v-if="formDataObj != null && formDataObj.formJsonObj != null">
-                  <v-form-render  :form-data="formDataObj.formJsonObj.formJson" :ref="'form' + index"/>
-                </div>
-                <div v-else>
-                  <el-alert
-                    title="鏈粦瀹氳〃鍗�"
-                    type="warning"
-                    :closable="false"
-                  >
-                  </el-alert>
-                </div>
-                <div style="position: absolute;top: 10px; right: 20px" v-if="formDataObj.events.length > 0">
-                  <el-popover
-                    placement="right-start"
-                    title="浠诲姟鏃ュ織"
-                    width="800"
-                    trigger="hover"
-                    >
-                    <div v-if="formDataObj.events.length > 0">
-                      <log-view :log-list="formDataObj.events"/>
+                <el-row>
+                  <el-col :span="18">
+                    <div v-if="formDataObj.current">
+                      <div class="current">褰撳墠闃舵锛�<span>{{formDataObj.beforeNodeName}}</span></div>
                     </div>
-                    <el-button slot="reference">浠诲姟鏃ュ織</el-button>
-                  </el-popover>
-                </div>
-                <div v-if="formDataList.length <= 1">
-                  <div class="before_none">鍓嶇疆闃舵锛�<span>涓嶅瓨鍦ㄥ墠缃樁娈�</span></div>
-                  <el-alert
-                    title="涓嶅瓨鍦ㄥ墠缃樁娈�"
-                    type="warning"
-                    :closable="false"
-                  >
-                  </el-alert>
-                </div>
+                    <div v-else-if="formDataList.length > 1">
+                      <div class="before">鍓嶇疆闃舵锛�<span>{{formDataObj.beforeNodeName}}</span></div>
+                    </div>
+                    <div v-if="formDataObj != null && formDataObj.formJsonObj != null">
+                      <v-form-render  :form-data="formDataObj.formJsonObj.formJson" :ref="'form' + index"/>
+                    </div>
+                    <div v-else>
+                      <el-alert
+                        title="鏈粦瀹氳〃鍗�"
+                        type="warning"
+                        :closable="false"
+                      >
+                      </el-alert>
+                    </div>
+                    <div v-if="formDataList.length <= 1">
+                      <div class="before_none">鍓嶇疆闃舵锛�<span>涓嶅瓨鍦ㄥ墠缃樁娈�</span></div>
+                      <el-alert
+                        title="涓嶅瓨鍦ㄥ墠缃樁娈�"
+                        type="warning"
+                        :closable="false"
+                      >
+                      </el-alert>
+                    </div>
+                  </el-col>
+                  <el-col :span="6">
+                    <log-time-line v-if="formDataObj.events.length > 0" :log-list="formDataObj.events"/>
+                  </el-col>
+                </el-row>
               </div>
             </div>
           </el-col>
@@ -123,12 +117,13 @@
 import {flowTaskForm, flowTaskFormDetail} from "@/api/flowable/todo";
 import BpmnViewer from '@/components/Process/viewer';
 import LogView from "@/views/projectProcess/components/LogView";
+import LogTimeLine from "@/views/projectProcess/components/LogTimeLine";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
 export default {
   name: "Record",
   components: {
-    BpmnViewer, LogView
+    BpmnViewer, LogView, LogTimeLine
   },
   props: {},
   data() {
@@ -293,7 +288,9 @@
   padding: 20px;
   margin-top: 5px;
   margin-bottom: 20px;
-  box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
+  margin-left: 3px;
+  margin-right: 3px;
+  box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.1em, rgba(90, 125, 188, 0.05) 0px 0.1em 0.5em;
 }
 .before {
   span {
diff --git a/src/views/flowable/task/myProcess/send/index.vue b/src/views/flowable/task/myProcess/send/index.vue
index e50e92b..32bbe07 100644
--- a/src/views/flowable/task/myProcess/send/index.vue
+++ b/src/views/flowable/task/myProcess/send/index.vue
@@ -3,68 +3,63 @@
     <el-card class="box-card" >
       <div slot="header" class="clearfix" style="display: flex">
         <div style="flex: 1" class="el-icon-document">{{`浠诲姟鍔炵悊锛歚 + processName}}</div>
-        <div style="flex: 2">{{projectName + '鈥斺��' + flowName}}</div>
+        <div style="flex: 2; color: #303133">{{projectName + '鈥斺��' + flowName}}</div>
         <el-button style="float: right;" size="mini" type="danger" @click="goBack">鍏抽棴</el-button>
       </div>
       <el-tabs  tab-position="top" v-model="activeName"  @tab-click="handleClick">
         <!--琛ㄥ崟淇℃伅-->
         <el-tab-pane label="琛ㄥ崟淇℃伅" name="1">
           <!--鍒濆鍖栨祦绋嬪姞杞借〃鍗曚俊鎭�-->
-          <el-col :span="16" :offset="4" v-loading="formLoading"  class="tab-min-height">
+          <el-col :span="24" v-loading="formLoading"  class="tab-min-height">
             <div v-if="formDataList && formDataList.length > 0">
-              <div v-for="(formDataObj, index) in formDataList" :key="index" class="form-warp" style="position: relative">
-                <div v-if="formDataObj.current">
-                  <!--     褰撳墠鑺傜偣鍙崗鍚屻�佽浆鍔炵瓑鎿嶄綔         -->
-                  <div class="op-list">
-                    <el-button size="small" type="primary" :disabled="formDataObj.taskStatus === '鎸傝捣' || submitLoading" v-loading="submitLoading" @click="submitForm">纭骞舵彁浜�</el-button>
-<!--                    <el-button size="small" type="primary" disabled @click="submitForm">鍗忓悓鍔炵悊(鍔熻兘寮�鍙戜腑)</el-button>-->
-                    <el-button size="small" type="primary" v-if="!isWait" :disabled="formDataObj.taskStatus === '鎸傝捣'" @click="openDelegation(formDataList[0].beforeNodeName)">杞姙</el-button>
-                    <el-button v-if="formDataObj.canJump && !isWait" :disabled="formDataObj.taskStatus === '鎸傝捣'" size="small" type="primary" @click="jumpTask()">璺宠繃</el-button>
-                    <el-button v-if="formDataObj.canWait && !isWait" :disabled="formDataObj.taskStatus === '鎸傝捣'" size="small" type="primary" @click="waitTask()">瀹圭己</el-button>
-                    <el-button v-if="formDataObj.canHangup && formDataObj.taskStatus !== '鎸傝捣' && !isWait" size="small" type="primary" @click="hangup">鎸傝捣</el-button>
-                    <el-button v-if="formDataObj.canHangup && formDataObj.taskStatus === '鎸傝捣' && !isWait" size="small" type="primary" @click="cancelHangup">缁撴潫鎸傝捣</el-button>
-                  </div>
-                  <div class="current">褰撳墠闃舵锛�<span>{{formDataObj.beforeNodeName}}</span><span v-if="formDataObj.taskStatus === 'HANGUP'">锛堟寕璧蜂腑锛�</span></div>
-                </div>
-                <div v-else-if="formDataList.length > 1">
-                  <!--     鍓嶇疆鑺傜偣鍙┏鍥�         -->
-                  <div class="reject-but">
-                    <el-button type="danger" size="small" @click="openRejectTask(formDataObj.beforeNodeName)">椹� 鍥�</el-button>
-                    <el-popover
-                      style="margin-left: 10px" v-if="formDataObj.events.length > 0"
-                      placement="right-start"
-                      title="浠诲姟鏃ュ織"
-                      width="800"
-                      trigger="hover"
-                    >
-                      <div v-if="formDataObj.events.length > 0">
-                        <log-view :log-list="formDataObj.events"/>
+              <div v-for="(formDataObj, index) in formDataList" :key="index" class="form-warp">
+                <el-row>
+                  <el-col :span="18" style="position: relative">
+                    <div v-if="formDataObj.current">
+                      <!--     褰撳墠鑺傜偣鍙崗鍚屻�佽浆鍔炵瓑鎿嶄綔         -->
+                      <div class="op-list">
+                        <el-button size="small" type="primary" :disabled="formDataObj.taskStatus === '鎸傝捣' || submitLoading" v-loading="submitLoading" @click="submitForm">纭骞舵彁浜�</el-button>
+                        <!--                    <el-button size="small" type="primary" disabled @click="submitForm">鍗忓悓鍔炵悊(鍔熻兘寮�鍙戜腑)</el-button>-->
+                        <el-button size="small" type="primary" v-if="!isWait" :disabled="formDataObj.taskStatus === '鎸傝捣'" @click="openDelegation(formDataList[0].beforeNodeName)">杞姙</el-button>
+                        <el-button v-if="formDataObj.canJump && !isWait" :disabled="formDataObj.taskStatus === '鎸傝捣'" size="small" type="primary" @click="jumpTask()">璺宠繃</el-button>
+                        <el-button v-if="formDataObj.canWait && !isWait" :disabled="formDataObj.taskStatus === '鎸傝捣'" size="small" type="primary" @click="waitTask()">瀹圭己</el-button>
+                        <el-button v-if="formDataObj.canHangup && formDataObj.taskStatus !== '鎸傝捣' && !isWait" size="small" type="primary" @click="hangup">鎸傝捣</el-button>
+                        <el-button v-if="formDataObj.canHangup && formDataObj.taskStatus === '鎸傝捣' && !isWait" size="small" type="primary" @click="cancelHangup">缁撴潫鎸傝捣</el-button>
                       </div>
-                      <el-button slot="reference">浠诲姟鏃ュ織</el-button>
-                    </el-popover>
-                  </div>
-                  <div class="before">鍓嶇疆闃舵锛�<span>{{formDataObj.beforeNodeName}}</span></div>
-                </div>
-                <div v-if="formDataObj != null && formDataObj.formJsonObj != null">
-                  <v-form-render  :form-data="formDataObj.formJsonObj.formJson" :ref="'form' + index"/>
-                </div>
-                <div v-else>
-                  <el-alert
-                    title="鏈粦瀹氳〃鍗�"
-                    type="warning"
-                    :closable="false"
-                  >
-                  </el-alert>
-                </div>
-                <div v-if="formDataList.length <= 1">
-                  <div class="before_none">鍓嶇疆闃舵锛�<span>涓嶅瓨鍦ㄥ墠缃樁娈�</span></div>
-                  <el-alert
-                    title="涓嶅瓨鍦ㄥ墠缃樁娈�"
-                    type="warning"
-                    :closable="false"
-                  >
-                  </el-alert>
-                </div>
+                      <div class="current">褰撳墠闃舵锛�<span>{{formDataObj.beforeNodeName}}</span><span v-if="formDataObj.taskStatus === 'HANGUP'">锛堟寕璧蜂腑锛�</span></div>
+                    </div>
+                    <div v-else-if="formDataList.length > 1">
+                      <!--     鍓嶇疆鑺傜偣鍙┏鍥�         -->
+                      <div class="reject-but">
+                        <el-button type="danger" size="small" @click="openRejectTask(formDataObj.beforeNodeName)">椹� 鍥�</el-button>
+                      </div>
+                      <div class="before">鍓嶇疆闃舵锛�<span>{{formDataObj.beforeNodeName}}</span></div>
+                    </div>
+                    <div v-if="formDataObj != null && formDataObj.formJsonObj != null">
+                      <v-form-render  :form-data="formDataObj.formJsonObj.formJson" :ref="'form' + index"/>
+                    </div>
+                    <div v-else>
+                      <el-alert
+                        title="鏈粦瀹氳〃鍗�"
+                        type="warning"
+                        :closable="false"
+                      >
+                      </el-alert>
+                    </div>
+                    <div v-if="formDataList.length <= 1">
+                      <div class="before_none">鍓嶇疆闃舵锛�<span>涓嶅瓨鍦ㄥ墠缃樁娈�</span></div>
+                      <el-alert
+                        title="涓嶅瓨鍦ㄥ墠缃樁娈�"
+                        type="warning"
+                        :closable="false"
+                      >
+                      </el-alert>
+                    </div>
+                  </el-col>
+                  <el-col :span="6">
+                    <log-time-line v-if="formDataObj.events.length > 0" :log-list="formDataObj.events"/>
+                  </el-col>
+                </el-row>
               </div>
             </div>
           </el-col>
@@ -189,6 +184,7 @@
 import { flowTaskForm } from "@/api/flowable/todo";
 import {getNextFlowNodeByStart} from "@/api/flowable/todo";
 import LogView from "@/views/projectProcess/components/LogView";
+import LogTimeLine from "@/views/projectProcess/components/LogTimeLine";
 import {rejectTask} from "@/api/flowable/process";
 import {cancelTaskHangup, taskDelegation, taskHangup, taskJump, taskWait} from "@/api/projectProcess/projectProcess";
 
@@ -200,7 +196,8 @@
     MyDept,
     SingleUser,
     MultUser,
-    LogView
+    LogView,
+    LogTimeLine
   },
   props: {},
   data() {
@@ -824,6 +821,8 @@
   padding: 20px;
   margin-top: 5px;
   margin-bottom: 20px;
+  margin-left: 3px;
+  margin-right: 3px;
   box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
 }
 .before {
@@ -843,7 +842,7 @@
 }
 .reject-but {
   position: absolute;
-  top: 4px;
+  top: -4px;
   right: 4px
 }
 .current {
@@ -855,7 +854,7 @@
 }
 .op-list {
   position: absolute;
-  top: 4px;
+  top: -4px;
   right: 4px;
   display: flex;
   justify-content: center;
diff --git a/src/views/projectProcess/components/LogTimeLine.vue b/src/views/projectProcess/components/LogTimeLine.vue
new file mode 100644
index 0000000..bda6f6b
--- /dev/null
+++ b/src/views/projectProcess/components/LogTimeLine.vue
@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <el-timeline>
+      <el-timeline-item
+        v-for="(log, index) in logList"
+        :key="index"
+        :color="getColor(log)"
+        placement="top"
+        :timestamp="log.gmtCreate">
+        <div class="log" v-if="log.eventType === 'FINISHED'">
+          <div>
+            <span class="tag name">{{log.nickName}}</span>
+            <span class="tag op">瀹屾垚</span>
+            浜嗕换鍔�
+            <span class="tag taskName">{{log.taskName}}</span>
+          </div>
+        </div>
+        <div class="log" v-else-if="log.eventType === 'REJECT'">
+          <div>
+            <span class="tag name">{{log.nickName}}</span>
+            <span class="tag reject">椹冲洖</span>
+            浜嗕换鍔�
+            <span class="tag taskName">{{log.taskName}}</span>
+            锛�
+            <span class="tag reject">椹冲洖鍘熷洜</span>
+            锛�
+            <span class="tag">{{log.eventDataObj.reason}}</span>
+          </div>
+        </div>
+        <div class="log" v-else-if="log.eventType === 'HANGUP'">
+          <div>
+            <span class="tag name">{{log.nickName}}</span>
+            <span class="tag reject">鎸傝捣</span>
+            浜嗕换鍔�
+            <span class="tag taskName">{{log.taskName}}</span>
+            锛�
+            <span class="tag reject">鎸傝捣鍘熷洜</span>
+            锛�
+            <span class="tag">{{log.eventDataObj.reason}}</span>
+          </div>
+        </div>
+        <div class="log" v-else-if="log.eventType === 'CANCEL_HANGUP'">
+          <div>
+            <span class="tag name">{{log.nickName}}</span>
+            <span class="tag reject">鍙栨秷鎸傝捣</span>
+            浜嗕换鍔�
+            <span class="tag taskName">{{log.taskName}}</span>
+          </div>
+        </div>
+        <div class="log" v-else-if="log.eventType === 'DELEGATE'">
+          <div>
+            <span class="tag name">{{log.nickName}}</span>
+            灏嗕换鍔�
+            <span class="tag taskName">{{log.taskName}}</span>
+            <span class="tag op">杞姙</span>
+            缁欎簡
+            <span class="tag">{{log.eventDataObj.afterHandlerNames.join('銆�')}}</span>
+          </div>
+        </div>
+        <div class="log" v-else-if="log.eventType === 'JUMP'">
+          <div>
+            <span class="tag name">{{log.nickName}}</span>
+            <span class="tag jump">璺宠繃</span>
+            浜嗕换鍔�
+            <span class="tag taskName">{{log.taskName}}</span>
+            锛�
+            <span class="tag jump">璺宠繃璇存槑</span>
+            锛�
+            <span class="tag">{{log.eventDataObj.desc}}</span>
+          </div>
+        </div>
+        <div class="log" v-else-if="log.eventType === 'WAIT'">
+          <div>
+            <span class="tag name">{{log.nickName}}</span>
+            <span class="tag jump">瀹圭己</span>
+            浜嗕换鍔�
+            <span class="tag taskName">{{log.taskName}}</span>
+            锛�
+            <span class="tag jump">瀹圭己璇存槑</span>
+            锛�
+            <span class="tag">{{log.eventDataObj.desc}}</span>
+          </div>
+        </div>
+        <div class="log" v-else-if="log.eventType === 'SUPERVISE'">
+          <div>
+            <span class="tag name">{{log.nickName}}</span>
+            <span class="tag db">鐫e姙</span>
+            浜嗕换鍔�
+            <span class="tag taskName">{{log.taskName}}</span>
+            锛�
+            <span class="tag db">鐫e姙淇℃伅</span>
+            锛�
+            <span class="tag">{{log.eventDataObj.content}}</span>
+          </div>
+        </div>
+        <div class="log" v-else-if="log.eventType === 'TEAM_WORK'">
+          <div>
+            <span class="tag name">{{log.nickName}}</span>
+            閭�璇蜂簡璋佽皝璋�
+            <span class="tag op">鍗忓悓鍔炵悊</span>
+            <span class="tag taskName">{{log.taskName}}</span>
+          </div>
+        </div>
+      </el-timeline-item>
+    </el-timeline>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "LogTimeLine",
+  props: {
+    logList: {
+      require: true,
+      type: Array
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    getColor(log) {
+      if (log.eventType === 'FINISHED') {
+        return "#67C23A"
+      } else if (log.eventType === 'REJECT') {
+        return "#F56C6C"
+      } else if (log.eventType === 'HANGUP') {
+        return "#409EFF"
+      } else if (log.eventType === 'CANCEL_HANGUP') {
+        return "#409EFF"
+      } else if (log.eventType === 'DELEGATE') {
+        return "#53b1d3"
+      } else if (log.eventType === 'JUMP' || log.eventType === 'WAIT') {
+        return "#E6A23C"
+      } else if (log.eventType === 'SUPERVISE') {
+        return "#F56C6C"
+      } else if (log.eventType === 'TEAM_WORK') {
+        return "#909399"
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.log {
+  color: #606266;
+}
+</style>

--
Gitblit v1.8.0