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