尚医通（七）医院列表前端实现

怼烎@ 2024-03-30 13:47 102阅读 0赞

#### 目录 ####

*  一、医院查询添加功能
 *   *  1、添加路由
     *  2、创建路由对应的页面
 *  二、分页列表
 *   *  1、定义api
     *  2、初始化vue组件
     *  3、表格渲染
     *  4、定义methods
     *  5、定义data
     *  6、分页组件
     *  7、顶部查询表单
     *  8、测试
 *  三、删除
 *   *  1、定义api
     *  2、定义methods
 *  四、新增
 *   *  1、定义api
     *  2、初始化组件
     *  3、实现新增功能
 *  五、回显
 *   *  1、定义api
     *  2、增添路由
     *  3、实现回显功能
 *  六、更新
 *   *  1、定义api
     *  2、组件中调用api
 *  七、批量删除
 *   *  1、定义api
     *  2、初始化组件
     *  3、实现新增功能
 *  八、医院锁定
 *   *  1、定义api
     *  2、修改table组件
     *  3、编写调用方法

## 一、医院查询添加功能 ##

### 1、添加路由 ###

在/src/router/index.js中

{
        
        path: '/yygh/hospset',
        component: Layout,
        redirect: '/yygh/hospset/list',
        name: '医院设置信息',
        meta: {
         title: '医院设置信息', icon: 'el-icon-s-help' },
        children: [
          {
        
            path: 'list',
            name: '医院设置列表',
            component: () => import('@/views/yygh/hospset/list'),
            meta: {
         title: '医院设置列表', icon: 'table' }
          },
          {
        
            path: 'save',
            name: '医院设置添加',
            component: () => import('@/views/yygh/hospset/save'),
            meta: {
         title: '医院设置添加', icon: 'tree' }
          }
        ]
      },

![在这里插入图片描述][d39382c97e3142ba83379e740bed0491.png]

### 2、创建路由对应的页面 ###

![在这里插入图片描述][55dfa6b3d03b4af599bc370e0ccd2534.png]  
list.vue

<template>
        <div class="app-container">
            医院设置列表
        </div>
    </template>

save.vue

## 二、分页列表 ##

### 1、定义api ###

创建文件 src/api/yygh/hospset.js

import request from '@/utils/request'
    
    
    const API = "/admin/hosp/hospitalSet"
    //es6导入语法
    export default{
        
        getHospsetPage(pageNum,size,searchObj) {
        
            return request({
        
              url: `${
        API}/page/${
        pageNum}/${
        size}`,
              method: 'post',
              //如果携带的是普通参数:params,如果携带的json数据:data
              data:searchObj
            })
          }
    }

![在这里插入图片描述][1a673dd82e664e1ca5ad4cf5f84e9dfd.png]

### 2、初始化vue组件 ###

src/views/yygh/hospset/list.vue

<template>
        <div class="app-container">
      
        </div>
    </template>
    <script>
    import hospset from '@/api/hospset.js'
    export default {
        
        data(){
        
            return{
        }  // 定义数据
        },
        methods:{
         // 调用api层获取数据库中的数据
        },
        created(){
          // 当页面加载时获取数据
        }
    }
    </script>

### 3、表格渲染 ###

<el-table
              v-loading="listLoading"
              :data="list"
              element-loading-text="数据加载中"
              border
              fit
              highlight-current-row>
    
        <el-table-column
                         label="序号"
                         width="70"
                         align="center">
            <template slot-scope="scope">
                {
        {
         (page - 1) * limit + scope.$index + 1 }}
            </template>
        </el-table-column>
    
        <el-table-column prop="hosname" label="医院名称" width="180" />
    
        <el-table-column prop="hoscode" label="医院编号" width="160" />
    
        <el-table-column prop="apiUrl" label="地址" width="200"/>
    
        <el-table-column prop="contactsName" label="联系人"/>
    
        <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
                {
        {
         scope.row.status===1?'可用':'不可用' }}
            </template>
        </el-table-column>
    
        <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
                <router-link :to="'/yygh/hospset/edit/'+scope.row.id">
                    <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
                </router-link>
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

### 4、定义methods ###

methods:{
         // 调用api层获取数据库中的数据
          //分页查询
          getPageInfo(val=1){
        
            this.page = val
            this.listLoading = true
            hospset.getHospsetPage(this.page,this.limit,this.searchObj).then(res=>{
        
              this.total = res.data.total
              this.list = res.data.rows
              this.listLoading = false
          })
          },
          //分页事件
          handleCurrentChange(val){
        
            this.getPageInfo(val)
          },
          //提交查询
          onSubmit(){
        
            this.getPageInfo()
          },
          //清空
          empty(){
        
            this.searchObj={
        },
            this.getPageInfo();
          }
        },
        created(){
          // 当页面加载时获取数据
          this.getPageInfo()
    
        }

### 5、定义data ###

data(){
        
          return{
        
            listLoading:false,  // 是否显示loading信息
            list:[],  // 数据列表
            page:1,  // 页码
            limit:3,  // 每页记录数
            searchObj:{
        },  // 查询条件
            total:0  // 总记录数
          }  
       },

### 6、分页组件 ###

<el-pagination
          @current-change="handleCurrentChange"
          :page-size="limit"
          layout="total,  prev, pager, next, jumper"
          style="padding: 30px 0; text-align: center;"
          :total="total">
        </el-pagination>

### 7、顶部查询表单 ###

<el-form :inline="true" :model="searchObj" class="demo-form-inline">
            <el-form-item label="医院名称">
              <el-input v-model="searchObj.hosname" placeholder="医院名称"></el-input>
            </el-form-item>
            <el-form-item label="医院编号">
              <el-input v-model="searchObj.hoscode" placeholder="医院编号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button type="primary" @click="empty">清空</el-button>
            </el-form-item>
          </el-form>

清空方法

//清空
          empty(){
        
            this.searchObj={
        },
            this.getPageInfo();
          }

### 8、测试 ###

![在这里插入图片描述][8cd31ad600614f3c9959ea81697d41c2.png]

## 三、删除 ##

### 1、定义api ###

src/api/yygh/hospset.js

removeById(id){
        
            return request({
        
              url:`${
        API}/${
        id}`,
              method:'delete'
            })
          }

![在这里插入图片描述][bb269654d1a04699875545e566caced5.png]

### 2、定义methods ###

src/views/yygh/hospset/list.vue  
使用MessageBox 弹框组件

//删除
          removeDataById(id){
        
            this.$confirm('此操作将永久删除该医院, 是否继续?', '提示', {
        
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
        
              hospset.removeById(id).then(res=>{
        
                this.$message({
        
                type: 'success',
                message: '删除成功!'
              });
              const totalPage = Math.ceil((this.total - 1) / this.limit)
              this.page = this.page > totalPage ? totalPage : this.page
              this.page = this.page < 1 ? 1 : this.page
              this.handleCurrentChange(this.page)
              })
            }).catch(() => {
        
              this.$message({
        
                type: 'info',
                message: '已取消删除'
              });          
            });
          }

## 四、新增 ##

### 1、定义api ###

src/api/yygh/hospset.js

save(hospset){
        
            return request({
        
              url:`${
        API}/save`,
              method:'post',
              data:hospset
            })
          }

![在这里插入图片描述][016b480925e64aab8ea1afa772917bff.png]

### 2、初始化组件 ###

src/views/yygh/hospset/save.vue

export default{
        
      data(){
        
        return{
        
          hospset:{
        },
          saveBtnDisabled:false, //保存按钮是否禁用
          rules: {
          //校验
              hosname: [
                {
         required: true, message: '请输入医院名称', trigger: 'blur' },
              ],
              hoscode: [
                {
         required: true, message: '请输入医院编号', trigger: 'blur' }
              ],
              apiUrl: [
              {
         required: true, message: '请输入医院url', trigger: 'blur' }
              ],
              contactsName: [
              {
         required: true, message: '请输入联系人', trigger: 'blur' }
              ],
              contactsPhone: [
              {
         required: true, message: '请输入电话号码', trigger: 'blur' },
              {
         min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur' }
              ]
            }
          };
        },
        methods:{
        
          
        }
    
    }
    
    </script>

### 3、实现新增功能 ###

引入hospset api模块

import hospset from '@/api/hospset';

完善save方法

methods:{
        
          saveOrUpdate(formName){
        
            this.$refs[formName].validate((valid) => {
        
              if (valid) {
        
                hospset.save(this.hospset).then(res=>{
        
                  this.saveBtnDisabled=true
                  this.$message.success('添加成功')
                  //路由跳转
                  this.$router.push({
        path:'/yygh/hospset/list'})
                })
              } else {
        
                this.$message.error('表单填写有误')
                return false;
              }
            });
          },
          }

## 五、回显 ##

### 1、定义api ###

src/api/yygh/hospset.js

//修改之回显数据
          detail(id){
        
            return request({
        
              url:`${
        API}/detail/${
        id}`,
              method:'get'
            })
          }

![在这里插入图片描述][00522469dcbd429a935194b67b45dbf3.png]

### 2、增添路由 ###

src/router/index.js

{
        
            path: 'edit/:id',  //这里的:id和后端 @GetMapping("/detail/{id}")一样
            name: '医院设置修改',
            component: () => import('@/views/yygh/hospset/save'),
            meta: {
         title: '医院设置修改', icon: 'tree' },
            hidden:true
          }

### 3、实现回显功能 ###

created(){
        
          if(this.$route.params && this.$route.params.id){
          //this.$route.params.id是对应path: 'edit/:id'
            var id = this.$route.params.id  
            hospset.detail(id).then(res=>{
        
              this.hospset = res.data.items
            })
          }
        }

## 六、更新 ##

### 1、定义api ###

//修改之修改数据
          update(hospset){
        
            return request({
        
              url:`${
        API}/update`,
              method:'put',
              data:hospset
            })
          }

![在这里插入图片描述][9b4ae2e0d33b47c18ffcd8034bc78429.png]

### 2、组件中调用api ###

看修操作，因为修改和添加是共用的一个页面

methods:{
        
          saveOrUpdate(formName){
        
            this.$refs[formName].validate((valid) => {
        
              if (valid) {
        
                this.saveBtnDisabled=true
                if(!this.hospset.id){
        
                  //添加操作
                  hospset.save(this.hospset).then(res=>{
        
                    this.$message.success('添加成功')
                    //路由跳转
                    this.$router.push({
        path:'/yygh/hospset/list'})
                })
                }else{
        
                  //修改操作
                  hospset.update(this.hospset).then(res=>{
        
                    this.$message.success('修改成功')
                    //路由跳转
                    this.$router.push({
        path:'/yygh/hospset/list'})
                  })
                }
              } else {
        
                this.$message.error('表单填写有误')
                return false;
              }
            });
          }
        },

## 七、批量删除 ##

### 1、定义api ###

src/api/yygh/hospset.js

//批量删除
          delete(ids){
        
            return request({
        
              url:`${
        API}/delete`,
              method:'delete',
              data:ids
            })
          }

![在这里插入图片描述][a716314d465147afbf1a20e23f9a5104.png]

### 2、初始化组件 ###

src/views/yygh/hospset/list.vue  
在table组件上添加 批量删除 按钮

<el-button type="primary" @click="removeRows()">批量删除</el-button>

在table组件上添加复选框  
记得在el-table加上@selection-change事件

<el-table
              v-loading="listLoading"
              :data="list"
              element-loading-text="数据加载中"
              border
              fit
              highlight-current-row @selection-change="handleSelectionChange">
    
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>

### 3、实现新增功能 ###

data定义数据

multipleSelection:[] // 批量选择中选择的记录列表

完善方法

//批量删除
          removeRows(){
        
            this.$confirm('此操作将永久删除医院设置信息, 是否继续?', '提示', {
        
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
        
              var ids = []
              for(var i = 0;i<this.multipleSelection.length;i++){
        
                var obj = this.multipleSelection[i]
                ids.push(obj.id)
              }
              hospset.delete(ids).then(res=>{
        
                console.log(ids)
                this.$message.success('批量删除成功')
              })
              this.getPageInfo()
            }).catch(() => {
        
              this.$message({
        
                type: 'info',
                message: '已取消删除'
              });          
            });
          },
          // 当表格复选框选项发生变化的时候触发
          handleSelectionChange(selection){
        
            this.multipleSelection = selection
    
          },

## 八、医院锁定 ##

比如医院遭到投诉，我们就需要锁定

### 1、定义api ###

src/api/yygh/hospset.js

//锁定与解锁
          status(id,status){
        
            return request({
        
              url:`${
        API}/status/${
        id}/${
        status}`,
              method:'post'
            })
          }

![在这里插入图片描述][590735ddd51f436da4f93d15a3ca9c2e.png]

### 2、修改table组件 ###

在list.vue页面添加 锁定和取消锁定按钮

<el-table-column label="操作" width="300" align="center">
            <template slot-scope="scope">
                <router-link :to="'/yygh/hospset/edit/'+scope.row.id">
                    <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
                </router-link>
                <el-button type="danger" size="mini" icon="el- -delete" @click="removeDataById(scope.row.id)">删除</el-button>
                <el-button v-if="scope.row.status==1" type="primary" size="mini" 
                     icon="el-icon-delete" @click="lockHostSet(scope.row.id,0)">锁定</el-button>
                <el-button v-if="scope.row.status==0" type="danger" size="mini" 
                     icon="el-icon-delete" @click="lockHostSet(scope.row.id,1)">取消锁定</el-button>
            </template>
        </el-table-column>

### 3、编写调用方法 ###

//锁定和取消锁定
         lockHostSet(id,status){
        
          hospset.status(id,status).then(res=>{
        
            this.getPageInfo()
          })
         },

[d39382c97e3142ba83379e740bed0491.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e119da6821b841e5bfa2ca82c7e173c7.png
[55dfa6b3d03b4af599bc370e0ccd2534.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/ee3c65359a544b1a9276f7179b2353f6.png
[1a673dd82e664e1ca5ad4cf5f84e9dfd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/d8353dccbc8b4002bb5658c59477676b.png
[8cd31ad600614f3c9959ea81697d41c2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/031516a44ccc460b8da2b192aa017d7d.png
[bb269654d1a04699875545e566caced5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/63f78cbd6f684546ad18d585eb12521a.png
[016b480925e64aab8ea1afa772917bff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/edd4a17cae4645a499fecc524b2107f7.png
[00522469dcbd429a935194b67b45dbf3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/9020d92070fb4c3abc4e5de7d4a997b5.png
[9b4ae2e0d33b47c18ffcd8034bc78429.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/9f27a5f23e9e42caba0b79f69ec7734e.png
[a716314d465147afbf1a20e23f9a5104.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/9c6abbd8bba646e98f9c5d4f6ef5c446.png
[590735ddd51f436da4f93d15a3ca9c2e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e22730067eae44bc8ed67d21606dd5ea.png