任务日志展示方式/样式调整

xiangpei

2025-03-19 81196732928d722d2e84e0a4cbaaf3a0dffe93d7

任务日志展示方式/样式调整

 src/views/flowable/task/myProcess/detail/index.vue

@@ -3,16 +3,18 @@
    <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">
                <el-row>
                  <el-col :span="18">
                <div v-if="formDataObj.current">
                  <div class="current">当前阶段：<span>{{formDataObj.beforeNodeName}}</span></div>
                </div>
@@ -30,19 +32,6 @@
                  >
                  </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"/>
                    </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
@@ -52,6 +41,11 @@
                  >
                  </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 {

 src/views/flowable/task/myProcess/send/index.vue

@@ -3,16 +3,18 @@
    <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-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">
@@ -30,18 +32,6 @@
                  <!--     前置节点可驳回         -->
                  <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>
                      <el-button slot="reference">任务日志</el-button>
                    </el-popover>
                  </div>
                  <div class="before">前置阶段：<span>{{formDataObj.beforeNodeName}}</span></div>
                </div>
@@ -65,6 +55,11 @@
                  >
                  </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;

 src/views/projectProcess/components/LogTimeLine.vue

New file
@@ -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">督办</span>
            了任务
            <span class="tag taskName">{{log.taskName}}</span>
            ，
            <span class="tag db">督办信息</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>