项目实训#7 我的病历页面 使用el-card

发现使用表格的形式展示患者的病历非常的不合理且不美观，于是改用el-card显示每一个病历

只定义一个el-card，但是循环显示

对于el-card组件：这定义一个el-card实际上是定义了一组，v-for通过循环访问从后端得到的数据中拿到的caseList中的theCase，根据每个theCase的内容显示el-card，el-card放置在el-row和el-col的容器中

<template>
 <div>
   <el-row :gutter="24">
      <el-col :span="12" v-for="(theCase , index) in this.caseList" >
        <el-card style="margin: 5px">
         <div style="font-size: 20px">
            <span>医生姓名:{{theCase.d_id}}</span><br>
            <span>病情简介:{{theCase.chief}}</span><br>
            <span>就诊时间:{{theCase.date}}</span><br>
          <el-button type="text"  @click="detail(theCase)">查看病历详情</el-button>
        </div>
      </el-card>
      </el-col>
   </el-row>
  </div><el-dialog
      v-model="dialogVisible"
      title="详情"
      width="35%">
    <el-card>
      <el-form ref="form" :model="form" label-width="80px">
        <tr>
          <td>
            <el-form-item style="width: 80%" label="姓名:">
              <el-input v-model="form.name" disabled></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item style="width: 80%" label="年龄:">
              <el-input v-model="form.age" disabled></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td style="width: 480px">
            <el-form-item style="width: 80%" label="主诉:">
              <el-input v-model="form.chief" disabled></el-input>
            </el-form-item>
          </td>
          <td style="width: 480px">
            <el-form-item style="width: 80%" label="持续时间:">
              <el-input v-model="form.lastingTime" disabled></el-input>
            </el-form-item>
          </td>
        </tr>

        <tr>
          <td style="width: 480px">
            <el-form-item style="width: 80%" label="既往病症:">
              <el-input v-model="form.history" disabled></el-input>
            </el-form-item>
          </td>
          <td style="width: 480px">
            <el-form-item style="width: 80%" label="过敏药物:">
              <el-input v-model="form.allergy" disabled></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
           <el-form-item style="width: 80%" label="就诊时间:">
              <el-input v-model="form.date" disabled></el-input>
            </el-form-item>
        </tr>
        <tr>
           <el-form-item style="width: 80%" label="诊断结果:">
              <el-input v-model="form.dia_result" disabled></el-input>
           </el-form-item>
        </tr>
      </el-form>
      <el-button type="primary" :icon="Search" @click="advise">
        获取健康建议
      </el-button>
    </el-card>
  </el-dialog>
  <el-dialog
      v-model="dialogVisible2"
      title="健康建议"
      width="35%">{{this.advice}}
  </el-dialog>>
</template>

export default {
  name: "Mycase",
  data() {
   return {
      caseList: [
      ],
     myResult: "未提供",
     dialogVisible: false,
     dialogVisible2: false,
     form: {},
     advice: null,
     loadingInstance: null,
     pid : this.$store.state.userid,
    }

  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.$axios.post("http://localhost:8000/medic/myCase/"+this.pid+"/").then(res => {
        console.log(res)
        this.caseList = res.data.case_list
        console.log(this.caseList)
      })
    },
   detail(theCase) {
      if(theCase.dia_result != null)
      {
        this.form = theCase
        this.dialogVisible = true
      }
      else if(theCase.dia_result == null)
      {
        theCase.dia_result = "未诊断"
        this.form = theCase
        this.dialogVisible =true
      }
    },