Merge remote-tracking branch 'origin/master'

zxl

2025-03-21 534394e00cfcc6b4f3dc3073add3ccd9fa937eee

Merge remote-tracking branch 'origin/master'

 src/api/flowable/definition.js

@@ -95,7 +95,7 @@
  })
}

// 读取xml文件
// 保存xml文件
export function saveXml(data) {
  return request({
    url: '/flowable/definition/save',
@@ -104,6 +104,15 @@
  })
}

// 更新xml文件
export function updateXml(data) {
  return request({
    url: '/flowable/definition/update',
    method: 'post',
    data: data
  })
}

// 新增流程定义
export function addDeployment(data) {
  return request({

 src/components/Process/index.vue

@@ -39,6 +39,7 @@
            <el-button size="mini" icon="el-icon-download" @click="saveXML(true)">下载xml</el-button>
            <el-button size="mini" icon="el-icon-picture" @click="saveImg('svg', true)">下载svg</el-button>
            <el-button size="mini" type="primary" @click="save">保存模型</el-button>
            <el-button size="mini" type="warning" @click="update">更新模型</el-button>
            <el-button size="mini" type="danger" @click="goBack">关闭</el-button>
          </el-button-group>
        </div>
@@ -68,6 +69,7 @@
// 引入flowable的节点文件
import FlowableModule from './flowable/flowable.json'
import customControlsModule from './customPanel'
import {taskWait} from "@/api/projectProcess/projectProcess";
export default {
  name: "BpmnModel",
  components: {Designer},
@@ -256,6 +258,39 @@
      this.goBack();
    },

    update() {
      this.$prompt('更新流程不会产生新版本，重要的是你不能修改流程推进中已经执行过的任务节点，否则会引起数据问题！！，<span style="color: red">请在下方输入：我已知晓</span>', '更新流程', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'updateC',
        dangerouslyUseHTMLString: true,
        inputType: 'textarea',
        inputValidator: (value) => {
          if (!value || value.trim() === '') {
            return "请输入：我已知晓"
          }
          if (value !== "我已知晓") {
            return "输入错误，请输入：我已知晓"
          }
          return true
        },
        inputErrorMessage: '请输入：我已知晓'
      }).then(async ({value}) => {
        const process = this.getProcess()
        const xml = await this.saveXML()
        const svg = await this.saveImg()
        const result = {process, xml, svg}
        this.$emit('update', result)
        window.parent.postMessage(result, '*')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },

    // 打开流程文件
    openBpmn(file) {
      const reader = new FileReader()
@@ -348,5 +383,10 @@
    width: 100%;
    margin: 0 0 5px;
  }

}

.updateC {
  width: 500px;
}
</style>

 src/components/Process/style/flow-viewer.scss

@@ -99,7 +99,7 @@
    right: 10px;
  }

  // 完成流程线
  /* ---------完成颜色---------- */
  .highlight.djs-shape .djs-visual > :nth-child(1) {
    fill: #56bb56 !important;
    stroke: #56bb56 !important;
@@ -120,7 +120,7 @@
    stroke: #56bb56 !important;
  }

  // 代办流程线
  /* ----------代办颜色---------- */
  .highlight-todo.djs-shape .djs-visual > :nth-child(1) {
    fill: #559db0 !important;
    stroke: #559db0 !important;
@@ -141,29 +141,51 @@
    stroke: #559db0 !important;
  }

  // 已超时流程线
  /* --------容缺颜色-------- */
  //方块内部颜色
  .highlight-overtime.djs-shape .djs-visual > :nth-child(1) {
    fill: #ff5353 !important;
    stroke: #ff5353 !important;
  .highlight-wait.djs-shape .djs-visual > :nth-child(1) {
    fill: #F56C6C !important;
    stroke: #F56C6C !important;
    fill-opacity: 0.2 !important;
  }
  //文字颜色
  .highlight-overtime.djs-shape .djs-visual > :nth-child(2) {
    fill: #ff5353 !important;
  .highlight-wait.djs-shape .djs-visual > :nth-child(2) {
    fill: #F56C6C !important;
  }
  //人物ui颜色
  .highlight-overtime.djs-shape .djs-visual > path {
    fill: #ff5353 !important;
  .highlight-wait.djs-shape .djs-visual > path {
    fill: #F56C6C !important;
    fill-opacity: 0.2 !important;
    stroke: #ff5353 !important;
    stroke: #F56C6C !important;
  }
  //前面那条线的颜色
  .highlight-overtime.djs-connection > .djs-visual > path {
    stroke: #ff5353 !important;
  .highlight-wait.djs-connection > .djs-visual > path {
    stroke: #F56C6C !important;
}

  // 即将超时流程线
  /* --------跳过颜色--------- */
  .highlight-jump.djs-shape .djs-visual > :nth-child(1) {
    fill: #909399 !important;
    stroke: #909399 !important;
    fill-opacity: 0.2 !important;
  }
  //文字颜色
  .highlight-jump.djs-shape .djs-visual > :nth-child(2) {
    fill: #909399 !important;
  }
  //人物ui颜色
  .highlight-jump.djs-shape .djs-visual > path {
    fill: #909399 !important;
    fill-opacity: 0.2 !important;
    stroke: #909399 !important;
  }
  //前面那条线的颜色
  .highlight-jump.djs-connection > .djs-visual > path {
    stroke: #909399 !important;
  }


  /* --------超时颜色 */
  .highlight-willOvertime.djs-shape .djs-visual > :nth-child(1) {
    fill: #eab24a !important;
    stroke: #eab24a !important;
@@ -234,12 +256,21 @@
      margin-right: 8px;
    }

    .todo {
    .jump {
      padding: 4px;
      background: #ECEDEE;
      background: #909399;
      border: 1px solid rgba(204, 204, 204, 0.1);
      border-radius: 3px;
      color: #666666;
      color: #4f4f4f;
      margin-right: 5px;
    }

    .wait {
      padding: 4px;
      background: #F56C6C;
      border: 1px solid rgba(204, 204, 204, 0.1);
      border-radius: 3px;
      color: #eae9e9;
      margin-right: 5px;
    }


 src/components/Process/viewer/index.vue

@@ -6,9 +6,9 @@
          <span class="intro">状态：</span>
          <div class="finish">已办理</div>
          <div class="processing">处理中</div>
          <div class="todo">未进行</div>
          <div class="overtime">已超时</div>
<!--          <div class="overtime">已超时</div>-->
          <div class="jump">跳 过</div>
          <div class="wait">容 缺</div>
        </div>
        <!-- 流程图显示 -->
        <div v-loading="loading" class="canvas" ref="flowCanvas"></div>
@@ -110,25 +110,34 @@
        const endTask = nodeData[nodeData.length - 1]
        if (n.$type === 'bpmn:UserTask') {
          if (completeTask) {
            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
            if(completeTask.overtime && completeTask.overtime==='red'){
              canvas.addMarker(n.id,  'highlight-willOvertime')
            }
          // else if(completeTask.overtime && completeTask.overtime==='yellow'){
          //     canvas.addMarker(n.id,  'highlight-willOvertime')
          //   }
            n.outgoing?.forEach(nn => {
              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
              if (targetTask) {
                if (todoTask && completeTask.key === todoTask.key && !todoTask.completed) {
                  canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
                  canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
                } else {
                  canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                  canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                }

            if (completeTask.hasJump) {
              canvas.addMarker(n.id,  'highlight-jump')
            } else if (completeTask.hasWait) {
              canvas.addMarker(n.id,  'highlight-wait')
            } else {
              canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
              if(completeTask.overtime && completeTask.overtime==='red' || completeTask.overtime==='yellow'){
                canvas.addMarker(n.id,  'highlight-willOvertime')
              }
            }
            n.outgoing?.forEach(nn => {
              if (completeTask.hasJump) {
                canvas.addMarker(nn.id,  'highlight-jump')
              } else if (completeTask.hasWait) {
                canvas.addMarker(nn.id,  'highlight-wait')
              } else {
                const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
                if (targetTask) {
                  if (todoTask && completeTask.key === todoTask.key && !todoTask.completed) {
                    canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
                    canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
                  } else {
                    canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                    canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                  }
                }
              }

            })
          }
        }
@@ -139,9 +148,14 @@
            n.outgoing?.forEach(nn => {
              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
              if (targetTask) {

                canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                if (targetTask.hasJump) {
                  canvas.addMarker(nn.id,  'highlight-jump')
                } else if (targetTask.hasWait) {
                  canvas.addMarker(nn.id,  'highlight-wait')
                } else {
                  canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                  canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                }
              }
            })
          }
@@ -153,8 +167,14 @@
            n.outgoing?.forEach(nn => {
              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
              if (targetTask) {
                canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                if (targetTask.hasJump) {
                  canvas.addMarker(nn.id,  'highlight-jump')
                } else if (targetTask.hasWait) {
                  canvas.addMarker(nn.id,  'highlight-wait')
                }  else {
                  canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                  canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                }
              }
            })
          }
@@ -162,8 +182,14 @@
          n.outgoing.forEach(nn => {
            const completeTask = nodeData.find(m => m.key === nn.targetRef.id)
            if (completeTask) {
              canvas.addMarker(nn.id, 'highlight')
              canvas.addMarker(n.id, 'highlight')
              if (completeTask.hasJump) {
                canvas.addMarker(nn.id,  'highlight-jump')
              } else if (completeTask.hasWait) {
                canvas.addMarker(nn.id,  'highlight-wait')
              } else {
                canvas.addMarker(nn.id, 'highlight')
                canvas.addMarker(n.id, 'highlight')
              }
              return;
            }
          })

 src/views/flowable/definition/model.vue

@@ -5,6 +5,7 @@
      :xml="xml"
      :is-view="false"
      @save="save"
      @update="update"
      @showXML="showXML"
    />
    <!--在线查看xml-->
@@ -17,7 +18,7 @@
  </div>
</template>
<script>
import {readXml, roleList, saveXml, userList,expList} from "@/api/flowable/definition";
import {readXml, roleList, saveXml, userList, expList, updateXml} from "@/api/flowable/definition";
import BpmnModel from '@/components/Process'
import vkBeautify from 'vkbeautify'
import hljs from 'highlight.js'
@@ -101,6 +102,21 @@
        this.$tab.closeOpenPage(obj);
      })
    },
    /** 更新xml */
    update(data) {
      const params = {
        deploymentId: this.$route.query && this.$route.query.deployId,
        name: data.process.name,
        category: data.process.category,
        xml: data.xml
      }
      updateXml(params).then(res => {
        this.$modal.msgSuccess(res.msg)
        // 关闭当前标签页并返回上个页面
        const obj = { path: "/flowable/definition", query: { t: Date.now()} };
        this.$tab.closeOpenPage(obj);
      })
    },
    /** 指定流程办理人员列表 */
    getDataList() {
      userList().then(res => {

 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 {

 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;

 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>