ylrz_his_scrm_adminUI/src/views/components/his/healthLifeDetails.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="类型" ><dict-tag :options="typeOptions" :value="item.type"/></el-descriptions-item>
        <el-descriptions-item label="创建时间" ><span v-if="item!=null">{{item.createTime}}</span></el-descriptions-item>

        </el-descriptions>
    </div>

    <div class="contentx" v-if="item!=null">
        <div class="desct">
          表单内容
        </div>
        <el-descriptions title="" :column="1" border direction="vertical">
            <el-descriptions-item label="内容"  >
         <div v-show="formJson != null&&formJson!=''" style="margin-left: 30px;">
            <div  v-for="(history, index) in formJson"   :key="index">
                <span >{{index+1}}.{{history.name}}</span>
              <div v-if="'1' == history.type || '3' == history.type">
                 <el-row v-for="(answerItem,i) in history.question"  :key="i">
                    <el-col :span="23" :offset="1"> <el-radio disabled v-model="history.value" :label="answerItem.name"></el-radio></el-col>
                 </el-row>
              </div>
              <div v-if="'2' == history.type">
                  <el-row v-for="(answerItem,i) in history.question"  :key="i">
                     <el-col :span="23" :offset="1">
                      <el-checkbox-group v-model="(history.value).split(',')">
                         <el-checkbox :label="answerItem.name" disabled></el-checkbox>
                      </el-checkbox-group>
                    </el-col>
                  </el-row>
              </div>
        </div>
        </div>
        </el-descriptions-item>
       </el-descriptions>
    </div>
</div>
</template>

<script>
import { listHealthLife, getHealthLife, delHealthLife, addHealthLife, updateHealthLife, exportHealthLife } from "@/api/his/healthLife";
  export default {
    name: "healthLife",
    props:["data"],
    data() {
      return {
        typeOptions: [],
        item:null,
        formJson:null,
      }
    },
    created() {
      this.getDicts("sys_health_life_type").then(response => {
        this.typeOptions = response.data;
      });
    },
    methods: {
      getDetails(id) {
          this.item=null;
          this.formJson=null;
          getHealthLife(id).then(response => {
              this.item = response.data;
              if(this.item.formJson!=null&&this.item.formJson!=''){
                this.formJson = JSON.parse(this.item.formJson)
              }
          });
      },

    }
  }
</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>