crm-mobile/pages_crm/auditList.vue

<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar :title="navTitle" pervent @back="handleBack">
        <!-- #ifndef MP-WEIXIN -->
        <button
          v-if="!showRecord"
          class="button white-btn"
          @click="handleShowRecord">
          审批记录
        </button>
        <!-- #endif -->
      </wk-nav-bar>
			
      <view v-if="!showNoData" class="container">
        <!--审批历史记录-->
        <view v-if="showRecord" 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 v-else class="step-list">
          <view
            v-for="(item, index) in auditInfo.examineFlowList"
            :key="index"
            class="step-list-item">
            <wk-audit-flow-item
              :item-data="item"
              :audit-info="auditInfo" />
          </view>
        </view>
      </view>
			
      <view v-else class="no-data" :style="{backgroundImage: bgUrl('images/no_data.png')}">
        暂无数据
      </view>
    </view>
		
    <!-- #ifdef MP-WEIXIN -->
    <view v-if="!showRecord" class="footer-btn-group">
      <button class="record-btn" @click="handleShowRecord">
        审批记录
      </button>
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
  import { QueryExamineRecordLog, QueryExamineRecordList} from 'API/examine'
  import {mapGetters} from 'vuex'
	
  export default {
    name: 'AuditList',
    data() {
      return {
        id: null,
        showRecord: false,
				
        recordList: [],
        auditInfo: {
          examineFlowList: []
        }
      }
    },
    computed: {
			...mapGetters({
				calcStatus: 'base/calcStatus'
			}),
			navTitle() {
				return this.showRecord ? '审批历史记录' : '审批流程'
			},
			showNoData() {
				if (this.showRecord) return this.recordList.length === 0 || false
				else return this.auditInfo.examineFlowList.length === 0 || false
			}
    },
    onLoad(options) {
      console.log('options', options)
      this.id = options.id
      this.getAuditInfo(options)
      this.getRecordList()
    },
    onBackPress(evt) {
      if (evt.from === 'backbutton' && this.showRecord) {
        this.showRecord = false
        return true // 返回值为 true 时，表示不执行默认的返回
      }
      return false
    },
    methods: {
      /**
       * 背景图url
       * @param {String} val
       */
      bgUrl(val) {
        return `url(${this.$static(val)})`
      },
			
      handleBack() {
        if (this.showRecord) {
          this.showRecord = false
          return
        }
        this.$Router.navigateBack()
      },
			
      /**
       * 获取审批流
       */
      getAuditInfo(options) {
        QueryExamineRecordList({
          recordId: options.id,
          ownerUserId: options.u_id
        }).then(res => {
          this.auditInfo = res || {}
        }).catch()
      },
			
      getRecordList() {
        QueryExamineRecordLog({
          recordId: this.id
        }).then(res => {
          this.recordList = res
        }).catch()
      },
			
      handleShowRecord() {
        this.showRecord = !this.showRecord
      }
    }
  }
</script>

<style scoped lang="scss">
	.container {
		flex: 1;
		overflow: auto;
		background-color: white;
		.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%;
						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;
					}
				}
			}
		}
	
		.step-list {
			background-color: white;
			padding: 30rpx 30rpx 50rpx;
			.step-list-item {
				position: relative;
				margin-bottom: 20rpx;
				&::after {
					content: '';
					position: relative;
					left: 52rpx;
					top: 10rpx;
					width: 1rpx;
					height: 60rpx;
					border-left: 1rpx dashed #ccc;
					display: block;
				}
				&:last-child::after {
					display: none;
				}
			}
		}
	}
	
	.no-data {
		width: 100%;
		height: 100%;
		font-size: 26rpx;
		color: $light;
		text-align: center;
		background: no-repeat center 200rpx $main-bg;
		background-size: 36%;
		padding-top: 430rpx;
	}
	
	.footer-btn-group {
		@include center;
		.record-btn {
			width: 50%;
			height: 70rpx;
			font-size: $wk-font-base;
			color: $theme-color;
			line-height: 70rpx;
			border: 1rpx solid $theme-color;
			border-radius: 70rpx;
		}
	}
</style>