diff options
| author | shizhendong <[email protected]> | 2019-11-14 16:47:17 +0800 |
|---|---|---|
| committer | shizhendong <[email protected]> | 2019-11-14 16:47:17 +0800 |
| commit | af9711717a93311f3d9c939f7abd63ee006577ab (patch) | |
| tree | f1b9eed8725a54b4c0d46a6aee76b2cdde1ec2e4 | |
| parent | ca3e3d6804cba68cd1d146a9afbfd1c820a684d8 (diff) | |
update
8 files changed, 1507 insertions, 43 deletions
diff --git a/nezha-admin/src/main/resources/statics/js/modules/sys/menu.js b/nezha-admin/src/main/resources/statics/js/modules/sys/menu.js index 27b03448..8e731ac3 100644 --- a/nezha-admin/src/main/resources/statics/js/modules/sys/menu.js +++ b/nezha-admin/src/main/resources/statics/js/modules/sys/menu.js @@ -137,6 +137,21 @@ var vm = new Vue({ alert("菜单URL不能为空"); return true; } + }, + getIcon: function() { // 获取图标 + var index = layer.open({ + area: ['60%', '100%'], + shade: 0, + title: "获取图标", + type: 2, + fixed: false, + maxmin: false, + scrollbar: false, + offset: 'r', + closeBtn: 1, + move: false, + content: "http://localhost:8080/nezha-admin/modules/test/fontTest.html" + }); } } }); diff --git a/nezha-admin/src/main/resources/templates/js/index.js b/nezha-admin/src/main/resources/templates/js/index.js index 64bfc86d..ab7dd6a0 100644 --- a/nezha-admin/src/main/resources/templates/js/index.js +++ b/nezha-admin/src/main/resources/templates/js/index.js @@ -19,7 +19,7 @@ var menuItem = Vue.extend({ ' <span>{{item.name}}</span>', ' </a>', - ' <a v-if="item.type === 1 && item.parentId != 0" :href="\'#\'+item.url"><i v-if="item.icon != null" :class="item.icon"></i><i v-else class="fa fa-circle-o"></i> {{item.name}}</a>', + ' <a v-if="item.type === 1 && item.parentId != 0" :href="\'#\'+item.url"><i v-if="item.icon != null && item.icon.length > 0" :class="item.icon"></i><i v-else class="fa fa-circle-o"></i> {{item.name}}</a>', '</li>' ].join('') }); diff --git a/nezha-admin/src/main/resources/templates/js/modules/sys/icon.js b/nezha-admin/src/main/resources/templates/js/modules/sys/icon.js new file mode 100644 index 00000000..3b79db06 --- /dev/null +++ b/nezha-admin/src/main/resources/templates/js/modules/sys/icon.js @@ -0,0 +1,86 @@ +<script> +var data = { + q: { + iconName: null // 搜索的名称 + }, + icons: [], // 全部的图标 + selectedIcon: null // 选中的图标 +}; + +var iconVm = new Vue({ + el: '#wrap', + data: this.data, + methods: { + searchIcons: function () { + // 搜索之前先展开所有 + $("section").css('display','block'); + $(".fontawesome-icon-list div").css('display','block'); + + // 如果没有搜索条件则展开所有后直接返回 + if (iconVm.q.iconName == null || iconVm.q.iconName == "") { + return; + } + + // 查到的集合 (要展示的集合) + var searchedIcons = []; + iconVm.icons.forEach(function (item) { + if (item.indexOf(iconVm.q.iconName) == 0) { + searchedIcons.push(item); + } + }) + + // 没有查到的集合 (要隐藏的集合) + var otherIcons = iconVm.icons.filter(function (item) { + if (searchedIcons.indexOf(item) == -1) { + $(".fa-"+item).parent().parent().hide(); + return item; + } + }); + + var allIconList = $(".fontawesome-icon-list"); + for (var i = 0; i < allIconList.length; i++) { + var count = 0; + var childrens = $(allIconList[i]).children(); + var allLenght = childrens.length; + for (var j = 0; j < allLenght ; j++) { + if ($(childrens[j]).is(":hidden")) { + count++; + } + } + // 如果下方都没有 则隐藏整体 + if (count == allLenght) { + $(allIconList[i]).parent().hide(); + } + } + }, + handleClick: function(event) { + var paths = event.path; + for (var i = 0; i < paths.length; i++) { + if ($(paths[i]).hasClass('fa-hover')) { + iconVm.selectedIcon = $(paths[i]).text().trim(); + var thatIcon = window.parent.document.getElementById("icon"); + thatIcon.setAttribute('class','fa fa-' + iconVm.selectedIcon + ''); + // window.localStorage.setItem("icon", 'fa fa-'+iconVm.selectedIcon); + break; + } + } + } + }, + created: function() { + var iconStr = $("#icons section div div a").text(); + data.icons = iconStr.split(" "); + + data.icons = data.icons.filter(function (item) { + if (item.length > 0 && item.indexOf("/r") == -1 && item.indexOf("/n") == -1) { + return item; + } + }); + }, + mounted () { + window.addEventListener('click',this.handleClick) + }, + destroyed () { + window.removeEventListener('click',this.handleClick) + } +}); +</script>
\ No newline at end of file diff --git a/nezha-admin/src/main/resources/templates/js/modules/sys/menu.js b/nezha-admin/src/main/resources/templates/js/modules/sys/menu.js new file mode 100644 index 00000000..8dcf8719 --- /dev/null +++ b/nezha-admin/src/main/resources/templates/js/modules/sys/menu.js @@ -0,0 +1,273 @@ +<script> + +var setting = { + data: { + simpleData: { + enable: true, + idKey: "menuId", + pIdKey: "parentId", + rootPId: -1 + }, + key: { + url:"nourl" + } + } +}; +var ztree; + + +var data = { + showList: true, + title: null, + menu: { + parentName: null, + parentId: 0, + type: 1, + orderNum: 0, + icon: null, + name: null, + url: null + } +} + +Vue.use(window.vuelidate.default); +var required = window.validators.required; + +var urlRequired = function (value, menu) { + if (menu.type === 1) { + var flag = true; + if (isBlank(value)) { + flag = false; + } + return flag; + } else { + return true; + } +} + +var vm = new Vue({ + el:'#rrapp', + data: this.data, + validations: { + menu: { + name: { + required + }, + url: { + urlRequired + } + } + }, + methods: { + getMenu: function(menuId){ + //加载菜单树 + $.get(baseURL + "sys/menu/select", function(r){ + ztree = $.fn.zTree.init($("#menuTree"), setting, r.menuList); + var node = ztree.getNodeByParam("menuId", vm.menu.parentId); + ztree.selectNode(node); + + vm.menu.parentName = node.name; + }) + }, + add: function(){ + vm.$v.menu.$reset(); + vm.showList = false; + vm.title = "<@spring.message 'common.add'/>"; + vm.menu = { + parentName: null, + parentId: 0, + type: 1, + orderNum: 0, + icon: null, + name: null, + url: null + }; + vm.getMenu(); + }, + update: function () { + vm.$v.menu.$reset(); + var menuId = getMenuId(); + if(menuId == null){ + return ; + } + $.get(baseURL + "sys/menu/info/"+menuId, function(r){ + vm.showList = false; + vm.title = "<@spring.message 'common.edit'/>"; + vm.menu = r.menu; + + // 处理图标 + if (vm.menu.icon != null && vm.menu.icon != '') { + $("#icon").attr('class', vm.menu.icon); + } else { + $("#icon").attr('class', null); + } + + vm.getMenu(); + }); + }, + del: function () { + var menuId = getMenuId(); + if(menuId == null){ + return ; + } + + confirm("<@spring.message 'common.confirmDelete'/>", function(){ + $.ajax({ + type: "POST", + url: baseURL + "sys/menu/delete", + data: "menuId=" + menuId, + success: function(r){ + if(r.code === 200){ + alert("<@spring.message 'common.success'/>", function(){ + vm.reload(); + }); + }else{ + alert(r.msg); + } + } + }); + }); + }, + saveOrUpdate: function () { + if (!this.validator()) { + return; + } + + if ($("#icon").attr('class') != undefined) { + vm.menu.icon = $("#icon").attr('class').trim(); + } else { + vm.menu.icon = null; + } + + var url = vm.menu.menuId == null ? "sys/menu/save" : "sys/menu/update"; + $.ajax({ + type: "POST", + url: baseURL + url, + contentType: "application/json", + data: JSON.stringify(vm.menu), + success: function(r){ + if(r.code === 200){ + alert("<@spring.message 'common.success'/>", function(){ + vm.reload(); + }); + }else{ + alert(r.msg); + } + } + }); + }, + menuTree: function(){ + layer.open({ + type: 1, + offset: '50px', + skin: 'layui-layer-molv', + title: "<@spring.message 'common.pleaseSelect'/><@spring.message 'menu.menu'/>", + area: ['300px', '450px'], + shade: 0, + shadeClose: false, + content: jQuery("#menuLayer"), + btn: ["<@spring.message 'common.submit'/>", "<@spring.message 'common.back'/>"], + btn1: function (index) { + var node = ztree.getSelectedNodes(); + //选择上级菜单 + vm.menu.parentId = node[0].menuId; + vm.menu.parentName = node[0].name; + + layer.close(index); + } + }); + }, + reload: function () { + vm.showList = true; + Menu.table.refresh(); + $("#icon").attr('class', ''); + }, + validator: function () { + vm.$v.menu.$touch(); + return !vm.$v.menu.$error; + }, + getIcon: function() { // 获取图标 + var currentUrl = window.location.href; + var a = currentUrl.split('/'); + currentUrl = currentUrl.substring(0,currentUrl.indexOf(a[a.length-1])); + var index = layer.open({ + area: ['75%', '100%'], + shade: 0.01, + title: "<@spring.message 'menu.getIcon'/>", // 获取图标 + type: 2, + fixed: false, + maxmin: false, + scrollbar: false, + offset: 'r', + closeBtn: 1, + move: false, + content: currentUrl+"icons.html" + }); + }, + cancelIcon: function () { + vm.menu.icon = ''; + $("#icon").attr('class', ''); + } + } +}); + + +var Menu = { + id: "menuTable", + table: null, + layerIndex: -1 +}; + +/** + * 初始化表格的列 + */ +Menu.initColumn = function () { + var columns = [ + {field: 'selectItem', radio: true}, + {title: 'ID', field: 'menuId', visible: false, align: 'center', valign: 'middle', width: '80px'}, + {title: "<@spring.message 'common.name'/>", field: 'name', align: 'center', valign: 'middle', sortable: true, width: '180px'}, + {title: "<@spring.message 'menu.parent'/>", field: 'parentName', align: 'center', valign: 'middle', sortable: true, width: '100px'}, + {title: "<@spring.message 'menu.icon'/>", field: 'icon', align: 'center', valign: 'middle', sortable: true, width: '80px', formatter: function(item, index){ + return item.icon == null ? '' : '<i class="'+item.icon+' fa-lg"></i>'; + }}, + {title: "<@spring.message 'menu.type'/>", field: 'type', align: 'center', valign: 'middle', sortable: true, width: '100px', formatter: function(item, index){ + if(item.type === 0){ + return "<span class='label label-primary'><@spring.message 'menu.directory'/></span>"; + } + if(item.type === 1){ + return "<span class='label label-success'><@spring.message 'menu.menu'/></span>"; + } + if(item.type === 2){ + return "<span class='label label-warning'><@spring.message 'common.button'/></span>"; + } + }}, + {title: "<@spring.message 'menu.sortNumber'/>", field: 'orderNum', align: 'center', valign: 'middle', sortable: true, width: '100px'}, + {title: "URL", field: 'URL', align: 'center', valign: 'middle', sortable: true, width: '160px'}, + {title: "<@spring.message 'menu.authority.flag'/>", field: 'perms', align: 'center', valign: 'middle', sortable: true}] + return columns; +}; + + +function getMenuId () { + var selected = $('#menuTable').bootstrapTreeTable('getSelections'); + if (selected.length == 0) { + alert("<@spring.message 'common.selectOne'/>"); // 请选择一条记录 + return null; + } else { + return selected[0].id; + } +} + + +$(function () { + var colunms = Menu.initColumn(); + var table = new TreeTable(Menu.id, baseURL + "sys/menu/list", colunms); + table.setExpandColumn(2); + table.setIdField("menuId"); + table.setCodeField("menuId"); + table.setParentCodeField("parentId"); + table.setExpandAll(false); + table.init(); + Menu.table = table; +}); +</script> diff --git a/nezha-admin/src/main/resources/templates/modules/node/nodeGroup.html b/nezha-admin/src/main/resources/templates/modules/node/nodeGroup.html index b31888b4..414283cd 100644 --- a/nezha-admin/src/main/resources/templates/modules/node/nodeGroup.html +++ b/nezha-admin/src/main/resources/templates/modules/node/nodeGroup.html @@ -8,13 +8,13 @@ .nodeList{ display: inline-block; float:left; - width: calc(100% - 400px); /*根据页面宽度变化而变化*/ + width: calc(100% - 360px); /*根据页面宽度变化而变化*/ } .mytree { position: relative; display: inline-block; float:left; - min-width: 400px; + min-width: 360px; padding-left: 15px; } .ztree { diff --git a/nezha-admin/src/main/resources/templates/modules/node/nodeInfo.html b/nezha-admin/src/main/resources/templates/modules/node/nodeInfo.html index 6869fd3e..43c980d8 100644 --- a/nezha-admin/src/main/resources/templates/modules/node/nodeInfo.html +++ b/nezha-admin/src/main/resources/templates/modules/node/nodeInfo.html @@ -157,7 +157,7 @@ placeholder="<@spring.message 'common.pleaseSelect'/>"> <div slot="afterList" v-show="nodeInfo.type != null"> - <div class="select-add" style="margin-top: 10px"><i class="fa fa-plus" @click="openNodeTagForm"></i></div> + <div class="select-add"><i class="fa fa-plus" @click="openNodeTagForm"></i></div> </div> </multiselect> </div> diff --git a/nezha-admin/src/main/resources/templates/modules/sys/icons.html b/nezha-admin/src/main/resources/templates/modules/sys/icons.html new file mode 100644 index 00000000..5047f75f --- /dev/null +++ b/nezha-admin/src/main/resources/templates/modules/sys/icons.html @@ -0,0 +1,1037 @@ +<!DOCTYPE html> +<html> +<head> + <title>Font Awesome</title> + + <style> + .row { + border: 0 !important; + } + + h3 { + border-bottom: 2px solid #ddd !important; + } + + .fancybox-margin { + margin-right: 17px; + } + + .fontawesome-icon-list .fa-hover a { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; + color: #222; + line-height: 32px; + height: 32px; + padding-left: 10px; + border-radius: 4px; + } + + .fontawesome-icon-list .fa-hover a .fa { + width: 32px; + font-size: 14px; + display: inline-block; + text-align: right; + margin-right: 10px; + } + </style> + + <#include "/header.html"> +</head> +<body class="font-awesome"> +<div id="wrap"> + <div class="container" data-view="search"> + <div class="row"> + <div class="col-md-10 col-sm-9"> + <section id="search"> + <input id="search-input" class="form-control input-lg" placeholder="Search icons" autocomplete="off" + spellcheck="false" autocorrect="off" tabindex="1" v-model="q.iconName" @keyup="searchIcons"> + </section> + </div> + </div> + <div id="icons"> + <section id="web-application"> + <h3 class="page-header">Web Application Icons</h3> + <div class="row fontawesome-icon-list"> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"> + <i class="fa fa-address-book" aria-hidden="true"></i> address-book</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i class="fa fa-address-book-o" aria-hidden="true"></i> address-book-o</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i class="fa fa-address-card" aria-hidden="true"></i> address-card</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i class="fa fa-address-card-o" aria-hidden="true"></i> address-card-o</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i class="fa fa-archive" aria-hidden="true"></i> archive</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i class="fa fa-area-chart" aria-hidden="true"></i> area-chart</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i class="fa fa-arrows" aria-hidden="true"></i> arrows</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i class="fa fa-arrows-h" aria-hidden="true"></i> arrows-h</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i class="fa fa-arrows-v" aria-hidden="true"></i> arrows-v</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i class="fa fa-at" aria-hidden="true"></i> at</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i class="fa fa-ban" aria-hidden="true"></i> ban</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i class="fa fa-bar-chart" aria-hidden="true"></i> bar-chart</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i class="fa fa-bar-chart-o" aria-hidden="true"></i> bar-chart-o + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-bars" aria-hidden="true"></i> bars</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-bell" aria-hidden="true"></i> bell</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-bell-o" aria-hidden="true"></i> bell-o</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-bell-slash" aria-hidden="true"></i> bell-slash</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-bell-slash-o" aria-hidden="true"></i> bell-slash-o</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-bluetooth-b" aria-hidden="true"></i> bluetooth-b</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-bolt" aria-hidden="true"></i> bolt</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-book" aria-hidden="true"></i> book</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-bookmark" aria-hidden="true"></i> bookmark</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-bookmark-o" aria-hidden="true"></i> bookmark-o</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-briefcase" aria-hidden="true"></i> briefcase</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-bug" aria-hidden="true"></i> bug</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-bullhorn" aria-hidden="true"></i> bullhorn</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-calculator" aria-hidden="true"></i> calculator</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-calendar" aria-hidden="true"></i> calendar</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-calendar-check-o" + aria-hidden="true"></i> calendar-check-o</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-calendar-minus-o" + aria-hidden="true"></i> calendar-minus-o</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-calendar-o" aria-hidden="true"></i> calendar-o</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-calendar-plus-o" + aria-hidden="true"></i> calendar-plus-o</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-calendar-times-o" + aria-hidden="true"></i> calendar-times-o</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-cc" aria-hidden="true"></i> cc</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-certificate" aria-hidden="true"></i> certificate</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-check" aria-hidden="true"></i> check</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-check-circle" aria-hidden="true"></i> check-circle</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-check-circle-o" aria-hidden="true"></i> check-circle-o</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-circle" aria-hidden="true"></i> circle</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-circle-o" aria-hidden="true"></i> circle-o</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-circle-o-notch" aria-hidden="true"></i> circle-o-notch</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-circle-thin" aria-hidden="true"></i> circle-thin</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-clock-o" aria-hidden="true"></i> clock-o</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-clone" aria-hidden="true"></i> clone</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-close" aria-hidden="true"></i> close + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-cloud" aria-hidden="true"></i> cloud</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-cloud-download" aria-hidden="true"></i> cloud-download</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-cloud-upload" aria-hidden="true"></i> cloud-upload</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-code" aria-hidden="true"></i> code</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-cube" aria-hidden="true"></i> cube</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-cubes" aria-hidden="true"></i> cubes</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-database" aria-hidden="true"></i> database</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-desktop" aria-hidden="true"></i> desktop</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-dot-circle-o" aria-hidden="true"></i> dot-circle-o</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-download" aria-hidden="true"></i> download</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-edit" + aria-hidden="true"></i> edit</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-envelope" aria-hidden="true"></i> envelope</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-envelope-o" aria-hidden="true"></i> envelope-o</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-envelope-open" + aria-hidden="true"></i> envelope-open</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-envelope-open-o" + aria-hidden="true"></i> envelope-open-o</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-envelope-square" + aria-hidden="true"></i> envelope-square</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-eraser" aria-hidden="true"></i> eraser</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-exchange" aria-hidden="true"></i> exchange</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-exclamation" aria-hidden="true"></i> exclamation</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i + class="fa fa-exclamation-circle" aria-hidden="true"></i> exclamation-circle</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i + class="fa fa-exclamation-triangle" aria-hidden="true"></i> exclamation-triangle</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-external-link" + aria-hidden="true"></i> external-link</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i + class="fa fa-external-link-square" aria-hidden="true"></i> external-link-square</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-eye" aria-hidden="true"></i> eye</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-eye-slash" aria-hidden="true"></i> eye-slash</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-eyedropper" aria-hidden="true"></i> eyedropper</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-film" aria-hidden="true"></i> film</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-flag" aria-hidden="true"></i> flag</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-flash" aria-hidden="true"></i> flash + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-gear" aria-hidden="true"></i> gear + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-gears" aria-hidden="true"></i> gears + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-globe" aria-hidden="true"></i> globe</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-group" aria-hidden="true"></i> group + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-hashtag" aria-hidden="true"></i> hashtag</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-hdd-o" aria-hidden="true"></i> hdd-o</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-history" aria-hidden="true"></i> history</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-home" aria-hidden="true"></i> home</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-i-cursor" aria-hidden="true"></i> i-cursor</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-id-badge" aria-hidden="true"></i> id-badge</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-id-card" aria-hidden="true"></i> id-card</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-id-card-o" aria-hidden="true"></i> id-card-o</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-image" aria-hidden="true"></i> image + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-inbox" aria-hidden="true"></i> inbox</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-industry" aria-hidden="true"></i> industry</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-info" aria-hidden="true"></i> info</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-info-circle" aria-hidden="true"></i> info-circle</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-key" aria-hidden="true"></i> key</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-keyboard-o" aria-hidden="true"></i> keyboard-o</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-language" aria-hidden="true"></i> language</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-laptop" aria-hidden="true"></i> laptop</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-leaf" aria-hidden="true"></i> leaf</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-life-bouy" aria-hidden="true"></i> life-bouy + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-life-buoy" aria-hidden="true"></i> life-buoy + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-life-ring" aria-hidden="true"></i> life-ring</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-life-saver" aria-hidden="true"></i> life-saver + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-lightbulb-o" aria-hidden="true"></i> lightbulb-o</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-location-arrow" aria-hidden="true"></i> location-arrow</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-lock" aria-hidden="true"></i> lock</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-low-vision" aria-hidden="true"></i> low-vision</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-mail-forward" aria-hidden="true"></i> mail-forward + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-mail-reply" aria-hidden="true"></i> mail-reply + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-mail-reply-all" aria-hidden="true"></i> mail-reply-all</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-male" aria-hidden="true"></i> male</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-map" aria-hidden="true"></i> map</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-map-marker" aria-hidden="true"></i> map-marker</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-map-o" aria-hidden="true"></i> map-o</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-map-pin" aria-hidden="true"></i> map-pin</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-microchip" aria-hidden="true"></i> microchip</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-microphone" aria-hidden="true"></i> microphone</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-microphone-slash" + aria-hidden="true"></i> microphone-slash</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-minus" aria-hidden="true"></i> minus</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-minus-circle" aria-hidden="true"></i> minus-circle</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-minus-square" aria-hidden="true"></i> minus-square</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-minus-square-o" aria-hidden="true"></i> minus-square-o</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-mouse-pointer" + aria-hidden="true"></i> mouse-pointer</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-navicon" aria-hidden="true"></i> navicon + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-newspaper-o" aria-hidden="true"></i> newspaper-o</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-object-group" aria-hidden="true"></i> object-group</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-object-ungroup" aria-hidden="true"></i> object-ungroup</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-paper-plane-o" + aria-hidden="true"></i> paper-plane-o</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-pencil" aria-hidden="true"></i> pencil</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-pencil-square" + aria-hidden="true"></i> pencil-square</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-pencil-square-o" + aria-hidden="true"></i> pencil-square-o</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-phone-square" aria-hidden="true"></i> phone-square</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-photo" aria-hidden="true"></i> photo + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-picture-o" aria-hidden="true"></i> picture-o</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-plus" aria-hidden="true"></i> plus</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-plus-circle" aria-hidden="true"></i> plus-circle</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-podcast" aria-hidden="true"></i> podcast</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-power-off" aria-hidden="true"></i> power-off</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-print" aria-hidden="true"></i> print</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-qrcode" aria-hidden="true"></i> qrcode</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-question" aria-hidden="true"></i> question</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-question-circle" + aria-hidden="true"></i> question-circle</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i + class="fa fa-question-circle-o" aria-hidden="true"></i> question-circle-o</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-random" aria-hidden="true"></i> random</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-recycle" aria-hidden="true"></i> recycle</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-registered" aria-hidden="true"></i> registered</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-remove" aria-hidden="true"></i> remove + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-reorder" aria-hidden="true"></i> reorder + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-reply" aria-hidden="true"></i> reply</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-reply-all" aria-hidden="true"></i> reply-all</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-retweet" aria-hidden="true"></i> retweet</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-road" aria-hidden="true"></i> road</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-rocket" aria-hidden="true"></i> rocket</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-rss" aria-hidden="true"></i> rss</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-rss-square" aria-hidden="true"></i> rss-square</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-search" aria-hidden="true"></i> search</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-search-minus" aria-hidden="true"></i> search-minus</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-search-plus" aria-hidden="true"></i> search-plus</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-send" aria-hidden="true"></i> send + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-send-o" + aria-hidden="true"></i> send-o</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-server" aria-hidden="true"></i> server</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-share" aria-hidden="true"></i> share</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-share-alt" aria-hidden="true"></i> share-alt</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-share-alt-square" + aria-hidden="true"></i> share-alt-square</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-share-square" aria-hidden="true"></i> share-square</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-share-square-o" aria-hidden="true"></i> share-square-o</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-sign-in" aria-hidden="true"></i> sign-in</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-sign-out" aria-hidden="true"></i> sign-out</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-signing" + aria-hidden="true"></i> signing</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-sitemap" aria-hidden="true"></i> sitemap</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-sliders" aria-hidden="true"></i> sliders</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-smile-o" aria-hidden="true"></i> smile-o</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-soccer-ball-o" aria-hidden="true"></i> soccer-ball-o + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-sort" aria-hidden="true"></i> sort</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-sort-alpha-asc" aria-hidden="true"></i> sort-alpha-asc</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-sort-alpha-desc" + aria-hidden="true"></i> sort-alpha-desc</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-sort-amount-asc" + aria-hidden="true"></i> sort-amount-asc</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-sort-amount-desc" + aria-hidden="true"></i> sort-amount-desc</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-sort-asc" aria-hidden="true"></i> sort-asc</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-sort-desc" aria-hidden="true"></i> sort-desc</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-sort-down" aria-hidden="true"></i> sort-down + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-sort-numeric-asc" + aria-hidden="true"></i> sort-numeric-asc</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i + class="fa fa-sort-numeric-desc" aria-hidden="true"></i> sort-numeric-desc</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-sort-up" aria-hidden="true"></i> sort-up + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-sticky-note" aria-hidden="true"></i> sticky-note</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-sticky-note-o" + aria-hidden="true"></i> sticky-note-o</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-sun-o" aria-hidden="true"></i> sun-o</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-support" aria-hidden="true"></i> support + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-tablet" aria-hidden="true"></i> tablet</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-tachometer" aria-hidden="true"></i> tachometer</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-tag" aria-hidden="true"></i> tag</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-tags" aria-hidden="true"></i> tags</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-tasks" aria-hidden="true"></i> tasks</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-times" aria-hidden="true"></i> times</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-times-circle" aria-hidden="true"></i> times-circle</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-times-circle-o" aria-hidden="true"></i> times-circle-o</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-times-rectangle" aria-hidden="true"></i> times-rectangle</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-times-rectangle-o" aria-hidden="true"></i> times-rectangle-o</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-trash-o" aria-hidden="true"></i> trash-o</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-unlock" aria-hidden="true"></i> unlock</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-unlock-alt" aria-hidden="true"></i> unlock-alt</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-unsorted" aria-hidden="true"></i> unsorted + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-upload" aria-hidden="true"></i> upload</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-user" aria-hidden="true"></i> user</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-user-circle" aria-hidden="true"></i> user-circle</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-user-circle-o" + aria-hidden="true"></i> user-circle-o</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-user-o" aria-hidden="true"></i> user-o</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-vcard" aria-hidden="true"></i> vcard + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-vcard-o" aria-hidden="true"></i> vcard-o + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-warning" + aria-hidden="true"></i> + warning</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-wrench" aria-hidden="true"></i> wrench</a> + </div> + </div> + </section> + <section id="file-type"> + <h3 class="page-header">File Type Icons</h3> + <div class="row fontawesome-icon-list"> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-file" aria-hidden="true"></i> file</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-file-excel-o" aria-hidden="true"></i> file-excel-o</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-file-o" aria-hidden="true"></i> file-o</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i + class="fa fa-file-powerpoint-o" aria-hidden="true"></i> file-powerpoint-o</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-file-sound-o" aria-hidden="true"></i> file-sound-o + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-cut" aria-hidden="true"></i> cut</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-files-o" aria-hidden="true"></i> files-o</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-file-text" aria-hidden="true"></i> file-text</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-file-text-o" aria-hidden="true"></i> file-text-o</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-file-video-o" aria-hidden="true"></i> file-video-o</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-file-word-o" aria-hidden="true"></i> file-word-o</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-file-zip-o" aria-hidden="true"></i> file-zip-o + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-folder" aria-hidden="true"></i> folder</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-folder-o" aria-hidden="true"></i> folder-o</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-folder-open" aria-hidden="true"></i> folder-open</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-folder-open-o" + aria-hidden="true"></i> folder-open-o</a></div> + </div> + </section> + <section id="spinner"> + <h3 class="page-header">Spinner Icons</h3> + <div class="row fontawesome-icon-list"> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-circle-o-notch" aria-hidden="true"></i> circle-o-notch</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-spinner" aria-hidden="true"></i> spinner</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-cog" aria-hidden="true"></i> cog</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-cogs" aria-hidden="true"></i> cogs</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-refresh" aria-hidden="true"></i> refresh</a> + </div> + </div> + </section> + <section id="form-control"> + <h3 class="page-header">Form Control Icons</h3> + <div class="row fontawesome-icon-list"> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-check-square" aria-hidden="true"></i> check-square</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-check-square-o" aria-hidden="true"></i> check-square-o</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-circle" aria-hidden="true"></i> circle</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-circle-o" aria-hidden="true"></i> circle-o</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-dot-circle-o" aria-hidden="true"></i> dot-circle-o</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-minus-square" aria-hidden="true"></i> minus-square</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-minus-square-o" aria-hidden="true"></i> minus-square-o</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-plus-square" aria-hidden="true"></i> plus-square</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-plus-square-o" + aria-hidden="true"></i> plus-square-o</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-square" aria-hidden="true"></i> square</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-square-o" aria-hidden="true"></i> square-o</a> + </div> + </div> + </section> + <section id="chart"> + <h3 class="page-header">Chart Icons</h3> + <div class="row fontawesome-icon-list"> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-dashboard" aria-hidden="true"></i> dashboard + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-area-chart" aria-hidden="true"></i> area-chart</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-bar-chart" aria-hidden="true"></i> bar-chart</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-bar-chart-o" aria-hidden="true"></i> bar-chart-o + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-line-chart" aria-hidden="true"></i> line-chart</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-pie-chart" aria-hidden="true"></i> pie-chart</a> + </div> + </div> + </section> + <section id="text-editor"> + <h3 class="page-header">Text Editor Icons</h3> + <div class="row fontawesome-icon-list"> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-dedent" aria-hidden="true"></i> dedent + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-eraser" aria-hidden="true"></i> eraser</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-floppy-o" aria-hidden="true"></i> floppy-o</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-font" aria-hidden="true"></i> font</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-header" aria-hidden="true"></i> header</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-indent" aria-hidden="true"></i> indent</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-link" aria-hidden="true"></i> link</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-list" aria-hidden="true"></i> list</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-list-alt" aria-hidden="true"></i> list-alt</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-list-ol" aria-hidden="true"></i> list-ol</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-list-ul" aria-hidden="true"></i> list-ul</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-paste" aria-hidden="true"></i> paste + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-repeat" aria-hidden="true"></i> repeat</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-rotate-left" aria-hidden="true"></i> rotate-left + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-rotate-right" aria-hidden="true"></i> rotate-right + </a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-text-width" aria-hidden="true"></i> text-width</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-th" aria-hidden="true"></i> th</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-th-large" aria-hidden="true"></i> th-large</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-th-list" aria-hidden="true"></i> th-list</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-underline" aria-hidden="true"></i> underline</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-undo" aria-hidden="true"></i> undo</a> + </div> + </div> + </section> + <section id="directional"> + <h3 class="page-header">Directional Icons</h3> + <div class="row fontawesome-icon-list"> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i + class="fa fa-angle-double-down" aria-hidden="true"></i> angle-double-down</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i + class="fa fa-angle-double-left" aria-hidden="true"></i> angle-double-left</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i + class="fa fa-angle-double-right" aria-hidden="true"></i> angle-double-right</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-angle-double-up" + aria-hidden="true"></i> angle-double-up</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-angle-down" aria-hidden="true"></i> angle-down</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-angle-left" aria-hidden="true"></i> angle-left</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-angle-right" aria-hidden="true"></i> angle-right</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-angle-up" aria-hidden="true"></i> angle-up</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-arrow-down" aria-hidden="true"></i> arrow-down</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-arrow-left" aria-hidden="true"></i> arrow-left</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-arrow-right" aria-hidden="true"></i> arrow-right</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-arrow-up" aria-hidden="true"></i> arrow-up</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-arrows" aria-hidden="true"></i> arrows</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-arrows-h" aria-hidden="true"></i> arrows-h</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-arrows-v" aria-hidden="true"></i> arrows-v</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-caret-down" aria-hidden="true"></i> caret-down</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-caret-left" aria-hidden="true"></i> caret-left</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-caret-right" aria-hidden="true"></i> caret-right</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-caret-up" aria-hidden="true"></i> caret-up</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i + class="fa fa-chevron-circle-down" aria-hidden="true"></i> chevron-circle-down</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i + class="fa fa-chevron-circle-left" aria-hidden="true"></i> chevron-circle-left</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i + class="fa fa-chevron-circle-right" aria-hidden="true"></i> chevron-circle-right</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i + class="fa fa-chevron-circle-up" aria-hidden="true"></i> chevron-circle-up</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-chevron-down" aria-hidden="true"></i> chevron-down</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-chevron-left" aria-hidden="true"></i> chevron-left</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-chevron-right" + aria-hidden="true"></i> chevron-right</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-chevron-up" aria-hidden="true"></i> chevron-up</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-exchange" aria-hidden="true"></i> exchange</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-hand-o-down" aria-hidden="true"></i> hand-o-down</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-hand-o-left" aria-hidden="true"></i> hand-o-left</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-hand-o-right" aria-hidden="true"></i> hand-o-right</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-hand-o-up" aria-hidden="true"></i> hand-o-up</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-long-arrow-down" + aria-hidden="true"></i> long-arrow-down</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-long-arrow-left" + aria-hidden="true"></i> long-arrow-left</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-long-arrow-right" + aria-hidden="true"></i> long-arrow-right</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-long-arrow-up" + aria-hidden="true"></i> long-arrow-up</a></div> + </div> + </section> + <section id="video-player"> + <h3 class="page-header">Video Player Icons</h3> + <div class="row fontawesome-icon-list"> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"> + <i class="fa fa-arrows-alt" aria-hidden="true"></i> arrows-alt</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-backward" aria-hidden="true"></i> backward</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-compress" aria-hidden="true"></i> compress</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-expand" aria-hidden="true"></i> expand</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-fast-backward" + aria-hidden="true"></i> fast-backward</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-fast-forward" aria-hidden="true"></i> fast-forward</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-forward" aria-hidden="true"></i> forward</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-pause" aria-hidden="true"></i> pause</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-pause-circle" aria-hidden="true"></i> pause-circle</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-pause-circle-o" aria-hidden="true"></i> pause-circle-o</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-play" aria-hidden="true"></i> play</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-play-circle" aria-hidden="true"></i> play-circle</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-play-circle-o" + aria-hidden="true"></i> play-circle-o</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-random" aria-hidden="true"></i> random</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-step-backward" + aria-hidden="true"></i> step-backward</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-step-forward" aria-hidden="true"></i> step-forward</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-stop" aria-hidden="true"></i> stop</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-stop-circle" aria-hidden="true"></i> stop-circle</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a + href="javascript:;"><i class="fa fa-stop-circle-o" + aria-hidden="true"></i> stop-circle-o</a></div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-youtube-play" aria-hidden="true"></i> youtube-play</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-video-camera" aria-hidden="true"></i> video-camera</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-volume-down" aria-hidden="true"></i> volume-down</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-volume-off" aria-hidden="true"></i> volume-off</a> + </div> + <div class="fa-hover col-md-3 col-sm-4"><a href="javascript:;"><i + class="fa fa-volume-up" aria-hidden="true"></i> volume-up</a> + </div> + </div> + </section> + </div> + </div> +</div> +<#include "/js/modules/sys/icon.js"> +</body> +</html>
\ No newline at end of file diff --git a/nezha-admin/src/main/resources/templates/modules/sys/menu.html b/nezha-admin/src/main/resources/templates/modules/sys/menu.html index 1ed9c134..dbe8c416 100644 --- a/nezha-admin/src/main/resources/templates/modules/sys/menu.html +++ b/nezha-admin/src/main/resources/templates/modules/sys/menu.html @@ -2,7 +2,8 @@ <html> <head> <title>菜单管理</title> -<#include "/header.html"> + <#include "/header.html"> + <#import "/spring.ftl" as spring> <link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap-table.min.css"> <link rel="stylesheet" href="${request.contextPath}/statics/plugins/treegrid/jquery.treegrid.css"> <script src="${request.contextPath}/statics/libs/bootstrap-table.min.js"></script> @@ -13,18 +14,26 @@ </head> <body> <div id="rrapp" v-cloak> + + <!-- 列表 查询 --> <div v-show="showList"> - <div class="grid-btn"> + + <div class="tools"> <#if shiro.hasPermission("sys:menu:save")> - <a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i> 新增</a> + <a class="btn btn-primary" @click="add" title="<@spring.message 'common.add'/>"> + <i class="fa fa-plus"></i></a> </#if> <#if shiro.hasPermission("sys:menu:update")> - <a class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i> 修改</a> + <a class="btn btn-primary" @click="update" title="<@spring.message 'common.edit'/>"> + <i class="fa fa-pencil"></i></a> </#if> <#if shiro.hasPermission("sys:menu:delete")> - <a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i> 删除</a> + <a class="btn btn-primary" @click="del" title="<@spring.message 'common.delete'/>"> + <i class="fa fa-trash-o"></i></a> </#if> </div> + + <!-- 列表数据 --> <table id="menuTable" data-mobile-responsive="true" data-click-to-select="true"> <thead> <tr> @@ -34,63 +43,106 @@ </table> </div> + + <!--表单--> <div v-show="!showList" class="panel panel-default"> <div class="panel-heading">{{title}}</div> <form class="form-horizontal"> + + <!--类型--> <div class="form-group"> - <div class="col-sm-2 control-label">类型</div> - <label class="radio-inline"> - <input type="radio" name="type" value="0" v-model="menu.type"/> 目录 - </label> - <label class="radio-inline"> - <input type="radio" name="type" value="1" v-model="menu.type"/> 菜单 - </label> - <label class="radio-inline"> - <input type="radio" name="type" value="2" v-model="menu.type"/> 按钮 - </label> + <div class="col-sm-2 control-label"><@spring.message 'menu.type'/></div> + <div class="col-sm-9"> + <label class="radio-inline"><!--目录--> + <input type="radio" name="type" value="0" v-model="menu.type"/> <@spring.message 'menu.directory'/> + </label> + <label class="radio-inline"><!--菜单--> + <input type="radio" name="type" value="1" v-model="menu.type"/> <@spring.message 'menu.menu'/> + </label> + <label class="radio-inline"><!--按钮--> + <input type="radio" name="type" value="2" v-model="menu.type"/> <@spring.message 'common.button'/> + </label> + </div> </div> + + <!--菜单名称--> <div class="form-group"> - <div class="col-sm-2 control-label">菜单名称</div> - <div class="col-sm-10"> - <input type="text" class="form-control" v-model="menu.name" placeholder="菜单名称或按钮名称"/> + <div class="col-sm-2 control-label"><@spring.message 'common.name'/></div> + <div class="col-sm-9"> + <input type="text" class="form-control" + :class="{'form-control--error': $v.menu.name.$dirty && !$v.menu.name.required }" + v-model="$v.menu.name.$model" + placeholder="<@spring.message 'common.name'/>"/> + <span class="required-symbol">*</span> + <div class="form-control_error-msg" v-if="$v.menu.name.$dirty && !$v.menu.name.required"> + <@spring.message 'validate.common.required'/> + </div> </div> </div> + + <!--上级菜单--> <div class="form-group"> - <div class="col-sm-2 control-label">上级菜单</div> - <div class="col-sm-10"> - <input type="text" class="form-control" style="cursor:pointer;" v-model="menu.parentName" @click="menuTree" readonly="readonly" placeholder="一级菜单"/> + <div class="col-sm-2 control-label"><@spring.message 'menu.parent'/></div> + <div class="col-sm-9"> + <input type="text" class="form-control" style="cursor:pointer;" v-model="menu.parentName" @click="menuTree" readonly="readonly" placeholder="<@spring.message 'menu.firstOrder'/>"/> </div> </div> + + <!--菜单URL--> <div v-if="menu.type == 1" class="form-group"> - <div class="col-sm-2 control-label">菜单URL</div> - <div class="col-sm-10"> - <input type="text" class="form-control" v-model="menu.url" placeholder="菜单URL"/> + <div class="col-sm-2 control-label">URL</div> + <div class="col-sm-9"> + <input type="text" class="form-control" + :class="{'form-control--error': $v.menu.url.$dirty && !$v.menu.url.urlRequired }" + v-model="$v.menu.url.$model" + placeholder="URL"/> + <span class="required-symbol" v-show="menu.type == 1">*</span> + <div class="form-control_error-msg" v-if="$v.menu.url.$dirty && !$v.menu.url.urlRequired"> + <@spring.message 'validate.common.required'/> + </div> </div> </div> + + <!--授权标识--> <div v-if="menu.type == 1 || menu.type == 2" class="form-group"> - <div class="col-sm-2 control-label">授权标识</div> - <div class="col-sm-10"> + <div class="col-sm-2 control-label"><@spring.message 'menu.authority.flag'/></div> + <div class="col-sm-9"> <input type="text" class="form-control" v-model="menu.perms" placeholder="多个用逗号分隔，如：user:list,user:create"/> </div> </div> + + <!--排序号--> <div v-if="menu.type != 2" class="form-group"> - <div class="col-sm-2 control-label">排序号</div> - <div class="col-sm-10"> - <input type="number" class="form-control" v-model="menu.orderNum" placeholder="排序号"/> + <div class="col-sm-2 control-label"><@spring.message 'menu.sortNumber'/></div> + <div class="col-sm-9"> + <input type="number" class="form-control" v-model="menu.orderNum" placeholder="<@spring.message 'menu.sortNumber'/>"/> </div> </div> + <div v-if="menu.type != 2" class="form-group"> - <div class="col-sm-2 control-label">图标</div> - <div class="col-sm-10"> - <input type="text" class="form-control" v-model="menu.icon" placeholder="菜单图标"/> - <code style="margin-top:4px;display: block;">获取图标：http://www.fontawesome.com.cn/faicons/</code> + <div class="col-sm-2 control-label"><@spring.message 'menu.icon'/></div> + <div class="col-sm-9"> + <!--<input type="text" class="form-control" v-model="menu.icon" placeholder="菜单图标"/>--> + <template> + <i id="icon" aria-hidden="true"></i> + <button type="button" class="btn btn-default" style="margin-left: 20px" @click="getIcon">获取图标</button> + <button type="button" class="btn btn-default" @click="cancelIcon">取消图标</button> + </template> </div> </div> - <div class="form-group"> - <div class="col-sm-2 control-label"></div> - <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/> - <input type="button" class="btn btn-warning" @click="reload" value="返回"/> - </div> + + + + <!-- 保存 / 返回 --> + <div class="form-group form-group_opbox"> + <div> + <button title="<@spring.message 'common.submit'/>" type="button" class="btn btn-primary" + style="width: 55px" @click="saveOrUpdate"><i class="fa fa-check"></i></button> + <div style="display:inline-block;width:10px;"></div> + <button title="<@spring.message 'common.back'/>" type="button" class="btn btn-warning" + style="width: 55px" @click="reload"><i class="fa fa-reply"></i></button> + </div> + </div> </form> </div> </div> @@ -100,6 +152,7 @@ <ul id="menuTree" class="ztree"></ul> </div> -<script src="${request.contextPath}/statics/js/modules/sys/menu.js?_${.now?long}"></script> +<!--<script src="${request.contextPath}/statics/js/modules/sys/menu.js?_${.now?long}"></script>--> +<#include "/js/modules/sys/menu.js"> </body> </html>
\ No newline at end of file |