menu.html 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>菜单管理</title>
  5. <meta charset="UTF-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  8. <link rel="stylesheet" href="../../css/bootstrap.min.css">
  9. <link rel="stylesheet" href="../../css/font-awesome.min.css">
  10. <link rel="stylesheet" href="../../plugins/jqgrid/ui.jqgrid-bootstrap.css">
  11. <link rel="stylesheet" href="../../plugins/ztree/css/metroStyle/metroStyle.css">
  12. <link rel="stylesheet" href="../../css/bootstrap-table.min.css">
  13. <link rel="stylesheet" href="../../css/main.css">
  14. <link rel="stylesheet" href="../../plugins/treegrid/jquery.treegrid.css">
  15. <script src="../../libs/jquery.min.js"></script>
  16. <script src="../../plugins/layer/layer.js"></script>
  17. <script src="../../libs/bootstrap.min.js"></script>
  18. <script src="../../libs/vue.min.js"></script>
  19. <script src="../../libs/bootstrap-table.min.js"></script>
  20. <script src="../../plugins/treegrid/jquery.treegrid.min.js"></script>
  21. <script src="../../plugins/treegrid/jquery.treegrid.bootstrap3.js"></script>
  22. <script src="../../plugins/treegrid/jquery.treegrid.extension.js"></script>
  23. <script src="../../plugins/treegrid/tree.table.js"></script>
  24. <script src="../../plugins/jqgrid/grid.locale-cn.js"></script>
  25. <script src="../../plugins/jqgrid/jquery.jqGrid.min.js"></script>
  26. <script src="../../plugins/ztree/jquery.ztree.all.min.js"></script>
  27. <script src="../../js/common.js"></script>
  28. </head>
  29. <body>
  30. <div id="rrapp" v-cloak>
  31. <div v-show="showList">
  32. <div class="grid-btn">
  33. <a v-if="hasPermission('sys:menu:save')" class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
  34. <a v-if="hasPermission('sys:menu:update')" class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
  35. <a v-if="hasPermission('sys:menu:delete')" class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
  36. </div>
  37. <table id="menuTable" data-mobile-responsive="true" data-click-to-select="true">
  38. <thead>
  39. <tr>
  40. <th data-field="selectItem" data-checkbox="true"></th>
  41. </tr>
  42. </thead>
  43. </table>
  44. </div>
  45. <div v-show="!showList" class="panel panel-default">
  46. <div class="panel-heading">{{title}}</div>
  47. <form class="form-horizontal">
  48. <div class="form-group">
  49. <div class="col-sm-2 control-label">类型</div>
  50. <label class="radio-inline">
  51. <input type="radio" name="type" value="0" v-model="menu.type"/> 目录
  52. </label>
  53. <label class="radio-inline">
  54. <input type="radio" name="type" value="1" v-model="menu.type"/> 菜单
  55. </label>
  56. <label class="radio-inline">
  57. <input type="radio" name="type" value="2" v-model="menu.type"/> 按钮
  58. </label>
  59. </div>
  60. <div class="form-group">
  61. <div class="col-sm-2 control-label">菜单名称</div>
  62. <div class="col-sm-10">
  63. <input type="text" class="form-control" v-model="menu.name" placeholder="菜单名称或按钮名称"/>
  64. </div>
  65. </div>
  66. <div class="form-group">
  67. <div class="col-sm-2 control-label">上级菜单</div>
  68. <div class="col-sm-10">
  69. <input type="text" class="form-control" style="cursor:pointer;" v-model="menu.parentName" @click="menuTree" readonly="readonly" placeholder="一级菜单"/>
  70. </div>
  71. </div>
  72. <div v-if="menu.type == 1" class="form-group">
  73. <div class="col-sm-2 control-label">菜单URL</div>
  74. <div class="col-sm-10">
  75. <input type="text" class="form-control" v-model="menu.url" placeholder="菜单URL"/>
  76. </div>
  77. </div>
  78. <div v-if="menu.type == 1 || menu.type == 2" class="form-group">
  79. <div class="col-sm-2 control-label">授权标识</div>
  80. <div class="col-sm-10">
  81. <input type="text" class="form-control" v-model="menu.perms" placeholder="多个用逗号分隔,如:user:list,user:create"/>
  82. </div>
  83. </div>
  84. <div v-if="menu.type != 2" class="form-group">
  85. <div class="col-sm-2 control-label">排序号</div>
  86. <div class="col-sm-10">
  87. <input type="number" class="form-control" v-model="menu.orderNum" placeholder="排序号"/>
  88. </div>
  89. </div>
  90. <div v-if="menu.type != 2" class="form-group">
  91. <div class="col-sm-2 control-label">图标</div>
  92. <div class="col-sm-10">
  93. <input type="text" class="form-control" v-model="menu.icon" placeholder="菜单图标"/>
  94. <code style="margin-top:4px;display: block;">获取图标:http://fontawesome.io/icons/</code>
  95. </div>
  96. </div>
  97. <div class="form-group">
  98. <div class="col-sm-2 control-label"></div>
  99. <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
  100. &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
  101. </div>
  102. </form>
  103. </div>
  104. </div>
  105. <!-- 选择菜单 -->
  106. <div id="menuLayer" style="display: none;padding:10px;">
  107. <ul id="menuTree" class="ztree"></ul>
  108. </div>
  109. <script src="../../js/modules/sys/menu.js"></script>
  110. </body>
  111. </html>