如何使用ssm实现基于web技术的税务门户网站的实现+vue

news2024/11/22 12:02:10

@TOC

ssm820基于web技术的税务门户网站的实现+vue

绪论

1.1 研究背景

当前社会各行业领域竞争压力非常大,随着当前时代的信息化,科学化发展,让社会各行业领域都争相使用新的信息技术,对行业内的各种相关数据进行科学化,规范化管理。这样的大环境让那些止步不前,不接受信息改革带来的信息技术的企业随时面临被淘汰,被取代的风险。所以当今,各个行业领域,不管是传统的教育行业,餐饮行业,还是旅游行业,医疗行业等领域都将使用新的信息技术进行信息革命,改变传统的纸质化,需要人手工处理工作事务的办公环境。软件信息技术能够覆盖社会各行业领域是时代的发展要求,各种数据以及文件真正实现电子化是信息社会发展的不可逆转的必然趋势。本税务门户网站也是紧跟科学技术的发展,运用当今一流的软件技术实现软件系统的开发,让考试信息完全通过管理系统实现科学化,规范化,程序化管理。从而帮助信息管理者节省事务处理的时间,降低数据处理的错误率,对于基础数据的管理水平可以起到促进作用,也从一定程度上对随意的业务管理工作进行了避免,同时,税务门户网站的数据库里面存储的各种动态信息,也为上层管理人员作出重大决策提供了大量的事实依据。总之,税务门户网站是一款可以真正提升管理者的办公效率的软件系统。

1.2 目的和意义

信息数据的处理完全依赖人工进行操作,会耗费大量的人工成本,特别是面对大量的数据信息时,传统人工操作不仅不能对数据的出错率进行保证,还容易出现各种信息资源的低利用率与低安全性问题。更有甚者,耽误大量的宝贵时间,尤其是对信息的更新,归纳与统计更是耗财耗力的过程。所以电子化信息管理的出现就能缓解以及改变传统人工方式面临的处境,一方面可以确保信息数据在短时间被高效处理,还能节省人力成本,另一方面可以确保信息数据的安全性,可靠性,并可以实现信息数据的快速检索与修改操作,这些优点是之前的旧操作模式无法比拟的。因此税务门户网站为数据信息的管理模式的升级与改革提供了重要的窗口。

1.3 论文结构安排

为了帮助用户更好的了解和理解程序的开发流程与相关内容,本文将通过六个章节进行内容阐述。

第一章:描述了程序的开发背景,程序运用于现实生活的目的与意义,以及程序文档的结构安排信息;

第二章:描述了程序的开发环境,包括程序开发涉及到的技术,程序开发使用的数据存储工具等信息;

第三章:描述了程序着手进行开发时,会面临的可行性问题,并对程序功能以及性能要求进行描述;

第四章:描述了程序大功能模块下的功能细分信息,以及存储程序数据的数据库表文件结构的设计信息等;

第五章:描述了程序的功能实现界面的内容,也对程序操作人员操作的部分功能进行了描述;

第六章:描述了程序功能的测试内容,并介绍了系统测试的概念与方法。

2 相关技术

2.1 SSM框架介绍

本课题程序开发使用到的框架技术,英文名称缩写是SSM,在JavaWeb开发中使用的流行框架有SSH、SSM、SpringMVC等,作为一个课题程序采用SSH框架也可以,SSM框架也可以,SpringMVC也可以。SSH框架是属于重量级别的框架,配置繁琐,不够灵活,修改程序需要修改好多个文件,并且运行起来也占用内存较高,CPU使用率相对也高,SpringMVC是Spring开发的一套MVC架构,更灵活更好用,SSM框架取中间值,既没有SSH臃肿,也没有SpringMVC简化,属于中间级别的,在配置过程和使用过程中更能编写和理解。MyBatis框架取代Hibernate框架是因为它更灵活,不需要完全在框架里操作,它在数据操作上可以写出更灵活的代码,它的性能也比Hibernate框架更稳定。总的来说,使用SSM框架是通过综合考虑而使用的,网上有很多的使用教程和心得体会,而且SSM又是这么的流行,用SSM框架开发是顺其自然的。

2.2 B/S结构介绍

在早期,一些使用HTML语言编写的文件,再集合一些其它资源文件就可以组成一个最简单的Web程序,了解了Web程序也需要了解Web站点,它们之间的关系就是一个或者多个Web程序可以放在Internet上的一个Web站点(Web服务器)中进行使用。可以说Web应用程序的开发也带动了B/S这种网络结构模式的兴起。B是Brower(浏览器)的首字母,S是Server(服务器)的首字母,两个首字母进行组合就成了网络结构模式的简称B/S。由于这种结构模式通过安装在客户端的浏览器进行服务器的访问,可以把程序的核心功能安排在服务器中进行处理,给程序的开发,后期使用和维护省去了许多工作。图2.2展示的就是使用这种架构开发的程序的工作原理。

图2.2 B/S架构的工作原理图

2.3 Mysql数据库介绍

开发的程序面向用户的只是程序的功能界面,让用户操作程序界面的各个功能,那么很多人就会问,用户使用程序功能生成的数据信息放在哪里的?这个就需要涉及到数据库的知识了,一般来说,程序开发通常就会对常用数据存储工具的特点进行分析比对,比如Mysql数据库的特点与优势,Access数据库的特点与优势,Sqlserver数据库的特点与优势等,最终看哪个数据库与需要开发的程序比较匹配,也符合程序功能运行需要的数据存储要求,比如,需要开发商业级别的程序,存储的数据对数据库要求较高,可以选用Oracle,如果只是比较简单的程序,对数据存储没有过多要求,可以选用微软旗下的Access,当开发程序要求数据库占用空间小,并能满足程序数据存储要求时,就可以考虑Oracle公司从瑞典MySQL AB公司在很早之前就收购过一个关系型数据库,它是现在的Mysql数据库。在数据库工具里面它是最受认可的其中一个应用软件。需要说明的信息就是,本程序的开发就运用到了此数据库。它将程序数据通过使用不同的数据表格进行保存,在增加了程序数据的存储速度的时候,也提高了数据库的灵活性。 图2.3展示的就是MySQL的架构图。

图2.3 MySQL数据库架构图

3 系统分析

当用户确定开发一款程序时,是需要遵循下面的顺序进行工作,概括为:系统分析-->系统设计-->系统开发-->系统测试,无论这个过程是否有变更或者迭代,都是按照这样的顺序开展工作的。系统分析就是分析系统需要做什么的问题,主要目的就是确定系统的功能,这也为接下来的工作做了一个好的开端。

3.1 系统可行性分析

开发一款程序软件不仅需要时间,也需要人力,物力资源。而进行可行性分析这个环节就是解决用户这方面的疑问,看看程序在当前的条件下是否可以进行开发。

3.1.1 技术可行性分析

此程序选用的开发语言是Java,这种编程语言有着丰富的数据类型,在指令控制语句上也比较完善,更重要的就是对类与对象的大力支持,这些优点为程序开发者提供了技术保障,尤其是现在代码都逐渐模块化,有关系统功能开发的源码在网络上都公开展示了,所以让具备一定计算机开发基础的开发人员独立开发系统在技术上也逐渐容易。

3.1.2 经济可行性分析

开发此程序最关键的设备就是一台电脑,无论是学校计算机室配备的电脑,还是自己入学以来购置的笔记本,都是可以符合开发要求的设备,另外在网络上,学校本已完全覆盖了校园网,所以在设备以及网络上无须考虑经济问题。

3.1.3 运行可行性分析

随着电脑软件以及配套硬件的完善升级,当下的计算机环境是一片大好,尤其是计算机已经广泛普及到家家户户,所以计算机设备现在是随处可见,由于本次开发的程序占有的资源耗费较小,在一般的电脑或笔记本上都能轻松运转起来。

通过上面的可行性描述,可以从经济,技术,运行方面解决程序开发是否可行的问题。因此可以认为该程序软件是可以进行开发的。

3.2 系统性能分析

系统性能分析也是比较重要的内容,进行系统性能分析就是为了确保系统的功能要能够在生活中运行使用时,达到规定的指标,因此一个完整的系统软件,是需要进行系统的性能分析这个步骤的。本次进行性能分析主要从易用性指标,可扩展性指标,系统健壮性指标,系统安全性指标这几个方面进行分析。

3.2.1 易用性指标

本次程序软件的开发的目的就是让使用者可以通过使用该软件提高信息数据的管理效率,同时该程序软件也需要针对不同的操作用户设置对应的功能,因此,此程序的操作流程应该尽量与用户日常操作软件的行为习惯相贴合,另外,程序软件的设计与开发也应考虑非计算机专业用户的计算机操作水平,要让大部分使用者都可以轻松操作程序提供的各个功能。

3.2.2 可扩展性指标

当前需要开发的程序软件是根据当下的用户需求进行设计开发的,但是随着时间的推移,社会大环境的改变,开发出的程序也是需要与时俱进的,需要根据用户不断变换的需求进行相应的功能内容的扩展,需要注意的就是,当对成型的程序进行功能模块新增时,仍然需要保证程序原有架构以及功能不能受到影响,新增的功能模块在系统中也能够运行正常,该指标达标也就可以保证此程序是可以在满足信息管理要求下,从容应对市场环境的变化。

3.2.3 健壮性指标

程序软件的开发就是为了投入使用时,可以一直稳定的处理各种数据信息,程序软件一旦不稳定,也会给使用者带来干扰。因此从性能分析的角度,就要要求程序软件在应对使用者的误操作,或者是使用者因为各种原因,填写有误的数据等情况时,程序要一直保持稳定,并能够正常让使用者进行使用。当程序的某个功能模块出现异常时,程序的其它功能模块也要能够确保正常使用。程序的健壮性指标达标可以让使用者产生良好的用户体验。

3.2.4 安全性指标

程序软件的安全问题是首要问题,毕竟程序对应数据库里面存放的数据信息是庞大的,里面也包括了许多重要的个人信息,这就对程序要具备一个完善的安全机制提出了要求。因此程序必须要设置登录功能用以进行用户身份的检查,以及身份和权限的匹配,通过对不同用户身份进行功能约束,绝不容忍用户越权操作程序。另外,也需要时刻防范计算机病毒,还有黑客,通过采取针对性的办法进行安全应对,确保程序时刻处于安全的环境,让使用者放心使用。

3.3 系统流程分析

3.3.1 操作流程分析

程序上交给用户进行使用时,需要提供程序的操作流程图(如图3.1所示),这样便于用户容易理解程序的具体工作步骤,现如今程序的操作流程都有一个大致的标准,即先通过登录页面提交登录数据,通过程序验证正确之后,用户才能在程序功能操作区页面操作对应的功能。

图3.1 程序操作流程图

3.3.2 登录流程分析

在这个部分,需要对程序的登录功能模块的运行流程(如图3.2所示),进行单独说明。程序设置登录模块也是为了安全起见,让用户使用放心,登录模块主要就是让用户提交登录信息,程序进行数据验证,验证通过的用户才能够成功登录程序。

图3.2 程序登录流程图

3.3.3 信息添加流程分析

程序的添加功能就是提供给操作者录入信息的功能,不管是涉及到用户信息添加,还是其它功能模块涉及到的信息添加,程序的信息添加流程(如图3.3所示)都是一致的。程序都是先对操作者录入的数据进行判定,这个判定规则是一段提前编写完成的程序代码,当程序判定数据符合要求时,才会把操作者录入的数据登记在数据表里面,比如添加的用户信息,就会把新添加的用户信息写入用户信息的数据表文件里面。

图3.3 信息添加流程图

3.3.4 信息删除流程分析

当从程序里面删除某种无效数据时,遵循程序的信息删除流程(如图3.4所示),先要选中操作者需要删除的数据,程序为了预防操作者误删信息,也会进行提示,当操作者真正确定要删选中的信息时,该信息就会从数据库中被永久删除。

图3.4 信息删除流程图

3.4 系统功能分析

程序功能需要花费一定时间进行分析与设计,需要从大量的参考资料或者是社会上同种类型的程序中吸收对此程序开发有用的知识,可以将其它同类型程序中的合理功能部分规划到此程序里面,另外程序功能也需要针对用户的需求进行分析与设计。

4 系统设计

4.1 总体功能

税务门户网站是根据需求定制开发,开发软件选用Myeclipse平台配合MySQL数据库进行开发环境的搭建操作,网站采用WEB应用程序中最流行的B/S结构进行开发,用户访问系统数据仅仅需要在客户端安装谷歌浏览器或者是当下常用浏览器就可以访问网站内容。

4.2 系统概要设计

本次拟开发的系统为了节约开发成本,也为了后期在维护和升级上的便利性,打算通过浏览器来实现系统功能界面的展示,让程序软件的主要事务集中在后台的服务器端处理,前端部分只用处理少量的事务逻辑。下面使用一张图(如图4.2所示)来说明程序的工作原理。

图4.2 程序工作的原理图

4.3 系统功能结构设计

在分析并得出使用者对程序的功能要求时,就可以进行程序设计了。如图4.3展示的就是管理员功能结构图,管理员在后台主要管理客服聊天管理、单位信息管理、字典管理、通知通知公告管理、留言板管理、纳税服务投诉管理、新闻信息管理、人事任免管理、税务欠款管理、违法税收检举管理、意见征集管理、用户管理、政策文件管理、政策文件收藏管理、政策解读管理、政策解读收藏管理、管理员管理等。

税务门户网站

系个人信息管理

管用户管理

管单位信息管理

管新闻管理

大人事任免管理

修个人信息修改

修改密码

新人事任免新增

是人事任免修改

删人事任免删除

删新闻删除

新闻新增

新闻修改

删用户删除

新用户新增

修用户修改

用单位信息新增

用单位信息修改

用单位信息删除

管通知公告管理

新通知公告新增

吸通知公告修改

删通知公告删除

图4.3 管理员功能结构图

4.4 数据库设计

开发一个系统也需要提前设计数据库。这里的数据库是相关数据的集合,存储在一起的这些数据也是按照一定的组织方式进行的。目前,数据库能够服务于多种应用程序,则是源于它存储方式最佳,具备数据冗余率低的优势。虽然数据库为程序提供信息存储服务,但它与程序之间也可以保持较高的独立性。总而言之,数据库经历了很长一段时间的发展,从最初的不为人知,到现在的人尽皆知,其相关技术也越发成熟,同时也拥有着坚实的理论基础。

4.4.1 数据库概念设计

这部分内容需要借助数据库关系图来完成,也需要使用专门绘制数据库关系图的工具,比如Visio工具就可以设计E-R图(数据库关系图)。设计数据库,也需要按照设计的流程进行,首先还是要根据需求完成实体的确定,分析实体具有的特征,还有对实体间的关联关系进行确定。最后才是使用E-R模型的表示方法,绘制本系统的E-R图。不管是使用亿图软件,还是Visio工具,对于E-R模型的表示符号都一样,通常矩形代表实体,实体间存在的关系用菱形符号表示,实体的属性也就是实体的特征用符号椭圆表示。最后使用直线将矩形,菱形和椭圆等符号连接起来。接下来就开始对本系统的E-R图进行绘制。

(1)下图是用户实体和其具备的属性。

C:\Users\Administrator\Desktop\img\shuiwumenhuwangzhan\用户.jpg 图4.1 用户实体属性图

(2)下图是通知公告实体和其具备的属性。

C:\Users\Administrator\Desktop\img\shuiwumenhuwangzhan\通知公告.jpg 图4.2 通知公告实体属性图

(3)下图是政策文件收藏实体和其具备的属性。

C:\Users\Administrator\Desktop\img\shuiwumenhuwangzhan\政策文件收藏.jpg 图4.3 政策文件收藏实体属性图

(4)下图是纳税服务投诉实体和其具备的属性。

C:\Users\Administrator\Desktop\img\shuiwumenhuwangzhan\纳税服务投诉.jpg 图4.4 纳税服务投诉实体属性图

(5)下图是意见征集实体和其具备的属性。

C:\Users\Administrator\Desktop\img\shuiwumenhuwangzhan\意见征集.jpg 图4.5 意见征集实体属性图

(6)下图是政策文件实体和其具备的属性。

C:\Users\Administrator\Desktop\img\shuiwumenhuwangzhan\政策文件.jpg 图4.6 政策文件实体属性图

(7)下图是政策解读实体和其具备的属性。

C:\Users\Administrator\Desktop\img\shuiwumenhuwangzhan\政策解读.jpg 图4.7 政策解读实体属性图

(8)下图是税务欠款实体和其具备的属性。

C:\Users\Administrator\Desktop\img\shuiwumenhuwangzhan\税务欠款.jpg 图4.8 税务欠款实体属性图

(9)下图是新闻信息实体和其具备的属性。

C:\Users\Administrator\Desktop\img\shuiwumenhuwangzhan\新闻信息.jpg 图4.9 新闻信息实体属性图

(10)下图是政策解读收藏实体和其具备的属性。

C:\Users\Administrator\Desktop\img\shuiwumenhuwangzhan\政策解读收藏.jpg 图4.10 政策解读收藏实体属性图

(11)下图是客服聊天实体和其具备的属性。

C:\Users\Administrator\Desktop\img\shuiwumenhuwangzhan\客服聊天.jpg 图4.11 客服聊天实体属性图

(12)下图是留言板实体和其具备的属性。

C:\Users\Administrator\Desktop\img\shuiwumenhuwangzhan\留言板.jpg 图4.12 留言板实体属性图

(13)下图是单位信息实体和其具备的属性。

C:\Users\Administrator\Desktop\img\shuiwumenhuwangzhan\单位信息.jpg 图4.13 单位信息实体属性图

(14)下图是违法税收检举实体和其具备的属性。

C:\Users\Administrator\Desktop\img\shuiwumenhuwangzhan\违法税收检举.jpg 图4.14 违法税收检举实体属性图

(15)下图是人事任免实体和其具备的属性。

C:\Users\Administrator\Desktop\img\shuiwumenhuwangzhan\人事任免.jpg 图4.15 人事任免实体属性图

4.4.2 数据库表结构设计

数据库系统一旦选定之后,需要根据程序要求在数据库中建立数据库文件,并在已经完成创建的数据库文件里面,为程序运行中产生的数据建立对应的数据表格,数据表结构设计就是对创建的数据表格进行字段设计,字段长度设计,字段类型设计等,当数据表格合理设计完成之后,才能正常存储相关程序运行产生的数据信息。

表4.1客服聊天表

序号列名数据类型说明允许空
1IdIntid
2yonghu_idInteger提问用户
3chat_issueString问题
4issue_timeDate问题时间
5chat_replyString回复
6reply_timeDate回复时间
7zhuangtai_typesInteger状态
8chat_typesInteger数据类型
9insert_timeDate创建时间

表4.2单位信息表

序号列名数据类型说明允许空
1IdIntid
2danweixinxi_nameString单位名称
3danweixinxi_typesInteger单位类型
4danweixinxi_photoString单位图片
5danweixinxi_addressString单位位置
6danweixinxi_numberInteger单位人数
7danweixinxi_contentString单位介绍
8insert_timeDate单位信息发布时间
9create_timeDate创建时间

表4.3字典表

序号列名数据类型说明允许空
1IdIntid
2dic_codeString字段
3dic_nameString字段名
4code_indexInteger编码
5index_nameString编码名字
6super_idInteger父字段id
7beizhuString备注
8create_timeDate创建时间

表4.4通知公告表

序号列名数据类型说明允许空
1IdIntid
2gonggao_nameString通知公告名称
3gonggao_photoString通知公告图片
4gonggao_typesInteger通知公告类型
5insert_timeDate通知公告发布时间
6gonggao_contentString通知公告详细内容
7create_timeDate创建时间

表4.5留言板表

序号列名数据类型说明允许空
1IdIntid
2yonghu_idInteger用户
3liuyan_nameString留言标题
4liuyan_textString留言内容
5insert_timeDate留言时间
6reply_textString回复内容
7update_timeDate回复时间
8create_timeDate创建时间

表4.6纳税服务投诉表

序号列名数据类型说明允许空
1IdIntid
2yonghu_idInteger用户
3nashuifuwutousu_nameString纳税服务投诉名称
4nashuifuwutousu_uuid_numberString纳税服务投诉编号
5nashuifuwutousu_photoString纳税服务投诉证据文件
6nashuifuwutousu_typesInteger纳税服务投诉类型
7nashuifuwutousu_textString纳税服务投诉内容
8insert_timeDate投诉时间
9nashuifuwutousu_chuli_typesInteger状态
10nashuifuwutousu_chuli_textString处理结果
11update_timeDate回复时间
12create_timeDate创建时间

表4.7新闻信息表

序号列名数据类型说明允许空
1IdIntid
2news_nameString新闻名称
3news_photoString新闻图片
4news_typesInteger新闻类型
5insert_timeDate新闻发布时间
6news_contentString新闻详情
7create_timeDate创建时间

表4.8人事任免表

序号列名数据类型说明允许空
1IdIntid
2renshirenmian_nameString人事任免标题
3renshirenmian_typesInteger人事任免类型
4renshirenmian_photoString人事任免图片
5renshirenmian_xingmingString姓名
6renshirenmian_yuanzhiweiString原职位
7renshirenmian_xianzhiweiString现职位
8renshirenmian_contentString人事任免详细内容
9insert_timeDate人事任免发布时间
10create_timeDate创建时间

表4.9税务欠款表

序号列名数据类型说明允许空
1IdIntid
2yonghu_idInteger用户
3shuiwuqiankuan_uuid_numberString税务欠款编号
4shuiwuqiankuan_nameString税务欠款名称
5shuiwuqiankuan_typesInteger税务欠款类型
6shuiwuqiankuan_textString欠款缘由
7shuiwuqiankuan_new_moneyBigDecimal欠款金额
8insert_timeDate通知时间
9jiaofei_typesInteger是否缴费
10create_timeDate创建时间

表4.10违法税收检举表

序号列名数据类型说明允许空
1IdIntid
2yonghu_idInteger用户
3weifashuishou_nameString违法税收检举名称
4weifashuishou_uuid_numberString违法税收检举编号
5weifashuishou_photoString违法税收检举证据文件
6weifashuishou_typesInteger违法税收检举类型
7weifashuishou_textString违法税收检举内容
8insert_timeDate检举时间
9weifashuishou_chuli_typesInteger状态
10weifashuishou_chuli_textString处理结果
11update_timeDate回复时间
12create_timeDate创建时间

表4.11意见征集表

序号列名数据类型说明允许空
1IdIntid
2yonghu_idInteger用户
3yijianzhengji_nameString意见征集名称
4yijianzhengji_uuid_numberString意见征集编号
5yijianzhengji_photoString意见征集文件
6yijianzhengji_typesInteger意见征集类型
7yijianzhengji_textString意见征集内容
8insert_timeDate上传时间
9yijianzhengji_chuli_typesInteger状态
10yijianzhengji_chuli_textString回复结果
11update_timeDate回复时间
12create_timeDate创建时间

表4.12用户表

序号列名数据类型说明允许空
1IdIntid
2yonghu_nameString用户姓名
3yonghu_phoneString用户手机号
4yonghu_id_numberString用户身份证号
5yonghu_photoString用户头像
6yonghu_emailString电子邮箱
7new_moneyBigDecimal余额
8create_timeDate创建时间

表4.13政策文件表

序号列名数据类型说明允许空
1IdIntid
2zhegncewenjian_nameString政策文件名称
3zhegncewenjian_uuid_numberString政策文件编号
4zhegncewenjian_photoString政策文件照片
5zhegncewenjian_fileString文件
6zhegncewenjian_typesInteger政策文件类型
7zhegncewenjian_clicknumInteger政策文件热度
8zhegncewenjian_contentString政策文件内容
9shangxia_typesInteger是否上架
10zhegncewenjian_deleteInteger逻辑删除
11fabu_timeDate发布时间
12zhixing_timeDate执行时间
13create_timeDate创建时间

表4.14政策文件收藏表

序号列名数据类型说明允许空
1IdIntid
2zhegncewenjian_idInteger政策文件
3yonghu_idInteger用户
4zhegncewenjian_collection_typesInteger类型
5insert_timeDate收藏时间
6create_timeDate创建时间

表4.15政策解读表

序号列名数据类型说明允许空
1IdIntid
2zhegncewenjian_idInteger政策文件
3zhengcejiedu_nameString政策解读名称
4zhengcejiedu_photoString政策解读照片
5zhengcejiedu_contentString政策解读内容
6create_timeDate创建时间

表4.16政策解读收藏表

序号列名数据类型说明允许空
1IdIntid
2zhengcejiedu_idInteger政策解读
3yonghu_idInteger用户
4zhengcejiedu_collection_typesInteger类型
5insert_timeDate收藏时间
6create_timeDate创建时间

表4.17管理员表

序号列名数据类型说明允许空
1IdIntid
2usernameString用户名
3passwordString密码
4roleString角色
5addtimeDate新增时间

5 系统实现

系统实现部分就是将系统分析,系统设计部分的内容通过编码进行功能实现,以一个实际应用系统的形式展示系统分析与系统设计的结果。前面提到的系统分析,系统设计最主要还是进行功能,系统操作逻辑的设计,也包括了存储数据的数据库方面的设计等内容,系统实现就是一个最终的实施阶段,将前面的设计成果进行物理转化,最终出具可以运用于实际的软件系统。

5.1 管理员功能介绍

5.1.1 税务欠款列表

如图5.1显示的就是税务欠款列表页面,此页面提供给管理员的功能有:查看税务欠款、新增税务欠款、修改税务欠款、删除税务欠款等。

图5.1 税务欠款列表页面

5.1.2 通知公告信息管理

通知公告信息管理页面提供的功能操作有:新增通知公告,修改通知公告,删除通知公告操作。下图就是通知公告信息管理页面。

图5.3 通知公告信息管理页面

5.1.3通知公告类型管理

通知公告类型管理页面显示所有通知公告类型,在此页面既可以让管理员添加新的通知公告信息类型,也能对已有的通知公告类型信息执行编辑更新,失效的通知公告类型信息也能让管理员快速删除。下图就是通知公告类型管理页面。

图5.4 通知公告类型列表页面

系统

YonghuController.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("/yonghu")
public class YonghuController {
    private static final Logger logger = LoggerFactory.getLogger(YonghuController.class);

    @Autowired
    private YonghuService yonghuService;


    @Autowired
    private TokenService tokenService;
    @Autowired
    private DictionaryService dictionaryService;

    //级联表service



    /**
    * 后端列表
    */
    @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("yonghuId",request.getSession().getAttribute("userId"));
        if(params.get("orderBy")==null || params.get("orderBy")==""){
            params.put("orderBy","id");
        }
        PageUtils page = yonghuService.queryPage(params);

        //字典表数据转换
        List<YonghuView> list =(List<YonghuView>)page.getList();
        for(YonghuView 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);
        YonghuEntity yonghu = yonghuService.selectById(id);
        if(yonghu !=null){
            //entity转view
            YonghuView view = new YonghuView();
            BeanUtils.copyProperties( yonghu , view );//把实体数据重构到view中

            //修改对应字典表字段
            dictionaryService.dictionaryConvert(view, request);
            return R.ok().put("data", view);
        }else {
            return R.error(511,"查不到数据");
        }

    }

    /**
    * 后端保存
    */
    @RequestMapping("/save")
    public R save(@RequestBody YonghuEntity yonghu, HttpServletRequest request){
        logger.debug("save方法:,,Controller:{},,yonghu:{}",this.getClass().getName(),yonghu.toString());

        String role = String.valueOf(request.getSession().getAttribute("role"));
        if(false)
            return R.error(511,"永远不会进入");

        Wrapper<YonghuEntity> queryWrapper = new EntityWrapper<YonghuEntity>()
            .eq("username", yonghu.getUsername())
            .or()
            .eq("yonghu_phone", yonghu.getYonghuPhone())
            .or()
            .eq("yonghu_id_number", yonghu.getYonghuIdNumber())
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        YonghuEntity yonghuEntity = yonghuService.selectOne(queryWrapper);
        if(yonghuEntity==null){
            yonghu.setCreateTime(new Date());
            yonghu.setPassword("123456");
            yonghuService.insert(yonghu);
            return R.ok();
        }else {
            return R.error(511,"账户或者用户手机号或者用户身份证号已经被使用");
        }
    }

    /**
    * 后端修改
    */
    @RequestMapping("/update")
    public R update(@RequestBody YonghuEntity yonghu, HttpServletRequest request){
        logger.debug("update方法:,,Controller:{},,yonghu:{}",this.getClass().getName(),yonghu.toString());

        String role = String.valueOf(request.getSession().getAttribute("role"));
//        if(false)
//            return R.error(511,"永远不会进入");
        //根据字段查询是否有相同数据
        Wrapper<YonghuEntity> queryWrapper = new EntityWrapper<YonghuEntity>()
            .notIn("id",yonghu.getId())
            .andNew()
            .eq("username", yonghu.getUsername())
            .or()
            .eq("yonghu_phone", yonghu.getYonghuPhone())
            .or()
            .eq("yonghu_id_number", yonghu.getYonghuIdNumber())
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        YonghuEntity yonghuEntity = yonghuService.selectOne(queryWrapper);
        if("".equals(yonghu.getYonghuPhoto()) || "null".equals(yonghu.getYonghuPhoto())){
                yonghu.setYonghuPhoto(null);
        }
        if(yonghuEntity==null){
            yonghuService.updateById(yonghu);//根据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());
        yonghuService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }


    /**
     * 批量上传
     */
    @RequestMapping("/batchInsert")
    public R save( String fileName, HttpServletRequest request){
        logger.debug("batchInsert方法:,,Controller:{},,fileName:{}",this.getClass().getName(),fileName);
        Integer yonghuId = Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId")));
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        try {
            List<YonghuEntity> yonghuList = 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("../../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){
                            //循环
                            YonghuEntity yonghuEntity = new YonghuEntity();
//                            yonghuEntity.setUsername(data.get(0));                    //账户 要改的
//                            //yonghuEntity.setPassword("123456");//密码
//                            yonghuEntity.setYonghuName(data.get(0));                    //用户姓名 要改的
//                            yonghuEntity.setYonghuPhone(data.get(0));                    //用户手机号 要改的
//                            yonghuEntity.setYonghuIdNumber(data.get(0));                    //用户身份证号 要改的
//                            yonghuEntity.setYonghuPhoto("");//详情和图片
//                            yonghuEntity.setSexTypes(Integer.valueOf(data.get(0)));   //性别 要改的
//                            yonghuEntity.setYonghuEmail(data.get(0));                    //电子邮箱 要改的
//                            yonghuEntity.setNewMoney(data.get(0));                    //余额 要改的
//                            yonghuEntity.setCreateTime(date);//时间
                            yonghuList.add(yonghuEntity);


                            //把要查询是否重复的字段放入map中
                                //账户
                                if(seachFields.containsKey("username")){
                                    List<String> username = seachFields.get("username");
                                    username.add(data.get(0));//要改的
                                }else{
                                    List<String> username = new ArrayList<>();
                                    username.add(data.get(0));//要改的
                                    seachFields.put("username",username);
                                }
                                //用户手机号
                                if(seachFields.containsKey("yonghuPhone")){
                                    List<String> yonghuPhone = seachFields.get("yonghuPhone");
                                    yonghuPhone.add(data.get(0));//要改的
                                }else{
                                    List<String> yonghuPhone = new ArrayList<>();
                                    yonghuPhone.add(data.get(0));//要改的
                                    seachFields.put("yonghuPhone",yonghuPhone);
                                }
                                //用户身份证号
                                if(seachFields.containsKey("yonghuIdNumber")){
                                    List<String> yonghuIdNumber = seachFields.get("yonghuIdNumber");
                                    yonghuIdNumber.add(data.get(0));//要改的
                                }else{
                                    List<String> yonghuIdNumber = new ArrayList<>();
                                    yonghuIdNumber.add(data.get(0));//要改的
                                    seachFields.put("yonghuIdNumber",yonghuIdNumber);
                                }
                        }

                        //查询是否重复
                         //账户
                        List<YonghuEntity> yonghuEntities_username = yonghuService.selectList(new EntityWrapper<YonghuEntity>().in("username", seachFields.get("username")));
                        if(yonghuEntities_username.size() >0 ){
                            ArrayList<String> repeatFields = new ArrayList<>();
                            for(YonghuEntity s:yonghuEntities_username){
                                repeatFields.add(s.getUsername());
                            }
                            return R.error(511,"数据库的该表中的 [账户] 字段已经存在 存在数据为:"+repeatFields.toString());
                        }
                         //用户手机号
                        List<YonghuEntity> yonghuEntities_yonghuPhone = yonghuService.selectList(new EntityWrapper<YonghuEntity>().in("yonghu_phone", seachFields.get("yonghuPhone")));
                        if(yonghuEntities_yonghuPhone.size() >0 ){
                            ArrayList<String> repeatFields = new ArrayList<>();
                            for(YonghuEntity s:yonghuEntities_yonghuPhone){
                                repeatFields.add(s.getYonghuPhone());
                            }
                            return R.error(511,"数据库的该表中的 [用户手机号] 字段已经存在 存在数据为:"+repeatFields.toString());
                        }
                         //用户身份证号
                        List<YonghuEntity> yonghuEntities_yonghuIdNumber = yonghuService.selectList(new EntityWrapper<YonghuEntity>().in("yonghu_id_number", seachFields.get("yonghuIdNumber")));
                        if(yonghuEntities_yonghuIdNumber.size() >0 ){
                            ArrayList<String> repeatFields = new ArrayList<>();
                            for(YonghuEntity s:yonghuEntities_yonghuIdNumber){
                                repeatFields.add(s.getYonghuIdNumber());
                            }
                            return R.error(511,"数据库的该表中的 [用户身份证号] 字段已经存在 存在数据为:"+repeatFields.toString());
                        }
                        yonghuService.insertBatch(yonghuList);
                        return R.ok();
                    }
                }
            }
        }catch (Exception e){
            e.printStackTrace();
            return R.error(511,"批量插入数据异常,请联系管理员");
        }
    }


    /**
    * 登录
    */
    @IgnoreAuth
    @RequestMapping(value = "/login")
    public R login(String username, String password, String captcha, HttpServletRequest request) {
        YonghuEntity yonghu = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("username", username));
        if(yonghu==null || !yonghu.getPassword().equals(password))
            return R.error("账号或密码不正确");
        //  // 获取监听器中的字典表
        // ServletContext servletContext = ContextLoader.getCurrentWebApplicationContext().getServletContext();
        // Map<String, Map<Integer, String>> dictionaryMap= (Map<String, Map<Integer, String>>) servletContext.getAttribute("dictionaryMap");
        // Map<Integer, String> role_types = dictionaryMap.get("role_types");
        // role_types.get(.getRoleTypes());
        String token = tokenService.generateToken(yonghu.getId(),username, "yonghu", "用户");
        R r = R.ok();
        r.put("token", token);
        r.put("role","用户");
        r.put("username",yonghu.getYonghuName());
        r.put("tableName","yonghu");
        r.put("userId",yonghu.getId());
        return r;
    }

    /**
    * 注册
    */
    @IgnoreAuth
    @PostMapping(value = "/register")
    public R register(@RequestBody YonghuEntity yonghu){
//    	ValidatorUtils.validateEntity(user);
        Wrapper<YonghuEntity> queryWrapper = new EntityWrapper<YonghuEntity>()
            .eq("username", yonghu.getUsername())
            .or()
            .eq("yonghu_phone", yonghu.getYonghuPhone())
            .or()
            .eq("yonghu_id_number", yonghu.getYonghuIdNumber())
            ;
        YonghuEntity yonghuEntity = yonghuService.selectOne(queryWrapper);
        if(yonghuEntity != null)
            return R.error("账户或者用户手机号或者用户身份证号已经被使用");
        yonghu.setNewMoney(0.0);
        yonghu.setCreateTime(new Date());
        yonghuService.insert(yonghu);
        return R.ok();
    }

    /**
     * 重置密码
     */
    @GetMapping(value = "/resetPassword")
    public R resetPassword(Integer  id){
        YonghuEntity yonghu = new YonghuEntity();
        yonghu.setPassword("123456");
        yonghu.setId(id);
        yonghuService.updateById(yonghu);
        return R.ok();
    }


    /**
     * 忘记密码
     */
    @IgnoreAuth
    @RequestMapping(value = "/resetPass")
    public R resetPass(String username, HttpServletRequest request) {
        YonghuEntity yonghu = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("username", username));
        if(yonghu!=null){
            yonghu.setPassword("123456");
            boolean b = yonghuService.updateById(yonghu);
            if(!b){
               return R.error();
            }
        }else{
           return R.error("账号不存在");
        }
        return R.ok();
    }


    /**
    * 获取用户的session用户信息
    */
    @RequestMapping("/session")
    public R getCurrYonghu(HttpServletRequest request){
        Integer id = (Integer)request.getSession().getAttribute("userId");
        YonghuEntity yonghu = yonghuService.selectById(id);
        if(yonghu !=null){
            //entity转view
            YonghuView view = new YonghuView();
            BeanUtils.copyProperties( yonghu , view );//把实体数据重构到view中

            //修改对应字典表字段
            dictionaryService.dictionaryConvert(view, request);
            return R.ok().put("data", view);
        }else {
            return R.error(511,"查不到数据");
        }
    }


    /**
    * 退出
    */
    @GetMapping(value = "logout")
    public R logout(HttpServletRequest request) {
        request.getSession().invalidate();
        return R.ok("退出成功");
    }




    /**
    * 前端列表
    */
    @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 = yonghuService.queryPage(params);

        //字典表数据转换
        List<YonghuView> list =(List<YonghuView>)page.getList();
        for(YonghuView 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);
        YonghuEntity yonghu = yonghuService.selectById(id);
            if(yonghu !=null){


                //entity转view
                YonghuView view = new YonghuView();
                BeanUtils.copyProperties( yonghu , view );//把实体数据重构到view中

                //修改对应字典表字段
                dictionaryService.dictionaryConvert(view, request);
                return R.ok().put("data", view);
            }else {
                return R.error(511,"查不到数据");
            }
    }


    /**
    * 前端保存
    */
    @RequestMapping("/add")
    public R add(@RequestBody YonghuEntity yonghu, HttpServletRequest request){
        logger.debug("add方法:,,Controller:{},,yonghu:{}",this.getClass().getName(),yonghu.toString());
        Wrapper<YonghuEntity> queryWrapper = new EntityWrapper<YonghuEntity>()
            .eq("username", yonghu.getUsername())
            .or()
            .eq("yonghu_phone", yonghu.getYonghuPhone())
            .or()
            .eq("yonghu_id_number", yonghu.getYonghuIdNumber())
            ;
        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        YonghuEntity yonghuEntity = yonghuService.selectOne(queryWrapper);
        if(yonghuEntity==null){
            yonghu.setCreateTime(new Date());
        yonghu.setPassword("123456");
        yonghuService.insert(yonghu);
            return R.ok();
        }else {
            return R.error(511,"账户或者用户手机号或者用户身份证号已经被使用");
        }
    }


}

BaiduUtil.java
package com.utils;

import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.json.JSONObject;


/**
* @author yangliyuan
* @version 创建时间:2020年2月7日 下午9:37:05
* 类说明 : 
*/

public class BaiduUtil {
	
    /**
     * 根据经纬度获得省市区信息
     * @param lon 纬度
     * @param lat 经度
     * @param coordtype 经纬度坐标系
     * @return
     */
    public static Map<String, String> getCityByLonLat(String key, String lng, String lat) {
        String location = lat + "," + lng;
        try {
            //拼装url
            String url = "http://api.map.baidu.com/reverse_geocoding/v3/?ak="+key+"&output=json&coordtype=wgs84ll&location="+location;
            String result = HttpClientUtils.doGet(url);
            JSONObject o = new JSONObject(result);
            Map<String, String> area = new HashMap<>();
			area.put("province", o.getJSONObject("result").getJSONObject("addressComponent").getString("province"));
			area.put("city", o.getJSONObject("result").getJSONObject("addressComponent").getString("city"));
			area.put("district", o.getJSONObject("result").getJSONObject("addressComponent").getString("district"));
			area.put("street", o.getJSONObject("result").getJSONObject("addressComponent").getString("street"));
            return area;
        }catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    /**
	     * 获取API访问token
	     * 该token有一定的有效期,需要自行管理,当失效时需重新获取.
	     * @param ak - 百度云官网获取的 API Key
	     * @param sk - 百度云官网获取的 Securet Key
	     * @return assess_token
	     */
    public static String getAuth(String ak, String sk) {
        // 获取token地址
        String authHost = "https://aip.baidubce.com/oauth/2.0/token?";
        String getAccessTokenUrl = authHost
                // 1. grant_type为固定参数
                + "grant_type=client_credentials"
                // 2. 官网获取的 API Key
                + "&client_id=" + ak
                // 3. 官网获取的 Secret Key
                + "&client_secret=" + sk;
        try {
            URL realUrl = new URL(getAccessTokenUrl);
            // 打开和URL之间的连接
            HttpURLConnection connection = (HttpURLConnection) realUrl.openConnection();
            connection.setRequestMethod("GET");
            connection.connect();
            // 获取所有响应头字段
            Map<String, List<String>> map = connection.getHeaderFields();
            // 遍历所有的响应头字段
            for (String key : map.keySet()) {
                System.err.println(key + "--->" + map.get(key));
            }
            // 定义 BufferedReader输入流来读取URL的响应
            BufferedReader in = new BufferedReader(new InputStreamReader(connection.getInputStream()));
            String result = "";
            String line;
            while ((line = in.readLine()) != null) {
                result += line;
            }
            /**
             * 返回结果示例
             */
            System.err.println("result:" + result);
            org.json.JSONObject jsonObject = new org.json.JSONObject(result);
            String access_token = jsonObject.getString("access_token");
            return access_token;
        } catch (Exception e) {
            System.err.printf("获取token失败!");
            e.printStackTrace(System.err);
        }
        return null;
    }

}

YijianzhengjiController.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("/yijianzhengji")
public class YijianzhengjiController {
    private static final Logger logger = LoggerFactory.getLogger(YijianzhengjiController.class);

    @Autowired
    private YijianzhengjiService yijianzhengjiService;


    @Autowired
    private TokenService tokenService;
    @Autowired
    private DictionaryService dictionaryService;

    //级联表service
    @Autowired
    private YonghuService yonghuService;



    /**
    * 后端列表
    */
    @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("yonghuId",request.getSession().getAttribute("userId"));
        if(params.get("orderBy")==null || params.get("orderBy")==""){
            params.put("orderBy","id");
        }
        PageUtils page = yijianzhengjiService.queryPage(params);

        //字典表数据转换
        List<YijianzhengjiView> list =(List<YijianzhengjiView>)page.getList();
        for(YijianzhengjiView 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);
        YijianzhengjiEntity yijianzhengji = yijianzhengjiService.selectById(id);
        if(yijianzhengji !=null){
            //entity转view
            YijianzhengjiView view = new YijianzhengjiView();
            BeanUtils.copyProperties( yijianzhengji , view );//把实体数据重构到view中

                //级联表
                YonghuEntity yonghu = yonghuService.selectById(yijianzhengji.getYonghuId());
                if(yonghu != null){
                    BeanUtils.copyProperties( yonghu , view ,new String[]{ "id", "createTime", "insertTime", "updateTime"});//把级联的数据添加到view中,并排除id和创建时间字段
                    view.setYonghuId(yonghu.getId());
                }
            //修改对应字典表字段
            dictionaryService.dictionaryConvert(view, request);
            return R.ok().put("data", view);
        }else {
            return R.error(511,"查不到数据");
        }

    }

    /**
    * 后端保存
    */
    @RequestMapping("/save")
    public R save(@RequestBody YijianzhengjiEntity yijianzhengji, HttpServletRequest request){
        logger.debug("save方法:,,Controller:{},,yijianzhengji:{}",this.getClass().getName(),yijianzhengji.toString());

        String role = String.valueOf(request.getSession().getAttribute("role"));
        if(false)
            return R.error(511,"永远不会进入");
        else if("用户".equals(role))
            yijianzhengji.setYonghuId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));

        Wrapper<YijianzhengjiEntity> queryWrapper = new EntityWrapper<YijianzhengjiEntity>()
            .eq("yonghu_id", yijianzhengji.getYonghuId())
            .eq("yijianzhengji_name", yijianzhengji.getYijianzhengjiName())
            .eq("yijianzhengji_uuid_number", yijianzhengji.getYijianzhengjiUuidNumber())
            .eq("yijianzhengji_types", yijianzhengji.getYijianzhengjiTypes())
            .eq("yijianzhengji_text", yijianzhengji.getYijianzhengjiText())
            .eq("yijianzhengji_chuli_types", yijianzhengji.getYijianzhengjiChuliTypes())
            .eq("yijianzhengji_chuli_text", yijianzhengji.getYijianzhengjiChuliText())
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        YijianzhengjiEntity yijianzhengjiEntity = yijianzhengjiService.selectOne(queryWrapper);
        if(yijianzhengjiEntity==null){
            yijianzhengji.setInsertTime(new Date());
            yijianzhengji.setCreateTime(new Date());
            yijianzhengjiService.insert(yijianzhengji);
            return R.ok();
        }else {
            return R.error(511,"表中有相同数据");
        }
    }

    /**
    * 后端修改
    */
    @RequestMapping("/update")
    public R update(@RequestBody YijianzhengjiEntity yijianzhengji, HttpServletRequest request){
        logger.debug("update方法:,,Controller:{},,yijianzhengji:{}",this.getClass().getName(),yijianzhengji.toString());

        String role = String.valueOf(request.getSession().getAttribute("role"));
//        if(false)
//            return R.error(511,"永远不会进入");
//        else if("用户".equals(role))
//            yijianzhengji.setYonghuId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));
        //根据字段查询是否有相同数据
        Wrapper<YijianzhengjiEntity> queryWrapper = new EntityWrapper<YijianzhengjiEntity>()
            .notIn("id",yijianzhengji.getId())
            .andNew()
            .eq("yonghu_id", yijianzhengji.getYonghuId())
            .eq("yijianzhengji_name", yijianzhengji.getYijianzhengjiName())
            .eq("yijianzhengji_uuid_number", yijianzhengji.getYijianzhengjiUuidNumber())
            .eq("yijianzhengji_types", yijianzhengji.getYijianzhengjiTypes())
            .eq("yijianzhengji_text", yijianzhengji.getYijianzhengjiText())
            .eq("yijianzhengji_chuli_types", yijianzhengji.getYijianzhengjiChuliTypes())
            .eq("yijianzhengji_chuli_text", yijianzhengji.getYijianzhengjiChuliText())
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        YijianzhengjiEntity yijianzhengjiEntity = yijianzhengjiService.selectOne(queryWrapper);
        if("".equals(yijianzhengji.getYijianzhengjiPhoto()) || "null".equals(yijianzhengji.getYijianzhengjiPhoto())){
                yijianzhengji.setYijianzhengjiPhoto(null);
        }
        yijianzhengji.setUpdateTime(new Date());
        if(yijianzhengjiEntity==null){
            yijianzhengjiService.updateById(yijianzhengji);//根据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());
        yijianzhengjiService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }


    /**
     * 批量上传
     */
    @RequestMapping("/batchInsert")
    public R save( String fileName, HttpServletRequest request){
        logger.debug("batchInsert方法:,,Controller:{},,fileName:{}",this.getClass().getName(),fileName);
        Integer yonghuId = Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId")));
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        try {
            List<YijianzhengjiEntity> yijianzhengjiList = 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("../../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){
                            //循环
                            YijianzhengjiEntity yijianzhengjiEntity = new YijianzhengjiEntity();
//                            yijianzhengjiEntity.setYonghuId(Integer.valueOf(data.get(0)));   //用户 要改的
//                            yijianzhengjiEntity.setYijianzhengjiName(data.get(0));                    //意见征集名称 要改的
//                            yijianzhengjiEntity.setYijianzhengjiUuidNumber(data.get(0));                    //意见征集编号 要改的
//                            yijianzhengjiEntity.setYijianzhengjiPhoto("");//详情和图片
//                            yijianzhengjiEntity.setYijianzhengjiTypes(Integer.valueOf(data.get(0)));   //意见征集类型 要改的
//                            yijianzhengjiEntity.setYijianzhengjiText(data.get(0));                    //意见征集内容 要改的
//                            yijianzhengjiEntity.setInsertTime(date);//时间
//                            yijianzhengjiEntity.setYijianzhengjiChuliTypes(Integer.valueOf(data.get(0)));   //状态 要改的
//                            yijianzhengjiEntity.setYijianzhengjiChuliText(data.get(0));                    //回复结果 要改的
//                            yijianzhengjiEntity.setUpdateTime(sdf.parse(data.get(0)));          //回复时间 要改的
//                            yijianzhengjiEntity.setCreateTime(date);//时间
                            yijianzhengjiList.add(yijianzhengjiEntity);


                            //把要查询是否重复的字段放入map中
                                //意见征集编号
                                if(seachFields.containsKey("yijianzhengjiUuidNumber")){
                                    List<String> yijianzhengjiUuidNumber = seachFields.get("yijianzhengjiUuidNumber");
                                    yijianzhengjiUuidNumber.add(data.get(0));//要改的
                                }else{
                                    List<String> yijianzhengjiUuidNumber = new ArrayList<>();
                                    yijianzhengjiUuidNumber.add(data.get(0));//要改的
                                    seachFields.put("yijianzhengjiUuidNumber",yijianzhengjiUuidNumber);
                                }
                        }

                        //查询是否重复
                         //意见征集编号
                        List<YijianzhengjiEntity> yijianzhengjiEntities_yijianzhengjiUuidNumber = yijianzhengjiService.selectList(new EntityWrapper<YijianzhengjiEntity>().in("yijianzhengji_uuid_number", seachFields.get("yijianzhengjiUuidNumber")));
                        if(yijianzhengjiEntities_yijianzhengjiUuidNumber.size() >0 ){
                            ArrayList<String> repeatFields = new ArrayList<>();
                            for(YijianzhengjiEntity s:yijianzhengjiEntities_yijianzhengjiUuidNumber){
                                repeatFields.add(s.getYijianzhengjiUuidNumber());
                            }
                            return R.error(511,"数据库的该表中的 [意见征集编号] 字段已经存在 存在数据为:"+repeatFields.toString());
                        }
                        yijianzhengjiService.insertBatch(yijianzhengjiList);
                        return R.ok();
                    }
                }
            }
        }catch (Exception e){
            e.printStackTrace();
            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 = yijianzhengjiService.queryPage(params);

        //字典表数据转换
        List<YijianzhengjiView> list =(List<YijianzhengjiView>)page.getList();
        for(YijianzhengjiView 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);
        YijianzhengjiEntity yijianzhengji = yijianzhengjiService.selectById(id);
            if(yijianzhengji !=null){


                //entity转view
                YijianzhengjiView view = new YijianzhengjiView();
                BeanUtils.copyProperties( yijianzhengji , view );//把实体数据重构到view中

                //级联表
                    YonghuEntity yonghu = yonghuService.selectById(yijianzhengji.getYonghuId());
                if(yonghu != null){
                    BeanUtils.copyProperties( yonghu , view ,new String[]{ "id", "createDate"});//把级联的数据添加到view中,并排除id和创建时间字段
                    view.setYonghuId(yonghu.getId());
                }
                //修改对应字典表字段
                dictionaryService.dictionaryConvert(view, request);
                return R.ok().put("data", view);
            }else {
                return R.error(511,"查不到数据");
            }
    }


    /**
    * 前端保存
    */
    @RequestMapping("/add")
    public R add(@RequestBody YijianzhengjiEntity yijianzhengji, HttpServletRequest request){
        logger.debug("add方法:,,Controller:{},,yijianzhengji:{}",this.getClass().getName(),yijianzhengji.toString());

        yijianzhengji.setYijianzhengjiChuliTypes(1);
        Wrapper<YijianzhengjiEntity> queryWrapper = new EntityWrapper<YijianzhengjiEntity>()
            .eq("yonghu_id", yijianzhengji.getYonghuId())
            .eq("yijianzhengji_name", yijianzhengji.getYijianzhengjiName())
            .eq("yijianzhengji_uuid_number", yijianzhengji.getYijianzhengjiUuidNumber())
            .eq("yijianzhengji_types", yijianzhengji.getYijianzhengjiTypes())
            .eq("yijianzhengji_text", yijianzhengji.getYijianzhengjiText())
            .eq("yijianzhengji_chuli_types", yijianzhengji.getYijianzhengjiChuliTypes())
            .eq("yijianzhengji_chuli_text", yijianzhengji.getYijianzhengjiChuliText())
            ;
        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        YijianzhengjiEntity yijianzhengjiEntity = yijianzhengjiService.selectOne(queryWrapper);
        if(yijianzhengjiEntity==null){
            yijianzhengji.setInsertTime(new Date());
            yijianzhengji.setCreateTime(new Date());
        yijianzhengjiService.insert(yijianzhengji);
            return R.ok();
        }else {
            return R.error(511,"表中有相同数据");
        }
    }


}

add-or-update.vue
<template>
    <div class="addEdit-block">
        <el-form
                class="detail-form-content"
                ref="ruleForm"
                :model="ruleForm"
                :rules="rules"
                label-width="80px"
                :style="{backgroundColor:addEditForm.addEditBoxColor}"
        >
            <el-row>
                <el-col :span="12">
                    <el-form-item class="input" v-if="type!='info'"  label="状态编码" prop="codeIndex">
                        <el-input v-model="ruleForm.codeIndex"
                                  placeholder="状态编码" clearable  :readonly="ro.codeIndex"></el-input>
                    </el-form-item>
                    <div v-else>
                        <el-form-item class="input" label="状态编码" prop="codeIndex">
                            <el-input v-model="ruleForm.codeIndex"
                                      placeholder="状态编码" readonly></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12">
                    <el-form-item class="input" v-if="type!='info'"  label="状态" prop="indexName">
                        <el-input v-model="ruleForm.indexName"
                                  placeholder="状态" clearable  :readonly="ro.indexName"></el-input>
                    </el-form-item>
                    <div v-else>
                        <el-form-item class="input" label="状态" prop="indexName">
                            <el-input v-model="ruleForm.indexName"
                                      placeholder="状态" readonly></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <!--<el-col :span="12">
                    <el-form-item class="input" v-if="type!='info'"  label="备注" prop="beizhu">
                        <el-input v-model="ruleForm.beizhu"
                                  placeholder="备注" clearable  :readonly="ro.beizhu"></el-input>
                    </el-form-item>
                    <div v-else>
                        <el-form-item class="input" label="备注" prop="beizhu">
                            <el-input v-model="ruleForm.beizhu"
                                      placeholder="备注" readonly></el-input>
                        </el-form-item>
                    </div>
                </el-col>-->
            </el-row>
            <el-form-item class="btn">
                <el-button v-if="type!='info'" type="primary" class="btn-success" @click="onSubmit">提交</el-button>
                <el-button v-if="type!='info'" class="btn-close" @click="back()">取消</el-button>
                <el-button v-if="type=='info'" class="btn-close" @click="back()">返回</el-button>
            </el-form-item>
        </el-form>


    </div>
</template>
<script>
    import styleJs from "../../../utils/style.js";
    // 数字,邮件,手机,url,身份证校验
    import { isNumber,isIntNumer,isEmail,isPhone, isMobile,isURL,checkIdCard } from "@/utils/validate";
    export default {
        data() {
            let self = this
            return {
                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.type=='info'||this.type=='else'){
                    this.info(id);
                }else{
                    //查询最大值 start
                    this.$http({
                        url: `dictionary/maxCodeIndex`,
                        method: "post",
                        data: {"dicCode":"weifashuishou_chuli_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 reg=new 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"]="weifashuishou_chuli_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(()=>{
                    // input
                    document.querySelectorAll('.addEdit-block .input .el-input__inner').forEach(el=>{
                    el.style.height = this.addEditForm.inputHeight
                el.style.color = this.addEditForm.inputFontColor
                el.style.fontSize = this.addEditForm.inputFontSize
                el.style.borderWidth = this.addEditForm.inputBorderWidth
                el.style.borderStyle = this.addEditForm.inputBorderStyle
                el.style.borderColor = this.addEditForm.inputBorderColor
                el.style.borderRadius = this.addEditForm.inputBorderRadius
                el.style.backgroundColor = this.addEditForm.inputBgColor
            })
                document.querySelectorAll('.addEdit-block .input .el-form-item__label').forEach(el=>{
                    el.style.lineHeight = this.addEditForm.inputHeight
                el.style.color = this.addEditForm.inputLableColor
                el.style.fontSize = this.addEditForm.inputLableFontSize
            })
                // select
                document.querySelectorAll('.addEdit-block .select .el-input__inner').forEach(el=>{
                    el.style.height = this.addEditForm.selectHeight
                el.style.color = this.addEditForm.selectFontColor
                el.style.fontSize = this.addEditForm.selectFontSize
                el.style.borderWidth = this.addEditForm.selectBorderWidth
                el.style.borderStyle = this.addEditForm.selectBorderStyle
                el.style.borderColor = this.addEditForm.selectBorderColor
                el.style.borderRadius = this.addEditForm.selectBorderRadius
                el.style.backgroundColor = this.addEditForm.selectBgColor
            })
                document.querySelectorAll('.addEdit-block .select .el-form-item__label').forEach(el=>{
                    el.style.lineHeight = this.addEditForm.selectHeight
                el.style.color = this.addEditForm.selectLableColor
                el.style.fontSize = this.addEditForm.selectLableFontSize
            })
                document.querySelectorAll('.addEdit-block .select .el-select__caret').forEach(el=>{
                    el.style.color = this.addEditForm.selectIconFontColor
                el.style.fontSize = this.addEditForm.selectIconFontSize
            })
                // date
                document.querySelectorAll('.addEdit-block .date .el-input__inner').forEach(el=>{
                    el.style.height = this.addEditForm.dateHeight
                el.style.color = this.addEditForm.dateFontColor
                el.style.fontSize = this.addEditForm.dateFontSize
                el.style.borderWidth = this.addEditForm.dateBorderWidth
                el.style.borderStyle = this.addEditForm.dateBorderStyle
                el.style.borderColor = this.addEditForm.dateBorderColor
                el.style.borderRadius = this.addEditForm.dateBorderRadius
                el.style.backgroundColor = this.addEditForm.dateBgColor
            })
                document.querySelectorAll('.addEdit-block .date .el-form-item__label').forEach(el=>{
                    el.style.lineHeight = this.addEditForm.dateHeight
                el.style.color = this.addEditForm.dateLableColor
                el.style.fontSize = this.addEditForm.dateLableFontSize
            })
                document.querySelectorAll('.addEdit-block .date .el-input__icon').forEach(el=>{
                    el.style.color = this.addEditForm.dateIconFontColor
                el.style.fontSize = this.addEditForm.dateIconFontSize
                el.style.lineHeight = this.addEditForm.dateHeight
            })
                // upload
                let iconLineHeight = parseInt(this.addEditForm.uploadHeight) - parseInt(this.addEditForm.uploadBorderWidth) * 2 + 'px'
                document.querySelectorAll('.addEdit-block .upload .el-upload--picture-card').forEach(el=>{
                    el.style.width = this.addEditForm.uploadHeight
                el.style.height = this.addEditForm.uploadHeight
                el.style.borderWidth = this.addEditForm.uploadBorderWidth
                el.style.borderStyle = this.addEditForm.uploadBorderStyle
                el.style.borderColor = this.addEditForm.uploadBorderColor
                el.style.borderRadius = this.addEditForm.uploadBorderRadius
                el.style.backgroundColor = this.addEditForm.uploadBgColor
            })
                document.querySelectorAll('.addEdit-block .upload .el-form-item__label').forEach(el=>{
                    el.style.lineHeight = this.addEditForm.uploadHeight
                el.style.color = this.addEditForm.uploadLableColor
                el.style.fontSize = this.addEditForm.uploadLableFontSize
            })
                document.querySelectorAll('.addEdit-block .upload .el-icon-plus').forEach(el=>{
                    el.style.color = this.addEditForm.uploadIconFontColor
                el.style.fontSize = this.addEditForm.uploadIconFontSize
                el.style.lineHeight = iconLineHeight
                el.style.display = 'block'
            })
                // 多文本输入框
                document.querySelectorAll('.addEdit-block .textarea .el-textarea__inner').forEach(el=>{
                    el.style.height = this.addEditForm.textareaHeight
                el.style.color = this.addEditForm.textareaFontColor
                el.style.fontSize = this.addEditForm.textareaFontSize
                el.style.borderWidth = this.addEditForm.textareaBorderWidth
                el.style.borderStyle = this.addEditForm.textareaBorderStyle
                el.style.borderColor = this.addEditForm.textareaBorderColor
                el.style.borderRadius = this.addEditForm.textareaBorderRadius
                el.style.backgroundColor = this.addEditForm.textareaBgColor
            })
                document.querySelectorAll('.addEdit-block .textarea .el-form-item__label').forEach(el=>{
                    // el.style.lineHeight = this.addEditForm.textareaHeight
                    el.style.color = this.addEditForm.textareaLableColor
                el.style.fontSize = this.addEditForm.textareaLableFontSize
            })
                // 保存
                document.querySelectorAll('.addEdit-block .btn .btn-success').forEach(el=>{
                    el.style.width = this.addEditForm.btnSaveWidth
                el.style.height = this.addEditForm.btnSaveHeight
                el.style.color = this.addEditForm.btnSaveFontColor
                el.style.fontSize = this.addEditForm.btnSaveFontSize
                el.style.borderWidth = this.addEditForm.btnSaveBorderWidth
                el.style.borderStyle = this.addEditForm.btnSaveBorderStyle
                el.style.borderColor = this.addEditForm.btnSaveBorderColor
                el.style.borderRadius = this.addEditForm.btnSaveBorderRadius
                el.style.backgroundColor = this.addEditForm.btnSaveBgColor
            })
                // 返回
                document.querySelectorAll('.addEdit-block .btn .btn-close').forEach(el=>{
                    el.style.width = this.addEditForm.btnCancelWidth
                el.style.height = this.addEditForm.btnCancelHeight
                el.style.color = this.addEditForm.btnCancelFontColor
                el.style.fontSize = this.addEditForm.btnCancelFontSize
                el.style.borderWidth = this.addEditForm.btnCancelBorderWidth
                el.style.borderStyle = this.addEditForm.btnCancelBorderStyle
                el.style.borderColor = this.addEditForm.btnCancelBorderColor
                el.style.borderRadius = this.addEditForm.btnCancelBorderRadius
                el.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.uploadHeight
                el.style.height = this.addEditForm.uploadHeight
                el.style.borderWidth = this.addEditForm.uploadBorderWidth
                el.style.borderStyle = this.addEditForm.uploadBorderStyle
                el.style.borderColor = this.addEditForm.uploadBorderColor
                el.style.borderRadius = this.addEditForm.uploadBorderRadius
                el.style.backgroundColor = this.addEditForm.uploadBgColor
            })
            })
            },
        }
    };
</script>
<style lang="scss">
.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;
}
.btn .el-button {
  padding: 0;
}</style>

声明

本博客适用于广泛的学术和教育用途,包括但不限于个人学习、开发设计,产品设计。仅供学习参考,旨在为读者提供深入理解和学术研究的材料。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2198291.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于matlab的语音信号处理

摘要 利用所学习的数字信号处理知识&#xff0c;设计了一个有趣的音效处理系统&#xff0c;首先设计了几种不同的滤波器对声音进行滤波处理&#xff0c;分析了时域和频域的变化&#xff0c;比较了经过滤波处理后的声音与原来的声音有何变化。同时设计实现了语音的倒放&#xf…

从0开始linux(9)——进程(1)进程管理

欢迎来到博主的专栏&#xff1a;从0开始linux 博主ID&#xff1a;代码小豪 文章目录 查看进程进程管理PID与PPIDfork函数 在上一篇中我们了解到&#xff1a;当运行程序时&#xff0c;操作系统会将磁盘中的二进制文件读取到内存当中&#xff0c;程序运行到结束的过程称为进程&am…

【C++ 11】auto 自动类型推导

文章目录 【 1. 基本用法 】【 2. auto 的 应用 】2.0 auto 的限制2.1 简单实例2.2 auto 与指针、引用、const2.4 auto 定义迭代器2.5 auto 用于泛型编程 问题背景 在 C11 之前的版本&#xff08;C98 和 C 03&#xff09;中&#xff0c;定义变量或者声明变量之前都必须指明它的…

目标检测YOLO实战应用案例100讲-【目标检测】YOLOV11

目录 前言 算法原理 YOLO发展历程 什么是 YOLO11 YOLOv11 的主要特点 YOLO各版本概览 核心优势: YOLOv11改进方向 YOLOv11功能介绍 YOLOv11关键创新 YOLOv11 指标展示 YOLOV11实验 环境设置 准备数据集 训练模型 验证模型 应用领域 一、智慧交通与自动驾…

【Linux实践】实验八:Shell程序的创建及变量

文章目录 实验八&#xff1a;Shell程序的创建及变量实验目的&#xff1a;实验内容&#xff1a;操作步骤&#xff1a;1. 查看环境变量2. 定义变量AK3. 定义变量AM并比较4. 创建Shell程序 实验八&#xff1a;Shell程序的创建及变量 实验目的&#xff1a; 掌握Shell程序的创建过…

【C++】AVL树的底层以及实现

个人主页 文章目录 ⭐一、AVL树的概念&#x1f389;二、AVL树的性质&#x1f3dd;️三、AVL树的实现1. 树的基本结构2. 树的插入3. 树的旋转• 左单旋• 右单旋• 左右双旋• 右左双旋 &#x1f3a1;四、AVL树的其它功能1. 树的查找2. 树的遍历3. 树的高度4. 树的大小 &#x…

RK3568平台开发系列讲解(I2C篇)i2c 总线驱动介绍

🚀返回专栏总目录 文章目录 一、i2c 总线定义二、i2c 总线注册三、i2c 设备和 i2c 驱动匹配规则沉淀、分享、成长,让自己和他人都能有所收获!😄 i2c 总线驱动由芯片厂商提供,如果我们使用 ST 官方提供的 Linux 内核, i2c 总线驱动已经保存在内核中,并且默认情况下已经…

vulnhub-matrix-breakout-2-morpheus靶机的测试报告

目录 一、测试环境 1、系统环境 2、使用工具/软件 二、测试目的 三、操作过程 1、信息搜集 2、Getshell ①nc反弹shell连接 ②Webshell上传 3、提权 ①使用kali自带的poc ②使用msf进行渗透 四、结论 一、测试环境 1、系统环境 渗透机&#xff1a;kali2021.1(19…

项目构建工具

一般面试中被问到的项目构建工具&#xff0c;常常会回答的是Maven 今天大概了解了一下目前项目构建构建有Maven,Ant,Gradle Gradle 是一个构建工具&#xff0c;它是用来帮助我们构建app的&#xff0c;构建包括编译&#xff0c;打包等过程。我们可以为Gradle指定构建规则&…

matlab 相关

1、xcorr 本质上是两个函数做内积运算 相关算法有两种&#xff1a; 在Matlab上既可以 1.用自带的xcorr函数计算互相关&#xff0c;2.通过在频域上乘以共轭复频谱来计算互相关&#xff1b; 网友验证程序 clc;clear;close all; % s1,s2为样例数据 s1 [-0.00430297851562500;-…

攻防世界----->Replace

前言&#xff1a;做题笔记。 下载 查壳。 upx32脱壳。 32ida打开。 先运行看看&#xff1a; 没有任何反应&#xff1f; 猜测又是 地址随机化(ASLR)---遇见过。 操作参考&#xff1a; 攻防世界----&#xff1e;Windows_Reverse1_dsvduyierqxvyjrthdfrtfregreg-CSDN博客 然后…

Spring系列 Bean创建过程

文章目录 初始化时机单例初始化流程getBeandoGetBeangetSingleton(String) 获取单例getSingleton(String, ObjectFactory) 创建单例beforeSingletonCreationcreateBeanafterSingletonCreation 创建 Bean 过程doCreateBeanaddSingletonFactory createBeanInstance 创建 Bean 对象…

医院管理智能化:Spring Boot技术革新

3系统分析 3.1可行性分析 通过对本医院管理系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本医院管理系统采用JAVA作为开发语言&#xff0c;Spring Boot框…

ctf.bugku - game1

题目来源&#xff1a; game1 - Bugku CTF 访问页面&#xff0c;让玩游戏 得到100分&#xff0c;没拿到flag 查看页面源码&#xff0c; GET请求带有 score、IP、sign 三个参数&#xff0c;最后的flag 应该跟分数有关&#xff1b; 给了score一个99999分数&#xff0c; sign 为 …

STM32编码器接口

一、概述 1、Encoder Interface 编码器接口概念 编码器接口可接收增量&#xff08;正交&#xff09;编码器的信号&#xff0c;根据编码器旋转产生的正交信号脉冲&#xff0c;自动控制CNT自增或自减&#xff0c;从而指示编码器的位置、旋转方向和旋转速度每个高级定时器和通用…

如何录制微课教程?K12教育相关课程录制录屏软件推荐

在当今数字化教育的时代&#xff0c;微课作为一种重要的教学资源&#xff0c;受到了越来越多教师和学生的关注。制作一节优质的微课&#xff0c;录制是关键的环节之一。下面我们将结合相关知识&#xff0c;详细介绍如何录制微课教程。 一、微课录制前的准备 1.教学设计文档编写…

Ultralytics:YOLO11使用教程

Ultralytics&#xff1a;YOLO11使用教程 前言相关介绍前提条件实验环境安装环境项目地址LinuxWindows YOLO11使用教程进行目标检测进行实例分割进行姿势估计进行旋转框检测进行图像分类 参考文献 前言 由于本人水平有限&#xff0c;难免出现错漏&#xff0c;敬请批评改正。更多…

题目:圆桌会议

解题思路&#xff1a; 结果的顺序就是原序列的逆序&#xff0c;例如12345就是54321为结果顺序。同时将一个顺序序列&#xff08;非环&#xff09;变成逆序需要的次数为。想要的得到最短的交换次数&#xff0c;只需要将环尽量对半分&#xff0c;然后分别对两部分进行顺序序列变逆…

DAY27||回溯算法基础 | 77.组合| 216.组合总和Ⅲ | 17.电话号码的字母组合

回溯算法基础知识 一种效率不高的暴力搜索法。本质是穷举。有些问题能穷举出来就不错了。 回溯算法解决的问题有&#xff1a; 组合问题&#xff1a;N个数里面按一定规则找出k个数的集合切割问题&#xff1a;一个字符串按一定规则有几种切割方式子集问题&#xff1a;一个N个数…

SeaTunnel如何创建Socket数据同步作业?

本文为Apache SeaTunnel Socket Connector的使用文档&#xff0c;旨在帮助用户快速理解和有效利用Socket Connector&#xff0c;助力用户的应用程序实现高效、稳定的网络通信。 Socket是应用层与TCP/IP协议族之间进行通信的中间软件抽象层&#xff0c;它是网络编程的基础&…