基于 Spring Boot 和 Vue 的售楼管理系统设计与实现

售楼管理系统设计与实现

绪论

1.1 研究背景

当前社会各行业领域竞争压力非常大，随着信息化、科学化发展，各行业争相使用新的信息技术，对数据进行科学、规范化管理。这迫使不接受信息改革的企业面临被淘汰的风险。教育、餐饮、旅游、医疗等行业都将使用新技术进行革命，改变传统纸质化办公环境。软件信息技术覆盖社会各行业是时代要求，数据电子化是必然趋势。本售楼管理系统运用一流软件技术实现开发，让管理信息通过系统实现科学化、规范化、程序化管理。帮助管理者节省事务处理时间，降低错误率，促进基础数据管理水平，避免随意业务管理。数据库存储的动态信息为上层管理人员决策提供事实依据。总之，这是一款能真正提升管理者办公效率的软件系统。

1.2 目的和意义

信息数据处理依赖人工操作会耗费大量成本，面对大量数据时，传统方式无法保证出错率，易出现资源低利用率与低安全性问题，耽误宝贵时间，更新、归纳与统计耗财耗力。电子化信息管理能缓解传统人工方式的处境，确保信息数据短时间高效处理，节省人力成本，确保数据安全性和可靠性，实现快速检索与修改。这些优点是旧模式无法比拟的。因此售楼管理系统为数据信息管理模式升级提供了重要窗口。

1.3 论文结构安排

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

第一章：描述程序的开发背景、目的与意义，以及文档结构安排； 第二章：描述程序的开发环境，涉及的技术及数据存储工具； 第三章：描述开发时的可行性问题，功能及性能要求； 第四章：描述大功能模块下的细分信息及数据库表结构设计； 第五章：描述功能实现界面内容及操作人员部分功能； 第六章：描述测试内容，介绍系统测试概念与方法。

2 相关技术

2.1 SSM 框架介绍

本课题程序开发使用到的框架技术是 SSM（Spring + Spring MVC + MyBatis）。在 JavaWeb 开发中流行的框架有 SSH、SSM、SpringMVC 等。SSH 属于重量级框架，配置繁琐，不够灵活，运行占用内存较高。SpringMVC 更灵活好用。SSM 取中间值，既没有 SSH 臃肿，也没有 SpringMVC 简化，配置和使用过程更易编写和理解。MyBatis 取代 Hibernate 是因为它更灵活，不需要完全在框架里操作，数据操作上可写出更灵活的代码，性能更稳定。使用 SSM 框架是综合考虑的结果，网上有很多教程和心得体会，且 SSM 非常流行。

2.2 VUE 介绍

Vue (读音 /vjuː/) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，易于上手，便于与第三方库或既有项目整合。另一方面，当与各种结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2.3 Mysql 数据库介绍

开发的程序面向用户的只是程序的功能界面，让用户操作程序界面的各个功能，用户使用程序功能生成的数据信息存放在数据库中。程序开发通常会对常用数据存储工具的特点进行分析比对，如 MySQL、Access、Sqlserver 等。商业级别程序可选 Oracle，简单程序可选 Access。当开发程序要求数据库占用空间小，并能满足数据存储要求时，可以考虑 MySQL 数据库。它是关系型数据库，在数据库工具里面是最受认可的其中一个应用软件。本程序的开发就运用到了此数据库。它将程序数据通过使用不同的数据表格进行保存，增加了程序数据的存储速度，也提高了数据库的灵活性。

3 系统分析

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

3.1 系统可行性分析

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

3.1.1 技术可行性分析

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

3.1.2 经济可行性分析

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

3.1.3 运行可行性分析

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

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

3.2 系统性能分析

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

3.2.1 易用性指标

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

3.2.2 可扩展性指标

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

3.2.3 健壮性指标

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

3.2.4 安全性指标

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

3.3 系统流程分析

3.3.1 操作流程分析

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

3.3.2 登录流程分析

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

3.3.3 信息添加流程分析

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

3.3.4 信息删除流程分析

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

3.4 系统功能分析

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

4 系统设计

4.1 总体功能

售楼管理系统是根据需求定制开发，开发软件选用 idea 平台配合 MySQL 数据库进行开发环境的搭建操作，网站采用为微信小程序结构进行开发，用户通过小程序访问项目，管理人员通过访问系统数据仅仅需要在客户端安装谷歌浏览器或者是当下常用浏览器就可以访问网站后台管理内容。

4.2 系统概要设计

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

4.3 系统功能结构设计

在分析并得出使用者对程序的功能要求时，就可以进行程序设计了。如图展示的就是管理员功能结构图，管理员在后台主要管理字典管理、房屋管理、房屋收藏管理、房屋留言管理、预约看房管理、公告管理、合同管理、用户管理、员工管理、管理员管理等。

4.4 数据库设计

程序功能操作不管是添加，修改，还是删除等功能产生的数据都是经由数据库进行数据保存和更新的，所以一个数据库设计的好坏也是程序是否好坏的判定标准，因为程序的成功，有一半的功劳都是靠数据库的优秀设计。数据库一旦设计得良好是可以减轻开发人员的开发负担的。

4.4.1 数据库 E-R 图设计

这个部分的设计需要使用到 E-R 图绘制工具，常用的工具就是 Visio 工具来绘制 E-R 模型图，这款工具不仅可以快速创建需要的 E-R 模型图，而且该工具提供的操作界面很简单，可以短时间内修改绘图界面的图形或者是文字的属性。在绘制 E-R 模型图时，要分清楚各个图形代表的含义，以免绘制出错，E-R 模型图由长方形（实体），椭圆形（属性），菱形（关系）这三部分图形符号组成，绘制期间要区分开来，用准确的图形符号代表相应的数据元素。

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

（2）下图是房屋留言实体和其具备的属性。

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

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

（5）下图是房屋收藏实体和其具备的属性。

（6）下图是员工实体和其具备的属性。

（7）下图是预约看房实体和其具备的属性。

（8）下图是合同实体和其具备的属性。

4.4.2 数据库表结构设计

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

表 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	fangwu_name	String	房屋名称	是
3	fangwu_uuid_number	String	房屋编号	是
4	fangwu_photo	String	房屋照片	是
5	fangwu_address	String	房屋位置	是
6	fangwu_louceng	String	楼层	是
7	fangwu_danyuan	String	单元	是
8	fangwu_fanghao	String	房号	是
9	fangwu_types	Integer	房屋类型	是
10	fangwu_loupan_types	Integer	楼盘	是
11	huxing	String	户型	是
12	fangwu_jiegou	String	房屋结构	是
13	fangwu_jianzhujiegou	String	建筑结构	是
14	fangwu_zhuangxiu	String	装修情况	是
15	fangwu_yongtu	String	房屋用途	是
16	fangwu_fangben_types	Integer	房本	是
17	fangwu_clicknum	Integer	房屋热度	是
18	fangwu_mianji	BigDecimal	房屋面积	是
19	fangwu_jiage	BigDecimal	总价 (万)	是
20	fangwuzhuangtai_types	Integer	房屋状态	是
21	fangwu_content	String	房屋介绍	是
22	fangwu_xiaoqu_content	String	小区介绍	是
23	fangwu_peitao_content	String	周边配套	是
24	shangxia_types	Integer	是否上架	是
25	fangwu_delete	Integer	逻辑删除	是
26	insert_time	Date	录入时间	是
27	create_time	Date	创建时间	是

表 4.3 房屋收藏表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	fangwu_id	Integer	房屋	是
3	yonghu_id	Integer	用户	是
4	fangwu_collection_types	Integer	类型	是
5	insert_time	Date	收藏时间	是
6	create_time	Date	创建时间	是

表 4.4 房屋留言表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	fangwu_id	Integer	房屋	是
3	yonghu_id	Integer	用户	是
4	fangwu_liuyan_text	String	留言内容	是
5	insert_time	Date	留言时间	是
6	reply_text	String	回复内容	是
7	update_time	Date	回复时间	是
8	create_time	Date	创建时间	是

表 4.5 预约看房表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	fangwu_yuyue_uuid_number	String	预约编号	是
3	fangwu_id	Integer	房屋	是
4	yonghu_id	Integer	用户	是
5	fangwu_yuyue_text	String	预约缘由	是
6	insert_time	Date	申请时间	是
7	fangwu_yuyue_time	Date	预约看房时间	是
8	fangwu_yuyue_yesno_types	Integer	预约状态	是
9	fangwu_yuyue_yesno_text	String	预约回复	是
10	fangwu_yuyue_shenhe_time	Date	回复时间	是
11	create_time	Date	创建时间	是

表 4.6 公告表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	gonggao_name	String	公告名称	是
3	gonggao_photo	String	公告图片	是
4	gonggao_types	Integer	公告类型	是
5	insert_time	Date	公告发布时间	是
6	gonggao_content	String	公告详情	是
7	create_time	Date	创建时间	是

表 4.7 合同表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	yonghu_id	Integer	用户	是
3	yuangong_id	Integer	员工	是
4	fangwu_id	Integer	房屋	是
5	hetong_uuid_number	String	合同编号	是
6	hetong_name	String	合同名称	是
7	hetong_file	String	合同文件	是
8	hetong_address	String	签订地点	是
9	hetong_types	Integer	合同类型	是
10	qianding_time	Date	签订时间	是
11	hetong_content	String	合同介绍	是
12	yonghu_tongyi_types	Integer	是否同意	是
13	hetong_delete	Integer	逻辑删除	是
14	insert_time	Date	录入时间	是
15	create_time	Date	创建时间	是

表 4.8 用户表

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

表 4.9 员工表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	yuangong_name	String	员工姓名	是
3	yuangong_phone	String	员工手机号	是
4	yuangong_id_number	String	员工身份证号	是
5	yuangong_photo	String	员工头像	是
6	yuangong_email	String	员工邮箱	是
7	create_time	Date	创建时间	是

表 4.10 管理员表

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

5 系统实现

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

5.1 管理员功能介绍

5.1.1 房屋列表

如图显示的就是房屋列表页面，此页面提供给管理员的功能有：查看房屋、新增房屋、修改房屋、删除房屋等。

5.1.2 公告信息管理

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

5.1.3 公告类型管理

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

PoiUtil.java

package com.utils;
import org.apache.commons.io.FileUtils;
import org.apache.poi.hssf.usermodel.HSSFCell;
import org.apache.poi.hssf.usermodel.HSSFRow;
import org.apache.poi.hssf.usermodel.HSSFSheet;
import org.apache.poi.hssf.usermodel.HSSFWorkbook;
import org.apache.poi.ss.usermodel.Cell;
import java.io.File;
import java.io.FileOutputStream;
import java.util.ArrayList;
import java.util.List;
/** * 文件导入到处 */
public class PoiUtil {
    /** * 导入 *
     * @param url
     * @return
     * @throws Exception */
    public static List<List<String>> poiImport(String url) throws Exception {
        List<List<String>> list = new ArrayList<>();
        // 创建 Excel 读取文件内容
        HSSFWorkbook workbook = new HSSFWorkbook(FileUtils.openInputStream(new File(url)));
        /** * 第一种方式读取 Sheet 页 */
        // HSSFSheet sheet = workbook.getSheet("Sheet0");
        /** * 第二种方式读取 Sheet 页 */
        HSSFSheet sheet = workbook.getSheetAt(0);//获取工作表
        for (int i = 0; i < sheet.getLastRowNum()+1; i++) {
            HSSFRow row = sheet.getRow(i);//获取行
            List<String> rowlist = new ArrayList<>();//行数据
            for (int j = 0; j < row.getLastCellNum(); j++) {
                HSSFCell cell = row.getCell(j);
                cell.setCellType(Cell.CELL_TYPE_STRING);
                String value = cell.getStringCellValue();
                rowlist.add(value);//行中数据添加到行中
            }
            list.add(rowlist);//将行数据添加到 list 中
        }
        return list;
    }
    // 导出
    public static void poiExport(List<List<String>> list, String url) throws Exception {
        //创建 Excel 工作薄
        HSSFWorkbook workbook = new HSSFWorkbook();
        //创建一个工作表 sheet
        HSSFSheet sheet = workbook.createSheet();
        for (int i = 0; i < list.size(); i++) {
            HSSFRow row = sheet.createRow(i);
            List<String> dataList = list.get(i);
            for (int j = 0; j < dataList.size(); j++) {
                HSSFCell cell = row.createCell(j);
                cell.setCellValue(dataList.get(j));
            }
        }
        FileOutputStream stream = FileUtils.openOutputStream(new File(url));
        workbook.write(stream);
        stream.close();
    }
    public static void main(String[] args) {
        try {
            //导入
            List<List<String>> lists = PoiUtil.poiImport("C:\\Users\\Administrator\\Desktop\\工作 1.xls");
            System.out.println();
            //导出
            PoiUtil.poiExport(lists, "C:\\Users\\Administrator\\Desktop\\工作 1.xls");
            // // List<List<String>> list = new ArrayList<>();
            // ArrayList<String> dataList = new ArrayList<>();
            // dataList.add("标题 1");
            // dataList.add("标题 2");
            // dataList.add("标题 3");
            // list.add(dataList);
            // // 追加数据
            // for (int i = 1; i < 10; i++) {// 这里的 int 起始是 1 也就是第二行开始
            // ArrayList<String> dataList111 = new ArrayList<>();
            // dataList111.add("内容" + i);
            // dataList111.add("内容 1111111121222222222333333333377777777411111111477777777" + i);
            // dataList111.add("内容" + i);
            // list.add(dataList111);
            // }
            // PoiUtil.poiExport(list, "C:\\Users\\Administrator\\Desktop\\工作 1.xls");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

InterceptorConfig.java

package com.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
import com.interceptor.AuthorizationInterceptor;
@Configuration
public class InterceptorConfig extends WebMvcConfigurationSupport{
    @Bean
    public AuthorizationInterceptor getAuthorizationInterceptor() {
        return new AuthorizationInterceptor();
    }
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(getAuthorizationInterceptor()).addPathPatterns("/**").excludePathPatterns("/static/**");
        super.addInterceptors(registry);
    }
    /** * springboot 2.0 配置 WebMvcConfigurationSupport 之后，会导致默认配置被覆盖，要访问静态资源需要重写 addResourceHandlers 方法 */
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResource_handler("/**")
        .addResourceLocations("classpath:/resources/")
        .addResourceLocations("classpath:/static/")
        .addResourceLocations("classpath:/admin/")
        .addResourceLocations("classpath:/img/")
        .addResourceLocations("classpath:/front/")
        .addResourceLocations("classpath:/public/");
        super.addResourceHandlers(registry);
    }
}

ConfigServiceImpl.java

package com.service.impl;
import java.util.Map;
import org.springframework.stereotype.Service;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import com.dao.ConfigDao;
import com.entity.ConfigEntity;
import com.service.ConfigService;
import com.utils.PageUtils;
import com.utils.Query;
/** * 系统用户
 * @author yangliyuan
 * @date 2019 年 10 月 10 日 上午 9:17:59 */
@Service("configService")
public class ConfigServiceImpl extends ServiceImpl<ConfigDao, ConfigEntity> implements ConfigService {
    @Override
    public PageUtils queryPage(Map<String, Object> params) {
        Page<ConfigEntity> page = this.selectPage(
            new Query<ConfigEntity>(params).getPage(),
            new EntityWrapper<ConfigEntity>()
        );
        return new PageUtils(page);
    }
}

IndexMain.vue

<template>
    <el-main style="padding: 10px 20px; background-image: url(/shoulouguanli/img/back-list-img-bg.jpg); background-size:100% 100%; boxShadow: 0 0 0px rgba(0,0,0,0); height:calc(100% - ${template2.back.menulist.menulistHeight}); ">
        <bread-crumbs :title="title" class="bread-crumbs"></bread-crumbs>
        <router-view class="router-view" style="height:auto;background: transparent;"></router-view>
    </el-main>
</template>
<script>
import menu from "@/utils/menu";
export default {
    data() {
        return {
            menuList: [],
            role: "",
            currentIndex: -2,
            itemMenu: [],
            title: '',
        };
    },
    mounted() {
        let menus = menu.list();
        this.menuList = menus;
        this.role = this.$storage.get("role");
    },
    created() {
        this.init();
    },
    methods: {
        init(){
            this.$nextTick(()=>{
                // let h = document.getElementsByClassName('el-aside')[0].clientHeight
                // document.getElementsByClassName('el-main')[0].style.minHeight = "calc(100vh - 60px - " + h+'px)'
            })
        },
        menuHandler(menu) {
            this.$router.push({ name: menu.tableName });
            this.title = menu.menu;
        },
        titleChange(index, menus) {
            this.currentIndex = index
            this.itemMenu = menus;
            console.log(menus);
        },
        homeChange(index) {
            this.itemMenu = [];
            this.title = ""
            this.currentIndex = index
            this.$router.push({ name: 'home' });
        },
        centerChange(index) {
            this.itemMenu = [{ "buttons": ["新增", "查看", "修改", "删除"], "menu": "修改密码", "tableName": "updatePassword" }, { "buttons": ["新增", "查看", "修改", "删除"], "menu": "个人信息", "tableName": "center" }];
            this.title = ""
            this.currentIndex = index
            this.$router.push({ name: 'home' });
        }
    }
};
</script>
<style lang="scss" scoped>
a {
    text-decoration: none;
    color: #555;
}
a:hover {
    background: #00c292;
}
.nav-list {
    width: 100%;
    margin: 0 auto;
    text-align: left;
    margin-top: 20px;
    .nav-title {
        display: inline-block;
        font-size: 15px;
        color: #333;
        padding: 15px 25px;
        border: none;
    }
    .nav-title.active {
        color: #555;
        cursor: default;
        background-color: #fff;
    }
}
.nav-item {
    margin-top: 20px;
    background: #FFFFFF;
    padding: 15px 0;
    .menu {
        padding: 15px 25px;
    }
}
.el-main {
    // background-color: #F6F8FA;
    padding: 0 24px;
    min-height: 100vh;
    // padding-top: 60px;
}
.router-view {
    padding: 10px;
    margin-top: 10px;
    background: #FFFFFF;
    box-sizing: border-box;
}
.bread-crumbs {
    width: 100%;
    // border-bottom: 1px solid #e9eef3;
    // border-top: 1px solid #e9eef3;
    margin-top: 10px;
    box-sizing: border-box;
}
.detail-form-content {
    background: transparent;
}
</style>