便民医疗服务小程序后端springboot 服务 vue3 开发的后端系统设计与实现

博主介绍：专注于Java（springboot ssm springcloud等开发框架） vue .net php phython node.js uniapp小程序等诸多技术领域和毕业项目实战、企业信息化系统建设，从业十五余年开发设计教学工作
☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟
我的博客空间发布了1000+毕设题目方便大家学习使用
感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人
更多项目地址介绍翰文编程-CSDN博客

系统实现预览

4 系统设计

4.1 功能模块设计

便民医疗服务小程序根据权限类型进行分类，主要可分为用户微信、管理员和医生服务端三大模块。用户微信端模块主要实现了医疗知识、预约挂号、我的等操作，加强了用户的操作体验。管理员服务端模块主要根据管理员对整个系统的管理进行设计，提高了管理的效率和规范[11]。系统总体模块设计如下图所示：

图4-1 系统总体模块设计

4.2 系统数据库设计

4.2.1 数据库系统

本系统采用MySQL来进行数据库的管理。基于WEB的MySQL体积小、速度快、成本低，能够及时处理上千万条记录，初步满足和支持大型的数据库高并发的读写和高效率读写等要求。

4.2.2 数据库概念设计

概念模型用于对信息世界建模，并与指定的数据库管理系统分离。它有助于将真实世界的事物抽象为适合于数据库管理系统的数据库模型。人们往往把现实世界抽象成信息世界，再把信息世界变成机器世界。也就是说，将现实世界的目标抽象成独立于专用计算机软件和专用数据库管理系统的信息结构的数据模型，然后将物理模型转化为适合电子计算机的数据库管理系统。事实上，数据模型是从现实世界到机器世界的中间层。

信息世界的基本要素包括实体和关联。实体（entity) 客观存在并可相互区别的事物称为实体。实体可以是实际的人、事或物，还可以是抽象化的概念或联络。以下是对部分主要的关键实体E-R如下：

用户信息E-R图如下图4-2所示。

图4-2用户信息E-R图

医生信息E-R图如下图4-3所示。

图4-3医生信息E-R图

在线交流E-R图如下图4-4所示。

图4-4在线交流E-R图

报告信息E-R图如下图4-5所示。

图4-5报告信息E-R图

便民医疗服务小程序总体E-R图如下图4-5所示。

图4-5便民医疗服务小程序总体E-R图

4.2.3 数据表设计

本管理系统的数据表的设计根据管理过程中的具体流程所需，方便了管理员对数据进行新增、删除、修改和搜索的操作。

4.2.4 数据表的建立

系统使用MySQL工具对数据库进行操作，它有着简便的数据库管理操作以及强大的数据处理能力。以下是数据表的建立情况：

表4-1：菜单

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
menujson	longtext	4294967295	菜单

表4-2：科室

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
keshi	varchar	200	科室

表4-3：预约挂号

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
yishengzhanghao	varchar	200	医生账号
yishengxingming	varchar	200	医生姓名
keshi	varchar	200	科室
tupian	longtext	4294967295	图片
jiuzhenshijian	varchar	200	就诊时间
guahaofei	double		挂号费
shuliang	int		数量
yuyuexuzhi	varchar	200	预约须知

表4-4：健康日记

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
biaoti	varchar	200	标题
neirong	longtext	4294967295	内容
xiangqing	longtext	4294967295	详情
jilushijian	datetime		记录时间
yonghuzhanghao	varchar	200	用户账号
yonghuxingming	varchar	200	用户姓名
userid	bigint		用户id

表4-5：医疗知识评论表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
refid	bigint		关联表id
userid	bigint		用户id
avatarurl	longtext	4294967295	头像
nickname	varchar	200	用户名
content	longtext	4294967295	评论内容
reply	longtext	4294967295	回复内容

表4-6：配置文件

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
name	varchar	100	配置参数名称
value	varchar	100	配置参数值

表4-7：token表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
userid	bigint		用户id
username	varchar	100	用户名
tablename	varchar	100	表名
role	varchar	100	角色
token	varchar	200	密码
addtime	timestamp		新增时间		CURRENT_TIMESTAMP
expiratedtime	timestamp		过期时间		CURRENT_TIMESTAMP

表4-8：报告信息

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
jianchaxiangmu	varchar	200	检查项目
jianchabaogao	longtext	4294967295	检查报告
baogaojieguo	longtext	4294967295	报告结果
baogaojianjie	varchar	200	报告简介
yonghuzhanghao	varchar	200	用户账号
yonghuxingming	varchar	200	用户姓名
yishengzhanghao	varchar	200	医生账号
yishengxingming	varchar	200	医生姓名
userid	bigint		用户id

表4-9：知识类型

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
zhishileixing	varchar	200	知识类型

表4-10：在线交流

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
yishengzhanghao	varchar	200	医生账号
yishengxingming	varchar	200	医生姓名
zixunneirong	longtext	4294967295	咨询内容
tupian	longtext	4294967295	图片
zixunshijian	datetime		咨询时间
yonghuzhanghao	varchar	200	用户账号
yonghuxingming	varchar	200	用户姓名
shhf	longtext	4294967295	回复内容
userid	bigint		用户id

表4-11：健康体检

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
tijianxiangmu	varchar	200	体检项目
tijianfenlei	varchar	200	体检分类
tijiantupian	longtext	4294967295	体检图片
tijiandidian	varchar	200	体检地点
tijianfeiyong	double		体检费用
tijianliucheng	longtext	4294967295	体检流程
yishengzhanghao	varchar	200	医生账号
yishengxingming	varchar	200	医生姓名

表4-12：用户

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
yonghuzhanghao	varchar	200	用户账号
yonghumima	varchar	200	用户密码
yonghuxingming	varchar	200	用户姓名
touxiang	longtext	4294967295	头像
xingbie	varchar	200	性别
shoujihaoma	varchar	200	手机号码

表4-13：医生

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
yishengzhanghao	varchar	200	医生账号
yishengmima	varchar	200	医生密码
yishengxingming	varchar	200	医生姓名
zhaopian	longtext	4294967295	照片
xingbie	varchar	200	性别
lianxidianhua	varchar	200	联系电话
shanzhanglingyu	varchar	200	擅长领域
keshi	varchar	200	科室

表4-14：hpv疫苗预约

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
yimiaobianhao	varchar	200	疫苗编号
yimiaomingcheng	varchar	200	疫苗名称
yimiaoleixing	varchar	200	疫苗类型
picihao	varchar	200	批次号
shengchanriqi	varchar	200	生产日期
baozhiqi	varchar	200	保质期
shengchanchangshang	varchar	200	生产厂商
yuyueshijian	datetime		预约时间
yonghuzhanghao	varchar	200	用户账号
yonghuxingming	varchar	200	用户姓名
xingbie	varchar	200	性别

表4-15：医疗知识

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
zhishibiaoti	varchar	200	知识标题
zhishileixing	varchar	200	知识类型
fengmian	longtext	4294967295	封面
shipin	longtext	4294967295	视频
zhishijianjie	longtext	4294967295	知识简介
zhishineirong	longtext	4294967295	知识内容
storeupnum	int		收藏数量

表4-16：hpv疫苗

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
yimiaobianhao	varchar	200	疫苗编号
yimiaomingcheng	varchar	200	疫苗名称
yimiaoleixing	varchar	200	疫苗类型
picihao	varchar	200	批次号
tupian	longtext	4294967295	图片
shuliang	int		数量
shengchanriqi	date		生产日期
baozhiqi	varchar	200	保质期
shengchanchangshang	varchar	200	生产厂商
storeupnum	int		收藏数量
jiezhongliucheng	longtext	4294967295	接种流程
fuzuoyong	longtext	4294967295	副作用

表4-17：新冠疫苗预约

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
yimiaobianhao	varchar	200	疫苗编号
yimiaomingcheng	varchar	200	疫苗名称
picihao	varchar	200	批次号
shengchanriqi	varchar	200	生产日期
baozhiqi	varchar	200	保质期
shengchanchangshang	varchar	200	生产厂商
yuyueshijian	datetime		预约时间
yonghuzhanghao	varchar	200	用户账号
yonghuxingming	varchar	200	用户姓名
xingbie	varchar	200	性别

表4-18：挂号

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
yuyuebianhao	varchar	200	预约编号
yishengzhanghao	varchar	200	医生账号
yishengxingming	varchar	200	医生姓名
keshi	varchar	200	科室
guahaofei	double		挂号费
shuliang	varchar	200	挂号数量
yuyueshijian	datetime		预约时间
yonghuzhanghao	varchar	200	用户账号
yonghuxingming	varchar	200	用户姓名
shoujihaoma	varchar	200	手机号码
ispay	varchar	200	是否支付

表4-19：体检预约

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
tijianxiangmu	varchar	200	体检项目
tijianfenlei	varchar	200	体检分类
tijiandidian	varchar	200	体检地点
tijianfeiyong	double		体检费用
yuyueshijian	datetime		预约时间
yonghuzhanghao	varchar	200	用户账号
yonghuxingming	varchar	200	用户姓名
yishengzhanghao	varchar	200	医生账号
yishengxingming	varchar	200	医生姓名
ispay	varchar	200	是否支付

表4-20：新冠疫苗

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
yimiaobianhao	varchar	200	疫苗编号
yimiaomingcheng	varchar	200	疫苗名称
picihao	varchar	200	批次号
tupian	longtext	4294967295	图片
shuliang	int		数量
shengchanriqi	date		生产日期
baozhiqi	varchar	200	保质期
shengchanchangshang	varchar	200	生产厂商
storeupnum	int		收藏数量
jiezhongliucheng	longtext	4294967295	接种流程
fuzuoyong	longtext	4294967295	副作用

表4-21：体检分类

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
tijianfenlei	varchar	200	体检分类

表4-22：管理员

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
username	varchar	200	用户名
password	varchar	200	密码
role	varchar	200	角色

表4-23：体检报告

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
tijianxiangmu	varchar	200	体检项目
tijianfenlei	varchar	200	体检分类
tijianbaogao	longtext	4294967295	体检报告
baogaoshijian	datetime		报告时间
tijianshuoming	varchar	200	体检说明
yonghuzhanghao	varchar	200	用户账号
yonghuxingming	varchar	200	用户姓名
tijianjieguo	longtext	4294967295	体检结果
yishengzhanghao	varchar	200	医生账号
yishengxingming	varchar	200	医生姓名

表4-24：我的收藏

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
refid	bigint		refid
tablename	varchar	200	表名
name	varchar	200	名称
picture	longtext	4294967295	图片
type	varchar	200	类型(1:收藏,21:赞,22:踩,31:竞拍参与,41:关注)
inteltype	varchar	200	推荐类型
remark	varchar	200	备注
userid	bigint		用户id

5 系统实现

5.1用户微信端模块实现

当游客打开微信小程序的网址后，首先看到的就是微信小程序首页界面。在这里，游客能够看到便民医疗服务小程序的导航条显示首页、医疗知识、预约挂号、我的等，如图5-1所示。

图5-1微信小程序首页界面图

当用户进入微信小程序进行相关操作前必须先注册登录，在注册页面填写用户账号、密码、确认密码、头像、手机号码等信息，然后点击注册，如图5-2所示。

图5-2用户注册界面图

用户登录，用户在登录页面通过填写账号、密码，完成登录，如图5-3所示。

图5-3用户登录界面图

用户点击预约挂号，在预约挂号页面的搜索栏输入医生姓名，进行搜索，然后可以查看医生账号、医生姓名、科室、图片、就诊时间、挂号费、数量等信息，如有需要点击挂号等详情操作，如图5-4所示。

图5-4预约挂号界面图

主要代码

// pages/edit/edit.js
const {
detail,
option,
update,
add,
list,
    follow,
    faceMatch,
    session,
    rubbish,
    baiduIdentify
} = require("../../api/index.js")

const des = require('../../utils/des.js')
const utils = require("../../utils/index.js")

Page({

/**
* 页面的初始数据
*/
data: {
    baseURL:'',
    sessionReadArr:[],

detailList: null,
id: "",
cross:"",
ruleForm:{},
userid:getApp().globalData.userInfo.id,
userInfo:getApp().globalData.userInfo,
ro:{
},

    yuyuebianhao:"",
    yishengzhanghao:"",
    yishengxingming:"",
    keshi:"",
    guahaofei:"",
shuliang: '1',
    yuyueshijian:"请选择时间",
showyuyueshijian:false,
    yonghuzhanghao:"",
    yonghuxingming:"",
    shoujihaoma:"",
},


/**
* 生命周期函数--监听页面加载
*/
async onLoad(options) {
    let userid
    if(!this.data.userid){
        let nowTable = wx.getStorageSync("nowTable");
        const res = await session(nowTable)
        getApp().globalData.userInfo=res?.data
        userid = res?.data.id
    }
    let baseURL =wx.getStorageSync('baseURL') + '/'
const id = getApp().globalData.detailId
    this.setData({
        userid,
        refid:id,
        baseURL
    })
//人脸识别


let  ro=this.data.ro
if(options?.cross){
var obj = wx.getStorageSync('crossObj');
for (var o in obj){
if(o=='yuyuebianhao'){
this.setData({
  'ruleForm.yuyuebianhao' : obj[o],
})
ro.yuyuebianhao = true;
continue;
}
if(o=='yishengzhanghao'){
this.setData({
  'ruleForm.yishengzhanghao' : obj[o],
})
ro.yishengzhanghao = true;
continue;
}
if(o=='yishengxingming'){
this.setData({
  'ruleForm.yishengxingming' : obj[o],
})
ro.yishengxingming = true;
continue;
}
if(o=='keshi'){
this.setData({
  'ruleForm.keshi' : obj[o],
})
ro.keshi = true;
continue;
}
if(o=='guahaofei'){
this.setData({
  'ruleForm.guahaofei' : obj[o],
})
ro.guahaofei = true;
continue;
}
if(o=='shuliang'){
this.setData({
  'ruleForm.shuliang' : obj[o],
})
ro.shuliang = true;
continue;
}
if(o=='yuyueshijian'){
this.setData({
  'ruleForm.yuyueshijian' : obj[o],
})
ro.yuyueshijian = true;
continue;
}
if(o=='yonghuzhanghao'){
this.setData({
  'ruleForm.yonghuzhanghao' : obj[o],
})
ro.yonghuzhanghao = true;
continue;
}
if(o=='yonghuxingming'){
this.setData({
  'ruleForm.yonghuxingming' : obj[o],
})
ro.yonghuxingming = true;
continue;
}
if(o=='shoujihaoma'){
this.setData({
  'ruleForm.shoujihaoma' : obj[o],
})
ro.shoujihaoma = true;
continue;
}
}
  let  statusColumnName=wx.getStorageSync('statusColumnName');
    statusColumnName=statusColumnName.replace('[',"").replace(']',"");
    this.setData({
        ro,
        cross:options?.cross,
        statusColumnName
    })
}

if(id){
// 如果上一级页面传递了id，获取改id数据信息
const   data=getApp().globalData.detailList


}else {
    this.setData({
yuyuebianhao: this.getUUID(),
    })
}



// ss读取
let sessionReadArr=[]
    let yonghuzhanghao= getApp().globalData.userInfo.yonghuzhanghao
    ro.yonghuzhanghao=true
    this.setData({
            yonghuzhanghao,
    })
    sessionReadArr.push('yonghuzhanghao')
    let yonghuxingming= getApp().globalData.userInfo.yonghuxingming
    ro.yonghuxingming=true
    this.setData({
            yonghuxingming,
    })
    sessionReadArr.push('yonghuxingming')
    let shoujihaoma= getApp().globalData.userInfo.shoujihaoma
    ro.shoujihaoma=true
    this.setData({
            shoujihaoma,
    })
    sessionReadArr.push('shoujihaoma')
ro.shuliang=true

this.setData({
cross:options?.cross,
ro,
id,
 sessionReadArr

})




},

getUUID () {
return new Date().getTime();
},
onUnload: function () {
console.log('页面被卸载，执行销毁操作');
},
onShow() {
},





























































onyuyueshijianTap(){
this.setData({
    showyuyueshijian: true,
})
},
yuyueshijianTap(e) {
this.setData({
    yuyueshijian: e.detail.data
})

},






































async submit() {
    let that = this
    var query = wx.createSelectorQuery();







if(this.data.yuyueshijian=="请选择预约时间"){
this.setData({
        yuyueshijian:""
})
}





    const baseURL = wx.getStorageSync('baseURL') + "/"
    const regex = new RegExp(baseURL, "g");
const obj={
    yuyuebianhao: this.data. yuyuebianhao,
    yishengzhanghao: this.data. yishengzhanghao,
    yishengxingming: this.data. yishengxingming,
    keshi: this.data. keshi,
    guahaofei: this.data. guahaofei,
    shuliang: this.data. shuliang,
    yuyueshijian: this.data. yuyueshijian,
    yonghuzhanghao: this.data. yonghuzhanghao,
    yonghuxingming: this.data. yonghuxingming,
    shoujihaoma: this.data. shoujihaoma,
    ispay: this.data. ispay,
}
const detailId= getApp().globalData.detailId
const tableName= `guahao`

//跨表计算判断
    var obj2;
    var  ruleForm=obj
    obj2 = ruleForm
    this.data.refid==""? ruleForm['refid']= getApp().globalData.detailId:""
    ruleForm['userid']=getApp().globalData.userInfo.id
    var userInfo=getApp().globalData.userInfo
obj2 = wx.getStorageSync('crossObj');
var table = wx.getStorageSync('crossTable');
const targetshuliang_6 = ruleForm.shuliang ? ruleForm.shuliang : this.data.shuliang;
if((parseFloat(obj2[targetshuliang_6]) - parseFloat(ruleForm[targetshuliang_6])) < 0){
wx.showToast({
    icon: "none",
    title: '挂号数量不足',
});
return;
}


const sessionReadArr=this.data.sessionReadArr
const phonePattern = /^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/;
const mobilePattern = /^(?:\+?86)?1[3-9]\d{9}$/;
const emailPattern = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
const idPattern = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}[\dxX]$/;
const urlPattern = /^(http|https):\/\/[\w\-]+(\.[\w\-]+)+[/#?]?.*$/;







































































































    //更新跨表属性
    var crossuserid;
    var crossrefid;
    var crossoptnum;

    if(this.data.cross) {
        wx.setStorageSync('crossCleanType', true);
        var statusColumnName = wx.getStorageSync('statusColumnName');
        var statusColumnValue = wx.getStorageSync('statusColumnValue');
        if (statusColumnName != '') {
                obj2 = wx.getStorageSync('crossObj');
            if (!statusColumnName.startsWith("[")) {
                for (var o in obj2) {
                    if (statusColumnName.includes(o)){
                        obj2[o] = statusColumnValue;
                    }

                }
                var table = wx.getStorageSync('crossTable');
obj2.shuliang
obj2.shuliang - this.data.shuliang
                 await update(table, obj2)
            } else {

                crossuserid =getApp().globalData.userInfo.id
                crossrefid =  this.data.id
                crossoptnum = wx.getStorageSync('statusColumnName');
                crossoptnum = crossoptnum.replace(/\[/, "").replace(/\]/, "");
                            }
        }
    }
    this.data.cross ? (crossrefid = this.data.id, crossuserid =this.data.userid) : ""

        if(crossrefid && crossuserid) {
            ruleForm['crossuserid'] = this.data.userid
            ruleForm['crossrefid'] =this.data.id

            this.setData({
                ruleForm
            })
            let params = {
                page: 1,
                limit: 10,
                crossuserid: crossuserid,
                crossrefid: crossrefid,
            }
                        const tips = wx.getStorageSync('tips')
            let corssRes = await list(`guahao`, params)
            crossoptnum = wx.getStorageSync('statusColumnName');
            crossoptnum = crossoptnum.match(/\d+/g);
            if (corssRes.data.total >= parseInt(crossoptnum)) {
                wx.showToast({
                    icon: "none",
                    title: tips,
                })
                                wx.removeStorageSync('crossCleanType');
                return ;
            }
            else {


//跨表计算











obj2 = wx.getStorageSync('crossObj');
var table = wx.getStorageSync('crossTable');
    obj2.shuliang
    obj2.shuliang - this.data.shuliang
await update(table, obj2)
if (ruleForm.id) {
await update(`guahao`, ruleForm)
}
else {
await add(`guahao`, ruleForm)
            }
        }


        }
        else {


//跨表计算
obj2 = wx.getStorageSync('crossObj');
var table = wx.getStorageSync('crossTable');
obj2.shuliang
obj2.shuliang - this.data.shuliang
await update(table, obj2)
if (ruleForm.id) {
await update(`guahao`, ruleForm)
}
else {
await add(`guahao`, ruleForm)
            }
        }
getApp().globalData.editorContent=''
wx.showToast({
title: '提交成功',
icon: "none"
})
    const preId = getApp().globalData.detailId

if(table){
    let res = await detail(table, preId)
if(res.code==0){
    getApp().globalData.detailList = res.data
}

}



            wx.navigateBack({
                delta: 1,
                complete: () => {
                    // 触发事件通知，传递需要更新的数据
                    const pages = getCurrentPages();
                    if (pages.length >= 1) {
                        const prePage = pages[pages.length - 1];
                        prePage.onLoad(); //
                    }
                }
            })













 },

onHide() {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload() {

},


/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage() {

}
})

用户点击我的页面，在我的页面可以对我的收藏、在线交流、报告信息、挂号、健康日记、hpv疫苗预约、新冠疫苗预约、健康体检管理等信息，进行详细操作，如图5-5所示。

图5-5我的界面图

5.2管理员服务端模块实现

管理员登录，在登录页面选择需要登录的角色，在正确输入用户名和密码后，点击登录操作；如图5-6所示。

图5-6管理员登录界面

管理员进入系统主页面，主要功能包括对首页、在线交流管理、报告信息管理、预约挂号管理、健康日记管理、hpv疫苗管理、健康体检管理、用户管理、新冠疫苗管理、医疗知识管理、管理员管理等进行操作。如图5-7所示：

图5-7管理员主界面

用户信息功能在视图层（view层)进行交互，比如点击“新增”按钮或填写用户信息表单。这些用户信息动作被视图层捕获并作为请求发送给相应的控制器层(control1er层)。控制器接收到这些请求后，调用服务层(service层)以执行相关的业务逻辑，例如验证输入数据的有效性和与数据库的交互。服务层处理完这些逻辑后，进一步与数据访问对象层（DAO层)交互，后者负责具体的数据操作如搜索、新增或删除用户信息，并将操作结果返回给控制器。最终，控制器根据这些结果更新视图层，以便用户信息功能可以看到最新的信息或相应的操作反馈。在用户信息的输入栏中输入用户账号进行搜索，可以查看到用户详细信息，并根据需要进行修改或者删除等操作。如图5-8所示。

图5-8用户界面图

医生信息功能在视图层（view层)进行交互，比如点击“新增”按钮或填写医生信息表单。这些医生信息动作被视图层捕获并作为请求发送给相应的控制器层(control1er层)。控制器接收到这些请求后，调用服务层(service层)以执行相关的业务逻辑，例如验证输入数据的有效性和与数据库的交互。服务层处理完这些逻辑后，进一步与数据访问对象层（DAO层)交互，后者负责具体的数据操作如搜索、新增或删除医生信息，并将操作结果返回给控制器。最终，控制器根据这些结果更新视图层，以便医生信息功能可以看到最新的信息或相应的操作反馈。在医生信息的输入栏中输入医生账号进行搜索，可以查看到医生详细信息，并根据需要进行修改或者删除等操作。如图5-9所示。

图5-9医生界面图

管理员点击在线交流，在在线交流页面的输入医生账号、医生姓名、图片、咨询时间、用户账号、用户姓名、回复等信息，进行搜索或者删除在线交流等操作，如图5-10所示。

图5-10在线交流界面图

主要代码：


<template>
	<div>
		<div class="app-contain">
			<div class="list_search_view">
				<el-form :model="searchQuery" class="search_form" >
					<div class="search_view">
						<div class="search_label">
							医生账号：
						</div>
						<div class="search_box">
							<el-select
								class="search_sel"
								clearable
								v-model="searchQuery.yishengzhanghao" 
								placeholder="医生账号"
								>
								<el-option v-for="item in yishengzhanghaoLists" :label="item" :value="item"></el-option>
							</el-select>
						</div>
					</div>
					<div class="search_btn_view">
						<el-button class="search_btn" type="primary" @click="searchClick()" size="small">搜索</el-button>
					</div>
				</el-form>
				<br>
				<div class="btn_view">
					<el-button type="success" @click="addClick" v-if="btnAuth('zaixianjiaoliu','新增')">新增</el-button>
					<el-button  v-if=" btnAuth('zaixianjiaoliu','查看')" type="info"  :disabled="selRows.length==1?false:true" @click="infoClick(null)">详情</el-button>
					<el-button type="primary" :disabled="selRows.length==1?false:true" @click="editClick" v-if=" btnAuth('zaixianjiaoliu','修改')">修改</el-button>
					<el-button type="danger" :disabled="selRows.length?false:true" @click="delClick(null)"  v-if="btnAuth('zaixianjiaoliu','删除')">删除</el-button>
				</div>
			</div>
			<br>
			<el-table
				v-loading="listLoading"
				border 
				:stripe='true'
				@selection-change="handleSelectionChange" 
				ref="table"
				v-if="btnAuth('zaixianjiaoliu','查看')"
				:data="list"
				@row-click="listChange">
				<el-table-column :resizable='true' align="left" header-align="center" type="selection" width="55" />
				<el-table-column label="序号" width="70" :resizable='true' :sortable='true' align="left" header-align="center">
					<template #default="scope">{{ scope.$index + 1}}</template>
				</el-table-column>
				<el-table-column
					 :resizable='true' 
					 :sortable='true' 
					 align="left" 
					 header-align="center"
					label="医生账号">
					<template #default="scope">
						{{scope.row.yishengzhanghao}}
					</template>
				</el-table-column>
				<el-table-column
					 :resizable='true' 
					 :sortable='true' 
					 align="left" 
					 header-align="center"
					label="医生姓名">
					<template #default="scope">
						{{scope.row.yishengxingming}}
					</template>
				</el-table-column>
				<el-table-column label="图片" width="120" :resizable='true' :sortable='true' align="left" header-align="center">
					<template #default="scope">
						<div v-if="scope.row.tupian">
							<el-image v-if="scope.row.tupian.substring(0,4)=='http'" preview-teleported
								:preview-src-list="[scope.row.tupian.split(',')[0]]"
								:src="scope.row.tupian.split(',')[0]" style="width:100px;height:100px"></el-image>
							<el-image v-else preview-teleported
								:preview-src-list="[$config.url+scope.row.tupian.split(',')[0]]"
								:src="$config.url+scope.row.tupian.split(',')[0]" style="width:100px;height:100px">
							</el-image>
						</div>
						<div v-else>无图片</div>
					</template>
				</el-table-column>
				<el-table-column
					 :resizable='true' 
					 :sortable='true' 
					 align="left" 
					 header-align="center"
					label="咨询时间">
					<template #default="scope">
						{{scope.row.zixunshijian}}
					</template>
				</el-table-column>
				<el-table-column
					 :resizable='true' 
					 :sortable='true' 
					 align="left" 
					 header-align="center"
					label="用户账号">
					<template #default="scope">
						{{scope.row.yonghuzhanghao}}
					</template>
				</el-table-column>
				<el-table-column
					 :resizable='true' 
					 :sortable='true' 
					 align="left" 
					 header-align="center"
					label="用户姓名">
					<template #default="scope">
						{{scope.row.yonghuxingming}}
					</template>
				</el-table-column>
				<el-table-column label="回复" :resizable='true' :sortable='true' align="left" header-align="center">
					<template #default="scope">
						{{scope.row.shhf}}
					</template>
				</el-table-column>
				<el-table-column label="审核" v-if="btnAuth('zaixianjiaoliu','审核')" :resizable='true' :sortable='true' align="left" header-align="center">
					<template #default="scope">
						<el-button type="text" @click="approvalClick(scope.row)">回复</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="300" :resizable='true' :sortable='true' align="left" header-align="center">
					<template #default="scope">
						<el-button type="info" v-if=" btnAuth('zaixianjiaoliu','查看')" @click="infoClick(scope.row.id)">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination 
				background
				:layout="layouts.join(',')"
				:total="total" 
				:page-size="listQuery.limit"
				prev-text="<"
				next-text=">"
				:hide-on-single-page="true"
				:style='{"padding":"0","margin":"20px 0 0","whiteSpace":"nowrap","color":"#333","textAlign":"center","width":"100%","fontWeight":"500"}'
				@size-change="sizeChange"
				@current-change="currentChange" 
				@prev-click="prevClick"
				@next-click="nextClick"  />
		</div>
		<formModel ref="formRef" @formModelChange="formModelChange"></formModel>
		<Approval ref="approvalRef" :tableName="tableName" @shChange="searchClick()"></Approval>
	</div>
</template>
<script setup>
	import axios from 'axios'
	import {
		reactive,
		ref,
		getCurrentInstance,
		nextTick,
		onMounted,
		watch,
	} from 'vue'
	import {
		useRoute,
		useRouter
	} from 'vue-router'
	import {
		ElMessageBox
	} from 'element-plus'
	const context = getCurrentInstance()?.appContext.config.globalProperties;
	import formModel from './formModel.vue'
	
	//基础信息
	const tableName = 'zaixianjiaoliu'
	const formName = '在线交流'
	const route = useRoute()
	//基础信息
	onMounted(()=>{
	})
	//列表数据
	const list = ref(null)
	const table = ref(null)
	const listQuery = ref({
		page: 1,
		limit: 20,
		sort: 'id',
		order: 'desc'
	})
	const searchQuery = ref({})
	const selRows = ref([])
	const listLoading = ref(false)
	const listChange = (row) =>{
		nextTick(()=>{
			table.value.clearSelection()
			table.value.toggleRowSelection(row)
		})
	}
	//列表
	const getList = () => {
		listLoading.value = true
		let params = JSON.parse(JSON.stringify(listQuery.value))
		params['sort'] = 'id'
		params['order'] = 'desc'
		if(searchQuery.value.yishengzhanghao&&searchQuery.value.yishengzhanghao!=''){
			params['yishengzhanghao'] = searchQuery.value.yishengzhanghao
		}
		context?.$http({
			url: `${tableName}/page`,
			method: 'get',
			params: params
		}).then(res => {
			listLoading.value = false
			list.value = res.data.data.list
			total.value = Number(res.data.data.total)
		})
	}
	//删
	const delClick = (id) => {
		let ids = ref([])
		if (id) {
			ids.value = [id]
		} else {
			if (selRows.value.length) {
				for (let x in selRows.value) {
					ids.value.push(selRows.value[x].id)
				}
			} else {
				return false
			}
		}
		ElMessageBox.confirm(`是否删除选中${formName}`, '提示', {
			confirmButtonText: '是',
			cancelButtonText: '否',
			type: 'warning',
		}).then(() => {
			context?.$http({
				url: `${tableName}/delete`,
				method: 'post',
				data: ids.value
			}).then(res => {
				context?.$toolUtil.message('删除成功', 'success',()=>{
					getList()
				})
			})
		})
	}
	//多选
	const handleSelectionChange = (e) => {
		selRows.value = e
	}
	//列表数据
	//分页
	const total = ref(0)
	const layouts = ref(["total","prev","pager","next","jumper"])
	const sizeChange = (size) => {
		listQuery.value.limit = size
		getList()
	}
	const currentChange = (page) => {
		listQuery.value.page = page
		getList()
	}
	const prevClick = () => {
		listQuery.value.page = listQuery.value.page - 1
		getList()
	}
	const nextClick = () => {
		listQuery.value.page = listQuery.value.page + 1
		getList()
	}
	//分页
	//权限验证
	const btnAuth = (e,a)=>{
		return context?.$toolUtil.isAuth(e,a)
	}
	//搜索
	const yishengzhanghaoLists = ref([])
	const getyishengzhanghaoLists = () => {
		context?.$http({
			url: 'option/yisheng/yishengzhanghao',
			method:'get'
		}).then(res=>{
			yishengzhanghaoLists.value = res.data.data
		})
	}
	getyishengzhanghaoLists()
	const searchClick = () => {
		listQuery.value.page = 1
		getList()
	}
	//表单
	const formRef = ref(null)
	const formModelChange=()=>{
		searchClick()
	}
	const addClick = ()=>{
		formRef.value.init()
	}
	const editClick = ()=>{
		if(selRows.value.length){
			formRef.value.init(selRows.value[0].id,'edit')
		}
	}
	
	const infoClick = (id=null)=>{
		if(id){
			formRef.value.init(id,'info')
		}
		else if(selRows.value.length){
			formRef.value.init(selRows.value[0].id,'info')
		}
	}
	// 表单
	// 预览文件
	const preClick = (file) =>{
		if(!file){
			context?.$toolUtil.message('文件不存在','error')
		}
		window.open(context?.$config.url + file)
		// const a = document.createElement('a');
		// a.style.display = 'none';
		// a.setAttribute('target', '_blank');
		// file && a.setAttribute('download', file);
		// a.href = context?.$config.url + file;
		// document.body.appendChild(a);
		// a.click();
		// document.body.removeChild(a);
	}
	// 下载文件
	const download = (file) => {
		if(!file){
			context?.$toolUtil.message('文件不存在','error')
		}
		let arr = file.replace(new RegExp('file/', "g"), "")
		axios.get((location.href.split(context?.$config.name).length>1 ? location.href.split(context?.$config.name)[0] :'') + context?.$config.name + '/file/download?fileName=' + arr, {
			headers: {
				token: context?.$toolUtil.storageGet('Token')
			},
			responseType: "blob"
		}).then(({
			data
		}) => {
			const binaryData = [];
			binaryData.push(data);
			const objectUrl = window.URL.createObjectURL(new Blob(binaryData, {
				type: 'application/pdf;chartset=UTF-8'
			}))
			const a = document.createElement('a')
			a.href = objectUrl
			a.download = arr
			// a.click()
			// 下面这个写法兼容火狐
			a.dispatchEvent(new MouseEvent('click', {
				bubbles: true,
				cancelable: true,
				view: window
			}))
			window.URL.revokeObjectURL(data)
		})
	}

	//审核
	import Approval from '@/components/common/approval.vue'
	const approvalRef = ref(null)
	const approvalClick = (row) => {
		let params = {
			id:row.id,
			yishengzhanghao: row.yishengzhanghao,
			yishengxingming: row.yishengxingming,
			zixunneirong: row.zixunneirong,
			tupian: row.tupian,
			zixunshijian: row.zixunshijian,
			yonghuzhanghao: row.yonghuzhanghao,
			yonghuxingming: row.yonghuxingming,
			shhf: row.shhf,
			userid: row.userid,
		}
		nextTick(() => {
			approvalRef.value.approvalClick(params ,2)
		})
	}

	//初始化
	const init = () => {
		getList()
	}
	init()
</script>
<style lang="scss" scoped>
	
	// 操作盒子
	.list_search_view {
		margin: 0 0 20px;
		// 搜索盒子
		.search_form {
			display: flex;
			align-items: center;
			// 子盒子
			.search_view {
				margin: 0 14px 0 0;
				display: flex;
				align-items: center;
				// 搜索label
				.search_label {
					margin: 0 10px 0 0;
					color: #787878;
					font-weight: 500;
					display: inline-block;
					font-size: 14px;
					line-height: 40px;
					height: 40px;
				}
				// 搜索item
				.search_box {
					display: flex;
					width: calc(100% - 100px);
					// 下拉框
					:deep(.search_sel) {
						border: 0px solid #ddd;
						border-radius: 20px;
						padding: 0 10px;
						background: #fff;
						width: 100%;
						line-height: 36px;
						box-sizing: border-box;
						//去掉默认样式
						.select-trigger{
							height: 100%;
							.el-input{
								height: 100%;
								.el-input__wrapper{
									border: none;
									box-shadow: none;
									background: none;
									border-radius: 0;
									height: 100%;
									padding: 0;
								}
								.is-focus {
									box-shadow: none !important;
								}
							}
						}
					}
				}
			}
			// 搜索按钮盒子
			.search_btn_view {
				width: 20%;
				display: flex;
				padding: 0 20px;
				// 搜索按钮
				.search_btn {
					border: 0;
					cursor: pointer;
					border-radius: 4px;
					padding: 0 24px;
					box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);
					outline: 4px solid #EAF5FF;
					color: #2C2C2C;
					background: #96C6EE;
					width: auto;
					font-size: 14px;
					height: 40px;
				}
				// 搜索按钮-悬浮
				.search_btn:hover {
					background: rgba(150, 198, 238, 0.5);
				}
			}
		}
		//头部按钮盒子
		.btn_view {
			margin: 20px 0;
			display: flex;
			// 其他
			:deep(.el-button--default){
				border: none;
				border-radius: 4px;
				padding: 0 24px;
				box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);
				outline: 4px solid #EAF5FF;
				color: #2C2C2C;
				background: #96C6EE;
				width: auto;
				font-size: 14px;
				height: 30px;
			}
			// 其他-悬浮
			:deep(.el-button--default:hover){
				background: rgba(150, 198, 238, 0.5);
			}
			// 新增
			:deep(.el-button--success){
				border: none;
				border-radius: 4px;
				padding: 0 24px;
				box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);
				outline: 4px solid #EAF5FF;
				color: #2C2C2C;
				background: #96C6EE;
				width: auto;
				font-size: 14px;
				height: 30px;
			}
			// 新增-悬浮
			:deep(.el-button--success:hover){
				background: rgba(150, 198, 238, 0.5);
			}
			// 修改
			:deep(.el-button--primary){
				border: none;
				border-radius: 4px;
				padding: 0 24px;
				box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);
				outline: 4px solid #EAF5FF;
				color: #2C2C2C;
				background: #96C6EE;
				width: auto;
				font-size: 14px;
				height: 30px;
			}
			// 修改-悬浮
			:deep(.el-button--primary:hover){
				background: rgba(150, 198, 238, 0.5);
			}
			// 详情
			:deep(.el-button--info){
				border: none;
				border-radius: 4px;
				padding: 0 24px;
				box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);
				outline: 4px solid #EAF5FF;
				color: #2C2C2C;
				background: #96C6EE;
				width: auto;
				font-size: 14px;
				height: 30px;
			}
			// 详情-悬浮
			:deep(.el-button--info:hover){
				background: rgba(150, 198, 238, 0.5);
			}
			// 删除
			:deep(.el-button--danger){
				border: none;
				border-radius: 4px;
				padding: 0 24px;
				box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);
				outline: 4px solid #EAF5FF;
				color: #2C2C2C;
				background: #96C6EE;
				width: auto;
				font-size: 14px;
				height: 30px;
			}
			// 删除-悬浮
			:deep(.el-button--danger:hover){
				background: rgba(150, 198, 238, 0.5);
			}
			// 统计
			:deep(.el-button--warning){
				border: none;
				border-radius: 4px;
				padding: 0 24px;
				box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);
				outline: 4px solid #EAF5FF;
				color: #2C2C2C;
				background: #96C6EE;
				width: auto;
				font-size: 14px;
				height: 30px;
			}
			// 统计-悬浮
			:deep(.el-button--warning:hover){
				background: rgba(150, 198, 238, 0.5);
			}
		}
	}
	// 表格样式
	.el-table {
		border-radius: 10px;
		padding: 0;
		width: 100%;
		border-color: #eee;
		border-width: 0;
		border-style: solid;
		:deep(.el-table__header-wrapper) {
			thead {
				color: rgba(98, 184, 255, 1);
				background: #fff;
				font-weight: 500;
				width: 100%;
				tr {
					background: #fff;
					th {
						padding: 12px 0;
						border-color: #eee;
						border-width: 0;
						border-style: solid;
						text-align: left;
						.cell {
							padding: 0 10px;
							word-wrap: normal;
							word-break: break-all;
							white-space: normal;
							font-weight: bold;
							display: inline-block;
							vertical-align: middle;
							width: 100%;
							line-height: 24px;
							position: relative;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}
		:deep(.el-table__body-wrapper) {
			tbody {
				width: 100%;
				tr {
					background: #fff;
					td {
						padding: 12px 0;
						color: #999;
						background: #fff;
						border-color: #eee;
						border-width: 0;
						border-style: solid;
						text-align: left;
						.cell {
							padding: 6px 10px;
							overflow: hidden;
							word-break: break-all;
							white-space: normal;
							line-height: 24px;
							text-overflow: ellipsis;
							// 编辑
							.el-button--primary {
								border: none;
								border-radius: 4px;
								padding: 0 24px;
								box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);
								outline: 4px solid #EAF5FF;
								margin: 8px;
								color: #2c2c2c;
								background: #96C6EE;
								width: auto;
								font-size: 14px;
								height: 30px;
							}
							// 编辑-悬浮
							.el-button--primary:hover {
								background: rgba(150, 198, 238, 0.5);
							}
							// 详情
							.el-button--info {
								border: none;
								border-radius: 4px;
								padding: 0 24px;
								box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);
								outline: 4px solid #EAF5FF;
								margin: 8px;
								color: #2c2c2c;
								background: #96C6EE;
								width: auto;
								font-size: 14px;
								height: 30px;
							}
							// 详情-悬浮
							.el-button--info:hover {
								background: rgba(150, 198, 238, 0.5);
							}
							// 删除
							.el-button--danger {
								border: none;
								border-radius: 4px;
								padding: 0 24px;
								box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);
								outline: 4px solid #EAF5FF;
								margin: 8px;
								color: #2c2c2c;
								background: #96C6EE;
								width: auto;
								font-size: 14px;
								height: 30px;
							}
							// 删除-悬浮
							.el-button--danger:hover {
								background: rgba(150, 198, 238, 0.5);
							}
							// 跨表
							.el-button--success {
								border: none;
								border-radius: 4px;
								padding: 0 24px;
								box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);
								outline: 4px solid #EAF5FF;
								margin: 8px;
								color: #2c2c2c;
								background: #96C6EE;
								width: auto;
								font-size: 14px;
								height: 30px;
							}
							// 跨表-悬浮
							.el-button--success:hover {
								background: rgba(150, 198, 238, 0.5);
							}
							// 操作
							.el-button--warning {
								border: none;
								border-radius: 4px;
								padding: 0 24px;
								box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);
								outline: 4px solid #EAF5FF;
								margin: 8px;
								color: #2c2c2c;
								background: #96C6EE;
								width: auto;
								font-size: 14px;
								height: 30px;
							}
							// 操作-悬浮
							.el-button--warning:hover {
								background: rgba(150, 198, 238, 0.5);
							}
						}
					}
				}
				tr.el-table__row--striped {
					td {
						background: rgba(239, 241, 243, 1);
					}
				}
				tr:hover {
					td {
						padding: 12px 0;
						color: #fff;
						background: rgba(98, 184, 255, 1);
						border-color: #eee;
						border-width: 0;
						border-style: solid;
						text-align: left;
					}
				}
			}
		}
	}
	// 分页器
	.el-pagination {
		// 总页码
		:deep(.el-pagination__total) {
			margin: 0 10px 0 0;
			color: #666;
			font-weight: 400;
			display: inline-block;
			vertical-align: top;
			font-size: 13px;
			line-height: 28px;
			height: 28px;
		}
		// 上一页
		:deep(.btn-prev) {
			border: none;
			border-radius: 2px;
			padding: 0;
			margin: 0 5px;
			color: #666;
			background: #f4f4f5;
			display: inline-block;
			vertical-align: top;
			font-size: 13px;
			line-height: 28px;
			min-width: 35px;
			height: 28px;
		}
		// 下一页
		:deep(.btn-next) {
			border: none;
			border-radius: 2px;
			padding: 0;
			margin: 0 5px;
			color: #666;
			background: #f4f4f5;
			display: inline-block;
			vertical-align: top;
			font-size: 13px;
			line-height: 28px;
			min-width: 35px;
			height: 28px;
		}
		// 上一页禁用
		:deep(.btn-prev:disabled) {
			border: none;
			cursor: not-allowed;
			border-radius: 2px;
			padding: 0;
			margin: 0 5px;
			color: #C0C4CC;
			background: #f4f4f5;
			display: inline-block;
			vertical-align: top;
			font-size: 13px;
			line-height: 28px;
			height: 28px;
		}
		// 下一页禁用
		:deep(.btn-next:disabled) {
			border: none;
			cursor: not-allowed;
			border-radius: 2px;
			padding: 0;
			margin: 0 5px;
			color: #C0C4CC;
			background: #f4f4f5;
			display: inline-block;
			vertical-align: top;
			font-size: 13px;
			line-height: 28px;
			height: 28px;
		}
		// 页码
		:deep(.el-pager) {
			padding: 0;
			margin: 0;
			display: inline-block;
			vertical-align: top;
			// 数字
			.number {
				cursor: pointer;
				padding: 0 4px;
				margin: 0 5px;
				color: #666;
				display: inline-block;
				vertical-align: top;
				font-size: 13px;
				line-height: 28px;
				border-radius: 2px;
				background: #f4f4f5;
				text-align: center;
				min-width: 30px;
				height: 28px;
			}
			// 数字悬浮
			.number:hover {
				cursor: pointer;
				padding: 0 4px;
				margin: 0 5px;
				color: #fff;
				display: inline-block;
				vertical-align: top;
				font-size: 13px;
				line-height: 28px;
				border-radius: 2px;
				background: linear-gradient(133deg, #9CC8EB 0%, #61B7FE 100%);
				text-align: center;
				min-width: 30px;
				height: 28px;
			}
			// 选中
			.number.is-active {
				cursor: default;
				padding: 0 4px;
				margin: 0 5px;
				color: #FFF;
				display: inline-block;
				vertical-align: top;
				font-size: 13px;
				line-height: 28px;
				border-radius: 2px;
				background: linear-gradient(133deg, #9CC8EB 0%, #61B7FE 100%);
				text-align: center;
				min-width: 30px;
				height: 28px;
			}
		}
		// sizes
		:deep(.el-pagination__sizes) {
			display: inline-block;
			vertical-align: top;
			font-size: 13px;
			line-height: 28px;
			height: 28px;
			.el-select {
				border: 1px solid #DCDFE6;
				cursor: pointer;
				padding: 0;
				color: #606266;
				display: inline-block;
				font-size: 13px;
				line-height: 28px;
				border-radius: 3px;
				outline: 0;
				background: #FFF;
				width: 100%;
				text-align: center;
				height: 28px;
			}
		}
		// 跳页
		:deep(.el-pagination__jump) {
			margin: 0 0 0 24px;
			color: #606266;
			display: inline-block;
			vertical-align: top;
			font-size: 13px;
			line-height: 28px;
			height: 28px;
			// 输入框
			.el-input {
				border: 1px solid #DCDFE6;
				cursor: pointer;
				padding: 0 3px;
				color: #606266;
				display: inline-block;
				font-size: 14px;
				line-height: 28px;
				border-radius: 3px;
				outline: 0;
				background: #FFF;
				width: 100%;
				text-align: center;
				height: 28px;
				//去掉默认样式
				.el-input__wrapper{
					border: none;
					box-shadow: none;
					background: none;
					border-radius: 0;
					height: 100%;
					padding: 0;
				}
				.is-focus {
					box-shadow: none !important;
				}
			}
		}
	}
</style>

管理员点击报告信息，在报告信息页面的对检查项目、检查报告、报告简介、用户账号、用户姓名、医生账号、医生姓名等信息，进行搜索或者删除报告信息等操作，如图5-11所示。