@TOC
ssm627基于J2EE开发的猎头公司管理系统+vue
第一章 绪论
1.1 选题背景
目前整个社会发展的速度，严重依赖于互联网，如果没有了互联网的存在，市场可能会一蹶不振，严重影响经济的发展水平，影响人们的生活质量。计算机的发展，不管是从硬件还是软件，都有很多技术储备，每年都有很多的技术和软件产生，纵观各个领域，无一不用互联网软件，办公用的还是电脑居多，但是人手一台智能设备已经变成了现在人们的生活日常，哪怕的普通的老百姓都成了上知天文下知地理的所在，这些都依赖于互联网技术。互联网技术在信息的传播方面是巨大的，而信息的处理就变成了各种产业管理者和维护者的重任。人们已经习惯了互联网的存在，所以经常操作一些互联网产品变成了日常，所以开发一个猎头公司管理系统，让人们使用是没有一点问题的，并且在这个过程中不仅能够规范猎头公司信息管理的使用流程还有信息处理流程，也能让整个信息的传播处理，都存在一种可控制的范围，最重要的是，计算机在猎头公司信息管理方面可以给管理者提供更好的帮助。
1.2 选题意义
当开发软件变成了一个潮流之后，会发现不管任何行业都能开发适合自己的软件，不管是内部员工管理，还是财务管理，甚至业务管理都可以数据化，并且可以对这些数据集中处理，进而根据数据处理结果就自然而然的提高了管理水平，最重要的是，开发一个软件投入使用，开发过程其实就是梳理行业痛点的过程，就是让软件来弥补行业的管理漏洞，不断的优化事物的处理流程。猎头公司管理系统就是一款专门开发的软件，通过Web技术，让使用者可以在任何一台智能设备上面通过浏览器进行操作使用，对数据的处理不在局限于地域距离，只要软件开发到位，使用起来方便，达到预期目的，会发现有软件和没有软件的区别是很大的，有了这款软件之后，会发现数据的存储安全方面，比起之前的满屋寻找记录的优势是多么的巨大。
1.3 研究内容
绪论：介绍本系统开发的背景，意义；
开发环境：介绍本系统的配置环境以及开发技术；
系统分析：介绍本系统的功能，性能以及可行性；
系统设计：介绍本系统的数据库的设计以及功能结构的设计；
系统实现：介绍本系统的实现界面以及实现的功能；
系统测试：介绍本系统的功能测试以及测试结果；
第二章 开发环境
开发本系统需要配置开发环境，除了需要开发者安装相应的软件外，也需要对开发中运用的技术进行了解和掌握。
2.1 Java语言
Java语言是目前最流行的语言之一，不仅可以做桌面窗口形式的程序，还可以做浏览器访问的程序，目前最流行的就是用Java语言作为基础，做各种程序的后台处理。Java语言是操作变量的语言，而变量则是Java对于数据存在形式的定义，变量用来操作内存，而内存则牵扯到计算机安全问题，这样Java语言反而有了免疫直接针对用Java语言开发出来的程序的病毒，有效的提高了Java语言开发出来程序的生存能力。Java是具有动态运行能力的一种语言，Java的类不仅仅可以用Java核心提供的基础类，还可以进行重写，这样会让Java的功能变得更加丰富，甚至可以编写一些功能模块进行封装，然后其他项目如果需要用到这些可以复用的功能，完全可以直接引用，然后在用得地方调用方法即可。Java是一种开源的语言，可以对Java里面的各种类以及引用方法进行追溯，甚至可以对已经编译过的语言进行反编译，这样不仅仅提高学习的效率，并且可以学习其他从业者提供的优雅的编程方式。Java语言发展到现在，已经在各个行业扎根，学习Java可以从事的行业很多，并且学习的方法很多，网上有很多免费的教程，甚至有些高深的知识也只需要付费就可以进行学习，而不是像Java语言之初，每一个编程人员都需要用记事本进行手动编码，现在有很多集成开发环境帮助Java从业者。选择Java语言进行编程，是一种很好的解决问题的方式。
2.2 MYSQL数据库
一般学习程序开发的人员如果学习数据库的话，肯定是要学习MySQL数据库，MySQL数据库通过这么多年的不断发展，社区版本都是免费的，最重要的是小巧，占用电脑空间比较小，让更多的开发人员可以不需要更换更高级的电脑就可以进行学习。学习只是一个方面，最重要的是MySQL市场占有率是世界第一，基本上十个公司就有七八个用得MySQL数据库。MySQL的优点不只是这么粗浅，MySQL首先是开源的，只要不是商用就不用花钱，并且大型的数据也是支持的，只要是市面上存在的操作系统，MySQL都可以有对应的版本可供使用。因为MySQL是开源的，如果有对MySQL有特殊需求的甚至可以自己修改源码，达到符合自己使用的目的。MySQL数据库好处多多，最重要的一点符合本设计的开发需求，可以说本设计只用到了MySQL的一些基础功能，而这点基础功能就完全够用。MySQL学习的教程网上很多，许多关于入门的教程就完全可以达到普通程序员的开发水平，只需要把基本的知识学会了，到公司里面也只是根据不同的业务逻辑进行不同的语句编写而已。
2.3 Eclipse开发工具
Eclipse是开源免费的，仅仅这样理解也许会给人一种免费没有好货的感觉，其实不是这样的。Eclipse是一个开发源代码的开发工具，这样会很安全，因为是开源的，如果对使用者的电脑有害，肯定能找到原因所在，所以这一点安全方面是不用担心的。Eclipse是不用安装的，这样就不用对系统盘增加压力，可以放到任何一个盘里，使用的时候打开，不用的时候关闭，不会偷偷的在后台运行，不需要增加注册表负担，启动还必须依靠Java的JDK才可以启动，有效的避免了一些病毒入侵，如果病毒入侵改变了源代码，就不能运行了，只能重新删除文件夹重新解压一份新的Eclipse即可，用起来很安全。Eclipse发展到现在，已经可以支持其他的开发语言了，家族越来越强大，功能越来越多，最重要的还是没有收费，这一点就让新手开发者省下很多的资金用来培养自己的学习，而不用花钱买了开发软件才发现自己不适合进行开发，永远免费的策略可以永远让人有想使用的机会。最重要的是Eclipse并不是免费功能就不够用，恰恰相反，不仅功能强大，用起来完全符合本设计的开发需求，所以选用了Eclipse作为开发工具。
2.4 SSM框架
首先SSM框架是指的三个框架，第一个S是Spring MVC的首字母，主要是作为控制视图层的一种框架，第二个S是Spring框架的意思，主要是用来作为Web层，这一层主要是用来获取浏览器提交的一些信息并且把提交的信息处理后反馈给Spring MVC来控制不同的显示页面和内容；第三个M是的意思是MyBatis框架，主要是做为持久层用得，把数据对象转换成数据库表里的值，或者从数据库获取相应的数据转换成对应的Java对象让程序可以有效的进行转换和处理。三个框架可以有效的进行结合，实现不同的作用，起到了承上启下的作用。
第三章 系统分析
这个阶段，需要依靠大量的资料作为研究本系统的基础数据，除了分析系统开发可行问题之外，还要再通过调查本系统针对的目标人群的需求来确定本系统功能，并在本系统的性能上做出进一步分析。
3.1可行性分析
在项目进行开发之前，必须要有可行性分析报告，分别从技术角度，经济角度，操作角度上面进行分析，经过可行性分析是实现科学开发的必要步骤。
3.1.1技术可行性
从技术的角度出发，目前采用开发的技术完全能满足系统开发需要。目前市场上有现成的软件开发工具和开发技术，这些可以保证系统开发的顺利进展。
3.1.2操作可行性
猎头公司管理系统是根据用户经常使用的页面操作流程来进行设计的，并且页面保证统一，从视觉角度和操作角度上都能达到使用要求。
3.1.3经济可行性
在本次开发过程中，因为需要通过电脑来进行配置开发的环境，通过对技术的分析，发现目前正在使用的电脑是可以满足开发需要的，并不需要太多的金钱对电脑进行更换。所以，从经济角度上分析，可以满足开发要求。
从以上三个角度来进行分析论证，证明了猎头公司管理系统是可以正常开发并且使用的。
3.2系统流程分析
从系统的角色上分析，每个用户角色都代表了不同的账号身份，而不同的身份则代表着功能的异同，所以首先要区分用户的角色身份问题。设置用户登录需要输入账号和密码，输入的信息必须与数据库里已经存在的账号密码信息进行比对，只有正确的账号和密码才可以进行下一步的页面显示操作，如果不正确的账号密码，则拒绝用户登录，也代表着用户没有继续访问的权限，系统是无法继续提供服务的。
图3-1 操作流程图
任何一个系统都有一个操作流程，本设计里面，对于任何数据的存储都有一定的合法要求，只有符合设定要求的数据才可以进行存储。具体步骤参考下图。
图3-2 添加信息流程图
数据的存储并不是一成不变的，当需要对已经存在的数据进行改变的时候，同样也遵循着操作流程，想更改数据首先要确定更改之前的数据是什么，然后输入新的数据是否合法，都要符合流程，只有合法数据才可以被更新到数据库里存储。具体步骤参考下图。
图3-3 修改信息流程图
删除操作，在数据存储方面是一件比较慎重的事件，很有可能会产生失误操作，所以一般删除操作的时候都要提示是否删除，确定删除才会更新数据库内容，实现删除目的。具体步骤参考下图。
图3-4 删除信息流程图
3.3系统性能分析
系统在使用过程中，用户会享受到系统带来的便利。那么如何保持在长时间的使用过程中，不出现乱七八糟的问题，让使用系统变成一种操作上的享受，使用上的便捷，这就是需要考虑的问题。以下主要从系统的性能分析上面进行描述，从数据完整以及数据安全，包括系统的可扩展等方面进行介绍。
3.3.1系统安全性
注册用户与游客用户的区别就在于是否有账号，如果有账号，那么就有相关的注册用户权限，有账号就有密码，密码是保证账号安全性的前提，游客只能浏览一些公共性信息，如果需要用户登录才能观看的信息，那么也需要使用账号登录的。对于系统安全性上面，主要考虑角色的密码加密问题，这样可以防止有效的密码数据拦截后的破解工作。一般密码如果有安全性要求的话，是可以考虑加密存储。密码的加密存储大致有两种设计方法，一种是密码在前台提交后就用Java Script进行MD5加密，然后直接提交密文，这样的好处是密文传输的安全性，另一种是提交密码后在后台处理的过程中对密码进行加密或者解密，这样会增加后台的处理负担。一般都居中考虑，如果登录的话会把密码在后台进行加密与数据库密码进行对比。目前常用的加密方式是MD5加密方式。
3.3.2数据完整性
系统进行开发的最重要的目的就是数据的处理，计算机有其擅长数据的存储以及处理工作，所以数据的完整性是必须保证的，不然系统的存在是没有必要的。数据不管是设计还是存储，都必须完整，从数据的输入就从各个方面保证数据的合法性，违规数据不能直接提交的。数据处理逻辑也会保证数据的加工正常，进而进行数据存储，也会保证数据设计的合理，这些都是有数据设定要求的。目前对数据的存储采用的关系型数据库，关系型数据库有多年的历史，功能强大，迁移备份以及无人值守都可以进行自动备份的。
3.3.3系统可扩展性
系统是有必要存在扩展性的。在设计之初就要考虑可能存在的业务，所以对系统的设计就要模块化设计，这样需要进行扩展的时候，只要在对应模块进行增加，对应逻辑进行调试即可。系统可扩展性的提升会让系统增加不必要的工作量，让程序设计更加符合规范。
3.4系统功能分析
本系统在功能分析上，主要是根据目标用户群的角度进行分析，为了便于展示分析结果，这里就使用用例图进行功能展示。
管理员用例图的绘制结果见图3-5。管理员登录进入本系统操作的功能包括管理部门领导，人事人员，财务人员，通知信息，新闻信息，业绩信息，薪资信息，普通员工信息等。
图3-5 管理员用例图
部门领导用例图的绘制结果见图3-6。部门领导登录进入本系统操作的功能包括管理业绩，查看新闻和通知。
图3-6 部门领导用例图
财务人员用例图的绘制结果见图3-7。财务人员登录进入本系统操作的功能包括查看业绩，管理薪资，查看新闻。
图3-7 财务人员用例图
人事人员用例图的绘制结果见图3-8。人事人员登录进入本系统操作的功能包括查看新闻和通知，管理普通员工。
图3-8 人事人员用例图
普通员工用例图的绘制结果见图3-9。普通员工登录进入本系统操作的功能包括查看新闻和通知，查看业绩和薪资。
图3-9 普通员工用例图
第四章 系统设计
到目前为止，市面上已经存在了各种各样的软件系统，从系统的分类着手，主要应用范围倾向于办公系统，娱乐系统，社交系统，然后下面有很多比较细的分支系统。很多系统已经经过了市场的考验，针对不同的业务场景已经开始出现了业务模块化，程序员减代码化的各种设计方式。到目前为止，当要设计一个系统的时候，首先根据业务模型基本上都可以在网上找到类似的模板，然后根据具体业务具体分析，进而实现具体功能，大众的就是最好的，毕竟符合市场主流的就代表着肯定符合常规操作流程。
4.1 系统设计目标
系统设计的时候，就要制定需要达成的目标。在功能上，要严格符合设计需求，不仅仅要减少操作步骤，也要符合预期。因此，在规范化的今天设计出符合项目要求的系统，必须要达到下面设定的目标。
第一个目标就是友好性：友好性主要体现在用户使用过程中，不会对系统的操作产生一种不满，减少操作者的愤怒，这是相当重要的一个体现。前几年好多软件在这个友好性方面失去了市场，就是因为在友好性这方面没有做好。国内互联网发展初期，软件设计的目的就是能用就行，至于友好性的对比，那是不存在的，因为硬件效率比较低，计算机属于新兴行业，所以大哥不说二哥，都是不友好的。随着计算机硬件的提升，很多开发者开始注意到要牺牲一定的计算器性能来提升友好性，因为计算机发展到现在，第一印象很重要，一个软件设计的不好看，会让大部分人对其产生质疑，所以要在友好性上面下很大功夫进行雕琢。
第二个目标就是安全性：安全性其实贯穿着整个软件行业的发展史，计算机就是为解决人类重复性计算以及数据存储的目的而诞生的，很多行业都需要计算机来进行计算，减少出错几率，并且把数据保留，可以实时查询，所以数据的安全性也很重要。
只要保证数据安全性的前提，开发出符合功能需求的友好界面操作，那么就达到了系统设计的目的。
4.2功能结构设计
本系统主要是基于数据的增加，修改，删除等操作，使用者能够通过提前设定的登录功能进入指定的操作区，这里对使用者设计的功能进行结构展示。
管理员功能结构图的绘制结果见图4-1。管理员登录进入本系统操作的功能包括管理部门领导，人事人员，财务人员，通知信息，新闻信息，业绩信息，薪资信息，普通员工信息等。
图4-1 管理员功能结构图
部门领导功能结构图的绘制结果见图4-2。部门领导登录进入本系统操作的功能包括管理业绩，查看新闻和通知。
图4-2 部门领导功能结构图
财务人员功能结构图的绘制结果见图4-3。财务人员登录进入本系统操作的功能包括查看业绩，管理薪资，查看新闻。
图4-3 财务人员功能结构图
人事人员功能结构图的绘制结果见图4-4。人事人员登录进入本系统操作的功能包括查看新闻和通知，管理普通员工。
图4-4 人事人员功能结构图
普通员工功能结构图的绘制结果见图4-5。普通员工登录进入本系统操作的功能包括查看新闻和通知，查看业绩和薪资。
图4-5 普通员工功能结构图
4.3数据库设计
如果说设计系统的功能很重要，那么设计该系统的数据库将更重要，毕竟系统服务于用户，数据库服务于系统，用户访问系统，操作系统的所有数据都要依赖于数据库，而系统的数据几乎都是保存在数据库中的，所以，一个高质量的程序，必然拥有一个安全，快速响应，稳定可靠的数据库。本系统的MySQL数据库可以通过SQL语言来实现对系统数据的管理，包括在指定表中插入数据，在规定的表中更改数据，以及删除指定表中的部分数据等操作。一般来说，像MySQL这样的关系型数据库，对于结构化查询语言SQL都能很好的进行支持。在编程中，通过合理运用SQL语言便能操作数据库的各种数据，真是非常方便快捷！
4.3.1 数据库概念设计
本节内容主要是使用图形的方式来描述数据库中的实体，每个实体的相应属性，还有实体之间的相互联系，常用的Visio工具即可满足绘制E-R图的需求。E-R图是由矩形，椭圆，菱形等图形元素组成，矩形框中主要写实体的名称，椭圆框中主要是登记该实体的属性，而菱形框中主要是登记实体之间的联系名称，最后使用实心线段把这些图形元素进行连接，即可完成E-R图的绘制。当初步得到一个E-R图时，需要进行检查，使用分析的方式去修改，重构E-R图，以达到消除数据冗余，或者是消除实体间联系冗余的目的。从而保持数据库的完整性，以及降低数据库维护上面的难度。
（1）使用Visio这样的常用的实体属性图绘制工具来绘制业绩实体属性图，绘制结果见图4-3。
图4-3 业绩实体属性图
（2）使用Visio这样的常用的实体属性图绘制工具来绘制薪资实体属性图，绘制结果见图4-4。
图4-4 薪资实体属性图
（3）使用Visio这样的常用的实体属性图绘制工具来绘制普通员工实体属性图，绘制结果见图4-5。
图4-5 普通员工实体属性图
（4）使用Visio这样的常用的实体属性图绘制工具来绘制管理员实体属性图，绘制结果见图4-6。
图4-6 管理员实体属性图
（5）绘制的上述实体间存在的联系见图4-7。
图4-7 实体间关系E-R图
4.3.2 数据库物理设计
本系统数据在数据库中都是通过各种二维表进行记录保存的，在数据库中设计这样的二维表也是比较重要的内容，因为它影响着数据的存储效率。在设计二维表也就是关系模型之前，一些有关二维表方面的常用概念需要进行充分了解。
关系：一张具体的数据表即表示关系，关系的名称与数据表的名称保持一致；
元组：数据表中，每行显示的数据即代表元组；
属性：数据表中，每列表示的数据即代表属性；
关键字：数据表中，为了与其他数据表进行区分，则需要在每张表中进行主键的设置；
通过上节内容可以知晓数据库中的各个实体，并通过一定方式把这些实体表示的内容进行数据表的转换，通常来说，每个实体都会对应一张具体的数据表，在本系统指定的数据库中创建命名好的数据库，才可以对数据表进行创建与设计。猎头公司管理系统数据表设计结果展示如下：
表4-1 部门领导表
| 字段 | 注释 | 类型 | 空 |
|---|---|---|---|
| id (主键) | 主键 | int(11) | 否 |
| username | 账户 | varchar(200) | 是 |
| password | 密码 | varchar(200) | 是 |
| bumenlingdao_name | 部门领导姓名 | varchar(200) | 是 |
| bumenlingdao_phone | 部门领导手机号 | varchar(200) | 是 |
| bumenlingdao_id_number | 部门领导身份证号 | varchar(200) | 是 |
| bumenlingdao_photo | 部门领导头像 | varchar(200) | 是 |
| sex_types | 性别 | int(11) | 是 |
| bumen_types | 部门 | int(11) | 是 |
| bumenlingdao_email | 电子邮箱 | varchar(200) | 是 |
| jiguan | 籍贯 | varchar(200) | 是 |
| bumenlingdao_zhuzhi | 家庭住址 | varchar(200) | 是 |
| ruzhi_time | 入职时间 | timestamp | 是 |
| insert_time | 添加时间 | timestamp | 是 |
| create_time | 创建时间 | timestamp | 是 |
表4-2 财务人员表
| 字段 | 注释 | 类型 | 空 |
|---|---|---|---|
| id (主键) | 主键 | int(11) | 否 |
| username | 账户 | varchar(200) | 是 |
| password | 密码 | varchar(200) | 是 |
| caiwurenyuan_name | 财务人员姓名 | varchar(200) | 是 |
| caiwurenyuan_phone | 财务人员手机号 | varchar(200) | 是 |
| caiwurenyuan_id_number | 财务人员身份证号 | varchar(200) | 是 |
| caiwurenyuan_photo | 财务人员头像 | varchar(200) | 是 |
| sex_types | 性别 | int(11) | 是 |
| ruzhi_time | 入职时间 | timestamp | 是 |
| insert_time | 添加时间 | timestamp | 是 |
| create_time | 创建时间 | timestamp | 是 |
表4-3 新闻信息表
| 字段 | 注释 | 类型 | 空 |
|---|---|---|---|
| id (主键) | 主键 | int(11) | 否 |
| news_name | 新闻名称 | varchar(200) | 是 |
| news_photo | 新闻图片 | varchar(200) | 是 |
| news_types | 新闻类型 | int(11) | 否 |
| insert_time | 新闻发布时间 | timestamp | 是 |
| news_content | 新闻详情 | text | 是 |
| create_time | 创建时间 | timestamp | 是 |
表4-4 人事人员表
| 字段 | 注释 | 类型 | 空 |
|---|---|---|---|
| id (主键) | 主键 | int(11) | 否 |
| username | 账户 | varchar(200) | 是 |
| password | 密码 | varchar(200) | 是 |
| renshi_name | 人事人员姓名 | varchar(200) | 是 |
| renshi_phone | 人事人员手机号 | varchar(200) | 是 |
| renshi_id_number | 人事人员身份证号 | varchar(200) | 是 |
| renshi_photo | 人事人员头像 | varchar(200) | 是 |
| sex_types | 性别 | int(11) | 是 |
| ruzhi_time | 入职时间 | timestamp | 是 |
| insert_time | 添加时间 | timestamp | 是 |
| create_time | 创建时间 | timestamp | 是 |
表4-5 单页数据表
| 字段 | 注释 | 类型 | 空 |
|---|---|---|---|
| id (主键) | 主键 | int(11) | 否 |
| single_seach_name | 名字 | varchar(200) | 是 |
| single_seach_types | 数据类型 | int(11) | 是 |
| single_seach_content | 内容 | text | 是 |
| create_time | 创建时间 | timestamp | 是 |
表4-6 通知信息表
| 字段 | 注释 | 类型 | 空 |
|---|---|---|---|
| id (主键) | 主键 | int(11) | 否 |
| tongzhi_name | 通知名称 | varchar(200) | 是 |
| tongzhi_photo | 通知图片 | varchar(200) | 是 |
| tongzhi_types | 通知类型 | int(11) | 否 |
| insert_time | 通知发布时间 | timestamp | 是 |
| tongzhi_content | 通知详情 | text | 是 |
| create_time | 创建时间 | timestamp | 是 |
表4-7 管理员表
| 字段 | 注释 | 类型 | 空 |
|---|---|---|---|
| id (主键) | 主键 | bigint(20) | 否 |
| username | 用户名 | varchar(100) | 否 |
| password | 密码 | varchar(100) | 否 |
| role | 角色 | varchar(100) | 是 |
| addtime | 新增时间 | timestamp | 否 |
表4-8 薪资表
| 字段 | 注释 | 类型 | 空 |
|---|---|---|---|
| id (主键) | 主键 | int(11) | 否 |
| caiwurenyuan_id | 人事 | int(11) | 是 |
| yuangong_id | 员工 | int(11) | 是 |
| xinzi_uuid_number | 薪资编号 | varchar(200) | 是 |
| xinzi_name | 标题 | varchar(200) | 是 |
| xinzi_month | 月份 | varchar(200) | 是 |
| jiben_jine | 基本工资 | decimal(10,2) | 是 |
| jiangjin_jine | 奖金 | decimal(10,2) | 是 |
| jixiao_jine | 绩效 | decimal(10,2) | 是 |
| butie_jine | 补贴 | decimal(10,2) | 是 |
| shifa_jine | 实发 | decimal(10,2) | 是 |
| xinzi_content | 备注 | text | 是 |
| insert_time | 添加时间 | timestamp | 是 |
| create_time | 创建时间 | timestamp | 是 |
表4-9 业绩表
| 字段 | 注释 | 类型 | 空 |
|---|---|---|---|
| id (主键) | 主键 | int(11) | 否 |
| bumenlingdao_id | 部门领导 | int(11) | 是 |
| yuangong_id | 员工 | int(11) | 是 |
| yeji_uuid_number | 业绩编号 | varchar(200) | 是 |
| gongsi_name | 服务公司名称 | varchar(200) | 是 |
| gongsi_address | 服务公司地址 | varchar(200) | 是 |
| ticheng_jine | 提成 | decimal(10,2) | 是 |
| yeji_content | 业绩详情 | text | 是 |
| insert_time | 添加时间 | timestamp | 是 |
| create_time | 创建时间 | timestamp | 是 |
表4-10 普通员工表
| 字段 | 注释 | 类型 | 空 |
|---|---|---|---|
| id (主键) | 主键 | int(11) | 否 |
| username | 账户 | varchar(200) | 是 |
| password | 密码 | varchar(200) | 是 |
| yuangong_name | 普通员工姓名 | varchar(200) | 是 |
| yuangong_phone | 普通员工手机号 | varchar(200) | 是 |
| yuangong_id_number | 普通员工身份证号 | varchar(200) | 是 |
| yuangong_photo | 普通员工头像 | varchar(200) | 是 |
| sex_types | 性别 | int(11) | 是 |
| bumen_types | 部门 | int(11) | 是 |
| yuangong_email | 电子邮箱 | varchar(200) | 是 |
| jiguan | 籍贯 | varchar(200) | 是 |
| yuangong_zhuzhi | 家庭住址 | varchar(200) | 是 |
| ruzhi_time | 入职时间 | timestamp | 是 |
| insert_time | 添加时间 | timestamp | 是 |
| yuangong_delete | 逻辑删除 | int(11) | 是 |
| create_time | 创建时间 | timestamp | 是 |
第五章 系统实现
这里主要是对系统设计实现进行描述，通过系统的设计和数据库的设计，通过编码后变成了可以进行操作的界面，让一切想法变成了结果，通过文字和具体程序操作界面的截图之间的配合，可以把功能更直观的描述起来。
5.1管理员功能实现
5.1.1 部门领导管理
管理员进入如图5-1所示的部门领导管理界面之后，管理员点击信息显示栏中最右侧的修改，删除，重置密码按钮可依次完成部门领导信息的修改，删除，密码重置等操作，管理员也能在当前界面查询部门领导信息，添加部门领导信息等。
图5-1 部门领导管理界面
5.1.2 财务人员管理
管理员进入如图5-2所示的财务人员管理界面之后，管理员点击信息显示栏中最右侧的修改，删除按钮可依次完成财务人员信息的修改，删除等操作，管理员在当前界面也能添加财务人员，查询财务人员。
图5-2 财务人员管理界面
5.1.3 人事人员管理
管理员进入如图5-3所示的人事人员管理界面之后，管理员点击信息显示栏中最右侧的修改，删除按钮可依次完成人事人员信息的修改，删除等操作，管理员在当前界面也能添加人事人员，查询人事人员。
图5-3 人事人员管理界面
5.2部门领导功能实现
5.2.1 业绩管理
部门领导进入如图5-4所示的业绩管理界面之后，部门领导点击信息显示栏中最右侧的详情，删除按钮可依次完成业绩信息的详情查看，删除操作，部门领导在本界面也能查询业绩信息，添加业绩信息等。
图5-4 业绩管理界面
5.2.2 通知信息查看
部门领导进入如图5-5所示的通知信息查看界面之后，部门领导查询通知信息，点击详情按钮即可查看通知信息详细信息。
图5-5 通知信息查看界面
5.3财务人员功能实现
5.3.1 薪资管理
财务人员进入如图5-6所示的薪资管理界面之后，财务人员点击信息显示栏中最右侧的详情，删除按钮可依次完成薪资信息的详情查看，删除操作，财务人员在本界面也能查询薪资信息，添加薪资信息等。
图5-6 薪资管理界面
5.3.2 业绩查看
财务人员进入如图5-7所示的业绩查看界面之后，财务人员查询业绩，查看业绩详细信息。
图5-7 业绩查看界面
5.4人事人员功能实现
5.4.1 普通员工管理
人事人员进入如图5-8所示的普通员工管理界面之后，人事人员点击信息显示栏中最右侧的修改，删除，重置密码按钮可依次完成普通员工信息的修改，删除，密码重置等操作，人事人员也能在当前界面查询普通员工信息，添加普通员工信息等。
图5-8 普通员工管理界面
5.4.2 新闻信息查看
人事人员进入如图5-9所示的新闻信息查看界面之后，人事人员需要查询新闻，查看新闻详细信息。
图5-9 新闻信息查看界面
5.5普通员工功能实现
5.5.1 新闻信息
普通员工进入如图5-10所示的新闻信息界面之后，普通员工查询新闻信息，查看新闻信息。
图5-10 新闻信息界面
5.5.2 通知信息
普通员工进入如图5-11所示的通知信息界面之后，普通员工查询通知信息，查看通知信息。
图5-11 通知信息界面
5.5.3 薪资查看
普通员工进入如图5-12所示的薪资查看界面之后，普通员工查看自己的薪资。
图5-12 薪资查看界面
5.5.4 业绩查看
普通员工进入如图5-13所示的业绩查看界面之后，普通员工查看自己的业绩。
图5-13 业绩查看界面
TongzhiController.java
package com.controller;
import java.io.File;
import java.math.BigDecimal;
import java.net.URL;
import java.text.SimpleDateFormat;
import com.alibaba.fastjson.JSONObject;
import java.util.*;
import org.springframework.beans.BeanUtils;
import javax.servlet.http.HttpServletRequest;
import org.springframework.web.context.ContextLoader;
import javax.servlet.ServletContext;
import com.service.TokenService;
import com.utils.*;
import java.lang.reflect.InvocationTargetException;
import com.service.DictionaryService;
import org.apache.commons.lang3.StringUtils;
import com.annotation.IgnoreAuth;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.entity.*;
import com.entity.view.*;
import com.service.*;
import com.utils.PageUtils;
import com.utils.R;
import com.alibaba.fastjson.*;
/**
* 通知信息
* 后端接口
* @author
* @email
*/
@RestController
@Controller
@RequestMapping("/tongzhi")
public class TongzhiController {
private static final Logger logger = LoggerFactory.getLogger(TongzhiController.class);
@Autowired
private TongzhiService tongzhiService;
@Autowired
private TokenService tokenService;
@Autowired
private DictionaryService dictionaryService;
//级联表service
@Autowired
private YuangongService yuangongService;
@Autowired
private BumenlingdaoService bumenlingdaoService;
@Autowired
private CaiwurenyuanService caiwurenyuanService;
@Autowired
private RenshiService renshiService;
/**
* 后端列表
*/
@RequestMapping("/page")
public R page(@RequestParam Map<String, Object> params, HttpServletRequest request){
logger.debug("page方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));
String role = String.valueOf(request.getSession().getAttribute("role"));
if(false)
return R.error(511,"永不会进入");
else if("普通员工".equals(role))
params.put("yuangongId",request.getSession().getAttribute("userId"));
else if("部门领导".equals(role))
params.put("bumenlingdaoId",request.getSession().getAttribute("userId"));
else if("财务人员".equals(role))
params.put("caiwurenyuanId",request.getSession().getAttribute("userId"));
else if("人事人员".equals(role))
params.put("renshiId",request.getSession().getAttribute("userId"));
if(params.get("orderBy")==null || params.get("orderBy")==""){
params.put("orderBy","id");
}
PageUtils page = tongzhiService.queryPage(params);
//字典表数据转换
List<TongzhiView> list =(List<TongzhiView>)page.getList();
for(TongzhiView c:list){
//修改对应字典表字段
dictionaryService.dictionaryConvert(c, request);
}
return R.ok().put("data", page);
}
/**
* 后端详情
*/
@RequestMapping("/info/{id}")
public R info(@PathVariable("id") Long id, HttpServletRequest request){
logger.debug("info方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
TongzhiEntity tongzhi = tongzhiService.selectById(id);
if(tongzhi !=null){
//entity转view
TongzhiView view = new TongzhiView();
BeanUtils.copyProperties( tongzhi , view );//把实体数据重构到view中
//修改对应字典表字段
dictionaryService.dictionaryConvert(view, request);
return R.ok().put("data", view);
}else {
return R.error(511,"查不到数据");
}
}
/**
* 后端保存
*/
@RequestMapping("/save")
public R save(@RequestBody TongzhiEntity tongzhi, HttpServletRequest request){
logger.debug("save方法:,,Controller:{},,tongzhi:{}",this.getClass().getName(),tongzhi.toString());
String role = String.valueOf(request.getSession().getAttribute("role"));
if(false)
return R.error(511,"永远不会进入");
Wrapper<TongzhiEntity> queryWrapper = new EntityWrapper<TongzhiEntity>()
.eq("tongzhi_name", tongzhi.getTongzhiName())
.eq("tongzhi_types", tongzhi.getTongzhiTypes())
;
logger.info("sql语句:"+queryWrapper.getSqlSegment());
TongzhiEntity tongzhiEntity = tongzhiService.selectOne(queryWrapper);
if(tongzhiEntity==null){
tongzhi.setInsertTime(new Date());
tongzhi.setCreateTime(new Date());
tongzhiService.insert(tongzhi);
return R.ok();
}else {
return R.error(511,"表中有相同数据");
}
}
/**
* 后端修改
*/
@RequestMapping("/update")
public R update(@RequestBody TongzhiEntity tongzhi, HttpServletRequest request){
logger.debug("update方法:,,Controller:{},,tongzhi:{}",this.getClass().getName(),tongzhi.toString());
String role = String.valueOf(request.getSession().getAttribute("role"));
// if(false)
// return R.error(511,"永远不会进入");
//根据字段查询是否有相同数据
Wrapper<TongzhiEntity> queryWrapper = new EntityWrapper<TongzhiEntity>()
.notIn("id",tongzhi.getId())
.andNew()
.eq("tongzhi_name", tongzhi.getTongzhiName())
.eq("tongzhi_types", tongzhi.getTongzhiTypes())
;
logger.info("sql语句:"+queryWrapper.getSqlSegment());
TongzhiEntity tongzhiEntity = tongzhiService.selectOne(queryWrapper);
if("".equals(tongzhi.getTongzhiPhoto()) || "null".equals(tongzhi.getTongzhiPhoto())){
tongzhi.setTongzhiPhoto(null);
}
if(tongzhiEntity==null){
tongzhiService.updateById(tongzhi);//根据id更新
return R.ok();
}else {
return R.error(511,"表中有相同数据");
}
}
/**
* 删除
*/
@RequestMapping("/delete")
public R delete(@RequestBody Integer[] ids){
logger.debug("delete:,,Controller:{},,ids:{}",this.getClass().getName(),ids.toString());
tongzhiService.deleteBatchIds(Arrays.asList(ids));
return R.ok();
}
/**
* 批量上传
*/
@RequestMapping("/batchInsert")
public R save( String fileName){
logger.debug("batchInsert方法:,,Controller:{},,fileName:{}",this.getClass().getName(),fileName);
try {
List<TongzhiEntity> tongzhiList = new ArrayList<>();//上传的东西
Map<String, List<String>> seachFields= new HashMap<>();//要查询的字段
Date date = new Date();
int lastIndexOf = fileName.lastIndexOf(".");
if(lastIndexOf == -1){
return R.error(511,"该文件没有后缀");
}else{
String suffix = fileName.substring(lastIndexOf);
if(!".xls".equals(suffix)){
return R.error(511,"只支持后缀为xls的excel文件");
}else{
URL resource = this.getClass().getClassLoader().getResource("static/upload/" + fileName);//获取文件路径
File file = new File(resource.getFile());
if(!file.exists()){
return R.error(511,"找不到上传文件，请联系管理员");
}else{
List<List<String>> dataList = PoiUtil.poiImport(file.getPath());//读取xls文件
dataList.remove(0);//删除第一行，因为第一行是提示
for(List<String> data:dataList){
//循环
TongzhiEntity tongzhiEntity = new TongzhiEntity();
// tongzhiEntity.setTongzhiName(data.get(0)); //通知名称 要改的
// tongzhiEntity.setTongzhiPhoto("");//照片
// tongzhiEntity.setTongzhiTypes(Integer.valueOf(data.get(0))); //通知类型 要改的
// tongzhiEntity.setInsertTime(date);//时间
// tongzhiEntity.setTongzhiContent("");//照片
// tongzhiEntity.setCreateTime(date);//时间
tongzhiList.add(tongzhiEntity);
//把要查询是否重复的字段放入map中
}
//查询是否重复
tongzhiService.insertBatch(tongzhiList);
return R.ok();
}
}
}
}catch (Exception e){
return R.error(511,"批量插入数据异常，请联系管理员");
}
}
/**
* 前端列表
*/
@IgnoreAuth
@RequestMapping("/list")
public R list(@RequestParam Map<String, Object> params, HttpServletRequest request){
logger.debug("list方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));
// 没有指定排序字段就默认id倒序
if(StringUtil.isEmpty(String.valueOf(params.get("orderBy")))){
params.put("orderBy","id");
}
PageUtils page = tongzhiService.queryPage(params);
//字典表数据转换
List<TongzhiView> list =(List<TongzhiView>)page.getList();
for(TongzhiView c:list)
dictionaryService.dictionaryConvert(c, request); //修改对应字典表字段
return R.ok().put("data", page);
}
/**
* 前端详情
*/
@RequestMapping("/detail/{id}")
public R detail(@PathVariable("id") Long id, HttpServletRequest request){
logger.debug("detail方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
TongzhiEntity tongzhi = tongzhiService.selectById(id);
if(tongzhi !=null){
//entity转view
TongzhiView view = new TongzhiView();
BeanUtils.copyProperties( tongzhi , view );//把实体数据重构到view中
//修改对应字典表字段
dictionaryService.dictionaryConvert(view, request);
return R.ok().put("data", view);
}else {
return R.error(511,"查不到数据");
}
}
/**
* 前端保存
*/
@RequestMapping("/add")
public R add(@RequestBody TongzhiEntity tongzhi, HttpServletRequest request){
logger.debug("add方法:,,Controller:{},,tongzhi:{}",this.getClass().getName(),tongzhi.toString());
Wrapper<TongzhiEntity> queryWrapper = new EntityWrapper<TongzhiEntity>()
.eq("tongzhi_name", tongzhi.getTongzhiName())
.eq("tongzhi_types", tongzhi.getTongzhiTypes())
;
logger.info("sql语句:"+queryWrapper.getSqlSegment());
TongzhiEntity tongzhiEntity = tongzhiService.selectOne(queryWrapper);
if(tongzhiEntity==null){
tongzhi.setInsertTime(new Date());
tongzhi.setCreateTime(new Date());
tongzhiService.insert(tongzhi);
return R.ok();
}else {
return R.error(511,"表中有相同数据");
}
}
}
PoiUtil.java
package com.utils;
import org.apache.commons.io.FileUtils;
import org.apache.poi.hssf.usermodel.HSSFCell;
import org.apache.poi.hssf.usermodel.HSSFRow;
import org.apache.poi.hssf.usermodel.HSSFSheet;
import org.apache.poi.hssf.usermodel.HSSFWorkbook;
import org.apache.poi.ss.usermodel.Cell;
import java.io.File;
import java.io.FileOutputStream;
import java.util.ArrayList;
import java.util.List;
/**
* 文件导入到处
*/
public class PoiUtil {
/**
* 导入
*
* @param url
* @return
* @throws Exception
*/
public static List<List<String>> poiImport(String url) throws Exception {
List<List<String>> list = new ArrayList<>();
// 创建Excel 读取文件内容
HSSFWorkbook workbook = new HSSFWorkbook(FileUtils.openInputStream(new File(url)));
/**
* 第一种方式读取Sheet页
*/
// HSSFSheet sheet = workbook.getSheet("Sheet0");
/**
* 第二种方式读取Sheet页
*/
HSSFSheet sheet = workbook.getSheetAt(0);//获取工作表
for (int i = 0; i < sheet.getLastRowNum()+1; i++) {
HSSFRow row = sheet.getRow(i);//获取行
List<String> rowlist = new ArrayList<>();//行数据
for (int j = 0; j < row.getLastCellNum(); j++) {
HSSFCell cell = row.getCell(j);
cell.setCellType(Cell.CELL_TYPE_STRING);
String value = cell.getStringCellValue();
rowlist.add(value);//行中数据添加到行中
}
list.add(rowlist);//将行数据添加到list中
}
return list;
}
// 导出
public static void poiExport(List<List<String>> list, String url) throws Exception {
//创建Excel工作薄
HSSFWorkbook workbook = new HSSFWorkbook();
//创建一个工作表shheet
HSSFSheet sheet = workbook.createSheet();
for (int i = 0; i < list.size(); i++) {
HSSFRow row = sheet.createRow(i);
List<String> dataList = list.get(i);
for (int j = 0; j < dataList.size(); j++) {
HSSFCell cell = row.createCell(j);
cell.setCellValue(dataList.get(j));
}
}
FileOutputStream stream = FileUtils.openOutputStream(new File(url));
workbook.write(stream);
stream.close();
}
public static void main(String[] args) {
try {
//导入
List<List<String>> lists = PoiUtil.poiImport("C:/Users/Administrator/Desktop/工作1.xls");
System.out.println();
//导出
PoiUtil.poiExport(lists, "C:/Users/Administrator/Desktop/工作1.xls");
//
// List<List<String>> list = new ArrayList<>();
// ArrayList<String> dataList = new ArrayList<>();
// dataList.add("标题1");
// dataList.add("标题2");
// dataList.add("标题3");
// list.add(dataList);
// // 追加数据
// for (int i = 1; i < 10; i++) {// 这里的int 起始是1 也就是第二行开始
// ArrayList<String> dataList111 = new ArrayList<>();
// dataList111.add("内容" + i);
// dataList111.add("内容1111111121222222222333333333377777777411111111477777777" + i);
// dataList111.add("内容" + i);
// list.add(dataList111);
// }
// PoiUtil.poiExport(list, "C:/Users/Administrator/Desktop/工作1.xls");
} catch (Exception e) {
e.printStackTrace();
}
}
}
CommonServiceImpl.java
package com.service.impl;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.dao.CommonDao;
import com.service.CommonService;
/**
* 系统用户
* @author
* @date
*/
@Service("commonService")
public class CommonServiceImpl implements CommonService {
@Autowired
private CommonDao commonDao;
@Override
public List<String> getOption(Map<String, Object> params) {
return commonDao.getOption(params);
}
@Override
public Map<String, Object> getFollowByOption(Map<String, Object> params) {
return commonDao.getFollowByOption(params);
}
/**
tableName 查询表
condition1 条件1
condition1Value 条件1值
average 计算平均评分
* */
public Map<String, Object> queryScore(Map<String, Object> params){
return commonDao.queryScore(params);
}
@Override
public void sh(Map<String, Object> params) {
commonDao.sh(params);
}
@Override
public int remindCount(Map<String, Object> params) {
return commonDao.remindCount(params);
}
@Override
public Map<String, Object> selectCal(Map<String, Object> params) {
return commonDao.selectCal(params);
}
@Override
public List<Map<String, Object>> selectGroup(Map<String, Object> params) {
return commonDao.selectGroup(params);
}
@Override
public List<Map<String, Object>> selectValue(Map<String, Object> params) {
return commonDao.selectValue(params);
}
@Override
public List<Map<String, Object>> chartBoth(Map<String, Object> params) {
return commonDao.chartBoth(params);
}
@Override
public List<Map<String, Object>> chartOne(Map<String, Object> params) {
return commonDao.chartOne(params);
}
/**
* 新的级联字典表的 分组求和统计
* @param params
* @return
*/
@Override
public List<Map<String, Object>> newSelectGroupSum(Map<String, Object> params) {
return commonDao.newSelectGroupSum(params);
}
/**
* 新的级联字典表的 分组条数统计
* @param params
* @return
*/
@Override
public List<Map<String, Object>> newSelectGroupCount(Map<String, Object> params) {
return commonDao.newSelectGroupCount(params);
}
/**
* 当前表的日期分组求和
* @param params
* @return
*/
@Override
public List<Map<String, Object>> newSelectDateGroupSum(Map<String, Object> params) {
return commonDao.newSelectDateGroupSum(params);
}
/**
* 查询字典表的分组统计总条数
* @param params
* @return
*/
@Override
public List<Map<String, Object>> newSelectDateGroupCount(Map<String, Object> params) {
return commonDao.newSelectDateGroupCount(params);
}
@Override
public int plusCloumNumber(Map<String, Object> params) {
return commonDao.plusCloumNumber(params);
}
@Override
public int reduceCloumNumber(Map<String, Object> params) {
return commonDao.reduceCloumNumber(params);
}
@Override
public int updateCloumValue(Map<String, Object> params) {
return commonDao.updateCloumValue(params);
}
/**
* 饼状图
* -- 饼状图 查询当前表
-- 查询字典表【月】
-- 统计 -- 查询某个月的每个类型的订单销售数量
-- 求和 -- 查询某个月的每个类型的订单销售额
-- 查询某个字符串【月】
-- 统计 -- 查询某个月的每个员工的订单销售数量
-- 求和 -- 查询某个月的每个员工的订单销售额
-- 查询时间【年】
-- 统计 -- 查询每个月的订单销售数量
-- 求和 -- 查询每个月的订单销售额
-- 饼状图 查询级联表
-- 查询字典表
-- 统计 -- 查询某个月的每个类型的订单销售数量
-- 求和 -- 查询某个月的每个类型的订单销售额
-- 查询某个字符串
-- 统计 -- 查询某个月的每个员工的订单销售数量
-- 求和 -- 查询某个月的每个员工的订单销售额
-- 查询时间
-- 统计 -- 统计每个月的订单销售数量
-- 求和 -- 查询每个月的订单销售额
*/
/**
* 柱状图
-- 柱状图 查询当前表
-- 某个【年，月】
-- 当前表 2 级联表 1
-- 统计
-- 【日期，字符串，下拉框】
-- 求和
-- 【日期，字符串，下拉框】
-- 柱状图 查询级联表
-- 某个【年，月】
-- 统计
-- 【日期，字符串，下拉框】
-- 求和
-- 【日期，字符串，下拉框】
*/
/**
* 柱状图求和
* @param params
* @return
*/
public List<Map<String, Object>> barSum(Map<String, Object> params){
return commonDao.barSum(params);
}
/**
* 柱状图统计
* @param params
* @return
*/
public List<Map<String, Object>> barCount(Map<String, Object> params){
return commonDao.barCount(params);
}
}
list.vue
<template>
<div class="main-content">
<!-- 列表页 -->
<div v-if="showFlag">
<el-form :inline="true" :model="searchForm" class="form-content">
<el-row :gutter="20" class="slt" :style="{justifyContent:contents.searchBoxPosition=='1'?'flex-start':contents.searchBoxPosition=='2'?'center':'flex-end'}">
<el-form-item label="新闻类型">
<el-input prefix-icon="el-icon-search" v-model="searchForm.indexNameSearch" placeholder="新闻类型" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-search" type="success" @click="search()">查询</el-button>
</el-form-item>
</el-row>
<el-row class="ad" :style="{justifyContent:contents.btnAdAllBoxPosition=='1'?'flex-start':contents.btnAdAllBoxPosition=='2'?'center':'flex-end'}">
<el-form-item>
<el-button
v-if="isAuth('dictionaryNews','新增')"
type="success"
icon="el-icon-plus"
@click="addOrUpdateHandler()"
>新增</el-button>
<el-button
v-if="isAuth('dictionaryNews','删除')"
:disabled="dataListSelections.length <= 0"
type="danger"
icon="el-icon-delete"
@click="deleteHandler()"
>删除</el-button>
</el-form-item>
</el-row>
</el-form>
<div class="table-content">
<el-table class="tables" :size="contents.tableSize" :show-header="contents.tableShowHeader"
:header-row-style="headerRowStyle" :header-cell-style="headerCellStyle"
:border="contents.tableBorder"
:fit="contents.tableFit"
:stripe="contents.tableStripe"
:row-style="rowStyle"
:cell-style="cellStyle"
:style="{width: '100%',fontSize:contents.tableContentFontSize,color:contents.tableContentFontColor}"
v-if="isAuth('dictionaryNews','查看')"
:data="dataList"
v-loading="dataListLoading"
@selection-change="selectionChangeHandler">
<el-table-column v-if="contents.tableSelection"
type="selection"
header-align="center"
align="center"
width="50">
</el-table-column>
<el-table-column label="索引" v-if="contents.tableIndex" type="index" width="50" />
<el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
prop="codeIndex"
header-align="center"
label="新闻类型编码">
<template slot-scope="scope">
{{scope.row.codeIndex}}
</template>
</el-table-column>
<el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
prop="indexName"
header-align="center"
label="新闻类型名称">
<template slot-scope="scope">
{{scope.row.indexName}}
</template>
</el-table-column>
<!--<el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
prop="beizhu"
header-align="center"
label="备注">
<template slot-scope="scope">
{{scope.row.beizhu}}
</template>
</el-table-column>-->
<el-table-column width="300" :align="contents.tableAlign"
header-align="center"
label="操作">
<template slot-scope="scope">
<el-button v-if="isAuth('dictionaryNews','查看')" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">详情</el-button>
<el-button v-if="isAuth('dictionaryNews','修改')" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">修改</el-button>
<el-button v-if="isAuth('dictionaryNews','删除')" type="danger" icon="el-icon-delete" size="mini" @click="deleteHandler(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
clsss="pages"
:layout="layouts"
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="Number(contents.pageEachNum)"
:total="totalPage"
:small="contents.pageStyle"
class="pagination-content"
:background="contents.pageBtnBG"
:style="{textAlign:contents.pagePosition==1?'left':contents.pagePosition==2?'center':'right'}"
></el-pagination>
</div>
</div>
<!-- 添加/修改页面 将父组件的search方法传递给子组件-->
<add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>
</div>
</template>
<script>
import AddOrUpdate from "./add-or-update";
import styleJs from "../../../utils/style.js";
export default {
data() {
return {
searchForm: {
key: ""
},
form:{},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
showFlag: true,
sfshVisiable: false,
shForm: {},
chartVisiable: false,
addOrUpdateFlag:false,
contents:null,
layouts: '',
};
},
created() {
this.contents = styleJs.listStyle();
this.init();
this.getDataList();
this.contentStyleChange()
},
mounted() {
},
filters: {
htmlfilter: function (val) {
return val.replace(/<[^>]*>/g).replace(/undefined/g,'');
}
},
components: {
AddOrUpdate,
},
methods: {
contentStyleChange() {
this.contentSearchStyleChange()
this.contentBtnAdAllStyleChange()
this.contentSearchBtnStyleChange()
this.contentTableBtnStyleChange()
this.contentPageStyleChange()
},
contentSearchStyleChange() {
this.$nextTick(()=>{
document.querySelectorAll('.form-content .slt .el-input__inner').forEach(el=>{
let textAlign = 'left'
if(this.contents.inputFontPosition == 2) textAlign = 'center'
if(this.contents.inputFontPosition == 3) textAlign = 'right'
el.style.textAlign = textAlign
el.style.height = this.contents.inputHeight
el.style.lineHeight = this.contents.inputHeight
el.style.color = this.contents.inputFontColor
el.style.fontSize = this.contents.inputFontSize
el.style.borderWidth = this.contents.inputBorderWidth
el.style.borderStyle = this.contents.inputBorderStyle
el.style.borderColor = this.contents.inputBorderColor
el.style.borderRadius = this.contents.inputBorderRadius
el.style.backgroundColor = this.contents.inputBgColor
})
if(this.contents.inputTitle) {
document.querySelectorAll('.form-content .slt .el-form-item__label').forEach(el=>{
el.style.color = this.contents.inputTitleColor
el.style.fontSize = this.contents.inputTitleSize
el.style.lineHeight = this.contents.inputHeight
})
}
setTimeout(()=>{
document.querySelectorAll('.form-content .slt .el-input__prefix').forEach(el=>{
el.style.color = this.contents.inputIconColor
el.style.lineHeight = this.contents.inputHeight
})
document.querySelectorAll('.form-content .slt .el-input__suffix').forEach(el=>{
el.style.color = this.contents.inputIconColor
el.style.lineHeight = this.contents.inputHeight
})
document.querySelectorAll('.form-content .slt .el-input__icon').forEach(el=>{
el.style.lineHeight = this.contents.inputHeight
})
},10)
})
},
// 搜索按钮
contentSearchBtnStyleChange() {
this.$nextTick(()=>{
document.querySelectorAll('.form-content .slt .el-button--success').forEach(el=>{
el.style.height = this.contents.searchBtnHeight
el.style.color = this.contents.searchBtnFontColor
el.style.fontSize = this.contents.searchBtnFontSize
el.style.borderWidth = this.contents.searchBtnBorderWidth
el.style.borderStyle = this.contents.searchBtnBorderStyle
el.style.borderColor = this.contents.searchBtnBorderColor
el.style.borderRadius = this.contents.searchBtnBorderRadius
el.style.backgroundColor = this.contents.searchBtnBgColor
})
})
},
// 新增、批量删除
contentBtnAdAllStyleChange() {
this.$nextTick(()=>{
document.querySelectorAll('.form-content .ad .el-button--success').forEach(el=>{
el.style.height = this.contents.btnAdAllHeight
el.style.color = this.contents.btnAdAllAddFontColor
el.style.fontSize = this.contents.btnAdAllFontSize
el.style.borderWidth = this.contents.btnAdAllBorderWidth
el.style.borderStyle = this.contents.btnAdAllBorderStyle
el.style.borderColor = this.contents.btnAdAllBorderColor
el.style.borderRadius = this.contents.btnAdAllBorderRadius
el.style.backgroundColor = this.contents.btnAdAllAddBgColor
})
document.querySelectorAll('.form-content .ad .el-button--danger').forEach(el=>{
el.style.height = this.contents.btnAdAllHeight
el.style.color = this.contents.btnAdAllDelFontColor
el.style.fontSize = this.contents.btnAdAllFontSize
el.style.borderWidth = this.contents.btnAdAllBorderWidth
el.style.borderStyle = this.contents.btnAdAllBorderStyle
el.style.borderColor = this.contents.btnAdAllBorderColor
el.style.borderRadius = this.contents.btnAdAllBorderRadius
el.style.backgroundColor = this.contents.btnAdAllDelBgColor
})
document.querySelectorAll('.form-content .ad .el-button--warning').forEach(el=>{
el.style.height = this.contents.btnAdAllHeight
el.style.color = this.contents.btnAdAllWarnFontColor
el.style.fontSize = this.contents.btnAdAllFontSize
el.style.borderWidth = this.contents.btnAdAllBorderWidth
el.style.borderStyle = this.contents.btnAdAllBorderStyle
el.style.borderColor = this.contents.btnAdAllBorderColor
el.style.borderRadius = this.contents.btnAdAllBorderRadius
el.style.backgroundColor = this.contents.btnAdAllWarnBgColor
})
})
},
// 表格
rowStyle({ row, rowIndex}) {
if (rowIndex % 2 == 1) {
if(this.contents.tableStripe) {
return {color:this.contents.tableStripeFontColor}
}
} else {
return ''
}
},
cellStyle({ row, rowIndex}){
if (rowIndex % 2 == 1) {
if(this.contents.tableStripe) {
return {backgroundColor:this.contents.tableStripeBgColor}
}
} else {
return ''
}
},
headerRowStyle({ row, rowIndex}){
return {color: this.contents.tableHeaderFontColor}
},
headerCellStyle({ row, rowIndex}){
return {backgroundColor: this.contents.tableHeaderBgColor}
},
// 表格按钮
contentTableBtnStyleChange(){
},
// 分页
contentPageStyleChange(){
let arr = []
if(this.contents.pageTotal) arr.push('total')
if(this.contents.pageSizes) arr.push('sizes')
if(this.contents.pagePrevNext){
arr.push('prev')
if(this.contents.pagePager) arr.push('pager')
arr.push('next')
}
if(this.contents.pageJumper) arr.push('jumper')
this.layouts = arr.join()
this.contents.pageEachNum = 10
},
init () {
},
search() {
this.pageIndex = 1;
this.getDataList();
},
// 获取数据列表
getDataList() {
this.dataListLoading = true;
let params = {
page: this.pageIndex,
limit: this.pageSize,
sort: 'id',
}
if(this.searchForm.indexNameSearch!='' && this.searchForm.indexNameSearch!=undefined){
params['indexName'] = this.searchForm.indexNameSearch
}
//本表的
params['dicCode'] = "news_types"//编码名字
params['dicName'] = "新闻类型",//汉字名字
this.$http({
url: "dictionary/page",
method: "get",
params: params
}).then(({ data }) => {
if (data && data.code === 0) {
this.dataList = data.data.list;
this.totalPage = data.data.total;
} else {
this.dataList = [];
this.totalPage = 0;
}
this.dataListLoading = false;
});
},
// 每页数
sizeChangeHandle(val) {
this.pageSize = val;
this.pageIndex = 1;
this.getDataList();
},
// 当前页
currentChangeHandle(val) {
this.pageIndex = val;
this.getDataList();
},
// 多选
selectionChangeHandler(val) {
this.dataListSelections = val;
},
// 添加/修改
addOrUpdateHandler(id,type) {
this.showFlag = false;
this.addOrUpdateFlag = true;
this.crossAddOrUpdateFlag = false;
if(type!='info'){
type = 'else';
}
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id,type);
});
},
// 删除
deleteHandler(id) {
var ids = id
? [Number(id)]
: this.dataListSelections.map(item => {
return Number(item.id);
});
this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.$http({
url: "dictionary/delete",
method: "post",
data: ids
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.search();
}
});
} else {
this.$message.error(data.msg);
}
});
});
},
}
};
</script>
<style lang="scss" scoped>
.slt {
margin: 0 !important;
display: flex;
}
.ad {
margin: 0 !important;
display: flex;
}
.pages {
& /deep/ el-pagination__sizes{
& /deep/ el-input__inner {
height: 22px;
line-height: 22px;
}
}
}
.el-button+.el-button {
margin:0;
}
.tables {
& /deep/ .el-button--success {
height: 40px;
color: rgba(88, 84, 84, 1);
font-size: 10px;
border-width: 1px;
border-style: solid;
border-color: #DCDFE6;
border-radius: 20px;
background-color: rgba(153, 204, 51, 1);
}
& /deep/ .el-button--primary {
height: 40px;
color: rgba(91, 87, 87, 1);
font-size: 10px;
border-width: 1px;
border-style: solid;
border-color: #DCDFE6;
border-radius: 20px;
background-color: rgba(255, 255, 102, 1);
}
& /deep/ .el-button--danger {
height: 40px;
color: rgba(255, 255, 255, 1);
font-size: 10px;
border-width: 1px;
border-style: solid;
border-color: #DCDFE6;
border-radius: 20px;
background-color: rgba(51, 102, 0, 1);
}
& /deep/ .el-button {
margin: 4px;
}
}
</style>
声明
本博客适用于广泛的学术和教育用途，包括但不限于个人学习、开发设计，产品设计。仅供学习参考，旨在为读者提供深入理解和学术研究的材料。
扫一扫
580
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
