医院信息化与智能化系统(8)

这里只描述对应过程，和可能遇到的问题及解决办法以及对应的参考链接，并不会直接每一步详细配置

如果你想通过文字描述或代码画流程图，可以试试PlantUML，告诉GPT你的文件结构，让他给你对应的代码

预约挂号微服务模块搭建

前端知识点补充，此章节不会详细讲具体前端的每个知识点

1、医院设置--删除

先添加删除按钮，还是element-ui代码。

具体操作是，在之前table的代码下面添加一行 <el-table-column>代码，也就是添加一列，用于删除按钮

xml 复制代码

 <el-table-column label="操作" width="280" align="center">
   <template slot-scope="scope">
      <el-button type="danger" size="mini" 
         icon="el-icon-delete" @click="removeDataById(scope.row.id)"> </el-button>
   </template>
</el-table-column>

removeDataById是删除按钮绑定的方法，我们在methods下添加对应的方法，获取要删除对象的id值

接着在api文件夹的js文件，定义操作的接口(后续碰到类似添加，不一定会再贴出代码)

javascript 复制代码

    deleteHospSet(id){
      return request({
        url:`/admin/hosp/hospitalSet/${id}`,
        method:'delete'  
      })
    }

接着想在removeDataById方法体，添加是否确认删除的弹窗，还是去找element-ui，直接贴代码。点确定，会执行.then()中的方法，点取消会执行.catch()中的方法。

在.then()中调用deleteHospSet方法，在点击取消之后，还需要在前端显示数据库的数据，所以，在.catch()中调用this.getList(1) ，达到刷新页面的效果。

2、批量删除功能

在js文件创建batchHospSet方法，输入参数为idList，要删除的ID集合。其中，idList以data：形式传递(JSON)。

还要考虑的问题是，既然批量删除，则每一列的选择框是必须添加的，不然并不知道哪一些数据要批量删除，这里还是用的element-ui组件。勾选完还需要记录待删除的数据ID值，所以要在选择框绑定函数handleSelectionChange.

@selection-change="handleSelectionChange,在该方法中，session可以得到选中的id，在初始化参数里，创建multipleSelection变量，并在方法中用session对其赋值。

接着在table组件上，添加批量删除按钮，并准备创建批量删除方法removeRows，这里面几个逻辑是这样：确认框设置依旧，在.then方法中创建idList列表，并通过遍历数组，添加id值到idList中，最后调用接口。

javascript 复制代码

//确定执行then方法
                var idList = []
                //遍历数组得到每个id值，设置到idList里面
                for(var i=0;i<this.multipleSelection.length;i++) {
                    var obj = this.multipleSelection[i]
                    var id = obj.id
                    idList.push(id)
                }
                //调用接口
                hospset.batchRemoveHospSet(idList)

3、锁定与取消锁定

每个医院有对应的status，以文字表述就是可用与不可用，需要在其右侧添加一个锁定以及取消锁定的按钮

如果状态为1，表示可用，锁定时传入该医院的状态，以及0，表示让它变为不可用

primary: 主按钮，通常为蓝色，表示主要操作。

xml 复制代码

      <el-button type="primary" size="mini" 
         icon="el-icon-delete" v-if="scope.row.status==1" @click="lockHostSet(scope.row.id,0)">锁定 </el-button>
      <el-button type="danger" size="mini" 
         icon="el-icon-delete" v-if="scope.row.status==0" @click="lockHostSet(scope.row.id,1)">取消锁定 </el-button>

这里的lockHostSet方法还是在.methods()声明并调用对应接口方法即可。

4、添加功能

在hospset.js定义方法saveHospSet，输入参数为医院实体类对象，包含医院名称、医院编号...，以post方式请求。

在list.vue通过element-ui创建表单元素，来添加医院信息，可以看到，v-model表示双向绑定，所以还需要在<script>标签内，定义hospitalSet并初始化。

xml 复制代码

<el-form label-width="120px">
         <el-form-item label="医院名称">
            <el-input v-model="hospitalSet.hosname"/>
         </el-form-item>
         <el-form-item label="医院编号">
            <el-input v-model="hospitalSet.hoscode"/>
            ...
                  <el-form-item>
            <el-button type="primary" @click="saveOrUpdate">保存</el-button>
         </el-form-item>
</el-form>

保存按钮绑定了saveOrUpdate方法，调用对应接口方法后，在消息响应中提示添加成功，在通过路由跳转到list.vue

javascript 复制代码

               //提示
                        this.$message({
                            type:  'success',
                            message:  '添加成功!'
                        })
                        //跳转列表页面，使用路由跳转方式实现
                        this.$router.push({path:'/hospSet/list'})

5、修改功能

修改功能定义为有一个修改按钮，可以跳转到添加页面，即添加&修改做成同一个页面，所以这里需要添加隐藏路由

隐藏路由

定义：隐藏路由是指在前端路由配置中存在，但不会在导航菜单中显示的路由。这些路由并不直接显示在菜单或导航栏上，但可以通过代码或 URL 访问。
使用场景：隐藏路由适用于修改、详情页面等不需要在主导航中显示的页面。这种页面通常是操作中的一部分，而不是独立的功能页面。

在router/index.js中添加代码

:id 是一个动态路由参数。访问 /edit/1 或/edit/123等 URL 时，id 会被解析为参数，用于标识要编辑的某条数据的 ID。

javascript 复制代码

{
        path: '/edit/:id',
        name: 'EduTeacherEdit',
        component: () =>import('@/views/hospset/add'),
        meta: { title: '编辑', noCache: true },
        hidden: true
        }

在list.vue中<el-table>标签下添加修改按钮标签，设定跳转页面

javascript 复制代码

        <router-link   :to="'/hospSet/edit/'+scope.row.id">
         <el-button   type="primary"   size="mini"   icon="el-icon-edit"></el-button>
        </router-link>

接着在js文件定义接口方法，根据id找到医院信息、 修改医院信息

添加和修改医院信息的url并不相同，需要在created里面定义判断方法及操作流程

javascript 复制代码

 created()  {//页面渲染之前执行
        //获取路由id值
        if(this.$route.params &&  this.$route.params.id) {
        const id=this.$route.params.id
        //调用方法得到id对应的数据
        this.getHostSet(id)
        }
 }

保存按钮绑定的方法需要进行修改了，在修改时的保存按钮应当是覆盖，在添加时应该是增添，这两种情景的不同点在于，是否存在id值。

save方法与update方法分别对应之前的添加与修改操作

javascript 复制代码

saveOrUpdate(){
                //判断id值
                if (!this.hospitalSet.id){
                    this.save()//没有id
                }else{
                    this.update()
                }
            }