vue 调试接口 json 格式分解实践

需求：

根据后台返回的数据格式把报告展示在页面上。

环境：

vue3+vant

效果：

对应数组1效果图
对应对象2效果图

数据格式：

返回的整个数据格式
第1个数组格式分解
第2个对象格式分解

代码：

<template>
  <div class="container">
    <div class="order">
      <ul>
        <li class="order_Msg">
          <span class="orderlist_usernameLine"></span>
          <span>体检人：{{this.route_query.user_Name}}</span>
          <van-divider />
        <div class="sport_org">
          <span class="orderlist_usernameLine"></span>
          <span>体检机构：{{this.route_query.org_Name}}</span>
        </div>
        <div>
          <span class="orderlist_usernameLine"></span>
          <span>体检时间：{{this.route_query.check_Time | dateFmt }}</span>
        </div>
        </li>
      </ul>
    </div>
    <!--主要阳性结果及异常情况-->
    <div class="result_div" @click="goMainResult">
    <span class="result_one"><img src="../../../assets/projectImg/v2_projectImg/sport.png" /></span>
    <span class="result_two">主要阳性结果及异常情况</span>
    <span class="result_three">{{this.totalNum}}项</span>
    <span class="result_four"><van-icon name="arrow" /></span>
    </div>
    <!--折叠面板-->
    <div>
      <van-collapse v-model="activeName">
        <van-collapse-item name="index" title="体检项目及检查结果" icon="shop-o">
          <div v-for="(item, index) in eachCheckResult" :key="index">
            <template>
              <div class="resultChild" @click="eachResult(item.jsonItemsItems)">{{item.ItemTypeName}}<span class="result_child"><van-icon name="arrow" /></span></div>
              <van-divider />
            </template>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<script>
export default {
  name: "checkresult",
  data(){
    return{
      //接收路由传过来的值
      route_query:{
        sport_Type: '',
        org_Name: '',
        user_Name: '',
        check_Time: '',
        ser_Number: '', //服务号
        user_Vid: '' //VID
      },
      //折叠面板
      activeName: ['index'], //默认展开所有项
      totalItems: [], //返回的所有结果
      eachCheckResult: [], //体检项目的每项大类
      totalNum: '',
      mainResult: []
    }
  },
  methods:{
    //获取所有检查结果
    getReportJson(){
      ApiGetReportJson(this.$http,{
        url: 'api/view/GetReportJson',
        method: 'post',
        data: {
          ReportType: this.route_query.sport_Type,
          ServiceNumber: this.route_query.ser_Number,
          VID: this.route_query.user_Vid
        }
      }).then(res =>{
        if(res.data.Code === 200){
          //把后台返回的结果赋值给一个变量
          this.totalItems = res.data.Result;
          //判断返回结果里的数组和对象是否为空，不为空进入方法并且把返回数组或对象赋值给一个变量
          if(this.totalItems.checkItems || this.totalItems.generalInspectionJson.GeneralInspectionItem != null) {
            this.eachCheckResult = this.totalItems.checkItems;
            // 获取主要结果数组,带到下个子页面
            this.mainResult = this.totalItems.generalInspectionJson.GeneralInspectionItem;
            // 获取主要结果的总项数
            this.totalNum = this.totalItems.generalInspectionJson.ItemCount;
          }
        }
      })
    },
    // 跳转体检项目及检查结果--每项子项
    // jsonItemsItems是从页面div传下来的，eachResult方法里的参数可以与页面保持一致，也可以写成aa，如写成aa的话，就相当于是赋值操作了，建议还是保持一致不易混乱
    eachResult(jsonItemsItems){
     // 缓存数据可以在ApiGetReportJson接口调成功后直接存储，也可以在需要用到的地方缓存
     // 缓存当前点击的每项子页的数据
     // 把返回的对象转换为字符串，方便其它地方调用，如不转换的话保存的是整个对象，后面调用获取不到对象的键值，然后在接收页面JSON.parse转换为数组
     window.localStorage.setItem('childReport',JSON.stringify(jsonItemsItems));
      this.$router.push({path: '/eachresult',});
    },
    // 跳转主要阳性结果及异常情况页面
    goMainResult(){
      // 缓存主要阳性结果页面数据
      window.localStorage.setItem('mainReport',JSON.stringify(this.mainResult));
      this.$router.push({path: '/mainresult',})
    },
  },
  created() {
    this.route_query.sport_Type = this.$route.query.sport_Type;
    this.route_query.org_Name = this.$route.query.org_Name;
    this.route_query.user_Name = this.$route.query.user_Name;
    this.route_query.check_Time = this.$route.query.check_Time;
    this.route_query.ser_Number = this.$route.query.ser_Number;
    this.route_query.user_Vid = this.$route.query.user_Vid;
    this.getReportJson()
  }
}
</script>

第1个数组大类里的子页面代码：

<template>
    <div class="order">
      <ul>
        <li class="order_Msg">
          <span class="orderlist_usernameLine"></span>
          <span class="size_div">{{this.Category}}</span>
          <div class="size_div1">医生：{{this.Doctor}}</div>
          <van-divider />
        </li>
        <li class="order_Msg" v-for="(item,index) in childReportList" :key="index">
          <div class="size_div2" v-if="!isShowChoose">{{item.Name}}<span style="float: right">{{item.Result}}</span></div>
          <div class="size_div2" v-if="isShowChoose">
            <div>{{item.Name}}</div>
            <div>{{item.Result}}</div>
          </div>
          <van-divider />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'eachresult',
  data () {
    return {
      isShowChoose: false,
      childReportList: [],
      Category: '', // 当前点击的某项大类
      Doctor: ''
    }
  },
  methods: {
    getCheckItem () {
      // 获取缓存参数
      this.childReportList = JSON.parse(window.localStorage.getItem('childReport'))
      // 取每个大类中的子数组的第1个展示，因为每个大类中的Category和Doctor是一样的
      this.Category = this.childReportList[0].Category
      this.Doctor = this.childReportList[0].Doctor
    },
    // 体检项目中子项样式字体重叠时，根据当前点击子项来判断并获取新的样式
    getType () {
      if (this.Category == '甲状腺彩超' || this.Category == '颈动脉彩超') {
        this.isShowChoose = true
      } else {
        this.isShowChoose = false
      }
    }
  },
  created () {
    this.getCheckItem()
    this.getType()
  }
}
</script>