微信小程序 创建网站,工程项目信息查询平台,贵州网络推广介绍,成都建工雅安建设有限责任公司网站TOC
springboot432校园疫情防控系统--论文pf
课题的来源
2019年在我国武汉爆发了一场规模非常庞大、传播速度十分迅速、对人体危害及其严重的新冠肺炎疫情。引发此次急性感染性新冠肺炎疫情的冠状病毒传播性较强#xff0c;其传播主要是通过呼吸道飞沫和密切接触这两个途径…TOC
springboot432校园疫情防控系统--论文pf
课题的来源
2019年在我国武汉爆发了一场规模非常庞大、传播速度十分迅速、对人体危害及其严重的新冠肺炎疫情。引发此次急性感染性新冠肺炎疫情的冠状病毒传播性较强其传播主要是通过呼吸道飞沫和密切接触这两个途径新型冠状病毒还有着非常深的隐匿性不同体质的人群在感染此种病毒后症状各不相同且因为它有较长的潜伏期而在潜伏期内感染者不会表现出任何症状而且此时依然具有传染性所以很难通过对症状的观察来确定感染人群也加大了排查难度与成本新型冠状病毒的难对付不仅体现在传播性和隐匿性强它被称为病毒的集大成者还因为它的变异速度极快目前已发现贝塔、德尔塔、奥密克戎三种变异植株它们都对人类的健康都产生着巨大的威胁。
自1999中华人民共和国的中央人民政府召开全国第三次教育工作会议之后我国的高等教育事业从攻坚克难期转向了快速发展期与深化改革期短短几年时间高等教育领域取得了累累硕果。规模急剧扩大截至2021年我国研究生人数已达到105万人在短短十年增长了两倍之多研究生人数仅低于美国是当之无愧的研究生大国高等教育学校数量增加截至2021年我国高校已有3012所高校数量的增加意味着我国科技竞争力的提升以及创新资源储备库的扩大能更好的为我国培养有创新能力以及创新思想的复合型人才、为我国科技自立自强做出了无可替代的贡献。
综上所诉因为我国的高等教育推广我国高校在校生人数也随之水涨船高占据了我国总人数的很大一部分在校学生人数远远多于在校的管理职工这就给学校的疫情防控关系工作增加了难度疫情防控工作由应急式向常态化转变高校的新冠肺炎疫情防控日常工作变得频繁、复杂其中很多是重复性的工作给工作者和管理者带来了一定的困难进入高校学校的学生都是聪明可造之材、是祖国未来的栋梁所以我们应该重点保护他们使其免受新型冠状病毒的侵害。而此次设计的校园疫情防控系统正好可以使以上两个问题迎刃而解它不仅可以提高管理人员的工作效率减少工作人员的负担也可以使高校疫情防控管理工作的质量得到保障维持在校师生的正常生活。
1.2 课题研究意义
在日新月异的21世纪全球进入快速运转的科技时代我国也在各位科学家不懈努力下实现了科技社会化、信息技术底层化、网络运用全民化。我们处在一个“互联网”的时代信息化的建设成为了高校的发展基石以及重要组成部分。随着疫情防控的常态化各高校健康上报、到校确认、核酸上报、确诊上报、药品申请等方式进行人员管理[1]。而校园疫情防控系统就可以实现学生的健康上报、到校确认、核酸上报、确诊上报、药品申请等实现我们高校师生之间进行更高效的信息互换、让学生的行程变得透明公开让学校管理人员更好地实现对在校师生的动态监管、真正的实现快速、便捷、高效的管理以降低管理成本、减轻管理人员的负担保证高校管理技术以及运用互联网技术的能力的快速提升提高高校的综合管理和竞争能力。在保证在校师生以及其他工人的安全的同时真正达到更好的为国家经济建设和社会安全做贡献的目的。
第2章 相关技术
本校园疫情防控系统的数据库采用的是MySQL数据库并且选择了Java开发项目。在项目开发过程中实现了系统功能模块的安全性、实用性、稳定性、易维护和页面简单等特点。
2.1 Java技术介绍
Java是由sun公司开发出来的后来被oracle收购前身为oak语言。后来进入90年代初始期时互联网兴起重新将oak语言升级改造借鉴C语言最后形成了Java语言。Java在语言操作时大部分就只有一种操作方式并且支持跨平台即使是在一个操作系统平台下开发也可以运行在所有操作系统平台中其编程的本质也是由数据结构和算法构成。
2.2 Spring Boot简介
Spring Boot是由Pivotal的开发团队在2013年开发的一个免费、轻量级、开源的系统框架。Spring Boot的主要设计思想是约定大于配置因此Spring Boot在设计时几乎达到零配置。Spring Boot集成了业界的开源框架。
Spring Boot是一个非常强大的后台框架因为Spring Boot的开发基本上不需要写配置文件所以利用Spring Boot来构建网站的后台环境在Spring Boot的YML配置文件中写项目启动端口项目就可以启动了。项目的Java和静态文件由Spring Boot管理。
2.3 My Eclipse开发环境
My Eclipse广泛应用于企业。本系统选择My Eclipse是因为可以同时进行数据库的开发与J2EE的应用并且使系统的操作更加的简明并在集成部分可以充分地体现出来。My Eclipse在集成中提供了很好的环境支持对编写代码、测试开发等功能都有很好的体现。
My Eclipse支持范围广兼容性强功能强大是一个Eclipse插件集合一般适用于JAVA和J2EE系统开发支持JDBC、Hibernate、AJAX、Struts、JAVA Servlet、Spring市场上几乎所有数据库都可以与My Eclipse进行连接。
2.4 Tomcat服务器
Tomcat主要用来解析Web页面或服务中提供的Java代码其执行的过程为客户端浏览器发送请求之后服务器会接受请求并进行处理。此时客户端显示的页面就是Tomcat运行Java程序返回的结果。在JavaWeb项目中如果不使用服务器进行编译则无法运行看到项目的结果使用Tomcat可以更好的对项目进行开发并且Tomcat相对于其他服务器比较容易扩展并且有很好的安全性所以本次设计选择该服务器作为系统服务器。
2.5 MySQL数据库
MySQL的语言是非结构化的当对客观事物的符号进行描述时数据则是信息的载体数据库负责记录跟踪这些数据。数据库用来记录分析保存生成的数据在校园疫情防控系统这个项目中起到了很重要的作用。MySQL数据库体积小作用快相对于其他数据库而言性价比较高适合中等网页的开发并且服务很稳定几乎不存在宕机情况。
2.6 本章小结
本章节对项目校园疫情防控系统进行了相关技术的分析与介绍在结合技术的优点和适应性来选择数据库、服务器和开发环境基于现有的情况针对系统的各个模块确定系统的最优设计方案。
第3章 系统分析
为满足用户的需求本章分析系统开发的可行性将从技术和操作等方面来判断然后通过需求分析、系统流程分析来确定校园疫情防控系统的功能。
3.1 技术可行性分析
校园疫情防控系统在使用电脑和信息分析系统这些设计没有硬性要求电脑只要是可以正常使用的话那么代码和页面设计就是可行的。要求高的主要是服务器平台上传服务器一定要选择性价比高和安全性高的打开网站一定要顺滑不卡顿所以硬件也是可行的[2]。
所以从以上可行性分析可得本系统的开发使没有问题的。
3.2 操作可行性分析
将根据管理系统中的用户体验和管理员的效率来分析该措施的可行性。管理人员和用户都可以通过简单的操作登录进对应的系统页面方便用户搜索业务信息和管理人员管理数据不需要特别懂电脑的人也可以轻松访问系统模块。该系统已完全投入使用。
3.3 需求分析
本校园疫情防控系统是为了提高用户查阅信息的效率和管理人员管理信息的工作效率可以快速存储大量数据还有信息检索功能这大大的满足了用户和管理员这两者的需求。操作简单易懂合理分析各个模块的功能尽可能优化界面让用户和管理员能使用环境更好的系统。
对比要实现的功能来分析出用户的需求可以让用户在线对其进行添加、修改、查看、删除这不仅满足了用户的需求还大大的节省了时间。因此管理员的需求也应当考虑一下尽可能提高管理员的工作效率。
3.4 项目设计目标
本防系统采用MySQL数据库和Java技术开发而成极大程度上的保证了系统的稳定性。
3.4.1 关于系统的基本要求
1功能要求管理人员可以管理个人中心、管理员管理、老师管理、用户管理、健康上报管理、到校确认管理、论坛管理、公告管理、核酸上报管理、疫情知识信息管理、确诊上报管理、药品管理、基础数据管理、轮播图信息等功能模块[3]。
2性能可以准确无误的在不同的操作系统中登录到用户或者管理员的相应界面进行轻松的操作[4]。
3环境要求支持不同的操纵系统和不同的平台可用于Windows系列、Vista系统等多种操作系统[5]。
3.4.2 开发目标
本校园疫情防控系统的主要开发目标如下
1减少后台管理人员的工作量对用户的信息进行系统的管理
2必须要方便快捷的查看搜索信息并管理信息
3用户是具有多样性的所以界面要设置的简单明了操作更要方便快捷。
3.5 系统流程分析
系统登录流程图如图所示3-1所示。 图3-1 系统登录流程图
用户和管理员可以添加信息内容没有问题之后按下确定键就添加成功了。添加信息的流程图如图3-2所示. 图3-2 添加信息流程图
用户可以选择把自己发布的信息删掉选择要删除的文章确认之后删除信息的操作就完成了。删除信息流程图如图3-3所示。 图3-3 删除信息流程图
3.6 本章小结
本章主要是对校园疫情防控系统的可行性分析和所要实现的功能进行分析在对一系列的系统可行性分析之后又详细的讲述了项目的目标与原则让人们深刻的了解校园疫情防控系统的设计与实现的设计思想之后重点对登录模块、添加模块和删除模块的流程进行了详细的图文介绍。
第4章 系统设计
本章主要讲述的是校园疫情防控系统的设计开发结构简单介绍了开发流程与数据库设计的原则以及数据表的关系结构图并且详细的展示了数据表的内部结构信息与属性。
4.1 系统体系结构
系统启动后在登录界面输入正确的账号密码选择进入管理员界面或用户界面管理员界面是用来管理页面与用户用户界面可以正常的使用健康上报、到校确认、核酸上报、确诊上报、药品申请等功能系统登录结构图如图4-1所示。 图4-1 系统登录结构图
管理员模块属于是网站的后台进入之后有大量的管理员功能管理员也可以使用普通用户模块的功能为了维护网站的稳定与页面的布局将管理员模块的功能详细化后可以使用系统管理对页面进行布局修改可以发布公告提示用户规范用户功能模块可以对健康上报、到校确认、核酸上报、确诊上报、药品申请等功能进行操作校园疫情防控系统主页结构图如图4-2所示。 图4-2 校园疫情防控系统主页结构图
4.2 开发流程设计
系统的开发流程设计简单的介绍了开发过程先对任务书进行分析根据要实现的功能对各个模块进行开发之后再对模块一一进行测试测试成功后将模块整合再测试整体功能完善整体结构[6]。开发系统流程图如图4-3所示。 图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-6所示。
图4-6到校确认E-R图
核酸上报实E-R图如图4-7所示。
图4-7核酸上报E-R图
确诊上报实体E-R图如图4-8所示。
图4-8确诊上报E-R图
4.4 数据表信息
在关系数据E-R图中分析并创建数据表数据表用来记录信息数据表关系由多个数据表组成下面介绍的是数据表各个字段信息如下表所示。
表4-1健康上报表
序号列名数据类型说明允许空1IdIntid否2yonghu_idInteger用户是3daka_nameString健康码打卡是4daka_fileString健康码照片是5daka_wenduBigDecimal体温是6daka_textString备注是7daka_deleteInteger逻辑删除是8insert_timeDate录入时间是9create_timeDate创建时间是
表4-2到校确认表
序号列名数据类型说明允许空1IdIntid否2yonghu_idInteger用户是3daoxiao_nameString到校是4daoxiao_fileString照片是5daoxiao_textString备注是6insert_shijian_timeDate到校时间是7daoxiao_deleteInteger逻辑删除是8insert_timeDate录入时间是9create_timeDate创建时间是
表4-3字典表
序号列名数据类型说明允许空1IdIntid否2dic_codeString字段是3dic_nameString字段名是4code_indexInteger编码是5index_nameString编码名字是6super_idInteger父字段id是7beizhuString备注是8create_timeDate创建时间是
表4-4论坛表
序号列名数据类型说明允许空1IdIntid否2forum_nameString帖子标题是3yonghu_idInteger用户是4laoshi_idInteger老师是5users_idInteger管理员是6forum_contentString发布内容是7super_idsInteger父id是8forum_state_typesInteger帖子状态是9insert_timeDate发帖时间是10update_timeDate修改时间是11create_timeDate创建时间是
表4-5公告表
序号列名数据类型说明允许空1IdIntid否2gonggao_nameString公告名称是3gonggao_photoString公告图片是4gonggao_typesInteger公告类型是5insert_timeDate公告发布时间是6gonggao_contentString公告详情是7create_timeDate创建时间是
表4-6核酸上报表
序号列名数据类型说明允许空1IdIntid否2yonghu_idInteger用户是3hesuan_nameString核酸打卡是4hesuan_fileString核酸照片是5hesuan_textString备注是6hesuan_deleteInteger逻辑删除是7insert_timeDate录入时间是8create_timeDate创建时间是
表4-7老师表
序号列名数据类型说明允许空1IdIntid否2laoshi_nameString老师姓名是3laoshi_phoneString老师手机号是4laoshi_id_numberString老师身份证号是5laoshi_photoString老师头像是6laoshi_emailString老师邮箱是7create_timeDate创建时间是
表4-8疫情知识信息表
序号列名数据类型说明允许空1IdIntid否2news_nameString疫情知识名称是3news_photoString疫情知识图片是4news_typesInteger疫情知识类型是5insert_timeDate发布时间是6news_contentString疫情知识详情是7create_timeDate创建时间是
表4-9确诊上报表
序号列名数据类型说明允许空1IdIntid否2yonghu_idInteger用户是3quezhen_nameString确诊打卡是4quezhen_fileString确诊照片是5quezhen_textString备注是6quezhen_deleteInteger逻辑删除是7insert_timeDate录入时间是8create_timeDate创建时间是
表4-10药品表
序号列名数据类型说明允许空1IdIntid否2yonghu_idInteger用户是3yaopin_nameString药品名称是4yaopin_uuid_numberString药品编号是5yaopin_photoString药品照片是6yaopin_addressString药品地点是7yaopin_typesInteger药品类型是8yaopin_contentString药品介绍是9yaopin_deleteInteger逻辑删除是10insert_timeDate录入时间是11create_timeDate创建时间是
表4-11药品订单表
序号列名数据类型说明允许空1IdIntid否2yaopin_order_uuid_numberString订单编号是3yaopin_idInteger药品是4yonghu_idInteger用户是5yaopin_order_typesInteger订单类型是6insert_timeDate订单创建时间是7create_timeDate创建时间是
表4-12用户表
序号列名数据类型说明允许空1IdIntid否2yonghu_nameString用户姓名是3yonghu_photoString头像是4yonghu_phoneString用户手机号是5yonghu_id_numberString用户身份证号是6yonghu_emailString邮箱是7create_timeDate创建时间是
表4-13管理员表
序号列名数据类型说明允许空1IdIntid否2usernameString用户名是3passwordString密码是4roleString角色是5addtimeDate新增时间是
4.5 本章小结
本章具体讲述了系统的大体结构主要包括用户、老师、管理员三大系统模块使其各个功能简洁明了。同时对数据库的设计原则进行分析从而提高了系统的效率。
第5章 系统实现
本章讲述的是系统对各个模块功能实现的效果图对管理员功能、老师功能、用户功能分别进行了展示页面布局清晰操作简单快捷基本实现了对系统的需求。
5.1 管理员功能模块
本系统后台分为管理员、老师两个角色进入管理员模块界面管理相关信息与网页信息时需要输入管理员的账户名与密码登录成功后会自动跳转管理员模块界面。提高了数据信息的安全性。管理员登录界面如图5-1所示。 图5-1系统登录界面图
管理员进入系统后台后可以对个人中心、管理员管理、老师管理、用户管理、健康上报管理、到校确认管理、论坛管理、公告管理、核酸上报管理、疫情知识信息管理、确诊上报管理、药品管理、基础数据管理、轮播图信息等功能模块进行管理。管理员功能界面图如图5-2所示。 图5-2管理员功能界面图
点击管理员管理进入管理员管理操作页面管理员可以对已有的管理员信息进行修改、删除的操作管理员还可以在线新增管理员信息。管理员管理界面如图5-3所示。 图5-3用户管理界面图
进入老师管理和用户管理模块界面后管理员可以浏览系统已有的老师信息和用户信息并进行修改、删除、重置密码的操作管理员还可以根据需求新增老师信息和用户信息。老师管理及用户管理界面如下图所示。 图5-4老师管理界面图 图5-5用户管理界面图
进入系统的健康上报管理模块界面后可以查看用户提交的健康上报详情并根据需求进行修改、删除的操作。管理员还可以根据需求新增健康上班信息健康上报管理模块界面图如下图所示 图5-6健康上报管理界面图
在到校确认管理页面管理员可以查看到校确认详情根据需求进行修改、删除信息的操作。管理员还可以新增到校确认信息其页面如下图所示。 图5-7到校确认管理界面图
进入论坛管理页面管理员可以查看身份、姓名、手机号、头像、帖子标题、发帖时间等论坛详情并进行查看论坛回复、修改、删除帖子等操作管理员还可以根据需求新增论坛信息其页面图如图5-8所示。 图5-8论坛管理界面图
进入到公告管理页面管理员可以对公告信息进行修改、删除或新增的操作。公告管理界面图如图5-9所示。 图5-9公告管理界面图
点击核酸上报管理管理员可以查看用户提交的核酸上报详情并进行下载核酸图片、修改、删除信息的操作。管理员还可以在线新增核酸上报信息核酸上报管理界面图如图5-10所示。 图5-10核酸上报管理界面图
点击疫情知识信息管理管理员可以查看已有的疫情知识信息详情并进行修改、删除信息的操作。管理员还可以在线新增疫情知识信息疫情知识信息管理界面图如图5-11所示。
图5-11疫情知识信息管理界面图
点击确诊上报管理管理员可以查看已有的确诊上报详情并进行修改、删除信息的操作。管理员还可以在线新增确诊上报信息、查看报表的操作确诊上报管理界面图如图5-12所示。 图5-12确诊上报管理界面图
点击药品管理管理员可以查看已有的药品信息并进行修改、删除信息的操作。管理员还可以在线新增药品信息、管理药品订单管理药品信息管理及药品订单管理界面图如下图所示。 图5-13药品管理界面图 图5-14药品订单管理界面图
点击基础数据管理管理员可以对公告类型、疫情知识类型、药品类型进行新增、修改、删除的操作其界面图如下图所示。 图5-15公告类型管理界面图
点击轮播图信息管理员可以对轮播图信息进行新增、修改、删除的操作其界面图如下图所示。 图5-16轮播图管理界面图
5.2老师功能模块
老师登录到系统后可以对个人中心、健康上报管理、到校确认管理、论坛管理、公告管理、核酸上报管理、疫情知识信息管理、确诊上报管理、药品管理、轮播图信息等功能进行操作老师可以修改个人信息和登录密码查看健康上报、到校确认、公告信息、核酸上报、疫情知识信息、确诊上报、药品信息、轮播图信息等详情老师功能页面如图5-17所示。 图5-17老师功能界面图
5.3前台功能模块
用户通过注册、登录到系统前台可以浏览首页、查看对论坛、公告、疫情知识信息、药品、个人中心等功能进行操作。前台界面如下图所示
图5-18前台界面图
在药品页面用户可以查看药品详情进行立即申请的操作其页面如下图所示。 图5-19药品详情界面图 图5-20立即申请界面图
在个人中心页面用户可以修改个人信息进行健康上报、到校确认、核酸上报、确诊上报、管理药品订单等操作个人中心页面如下图所示。 图5-21个人中心界面图
5.5 本章小结
本章讲述了校园疫情防控系统的实现并把管理员、用户、老师三大功能模块用图片的形式展示出来并一一解读了其中的功能。设计的页面简洁布局清晰操作十分快捷极大程度的节约了操作时间。
系统测
CommonUtil.java
package com.utils;import java.util.*;/*** 公共方法*/
public class CommonUtil {/*** 获取随机字符串** param num* return*/public static String getRandomString(Integer num) {String base abcdefghijklmnopqrstuvwxyz0123456789;Random random new Random();StringBuffer sb new StringBuffer();for (int i 0; i num; i) {int number random.nextInt(base.length());sb.append(base.charAt(number));}return sb.toString();}/*** 检查map参数并添加缺失参数* param params* return*/public static void checkMap(MapString, Object params) {boolean pagetrue,limittrue,sorttrue,ordertrue;IteratorMap.EntryString, Object iter params.entrySet().iterator();while (iter.hasNext()) {Map.EntryString, Object info iter.next();Object key info.getKey();Object value info.getValue();if(valuenull || .equals(value) || null.equals(value)){iter.remove();}else if(page.equals(key)){pagefalse;}else if(limit.equals(key)){limitfalse;}else if(sort.equals(key)){sortfalse;}else if(order.equals(key)){orderfalse;}}if(page){params.put(page,1);}if(limit){params.put(limit,10);}if(sort){params.put(sort,id);}if(order){params.put(order,desc);}}
}
InterceptorConfig.java
package com.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;import com.interceptor.AuthorizationInterceptor;Configuration
public class InterceptorConfig extends WebMvcConfigurationSupport{Beanpublic AuthorizationInterceptor getAuthorizationInterceptor() {return new AuthorizationInterceptor();}Overridepublic void addInterceptors(InterceptorRegistry registry) {registry.addInterceptor(getAuthorizationInterceptor()).addPathPatterns(/**).excludePathPatterns(/static/**);super.addInterceptors(registry);}/*** springboot 2.0配置WebMvcConfigurationSupport之后会导致默认配置被覆盖要访问静态资源需要重写addResourceHandlers方法*/Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler(/**).addResourceLocations(classpath:/resources/).addResourceLocations(classpath:/static/).addResourceLocations(classpath:/admin/).addResourceLocations(classpath:/img/).addResourceLocations(classpath:/front/).addResourceLocations(classpath:/public/);super.addResourceHandlers(registry);}
}
add-or-update.vue
templatediv classaddEdit-blockel-formclassdetail-form-contentrefruleForm:modelruleForm:rulesruleslabel-widthautoel-rowel-col :span12el-form-item classinput v-iftype!info label药品类型编码 propcodeIndexel-input v-modelruleForm.codeIndexplaceholder药品类型编码 clearable :readonlyro.codeIndex/el-input/el-form-itemdiv v-elseel-form-item classinput label药品类型编码 propcodeIndexel-input v-modelruleForm.codeIndexplaceholder药品类型编码 readonly/el-input/el-form-item/div/el-colel-col :span12el-form-item classinput v-iftype!info label药品类型 propindexNameel-input v-modelruleForm.indexNameplaceholder药品类型 clearable :readonlyro.indexName/el-input/el-form-itemdiv v-elseel-form-item classinput label药品类型 propindexNameel-input v-modelruleForm.indexNameplaceholder药品类型 readonly/el-input/el-form-item/div/el-col!--el-col :span12el-form-item classinput v-iftype!info label备注 propbeizhuel-input v-modelruleForm.beizhuplaceholder备注 clearable :readonlyro.beizhu/el-input/el-form-itemdiv v-elseel-form-item classinput label备注 propbeizhuel-input v-modelruleForm.beizhuplaceholder备注 readonly/el-input/el-form-item/div/el-col--/el-rowel-form-item classbtnel-button v-iftype!info typeprimary classbtn-success clickonSubmit提交/el-buttonel-button v-iftype!info classbtn-close clickback()取消/el-buttonel-button v-iftypeinfo classbtn-close clickback()返回/el-button/el-form-item/el-form/div
/template
scriptimport styleJs from ../../../utils/style.js;// 数字邮件手机url身份证校验import { isNumber,isIntNumer,isEmail,isPhone, isMobile,isURL,checkIdCard } from /utils/validate;export default {data() {let self thisreturn {addEditForm:null,id: ,type: ,ro:{codeIndex : true,indexName : false,superId : false,beizhu : false,},ruleForm: {codeIndex: ,indexName: ,superId : ,beizhu : ,},rules: {/*beizhu: [{ required: true, message: 备注不能为空, trigger: blur },{ pattern: /^[1-9]\d*$/,message: 备注只能为正整数,trigger: blur}],*/}};},props: [parent],computed: {},created() {this.addEditForm styleJs.addStyle();this.addEditStyleChange()this.addEditUploadStyleChange()},methods: {// 初始化init(id,type) {if (id) {this.id id;this.type type;}if(this.typeinfo||this.typeelse){this.info(id);}else{//查询最大值 startthis.$http({url: dictionary/maxCodeIndex,method: post,data: {dicCode:yaopin_types}}).then(({ data }) {if (data data.code 0) {this.ruleForm.codeIndex data.maxCodeIndex;} else {this.$message.error(data.msg);}});//查询最大值 end}},// 多级联动参数info(id) {this.$http({url: dictionary/info/${id},method: get}).then(({ data }) {if (data data.code 0) {this.ruleForm data.data;//解决前台上传图片后台不显示的问题let regnew RegExp(../../../upload,g)//g代表全部} else {this.$message.error(data.msg);}});},// 提交onSubmit() {if((!this.ruleForm.indexName)){this.$message.error(药品类型不能为空);return}this.$refs[ruleForm].validate(valid {if (valid) {let ruleForm this.ruleForm;ruleForm[dicCode]yaopin_types;ruleForm[dicName]药品类型;this.$http({url: dictionary/${!this.ruleForm.id ? save : update},method: post,data: ruleForm}).then(({ data }) {if (data data.code 0) {this.$message({message: 操作成功,type: success,duration: 1500,onClose: () {this.parent.showFlag true;this.parent.addOrUpdateFlag false;this.parent.dictionaryCrossAddOrUpdateFlag false;this.parent.search();this.parent.contentStyleChange();}});} else {this.$message.error(data.msg);}});}});},// 返回back() {this.parent.showFlag true;this.parent.addOrUpdateFlag false;this.parent.dictionaryCrossAddOrUpdateFlag false;this.parent.contentStyleChange();},addEditStyleChange() {this.$nextTick((){// inputdocument.querySelectorAll(.addEdit-block .input .el-input__inner).forEach(el{el.style.height this.addEditForm.inputHeightel.style.color this.addEditForm.inputFontColorel.style.fontSize this.addEditForm.inputFontSizeel.style.borderWidth this.addEditForm.inputBorderWidthel.style.borderStyle this.addEditForm.inputBorderStyleel.style.borderColor this.addEditForm.inputBorderColorel.style.borderRadius this.addEditForm.inputBorderRadiusel.style.backgroundColor this.addEditForm.inputBgColor})document.querySelectorAll(.addEdit-block .input .el-form-item__label).forEach(el{el.style.lineHeight this.addEditForm.inputHeightel.style.color this.addEditForm.inputLableColorel.style.fontSize this.addEditForm.inputLableFontSize})// selectdocument.querySelectorAll(.addEdit-block .select .el-input__inner).forEach(el{el.style.height this.addEditForm.selectHeightel.style.color this.addEditForm.selectFontColorel.style.fontSize this.addEditForm.selectFontSizeel.style.borderWidth this.addEditForm.selectBorderWidthel.style.borderStyle this.addEditForm.selectBorderStyleel.style.borderColor this.addEditForm.selectBorderColorel.style.borderRadius this.addEditForm.selectBorderRadiusel.style.backgroundColor this.addEditForm.selectBgColor})document.querySelectorAll(.addEdit-block .select .el-form-item__label).forEach(el{el.style.lineHeight this.addEditForm.selectHeightel.style.color this.addEditForm.selectLableColorel.style.fontSize this.addEditForm.selectLableFontSize})document.querySelectorAll(.addEdit-block .select .el-select__caret).forEach(el{el.style.color this.addEditForm.selectIconFontColorel.style.fontSize this.addEditForm.selectIconFontSize})// datedocument.querySelectorAll(.addEdit-block .date .el-input__inner).forEach(el{el.style.height this.addEditForm.dateHeightel.style.color this.addEditForm.dateFontColorel.style.fontSize this.addEditForm.dateFontSizeel.style.borderWidth this.addEditForm.dateBorderWidthel.style.borderStyle this.addEditForm.dateBorderStyleel.style.borderColor this.addEditForm.dateBorderColorel.style.borderRadius this.addEditForm.dateBorderRadiusel.style.backgroundColor this.addEditForm.dateBgColor})document.querySelectorAll(.addEdit-block .date .el-form-item__label).forEach(el{el.style.lineHeight this.addEditForm.dateHeightel.style.color this.addEditForm.dateLableColorel.style.fontSize this.addEditForm.dateLableFontSize})document.querySelectorAll(.addEdit-block .date .el-input__icon).forEach(el{el.style.color this.addEditForm.dateIconFontColorel.style.fontSize this.addEditForm.dateIconFontSizeel.style.lineHeight this.addEditForm.dateHeight})// uploadlet iconLineHeight parseInt(this.addEditForm.uploadHeight) - parseInt(this.addEditForm.uploadBorderWidth) * 2 pxdocument.querySelectorAll(.addEdit-block .upload .el-upload--picture-card).forEach(el{el.style.width this.addEditForm.uploadHeightel.style.height this.addEditForm.uploadHeightel.style.borderWidth this.addEditForm.uploadBorderWidthel.style.borderStyle this.addEditForm.uploadBorderStyleel.style.borderColor this.addEditForm.uploadBorderColorel.style.borderRadius this.addEditForm.uploadBorderRadiusel.style.backgroundColor this.addEditForm.uploadBgColor})document.querySelectorAll(.addEdit-block .upload .el-form-item__label).forEach(el{el.style.lineHeight this.addEditForm.uploadHeightel.style.color this.addEditForm.uploadLableColorel.style.fontSize this.addEditForm.uploadLableFontSize})document.querySelectorAll(.addEdit-block .upload .el-icon-plus).forEach(el{el.style.color this.addEditForm.uploadIconFontColorel.style.fontSize this.addEditForm.uploadIconFontSizeel.style.lineHeight iconLineHeightel.style.display block})// 多文本输入框document.querySelectorAll(.addEdit-block .textarea .el-textarea__inner).forEach(el{el.style.height this.addEditForm.textareaHeightel.style.color this.addEditForm.textareaFontColorel.style.fontSize this.addEditForm.textareaFontSizeel.style.borderWidth this.addEditForm.textareaBorderWidthel.style.borderStyle this.addEditForm.textareaBorderStyleel.style.borderColor this.addEditForm.textareaBorderColorel.style.borderRadius this.addEditForm.textareaBorderRadiusel.style.backgroundColor this.addEditForm.textareaBgColor})document.querySelectorAll(.addEdit-block .textarea .el-form-item__label).forEach(el{// el.style.lineHeight this.addEditForm.textareaHeightel.style.color this.addEditForm.textareaLableColorel.style.fontSize this.addEditForm.textareaLableFontSize})// 保存document.querySelectorAll(.addEdit-block .btn .btn-success).forEach(el{el.style.width this.addEditForm.btnSaveWidthel.style.height this.addEditForm.btnSaveHeightel.style.color this.addEditForm.btnSaveFontColorel.style.fontSize this.addEditForm.btnSaveFontSizeel.style.borderWidth this.addEditForm.btnSaveBorderWidthel.style.borderStyle this.addEditForm.btnSaveBorderStyleel.style.borderColor this.addEditForm.btnSaveBorderColorel.style.borderRadius this.addEditForm.btnSaveBorderRadiusel.style.backgroundColor this.addEditForm.btnSaveBgColor})// 返回document.querySelectorAll(.addEdit-block .btn .btn-close).forEach(el{el.style.width this.addEditForm.btnCancelWidthel.style.height this.addEditForm.btnCancelHeightel.style.color this.addEditForm.btnCancelFontColorel.style.fontSize this.addEditForm.btnCancelFontSizeel.style.borderWidth this.addEditForm.btnCancelBorderWidthel.style.borderStyle this.addEditForm.btnCancelBorderStyleel.style.borderColor this.addEditForm.btnCancelBorderColorel.style.borderRadius this.addEditForm.btnCancelBorderRadiusel.style.backgroundColor this.addEditForm.btnCancelBgColor})})},addEditUploadStyleChange() {this.$nextTick((){document.querySelectorAll(.addEdit-block .upload .el-upload-list--picture-card .el-upload-list__item).forEach(el{el.style.width this.addEditForm.uploadHeightel.style.height this.addEditForm.uploadHeightel.style.borderWidth this.addEditForm.uploadBorderWidthel.style.borderStyle this.addEditForm.uploadBorderStyleel.style.borderColor this.addEditForm.uploadBorderColorel.style.borderRadius this.addEditForm.uploadBorderRadiusel.style.backgroundColor this.addEditForm.uploadBgColor})})},}};
/script
style langscss
.editor{height: 500px; /deep/ .ql-container {height: 310px;}}.amap-wrapper {width: 100%;.editor{height: 500px; /deep/ .ql-container {height: 310px;}}.amap-wrapper {width: 100%;height: 500px;}.search-box {position: absolute;}.addEdit-block {margin: -10px;}.detail-form-content {padding: 12px;background-color: transparent;}.btn .el-button {padding: 0;}
}/style
声明 本博客适用于广泛的学术和教育用途包括但不限于个人学习、开发设计产品设计。仅供学习参考旨在为读者提供深入理解和学术研究的材料。
