crm-mobile/pages_examine/record.vue

<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar title="审批记录" />

      <view class="container">
        <view class="list">
          <view v-for="(item, index) in recordList" :key="index" class="list-item">
            <view class="icon-box">
              <image v-if="item.examineStatus === 0" :src="$static('images/audit/await.png')" alt="" class="audit-icon" />
              <image v-else-if="item.examineStatus === 1" :src="$static('images/audit/pass.png')" alt="" class="audit-icon" />
              <image v-else-if="item.examineStatus === 2" :src="$static('images/audit/refuse.png')" alt="" class="audit-icon" />
              <image v-else-if="item.examineStatus === 3" :src="$static('images/audit/await.png')" alt="" class="audit-icon" />
              <image v-else-if="item.examineStatus === 4" :src="$static('images/audit/cancel.png')" alt="" class="audit-icon" />
              <image v-else-if="item.examineStatus === 5" :src="$static('images/audit/create.png')" alt="" class="audit-icon" />
              <image v-else-if="item.examineStatus === 6" :src="$static('images/audit/create.png')" alt="" class="audit-icon" />
            </view>
            <view class="content">
              <view class="time">
                <template v-if="item.orderId">
                  第{{ item.orderId }}级
                </template>
                {{ item.examineTime }}
              </view>
              <view class="info">
                <text class="name">
                  {{ item.examineUserName }}
                </text>
                <text class="action">
                  {{ calcStatus(item.examineStatus).label }}
                </text>
                <text v-if="item.examineStatus !== 3">
                  了此审批
                </text>
              </view>
              <view v-if="item.remarks" class="remarks">
                {{ item.remarks }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { QueryExamineRecordLog } from 'API/examine'
  import {mapGetters} from 'vuex'

  export default {
    name: 'ExamineRecord',
    data() {
      return {
        id: null,
        recordList: []
      }
    },
    computed: {
    ...mapGetters({
      calcStatus: 'base/calcStatus'
    })
    },
    onLoad(options) {
      this.routerQuery = options
      this.id = options.id
      this.getRecordList()
    },
    methods: {
      getRecordList() {
        QueryExamineRecordLog({
          recordId: this.id
        }).then(res => {
          this.recordList = res
        }).catch()
      },
    }
  }
</script>

<style scoped lang="scss">
.main-container {
  background-color: white;
}
.container {
  .list {
    padding: 30rpx 60rpx;
    .list-item {
      width: 100%;
      display: flex;
      padding-bottom: 30rpx;
      .icon-box {
        position: relative;
        width: 50rpx;
        .audit-icon {
          position: relative;
          width: 50rpx;
          height: 50rpx;
          display: block;
        }
        &:before {
          position: absolute;
          top: 30rpx;
          left: 50%;
          transform: translateX(-50%);
          content: '';
          width: 2rpx;
          height: 100%;
          /*background: url("~IMG/icon/circle.png") repeat-y center;*/
          /*background-size: 60px 10px;*/
          border-left: 1rpx dotted #cccccc;
          display: block;
        }
      }
      .content {
        flex: 1;
        line-height: 2;
        display: flex;
        flex-direction: column;
        margin-left: 36rpx;

        .time {
          font-size: 26rpx;
          color: $light;
        }
        .info {
          font-size: 30rpx;
          color: $gray;
          .name {}
          .action {}
        }
        .remarks {
          position: relative;
          font-size: 24rpx;
          color: $light;
          line-height: 1.5;
          background-color: $light-bg;
          padding: 20rpx 30rpx;
          margin-top: 25rpx;
          margin-right: 30rpx;
          &:before {
            position: absolute;
            top: -20rpx;
            left: 0;
            content: '';
            width: 0;
            height: 0;
            border-left: 20rpx solid $light-bg;
            border-right: 0 none;
            border-top: 20rpx solid transparent;
            border-bottom: 20rpx solid transparent;
          }
        }
      }

      &:last-child {
        .icon-box:before {
          display: none;
        }
      }
    }
  }
}
</style>