SSM框架+VUE+Mysql实现的疫苗预约接种管理系统（功能包含分角色，登录/注册、疫苗管理、接种点管理、用户管理、疫苗类型管理、我的预约、预约接种管理、关于等）

anmu4200

已于 2022-10-30 18:07:53 修改

阅读量830

点赞数

分类专栏： java系统文章标签： mysql vue.js 前端 mybatis spring

于 2022-10-26 00:15:37 首次发布

本文链接：https://blog.csdn.net/anmu4200/article/details/127524573

版权

java系统专栏收录该内容

78 篇文章 7 订阅

订阅专栏

博客目录

SSM框架+VUE+Mysql实现的疫苗预约接种管理系统

SSM框架+VUE+Mysql实现的疫苗预约接种管理系统

本系统为了解决疫苗线下预约场景复杂，预约难等一系列问题，开发了疫苗接种管理平台，很好的提供了疫苗的管理和接种整个流程，使得接种疫苗变得高效。
(文末查看完整源码)

实现功能截图

用户注册
请添加图片描述
登录

我的预约

疫苗管理

添加疫苗

疫苗类型管理

添加疫苗类型

接种点管理

添加接种点

预约接种管理

用户管理

系统功能

本系统实现了以下功能：
1、注册登录
2、疫苗预约
3、我的预约
4、疫苗管理
5、添加疫苗
6、疫苗类型管理
7、添加疫苗类型
8、预约接种管理
9、接种点管理
10、用户管理
等

使用技术

数据库：mysql
开发工具：Idea（Myeclispe、Eclipse也可以）
知识点：SSM框架+VUE

项目结构
请添加图片描述

代码

java端
实体类
Inject.java

package com.code2life.pojo;

import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;

import java.sql.Date;

/**
 * 接种预约类--对应t_inject表
 */
@TableName(value = "t_inject",resultMap = "injectMap")
public class Inject {
    @TableId // 注解主键
    private Integer id; // id INT PRIMARY KEY auto_increment, 编号
    private Integer userId; // user_id INT, 用户id
    private Integer inoSiteId; // ino_site_id INT, 接种点id
    private Date date; // date DATE, 接种日期
    private String times; // times VARCHAR(20), 接种时间: “上午”或“下午”
    @TableField(exist = false)
    private String userName;
    @TableField(exist = false)
    private String inoSiteName;
    @TableField(exist = false)
    private User userBean; // 一对一关联对象
    private InoSite inoSiteBean;

    @Override
    public String toString() {
        return "Inject{" +
                "id=" + id +
                ", userId=" + userId +
                ", inoSiteId=" + inoSiteId +
                ", date=" + date +
                ", times='" + times + '\'' +
                ", userName='" + userName + '\'' +
                ", inoSiteName='" + inoSiteName + '\'' +
                ", userBean=" + userBean +
                ", inoSiteBean=" + inoSiteBean +
                '}';
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public Integer getUserId() {
        return userId;
    }

    public void setUserId(Integer userId) {
        this.userId = userId;
    }

    public Integer getInoSiteId() {
        return inoSiteId;
    }

    public void setInoSiteId(Integer inoSiteId) {
        this.inoSiteId = inoSiteId;
    }

    public Date getDate() {
        return date;
    }

    public void setDate(Date date) {
        this.date = date;
    }

    public String getTimes() {
        return times;
    }

    public void setTimes(String times) {
        this.times = times;
    }

    public User getUserBean() {
        return userBean;
    }

    public void setUserBean(User userBean) {
        this.userBean = userBean;
    }

    public InoSite getInoSiteBean() {
        return inoSiteBean;
    }

    public void setInoSiteBean(InoSite inoSiteBean) {
        this.inoSiteBean = inoSiteBean;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getInoSiteName() {
        return inoSiteName;
    }

    public void setInoSiteName(String inoSiteName) {
        this.inoSiteName = inoSiteName;
    }
}

Vaccine.java

package com.code2life.pojo;

import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;

/**
 * 疫苗类--对应t_vaccine表
 */
@TableName(value = "t_vaccine",resultMap = "vaccineMap")
public class Vaccine {
    @TableId
    private Integer id; // id INT PRIMARY KEY auto_increment, 编号
    private String name; //name VARCHAR(64), 名称
    private String company; // company VARCHAR(64), 生产厂商
    private Integer vacTypeId; // vac_type_id INT 疫苗类型编号(一对一级联所用字段)
    @TableField(exist = false)
    private VacType vacTypeBean; // 一对一关联对象
    @Override
    public String toString() {
        return "Vaccine{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", company='" + company + '\'' +
                ", vacTypeId=" + vacTypeId +
                ", vacTypeBean=" + vacTypeBean +
                '}';
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getCompany() {
        return company;
    }

    public void setCompany(String company) {
        this.company = company;
    }

    public Integer getVacTypeId() {
        return vacTypeId;
    }

    public void setVacTypeId(Integer vacTypeId) {
        this.vacTypeId = vacTypeId;
    }

    public VacType getVacTypeBean() {
        return vacTypeBean;
    }

    public void setVacTypeBean(VacType vacTypeBean) {
        this.vacTypeBean = vacTypeBean;
    }
}

Dao层
InjectMapper.java

package com.code2life.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.*;
import com.code2life.pojo.Inject;
import org.springframework.stereotype.Repository;

@Repository
public interface InjectMapper extends BaseMapper<Inject> {
    // 生成接种预约
    int createOrder(@Param("userId") int userId, @Param("inoSiteId") int inoSiteId,
                    @Param("times") String times);
}

VaccineMapper.java

package com.code2life.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.code2life.pojo.Vaccine;
import org.springframework.stereotype.Repository;

@Repository
public interface VaccineMapper extends BaseMapper<Vaccine> {
}

service层
InjectServiceImpl.java

package com.code2life.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.code2life.mapper.InjectMapper;
import com.code2life.pojo.Inject;
import com.code2life.service.InjectService;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import javax.annotation.Resource;

@Transactional
@Service
public class InjectServiceImpl extends ServiceImpl<InjectMapper, Inject>
        implements InjectService {
    @Resource
    private InjectMapper injectMapper;

    @Override
    public boolean createOrder(int userId, int inoSiteId, String times) {
        return injectMapper.createOrder(userId,inoSiteId,times)>0;
    }
}

VaccineServiceImpl.java

package com.code2life.service.impl;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.code2life.pojo.Vaccine;
import com.code2life.mapper.VaccineMapper;
import com.code2life.service.VaccineService;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import javax.annotation.Resource;
import java.util.List;

@Transactional
@Service
public class VaccineServiceImpl extends ServiceImpl<VaccineMapper, Vaccine>
        implements VaccineService {
    @Resource
    private VaccineMapper vaccineMapper;

    @Override
    public Vaccine findById(int id) {
        return vaccineMapper.selectById(id);
    }
    // 列表数据
    @Override
    public List<Vaccine> list() {
        QueryWrapper<Vaccine> query = new QueryWrapper<>();
        return vaccineMapper.selectList(query);
    }
    // 添加
    @Override
    public boolean save(Vaccine vaccine) {
        return vaccineMapper.insert(vaccine)>0;
    }
    // 更新
    @Override
    public boolean update(Vaccine vaccine) {
        return vaccineMapper.updateById(vaccine)>0;
    }
    // 删除
    @Override
    public boolean delete(int id) {
        return vaccineMapper.deleteById(id)>0;
    }
    // 疫苗分类查询列表
    @Override
    public Page<Vaccine> vacTypeList(int pageNo, int size, int vacTypeId) {
        System.out.println("疫苗分类查询列表");
        Page<Vaccine> page=new Page<>(pageNo,size);
        QueryWrapper<Vaccine> query= new QueryWrapper<>();
        query.eq("vac_type_id",vacTypeId);
        return vaccineMapper.selectPage(page,query);
    }
}

controller层
InjectController.java

package com.code2life.controller;

import com.alibaba.fastjson.JSONObject;
import com.code2life.pojo.Inject;
import com.code2life.until.ResponseBean;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import com.code2life.service.InjectService;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.List;

@Api(tags = "预约接种管理")
@RestController
@RequestMapping("/order")
public class InjectController {
    @Resource
    private InjectService injectService;

    @ApiOperation("预约")
    @PostMapping
    public ResponseBean createOrder(@RequestBody JSONObject json) {
        System.out.println("create order: "+json);
        int userId = json.getObject("userId",Integer.class);
        int inoSiteId = json.getObject("inoSiteId",Integer.class);
        String times = json.getObject("times",String.class);
        System.out.println(userId+", "+inoSiteId+", "+times);
        boolean result = injectService.createOrder(userId,inoSiteId,times);
        if (result) {
            return ResponseBean.success(true);
        } else {
            return ResponseBean.failure(false);
        }
    }

//    @ApiOperation("预约分页列表")
//    @GetMapping
//    public ResponseBean orderList(@RequestParam int pageNo,@RequestParam int size,@RequestParam int userId){
//        // 新建分页对象
//        Page<Inject> page = new Page<>(pageNo,size);
//        return ResponseBean.success(injectService.list(page,userId));
//    }

    @ApiOperation("查询列表")
    @GetMapping("/list")
    public ResponseBean selectAll() {
        List<Inject> list = injectService.list();
        System.out.println(list);
        return ResponseBean.success(list);
    }

    @DeleteMapping("/{id}")
    public ResponseBean delete(@PathVariable int id){
        boolean result = injectService.removeById(id);
        if (result){
            return ResponseBean.success(result);
        }else{
            return ResponseBean.failure();
        }
    }
}

VaccineController.java

package com.code2life.controller;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.code2life.pojo.Vaccine;
import com.code2life.service.VaccineService;
import com.code2life.until.ResponseBean;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.List;

@Api(tags = "疫苗管理")
@RestController
@RequestMapping("/vaccine")
public class VaccineController {
    @Resource
    private VaccineService vaccineService;

    @ApiOperation("查询列表") // 显示所有种类的疫苗
    @GetMapping("/list")
    public ResponseBean selectAll(){
        List<Vaccine> list = vaccineService.list();
        System.out.println(list);
        return ResponseBean.success(list);
    }

    @ApiOperation("分页查询列表")
    @GetMapping("/page")
    @ResponseBody
    public ResponseBean list(@RequestParam int pageNo, @RequestParam int size){
        System.out.println("list:"+pageNo);
        Page<Vaccine> page=new Page<>(pageNo,size);
//        page.setCurrent(PageNo);
//        page.setSize(size);
        Page<Vaccine> pages= vaccineService.page(page,null);
        System.out.println("pages"+pages.getPages());
        System.out.println("total"+pages.getTotal());
        System.out.println(pages.getRecords());
        return ResponseBean.success(pages);
    }
    @ApiOperation("添加疫苗")
    @PostMapping
    public ResponseBean addVacType(@RequestBody Vaccine vaccine){
        System.out.println("添加疫苗："+vaccine);
        boolean result=vaccineService.save(vaccine);
        if (result){
            return ResponseBean.success(result);
        }else {
            return ResponseBean.failure(result);
        }
    }

    @ApiOperation("删除疫苗")
    @DeleteMapping("/{id}")
    public ResponseBean delVacType(@PathVariable int id){
        System.out.println("删除疫苗种类的编号："+id);
        boolean result=vaccineService.removeById(id);
        if (result){
            return ResponseBean.success(result);
        }else {
            return ResponseBean.failure(result);
        }
    }

    @ApiOperation("修改疫苗")
    @PutMapping
    public ResponseBean updateVacType(@RequestBody Vaccine vaccine){
        System.out.println("修改疫苗种类："+vaccine);
        boolean result=vaccineService.updateById(vaccine);
        if (result){
            return ResponseBean.success(result);
        }else {
            return ResponseBean.failure(result);
        }
    }
    // 查询一个疫苗(根据疫苗编号查询)
    @ApiOperation("查询疫苗")
    @GetMapping("/{id}")
    public ResponseBean selectByName(@PathVariable int id){
        System.out.println("selectByName："+id);
        System.out.println(vaccineService);
        Vaccine vaccine = vaccineService.getById(id);
        return ResponseBean.success(vaccine);
    }
    // 疫苗分类查询
    @ApiOperation("分类查询疫苗")
    @GetMapping("/type")  //映射的url = "/vaccine/{type}"
    public ResponseBean typeList(@RequestParam int pageNo, @RequestParam int size, @RequestParam int vacTypeId){
        System.out.println("查询类型："+vacTypeId);
        Page<Vaccine> page=new Page<>();
        page.setCurrent(pageNo);
        page.setSize(size);
        QueryWrapper<Vaccine> query = new QueryWrapper<>();
        //设置条件
        query.eq("vac_type_id", vacTypeId);
        Page<Vaccine> pages=vaccineService.page(page,query);
        return ResponseBean.success(pages);
    }
}

vue端
store: index.js

import Vue from 'vue'
import Vuex from 'vuex'
import { default as axios } from '../util/index'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {},
    getters: {},
    mutations: {},
    actions: {
        // 异步获取用户信息
        getUserInfo() {
            let token = localStorage.getItem('Authorization');
            return new Promise((resolve, reject) => {
                console.log("...store获取用户信息，token: ", token)
                axios({
                    url: '/api/login/info',
                    method: 'post',
                    data: token
                }).then(res => {
                    console.log("2.store->user获取用户信息，进行权限处理", res)
                    // 保存用户权限列表信息
                    localStorage.setItem('SET_USER', JSON.stringify(res.data.data));
                    resolve(res)
                }).catch(error => {
                    reject(error)
                })
            })
        },
    },
    modules: {}
})
export default store;

router:index.js

import Vue from 'vue'
import store from '../store/index'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [{
        path: '/', // 首页面，静态加载（速度快），在访问到根目录时打开
        name: 'home',
        meta: {
            show: false,
            title: '首页',
            icon: ''
        },
        component: HomeView,
        children: [{
                path: '/user',
                name: 'user',
                meta: {
                    show: true,
                    title: '用户管理',
                    icon: 'el-icon-user'
                },
                //懒加载，路由到此页面时才加载
                component: () => import( /* webpackChunkName: "user" */ '../views/UserView.vue')
            },
            {
                path: '/inoSite',
                name: 'inoSite',
                meta: {
                    show: true,
                    title: '接种点管理',
                    icon: ''
                },
                component: () => import( /* webpackChunkName: "inoSite" */ '../views/InoSiteView.vue')
            },
            {
                path: '/vaccine',
                name: 'vaccine',
                meta: {
                    show: true,
                    title: '疫苗管理',
                    icon: ''
                },
                component: () => import( /* webpackChunkName: "vaccine" */ '../views/VaccineView.vue')
            },
            {
                path: '/vacType',
                name: 'vacType',
                meta: {
                    show: true,
                    title: '疫苗类型管理',
                    icon: ''
                },
                component: () => import( /* webpackChunkName: "hospital" */ '../views/VacTypeView.vue')
            },
            {
                path: '/order',
                name: 'order',
                meta: {
                    show: true,
                    title: '预约接种管理',
                    icon: ''
                },
                component: () => import( /* webpackChunkName: "order" */ '../views/OrderView.vue')
            },
            {
                path: '/personal',
                name: 'personal',
                meta: {
                    show: true,
                    title: '我的预约',
                    icon: ''
                },
                component: () => import( /* webpackChunkName: "order" */ '../views/PersonalView.vue')
            },
            {
                path: '/about',
                name: 'about',
                meta: {
                    show: true,
                    title: '关于',
                    icon: ''
                },
                // route level code-splitting
                // this generates a separate chunk (about.[hash].js) for this route
                // which is lazy-loaded when the route is visited.
                component: () => import( /* webpackChunkName: "about" */ '../views/AboutView.vue')
            }
        ]
    },
    {
        path: '/login',
        name: 'login',
        meta: {
            show: false,
            title: '',
            icon: ''
        },
        // 懒加载（lazy-loaded）， 路由到此页面时才加载（when the route is visited.）
        component: () => import( /* webpackChunkName: "login" */ '../views/LoginView.vue')
    },
    {
        path: '/registry',
        name: 'registry',
        meta: {
            show: false,
            title: '',
            icon: ''
        },
        // 懒加载（lazy-loaded）， 路由到此页面时才加载（when the route is visited.）
        component: () => import( /* webpackChunkName: "registry" */ '../views/RegistryView.vue')
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

/**
 * 路由拦截器
 * 功能：全局导航守卫，对路由进行处理
 * 参数：
 * to 将要访问的路径
 * from 代表从那个路径跳转而来
 * next 是一个函数 表示放行
 * ---- next()：放行
 * ---- next('/home')：强制跳转到home这个页面
 */
router.beforeEach(async (to, from, next) => {
    if (to.path === '/login') {
        next(); // 正常放行
    } else {
        // 取token
        let token = localStorage.getItem('Authorization');
        console.log("导航守卫1", token);
        if (token === null || token === '') { // 如果token不存在
            console.log("导航守卫2 token==null to /login", token)
            next('/login'); // 跳转至登录页面
        } else {
            // 调用store，来分发请求，获取登录用户的信息
            await store.dispatch('getUserInfo').then((res) => {
                console.log("导航守卫，start4 用户信息：", res);
                localStorage.setItem("SET_USER", JSON.stringify(res.data.data));
                next(); //放行
            }).catch(res => {
                console.log("导航守卫，start5: ", res);
                next(); // 放行
            });
        }
    }
});

export default router

views: InoSiteView.vue

<template>
    <!-- 接种点管理界面 -->
    <div id="inoSite">
        <!-- 搜索表单 -->
        <el-form :inline="true" :model="formSearch" class="demo-formSearch">
            <el-form-item label="名称">
                <el-input v-model="formSearch.name" placeholder="搜索名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-button type="success" @click="onAdd">添加</el-button>
        <!-- 接种点列表 -->
        <el-table :data="inoSitePage.records" stripe style="width: 100%">
            <el-table-column prop="id" label="序号" width="60">
            </el-table-column>
            <el-table-column prop="name" label="名称" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="180">
            </el-table-column>
            <el-table-column prop="startDate" label="开始日期" width="90">
            </el-table-column>
            <el-table-column prop="endDate" label="结束日期" width="90">
            </el-table-column>
            <el-table-column prop="vaccineBean.name" label="可接种疫苗">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" @click="onEdit(scope.$index,scope.row)">修改</el-button>
                    <el-button type="danger" @click="onDel(scope.$index,scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- Element-UI 分页器 -->
        <el-pagination @current-change="currentChange" :page-size="inoSitePage.size" background layout="prev,pager,next"
            :total="inoSitePage.total">
        </el-pagination>
        <div>
            <!-- 添加接种点数据 -->
            <el-dialog title="添加接种点数据" :visible.sync="dialogVisible" width="50%">
                <el-form :model="inoSiteForm" status-icon :rules="rules" ref="inoSiteForm" label-width="100px"
                    class="demo-inoSiteForm">
                    <el-form-item label="名称" prop="name">
                        <el-input type="text" v-model="inoSiteForm.name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="地址" prop="address">
                        <el-input type="textarea" :rows="2" v-model="inoSiteForm.address" auto-complete="off">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="开始日期">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期" v-model="inoSiteForm.startDate" style="width: 100%;">
                            </el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="结束日期">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期" v-model="inoSiteForm.endDate" style="width: 100%;">
                            </el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="可接种疫苗" prop="vacId">
                        <el-select v-model="inoSiteForm.vacId" placeholder="请选择">
                            <el-option v-for="item in vaccineList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="onSave()">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 修改接种点数据 -->
            <el-dialog title="修改接种点数据" :visible.sync="editDialogVisible" width="50%">
                <el-form :model="inoSiteForm" status-icon :rules="rules" ref="inoSiteForm" label-width="100px"
                    class="demo-inoSiteForm">
                    <el-form-item label="名称" prop="name">
                        <el-input type="text" v-model="inoSiteForm.name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="地址" prop="address">
                        <el-input type="textarea" :rows="2" v-model="inoSiteForm.address" auto-complete="off">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="开始日期" prop="startDate">
                        <el-input type="text" v-model="inoSiteForm.startDate" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="结束日期" prop="endDate">
                        <el-input type="text" v-model="inoSiteForm.endDate" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="可接种疫苗" prop="vacId">
                        <el-select v-model="inoSiteForm.vacId" placeholder="请选择">
                            <el-option v-for="item in vaccineList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="onUpdate()">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    //import axios from 'axios';
    export default {
        name: 'InoSiteView',
        data() {
            return {
                pager: 0, // 总页码数
                // 分页数据定义
                inoSitePage: {
                    records: [], // 分页列表
                    total: 0, // 总记录数
                    size: 10, // 分页大小（每页显示多少条）
                    pages: 0, // 总页码
                    current: 1, // 当前页码（默认显示第1页）
                },
                formSearch: { // 搜索表单绑定数据
                    name: ''
                },
                inoSiteForm: { // 修改、添加表单数据
                    name: '',
                    address: '',
                    startDate: '',
                    endDate: '',
                    vacId: ''
                },
                vaccineList: [], // 疫苗列表
                dialogVisible: false, // 添加对话框显示控制
                editDialogVisible: false, // 修改对话框显示控制
                rules: {
                    name: [{
                            required: true,
                            message: '请输入名称',
                            trigger: 'blur'
                        },
                        {
                            min: 2,
                            max: 12,
                            message: '长度在 2 到 12 个字符',
                            trigger: 'blur'
                        }
                    ],
                    address: [{
                            required: true,
                            message: '请输入地址',
                            trigger: 'blur'
                        },
                        {
                            min: 3,
                            max: 250,
                            message: '长度在 3 到 250 个字符',
                            trigger: 'blur'
                        }
                    ]
                } //rules
            }
        },
        created() {
            this.getList(1); // 调用列表分页函数
        },
        methods: {
            // 列表分页
            getList(pageNo) {
                this.axios({
                    method: 'get',
                    url: "/api/inosite/page",
                    params: {
                        pageNo: pageNo,
                        size: this.inoSitePage.size,
                    }
                }).then(res => {
                    console.log("分页列表:", res);
                    this.inoSitePage.records = res.data.data.records; // 更新数据
                    this.pager = res.data.data.pages; // 把总页码赋值给分页器pager对象
                    this.inoSitePage.total = res.data.data.total; // 把总记录数赋值给分布器total
                })
            },
            // 页码改变事件
            currentChange(page) {
                this.getList(page);
            },
            // 搜索功能
            onSearch() {
                this.axios({
                    method: 'post', // 传递json格式数据，用post请求
                    url: '/api/inosite/page',
                    data: {
                        page: this.inoSitePage,
                        inoSite: {
                            name: this.formSearch.name
                        }
                    }
                }).then(res => {
                    //console.log("搜索:", res);
                    this.inoSitePage.records = res.data.data.records; // 查询到的记录列表
                    this.pager = res.data.data.pages;
                })
            },
            // 添加 对话框
            onAdd() {
                this.dialogVisible = true; // 显示对话框
                this.inoSiteForm = {}; // 清空绑定的数据
                this.getVaccineList(); // 获取疫苗列表
            },
            // 修改 对话框
            onEdit(index, row) {
                console.log("修改", index, row);
                this.editDialogVisible = true; // 显示对话框
                this.inoSiteForm = row; // 把被修改的数据更新到对话框绑定的模型数据上
                this.getVaccineList(); // 获取疫苗列表
            },
            // 删除 对话框
            // 形参：数据在列表中的索引index、记录对象row
            onDel(index, row) {
                console.log("删除: ", index, row);
                this.$confirm('确认要删除吗？', '提示', {
                    type: 'warning'
                }).then(() => { // 确认后，执行删除操作
                    this.axios({
                        method: 'delete',
                        url: '/api/inosite/' + row.id
                    }).then(res => {
                        console.log("删除接种点: ", res);
                        if (200 == res.data.code) {
                            this.$message.success("数据删除成功!");
                            // 列表数据改变，引起页面刷新
                            this.inoSitePage.records.splice(index, 1); // 从显示列表中删除当前记录
                        }
                    }).catch(() => {
                        this.$message.error("数据删除失败!");
                    })
                }) // confrim.then
            },
            // 此函数在添加对话框中被使用。调用时刻：点击“确 定”按钮时
            // 保存添加的表单数据
            onSave() {
                // 判断表单验证结果
                this.$refs.inoSiteForm.validate((valid) => {
                    if (valid) {
                        console.log("表单提交:", this.inoSiteForm);
                        // 发送添加请求
                        this.axios({
                            method: 'post',
                            url: "/api/inosite",
                            data: this.inoSiteForm
                        }).then(res => {
                            console.log("添加:", res);
                            if (200 == res.data.code) {
                                this.$message.success("添加数据成功！");
                                this.dialogVisible = false; // 关闭对话框
                                // 把数据显示在列表的首行
                                this.getList(this.inoSitePage.current);
                            } else {
                                this.$message.error("添加数据失败！");
                            }
                        }).catch(() => {
                            this.$message.error("添加数据异常！");
                        })
                    } else {
                        //console.log('error submit!!');
                        return false;
                    }
                });
            },
            // 此函数在修改对话框中被使用。调用时刻：点击“确 定”按钮时
            // 更新被修改的数据
            onUpdate() {
                console.log("更新:", this.inoSiteForm);
                // 验证表单数据
                this.$refs.inoSiteForm.validate((valid) => {
                    if (valid) {
                        // 发送更新请求
                        this.axios({
                            method: 'put',
                            url: "/api/inosite",
                            data: this.inoSiteForm
                        }).then(res => {
                            console.log("更新", res);
                            if (200 == res.data.code) {
                                this.$message.success("更新数据成功！");
                                this.editDialogVisible = false; // 关闭修改对话框
                                this.getList(1);
                            } else {
                                this.$message.error("更新数据失败！");
                            }
                        }).catch(() => {
                            this.$message.error("更新数据异常！");
                        })
                    } else {
                        //console.log('error submit!!');
                        return false;
                    }
                });
            },
            getVaccineList() { // 获取疫苗列表
                this.axios({
                    method: 'get',
                    url: '/api/vaccine/list'
                }).then(res => {
                    console.log("疫苗列表: ", res);
                    this.vaccineList = res.data.data; // 更新列表数据
                });
            }
        }
    }
</script>

<style>
</style>

完整源码

如果运行代码中遇到问题，或者需要完整源码和报告煨我：Code2Life2

觉得有用，记得一键三连哦！

anmu4200

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
SSM框架+VUE+Mysql实现的疫苗预约接种管理系统（功能包含分角色，登录/注册、疫苗管理、接种点管理、用户管理、疫苗类型管理、我的预约、预约接种管理、关于等）

SSM框架+VUE+Mysql实现的疫苗预约接种管理系统（功能包含分角色，登录/注册、疫苗管理、接种点管理、用户管理、疫苗类型管理、我的预约、预约接种管理、关于等）
复制链接

扫一扫