项目实训工作记录

本次工作的主要内容是写医生的诊断页面
这个页面经过分析，医生要显示所有病历的d_id为他的病历，对于这个功能可以想到，我们可以利用vue提供的v-for指令，动态生成不同数量的el-card来显示病历，对于各个病历，再提供一个按钮允许医生进入详情页面进行具体信息的查看，并进行诊断数据的写入。

第一步先准备好Model的部分

<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="12" v-for="(patient, index) in this.patientList" :key="patient.pid">
        <el-card :body-style="{padding: '10px'}">
          <div style="margin: 10px;">
            <span>病人姓名:{{patient.name}}</span><br>
            <span>病情简介:{{patient.chief}}</span><br>
            <span>病人年龄:{{patient.age}}</span><br>
            <el-button type="text"  @click="detail(patient)">查看病人详情 </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <el-dialog
      v-model="dialogVisible"
      title="详情"
      width="90%">
    <el-card>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item style="width: 35%" label="病人名:">
          <el-input v-model="form.name" disabled></el-input>
        </el-form-item>
        <td style="width: 480px">
          <el-form-item style="width: 35%" label="病情:">
            <el-input v-model="form.message" disabled></el-input>
          </el-form-item>
        </td>
      </el-form>
    </el-card>

  </el-dialog>
</template>
前面的el-row和el-col用于展示病历，后面的el-dialog用于展示病人的详细信息，并给医生提供撰写诊断结果的途径。

准备js部分

1.需要定义一个getList()函数，在其中向后端发出post请求，并将其返回的数据存放到data中的变量中
2.定义一个detail()函数，用于展示该病例的详细情况，其逻辑为将el-dialog的控制变量的默认false值改为true

<script>
export default {
  name: "Diagnostic",
  data() {
    return {
      patientList: [

      ],
      dialogVisible: false,
      form: {},

    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.$axios.post("http://localhost:8000/medic/diagnostic/1/").then(res => {
        // console.log(res)
        this.patientList = res.data.patientList
      })
      // console.log(this.patientList)
    },
    detail(patient) {
      this.form = patient
      this.dialogVisible = true
    }
  }
}
</script>

查看运行效果

后端获取到两条数据，所以有两个卡片