easydo-zcgx-web/src/components/Workflow/index.vue

<template>
    <div class="yh-workflow-dialog">
        <el-dialog v-model="visible" title="审批流程" width="70%" @closed="$emit('closed')">
            <div v-loading="loading" style="flex: 1; overflow: auto;">
                <el-empty v-if="!steps || !steps.length"></el-empty>
                <el-steps v-else :active="active" finish-status="success">
                    <el-step v-for="item in steps" :key="item.historyActivityId" :title="item.historyActivityName" icon="UserFilled" :status="item.class">
                        <template v-if="item.historyActivityType == 'startEvent' || item.historyActivityType == 'endEvent'" #icon>
                            <el-icon size="25"><tjm-icon-mdi-circle-outline></tjm-icon-mdi-circle-outline></el-icon>
                        </template>
                        <template v-if="item.assigneeName" #description>
                            <el-text class="title" truncated>{{ item.assigneeName }}</el-text>
                            <div class="time">{{ item.createTime }}</div>
                            <el-text v-if="item.desc" class="title"  truncated>{{ item.desc }}</el-text>
                        </template>
                    </el-step>
                </el-steps>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import API from "@/api/workflow";

	export default {
		data() {
			return {
                visible: true,
                loading: false,

                active: 0,
                steps: []
            }
		},

		methods: {
            getDetail({ processTaskId, processInstanceId }) {
                if (processTaskId && processInstanceId) {
                    this.loading = true;
                    API.detail(processTaskId, processInstanceId).then(res => {
                        this.loading = false;
                        this.steps = res.flows.slice() || [];
                        this.active = res.flows.findIndex(f => f.class == "process") + 1;
                    }).catch(() => this.loading = false);
                }
            }
		}
	}
</script>

<style lang="scss" scoped>
.yh-workflow-dialog :deep(.el-dialog) {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
  margin: 0 !important;

  .el-dialog__body {
    height: 60vh;
    padding: 0 20px;
    display: flex;
    align-items: center;

    .el-steps .el-step {
      max-width: 220px;

      .el-step__main {
        white-space: nowrap;

        .el-step__description {
          color: var(--el-text-color-primary);

          .title {
            font-size: inherit;
            color: inherit;
          }
        }
      }
    }
  }
}
</style>