@TOC
ssm068海鲜自助餐厅系统+vue
绪论
1.1 选题背景
网络技术和计算机技术发展至今，已经拥有了深厚的理论基础，并在现实中进行了充分运用，尤其是基于计算机运行的软件更是受到各界的关注。计算机软件可以针对不同行业的营业特点以及管理需求，设置不同的功能，可以符合各个行业的实际运营要求，其快速便捷的信息处理模式已经可以让信息的管理者从繁琐的工作中得到解脱，还可以实现数据的易维护和安全性。加上现在人们已经步入信息时代，所以对于信息的宣传和管理就很关键。因此信息化管理模式也是当今的管理趋势。对于海鲜餐厅信息，如果仍使用旧办法进行，将会影响其在行业中的竞争力，也很容易被时代淘汰，所以海鲜餐厅信息的管理计算机化，系统化是必要的。设计开发海鲜自助餐厅系统不仅会节约人力和管理成本，还会安全保存庞大的数据量，对于海鲜餐厅信息的维护和检索也不需要花费很多时间，非常的便利。
1.2 选题意义
海鲜自助餐厅系统在实际运用中，对管理员的综合素质的提升也有帮助。因为海鲜自助餐厅系统在减轻了海鲜餐厅信息管理人员的工作量的同时，还可以让他们把节省出来的时间用来充实自己，提升个人能力，这样才可以充分发挥海鲜自助餐厅系统提供的服务，让海鲜自助餐厅系统显示数据信息的同时，也可以快速完成数据处理，提升服务水平。而且海鲜自助餐厅系统开发需要投入的成本较低，但是后期运用中，会产生大量效益，尤其是海鲜自助餐厅系统在进行高负荷运转时，还可以保证数据处理的质量与数据安全，通过对处理工作的流程的优化，可以节省传统模式需要投入的人力和资金，从而降低信息管理的成本。另外，海鲜自助餐厅系统在让海鲜餐厅信息规范化的同时，也能及时通过数据输入的有效性规则检测出错误数据，让数据的录入达到准确性的目的，进而提升海鲜自助餐厅系统提供的数据的可靠性，让系统数据的错误率降至最低。
1.3 研究内容
按照设计开发一个系统的常用流程来描述系统，可以把系统分成分析阶段，设计阶段，实现阶段，测试阶段。所以在编写系统的说明文档时，根据系统所处的阶段来描述系统的内容。
绪论：这是对选题的背景，意义等内容做出介绍。
系统开发技术：这是对系统即将使用的技术，包括使用的工具，编程的语言等做出介绍。
系统分析：这是对系统做出分析，包括投资前期必备的可行性分析，包括对用户调研获取的需求，包括系统运行具备的性能等内容做出介绍。
系统设计：这是对系统进行设计，包括运用绘图工具设计的系统功能结构，包括设计的在数据库中要创建的数据表的存储结构等内容做出介绍。
系统实现：这是对系统进行编码实现。包括实现的系统各个模块的运行效果等内容做出介绍。
系统测试：这是对编制的系统进行测试。包括功能的测试等内容做出介绍。
2 系统开发技术
这部分内容主要介绍本系统使用的技术，包括使用的工具，编程的语言等内容。
2.1 Java语言
Java语言自公元1995年至今，已经超过25年了，依然在软件开发上面有很大的市场占有率。当年Sun公司发明Java就是为了发展一门跨平台的高级编程语言，让程序开发人员专注于程序开发过程，不需要关注服务器是属于哪个平台，因为跨平台的特性让语言发展的很迅速。Java的发展，吸收了C++这些语言的优点，因为新生事物一般就是解决老旧事物一些痛点的，虽然Java也有很多缺点，但是起码也算是一种发展方向。学习Java不需要太多的指针这些理念，也不用学习太过复杂的数据结构理论，比如什么堆栈这些概念，除非某些特殊行业对这些要求相当严谨之外，一般用Java开发程序是不用考虑各种各样的数据结构的。因为Java属于一种强类型语言，已经对各种数据定义了各种相应的类型。Java对数据类型定义分为两大种，一种是基本类型，含有8个基本属性，另一个是包装类。基本类和包装类从根本的定义上，都有很明显的区分，计算机运行也会有很明显的差别，如果用错了会编译错误还会影响运行效果的，Java的各种优点只需要按部就班的学习使用即可。
2.2 SSM框架
本课题开发的应用程序主要采用的框架技术是SSM，是Java语言的一种框架集合的简称，目前在Java语言方面，主要有两大分支，一个是主攻Java语言，学习了Java基础之后，会有很多Java进阶框架进行学习，主要是针对应用程序后台进行开发设计，另一方面是转行去学习安卓语言，主要是做安卓的前端设计方面，虽然也是Java语言，但是主要去学习安卓平台的各种架构和框架了。但是不管前端应用如何，SSM框架主要是针对服务端方面进行开发的一个主流框架集合。针对于传统的SSH框架的臃肿，配置繁琐，不管是开发还是二次开发都会造成时间上大量的浪费，并且学习上面也不能有效衔接，需要去适应框架的各种设计，而框架设计比较死板，容易出错。SSM框架是当前最流行的，告别了繁琐的配置，让配置更加灵活，让数据操作更加方便，选择SSM框架进行开发感觉是很合适的。
2.3 MYSQL数据库
关系型数据库设计，对于数据库字段类型的设计以及字段长度的设计，都无时无刻的影响着后续程序开发后大量数据操作的运行效率。关系型数据库对不同的字段类型都有解释，本着课题所需的应用程序开发，寻找最适合的关系型数据库，基本上都有考虑。关系型数据库发展至今也有几十年了，优胜劣汰导致到现在还依然存在的关系型数据库其实并不多，基本上也都能满足应用程序的功能所需，所以要从其他方面来进行考虑数据库的选择。从安装维护上面考虑，SQL Server数据库有好几个G的安装包，并且安装过程中会安装很多不需要的功能，非常占用资源。Oracle数据库不比SQL Server安装包小，并且安装也会出现很多问题，对于课题所需来讲，没必要这么麻烦，并且安装还需要各种激活，只有MySQL数据库完全适合，几十兆大小的安装包，运行起来压力不大，毕竟开发电脑上还有很多其他有用的东西，而且完全免费，所以选择了MySQL数据库作为首选数据库。
2.4 Vue框架
Vue就是Vue.js框架，是用来构建用户在浏览器访问界面的一种渐进式框架。在学习Vue框架之前需要先学习网页构建的基本知识，那就是HTML以及CSS和JavaScript这些语言的规则。Vue就是在这个基础之上，只关注视图层次，采用从底层到上层的增量开发设计。Vue的目标就是让相应的数据绑定与视图组件结合在一起，尽情的通过API来实现，而不需要内容与动态显示内容写到一起，使用Vue使程序开发人员彻底的从网页设计和后台开发进行了彻底分离，使得程序开发人员更加专注于自己专业领域的开发，不管是从可读性还是写作性上面，都会让开发效率获得提升。使用Vue需要注意的是不支持IE8浏览器以及IE8以下的所有版本的浏览器，只支持IE8以上比较新的浏览器版本。
3 系统分析
这部分内容虽然在开发流程中处于最开始的环节，但是它对接下来的设计和实现起着重要的作用，因为系统分析结果的好坏，将直接影响后面环节的开展。
3.1可行性研究
影响系统开发的因素有很多，比如开发成本高就不适合开展，或者是开发时间超过了预期，也不适合开展等等。所以，在正式作出开发决策前，研究系统可行性问题，从经济，时间，操作等角度论证系统是否可以开展。
3.1.1经济可行性
海鲜自助餐厅系统可以简化工作流程，提供信息处理功能，并可以长期保存数据，在后期的数据查询与编辑中耗时少，提升信息管理效率，其带来的收益比较可观。对于本系统开发，无论是开发需要使用的计算机，还是开发工具等投入的成本很低，计算机是机房的电脑，开发工具是从网上下载安装的，并没有收取费用。
3.1.2时间可行性
海鲜自助餐厅系统是作为本人毕设项目的一个作品，学院也充分预留了制作时间，并且在每个时间段，都安排了相应的任务，所以根据这个时间安排开展工作，是可以对本系统进行设计完成的。
3.1.3操作可行性
随着电脑的普及，已经有很多人可以独立操作电脑了。而本系统就是在配置了运行环境的电脑上运行，其功能简单，省去了很多繁琐的操作逻辑，使用者通过页面导航可以直接进入功能操作区，所以稍微懂点电脑的人，都可以轻松完成系统的使用。
综上所述，本系统可以开展接下来的工作了。
3.2系统性能分析
为了降低本系统在实际使用中的出错率，就需要分析系统具备的性能。常见的可以评估系统的性能的指标有安全性，易用性，健壮性等。
3.2.1系统易用性
系统提供的信息和服务都有特定的用户群，所以，一个容易操作的系统相比一个不方便使用的系统来讲，用户还是更加青睐于使用方便的系统。所以系统具备易用性就显得非常重要。
3.2.2系统健壮性
系统在与用户进行交互过程中，面对用户的误操作行为，系统应该有相应的处理这种问题的反馈机制，而不是进入系统崩溃状态。系统中设置了很多的功能，在应对系统中某个功能出现异常情况时，系统的其它功能还是可以让用户使用。这就是系统健壮性的体现。
3.2.3系统安全性
保存在系统里面的数据，都是比较重要的系统资源，一旦这些资源泄露，不仅会有财产损失，还会丧失很多客户。所以，系统里面的数据要随时都处于安全的环境中，因此就需要采取措施保证数据安全，比如设置登录功能，使用安全验证技术引导条件用户进入指定页面，而让非条件用户停留在登录页面，不能访问系统。
3.3 系统流程分析
软件开发设计的思想始终贯穿本系统，其开发流程见下图。前期需要进行功能分析，功能设计，还有对系统后台支持数据库的设计，利用编码技术对设计的系统进行实现，然后检测和完善。
图3.1系统开发流程图
访问者之所以可以访问海鲜自助餐厅系统，主要是其数据库有该访问者的记录信息，这个记录是通过注册进行写入的数据。注册流程见下图。每当访问者进行海鲜自助餐厅系统注册时，其登记的每条记录都会在系统后台进行逐个判断。这个判断规则是提前设置的。一旦该访问者的登记信息在数据库中保存，即代表该访问者成为海鲜自助餐厅系统中的一份子。
图3.2 注册流程图
访问者操作系统，前提是需要验证身份，而登录功能的设置就是把本系统的用户引导进入后台操作区，把不是本系统的用户拒之门外。其流程见下图。
图3.3 登录流程图
3.4系统功能分析
在明确系统的用途，以及系统的目标用户群后，可以对本系统的功能进行设置，可以获取调研用户对功能的要求，也可以对市场上同类系统进行分析和总结，得出本系统的功能。
海鲜自助餐厅系统设置了管理员权限，其用例图见下图。管理员登录进入本人后台之后，管理食物库存，海鲜信息，管理预订和未预定餐桌，管理订单流水。
图3.4 管理员用例图
海鲜自助餐厅系统设置了用户权限，其用例图见下图。用户预订餐桌，对海鲜进行点餐，查看订单记录。
图3.5 用户用例图
4 系统设计
当前，系统的类型有很多，从系统呈现的内容来看，系统的类型有社交类，有商业类，有政府类，有新闻类等。那么，在众多系统类型中，先明确将要设计的系统的类型才是系统设计的首要工作，然后在此基础上明确系统的用户群，功能等，针对这些信息设计出具有独特体验和视觉的系统。如此才能让系统比较具有特色，也能够在众多相似系统中给用户留下深刻印象。
4.1系统目标
本系统在功能制定上，严格参照用户的要求，但是在设计本系统时，也要满足易操作，使用便利的设计要求。由此，设计出一个规范化并且符合用户需求的系统，一定要达到下述系统目标。
第一个系统目标：用户与系统之间的操作方式是基于人机对话，可视化界面的设计除了美观性之外，也具备友好性。可视化界面提供的各类信息符合准确性，可靠性的要求，并能够方便用户灵活查看。
第二个系统目标：用户与系统交互产生的数据，要严格规范的保存在数据库里，无论是后期管理人员查找与管理，都要确保数据安全。
第三个系统目标：实现用户需求的功能。根据对用户的调查得出的功能需求，完成海鲜自助餐厅系统的设计与实现。
第四个系统目标：在必要环节，对用户登记的数据进行检查，包括数据长度，以及数据输入类型等的检查，发现错误及时反馈，引导用户规范登记数据。常见的有密码修改，注册登录，用户资料填写等环节的数据核验。
第五个系统目标：设计开发本系统，需要尽最大努力，在系统具备易操作的特点外，也要求系统于后期使用中，维护方便，让系统具备易维护的特点。
第六个系统目标：本系统在交付用户使用时，可以达到运行稳定的目标，另外，系统具备安全性，也符合可靠性的条件，用户可以放心使用。
4.2功能结构设计
前面所做的功能分析，只是本系统的一个大概功能，这部分需要在此基础上进行各个模块的详细设计。
设计的管理员的详细功能见下图，管理员登录进入本人后台之后，管理食物库存，海鲜信息，管理预订和未预定餐桌，管理订单流水。
图4.1 管理员功能结构图
设计的用户的详细功能见下图，用户预订餐桌，对海鲜进行点餐，查看订单记录。
图4.2 用户功能结构图
4.3数据库设计
相比非关系型数据库来说，目前市场上使用率比较高，并且易于维护的数据库，当数关系型数据库了。这个数据库主要是基于关系模型的方式来对数据信息进行组织。也就是常见的二维表模型。可以说二维表和二维表之间的相互联系就构成了关系型数据库。
4.3.1数据库E-R图
为了更好地保存海鲜自助餐厅系统产生的数据，就需要在数据库的设计阶段对E-R模型进行建立，以及完成数据库中的表结构的创建。之所以要单独完成数据库的设计，主要有以下几点原因：
第一点：防止代码冗余；
第二点：防止占用过多内存；
第三点：提升数据库的整体性能，方便程序开发以及数据更新；
第四点：保证数据的完整性；
本部分内容主要在于建立本系统的E-R模型，需要先收集数据，然后根据数据库实现的思路，对用户的需求进行分析，这期间需要对实体，属性，还有关系进行标识，为绘制E-R模型做好充足准备。同时，在作图中，也要注意作图规范，注意每个符号的正确使用。
（1）设计的海鲜实体，其具备的属性见下图。
图4.4 海鲜实体属性图
（2）设计的管理员实体，其具备的属性见下图。
图4.5 管理员实体属性图
（3）设计的用户实体，其具备的属性见下图。
图4.6 用户实体属性图
（4）设计的餐桌实体，其具备的属性见下图。
图4.7 餐桌实体属性图
（5）设计的各实体间关系见下图。
图4.8 实体间关系E-R图
4.3.2 数据库表结构
为了设计出结构合理，性能优良的数据库，在设计数据库时，需要遵循三大范式：
第一范式：确保数据表当中的每列所代表的字段值都不能再进行分解了；
第二范式：在满足第一范式基础上，让数据表中每列与主键相关；
第三范式：在满足第二范式基础上，确保每列数据直接与主键相关，不是间接相关。
从上面的表述中可以看出，这三大范式，在等级上还是有区分的，最低等级的就数第一范式，最高等级的就是第三范式，趋于两者中间的是第二范式。总之，数据库设计按照这三大范式进行，可以简化设计过程，并且还会减少数据冗余，对于数据检索效率的提升也很有帮助。
表4.1 餐桌信息表
| 字段 | 类型 | 空 | 默认 | 注释 |
|---|---|---|---|---|
| id (主键) | int(20) | 否 | 主键 | |
| name | varchar(200) | 是 | NULL | 餐桌名称 |
| tableLocation | varchar(200) | 是 | NULL | 餐桌位置 |
| sf_types | tinyint(4) | 是 | NULL | 是否预定 |
表4.2 订单详情信息表
| 字段 | 类型 | 空 | 默认 | 注释 |
|---|---|---|---|---|
| id (主键) | int(20) | 否 | 主键 | |
| odd | varchar(200) | 是 | NULL | 订单号 |
| hx_types | tinyint(4) | 是 | NULL | 海鲜名称 |
| number | int(4) | 是 | NULL | 数量 |
| money | decimal(10,2) | 是 | NULL | 单价 |
表4.3 海鲜信息表
| 字段 | 类型 | 空 | 默认 | 注释 |
|---|---|---|---|---|
| id (主键) | int(20) | 否 | 主键 | |
| hx_types | tinyint(4) | 是 | NULL | 海鲜名称 |
| money | decimal(10,2) | 是 | NULL | 海鲜单价 |
| img_photo | varchar(200) | 是 | NULL | 海鲜图片 |
| haixian_content | varchar(200) | 是 | NULL | 海鲜描述 |
表4.4 库存信息表
| 字段 | 类型 | 空 | 默认 | 注释 |
|---|---|---|---|---|
| id (主键) | int(20) | 否 | 主键 | |
| name | varchar(200) | 是 | NULL | 海鲜名称 |
| number | int(4) | 是 | NULL | 库存数量 |
表4.5 流水信息表
| 字段 | 类型 | 空 | 默认 | 注释 |
|---|---|---|---|---|
| id (主键) | int(20) | 否 | 主键 | |
| odd | varchar(200) | 是 | NULL | 订单号 |
| cz_types | tinyint(4) | 是 | NULL | 餐桌名称 |
| yh_types | tinyint(4) | 是 | NULL | 预定用户 |
| sf_types | tinyint(4) | 是 | NULL | 是否支付 |
| maxMoney | decimal(10,2) | 是 | NULL | 总价 |
| create_time | timestamp | 是 | NULL | 支付时间 |
表4.6 管理员信息表
| 字段 | 类型 | 空 | 默认 | 注释 |
|---|---|---|---|---|
| id (主键) | int(20) | 否 | 主键 | |
| username | varchar(100) | 否 | 用户名 | |
| password | varchar(100) | 否 | 密码 | |
| role | varchar(100) | 否 | 管理员 | 角色 |
| addtime | timestamp | 否 | CURRENT_TIMESTAMP | 新增时间 |
表4.7 用户信息表
| 字段 | 类型 | 空 | 默认 | 注释 |
|---|---|---|---|---|
| id (主键) | int(20) | 否 | 主键 | |
| name | varchar(200) | 是 | NULL | 名称 |
| username | varchar(255) | 是 | NULL | 账号 |
| password | varchar(255) | 是 | NULL | 密码 |
| img_photo | varchar(255) | 是 | NULL | 头像 |
| sex_types | tinyint(4) | 是 | NULL | 性别 |
| phone | varchar(200) | 是 | NULL | 手机号 |
| role | varchar(255) | 是 | NULL | 身份 |
表4.8 预定餐桌信息表
| 字段 | 类型 | 空 | 默认 | 注释 |
|---|---|---|---|---|
| id (主键) | int(20) | 否 | 主键 | |
| cz_types | tinyint(4) | 是 | NULL | 餐桌名称 |
| yh_types | tinyint(4) | 是 | NULL | 预定用户 |
| create_time | timestamp | 是 | NULL | 预定时间 |
5 系统实现
在此部分内容中，主要通过系统功能的运行效果图展示前面设计的最终结果。系统实现对编制人员的技术能力有较高要求，因为需要他们使用编程的方式去实现系统设计的方案。
5.1 管理员功能实现
5.1.1 食物库存管理
管理员权限中的食物库存管理，其运行效果见下图。管理员查看各种海鲜的库存数量，可以根据海鲜名称查询海鲜库存，能够修改海鲜库存，删除海鲜库存信息。
图5.1 食物库存管理页面
5.1.2 海鲜展示管理
管理员权限中的海鲜展示管理，其运行效果见下图。管理员新增海鲜信息，可以修改海鲜名称，海鲜图片，海鲜单价等信息，可以删除海鲜信息。
图5.2 海鲜展示管理页面
5.1.3 未预定餐桌管理
管理员权限中的未预定餐桌管理，其运行效果见下图。管理员根据餐桌名称查询未预定餐桌信息，可以对未预定餐桌信息进行修改，删除。
图5.3 未预定餐桌管理页面
5.1.4 流水管理
管理员权限中的流水管理，其运行效果见下图。管理员查询订单流水信息，设置用户已支付的订单为已支付状态。
图5.4 流水管理页面
5.2 用户功能实现
5.2.1 海鲜点餐
用户权限中的海鲜点餐，其运行效果见下图。用户在已经预订餐桌的情况下，在本页面对需要的海鲜登记点餐数量，最后提交点餐订单即可。
图5.6 海鲜点餐页面
5.2.2 未预定餐桌
用户权限中的未预定餐桌，其运行效果见下图。用户选择未预定状态的餐桌进行预订。
图5.7 未预定餐桌页面
5.2.3 已预订餐桌
用户权限中的已预订餐桌，其运行效果见下图。用户可以查看已预订餐桌信息，可以取消已经预订的餐桌。
图5.8 已预订餐桌页面
5.2.4 订单记录
用户权限中的订单记录，其运行效果见下图。用户查看在该餐厅消费的订单明细。
图5.9 订单记录页面
系统
HaixianServiceImpl.java
package com.service.impl;
import org.springframework.stereotype.Service;
import java.util.Map;
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 com.dao.HaixianDao;
import com.entity.HaixianEntity;
import com.service.HaixianService;
import com.entity.view.HaixianView;
/**
* 海鲜表 服务实现类
* @since 2021-03-08
*/
@Service("haixianService")
@Transactional
public class HaixianServiceImpl extends ServiceImpl<HaixianDao, HaixianEntity> implements HaixianService {
@Override
public PageUtils queryPage(Map<String,Object> params) {
if(params != null && (params.get("limit") == null || params.get("page") == null)){
params.put("page","1");
params.put("limit","10");
}
Page<HaixianView> page =new Query<HaixianView>(params).getPage();
page.setRecords(baseMapper.selectListView(page,params));
return new PageUtils(page);
}
}
DingdanxiangqingServiceImpl.java
package com.service.impl;
import org.springframework.stereotype.Service;
import java.util.Map;
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 com.dao.DingdanxiangqingDao;
import com.entity.DingdanxiangqingEntity;
import com.service.DingdanxiangqingService;
import com.entity.view.DingdanxiangqingView;
/**
* 订单详情 服务实现类
* @since 2021-03-09
*/
@Service("dingdanxiangqingService")
@Transactional
public class DingdanxiangqingServiceImpl extends ServiceImpl<DingdanxiangqingDao, DingdanxiangqingEntity> implements DingdanxiangqingService {
@Override
public PageUtils queryPage(Map<String,Object> params) {
if(params != null && (params.get("limit") == null || params.get("page") == null)){
params.put("page","1");
params.put("limit","10");
}
Page<DingdanxiangqingView> page =new Query<DingdanxiangqingView>(params).getPage();
page.setRecords(baseMapper.selectListView(page,params));
return new PageUtils(page);
}
}
CommonUtil.java
package com.utils;
import java.util.Random;
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();
}
}
add-or-update.vue
<template>
<div class="addEdit-block">
<el-form
class="detail-form-account"
ref="ruleForm"
:model="ruleForm"
:rules="rules"
label-width="80px"
:style="{backgroundColor:addEditForm.addEditBoxColor}"
>
<el-row>
<input id="updateId" name="id" type="hidden">
<el-col :span="12">
<el-form-item class="input" v-if="type!='info'" label="海鲜名称" prop="name">
<el-input v-model="ruleForm.name"
placeholder="海鲜名称" clearable></el-input>
</el-form-item>
<div v-else>
<el-form-item class="input" label="海鲜名称" prop="name">
<el-input v-model="ruleForm.name"
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="number">
<el-input v-model="ruleForm.number" type="number"
placeholder="库存数量"></el-input>
</el-form-item>
<div v-else>
<el-form-item class="input" label="库存数量" prop="number">
<el-input v-model="ruleForm.number"
placeholder="库存数量" readonly></el-input>
</el-form-item>
</div>
</el-col>
</el-row>
</el-row>
<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>
// 数字，邮件，手机，url，身份证校验
import { isNumber,isIntNumer,isEmail,isPhone, isMobile,isURL,checkIdCard } from "@/utils/validate";
export default {
data() {
let self = this
return {
addEditForm: {"btnSaveFontColor":"#fff","selectFontSize":"14px","btnCancelBorderColor":"#DCDFE6","inputBorderRadius":"4px","inputFontSize":"14px","textareaBgColor":"#fff","btnSaveFontSize":"14px","textareaBorderRadius":"4px","uploadBgColor":"#fff","textareaBorderStyle":"solid","btnCancelWidth":"88px","textareaHeight":"120px","dateBgColor":"#fff","btnSaveBorderRadius":"4px","uploadLableFontSize":"14px","textareaBorderWidth":"1px","inputLableColor":"#606266","addEditBoxColor":"rgba(245, 247, 250, 1)","dateIconFontSize":"14px","btnSaveBgColor":"#409EFF","uploadIconFontColor":"#8c939d","textareaBorderColor":"#DCDFE6","btnCancelBgColor":"#ecf5ff","selectLableColor":"#606266","btnSaveBorderStyle":"solid","dateBorderWidth":"1px","dateLableFontSize":"14px","dateBorderRadius":"4px","btnCancelBorderStyle":"solid","selectLableFontSize":"14px","selectBorderStyle":"solid","selectIconFontColor":"#C0C4CC","btnCancelHeight":"44px","inputHeight":"40px","btnCancelFontColor":"#606266","dateBorderColor":"#DCDFE6","dateIconFontColor":"#C0C4CC","uploadBorderStyle":"solid","dateBorderStyle":"solid","dateLableColor":"#606266","dateFontSize":"14px","inputBorderWidth":"1px","uploadIconFontSize":"28px","selectHeight":"40px","inputFontColor":"#606266","uploadHeight":"148px","textareaLableColor":"#606266","textareaLableFontSize":"14px","btnCancelFontSize":"14px","inputBorderStyle":"solid","btnCancelBorderRadius":"4px","inputBgColor":"#fff","inputLableFontSize":"14px","uploadLableColor":"#606266","uploadBorderRadius":"4px","btnSaveHeight":"44px","selectBgColor":"#fff","btnSaveWidth":"88px","selectIconFontSize":"14px","dateHeight":"40px","selectBorderColor":"#DCDFE6","inputBorderColor":"#DCDFE6","uploadBorderColor":"#DCDFE6","textareaFontColor":"#606266","selectBorderWidth":"1px","dateFontColor":"#606266","btnCancelBorderWidth":"1px","uploadBorderWidth":"1px","textareaFontSize":"14px","selectBorderRadius":"4px","selectFontColor":"#606266","btnSaveBorderColor":"#409EFF","btnSaveBorderWidth":"1px"},
id: '',
type: '',
ro:{
name: false,
number: false,
},
ruleForm: {
name: '',
number: '',
},
rules: {
name: [
{ required: true, message: '海鲜名称不能为空', trigger: 'blur' },
],
number: [
{ required: true, message: '库存数量不能为空', trigger: 'blur' },
],
},
};
},
props: ["parent"],
computed: {
},
created() {
this.addEditStyleChange()
this.addEditUploadStyleChange()
},
methods: {
// 下载
download(file){
window.open(`${file}`)
},
// 初始化
init(id,type) {
if (id) {
this.id = id;
this.type = type;
}
if(this.type=='info'||this.type=='else'){
this.info(id);
}else if(this.type=='cross'){
var obj = this.$storage.getObj('crossObj');
for (var o in obj){
if(o=='name'){
this.ruleForm.name = obj[o];
this.ro.name = true;
continue;
}
if(o=='number'){
this.ruleForm.number = obj[o];
this.ro.number = true;
continue;
}
}
}
// 获取用户信息
this.$http({
url: `${this.$storage.get('sessionTable')}/session`,
method: "get"
}).then(({ data }) => {
if (data && data.code === 0) {
var json = data.data;
} else {
this.$message.error(data.msg);
}
});
},
// 多级联动参数
info(id) {
this.$http({
url: `kuchuen/info/${id}`,
method: "get"
}).then(({ data }) => {
if (data && data.code === 0) {
this.ruleForm = data.data;
} else {
this.$message.error(data.msg);
}
});
},
// 提交
onSubmit() {
this.$refs["ruleForm"].validate(valid => {
if (valid) {
this.$http({
url: `kuchuen/${!this.ruleForm.id ? "save" : "update"}`,
method: "post",
data: this.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.xueshengCrossAddOrUpdateFlag = false;
this.parent.search();
}
});
} else {
this.$message.error(data.msg);
}
});
}
});
},
// 获取uuid
getUUID () {
return new Date().getTime();
},
// 返回
back() {
this.parent.showFlag = true;
this.parent.addOrUpdateFlag = false;
this.parent.xueshengCrossAddOrUpdateFlag = false;
},
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-account {
padding: 12px;
}
.btn .el-button {
padding: 0;
}
</style>
声明
本博客适用于广泛的学术和教育用途，包括但不限于个人学习、开发设计，产品设计。仅供学习参考，旨在为读者提供深入理解和学术研究的材料。
