inspectionDetail.vue

<template>
  <view class="inspection-detail">
    <uv-skeleton :loading="!detailData" rows="10" :animate="true">
      <template v-if="!!detailData">
        <view class="detail-info">
          <view class="detail-header">
            <view class="header-left-part">
              <view class="detail-title">
                {{ t('app.inspection.inspectionInformation') }}
              </view>
            </view>
            <view class="header-right-part">
              <uv-tags :text="getStatusInfo()[0]" :color="getStatusInfo()[2]" :bgColor="getStatusInfo()[1]"
                :borderColor="getStatusInfo()[1]" plain shape="circle"></uv-tags>
            </view>
          </view>
          <view class="detail-body">
            <view v-for="rItem in detailList" :key="rItem.key" class="record-detail-row">
              <view class="detail-title">
                {{rItem.label}}
              </view>
              <view class="detail-content">
                {{getDetailValue(rItem.key)}}
              </view>
            </view>
          </view>
        </view>

        <view class="detail-progress">
          <view class="progress-header">
            {{ t('app.inspection.auditProgress') }}
          </view>
          <view class="progress-body">
            <!-- activeIcon="checkmark" inactiveIcon="arrow-right" -->
            <uv-steps :current="processListCurrent" direction="column">
              <uv-steps-item v-for="item in processList" :key="item.id">
                <template v-slot:title>
                  <text style="font-size: 14px;color: #202328">
                    {{getAuditStatus(item.result)[0]}} {{item.createTime}}
                  </text>
                </template>
                <template v-slot:desc>
                  <view class="progress-detail">
                    <view class="create-person" style="display: flex;align-items: center;">
                      <uv-icon name="account" :size="18" style="margin-right: 6px;color: #6D778F;"></uv-icon>
                      <text style="font-size: 26rpx;color: #6D778F;">{{ item.handlerName }}</text>
                      <!-- <uv-text :text="item.handlerName" size="13px" color="#6D778F"></uv-text> -->

                      <uv-text v-if="item.result!==0" style="padding-left: 32rpx;" :text="resultList[item.result]"
                        size="26rpx" :color="item.result !== 2?'#387CF5':'#F33939'"></uv-text>
                    </view>
                    <view v-if="item.result === 0" class="problem-list">
                      <uv-tags v-for="item in problemInfoList" :key="item.id" :text="item.name" class="problem-tag"
                        size="medium" shape="square" plain :closable="false" bgColor="#F2F3F6" color="#6D778F"
                        borderColor="#FFF"></uv-tags>
                    </view>
                    <view class="remark-info">
                      {{ t('maintenance.monitor.project.remark') }}：{{item.remark}}
                    </view>
                    <view class="problem-image">
                      <uv-image :src="getImageUrl(item.pics)" mode="widthFix" radius="8px"></uv-image>
                    </view>
                  </view>
                </template>
              </uv-steps-item>
            </uv-steps>
          </view>
        </view>

        <!-- 待我处理操作按钮 -->
        <view v-if="origin === 'processing'">
          <submitBtn :detailData="detailData"></submitBtn>
        </view>
      </template>
    </uv-skeleton>
  </view>
</template>

<script setup>
  import submitBtn from './components/submitBtn.vue';
  import {
    onLoad
  } from '@dcloudio/uni-app';
  import {
    ref,
    computed
  } from 'vue'
  import {
    doGetInspectionDetailApi
  } from '@/api';
  import {
    getDetailOptions,
    getDetailValueByKey
  } from './config.js'
  import {
    t
  } from '@/plugins/index.js'

  const origin = ref('')
  const detailData = ref(null)
  const processList = ref([])
  const processListCurrent = ref(0)
  const problemInfoList = ref([])
  


  function getStatusInfo() {
    const status = detailData.value.status
		switch (status){
			case 1:
				return [t('dictionary.pending'), '#FDEEEE', '#F32C2C']
			case 2:
				return [t('dictionary.reexamine'), '#FFF7E8', '#FF7E01']
			case 3:
				return [t('dictionary.completed'), '#DDE9FF', '#387CF5']
			default:
				return [t('maintenance.common.unknown'), '', '']
		}
  }

  const resultList = [t('app.inspection.initialSubmission'), t('app.inspection.handled'), t('app.inspection.reviewFailed'), t('app.inspection.recheckPassed')]


  function getAuditStatus(status) {
    // 0 巡检，1 整改，2 审核，3 完成
    switch (status) {
      case 0:
        return [t('VideoShopTour.inspects'), ]
      case 1:
        return [t('VideoShopTour.rectify'), ]
      case 2:
        return [t('VideoShopTour.audits'), ]
      case 3:
        return [t('VideoShopTour.complete'), ]
      default:
        return [t('maintenance.common.unknown'), ]
    }
  }


  const detailList = ref(getDetailOptions(true))

  function getDetailValue(key) {
    return getDetailValueByKey(key, detailData.value)
  }

  function getImageUrl(dataList) {
    if (dataList && dataList.length > 0) {
      return `https://store.keliuyun.com/images/${dataList[0]}`
    } else {
      return ''
    }
  }

  function initPage(id) {
    doGetInspectionDetailApi(id).then(res => {
      if (res.data) {
        detailData.value = res.data
        problemInfoList.value = res.data.sops || []
        processList.value = res.data.handleRecords || []
        // 当前的进度 如果processList最后一个是已关闭状态，则结束
        if(processList.value.length === 0){
          processListCurrent.value = 0
        }else{
          const lastIndex = processList.value.length - 1
          const preVal = processList.value[lastIndex].result === 3 ? 0 : 1
          processListCurrent.value = processList.value.length - preVal
        }
      } else {
        detailData.value = null
      }
    })
  }
  onLoad((options) => {
    console.log(options,'=s=s=s=options');
    // TODO: 暂时写死
    const targetId = options.id
    // const targetId = 419 // 423 424
    origin.value = options.origin || 'record'
    initPage(targetId)
  })
</script>

<style scoped lang="less">
  .inspection-detail {
    min-height: 100vh;
    background-color: #F2F3F6;
    padding: 10px 10px 10px 10px;
  }

  .detail-header {
    height: 42px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #EEF0F3;
    padding: 0px 10px;
    background-color: #FFF;

    .header-left-part {
      display: flex;
      flex-direction: row;
      /* justify-content: center; */
      align-items: center;
    }
  }

  .detail-body {
    font-size: 14px;
    background-color: #FFF;
    padding: 12px 16px 12px 16px;

    .record-detail-row {
      display: flex;
      margin-bottom: 6px;

      .detail-title {
        margin-right: 10px;
        color: #202328;
        /* font-size: 13px; */
        min-width: 56px;
      }

      .detail-content {
        color: #6D778F;
        word-break: break-word;
        white-space: normal;
        white-space: pre-line;
      }
    }
  }

  .detail-info {
    border-radius: 8px;
  }

  .detail-progress {
    background-color: #FFF;
    margin-top: 10px;
    border-radius: 8px;
    padding-bottom: 70px;
  }

  .progress-header {
    height: 42px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #EEF0F3;
    padding: 0px 10px;
  }

  .progress-body {
    padding: 10px 10px;

    .progress-detail {
      display: flex;
      flex-direction: column;

      .create-person {
        font-size: 13px;
        color: #6D778F;
        display: flex;
        flex-direction: row;
        margin: 5px 0px;
      }
    }
  }

  .problem-list {
    display: flex;
    flex-wrap: wrap;

    .problem-tag {
      margin-bottom: 6px;
      margin-right: 10px;
    }
  }

  .remark-info {
    font-size: 13px;
    color: #90949D;
    margin-bottom: 6px;
    white-space: pre-line;
  }
</style>

<style lang="less">
  .detail-progress {
    .uv-steps-item__line--column {
      display: none !important;
    }
  }
</style>