项目实训记录3

对于 Diagnoistic.vue的进一步完善

1. 完善详情界面显示的信息
   在后端队友对项目更改以后，之前的el-dialog界面显示的数据现在不完整了，需要增加一些显示的数据项，需要对el-dialog部分进行更新
   本次更新增加了既往病史、就诊号、过敏药物、就诊时间、诊断结果、提交诊断结果这些条目的展示
   关于就诊好，后端得同学传给我的是一个从数据库的主键的oid转换而来的字符串，但是其长度较长，所以我选择利用computed对其进行截取computed :{ diagnosticId: { get() { return this.form._id.$oid.substring(1,7) } } },
   结果如下：

<div>
      <el-dialog
          v-model="dialogVisible"
          title="详情"
          width="35%">
        <el-card>
          <el-form ref="form" :model="form" label-width="80px">
            <tr>
              <el-form-item style="width: 160%" label="就诊号:">
                <el-input v-model="diagnosticId" disabled></el-input>
              </el-form-item>
            </tr>
            <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: 200%" label="诊断结果:">
                <el-input v-model="form.dia_result" ></el-input>
              </el-form-item>
            </tr>
          </el-form>
          <el-button type="primary" @click="save()" >提交诊断结果</el-button>
        </el-card>

      </el-dialog>
    </div>

2. 对于详情弹窗的新功能需求
   根据新的要求，需要在dialog中提供给医生端一个提交诊断结果的途径。通过提供一个按钮，并且绑定一个save函数即可实现

最后附上完整的Diagnostic.vue的文件

<script>
import querystring from "querystring";
import store from "@/store";

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

      ],
      dialogVisible: false,
      form: {},
      result : ""

    }
  },
  computed :{
    diagnosticId: {
      get() {
        return this.form._id.$oid.substring(1,7)
      }
    }
  },
  created() {
    //console.log(store.state.userid)
    this.getList()
  },
  methods: {
    getList() {
      this.$axios.get("http://localhost:8000/medic/diagnostic/" + store.state.userid).then(res => {
        //console.log(res)
        this.patientList = res.data.patientList
      })
      //console.log(this.patientList)
    },
    detail(patient) {
      this.form = patient
      this.dialogVisible = true
      // console.log(this.form)
    },
    save() {
      //这里写提交的代码
      this.$axios.post("http://localhost:8000/medic/save_diagnostic/",querystring.stringify({
        _id : this.form._id.$oid,
        dia_result : this.form.dia_result
      })).then(res => {
        this.result  = res.data.result
        this.dialogVisible = false
        if (this.result === "True") {
          this.$message({
            type: "success",
            message: "诊断结果已提交成功"
          })
        } else {
          this.$message({
            type: "error",
            message: "诊断结果未提交成功"
          })
        }

      })
    }
  }
}
</script>

<template>
  <div>
    <div>
      <el-row>
        <el-col :span="12" v-for="(patient, index) in this.patientList" :key="patient._id.$oid">
          <el-card style="margin: 5px">
            <div style="font-size: 20px">
              <span>病人姓名:{{patient.name}}</span><br>
              <span>主诉:{{patient.chief}}</span><br>
              <span>就诊时间:{{patient.date}}</span><br>
              <el-button type="primary"  @click="detail(patient)">查看病人详情 </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-dialog
          v-model="dialogVisible"
          title="详情"
          width="35%">
        <el-card>
          <el-form ref="form" :model="form" label-width="80px">
            <tr>
              <el-form-item style="width: 160%" label="就诊号:">
                <el-input v-model="diagnosticId" disabled></el-input>
              </el-form-item>
            </tr>
            <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: 200%" label="诊断结果:">
                <el-input v-model="form.dia_result" ></el-input>
              </el-form-item>
            </tr>
          </el-form>
          <el-button type="primary" @click="save()" >提交诊断结果</el-button>
        </el-card>

      </el-dialog>
    </div>
  </div>


</template>

<style scoped>

</style>