mosr-web/src/views/workflow/common/OperationRender.vue

<template>
  <div style="margin: 10px">
    <el-timeline>
      <el-timeline-item v-for="(operation,index) in operationList"
                        :key="index" :timestamp="operation.startTime"
                        :icon="operation.icon"
                        :color="operation.color"
                        size="large"
                        placement="top">

        <el-card>
          <div style="display: flex;">
<!--            <avatar-ellipsis :row="3" v-if="operation.userInfo.length > 0" :user-info="operation.userInfo"/>-->
            <div v-for="(user,index) in operation.userInfo" :key="index" class="avatar_name">
              <name-circle :user="user"/>
            </div>
            <div style="margin-left: 10px;">
              <div style="color: #c0bebe">{{ operation.operationName }}</div>
              <div style="font-size: 14px; font-weight: bold;">{{ operation.remark }}</div>
            </div>
          </div>
        </el-card>
      </el-timeline-item>
      <el-timeline-item :color="timeline.color" :icon="timeline.icon" size="large">
        <el-card style="font-size: 16px;font-weight: bold;">
          {{ timeline.context }}
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup>
import {CircleCheckFilled, Close, Loading, MoreFilled} from "@element-plus/icons-vue";
import AvatarEllipsis from '../process/common/AvatarEllipsis.vue'
import NameCircle from "@/components/NameCircle.vue";

const props = defineProps({
  operationList: {
    type: Array,
    default: () => {
      return []
    }
  },
  state: {
    type: String,
    default: () => {
      return '1'
    }
  }
})

const timeline = ref()

const init = () => {
  switch (props.state) {
    case '1':
      timeline.value = {
        color: '#f78f5f',
        icon: 'MoreFilled',
        context: '审批进行中'
      }
      break
    case '2':
      timeline.value = {
        color: '#0bbd87',
        icon: 'CircleCheckFilled',
        context: '审批通过'
      }
      break
    case '3':
      timeline.value = {
        color: '#f56c6c',
        icon: 'CircleCloseFilled',
        context: '审核已驳回'
      }
      break
    case '4':
      timeline.value = {
        color: '#0bbd87',
        icon: 'CircleCheckFilled',
        context: '审批通过'
      }
      break
    default:
      break
  }
  // let operationListNew = []
  for (let i = 0; i < props.operationList?.length; i++) {
    let operationNew = initOperationFun(props.operationList[i])
    let userList = []
    if (operationNew.userInfo) {
      for (let user of operationNew.userInfo) {
        let userNew = initUser(user, operationNew.operation)
        userList.push(userNew)
      }
      operationNew.userInfo = userList
    }
    // operationListNew.push(operationNew)
    // this.operationList.push(operationNew)
    props.operationList[i] = operationNew
  }
}
//获取到对应附件的地址

const getAttachmentList = (attachments, image) => {
  let result = [];
  if (attachments) {
    for (let attachment of attachments) {
      if (attachment.isImage === image) {
        result.push(attachment)
      }
    }
  }
  return result;
}

const initUser = (user, type) => {
  let state = user.state
  //创建节点
  if (state === 'CREATE') {
    user["icon"] = 'CircleCheckFilled'
    user["color"] = "#0bbd87"
  }
  //审批通过
  if (state === 'AGREE' || state === 'AUTO_PASS') {
    user["icon"] = 'CircleCheckFilled'
    user["color"] = "#0bbd87"
  }
  if (type === "CC") {
    user["icon"] = "Promotion"
    user["color"] = "#3395f8"
  }
  //审批处理中
  if (state === 'RUNNING') {
    user["icon"] = 'Loading'
    user["color"] = "#f78f5f"
    user["class"] = 'is-loading'
  }
  //拒绝后评论
  if (state === 'REFUSE') {
    user["icon"] = 'Close'
    user["color"] = "#f56c6c"
  }
  if (state === 'PASS') {
    user["icon"] = 'MoreFilled'
    user["color"] = "#c0c4cc"
  }
  return user;
}

const initOperationFun = (operation) => {
  let state = operation.state
  let type = operation.operation
  //创建节点
  if (type === 'CREATE') {
    operation["icon"] = "CircleCheckFilled"
    operation["color"] = "#0bbd87"
  }
  if (type === 'OPINION') {
    //审批通过
    if (state === 'AGREE' || state === 'AUTO_PASS') {
      operation["icon"] = "CircleCheckFilled"
      operation["color"] = "#0bbd87"
      operation["remark"] = "  (已同意)"
    }
    if (state === 'PASS') {
      operation["icon"] = "SemiSelect"
      operation["color"] = "#c0c4cc"
    }
    //审批处理中
    if (state === 'RUNNING') {
      operation["icon"] = "Loading"
      operation["color"] = "#f78f5f"
      operation["remark"] = "  (处理中)"
    }
    //回退
    if (state === 'ROLLBACK') {
      operation["icon"] = "RefreshLeft"
      operation["color"] = "#f78f5f"
      operation["remark"] = "  (回退成功)"
    }
    //拒绝操作
    if (state === 'REFUSE' || state === 'AUTO_REFUSE') {
      operation["icon"] = "CircleCloseFilled"
      operation["color"] = "#f56c6c"
      operation["remark"] = "  (拒绝)"
    }
  }
  //抄送
  if (type === 'CC') {
    operation["icon"] = "Promotion"
    operation["color"] = "#3395f8"
    operation["remark"] = "  (抄送成功)"
  }
  //评论
  if (type === 'COMMENT') {
    //评论
    if (state === 'COMMENT') {
      operation["icon"] = "ChatDotRound"
      operation["color"] = "#0bbd87"
      operation["remark"] = "  (添加了评论)"
    }
  }
  //触发器发送http请求
  if (type === 'TRIGGER_WEBHOOK') {
    operation["icon"] = "Share"
    if (state === 'SUCCESS') {
      operation["color"] = "#0bbd87"
      operation["remark"] = "  (成功)"
    } else if (state === 'RUNNING') {
      operation["color"] = "#f78f5f"
      operation["remark"] = "  (请求中)"
    } else {
      operation["color"] = "#f56c6c"
      operation["remark"] = "  (失败)"
    }
  }

  //触发器发送邮件
  if (type === 'TRIGGER_EMAIL') {
    operation["icon"] = "Message"
    if (state === 'SUCCESS') {
      operation["color"] = "#0bbd87"
      operation["remark"] = "  (成功)"
    } else if (state === 'RUNNING') {
      operation["color"] = "#f78f5f"
      operation["remark"] = "  (发送中)"
    } else {
      operation["color"] = "#f78f5f"
      operation["remark"] = "  (发送中)"
    }
  }
  return operation;
}
init()
</script>

<style lang="scss" scoped>

:deep .el-card__body, .el-main {
  padding: 10px;
}

.avatar_name {
  //width: 45px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-right: 5px;

}

.el-timeline-item__node {
  position: absolute;
  bottom: 20px;
  right: 1px;
}

</style>