项目实训工作记录2

关于上传gitee仓库时遇到的问题

• 上传gitee仓库以后，网页上的前端项目的内容无法打开，文件夹多了一串数字，经过查阅，原因在于文件夹内还有.git，导致这些文件夹push后变成了子模块
• 根据这篇博客的内容，https://blog.csdn.net/qq_23590921/article/details/108087020，重新上传了一次，发现gitee仓库的内容可以正常查看。
• 仓库地址：https://gitee.com/nianlundangao/2024-project-training

对于上一次工作记录中的Diagnoistic.vue

上次编写的页面存在一个bug，即，当页面中的数据只有一条或者两条时，el-card的宽度和预期结果不一致。如下图所示，el-card很窄,但是其预期结果

<el-row>
        <el-col :span="12" v-for="(patient, index) in this.patientList" :key="patient._id">
          <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>

经过分析，发现el-card的宽度不满足预设的屏幕的一半，推测其原因可能在于没有把各个部分都放在div中，因此决定对其进行改造，改造为如下形式

<template>
  <div>
    <div>
      <el-row>
        <el-col :span="12" v-for="(patient, index) in this.patientList" :key="patient._id">
          <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.result" ></el-input>
              </el-form-item>
            </tr>
          </el-form>
          <el-button type="primary" @click="save()" >提交诊断结果</el-button>
        </el-card>
      </el-dialog>
    </div>
  </div>

</template>

经过测试，发现这样处理以后，el-card的显示可以正常显示