account.tmpl 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. {{template "header.tmpl" .}}
  2. <style type="text/css">
  3. #filterform{
  4. margin: 10px 0px;
  5. }
  6. #filterform .form-group{
  7. margin-right: 20px;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. {{template "navbar.tmpl" .}}
  13. <div class="container-fluid">
  14. <h4 class="text-center">账号管理 <small>[<a href="#" id="add_btn"><i class="glyphicon glyphicon-plus"></i> 点击这里添加</a>]</small></h4>
  15. <hr />
  16. <table class="table table-bordered" style="margin-bottom:0px;">
  17. <thead>
  18. <tr>
  19. <th>ID</th>
  20. <th>账号</th>
  21. <th>姓名</th>
  22. <th>最后登录</th>
  23. <th>是否管理员</th>
  24. <th>状态</th>
  25. <th>操作</th>
  26. </tr>
  27. </thead>
  28. <tbody id="list"></tbody>
  29. </table>
  30. </div>
  31. <script type="text/javascript">
  32. var $SESS = {{.Sess}};
  33. function randomPassword(length) {
  34. var chars = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','0','1','2','3','4','5','6','7','8','9','`','-','=','~','!','@','#','$','%','^','*','(',')','_','+','[',']',';',',','.','{','}',':','<','>','?'];
  35. var pwd = '';
  36. for (var i=0; i<length; i++) {
  37. var k = Math.floor(Math.random() * chars.length);
  38. pwd += chars[k];
  39. }
  40. return pwd;
  41. }
  42. $(function(){
  43. //加载列表
  44. function account_list() {
  45. var list = $('#list');
  46. list.empty();
  47. $.post('/syscfg/account_list', {}, function(resp){
  48. if (resp && resp.errno == 0 && resp.data) {
  49. var html = '';
  50. for (var i=0; i<resp.data.length; i++) {
  51. var item = resp.data[i];
  52. html += '<tr>';
  53. html += '<td>' + item.Id + '</td>';
  54. html += '<td>' + item.Account + '</td>';
  55. html += '<td>' + item.Name + '</td>';
  56. html += '<td>' + (item.LastLogin == '' ? '<i class="text-muted">无</i>' : item.LastLogin) + '</td>';
  57. html += '<td class="' + (item.IsSuper ? 'text-danger' : '') + '">' + (item.IsSuper ? '是' : '否') + '</td>';
  58. html += '<td class="' + (item.Disabled ? 'danger' : '') + '">' + (item.Disabled ? '禁用' : '正常') + '</td>';
  59. html += '<td>';
  60. html += ' <button class="btn btn-xs btn-primary" type="button" data-value="' + item.Id + '">编辑</button>&nbsp;';
  61. html += ' <button class="btn btn-xs btn-warning" type="button" data-value="' + item.Id + '">重置密码</button>&nbsp;';
  62. html += ' <button class="btn btn-xs btn-danger" type="button" data-value="' + item.Id + '">删除</button>';
  63. html += '</td>';
  64. html += '</tr>';
  65. }
  66. list.html(html);
  67. //修改
  68. $('.btn-primary', list).click(function(){
  69. var id = $(this).attr('data-value');
  70. $.get('/syscfg/account_get', {'id': id}, function(resp){
  71. if (resp && resp.errno == 0) {
  72. account_set(resp.data);
  73. }
  74. }, 'json');
  75. return false;
  76. });
  77. //重置密码
  78. $('.btn-warning', list).click(function(){
  79. var id = $(this).attr('data-value');
  80. var html = `<form>
  81. <div class="form-group">
  82. <label>请输入新密码</label>
  83. <input type="text" name="Password" class="form-control" maxlength="20" />
  84. </div>
  85. </form>`;
  86. $.alert({
  87. 'title': '修改密码',
  88. 'content': html,
  89. 'size': 'modal-sm',
  90. 'callback': function(dlg) {
  91. var form = $('form', dlg).get(0);
  92. if (form.Password.value.length < 6) {
  93. $.alert({'content': '密码长度不能小于6!'});
  94. return false;
  95. } else {
  96. $.post('/syscfg/account_reset_pwd', {
  97. 'id': id,
  98. 'password': form.Password.value
  99. }, function(resp){
  100. if (resp && resp.errno == 0) {
  101. $.alert({'content': '操作成功!'});
  102. } else {
  103. $.alert({'content': resp.error ? resp.error : '操作失败!'});
  104. }
  105. }, 'json');
  106. }
  107. }
  108. });
  109. return false;
  110. });
  111. //删除
  112. $('.btn-danger', list).click(function(){
  113. var id = $(this).attr('data-value');
  114. $.alert({
  115. 'content': '确定要删除该记录吗?',
  116. 'btncancel': true,
  117. 'callback': function() {
  118. $.post('/syscfg/account_del', {'id': id}, function(resp){
  119. if (resp && resp.errno == 0) {
  120. account_list();
  121. } else {
  122. $.alert({'content': resp.error ? resp.error : '操作失败!'});
  123. }
  124. }, 'json');
  125. }
  126. });
  127. });
  128. }
  129. }, 'json');
  130. return false;
  131. }
  132. //添加或修改记录
  133. function account_set(record){
  134. record = $.extend({
  135. 'Id': 0,
  136. 'Account': '',
  137. 'Name': '',
  138. 'Password': randomPassword(8),
  139. 'IsSuper': false,
  140. 'Disabled': false
  141. }, record);
  142. var html = `<form class="form-horizontal">
  143. <div class="form-group id-group" style="display:none;">
  144. <label class="col-md-4 control-label">ID</label>
  145. <div class="col-md-8">
  146. <input type="text" class="form-control" name="Id" maxlength="20" value="${record.Id}" readonly="readonly" style="width:100px;" />
  147. </div>
  148. </div>
  149. <div class="form-group">
  150. <label class="col-md-4 control-label">账号</label>
  151. <div class="col-md-8">
  152. <input type="text" class="form-control" name="Account" maxlength="20" value="${record.Account}" placeholder="不能为空" style="width:200px;" />
  153. </div>
  154. </div>
  155. <div class="form-group">
  156. <label class="col-md-4 control-label">姓名</label>
  157. <div class="col-md-8">
  158. <input type="text" class="form-control" name="Name" maxlength="20" value="${record.Name}" placeholder="不能为空" style="width:200px;" />
  159. </div>
  160. </div>
  161. <div class="form-group pwd-group" style="display:none;">
  162. <label class="col-md-4 control-label">初始密码</label>
  163. <div class="col-md-8">
  164. <input type="text" class="form-control" name="Password" maxlength="20" value="${record.Password}" placeholder="不能为空" style="width:200px;" />
  165. </div>
  166. </div>
  167. <div class="form-group">
  168. <label class="col-md-4 control-label">是否是管理员</label>
  169. <div class="col-md-8">
  170. <select class="form-control" name="IsSuper" style="width:100px;">
  171. <option value="0">否</option>
  172. <option value="1">是</option>
  173. </select>
  174. </div>
  175. </div>
  176. <div class="form-group">
  177. <label class="col-md-4 control-label">状态</label>
  178. <div class="col-md-8">
  179. <select class="form-control" name="Disabled" style="width:100px;">
  180. <option value="0">正常</option>
  181. <option value="1">禁用</option>
  182. </select>
  183. </div>
  184. </div>
  185. </form>`;
  186. $.alert({
  187. 'title': record.Id == 0 ? '添加账号' : '编辑账号',
  188. 'content': html,
  189. 'init': function(dlg) {
  190. var form = $('form', dlg).get(0);
  191. form.IsSuper.value = record.IsSuper ? '1' : '0';
  192. form.Disabled.value = record.Disabled ? '1' : '0';
  193. if (record.Id == 0) {
  194. $('.id-group', form).hide();
  195. $('.pwd-group', form).show();
  196. } else {
  197. $('.id-group', form).show();
  198. $('.pwd-group', form).hide();
  199. }
  200. },
  201. 'callback': function(dlg){
  202. var form = $('form', dlg).get(0);
  203. if (form.Account.value.length < 2) {
  204. $.alert({'content': '请填写至少2位字符的账号!'});
  205. } else if (/\W/.test(form.Account.value) || !/^[A-Za-z]/.test(form.Account.value)) {
  206. $.alert({'content': '账号只能使用字母数字和下划线的组合,并且必须使用字母开头!'});
  207. } else if (form.Name.value == '') {
  208. $.alert({'content': '请填写姓名!'});
  209. } else if (record.Id == 0 && form.Password.value.length < 6) {
  210. $.alert({'content': '请填写至少6位字符的初始密码!'});
  211. } else {
  212. $.post('/syscfg/account_set', $(form).serialize(), function(resp){
  213. if (resp && resp.errno == 0) {
  214. account_list();
  215. } else {
  216. $.alert({'content': resp.error ? resp.error : '操作失败!'});
  217. }
  218. }, 'json');
  219. return true;
  220. }
  221. return false;
  222. },
  223. 'btncancel': true
  224. });
  225. return false;
  226. }
  227. account_list(); //加载页面
  228. $('#add_btn').click(account_set); //添加按钮
  229. });
  230. </script>
  231. </body>
  232. </html>