equipment/src/remote/index.vue

<template>
  <div>
    <van-tabs v-model="active">
      <van-tab>
        <!-- oncontextmenu='return false'： 禁止右键、ondragstart='return false'：禁止拖动 -->
        <img :src="search" style="width: 100%;height: 100%;" oncontextmenu="return false;" ondragstart="return false;">
        <el-card v-for="item in list" v-show="loading" :key="item.id" class="box-card" style="margin: 10px auto;">
          <van-cell-group>
            <van-field v-model="item.jianyanjindu" label="检验进度：" label-width="120px" readonly />
            <van-field v-model="item.jianyanleibie" label="检验类别：" label-width="120px" readonly />
            <van-field v-model="item.shiyongdanwei" label="使用单位：" label-width="120px" readonly />
            <van-field v-model="item.zhucedaima" label="注册代码：" label-width="120px" readonly />
            <van-field v-model="item.chanpinbianhao" label="产品编号：" label-width="120px" readonly />
            <van-field v-model="item.shiyongdengjibianhao" label="使用登记证编号：" label-width="120px" readonly />
          </van-cell-group>
        </el-card>
        <div v-show="!loading" style="text-align: center">
          <van-loading type="spinner" color="#1989fa">
            <span style="font-size: 20px;">
              加载中...
            </span>
          </van-loading>
        </div>
      </van-tab>
      <van-tab>
        <el-card class="box-card">
          <el-steps direction="vertical" :active="steps.length" :space="70">
            <el-step v-for="(item, index) in steps" :key="index" :title="item.title" />
          </el-steps>
        </el-card>
      </van-tab>
    </van-tabs>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="wap-home" :badge="list.length">
        检验进度
      </van-tabbar-item>
      <van-tabbar-item icon="cluster">
        检验流程
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import search from '@/assets/bjd/search.png'
import 'vant/lib/tab/style'
import 'vant/lib/tabs/style'
import 'vant/lib/field/style'
import 'vant/lib/loading/style'
import 'vant/lib/tabbar/style'
import 'vant/lib/tabbar-item/style'
import 'vant/lib/cell-group/style'

export default {
  name: 'Remote',
  data() {
    return {
      search,
      loading: false,
      list: [],
      category: [],
      active: 0,
      steps: [{ title: '申请检验' },
        { title: '安排检验' },
        { title: '等待检验' },
        { title: '进行检验' },
        { title: '检验结束' },
        { title: '生成报告' },
        { title: '等待打印' }]
    }
  },
  created() {
    document.title = '济南特检查询服务'
    this.getList()
    this.getCategory()
  },
  methods: {
    getList() {
      this.apidybg({
        url: '/search/progress',
        method: 'get',
        params: {
          id: this.$route.query.id,
          bianhao: this.$route.query.bianhao
        }
      }).then(data => {
        this.loading = true
        data.list.forEach(row => {
          row.jianyanjindu = this.formatterStatus(row)
          row.jianyanleibie = this.formatterCategory(row)
          this.list.push(row)
        })
      })
    },
    getCategory() {
      this.apidybg({
        url: '/category/pull',
        method: 'get'
      }).then(data => {
        this.category = data.list
      })
    },
    formatterStatus(row) {
      switch (row.link) {
        case 'bjstate':
          return '申请检验'
        case 'fpState':
          return '安排检验'
        case 'renwuState':
          return '等待检验'
        case 'ysjlState':
          return '进行检验'
        case 'reportState':
          if (row.status > 3) {
            return '等待打印'
          } else {
            return '进行检验'
          }
      }
    },
    formatterCategory(row) {
      let name
      try {
        name = this.category.filter(category => {
          return category.code === row.jianyanleibie
        })[0].name
      } catch (e) {
        console.log('检验类别转换错误！')
      }
      if (!name) {
        return row.jianyanleibie
      }
      return name
    }
  }
}
</script>

<style>
  .box-card {
    font-size: 12px;
    margin: 10px 5px;
  }
  .el-card__body {
    padding: 10px;
  }
  .van-tab__pane {
    padding-bottom: 50px;
  }
  .van-cell__value {
    text-align: left;
  }
  .van-tabs__wrap {
    display: none;
  }
</style>