account.tmpl 8.1 KB

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