对接接口

13404089107

2 天以前 993e5fd593398926af72af660cb5ed6aba8e4e2b

 laboratory/src/components/approvalProcess/index.vue

@@ -1,44 +1,25 @@
<template>
  <div class="approval-process">
    <el-timeline>
      <el-timeline-item
        v-for="(activity, index) in processData"
        :key="index"
        :type="activity.type"
      >
      <el-timeline-item v-for="(activity, index) in processData" :key="index" :type="activity.type">
        <div v-if="activity.mode === 'card'">
          <div
            class="member-list-card"
            v-for="(group, groupIndex) in activity.groups"
            :key="groupIndex"
          >
          <div class="member-list-card" v-for="(group, groupIndex) in activity.groups" :key="groupIndex">
            <div class="member-item">
              <div class="member-title">
                {{ group.title }}
              </div>
              <div class="flex-over">
                <div
                  class="people-list"
                  v-for="(member, memberIndex) in group.members"
                  :key="memberIndex"
                >
                <div class="people-list" v-for="(member, memberIndex) in group.members" :key="memberIndex">
                  <div class="people-item">
                    <img :src="member.avatar" alt="" class="people-img" />
                    <div class="member-name">{{ member.name }}</div>
                  </div>
                  <div class="member-status">
                    <div
                      class="member-status-text"
                      :class="
                        member.status === 'approved' ? 'success' : 'warning'
                      "
                    >
                      {{ member.status}}
                    <div class="member-status-text" :class="member.status === 'approved' ? 'success' : 'warning'
                      ">
                      {{ member.status }}
                    </div>
                    <div
                      v-if="member.status === '已确认'"
                      class="member-status-time"
                    >
                    <div v-if="member.status === '已确认'" class="member-status-time">
                      {{ member.approveTime }}
                    </div>
                  </div>
@@ -47,18 +28,17 @@
            </div>
          </div>
        </div>
        <div
          v-else
          class="approval-process-item"
          :class="activity.type === 'primary' ? '' : 'approval-process-item1'"
        >
          <div
            v-for="(field, idx) in activity.fields"
            :key="idx"
            style="margin-bottom: 6px"
          >
            <span>{{ field.label }}</span>
            <span>{{ field.value }}</span>
        <div v-else class="approval-process-item" :class="activity.type === 'primary' ? '' : 'approval-process-item1'">
          <div v-for="(field, idx) in activity.fields" :key="idx" style="margin-bottom: 6px">
            <span v-if="field.type == 'img'">
              <el-image style="width: 50px; height: 50px;margin-left: 40px;" v-if="field.value" :src="field.value"
                    :preview-src-list="[field.value]">
                  </el-image>
            </span>
            <span v-else>
              <span>{{ field.label }}</span>
              <span>{{ field.value }}</span>
            </span>
          </div>
        </div>
      </el-timeline-item>
@@ -217,27 +197,21 @@
    // }

    &:nth-child(1) {
      background: linear-gradient(
        to bottom,
        rgba(5, 160, 193, 0.2) 0%,
        rgba(5, 242, 194, 0) 70%
      );
      background: linear-gradient(to bottom,
          rgba(5, 160, 193, 0.2) 0%,
          rgba(5, 242, 194, 0) 70%);
    }

    &:nth-child(2) {
      background: linear-gradient(
        to bottom,
        rgba(255, 77, 79, 0.2) 0%,
        rgba(255, 242, 194, 0) 70%
      );
      background: linear-gradient(to bottom,
          rgba(255, 77, 79, 0.2) 0%,
          rgba(255, 242, 194, 0) 70%);
    }

    &:nth-child(3) {
      background: linear-gradient(
        to bottom,
        rgba(250, 199, 20, 0.21) 0%,
        rgba(255, 242, 194, 0) 70%
      );
      background: linear-gradient(to bottom,
          rgba(250, 199, 20, 0.21) 0%,
          rgba(255, 242, 194, 0) 70%);
    }

    .member-item {
@@ -256,12 +230,14 @@
        text-align: left;
        padding-left: 17px;
      }

      .flex-over {
        margin-top: 12px;
        flex: 1;
        overflow: auto;
        height: 100%;
      }

      .people-list {
        display: flex;
        justify-content: space-between;
@@ -270,6 +246,7 @@
        margin-top: 12px;

        display: flex;

        .people-item {
          display: flex;
          align-items: center;
@@ -281,12 +258,14 @@
          border-radius: 50%;
          margin-right: 10px;
        }

        .member-status {
          align-items: flex-end;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }

        .member-status-text {
          width: 52px;
          height: 22px;
@@ -295,6 +274,7 @@
          text-align: center;
          border: 1px solid rgba(0, 0, 0, 0.15);
        }

        .warning {
          background: #fffbe6;
          border-radius: 4px;
@@ -304,12 +284,14 @@
          font-size: 12px;
          color: #faad14;
        }

        .success {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: rgba(0, 0, 0, 0.88);
        }

        .member-status-time {
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;