users.tpl 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>成员 - Powered by MinDoc</title>
  8. <!-- Bootstrap -->
  9. <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  10. <link href="/static/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  11. <link href="/static/css/main.css" rel="stylesheet">
  12. <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  13. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  14. <!--[if lt IE 9]>
  15. <script src="/static/html5shiv/3.7.3/html5shiv.min.js"></script>
  16. <script src="/static/respond.js/1.4.2/respond.min.js"></script>
  17. <![endif]-->
  18. </head>
  19. <body>
  20. <div class="manual-reader">
  21. {{template "widgets/header.tpl" .}}
  22. <div class="container manual-body">
  23. <div class="row">
  24. <div class="page-left">
  25. <ul class="menu">
  26. <li><a href="{{urlfor "BookController.Dashboard" ":key" .Model.Identify}}" class="item"><i class="fa fa-dashboard" aria-hidden="true"></i> 概要</a> </li>
  27. <li class="active"><a href="{{urlfor "BookController.Users" ":key" .Model.Identify}}" class="item"><i class="fa fa-users" aria-hidden="true"></i> 成员</a> </li>
  28. {{if eq .Model.RoleId 0 1}}
  29. <li><a href="{{urlfor "BookController.Setting" ":key" .Model.Identify}}" class="item"><i class="fa fa-gear" aria-hidden="true"></i> 设置</a> </li>
  30. {{end}}
  31. </ul>
  32. </div>
  33. <div class="page-right">
  34. <div class="m-box">
  35. <div class="box-head">
  36. <strong class="box-title"> 成员管理</strong>
  37. {{if eq .Model.RoleId 0 1}}
  38. <button type="button" class="btn btn-success btn-sm pull-right" data-toggle="modal" data-target="#addBookMemberDialogModal"><i class="fa fa-user-plus" aria-hidden="true"></i> 添加成员</button>
  39. {{end}}
  40. </div>
  41. </div>
  42. <div class="box-body">
  43. <div class="users-list" id="userList">
  44. <template v-if="lists.length <= 0">
  45. <div class="text-center">暂无数据</div>
  46. </template>
  47. <template v-else>
  48. <div class="list-item" v-for="item in lists">
  49. <img :src="item.avatar" onerror="this.src='/static/images/middle.gif'" class="img-circle" width="34" height="34">
  50. <span>${item.account}</span>
  51. <div class="operate">
  52. <template v-if="item.role_id == 0">
  53. 创始人
  54. </template>
  55. <template v-else>
  56. <template v-if="(book.role_id == 1 || book.role_id == 0) && member.member_id != item.member_id">
  57. <div class="btn-group">
  58. <button type="button" class="btn btn-default btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  59. ${item.role_name}
  60. <span class="caret"></span></button>
  61. <ul class="dropdown-menu">
  62. <li><a href="javascript:;" @click="setBookMemberRole(item.member_id,1)">管理员</a> </li>
  63. <li><a href="javascript:;" @click="setBookMemberRole(item.member_id,2)">编辑者</a> </li>
  64. <li><a href="javascript:;" @click="setBookMemberRole(item.member_id,3)">观察者</a> </li>
  65. </ul>
  66. </div>
  67. <button type="button" class="btn btn-danger btn-sm" @click="removeBookMember(item.member_id)">移除</button>
  68. </template>
  69. <template v-else>
  70. <template v-if="item.role_id == 1">
  71. 管理员
  72. </template>
  73. <template v-else-if="item.role_id == 2">
  74. 编辑者
  75. </template>
  76. <template v-else-if="item.role_id == 3">
  77. 观察者
  78. </template>
  79. </template>
  80. </template>
  81. </div>
  82. </div>
  83. </template>
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. </div>
  89. {{template "widgets/footer.tpl" .}}
  90. </div>
  91. <!-- Modal -->
  92. <div class="modal fade" id="addBookMemberDialogModal" tabindex="-1" role="dialog" aria-labelledby="addBookMemberDialogModalLabel">
  93. <div class="modal-dialog modal-sm" role="document" style="width: 400px;">
  94. <form method="post" autocomplete="off" class="form-horizontal" action="{{urlfor "BookController.AddMember"}}" id="addBookMemberDialogForm">
  95. <input type="hidden" name="identify" value="{{.Model.Identify}}">
  96. <div class="modal-content">
  97. <div class="modal-header">
  98. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  99. <h4 class="modal-title" id="myModalLabel">添加成员</h4>
  100. </div>
  101. <div class="modal-body">
  102. <div class="form-group">
  103. <label class="col-sm-2 control-label">账号</label>
  104. <div class="col-sm-10">
  105. <input type="text" name="account" class="form-control" placeholder="用户账号" id="account" maxlength="50">
  106. </div>
  107. </div>
  108. <div class="form-group">
  109. <label class="col-sm-2 control-label">角色</label>
  110. <div class="col-sm-10">
  111. <select name="role_id" class="form-control">
  112. <option value="1">管理员</option>
  113. <option value="2">编辑者</option>
  114. <option value="3">观察者</option>
  115. </select>
  116. </div>
  117. </div>
  118. <div class="clearfix"></div>
  119. </div>
  120. <div class="modal-footer">
  121. <span id="form-error-message"></span>
  122. <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
  123. <button type="submit" class="btn btn-success" data-loading-text="保存中..." id="btnAddMember">保存</button>
  124. </div>
  125. </div>
  126. </form>
  127. </div>
  128. </div><!--END Modal-->
  129. <script src="/static/jquery/1.12.4/jquery.min.js"></script>
  130. <script src="/static/bootstrap/js/bootstrap.min.js"></script>
  131. <script src="/static/vuejs/vue.min.js"></script>
  132. <script src="/static/js/jquery.form.js" type="text/javascript"></script>
  133. <script src="/static/js/main.js" type="text/javascript"></script>
  134. <script type="text/javascript">
  135. $(function () {
  136. $("#addBookMemberDialogForm").ajaxForm({
  137. beforeSubmit : function () {
  138. var account = $.trim($("#account").val());
  139. if(account === ""){
  140. return showError("账号不能为空");
  141. }
  142. $("#btnAddMember").button("loading");
  143. },
  144. success : function (res) {
  145. if(res.errcode === 0){
  146. app.lists.splice(0,0,res.data);
  147. $("#addBookMemberDialogModal").modal("hide");
  148. }else{
  149. showError(res.message);
  150. }
  151. $("#btnAddMember").button("reset");
  152. }
  153. });
  154. var app = new Vue({
  155. el : "#userList",
  156. data : {
  157. lists : {{.Result}},
  158. member : {
  159. member_role : {{.Member.Role}},
  160. member_id : {{.Member.MemberId}}
  161. },
  162. book : {
  163. role_id : {{.Model.RoleId}},
  164. identify : {{.Model.Identify}}
  165. }
  166. },
  167. delimiters : ['${','}'],
  168. methods : {
  169. setBookMemberRole : function (member_id, role_id) {
  170. var $this = this;
  171. $.ajax({
  172. url : "{{urlfor "BookController.ChangeRole"}}",
  173. data : { "identify" : $this.book.identify,"member_id" : member_id,"role_id" : role_id },
  174. type :"post",
  175. dataType : "json",
  176. success : function (res) {
  177. console.log(res);
  178. if (res.errcode === 0){
  179. for(var index in $this.lists){
  180. var item = $this.lists[index];
  181. if (item.member_id === member_id){
  182. $this.lists.splice(index,1,res.data);
  183. }
  184. }
  185. }else{
  186. alert(res.message);
  187. }
  188. }
  189. });
  190. },
  191. removeBookMember : function (member_id) {
  192. var $this = this;
  193. $.ajax({
  194. url : "{{urlfor "BookController.RemoveMember"}}",
  195. type :"post",
  196. dataType :"json",
  197. data :{ "identify" : $this.book.identify,"member_id" : member_id},
  198. success : function (res) {
  199. if(res.errcode === 0){
  200. for(var index in $this.lists){
  201. if($this.lists[index].member_id === member_id){
  202. $this.lists.splice(index,1);
  203. break;
  204. }
  205. }
  206. }else{
  207. alert(res.message);
  208. }
  209. }
  210. });
  211. }
  212. }
  213. });
  214. Vue.nextTick(function () {
  215. $("[data-toggle='tooltip']").tooltip();
  216. });
  217. });
  218. </script>
  219. </body>
  220. </html>