农产品智慧物流系统pf

最新推荐文章于 2024-08-20 23:30:40 发布
最新推荐文章于 2024-08-20 23:30:40 发布
阅读量565 收藏 8
点赞数 8
分类专栏： springboot 管理系统 计算机毕设 文章标签： springboot 后端 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a253399414/article/details/141355334
版权

@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字典表

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

表4.2论坛表

序号列名数据类型说明允许空
1IdIntid否
2forum_nameString帖子标题是
3gongyingshang_idInteger农产品供应商是
4wuliugongsi_idInteger农产品物流公司是
5yonghu_idInteger用户是
6users_idInteger管理员是
7forum_contentString发布内容是
8super_idsInteger父id是
9forum_state_typesInteger帖子状态是
10insert_timeDate发帖时间是
11update_timeDate修改时间是
12create_timeDate创建时间是

表4.3农产品供应商表

序号列名数据类型说明允许空
1IdIntid否
2gongyingshang_nameString供应商姓名是
3gongyingshang_photoString头像是
4gongyingshang_phoneString联系方式是
5gongyingshang_emailString邮箱是
6gongyingshang_typesInteger供应商类型是
7gongyingshang_contentString简介是
8gongyingshang_deleteInteger假删是
9create_timeDate创建时间是

表4.4论坛表

序号列名数据类型说明允许空
1IdIntid否
2news_nameString公告标题是
3news_typesInteger公告类型是
4news_photoString公告图片是
5insert_timeDate添加时间是
6news_contentString公告详情是
7create_timeDate创建时间是

表4.5农产品委托表

序号列名数据类型说明允许空
1IdIntid否
2nongchanpinweituo_nameString委托标题是
3nongchanpinweituo_typesInteger委托类型是
4nongchanpinweituo_photoString封面是
5nongchanpinweituo_kucun_numberInteger委托数量是
6nongchanpinweituo_contentString委托详情是
7nongchanpinweituo_deleteInteger逻辑删除是
8insert_timeDate录入时间是
9create_timeDate创建时间是

表4.6农产品配送表

序号列名数据类型说明允许空
1IdIntid否
2peisong_nameString配送标题是
3yonghu_idInteger用户是
4peisong_typesInteger配送状态是
5peisong_kucun_numberInteger配送数量是
6peisong_contentString配送详情是
7peisong_deleteInteger逻辑删除是
8insert_timeDate录入时间是
9create_timeDate创建时间是

表4.7农产品物流公司表

序号列名数据类型说明允许空
1IdIntid否
2wuliugongsi_nameString物流公司姓名是
3wuliugongsi_photoString头像是
4wuliugongsi_phoneString联系方式是
5wuliugongsi_emailString邮箱是
6wuliugongsi_typesInteger物流公司类型是
7wuliugongsi_contentString仓库信息简介是
8wuliugongsi_deleteInteger假删是
9create_timeDate创建时间是

表4.8用户表

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

表4.9管理员表

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

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>

声明

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

赐你岁月如歌
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2023计算机毕业设计SSM最新选题之javaJava青年志愿者信息管理系统15925
JAVA程序设计
09-06 652
但有的老师可能让你们做算法；如果老师没有给你们指方向，那就自己选题，可以去下面选题领取选题相关的系统代码参考。ssm基于SSM框架在线电影评论投票系统3gr0f。ssm基于web的汉字文化交流学习系统9xnt6。ssm基于ssm框架的流浪动物保护平台68249。ssm基于VUE的高校学生社团管理系统756g1。ssm基于SSM框架的人力资源管理系统89kq5。ssm基于JAVAEE的车检预约系统846ks。ssm基于中职学校的校医务室管理系统fb558。ssm基于SSM框架的旅游管理系统iz05y。
农产品智慧物流系统pf.zip
02-25
① 系统环境:Windows/Mac ② 开发语言：Java ③ 框架：SpringBoot ④ 架构:B/S、MVC ⑤ 开发环境:IDEA、JDK、Maven、Mysql ⑥ JDK版本：JDK1.8 ⑦ Maven包：Maven3.6 ⑧ 数据库：mysql 5.7 ⑨ 服务平台:Tomcat 8.0/...
各类Springboot管理系统源码获取
qq_26185495的博客
03-30 1010
获取方式+vx: lwbabinabin springboot001基于SpringBoot的在线拍卖系统 springboot002基于springboot的医护人员排班系统springboot003图书个性化推荐系统的设计与实现springboot004网页时装购物系统springboot005学生心理咨询评估系统springboot006基于SpringBoot的网上订餐系统springboot007大学生租房平台的设计与实现springboot008房屋租赁系统springboot009月度员工绩
Java毕业设计174例，包含部署视频
热门推荐
biyesheji1000的专栏
04-27 4万+
基于Java的毕业设计，包含部署视频，一步一步教你加载数据库，运行，功能演示
2024年最全的软件项目分享：2000+软件项目
m0_72438098的博客
12-23 4349
计算机软件毕业设计选题 选题方向 毕设题目 项目演示 电商后台管理系统 点击这里查看演示 下载资源 图书推荐系统 点击这里查看演示 下载资源 学生选课系统 点击这里查看演示 下载资源 宿舍管理系统 点击这里查看演示 下载资源 基于协同过滤算法的乐购商城 点击这里查看演示 下载资源 校医院管理系统 点击这里查看演示 下载资源
2024年1000个计算机毕业设计项目推荐（源码+论文【万字】）
计算机程序定制、毕业项目
03-19 2519
2024年最新1000个计算机毕业设计项目推荐（源码+论文【万字】）2024年最新计算机毕业设计题目推荐，项目汇总！本科、专科。项目设计、项目定制、辅导、万字文档 | 技术栈包括但不限于：Java、JavaWeb、SSM、SpringBoot、JS、CSS、vue、Python。小程序。 管理系统、在线商城、二手交易、个人博客、小程序系统等。
60分钟企业经营战略
ricky
05-04 3万+
前言前言     将本书的内容公开，可能会为我招来客户的指责。        因为下面我要说的战略构筑法——“星型战略构筑法”是我的客户需要每人花24万日元才能学到的内容。如果是员工培训的话，半天的讲座就需要付150万日元。所以，把该内容以区区1600日元的代价公开，让我隐隐感到有失信于客户的不安。        另外，尽管培训的费用很高，可在过去的4年中，每一次研修班一定会暴满，还有
2024年 最新计算机毕业设计 本科 选题大全 汇总
十多年程序猿资深互联网人，目前专注于Python/Java/大数据项目解决方案制定，提供各行业各编程语言的全套开发服务，喜爱code，喜爱分享，生命不止，编码不息！
09-20 1618
2024年 最新计算机毕业设计 本科 选题大全 汇总 Python/Java/大数据/安卓/小程序
整理一下近几年辅导的毕设项目（6）Spring Boot+MySQL
zsd12379的专栏
06-25 259
近几年辅导的毕设项目。
2025年Java毕业设计选题推荐，1000道创新创意Java毕业设计题目推荐，避免踩坑
无边热爱，来日方长
11-03 785
Java 现在依旧是 Top 1 的热门。现在很多计算机毕业的同学，都会选择Java作为毕业设计。 Java 作为毕业设计，通常需要有前端和后端。 前端通常都是展示数据给用户去看的，大多数情况下，这些数据不是写死的，而是前端请求服务器接口获取数据的。可以选用的技术栈有 Vue、HTML、JSP 等 后端Java可以用很多技术去实现，比如Java SpringBoot， Java SSM 等等等，而后端接口最终都是存取数据库中的数据，因为很多小程序存在大量的数据这些是需要存储到数据库（MySQL、Ora
springboot537农产品智慧物流系统pf.zip
06-01
《SpringBoot在农产品智慧物流系统中的应用》 随着信息技术的发展，智慧物流系统已经成为了现代农业发展的重要组成部分。在本文中，我们将深入探讨一个基于SpringBoot框架的农产品智慧物流系统，了解其设计原理、...
智慧校园管理系统pf.zip
08-19
系统可以提供信息显示和相应服务，其管理智慧校园管理系统信息，查看智慧校园管理系统信息，管理智慧校园管理系统。 总之，智慧校园管理系统集中管理信息，有着保密性强，效率高，存储空间大，成本低等诸多优点。它...
智慧物流小程序--pf.zip
08-19
系统可以提供信息显示和相应服务，其管理智慧物流小程序信息，查看智慧物流小程序信息，管理智慧物流小程序。 总之，智慧物流小程序集中管理信息，有着保密性强，效率高，存储空间大，成本低等诸多优点。它可以降低...
运维学习————nginx2-配置详解及负载均衡
m0_73376570的博客
08-20 499
是个主模块指令，用来定义全局错误日志文件。为了保证服务的高可用，服务单元往往都是集群化(相同服务部署多份)部署的，当服务消费者消费服务时，负载均衡组件(F5（硬负载）,nginx,ribbon,dubbo（软负载）)获取服务提供者所有实例的注册信息，并通过一定的。通过location指令来对网页URL进行分析处理，所有扩展名以.gif、.jpg、.jpeg、.png、.bmp、.swf结尾的静态文件都交给nginx处理，而expires用来指定静态文件的过期时间，这里是30天。指定响应客户端的超时时间。
从零开始搭建 LVS 高性能集群 (DR模式)
qq_36652517的博客
08-16 645
本设计方案采用三台服务器构建集群，使用(LVS) 作为负载均衡器，运行在直接路由 (DR)模式下。集群中的每一台服务器都将运行相同的服务，以实现和。LVS将作为前端节点，接收所有进入的请求，并将它们分发到后端服务器。
SQL— DDL语句学习【后端 9】
delepaste的博客
08-15 1543
DDL是SQL中用于定义数据库结构的部分，它允许我们创建、修改或删除数据库对象。在数据库设计阶段，DDL语句是不可或缺的工具。
四、前后端分离通用权限系统（4）
最新发布
Daniel的博客
08-20 345
前端工程师“”源自于美国。大约从2005年开始正式的前端工程师角色被行业所认可，到了2010年，互联网开始全面进入移动时代，前端开发的工作越来越重要。最初所有的开发工作都是由后端工程师完成的，随着业务越来越繁杂，工作量变大，于是我们将项目中的可视化部分和一部分交互功能的开发工作剥离出来，形成了前端开发。由于互联网行业的急速发展，导致了在不同的国家，有着截然不同的分工体制。在日本和一些人口比较稀疏的国家，例如加拿大、澳大利亚等，流行“Full-Stack Engineer”，也就是我们通常所说的。
Nginx--代理与负载均衡（扩展nginx配置7层协议及4层协议方法、会话保持）
小李学不完的博客
08-17 1309
upstream模块允许Nginx定义一组或多组节点服务器组，使用时可以通过proxy_pass代理方式把网站的请求发送到事先定义好的对应upstream组的名字上，具体写法为：server_pools就是一个upstream节点服务器组名字。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值