山东大学项目实训（七）——患者信息功能完善并与后端服务器对接（7.12、7.13）

前面已经解决了后端服务器的对接问题，所以从今天起我开始负责重写之前写过或者以后另一名前端成员写的本地功能，并将其与服务器对接。这两天主要是必要功能剩余三大部分中的患者信息部分。
因为对服务器请求方式与以前不太一样，要带上登录请求返回的session，所以在登录内加入对session的储存

session=res.data[1].session;
localStorage.setItem("session",session);

注册改为注册成功返回登陆界面
因为session后端设置存在时间为30分钟，所以以后每次对服务器发送请求时加上catch，跳转回登陆界面，防止session丢失

.catch(()=>{
            router.push('/login')
            ElMessage.error("登录信息失效，请重新登录")
          })

接着进入正题：
首先为了与后端对接将布局稍微修改，效果如下：

并去掉对居住地的搜索，增添对患者编号、性别和手机号的搜索，修改完的搜索代码如下

const handleSearch = (uid,sex,uname,phone) => {
          fetchallpdata(param0).then((res)=>{
            if(uid!=null||sex!=null||uname!=null||phone!=null)
            tableData.value = res.data
            else  return 0
            var n = 0;
            var l = tableData.value.length;
            if (sex != null) {
              for (var i = 0; i < l; i++) {
                Object.keys(form3).forEach((item) => {
                  if (!tableData.value[i - n][item].match(sex)) {
                    tableData.value.splice(i - n, 1)
                    n++;
                  }
                });
              }
            }
            if (uname != null) {
              l=tableData.value.length;
              n=0;
              for (var i = 0; i < l; i++) {
                Object.keys(form4).forEach((item) => {
                  if (!tableData.value[i - n][item] .match(uname) ) {
                    tableData.value.splice(i - n, 1)
                    n++;
                  }
              });
              }
            }
            if (uid != null) {
              l=tableData.value.length;
              n=0;
              for (var i = 0; i < l; i++) {
                Object.keys(form1).forEach((item) => {
                  if (!tableData.value[i - n][item] .match(uid) ) {
                    tableData.value.splice(i - n, 1)
                    n++;
                  }
                });
              }
            }
            if (phone != null) {
              l=tableData.value.length;
              n=0;
              for (var i = 0; i < l; i++) {
                Object.keys(form2).forEach((item) => {
                  if (!tableData.value[i - n][item] .match(phone) ) {
                    tableData.value.splice(i - n, 1)
                    n++;
                  }
                });
              }
            }
            tabledata.value=tableData.value;
          }).catch(()=>{
            router.push('/login')
            ElMessage.error("登录信息失效，请重新登录")
          })

效果如下：

将返回功能改为清空界面，功能函数如下：

const clear=()=>{
          form1.uid=null
          form2.phone=null
          form3.sex=null
          form4.uname=null
          tabledata.value=null
        }

重写点击表格某行跳转功能，跳转前发送服务器请求，存入返回的患者详细信息数据，方便跳转后导入新的页面，功能函数如下：

const overallClick=(row)=>{
        if(row){
          fetchpdata(row.uid,param0).then((res) => {
            sessionStorage.setItem("uid",res.data.uid)
            sessionStorage.setItem("uname",res.data.uname)
            sessionStorage.setItem("age",res.data.age)
            sessionStorage.setItem("sex",res.data.sex)
            sessionStorage.setItem("phone",res.data.phone)
            sessionStorage.setItem("current_address",res.data.currentAddress)
            sessionStorage.setItem("workingPlace",res.data.workingPlace)
            sessionStorage.setItem("allergic",res.data.allergic)
            sessionStorage.setItem("register_date",res.data.register_date)
            sessionStorage.setItem("modifyTime",res.data.modifyTime)
            sessionStorage.setItem("idnumber",res.data.idnumber)
            router.push('/patient')
          });

        }
      }

重写添加患者档案功能，去除原本弹窗设置，改为跳转至新的专门用来添加患者档案的页面，对该页面进行布局，最终效果如下：

在该界面赋予按钮将信息提交后端并在后端创建患者档案的功能，同时清空页面，以便下一次创建提交，功能函数如下：

const onSubmit = () => {

      setData(form).then((res) => {
        if(res.code==200)
        {ElMessage.success("患者信息录入成功")
          form.name=null;
          form.age=null;
          form.IDNumber=null;
          form.sex=null;
          form.phone=null;
          form.current_address=null;
          form.working_place=null;
          form.allergic=null;
        router.push('/table')}
        else{
          ElMessage.error("手机号码格式错误")
        }
      }).catch(() => {
        router.push('/login')
        ElMessage.error("登录信息失效，请重新登录")
      })
    }

对患者详细页面布局进行一部分改进（还有一部分由另一名前端成员负责），最终效果如下：

在患者详细信息卡片中接收简表页面储存的数据，并使其能够动态变化,最终效果如下：

从服务器中提取对应患者简略案例信息数据，并展示在下面表格中：

总体如下：

所有过程中有涉及到的后端传来数据0或1到女或男或者治疗中或治疗结束的转化就不进行赘述了。