农产品智慧物流系统pf

@TOC

springboot537农产品智慧物流系统pf

第1章绪论

1.1 课题背景

互联网发展至今，无论是其理论还是技术都已经成熟，而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播，搭配信息管理工具可以很好地为人们提供服务。所以各行业，尤其是规模较大的企业和学校等都开始借助互联网和软件工具管理信息，传播信息，共享信息等等，以此可以增强自身实力，提高在同行业当中的竞争能力，并从各种激烈的竞争中获取发展的机会。针对农产品配送信息管理混乱，出错率高，信息安全性差，劳动强度大，费时费力等问题，经过分析和考虑，在目前的情况下，可以引进一款农产品智慧物流系统这样的现代化管理工具，这个工具就是解决上述问题的最好的解决方案。它不仅可以实时完成信息处理，还缩短农产品配送信息管理流程，使其系统化和规范化。同时还可以减少工作量，节约农产品配送信息管理需要的人力和资金。所以农产品智慧物流系统是信息管理环节中不可缺少的工具，它对管理者来说非常重要。

1.2 课题意义

现如今，信息种类变得越来越多，信息的容量也变得越来越大，这就是信息时代的标志。近些年，计算机科学发展得也越来越快，而且软件开发技术也越来越成熟，因此，在生活中的各个领域，只要存在信息管理，几乎都有计算机的影子，可以说很多行业都采用计算机的方式管理信息。信息计算机化处理相比手工操作，有着保密性强，效率高，存储空间大，成本低等诸多优点。针对农产品配送信息管理，采用农产品智慧物流系统可以有效管理，使信息管理能够更加科学和规范。

总之，在实际中使用农产品智慧物流系统，其意义如下：

第一点：农产品智慧物流系统的实际运用，可以帮助管理人员在短时间内完成信息处理工作；

第二点：通过系统页面的合理排版布局，可以更加直观的展示系统的内容，并且使用者可以随时阅读页面信息，随时操作系统提供的功能；

第三点：可以实现信息管理计算机化；

第四点：可以降低信息管理成本；

1.3 研究内容

对农产品智慧物流系统设计制作，不仅需要技术支撑，也需要大量的理论研究。本文在对农产品智慧物流系统进行介绍时，将按照如下内容进行。

第一部分：介绍农产品智慧物流系统研究的背景意义，便于用户了解系统；

第二部分：介绍开发农产品智慧物流系统需要搭建的环境，包括技术和工具；

第三部分：介绍用户对农产品智慧物流系统的功能要求，以及对农产品智慧物流系统的性能要求等；

第四部分：介绍数据库的设计方案，以及根据功能要求设计的功能结构；

第五部分：介绍通过编码最终实现的系统功能运行效果；

第六部分：介绍系统的功能测试，对系统进行综合检测，并及时解决系统出现的问题，直至系统运行正常。

第2章开发环境与技术

农产品智慧物流系统的编码实现需要搭建一定的环境和使用相应的技术，接下来的内容就是对农产品智慧物流系统用到的技术和工具进行介绍。

2.1 MYSQL数据库

本课题所开发的应用程序在数据操作方面是不可预知的，是经常变动的，没有办法直接把数据写在文档里，这样不仅仅不安全，也不能实现应用程序的功能。如果要能实现应用程序所需要的数据存储功能，就避免不了要进行专业数据库存储软件的选择。基本上应用程序实现的功能不算太复杂，市面上任何一个关系型数据库软件都可以实现。参考自己的学习进度和操作习惯来讲，Oracle数据库是适合的，但是所需要的的安装软件很大，并且有好多不需要的功能都是开启的状态，十分消耗电脑资源，所以没有选择Oracle数据库，而SQL Server数据库虽然学过，但是安装的时候因为电脑上可能有其他的软件存在，经常性的出问题，而安装问题不好解决就需要重新安装操作系统，这样对已经存在的软件来讲又是一种时间上的浪费。只有MySQL数据库，安装包小，安装速度快，操作简单，哪怕安装出问题也好解决，不用重装操作系统，也不影响电脑上运行的其他软件，消耗资源也少，最重要的是在功能方面完全的符合设计需要，所以最后选择了MySQL数据库作为应用软件开发需要的数据库。

2.2 vue技术

在动态网站的兴起之初，作为高级编程语言的Java自然不会放弃这个领域的蛋糕。Sun公司推出了Servlet作为输出动态网站的一种技术标准，虽然不怎么受当时程序员的喜爱，但是当初也没有太多的选择，随后几个月java语言问世，不考虑性能和效率如何，起码在书写网页所需要的动态代码块和静态代码块方面进行了区分，让书写效率和可读效率大大的提升，所以很多Java程序员以及刚入行的初级程序员都选择了java语言作为自己职业的发展方向，Sun公司为了维护Java语言在高级编程语言上的江湖地位，防止java继续抢走市场份额占有率，Sun公司联合Apache基金会研发了一个关于Java动态网页的一个新型的技术标准，这就是vue技术。vue吸取了java语言在页面书写上面的所有优点，但是又背靠Java EE的庞大后台，又能实现很多通过Java组件就能实现的功能，在vue页面上可以直接引用那些组件，让vue更加的强壮丰富。保证了Java技术纵向的可持续发展，并且在动态网站开发领域终于站稳了脚跟，其他java开发人员可以很快的转移到vue进行开发，不考虑一些特殊组件或者功能的开发，只从动态页面的开发上来讲，完全实现了java程序和vue程序的几乎无成本的转换，vue技术就这样的发展了起来。

2.3 Spring Boot框架

Spring Boot是由Pivotal团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。通过这种方式，Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者。

SpringBoot基于Spring4.0设计，不仅继承了Spring框架原有的优秀特性，而且还通过简化配置来进一步简化了Spring应用的整个搭建和开发过程。另外SpringBoot通过集成大量的框架使得依赖包的版本冲突，以及引用的不稳定性等问题得到了很好的解决。

SpringBoot框架中还有两个非常重要的策略：开箱即用和约定优于配置。开箱即用，Outofbox，是指在开发过程中，通过在MAVEN项目的pom文件中添加相关依赖包，然后使用对应注解来代替繁琐的XML配置文件以管理对象的生命周期。这个特点使得开发人员摆脱了复杂的配置工作以及依赖的管理工作，更加专注于业务逻辑。约定优于配置，Convention over configuration，是一种由SpringBoot本身来配置目标结构，由开发者在结构中添加信息的软件设计范式。这一特点虽降低了部分灵活性，增加了BUG定位的复杂性，但减少了开发人员需要做出决定的数量，同时减少了大量的XML配置，并且可以将代码编译、测试和打包等工作自动化。

SpringBoot应用系统开发模板的基本架构设计从前端到后台进行说明：前端常使用模板引擎，主要有FreeMarker和Thymeleaf，它们都是用Java语言编写的，渲染模板并输出相应文本，使得界面的设计与应用的逻辑分离，同时前端开发还会使用到Bootstrap、AngularJS、JQuery等；在浏览器的数据传输格式上采用Json，非xml，同时提供RESTfulAPI；SpringMVC框架用于数据到达服务器后处理请求；到数据访问层主要有Hibernate、MyBatis、JPA等持久层框架；数据库常用MySQL；开发工具推荐IntelliJIDEA。

第3章系统分析

面对即将开发的系统，进行提前的分析是必要的。这也是开发流程中必须有的环节。通常分析系统期间，主要涉及的内容包括系统开发可行性问题，对系统功能和性能的分析等问题。

3.1 可行性分析

在正式对需要建设的项目进行投资前，有一个比较关键的步骤是不能缺少的，那就是可行性分析。它主要从当前技术，经济等角度去评估系统的可行性，在投资决策中常常采用这种科学的方法来论证项目。

3.1.1 技术可行性

当前，系统开发的技术已经发展成熟，而且通过计算机网络可以获取开发工具的使用方法，以及规范化编写的模块化代码，这些知识可以帮助开发者顺利完成本系统的编码工作。

3.1.2 经济可行性

本系统开发期间需要配置的软件环境，可以免费通过开发类官网下载安装，需要配置的硬件设备也不需要具备很高的性能，通常网吧电脑，或学校计算机机房的电脑都符合要求。因此，从经济方面考虑，农产品智慧物流系统开发可行。

3.1.3 操作可行性

农产品智慧物流系统根据用户使用习惯进行开发，设计的界面具有统一性，并具备优秀的导航功能。所以，只要会简单操作电脑的人员，可以无压力操作农产品智慧物流系统。

总之，从上述的论证来看，本系统可以开发。

3.2 系统流程

流程图这样的工具可以直观反映出系统内部的操作逻辑，可以帮助用户更好的理解系统。

3.2.1 操作流程

进入本系统需要访问者提供验证信息。验证合格的访问者才能获取访问资格。其具体的操作流程见下图。访问者根据登录界面设置的信息项如实填写，待信息通过验证后，访问者可以进入指定的页面享受本系统提供的服务和阅读本系统的相关信息。

图3.1 操作流程图

3.2.2 登录流程

本系统的登录模块，其内部的流程见下图。主要对访问本系统的人员提供的验证信息进行逐个判断，系统面对录入错误的信息会给出提示，比如，提示账号不对，或提示密码不匹配等提示信息。总之，在登录页面填写的所有信息都符合要求，访问者就登录成功了。

图3.2 登录流程图

3.2.3 删除信息流程

本系统在经常性的使用后，会产生很多失去价值的信息，因此就需要及时清理数据，腾出系统的空间。对这些数据进行清理时，其对应的流程见下图。先选中要清理的数据，通过反复确认需要清理的数据，避免操作人员误删。已经删除的数据就不会出现在系统里面。

图3.3 删除信息流程图

3.2.4 添加信息流程

本系统主要用于显示信息，提供服务，其中，数据添加功能就是其中的服务之一，具体流程见下图。让操作者在信息添加的页面录入数据，待这些数据被提交检验合格后，就会在系统指定页面显示出来。

图3.4 添加信息流程图

3.3 性能需求

进行需求分析，包括了根据用户实际需求制定功能，也涵盖了对即将设计的系统进行性能上的需求分析。所以一般分析系统时，一方面要分析系统功能，另一方面也要分析系统的性能。毕竟设计开发出一个好性能的系统可以确保系统的质量可靠。

接下来分析系统的性能，还要从界面友好性，系统的时间特性，系统的可靠性等方面来分析说明。

（1）时间特性要求：系统处理数据都有时间要求，这也是系统的时间特性。通常都会把数据处理的时间进行分析，也会设置用户请求的响应时间，还有系统在满负荷运行时可以偏离的范围数值等都需要提前分析确定。

（2）界面友好性：除了功能上需要考虑用户需求外，在人机交互界面的设计上，也需要考虑用户的使用习惯，包括界面的布局，界面基调选择以及颜色搭配等。尽量做到用户在接受简单的培训之后，可以对系统进行独立操作。

（3）系统可靠性：对于初学者而言，很容易出现一个问题，就是设计开发的系统，因为人为的误操作出现崩溃，有些也会导致电脑死机。这样的现象也说明这种容错能力低下的系统是不可靠的。完全不能作为生活中处理信息的系统。当下，系统开发要保证可靠性，设计时，把模块化和结构化的设计理念也考虑进来。如果遇到对时效性要求比较严格的系统，也需要采取其它的措施，比如双机系统，还有磁盘阵列等方式。还有就是一个可靠性的系统，对设备的供电能力也有要求。

第4章系统设计

一个成功设计的系统在内容上必定是丰富的，在系统外观或系统功能上必定是对用户友好的。所以为了提升系统的价值，吸引更多的访问者访问系统，以及让来访用户可以花费更多时间停留在系统上，则表明该系统设计得比较专业。

4.1 设计原则

本系统在设计过程中需要依照一定的设计原则进行，目的就是为了让开发的系统具备高质量，齐全完备的功能，方便简单的操作，如此才可以最大限度的满足使用者的要求。系统设计原则除了基本的易操作原则外，还有安全性原则，准确性原则。

第一个设计原则：易操作原则，针对本系统设计的功能要完备齐全，编码时，设计的各个接口要具备友好性，使用者一旦使用本系统时，要能够轻松上手，操作本系统处理数据时，要具备便利性。此外，也需要设计一些必要提示，引导使用者操作系统。

第二个设计原则：安全性原则，本系统在登录模块要对各个访问者进行身份验证，系统会通过访问者输入的信息进行判断，使用提前编写的安全验证代码进行数据比对，引导匹配成功的访问者进入指定的操作界面。这样可以避免无关性访问者窃取系统的数据。

第三个设计原则：准确性原则，为了保证使用者登记的数据是正确的，需要提前设计数据纠错机制，让使用者可以通过系统的报错提示，仔细检查登记的错误信息，并及时纠正错误，填写规范正确的信息。比如设置密码时，要求密码的长度不能低于6个字符，且数据类型要求不能全部是数字等都能进行规范。

4.2 功能结构设计

在前面分析的管理员功能的基础上，进行接下来的设计工作，最终展示设计的管理员结构图（见下图）。管理员增删改查农产品配送

4.3 数据库设计

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

（1）下图是论坛实体和其具备的属性。

$C:/Users/Administrator/Desktop/temp111\1\img\论坛.jpg$ 论坛实体属性图

（2）下图是农产品供应商实体和其具备的属性。

$C:/Users/Administrator/Desktop/temp111\1\img\农产品供应商.jpg$ 农产品供应商实体属性图

（3）下图是用户实体和其具备的属性。

$C:/Users/Administrator/Desktop/temp111\1\img\用户.jpg$ 用户实体属性图

（4）下图是论坛实体和其具备的属性。

$C:/Users/Administrator/Desktop/temp111\1\img\公告信息.jpg$ 论坛实体属性图

（5）下图是农产品委托实体和其具备的属性。

$C:/Users/Administrator/Desktop/temp111\1\img\农产品委托.jpg$ 农产品委托实体属性图

（6）下图是农产品物流公司实体和其具备的属性。

$C:/Users/Administrator/Desktop/temp111\1\img\农产品物流公司.jpg$ 农产品物流公司实体属性图

（7）下图是农产品配送实体和其具备的属性。

$C:/Users/Administrator/Desktop/temp111\1\img\农产品配送.jpg$ 农产品配送实体属性图

4.3.2 数据库物理设计

本数据库是关系型数据库，因此对二维表的结构设计也比较关键。毕竟二维表格模型就是关系型数据库中的关系模型。而一些常用的关系模型中的概念也需要了解，才可以对关系模型进行设计。下面就简单介绍关系，元组，属性，域，关键字等常用概念的含义。

关系：关系就是数据库中的一张数据表，每张数据表都有命名，也就是每个关系也有名字，那就是数据表名；

元组：元组就是数据表中的一行记录；

属性：属性就是数据表中的字段，也就是数据表中的一列；

域：域就是对数据表中属性的取值进行限定；

关键字：关键字就是数据表中的主键；

在了解了表结构设计的常用概念后，接下来就需要使用前面绘制的E-R模型完成表结构的设计工作，并在数据库中创建数据表，并为各个数据表进行命名。以下就对设计的结果通过表格形式进行展示。

表4.1字典表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	dic_code	String	字段	是
3	dic_name	String	字段名	是
4	code_index	Integer	编码	是
5	index_name	String	编码名字	是
6	super_id	Integer	父字段id	是
7	beizhu	String	备注	是
8	create_time	Date	创建时间	是

表4.2论坛表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	forum_name	String	帖子标题	是
3	gongyingshang_id	Integer	农产品供应商	是
4	wuliugongsi_id	Integer	农产品物流公司	是
5	yonghu_id	Integer	用户	是
6	users_id	Integer	管理员	是
7	forum_content	String	发布内容	是
8	super_ids	Integer	父id	是
9	forum_state_types	Integer	帖子状态	是
10	insert_time	Date	发帖时间	是
11	update_time	Date	修改时间	是
12	create_time	Date	创建时间	是

表4.3农产品供应商表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	gongyingshang_name	String	供应商姓名	是
3	gongyingshang_photo	String	头像	是
4	gongyingshang_phone	String	联系方式	是
5	gongyingshang_email	String	邮箱	是
6	gongyingshang_types	Integer	供应商类型	是
7	gongyingshang_content	String	简介	是
8	gongyingshang_delete	Integer	假删	是
9	create_time	Date	创建时间	是

表4.4论坛表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	news_name	String	公告标题	是
3	news_types	Integer	公告类型	是
4	news_photo	String	公告图片	是
5	insert_time	Date	添加时间	是
6	news_content	String	公告详情	是
7	create_time	Date	创建时间	是

表4.5农产品委托表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	nongchanpinweituo_name	String	委托标题	是
3	nongchanpinweituo_types	Integer	委托类型	是
4	nongchanpinweituo_photo	String	封面	是
5	nongchanpinweituo_kucun_number	Integer	委托数量	是
6	nongchanpinweituo_content	String	委托详情	是
7	nongchanpinweituo_delete	Integer	逻辑删除	是
8	insert_time	Date	录入时间	是
9	create_time	Date	创建时间	是

表4.6农产品配送表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	peisong_name	String	配送标题	是
3	yonghu_id	Integer	用户	是
4	peisong_types	Integer	配送状态	是
5	peisong_kucun_number	Integer	配送数量	是
6	peisong_content	String	配送详情	是
7	peisong_delete	Integer	逻辑删除	是
8	insert_time	Date	录入时间	是
9	create_time	Date	创建时间	是

表4.7农产品物流公司表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	wuliugongsi_name	String	物流公司姓名	是
3	wuliugongsi_photo	String	头像	是
4	wuliugongsi_phone	String	联系方式	是
5	wuliugongsi_email	String	邮箱	是
6	wuliugongsi_types	Integer	物流公司类型	是
7	wuliugongsi_content	String	仓库信息简介	是
8	wuliugongsi_delete	Integer	假删	是
9	create_time	Date	创建时间	是

表4.8用户表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	yonghu_name	String	用户姓名	是
3	yonghu_photo	String	头像	是
4	yonghu_phone	String	用户手机号	是
5	yonghu_id_number	String	用户身份证号	是
6	yonghu_email	String	邮箱	是
7	yonghu_delete	Integer	假删	是
8	create_time	Date	创建时间	是

表4.9管理员表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	username	String	用户名	是
3	password	String	密码	是
4	role	String	角色	是
5	addtime	Date	新增时间	是

5.1用户信息管理

如图5.1显示的就是用户信息管理页面，此页面提供给管理员的功能有：用户信息的查询管理，可以删除用户信息、修改用户信息、新增用户信息，

还进行了对用户名称的模糊查询的条件

图5.1 用户信息管理页面

5.2 农产品配送管理

如图5.2显示的就是农产品配送管理页面，此页面提供给管理员的功能有：查看已发布的农产品配送数据，修改农产品配送，农产品配送作废，即可删除，还进行了对农产品配送名称的模糊查询农产品配送信息的类型查询等等一些条件。

图5.2 农产品配送管理页面

5.3农产品委托管理

如图5.3显示的就是农产品委托管理页面，此页面提供给管理员的功能有：根据农产品委托进行条件查询，还可以对农产品委托进行新增、修改、查询操作等等。

图5.3 农产品委托管理页面

5.1论坛管理

如图5.4显示的就是论坛管理页面，此页面提供给管理员的功能有：根据论坛进行新增、修改、查询操作等等。

图5.4 论坛管理页面

CommonUtil.java

package com.utils;

import java.util.*;

/**
 * 公共方法
 */
public class CommonUtil {
	/**
     * 获取随机字符串
     *
     * @param num
     * @return
     */
    public static String getRandomString(Integer num) {
        String base = "abcdefghijklmnopqrstuvwxyz0123456789";
        Random random = new Random();
        StringBuffer sb = new StringBuffer();
        for (int i = 0; i < num; i++) {
            int number = random.nextInt(base.length());
            sb.append(base.charAt(number));
        }
        return sb.toString();
    }


    /**
     * 检查map参数并添加缺失参数
     * @param params
     * @return
     */
    public static void checkMap(Map<String, Object> params) {
        boolean page=true,limit=true,sort=true,order=true;
        Iterator<Map.Entry<String, Object>> iter = params.entrySet().iterator();
        while (iter.hasNext()) {
            Map.Entry<String, Object> info = iter.next();
            Object key = info.getKey();
            Object value = info.getValue();
            if(value==null || "".equals(value) || "null".equals(value)){
                iter.remove();
            }else if("page".equals(key)){page=false;
            }else if("limit".equals(key)){limit=false;
            }else if("sort".equals(key)){sort=false;
            }else if("order".equals(key)){order=false;
            }
        }
        if(page){params.put("page","1");}
        if(limit){params.put("limit","10");}
        if(sort){params.put("sort","id");}
        if(order){params.put("order","desc");}
    }
}

WuliugongsiServiceImpl.java

package com.service.impl;

import com.utils.StringUtil;
import com.service.DictionaryService;
import com.utils.ClazzDiff;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.lang.reflect.Field;
import java.util.*;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import org.springframework.transaction.annotation.Transactional;
import com.utils.PageUtils;
import com.utils.Query;
import org.springframework.web.context.ContextLoader;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import org.springframework.lang.Nullable;
import org.springframework.util.Assert;
import com.dao.WuliugongsiDao;
import com.entity.WuliugongsiEntity;
import com.service.WuliugongsiService;
import com.entity.view.WuliugongsiView;

/**
 * 农产品物流公司 服务实现类
 */
@Service("wuliugongsiService")
@Transactional
public class WuliugongsiServiceImpl extends ServiceImpl<WuliugongsiDao, WuliugongsiEntity> implements WuliugongsiService {

    @Override
    public PageUtils queryPage(Map<String,Object> params) {
        Page<WuliugongsiView> page =new Query<WuliugongsiView>(params).getPage();
        page.setRecords(baseMapper.selectListView(page,params));
        return new PageUtils(page);
    }


}

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('dictionaryGongyingshang','新增')"
                                type="success"
                                icon="el-icon-plus"
                                @click="addOrUpdateHandler()"
                        >新增</el-button>
                        <el-button
                                v-if="isAuth('dictionaryGongyingshang','删除')"
                                :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('dictionaryGongyingshang','查看')"
                          :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('dictionaryGongyingshang','查看')" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">详情</el-button>
                            <el-button v-if="isAuth('dictionaryGongyingshang','修改')" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">修改</el-button>
                            <el-button v-if="isAuth('dictionaryGongyingshang','删除')" 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'] = "gongyingshang_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: #FFFFFF;
		  font-size: 10px;
		  border-width: 1px;
		  border-style: solid;
		  border-color: var(--publicMainColor);
		  border-radius: 20px;
		  background-color: var(--publicSubColor);
	  }

	& /deep/ .el-button--primary {
		  height: 40px;
		  color: #FFFFFF;
		  font-size: 10px;
		  border-width: 1px;
		  border-style: solid;
		  border-color: var(--publicMainColor);
		  border-radius: 20px;
		  background-color: var(--publicSubColor);
	  }

	& /deep/ .el-button--danger {
		  height: 40px;
		  color: rgba(255, 255, 255, 1);
		  font-size: 10px;
		  border-width: 1px;
		  border-style: solid;
		  border-color: var(--publicMainColor);
		  border-radius: 20px;
		  background-color: var(--publicSubColor);
	  }

	& /deep/ .el-button {
		  margin: 4px;
	  }
	}

</style>