尚医通（七）医院列表前端实现_尚医通前端项目要点

一、医院查询添加功能

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' }
      }
    ]
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2、创建路由对应的页面

list.vue

<template>
    <div class="app-container">
        医院设置列表
    </div>
</template>
1
2
3
4
5

save.vue

<template>
    <div class="app-container">
      医院添加 | 修改页面
    </div>
  </template>
1
2
3
4
5

二、分页列表

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
        })
      }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

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()

    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

5、定义data

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

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>
1
2
3
4
5
6
7

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>
1
2
3
4
5
6
7
8
9
10
11
12

清空方法

      //清空
      empty(){
        this.searchObj={},
        this.getPageInfo();
      }
1
2
3
4
5

8、测试

三、删除

1、定义api

src/api/yygh/hospset.js

removeById(id){
        return request({
          url:`${API}/${id}`,
          method:'delete'
        })
      }
1
2
3
4
5
6

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

四、新增

1、定义api

src/api/yygh/hospset.js

      save(hospset){
        return request({
          url:`${API}/save`,
          method:'post',
          data:hospset
        })
      }
1
2
3
4
5
6
7

2、初始化组件

src/views/yygh/hospset/save.vue

<template>
    <div class="app-container">
      <el-form label-width="120px" :rules="rules" :model="hospset" ref="ruleForm">
      <el-form-item label="医院名称" prop="hosname">
        <el-input v-model="hospset.hosname"/>
      </el-form-item>
      <el-form-item label="医院编号" prop="hoscode">
        <el-input v-model="hospset.hoscode"/>
      </el-form-item>
      <el-form-item label="api地址" prop="apiUrl">
        <el-input v-model="hospset.apiUrl"/>
      </el-form-item>
      <el-form-item label="联系人" prop="contactsName">
        <el-input v-model="hospset.contactsName"/>
      </el-form-item>
      <el-form-item label="电话" prop="contactsPhone">
        <el-input v-model="hospset.contactsPhone"/>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate('ruleForm')">保存</el-button>
      </el-form-item>
    </el-form>
    </div>
  </template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

js

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

3、实现新增功能

引入hospset api模块

import hospset from '@/api/hospset';
1

完善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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

五、回显

1、定义api

src/api/yygh/hospset.js

      //修改之回显数据
      detail(id){
        return request({
          url:`${API}/detail/${id}`,
          method:'get'
        })
      }
1
2
3
4
5
6
7

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
      }
1
2
3
4
5
6
7

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
2
3
4
5
6
7
8

六、更新

1、定义api

//修改之修改数据
      update(hospset){
        return request({
          url:`${API}/update`,
          method:'put',
          data:hospset
        })
      }
1
2
3
4
5
6
7
8

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

七、批量删除

1、定义api

src/api/yygh/hospset.js

      //批量删除
      delete(ids){
        return request({
          url:`${API}/delete`,
          method:'delete',
          data:ids
        })
      }
1
2
3
4
5
6
7
8

2、初始化组件

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

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

在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>
1
2
3
4
5
6
7
8
9
10
11
12

3、实现新增功能

data定义数据

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

完善方法

//批量删除
      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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

八、医院锁定

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

1、定义api

src/api/yygh/hospset.js

    //锁定与解锁
      status(id,status){
        return request({
          url:`${API}/status/${id}/${status}`,
          method:'post'
        })
      }
1
2
3
4
5
6
7

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>
1
2
3
4
5
6
7
8
9
10
11
12

3、编写调用方法

     //锁定和取消锁定
     lockHostSet(id,status){
      hospset.status(id,status).then(res=>{
        this.getPageInfo()
      })
     },
1
2
3
4
5
6