网站建设中的服务器搭建方式,抄一则新闻四年级,网站模块分类,网站建设罒金手指下拉壹陆TOC
springboot364高校科研信息管理系统pf
第1章 绪论
1.1 研究背景
互联网概念的产生到如今的蓬勃发展#xff0c;用了短短的几十年时间就风靡全球#xff0c;使得全球各个行业都进行了互联网的改造升级#xff0c;标志着互联网浪潮的来临。在这个新的时代#xff0c;…TOC
springboot364高校科研信息管理系统pf
第1章 绪论
1.1 研究背景
互联网概念的产生到如今的蓬勃发展用了短短的几十年时间就风靡全球使得全球各个行业都进行了互联网的改造升级标志着互联网浪潮的来临。在这个新的时代各行各业都充分考虑互联网是否能与本行业进行结合是否能解决本行业或者本行业中某些方面的自古以来的痛点。长期以来数据内容数据传播数据储存等都是一门门专业的内容因为需要记住的内容很多造成古人的言简意赅如今互联网的到来让数据更加的清晰好认不复杂一目了然不出错毕竟在整个历史上数据的丢失传承的断代都是因为数据不能好好的保存不能好好的流传。当年的年代用互联网思维和互联网技术对大量数据的录入更新存储汇总备份分析方面使得远远的超过传统的数据管理技术。在这样的时代潮流下采用新技术开发新软件对传统行业进行革命性的改造成为了当今的主流。本次开发高校科研信息管理系统解决了科研项目信息管理关于数据方面的管理分析存储传输的痛点不仅仅对管理员提供了便利还能提高用户的满意度。
1.2目的和意义
此次高校科研信息管理系统的开发需要用到的知识不仅涉及到界面设计与功能设计方面的知识还需要涉及到数据库与编程语言上面的知识这些知识点对于一个即将毕业的学生来说一是为了巩固在校所学相关专业知识二是为了让学生学会如何将专业理论知识运用于现实软件的开发过程三是让学生明白知识是无穷无尽的要时刻明白活到老学到老的真正含义让学生要养成时刻学习的习惯同时也要相信通过此次程序的开发会让学生对于专业知识的理解与软件开发水平的提高有着极大的帮助。
1.3 论文研究内容
论文设计的结构也是依照程序开发的流程进展的也涉及到功能需求分析功能设计与实现程序测试等流程。
绪论讲解课题的背景与意义展示论文结构。
程序开发技术讲解程序运用到的工具与技术知识。
系统分析讲解程序的功能需求与开发可行性问题。
系统设计讲解程序的功能与数据库的设计。
系统实现讲解程序功能与界面实现。
系统测试讲解程序的功能测试。
第2章 程序开发技术
2.1 Mysql数据库
开发的程序面向用户的只是程序的功能界面让用户操作程序界面的各个功能那么很多人就会问用户使用程序功能生成的数据信息放在哪里的这个就需要涉及到数据库的知识了一般来说程序开发通常就会对常用数据存储工具的特点进行分析比对比如Mysql数据库的特点与优势Access数据库的特点与优势Sqlserver数据库的特点与优势等最终看哪个数据库与需要开发的程序比较匹配也符合程序功能运行需要的数据存储要求比如需要开发商业级别的程序存储的数据对数据库要求较高可以选用Oracle如果只是比较简单的程序对数据存储没有过多要求可以选用微软旗下的Access当开发程序要求数据库占用空间小并能满足程序数据存储要求时就可以考虑Oracle公司从瑞典MySQL AB公司在很早之前就收购过一个关系型数据库它是现在的Mysql数据库。
为了更容易理解Mysql数据库接下来就对其具备的主要特征进行描述。
1首选Mysql数据库也是为了节省开发资金因为网络上对Mysql的源码都已进行了公开展示开发者根据程序开发需要可以进行下载并做一些改动就可以使用在程序中可以推动开发者开发此程序的开发进度。
2SQL数据语言在Mysql里面也同样适用
3Mysql不仅可以支持多种编程语言比如在校期间学到的C语言Java语言以及课后接触的PHP语言C语言等编程语言它都能很好的支持而且Mysql的安装与使用还不挑剔使用平台。
4Mysql可以支持具有千万条数据记录的数据库电脑操作系统在进行首次安装或者是重装时可以根据需要选择安装32位或64位操作系统这两种操作系统对表文件的支持力度不一样32位的操作系统最多可以存放4GB的表文件64位操作系统最多可以存放8TB的表文件。
5Mysql数据库可以通过GPL协议进行个性化定制需要开发者自己对数据库的源代码进行修改以此开发出属于自己的Mysql。
2.2 Java语言
程序开发语言有很多但是截至目前Java语言在IT领域内仍然是最被认可以及被广泛运用的编写语言之一因此在选择此程序的编写语言上果断选择这门编程语言进行程序开发。可以说经过了这么多年的发展Java语言不仅在Web开发领域有了突出性贡献而且在大数据开发领域以及Android开发领域都得到了广泛运用。由于Java语言拥有较强的扩展性能并且表现出的稳定性能让其成为大型后端系统开发语言首选现如今Java语言也成为了一种常用的互联网平台的解决方案。
作为一种源码在网络上开源的面向对象的程序开发Java语言由它开发完成的程序是不可能直接运行在各大平台的Java程序的运行需要在操作平台上配置其运行的环境包括数据库软件与Java程序开发软件等工具的安装与配置。在Win7Win10或其它操作平台上配置Java程序运行环境只要环境配置成功Java程序都可以运行起来。
第3章 系统分析
在进行系统分析之前需要从网络上或者是图书馆的开发类书籍中收集大量的资料因为这个环节也是帮助即将开发的程序软件制定一套最优的方案一旦确定了程序软件需要具备的功能就意味着接下来的工作和任务都是围绕着这个方案执行的所以系统分析需要对程序功能反复进行思考和研究。
3.1可行性分析
开发一款系统软件之前用户都会思考这个软件程序值不值得去开发把开发软件过程中可能涉及到的问题罗列出来并一个个分析解决以此来确定开发这款程序软件是否有必要这样的分析方法也能帮助用户降低损失不至于开发者开发进度进行到一半之后突然遇到问题就放弃对软件的开发到那时资金损失人力投入等方面就损耗太大了。
3.1.1技术可行性分析
此次开发程序使用到的开发工具有EclipseMysql等工具使用的开发语言是Java选择的开发工具和开发语言都是在大学课堂接触并学习过后期因为自己也比较感兴趣所以也通过网络渠道或借助图书馆的开发类书籍进行过软件开发知识的系统学习让自己有了一定的知识积累加上自己在校期间也独立开发过一些软件作品也积累了一定的开发经验所以这次毕设作品的制作在技术上无须担忧过多。
3.1.2经济可行性分析
目前的信息时代对信息的管理趋于高效化便捷化这也是计算机大力普及所带来的便利此程序软件在设备选用上依靠的是比较大众的电脑设备对电脑的配置没有过多要求一般学校的计算机机房的电脑都可以满足程序开发需求另外开发出此款程序让信息处理变得高效率其所带来的高效益是远超程序开发的低成本的因此程序开发的资金投入是可以忽略不计的。
3.1.3操作可行性分析
程序软件的操作界面是符合大众审美的需求功能模块的布局也是类似于社会上同种类型的软件因此使用者操作该软件可以无需培训就上手。加上现在计算机入驻各家各户大部分人的计算机操作水平都比较高这样的局面也表明开发出来的程序在操作性问题上也是不用担心的。
综合上面的可行性论证基本可以确定程序开发完全可行。
3.2系统运行环境
程序经过编码可以实现对程序设计的功能。但是编码实现时需要一定的配置环境包括了电脑上的硬件环境也包括在电脑操作系统上安装的软件环境。
硬件环境一台可以正常使用并能够上网的笔记本或者是电脑电脑内存最低要求4个G电脑的中央处理器可以配置i5CPU。
软件环境运用的微软操作系统是比较稳定的win7旗舰版系统采用比较熟练360安全浏览器并在此系统上通过浏览器下载安装好Eclipse软件下载安装好MYSQL软件等。
3.3系统流程分析
分析程序的流程涉及到程序的整体操作流程通过分析与设计绘制的程序操作流程图见下图。此程序为了确保安全会让使用者通过登录模块验证信息符合要求的使用者才有权限操作程序。 图3-1 程序操作流程图
程序处理数据会涉及到数据的录入环节绘制的添加流程见下图。程序录入数据过程中始终与数据库保持同步。 图3-2 信息添加流程图
程序里面的数据也会出现错误因此就有相应的修改数据的功能绘制的程序修改流程见下图。此过程也是跟后台数据库进行数据同步显示。 图3-3信息修改流程图
程序数据存放于数据仓库有时也会涉及到数据删除此过程对应的流程图见下图。数据信息被删除之后数据库里面也就没有了该数据信息了。 图3-4 信息删除流程图
第4章 系统设计
4.1 系统设计的原则
在系统设计过程中也需要遵循相应的设计原则这些设计原则可以帮助设计者在短时间内设计出符合设计规范的设计方案。设计原则主要有可靠性安全性可定制化可扩展性可维护性可升级性以及客户体验等原则。下面就对这些原则进行简要阐述。
可靠性一个软件是否可靠决定了其是否被用户使用设计不可靠的软件用户很容易就遗弃
安全性程序软件承担了信息的保存与管理等事务安全性不足的软件会导致使用者承担巨大的损失所以系统安全也是需要考虑进入的
可定制化市场环境从来都不是一直固定不变面对客户群体的改变以及使用环境的改变市场需求的改变等因素程序软件也要易于调整以适应各种变化
可扩展性程序软件在运行使用期间也需要及时引进当下的新技术来进行系统优化主要就是在系统功能层面系统性能层面上进行相应的扩展只有这样才能让系统在实际生活中继续占有市场
可维护性程序软件的维护需要一定量的资金不管是排除现有程序错误还是变更软件的现有需求都需要在软件技术上投入一定资金所以易于维护的软件程序就可以降低技术层面的资金消耗
可升级性程序软件的投入使用会面临用户数量增多的情况用户对软件的使用率也会提升所以系统面临这种情况仍然需要通过升级保持性能的合理这样才能够适应市场
客户体验设计出来的程序软件在界面上不能够太复杂要遵循界面设计的原理设计出简单方便操作的功能操作界面让用户易于接受软件并乐于使用软件提供的功能。
4.2 系统结构设计
在系统结构设计上经综合考虑还是选择比C/S更省资金的B/S结构模式现如今浏览器已经实现了普及并在技术上逐渐完善和成熟它在节约软件开发成本的基础上还能实现原本用专业软件操作才能实现的强大功能。总之B/S结构是当下全新的认可度高的系统构造技术。系统结构设计图通过绘制效果展示如下 图4-1 系统结构设计图
4.3功能结构设计
在管理员功能模块确定下来的基础上对管理员各个功能进行设计确定管理员功能的详细模块。绘制的管理员功能结构见下图。 图4.3 管理员功能结构图
4.4数据库设计
与功能结构设计一样数据库设计也是程序开发不可避免的设计环节数据库设计最主要的目的就是帮助运行程序存储相应的数据信息。数据库设计包含的内容有数据表结构的设计也包含了数据库E-R图的设计。
4.4.1 数据库E-R图
在绘制E-R图之前先要找出数据库的实体明确各个实体具有的属性比如用户信息这个实体它具备的属性包括了用户的姓名属性用户的密码属性用户的创建时间属性等所以明确了用户这个实体以及用户实体具备的属性之后就需要根据这些信息绘制用户实体对应的实体属性图了。绘制软件选用当下认可度高使用范围广操作便利的微软旗下的Visio工具。
1下图是反馈实体和其具备的属性。 反馈实体属性图
2下图是科研成果实体和其具备的属性。 科研成果实体属性图
3下图是公告实体和其具备的属性。 公告实体属性图
4下图是学校管理员实体和其具备的属性。 学校管理员实体属性图
5下图是操作日志实体和其具备的属性。 操作日志实体属性图
6下图是通知实体和其具备的属性。 通知实体属性图
7下图是学术活动实体和其具备的属性。 学术活动实体属性图
8下图是科研项目实体和其具备的属性。 科研项目实体属性图
9下图是科研人员实体和其具备的属性。 科研人员实体属性图
10下图是学院部门实体和其具备的属性。 学院部门实体属性图
4.4.2 数据库表结构
在进行这部分设计之前需要明白和掌握数据类型以及各个数据类型的长度范围等知识因为在一张具体的数据表中为了方便理解这里就举个简单的例子。比如用户信息表这个表格的字段就是用户这个实体具备的属性这时就需要对字段进行数据类型以及字段长度的设置也要设置一个主键来作为用户信息表的唯一标识。这些都是数据库表结构设计需要完成的内容。根据高校科研信息管理系统的功能设计以及数据库设计要求展示该系统的数据表结构。
表4.1操作日志表
序号列名数据类型说明允许空1IdIntid否2caozuorizhi_this_biaoString操作人所在表是3caozuorizhi_caozuobiaoString操作表是4caozuorizhi_caozuozhanghuString操作账户是5caozuorizhi_caozuoleixingString操作类型是6caozuorizhi_textString操作内容是7insert_timeDate操作时间是8create_timeDate创建时间是
表4.2字典表
序号列名数据类型说明允许空1IdIntid否2dic_codeString字段是3dic_nameString字段名是4code_indexInteger编码是5index_nameString编码名字是6super_idInteger父字段id是7beizhuString备注是8create_timeDate创建时间是
表4.3反馈表
序号列名数据类型说明允许空1IdIntid否2yonghu_idInteger科研人员是3fankui_uuid_numberString反馈编号是4fankui_nameString反馈名称是5fankui_typesInteger反馈类型是6fankui_contentString反馈内容是7insert_timeDate反馈时间是8create_timeDate创建时间是
表4.4公告表
序号列名数据类型说明允许空1IdIntid否2gonggao_nameString公告名称是3gonggao_photoString公告图片是4gonggao_typesInteger公告类型是5insert_timeDate公告发布时间是6gonggao_contentString公告详情是7create_timeDate创建时间是
表4.5科研成果表
序号列名数据类型说明允许空1IdIntid否2yonghu_idInteger科研人员是3keyanchengguo_uuid_numberString科研成果编号是4keyanchengguo_nameString科研成果名称是5xueke_typesInteger学科是6keyanchengguo_typesInteger成果类别是7keyanchengguo_leixing_typesInteger成果类型是8keyanchengguo_fileString附件是9keyanchengguo_contentString科研成果介绍是10insert_timeDate申请时间是11keyanchengguo_yesno_typesInteger申请状态是12keyanchengguo_yesno_textString审核意见是13create_timeDate创建时间是
表4.6科研项目表
序号列名数据类型说明允许空1IdIntid否2yonghu_idInteger科研人员是3keyanxiangmu_uuid_numberString科研项目编号是4keyanxiangmu_laiyuanString项目来源是5keyanxiangmu_nameString科研项目名称是6dengji_typesInteger项目等级是7xueke_typesInteger学科是8keyanxiangmu_huafeiInteger项目预算(元)是9kaishi_timeDate项目开始时间是10jieshu_timeDate项目结束时间是11keyanxiangmu_fileString项目申报书是12keyanxiangmu_contentString科研项目介绍是13insert_timeDate申请时间是14keyanxiangmu_yesno_typesInteger申请状态是15keyanxiangmu_yesno_textString审核意见是16keyanxiangmu_shenhe_timeDate审核时间是17keyanxiangmu_lixiang_fileString项目立项文件是18keyanxiangmu_jiexiang_fileString项目结项书是19keyanxiangmu_jiexiangwenjian_fileString项目结项文件是20create_timeDate创建时间是
表4.7通知表
序号列名数据类型说明允许空1IdIntid否2xueyuanbumen_idInteger学院部门是3tongzhi_uuid_numberString通知编号是4tongzhi_nameString通知名称是5tongzhi_typesInteger通知类型是6tongzhi_contentString通知内容是7insert_timeDate通知时间是8create_timeDate创建时间是
表4.8学术活动表
序号列名数据类型说明允许空1IdIntid否2yonghu_idInteger科研人员是3xueshuhuodong_uuid_numberString学术活动编号是4xueshuhuodong_nameString学术活动名称是5xueshuhuodong_photoString学术活动照片是6xueshuhuodong_timeDate学术活动时间是7xueshuhuodong_addressString学术活动地点是8xueshuhuodong_typesInteger学术活动类型是9xueshuhuodong_contentString学术活动内容是10insert_timeDate申请时间是11xueshuhuodong_yesno_typesInteger申请状态是12xueshuhuodong_yesno_textString审核意见是13xueshuhuodong_shenhe_timeDate审核时间是14create_timeDate创建时间是
表4.9学校管理员表
序号列名数据类型说明允许空1IdIntid否2xuexiaoguanliyuan_uuid_numberString学校管理员编号是3xuexiaoguanliyuan_nameString学校管理员姓名是4xuexiaoguanliyuan_phoneString学校管理员手机号是5xuexiaoguanliyuan_id_numberString学校管理员身份证号是6xuexiaoguanliyuan_photoString学校管理员头像是7xuexiaoguanliyuan_emailString电子邮箱是8create_timeDate创建时间是
表4.10学院部门表
序号列名数据类型说明允许空1IdIntid否2xueyuanbumen_uuid_numberString学院部门编号是3xueyuanbumen_nameString学院部门名称是4xueyuanbumen_addressString学院部门位置是5xueyuanbumen_contentString学院部门描述是6create_timeDate创建时间是
表4.11科研人员表
序号列名数据类型说明允许空1IdIntid否2xueyuanbumen_idInteger学院部门是3yonghu_uuid_numberString科研人员编号是4yonghu_nameString科研人员姓名是5yonghu_phoneString科研人员手机号是6yonghu_id_numberString科研人员身份证号是7yonghu_photoString科研人员头像是8ageInteger年龄是9yonghu_emailString电子邮箱是10zhiwu_typesInteger职务是11zhicheng_typesInteger职称是12xueli_typesInteger学历是13create_timeDate创建时间是
表4.12管理员表
序号列名数据类型说明允许空1IdIntid否2usernameString用户名是3passwordString密码是4roleString角色是5addtimeDate新增时间是 系统实现
系统实现这个章节的内容主要还是展示系统的功能界面设计效果在实现系统基本功能比如修改比如添加比如删除等管理功能的同时也显示出系统各个功能的界面实现效果该部分内容一方面与前面提到的系统分析系统设计的内容相呼应另一方面也是一个实际成果的展示。
5.1管理员功能实现
5.1.1 科研项目管理
此页面让管理员管理科研项目的数据科研项目管理页面见下图。此页面主要实现科研项目的增加、修改、删除、查看的功能。 图5-1 科研项目管理页面
5.1.2 公告信息管理
公告信息管理页面提供的功能操作有新增公告修改公告删除公告操作。下图就是公告信息管理页面。 图5.3 公告信息管理页面
5.1.3公告类型管理
公告类型管理页面显示所有公告类型在此页面既可以让管理员添加新的公告信息类型也能对已有的公告类型信息执行编辑更新失效的公告类型信息也能让管理员快速删除。下图就是公告类型管理页面。 图5.4 公告类型列表页面
第6章 系统测试
程序软件的开发阶段也包括了系统测试这个部分就是程序质量评定的一个重要环节如果说程序通过编码实现功能之后不通过测试检查程序中出现的错误那么程序一旦投入生活中运行使用时就会产生许多大大小小的错误这个时候去解决问题已经晚了所以一个程序在被交付给使用者使用之前开发者就需要使用多种测试方法反复进行测试也是对程序的一个负责表现。程序进入系统测试阶段在讲究策略进行测试时也需要对时效性进行把控。当开发者测试完程序并解决完测试期间程序产生的各种错误时就需要程序的验收方来对程序进行验收测试这也是程序测试的最后一个操作步骤。验收测试也是对程序的质量以及可交付性方面起到关键的作用。
KeyanchengguoServiceImpl.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.KeyanchengguoDao;
import com.entity.KeyanchengguoEntity;
import com.service.KeyanchengguoService;
import com.entity.view.KeyanchengguoView;/*** 科研成果 服务实现类*/
Service(keyanchengguoService)
Transactional
public class KeyanchengguoServiceImpl extends ServiceImplKeyanchengguoDao, KeyanchengguoEntity implements KeyanchengguoService {Overridepublic PageUtils queryPage(MapString,Object params) {PageKeyanchengguoView page new QueryKeyanchengguoView(params).getPage();page.setRecords(baseMapper.selectListView(page,params));return new PageUtils(page);}}
ConfigController.java package com.controller;import java.util.Arrays;
import java.util.Map;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;import com.annotation.IgnoreAuth;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.entity.ConfigEntity;
import com.service.ConfigService;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.ValidatorUtils;/*** 登录相关*/
RequestMapping(config)
RestController
public class ConfigController{Autowiredprivate ConfigService configService;/*** 列表*/RequestMapping(/page)public R page(RequestParam MapString, Object params,ConfigEntity config){EntityWrapperConfigEntity ew new EntityWrapperConfigEntity();PageUtils page configService.queryPage(params);return R.ok().put(data, page);}/*** 列表*/IgnoreAuthRequestMapping(/list)public R list(RequestParam MapString, Object params,ConfigEntity config){EntityWrapperConfigEntity ew new EntityWrapperConfigEntity();PageUtils page configService.queryPage(params);return R.ok().put(data, page);}/*** 信息*/RequestMapping(/info/{id})public R info(PathVariable(id) String id){ConfigEntity config configService.selectById(id);return R.ok().put(data, config);}/*** 详情*/IgnoreAuthRequestMapping(/detail/{id})public R detail(PathVariable(id) String id){ConfigEntity config configService.selectById(id);return R.ok().put(data, config);}/*** 根据name获取信息*/RequestMapping(/info)public R infoByName(RequestParam String name){ConfigEntity config configService.selectOne(new EntityWrapperConfigEntity().eq(name, faceFile));return R.ok().put(data, config);}/*** 保存*/PostMapping(/save)public R save(RequestBody ConfigEntity config){
// ValidatorUtils.validateEntity(config);configService.insert(config);return R.ok();}/*** 修改*/RequestMapping(/update)public R update(RequestBody ConfigEntity config){
// ValidatorUtils.validateEntity(config);configService.updateById(config);//全部更新return R.ok();}/*** 删除*/RequestMapping(/delete)public R delete(RequestBody Long[] ids){configService.deleteBatchIds(Arrays.asList(ids));return R.ok();}
}
MybatisPlusConfig.java package com.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;import com.baomidou.mybatisplus.mapper.MetaObjectHandler;
import com.baomidou.mybatisplus.plugins.PaginationInterceptor;/*** mybatis-plus配置*/
Configuration
public class MybatisPlusConfig {/*** 分页插件*/Beanpublic PaginationInterceptor paginationInterceptor() {return new PaginationInterceptor();}}
add-or-update.vue
templatediv classaddEdit-blockel-formclassdetail-form-contentrefruleForm:modelruleForm:rulesruleslabel-width80px:style{backgroundColor:addEditForm.addEditBoxColor}el-rowel-col :span12el-form-item classinput v-iftype!info label学术活动类型编码 propcodeIndexel-input v-modelruleForm.codeIndexplaceholder学术活动类型编码 clearable :readonlyro.codeIndex/el-input/el-form-itemdiv v-elseel-form-item classinput label学术活动类型编码 propcodeIndexel-input v-modelruleForm.codeIndexplaceholder学术活动类型编码 readonly/el-input/el-form-item/div/el-colel-col :span12el-form-item classinput v-iftype!info label学术活动类型 propindexNameel-input v-modelruleForm.indexNameplaceholder学术活动类型 clearable :readonlyro.indexName/el-input/el-form-itemdiv v-elseel-form-item classinput label学术活动类型 propindexNameel-input v-modelruleForm.indexNameplaceholder学术活动类型 readonly/el-input/el-form-item/div/el-col!--el-col :span12el-form-item classinput v-iftype!info label备注 propbeizhuel-input v-modelruleForm.beizhuplaceholder备注 clearable :readonlyro.beizhu/el-input/el-form-itemdiv v-elseel-form-item classinput label备注 propbeizhuel-input v-modelruleForm.beizhuplaceholder备注 readonly/el-input/el-form-item/div/el-col--/el-rowel-form-item classbtnel-button v-iftype!info typeprimary classbtn-success clickonSubmit提交/el-buttonel-button v-iftype!info classbtn-close clickback()取消/el-buttonel-button v-iftypeinfo classbtn-close clickback()返回/el-button/el-form-item/el-form/div
/template
scriptimport styleJs from ../../../utils/style.js;// 数字邮件手机url身份证校验import { isNumber,isIntNumer,isEmail,isPhone, isMobile,isURL,checkIdCard } from /utils/validate;export default {data() {let self thisreturn {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.typeinfo||this.typeelse){this.info(id);}else{//查询最大值 startthis.$http({url: dictionary/maxCodeIndex,method: post,data: {dicCode:xueshuhuodong_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 regnew 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]xueshuhuodong_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((){// inputdocument.querySelectorAll(.addEdit-block .input .el-input__inner).forEach(el{el.style.height this.addEditForm.inputHeightel.style.color this.addEditForm.inputFontColorel.style.fontSize this.addEditForm.inputFontSizeel.style.borderWidth this.addEditForm.inputBorderWidthel.style.borderStyle this.addEditForm.inputBorderStyleel.style.borderColor this.addEditForm.inputBorderColorel.style.borderRadius this.addEditForm.inputBorderRadiusel.style.backgroundColor this.addEditForm.inputBgColor})document.querySelectorAll(.addEdit-block .input .el-form-item__label).forEach(el{el.style.lineHeight this.addEditForm.inputHeightel.style.color this.addEditForm.inputLableColorel.style.fontSize this.addEditForm.inputLableFontSize})// selectdocument.querySelectorAll(.addEdit-block .select .el-input__inner).forEach(el{el.style.height this.addEditForm.selectHeightel.style.color this.addEditForm.selectFontColorel.style.fontSize this.addEditForm.selectFontSizeel.style.borderWidth this.addEditForm.selectBorderWidthel.style.borderStyle this.addEditForm.selectBorderStyleel.style.borderColor this.addEditForm.selectBorderColorel.style.borderRadius this.addEditForm.selectBorderRadiusel.style.backgroundColor this.addEditForm.selectBgColor})document.querySelectorAll(.addEdit-block .select .el-form-item__label).forEach(el{el.style.lineHeight this.addEditForm.selectHeightel.style.color this.addEditForm.selectLableColorel.style.fontSize this.addEditForm.selectLableFontSize})document.querySelectorAll(.addEdit-block .select .el-select__caret).forEach(el{el.style.color this.addEditForm.selectIconFontColorel.style.fontSize this.addEditForm.selectIconFontSize})// datedocument.querySelectorAll(.addEdit-block .date .el-input__inner).forEach(el{el.style.height this.addEditForm.dateHeightel.style.color this.addEditForm.dateFontColorel.style.fontSize this.addEditForm.dateFontSizeel.style.borderWidth this.addEditForm.dateBorderWidthel.style.borderStyle this.addEditForm.dateBorderStyleel.style.borderColor this.addEditForm.dateBorderColorel.style.borderRadius this.addEditForm.dateBorderRadiusel.style.backgroundColor this.addEditForm.dateBgColor})document.querySelectorAll(.addEdit-block .date .el-form-item__label).forEach(el{el.style.lineHeight this.addEditForm.dateHeightel.style.color this.addEditForm.dateLableColorel.style.fontSize this.addEditForm.dateLableFontSize})document.querySelectorAll(.addEdit-block .date .el-input__icon).forEach(el{el.style.color this.addEditForm.dateIconFontColorel.style.fontSize this.addEditForm.dateIconFontSizeel.style.lineHeight this.addEditForm.dateHeight})// uploadlet iconLineHeight parseInt(this.addEditForm.uploadHeight) - parseInt(this.addEditForm.uploadBorderWidth) * 2 pxdocument.querySelectorAll(.addEdit-block .upload .el-upload--picture-card).forEach(el{el.style.width this.addEditForm.uploadHeightel.style.height this.addEditForm.uploadHeightel.style.borderWidth this.addEditForm.uploadBorderWidthel.style.borderStyle this.addEditForm.uploadBorderStyleel.style.borderColor this.addEditForm.uploadBorderColorel.style.borderRadius this.addEditForm.uploadBorderRadiusel.style.backgroundColor this.addEditForm.uploadBgColor})document.querySelectorAll(.addEdit-block .upload .el-form-item__label).forEach(el{el.style.lineHeight this.addEditForm.uploadHeightel.style.color this.addEditForm.uploadLableColorel.style.fontSize this.addEditForm.uploadLableFontSize})document.querySelectorAll(.addEdit-block .upload .el-icon-plus).forEach(el{el.style.color this.addEditForm.uploadIconFontColorel.style.fontSize this.addEditForm.uploadIconFontSizeel.style.lineHeight iconLineHeightel.style.display block})// 多文本输入框document.querySelectorAll(.addEdit-block .textarea .el-textarea__inner).forEach(el{el.style.height this.addEditForm.textareaHeightel.style.color this.addEditForm.textareaFontColorel.style.fontSize this.addEditForm.textareaFontSizeel.style.borderWidth this.addEditForm.textareaBorderWidthel.style.borderStyle this.addEditForm.textareaBorderStyleel.style.borderColor this.addEditForm.textareaBorderColorel.style.borderRadius this.addEditForm.textareaBorderRadiusel.style.backgroundColor this.addEditForm.textareaBgColor})document.querySelectorAll(.addEdit-block .textarea .el-form-item__label).forEach(el{// el.style.lineHeight this.addEditForm.textareaHeightel.style.color this.addEditForm.textareaLableColorel.style.fontSize this.addEditForm.textareaLableFontSize})// 保存document.querySelectorAll(.addEdit-block .btn .btn-success).forEach(el{el.style.width this.addEditForm.btnSaveWidthel.style.height this.addEditForm.btnSaveHeightel.style.color this.addEditForm.btnSaveFontColorel.style.fontSize this.addEditForm.btnSaveFontSizeel.style.borderWidth this.addEditForm.btnSaveBorderWidthel.style.borderStyle this.addEditForm.btnSaveBorderStyleel.style.borderColor this.addEditForm.btnSaveBorderColorel.style.borderRadius this.addEditForm.btnSaveBorderRadiusel.style.backgroundColor this.addEditForm.btnSaveBgColor})// 返回document.querySelectorAll(.addEdit-block .btn .btn-close).forEach(el{el.style.width this.addEditForm.btnCancelWidthel.style.height this.addEditForm.btnCancelHeightel.style.color this.addEditForm.btnCancelFontColorel.style.fontSize this.addEditForm.btnCancelFontSizeel.style.borderWidth this.addEditForm.btnCancelBorderWidthel.style.borderStyle this.addEditForm.btnCancelBorderStyleel.style.borderColor this.addEditForm.btnCancelBorderColorel.style.borderRadius this.addEditForm.btnCancelBorderRadiusel.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.uploadHeightel.style.height this.addEditForm.uploadHeightel.style.borderWidth this.addEditForm.uploadBorderWidthel.style.borderStyle this.addEditForm.uploadBorderStyleel.style.borderColor this.addEditForm.uploadBorderColorel.style.borderRadius this.addEditForm.uploadBorderRadiusel.style.backgroundColor this.addEditForm.uploadBgColor})})},}};
/script
style langscss
.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;background-color: transparent;
}
.btn .el-button {padding: 0;
}/style
声明 本博客适用于广泛的学术和教育用途包括但不限于个人学习、开发设计产品设计。仅供学习参考旨在为读者提供深入理解和学术研究的材料。
