山东大学项目实训（八）——案例信息各功能创建并与服务器对接

前两天完成了基本功能第一部分的完善，并且与后端服务器完成对接，这两天着手第二部分案例信息。之前案例信息这一方面只是稍微布了局，功能一点没加，所以得从头来过，不过有了患者信息部分的功能基础就比较快了。
首先是在患者详细信息下面对应的案例表里添加对某行对应案例的删除功能，现在表格里加个按钮如下：

然后给按钮添加删除案例功能，利用vue的插槽提取本行案例编号，传给后端接口：

const del=(cid)=>{
      delcdata(cid,param0).then((res)=>{
        if(res.code==200)
        {ElMessage.success("删除成功")
          getdata()}
        else if(res.code==401)
          ElMessage.error("您并非该案例的创建者，无权执行此操作")
        else
        ElMessage.error("删除失败")

      })
    }

这样通过点击按钮就能实现删除，为了防止误删，给按钮添加二次确定功能，主要就是点击按钮弹出隐藏对话框，然后点击确定实现上面的del功能，同时还要记住caseId传给del并显示，效果如下：

接下来要实现从患者详细信息界面到案例详细信息界面的跳转，原理与从患者信息简表界面到患者详细信息界面的跳转差不多，先向服务器发送请求，储存数据再进行跳转并把数据传给新界面：

const overallClick=(row)=>{
      if(row){
        fetchcdata(row.caseId,param0).then((res) => {
          sessionStorage.setItem("caseId",res.data.caseId)
          sessionStorage.setItem("patientId",res.data.patientId)
          sessionStorage.setItem("doctorId",res.data.doctorId)
          sessionStorage.setItem("classify",res.data.classify)
          sessionStorage.setItem("createDate",res.data.createDate)
          sessionStorage.setItem("preDiagnosis",res.data.preDiagnosis)
          sessionStorage.setItem("mouthScan",res.data.mouthScan)
          sessionStorage.setItem("oralPanorama",res.data.oralPanorama)
          sessionStorage.setItem("sidePhoto",res.data.sidePhoto)
          sessionStorage.setItem("finalDiagnosis",res.data.finalDiagnosis)
          sessionStorage.setItem("treatment",res.data.treatment)
          sessionStorage.setItem("cstate",res.data.state)
          sessionStorage.setItem("xpanorama",res.data.xpanorama)
          sessionStorage.setItem("cbct",res.data.cbct)
          router.push('/case')
        });

      }

同时也要给予删除按钮这一行click.stop功能，防止点击删除时跳转
然后是该界面的新建案例功能，为了美观把按钮设在如下位置：

然后给按钮附加功能,因为添加案例后端接口设置的是给body的data传参数，而且不是传json而是传form-data所以花了一部分时间研究如何传，主要就是表头要改为headers: {‘Content-Type’: ‘application/x-www-form-urlencoded’},参数的类型要改为a=x&b=x的形式：

const addc=()=>{
      addcdata(param0,'patient_id='+sessionStorage.getItem("uid")).then((res)=>{
        if(res.code==200) {
          ElMessage.success('案例创建成功，编号:' + res.data)
          getdata()
        }
        else if(res.code==400)
          ElMessage.error('查不到此患者')
        else
          ElMessage.error('案例创建失败，可能为登录信息丢失')
      }).catch(()=>{
        router.push('/login')
        ElMessage.error("登录信息失效，请重新登录")
      })
    }

最后点击效果如下：

接着是案例详细信息界面，另一位前端成员已经做好了布局，我则要往上加功能，首先在案例资料卡片上接受从患者详细信息界面传来的数据：

同时给布置好的编辑按钮加入功能：
首先弹出界面：

然后给确定添加连接后端的修改功能，因为后端接口写成需要一条一条改的形式，所以为了能一起改，我用嵌套的方式让每条的信息都传给后端一遍（因为框内我设定为本是原信息，所以没改的话效果就和原来一样）：

const saveEdit = () => {
      editVisible.value = false;
      setcdata(form.case_id,param0,'state=0&description='+editform.cbct).then((res)=>{
        if(res.code==401)
        {
          ElMessage.error("此案例已结束，无法再对其进行修改")
          return 0
        }
        setcdata(form.case_id,param0,'state=1&description='+editform.mouse_scan).then((res)=>{
          setcdata(form.case_id,param0,'state=2&description='+editform.ora_panorama).then((res)=>{
            setcdata(form.case_id,param0,'state=3&description='+editform.side_photo).then((res)=>{
              setcdata(form.case_id,param0,'state=4&description='+editform.x_ray_panorama).then((res)=>{
                setcdata(form.case_id,param0,'state=5&description='+editform.pre_diagnosis).then((res)=>{
                  setcdata(form.case_id,param0,'state=6&description='+editform.final_diagnosis).then((res)=>{
                    setcdata(form.case_id,param0,'state=7&description='+editform.treatment).then((res)=>{
                      form.cbct=editform.cbct
                      form.mouse_scan=editform.mouse_scan
                      form.ora_panorama=editform.ora_panorama
                      form.side_photo=editform.side_photo
                      form.x_ray_panorama=editform.x_ray_panorama
                      form.pre_diagnosis=editform.pre_diagnosis
                      form.final_diagnosis=editform.final_diagnosis
                      form.treatment=editform.treatment
                      sessionStorage.setItem("preDiagnosis",editform.pre_diagnosis)
                      sessionStorage.setItem("mouthScan",editform.mouse_scan)
                      sessionStorage.setItem("oralPanorama",editform.ora_panorama)
                      sessionStorage.setItem("sidePhoto",editform.side_photo)
                      sessionStorage.setItem("finalDiagnosis",editform.final_diagnosis)
                      sessionStorage.setItem("treatment",editform.treatment)
                      sessionStorage.setItem("xpanorama",editform.x_ray_panorama)
                      sessionStorage.setItem("cbct",editform.cbct)
                      ElMessage.success('信息修改成功')
                    })
                  })
                })
              })
            })
          })
        })
      })

    };

然后为了医生不用到病人详细信息界面就能查到病例，我们还做了一个全案例信息简表，这个和病人信息简表差不多，我同样是在差不多搭好的界面上加功能：

搜索功能和患者信息简表界面差不多，也是先从服务器获得所有案例信息数据再进行检索，只是日期值的匹配需要下点功夫，然后是新建案例，因为没有患者编号所以需要弹出弹窗手动输：

获取患者编号后就简单了，以同样原理传给服务器新建案例就行了，删除功能也和前面差不多，清空功能就是把所有参数清空包括表格的数据，以便重新搜索。