ylrz_his_scrm_companyUI/src/views/store/components/inquiryOrderReportDetails.vue

<template>
    <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
      <div style="padding: 20px; background-color: #fff;">
         咨询报告详情
      </div>
  <div class="contentx" v-if="item!=null">
        <div class="desct"> 咨询报告信息</div>
        <el-descriptions title="" :column="3" border>
          <el-descriptions-item label="报告编号"><span v-if="item!=null">{{item.reportSn}}</span></el-descriptions-item>
          <el-descriptions-item label="状态"><span v-if="item!=null"><dict-tag :options="statusOptions" :value="item.status"/></span></el-descriptions-item>
          <el-descriptions-item label="会员ID"><span v-if="item!=null">{{item.userId}}</span></el-descriptions-item>
          <el-descriptions-item label="会员昵称"><span v-if="item!=null">{{item.nickName}}</span></el-descriptions-item>
          <el-descriptions-item label="会员电话"><span v-if="item!=null">{{item.phone}}</span></el-descriptions-item>
          <el-descriptions-item label="医生名称"><span v-if="item!=null">{{item.doctorName}}</span></el-descriptions-item>
          <el-descriptions-item label="咨询子类型" ><dict-tag :options="inquirySubTypeOptions" :value="item.inquirySubType"/></el-descriptions-item>
          <el-descriptions-item label="优惠劵发送人"><span v-if="item!=null">{{item.sendName}}</span></el-descriptions-item>
          <el-descriptions-item label="咨询问题"><span v-if="item!=null">{{item.patientDescs}}</span></el-descriptions-item>
          <el-descriptions-item label="疾病历"><span v-if="item!=null">{{item.illnessLogs}}</span></el-descriptions-item>
          <el-descriptions-item label="用药史"><span v-if="item!=null">{{item.drugLogs}}</span></el-descriptions-item>
          <el-descriptions-item label="咨询结果"><span v-if="item!=null">{{item.inquiryResult}}</span></el-descriptions-item>
          <el-descriptions-item label="备注"><span v-if="item!=null">{{item.remark}}</span></el-descriptions-item>
          <el-descriptions-item label="医生签名"><span v-if="item.signUrl!=null"><img :src="item.signUrl" style="max-width: 100px;"></span></el-descriptions-item>
          <el-descriptions-item label="提交时间"><span v-if="item!=null">{{item.createTime}}</span></el-descriptions-item>
          <el-descriptions-item label="首次处理时间"><span v-if="item!=null">{{item.updateTime}}</span></el-descriptions-item>
          <el-descriptions-item label="咨询备注"><span v-if="item!=null">{{item.companyUserRemark}}</span></el-descriptions-item>
          <el-descriptions-item label="疾病类型" ><dict-tag :options="diseaseTypeOptions" :value="item.diseaseType"/></el-descriptions-item>
        </el-descriptions>      
  </div>
  <div class="contentx" v-if="item!=null">
        <div class="desct" > 
          <span v-if="patientInfo">
            {{ patientInfo }}
          </span>
          <span v-else>
            患者信息
          </span>
        </div>
        <el-descriptions title="" :column="3" border>
          <el-descriptions-item label="患者姓名" ><span v-if="item!=null">{{JSON.parse(item.patientJson).patientName}}</span></el-descriptions-item>
          <el-descriptions-item label="患者年龄" ><span v-if="item!=null">{{JSON.parse(item.patientJson).age}}</span></el-descriptions-item>
          <el-descriptions-item label="患者性别" ><span >{{JSON.parse(item.patientJson).sex==1?'男':'女'}}</span></el-descriptions-item>
          <el-descriptions-item label="身份证号" ><span >{{JSON.parse(item.patientJson).idCard}}</span></el-descriptions-item>
          <el-descriptions-item label="体重" ><span v-if="item!=null">{{JSON.parse(item.patientJson).weight}}</span></el-descriptions-item>
          <el-descriptions-item label="身高" ><span v-if="item!=null">{{JSON.parse(item.patientJson).height}}</span></el-descriptions-item>
          <el-descriptions-item label="BMI" ><span v-if="item!=null">{{bmi}}</span></el-descriptions-item>
          <el-descriptions-item label="肥胖类型"><span v-if="item!=null">{{fat}}</span></el-descriptions-item>
          <el-descriptions-item label="电话" >
            <span v-if="item!=null">{{patientMobile}}</span>
            <el-button icon="el-icon-search" size="mini" @click="handlePhone()" style="margin-left: 20px;" circle v-hasPermi="['his:inquiryOrderReport:queryPatientMobile']"></el-button>
          </el-descriptions-item>
          <el-descriptions-item label="学习周期" ><span v-if="item!=null">{{JSON.parse(item.patientJson).study}}</span></el-descriptions-item>
          <el-descriptions-item label="期望咨询方式" ><span >语音咨询</span></el-descriptions-item>
          <el-descriptions-item label="正在服药" ><span v-if="item!=null">{{JSON.parse(item.patientJson).drugs}}</span></el-descriptions-item>
          <el-descriptions-item label="用药情况" ><span v-if="item!=null">{{JSON.parse(item.patientJson).medication}}</span></el-descriptions-item>

          <el-descriptions-item label="咨询问题" span="3"><span v-if="item!=null">{{JSON.parse(item.patientJson).title}}</span></el-descriptions-item>

          <el-descriptions-item label="面部照片" span="3">
                    <el-image v-if="faceImages!=null&&faceImages!=''" v-for="img in faceImages" :key="img.id"
                            style="width: 100px"
                            :src="img"
                            :preview-src-list="[img]">
                    </el-image>
          </el-descriptions-item>
          <el-descriptions-item label="舌苔照片" span="3">
              <el-image v-if="tongueImages!=null&&tongueImages!=''" v-for="img in tongueImages" :key="img.id"
                      style="width: 100px"
                      :src="img"
                      :preview-src-list="[img]">
              </el-image>
             </el-descriptions-item>
          <el-descriptions-item label="检测报告或患病证书" span="3">
                <el-image v-if="imgs!=null&&imgs!=''"  v-for="img in imgs" :key="img.id"
                        style="width: 100px"
                        :src="img"
                        :preview-src-list="[img]">
                </el-image>
          </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=='用药调治'?'健康建议':form.name" v-for=" form in conditioningPlanJson" ><div style="white-space: pre-wrap;">{{form.value}}</div></el-descriptions-item>
        </el-descriptions>
  </div>
</div>
</template>

<script>
import { listBySearch,listInquiryOrderReport, getInquiryOrderReport, delInquiryOrderReport, addInquiryOrderReport, updateInquiryOrderReport, exportInquiryOrderReport ,getPatientMobile} from "@/api/store/inquiryOrderReport";

  export default {
    name: "inquiryOrderReport",
    props:["data"],
    data() {
      return {
        patientInfo: process.env.VUE_APP_PATIENT_INFO,
        diseaseParams:{
          diseaseId:null,
          diseaseName:null
        },
        item:null,
        bmi:null,
        statusOptions:[],
        inquirySubTypeOptions:[],
        formJson:null,
        conditioningPlanJson:null,
        // patientJson:{},
        imgs:[],
        patientMobile:null,
        faceImages:[],
        tongueImages:[],
        diseaseTypeOptions:[],
        fat:null,
      }
    },
    created() {
      // this.getDicts("sys_inquiry_order_report_disease_type").then(response => {
      //   this.diseaseTypeOptions = response.data;
      // });
      this.getDicts("sys_inquiry_order_report_status").then(response => {
        this.statusOptions = response.data;
      });
      this.getDicts("sys_inquiry_sub_type").then(response => {
        this.inquirySubTypeOptions = response.data;
      });
    },
    methods: {
      handlePhone(){
        const reportId = this.item.reportId;
        getPatientMobile(reportId).then(response =>{
            this.patientMobile = response.mobile;
        })
      },
      getDetails(orderId) {
        this.imgs=null;
        this.tongueImages=null;
        this.faceImages=null;

        this.conditioningPlanJson=null;
        this.item=null;
        this.diseaseTypeOptions=[];
        getInquiryOrderReport(orderId).then(response => {
            this.item = response.data;
            if(response.data.conditioningPlanJson!=null){
              this.conditioningPlanJson=JSON.parse(response.data.conditioningPlanJson)
            };
            if(response.data.diseaseType!=null){
              this.item.diseaseType = response.data.diseaseType.split(",")
              this.item.diseaseType.forEach(disease => {
              this.diseaseParams.diseaseId = disease; // 使用 disease 作为 query 参数
              listBySearch(this.diseaseParams).then(response => {
                  this.diseaseTypeOptions.push(...response.rows); // 将 response.rows 展开并推入 diseaseTypeOptions
              });
          });
            }
            if(response.data.patientJson!=null){
              var json=JSON.parse(this.item.patientJson);

              if(json!=null&&json!=""){
                if(json.reportImages!=null&&json.reportImages!=""){
                   this.imgs= (json.reportImages).split(",");
                }
               if(json.tongueImages!=null&&json.tongueImages!=""){
                  this.tongueImages=json.tongueImages.split(",")
               }
               if(json.faceImages!=null&&json.faceImages!=""){
                  this.faceImages=json.faceImages.split(",")
               }
               if(json.mobile!=null&&json.mobile!=""){
                  this.patientMobile=json.mobile;
               }

              }
               var weight = JSON.parse(this.item.patientJson).weight;
                var height = JSON.parse(this.item.patientJson).height;

                // 计算BMI值
                this.bmi = Math.round(weight / Math.pow(height / 100, 2));
                // 判断体重状态
                if (this.bmi < 18.5) {
                  this.fat="偏瘦";
                } else if (this.bmi < 24) {
                  this.fat="正常";
                } else if (this.bmi < 28) {
                  this.fat="超重";
                } else {
                  this.fat="肥胖";
                }

            };
        });
      },
    }
  }
</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: 500px;
   min-width: 100px;
 }

  .desct{
      padding-top: 20px;
      padding-bottom: 20px;
      color: #524b4a;
      font-weight: bold;
    }

</style>