山东大学项目实训（五）——众患者信息简表功能完善（本地）（7.7、7.8）

另一位前端成员已经完成了众患者信息简表页面的搭建，也写了一些功能比如创建新患者和编辑之类，这两天我的主要任务是完善众患者信息简表的功能，并且实现点击表行跳转至该患者详细信息页面。
首先是完善众患者信息简表的功能，主要是添加根据地址或者名字搜索，治疗中或治疗完成患者展示。一开始先要设计UI，结合另一名成员写的地址选框以及添加新患者UI，将布局代码完善如下：

<div class="handle-box">
                <el-select v-model="form3.current_address"  clearable placeholder="居住" class="handle-select mr10">
                    <el-option key="1" label="北京市" value="北京"></el-option>
                    <el-option key="2" label="天津市" value="天津"></el-option>
                    <el-option key="3" label="河北省" value="河北"></el-option>
                    <el-option key="4" label="山西省" value="山西"></el-option>
                    <el-option key="5" label="内蒙古自治区" value="内蒙古"></el-option>
                    <el-option key="6" label="辽宁省" value="辽宁"></el-option>
                    <el-option key="7" label="吉林省" value="吉林"></el-option>
                    <el-option key="8" label="黑龙江省" value="黑龙江"></el-option>
                    <el-option key="9" label="上海市" value="上海"></el-option>
                    <el-option key="10" label="江苏省" value="江苏"></el-option>
                    <el-option key="11" label="浙江省" value="浙江"></el-option>
                    <el-option key="12" label="安徽省" value="安徽"></el-option>
                    <el-option key="13" label="福建省" value="福建"></el-option>
                    <el-option key="14" label="江西省" value="江西"></el-option>
                    <el-option key="15" label="山东省" value="山东"></el-option>
                    <el-option key="16" label="河南省" value="河南"></el-option>
                    <el-option key="17" label="湖北省" value="湖北"></el-option>
                    <el-option key="18" label="湖南省" value="湖南"></el-option>
                    <el-option key="19" label="广东省" value="广东"></el-option>
                    <el-option key="20" label="广西壮族自治区" value="广西"></el-option>
                    <el-option key="21" label="海南省" value="海南"></el-option>
                    <el-option key="22" label="重庆省" value="重庆"></el-option>
                    <el-option key="23" label="四川省" value="四川"></el-option>
                    <el-option key="24" label="贵州省" value="贵州"></el-option>
                    <el-option key="25" label="云南省" value="云南"></el-option>
                    <el-option key="26" label="西藏自治区" value="西藏"></el-option>
                    <el-option key="27" label="陕西省" value="陕西"></el-option>
                    <el-option key="28" label="甘肃省" value="甘肃"></el-option>
                    <el-option key="29" label="青海省" value="青海"></el-option>
                    <el-option key="30" label="宁夏回族自治区" value="宁夏"></el-option>
                    <el-option key="31" label="新疆维吾尔自治区" value="新疆"></el-option>
                    <el-option key="32" label="台湾省" value="台湾"></el-option>
                    <el-option key="33" label="澳门特别行政区" value="澳门"></el-option>
                    <el-option key="34" label="香港特别行政区" value="香港"></el-option>
                </el-select>
                <el-input v-model="form4.uname" placeholder="用户姓名" class="handle-input mr10"  ></el-input>
                <el-button id="search" type="primary" icon="el-icon-search"  @click="handleSearch(form3.current_address,form4.uname)">搜索</el-button>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch1">治疗中</el-button>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch2">治疗完成历史记录</el-button>
                <el-button type="primary" icon="el-icon-plus" @click="handleadd">添加新的患者</el-button>

            </div>

效果如下：

然后是展示治疗中患者的功能主要代码：

 let form1=reactive({
          allergic:"治疗中",
         })
const handleSearch1 = () => {
        fetchData(param).then((res)=>{
          tableData.value = res.list;
          var n=0;
          const l=tableData.value.length;
          for (var i=0;i<l;i++) {
            Object.keys(form1).forEach((item) => {
              if(tableData.value[i-n][item] !== form1[item]){
                tableData.value.splice(i-n,1)
                n++;
              }
              tabledata.value=tableData.value;
            });
          }

其中原理就是遍历患者表，删除不符合治疗中条件的患者，当然也有另一种写法是遍历患者表，提取符合治疗中条件的患者，两者时间复杂度差不多，效率应该也差不多，后续有时间会进行比较并进一步优化。每次调用功能函数都提取一遍数据主要是为了每次显示的都是完整表中筛选的数据，而不是筛选过后再度筛选的数据。
显示治疗完成患者的功能主要代码同理：

let form2=reactive({
          allergic:"治疗完成",
        })
const handleSearch2 = () => {
        fetchData(param).then((res)=>{
          tableData.value = res.list;
          var n=0;
          const l=tableData.value.length;
          for (var i=0;i<l;i++) {
            Object.keys(form2).forEach((item) => {
              if(tableData.value[i-n][item] !== form2[item]){
                tableData.value.splice(i-n,1)
                n++;
              }

            });
          }
          tabledata.value=tableData.value
        })

        };        

然后是搜索功能，难点主要是对分别对俩个元素进行检索，倘若某一个元素用户没填则不对其进行检索，而且还要容易添加更多的元素，以便后续的功能需要，大致如下：

  let form3=reactive({
          current_address:null,
        })
let form4=reactive({
          uname:null,
        })
const handleSearch = (address,uname) => {
          fetchData(param).then((res)=>{
            if(address!=null||uname!=null)
            tableData.value = res.list
            else  return 0
            var n = 0;
            var l = tableData.value.length;
            if (address != null) {
              for (var i = 0; i < l; i++) {
                Object.keys(form3).forEach((item) => {
                  if (!tableData.value[i - n][item].match(address)) {
                    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++;
                  }
                });
              }
            }
            tabledata.value=tableData.value;
          })

效果如下：



然后是点击行切换到患者的详细信息页面

const overallClick=(row)=>{
        if(row){
          localStorage.setItem("id_number",row.id_number);
          router.push('/patient')
        }
      }

接下来就是与后端的对接了。