计量项目添加新模块

添加了新的菜单，从后台到前台对整个项目有了一个清晰的认识，在此分享一下如何在计量器具管理平台中添加新模块。

后台

后台采用SpringBoot，在dataInit/WebAppMenuDataInit.java文件中对前台菜单进行初始化。

@Component
public class WebAppMenuDataInit implements ApplicationListener, Ordered {
    private Logger logger = Logger.getLogger(WebAppMenuDataInit.class.getName());    // 日志
    private final WebAppMenuRepository webAppMenuRepository; // 菜单
    private List webAppMenus;                    // 菜单
    private MigrationService migrationService;
    protected int weight = HIGHEST_PRECEDENCE;               // 权重

    private WebAppMenu mainMenu;

    // SpringBoot自动装配
    @Autowired
    public WebAppMenuDataInit(WebAppMenuRepository webAppMenuRepository, MigrationService migrationService) {
        this.webAppMenuRepository = webAppMenuRepository;
        this.migrationService = migrationService;
        webAppMenus = new ArrayList<>();
    }

    // 程序监听
    @Override
    public void onApplicationEvent(ContextRefreshedEvent contextRefreshedEvent) {
        List webAppMenusAll = webAppMenuRepository.findAll();
        Boolean isAdd = false;           // 是否执行添加记录操作
        if (webAppMenusAll.size() == 0) {
            isAdd = true;
            mainMenu = new WebAppMenu();
            mainMenu.setAbstract(true);
            mainMenu.setTemplateUrl("views/main.html");
            mainMenu.setShow(false);
            mainMenu.setName("用于仪表台及大数据平台继承");
            mainMenu.setDescription("请为所有用户勾选该选项");
            mainMenu.setRouteName("main");
            mainMenu.setWeight(weight++);
            webAppMenus.add(mainMenu);

            logger.info("主菜单");
            this.addWebAppMenuMain();

            logger.info("我的工作");
            this.addWebAppMenuMyWork();

            logger.info("强检器具备案");
            this.addForceInstrumentFiling();

            logger.info("强检器具超期检定备案");
            this.addTimeoutCheckApply();

            logger.info("强检器具检定管理");
            this.addWebAppMenuIntegrated();

            logger.info("标准装置管理");
            this.addWebAppMenuStandard();

            logger.info("用户（部门）管理");
            this.addDepartment();
            
            logger.info("人员资质");
            this.addWebAppMenusPersonnel();
            
            logger.info("我的消息");
            this.addWebAppMenuMyMessage();
            
            logger.info("系统设置");
            this.addWebAppMenuSystem();
            
            logger.info("个人中心");
            this.addWebAppMenuPersonalCenter();
        }

        // 查询是否添加过了以下的内容，如果添加过了，则跳过。未添加则执行
        String batch = "0daJM3rAqVOwPH8CZV2QgwVl1vUw0xn7";
        if (null == migrationService.findByBatch(batch)) {
            isAdd = true;   // 有新的数据需要更新

            logger.debug("维护版本信息");
            migrationService.saveByBatch(batch);

            logger.debug("添加菜单");
            // todo: 请按需求文档增加菜单。测试时，请将配置信息中的数据生成方式更改为create。
            // 每个一级菜单做为一个方法出现。先按现在菜单，检查哪些是需要填写的，哪些是不需要填写的。

            logger.info("---强检器具监督管理模块---");

            logger.info("强检器具统计管理");
            this.addWebAppMenuForceInstrumentStatistics();

            logger.info("报警管理");
            this.addWebAppMenuAlarmManagement();
        }

        if (isAdd) {
            logger.debug("有新的记录，并执行更新保存操作");
            webAppMenuRepository.save(webAppMenus);
        }
    }
}

简单解释一下上述代码：

WebAppMenuDataInit实现了ApplicationListener接口，并实现了onApplicationEvent方法。

当Spring容器加载完成后，就会执行该方法，进而初始化菜单。

需要添加新模块时，添加新建菜单方法，新建WebAppMenu对象，设置名称，路由，是否抽象(一级菜单需设置为抽象)，权重。最后将该对象添加到webAppMenus中。

在onApplicationEvent中调用该方法，将菜单添加进webAppMenus中，最后webAppMenuRepository.save(webAppMenus)这行代码将菜单持久化。

/**
 * 强检器具统计管理
 */
protected void addWebAppMenuForceInstrumentStatistics() {
    logger.info("强检器具统计管理");
    WebAppMenu forceInstrumentStatisticsMenu = new WebAppMenu();
    forceInstrumentStatisticsMenu.setName("强检器具统计管理");
    forceInstrumentStatisticsMenu.setRouteName("forceInstrumentStatistics");
    forceInstrumentStatisticsMenu.setAbstract(true);
    forceInstrumentStatisticsMenu.setWeight(weight++);
    webAppMenus.add(forceInstrumentStatisticsMenu);

    logger.info("强检器具受检率统计");
    WebAppMenu forceInstrumentCheckRate = new WebAppMenu();
    forceInstrumentCheckRate.setName("强检器具受检率统计");
    forceInstrumentCheckRate.setDescription("强检器具统计管理-强检器具受检率统计");
    forceInstrumentCheckRate.setRouteName("checkRate");
    forceInstrumentCheckRate.setParentWebAppMenu(forceInstrumentStatisticsMenu);
    forceInstrumentCheckRate.setParentRouteWebAppMenu(forceInstrumentStatisticsMenu);
    forceInstrumentCheckRate.setTemplateUrl("views/forceInstrumentStatistics/checkRate/index.html");
    webAppMenus.add(forceInstrumentCheckRate);

    logger.info("一次检定合格率统计");
    WebAppMenu onceCheckQualifiedRate = new WebAppMenu();
    onceCheckQualifiedRate.setName("一次检定合格率统计");
    onceCheckQualifiedRate.setDescription("强检器具统计管理-一次检定合格率统计");
    onceCheckQualifiedRate.setRouteName("qualifiedRate");
    onceCheckQualifiedRate.setParentWebAppMenu(forceInstrumentStatisticsMenu);
    onceCheckQualifiedRate.setParentRouteWebAppMenu(forceInstrumentStatisticsMenu);
    onceCheckQualifiedRate.setTemplateUrl("views/forceInstrumentStatistics/qualifiedRate/index.html");
    webAppMenus.add(onceCheckQualifiedRate);
}

前台

前台采用AngularJS，前台菜单为一个指令。

angular.module('webappApp')
    .directive('yunzhiBasicAdminSideNavigation', function(WebAppMenuService) {
        return {
            templateUrl: 'views/directive/basicAdminSideNavigation.html',
            restrict: 'EA',
            link: function postLink(scope) {
                var self = this;
                WebAppMenuService.sideNavigationInit(self, scope, function() {});
            }
        };
    });

    

        
    {{menu.name}}
        
    {{menu.name}}
        

            
{{_menu.name}}
        
    

这样，在后台初始化菜单之后，前台获取再进行循环显示，点击会跳转到相应路由。

重启前台，左侧菜单指令就会出现后台最新添加的菜单，因为前台还没有添加路由，所以点击菜单时控制台会报错。

路由

config.js为本项目中的路由文件。

其实，AngularJS项目中的路由不过是在angular定义的模块中调用config方法，看透本质，会对路由有很清晰的认识。

以下为ui-router中定义路由的示例代码：

$stateProvider
    // 强检器具统计管理
    .state('forceInstrumentStatistics', {
        abstract: true,                           // 表示此路由不对应具体的页面
        url: "/forceInstrumentStatistics",        // 对应的URL信息
        templateUrl: "views/common/content.html", // 模板文件
        data: {
            pageTitle: '强检器具统计管理'
        }
    })
    .state('forceInstrumentStatistics.checkRate', {
        url: "/checkRate",
        templateUrl: config.developingPage,
        data: {
            pageTitle: '强检器具受检率统计',
            pageDesc: '强检器具统计管理-强检器具受检率统计'
        }
    })
    .state('forceInstrumentStatistics.qualifiedRate', {
        url: "/qualifiedRate",
        templateUrl: 'views/forceInstrumentStatistics/qualifiedRate/index.html',
        data: {
            pageTitle: '一次性检定合格率统计',
            pageDesc: '强检器具统计管理-一次性检定合格率统计'
        }
    });

abstract设置为true，表示该路由不对应具体页面，当菜单为一级菜单时需要设置该属性为true。

目前定义过的路由的模板文件为一个指向“该功能正在开发中”的页面，使用时修改为相应模板文件即可。