ylrz_his_scrm_companyUI/src/views/components/healthTongueDetails.vue

<template>
    <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
      <div style="padding: 20px; background-color: #fff;">
       舌苔检测详情
      </div>
<div class="contentx" >
  <div class="desct"> 检测信息</div>
 <el-descriptions title="" :column="3" border>
            <el-descriptions-item label="姓名" ><span v-if="item!=null">{{item.name}}</span></el-descriptions-item>
            <el-descriptions-item label="年龄" ><span v-if="item!=null">{{item.age}}</span></el-descriptions-item>
            <el-descriptions-item label="性别" ><span v-if="item!=null"><dict-tag :options="sexOptions" :value="item.sex"/></span></el-descriptions-item>
            <el-descriptions-item label="体质" ><span v-if="item!=null">{{item.typeName}}</span></el-descriptions-item>
            <el-descriptions-item label="剥苔" ><span v-if="item!=null"><dict-tag :options="orOptions" :value="item.botai"/></span></el-descriptions-item>
            <el-descriptions-item label="剥苔详细" ><span v-if="item!=null">{{item.botaiDesc}}</span></el-descriptions-item>
            <el-descriptions-item label="齿痕" ><span v-if="item!=null"><dict-tag :options="orOptions" :value="item.chihen"/></span></el-descriptions-item>
            <el-descriptions-item label="齿痕详细" ><span v-if="item!=null">{{item.chihenDesc}}</span></el-descriptions-item>
            <el-descriptions-item label="裂纹" ><span v-if="item!=null"><dict-tag :options="orOptions" :value="item.liewen"/></span></el-descriptions-item>
            <el-descriptions-item label="裂纹详细" ><span v-if="item!=null">{{item.liewenDesc}}</span></el-descriptions-item>
            <el-descriptions-item label="舌脉" ><span v-if="item!=null">{{item.shemianName}}</span></el-descriptions-item>
            <el-descriptions-item label="舌脉详细" ><span v-if="item!=null">{{item.shemianDesc}}</span></el-descriptions-item>
            <el-descriptions-item label="苔色" ><span v-if="item!=null">{{item.taiseName}}</span></el-descriptions-item>
            <el-descriptions-item label="苔色详细" ><span v-if="item!=null"> {{item.taiseDesc}}</span></el-descriptions-item>
            <el-descriptions-item label="舌苔图片" ><span v-if="item!=null"> <img :src="item.tongueUrl" style="max-width: 150px;"></span></el-descriptions-item>
  </el-descriptions>

 </div>
 <div class="contentx" v-if="conditioningPlanJson!=null">
        <div class="desct"> 体质解析</div>
        <el-descriptions title="" :column="1" border >
            <el-descriptions-item :label="form.name" v-for=" form in conditioningPlanJson" ><span >{{form.value}}</span></el-descriptions-item>
        </el-descriptions>
  </div>
    </div>
</template>

<script>
import { listHealthTongue, getHealthTongue, delHealthTongue, addHealthTongue, updateHealthTongue, exportHealthTongue } from "@/api/store/healthTongue";

  export default {
    name: "healthTongueDetail",
    data() {
      return {
        item:null,
        orOptions:[],
        sexOptions:[],
        conditioningPlanJson:null,
      }
    },
    created() {
      this.getDicts("sys_company_or").then(response => {
        this.orOptions = response.data;
      });
      this.getDicts("sys_sex").then(response => {
        this.sexOptions = response.data;
      });
    },
    methods: {
      getDetails(orderId) {
        this.item=null;
        getHealthTongue(orderId).then(response => {
          this.item = response.data;
          if(response.data.typeJson!=null){
            this.conditioningPlanJson=JSON.parse(response.data.typeJson)
          };
        });
      },
    }
  }
</script>
<style>

  .contentx{
      height: 100%;
      background-color: #fff;
      padding: 0px 20px 20px;


      margin: 20px;
  }
  .el-descriptions-item__label.is-bordered-label{
    font-weight: normal;
  }
  .el-descriptions-item__content {
    max-width: 150px;
    min-width: 100px;
  }
  .desct{
      padding-top: 20px;
      padding-bottom: 20px;
      color: #524b4a;
      font-weight: bold;
    }
</style>