team.tpl 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  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>团队 - {{.Model.BookName}} - Powered by MinDoc</title>
  8. <!-- Bootstrap -->
  9. <link href="{{cdncss "/static/bootstrap/css/bootstrap.min.css"}}" rel="stylesheet">
  10. <link href="{{cdncss "/static/font-awesome/css/font-awesome.min.css"}}" rel="stylesheet">
  11. <link href="{{cdncss "/static/select2/4.0.5/css/select2.min.css"}}" rel="stylesheet">
  12. <link href="{{cdncss "/static/css/main.css" "version"}}" rel="stylesheet">
  13. <style type="text/css">
  14. .table > tbody > tr > td {
  15. vertical-align: middle;
  16. }
  17. </style>
  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. {{if eq .Model.RoleId 0 1}}
  28. <li><a href="{{urlfor "BookController.Users" ":key" .Model.Identify}}" class="item"><i class="fa fa-user" aria-hidden="true"></i> 成员</a></li>
  29. <li class="active"><a href="{{urlfor "BookController.Team" ":key" .Model.Identify}}" class="item"><i class="fa fa-group" aria-hidden="true"></i> 团队</a></li>
  30. <li><a href="{{urlfor "BookController.Setting" ":key" .Model.Identify}}" class="item"><i class="fa fa-gear" aria-hidden="true"></i> 设置</a></li>
  31. {{end}}
  32. </ul>
  33. </div>
  34. <div class="page-right">
  35. <div class="m-box">
  36. <div class="box-head">
  37. <strong class="box-title"> 团队管理</strong>
  38. {{if eq .Model.RoleId 0}}
  39. <button type="button" class="btn btn-success btn-sm pull-right" data-toggle="modal" data-target="#addTeamDialogModal"><i class="fa fa-user-plus" aria-hidden="true"></i>
  40. 添加团队
  41. </button>
  42. {{end}}
  43. </div>
  44. </div>
  45. <div class="box-body">
  46. <div class="users-list" id="teamList">
  47. <template v-if="lists.length <= 0">
  48. <div class="text-center">暂无数据</div>
  49. </template>
  50. <template v-else>
  51. <table class="table">
  52. <thead>
  53. <tr>
  54. <th>团队名称</th>
  55. <th width="100">成员数量</th>
  56. <th width="180">加入时间</th>
  57. <th align="center" width="220px">操作</th>
  58. </tr>
  59. </thead>
  60. <tbody>
  61. <tr v-for="item in lists">
  62. <td>${item.team_name}</td>
  63. <td>${item.member_count}</td>
  64. <td>${(new Date(item.create_time)).format("yyyy-MM-dd hh:mm:ss")}</td>
  65. <td>
  66. <button type="button" class="btn btn-danger btn-sm" @click="deleteTeam(item.team_id,$event)" data-loading-text="删除中">删除</button>
  67. </td>
  68. </tr>
  69. </tbody>
  70. </table>
  71. </template>
  72. <nav class="pagination-container">
  73. {{.PageHtml}}
  74. </nav>
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. </div>
  80. {{template "widgets/footer.tpl" .}}
  81. </div>
  82. <div class="modal fade" id="addTeamDialogModal" tabindex="-1" role="dialog" aria-labelledby="addTeamDialogModalLabel">
  83. <div class="modal-dialog" role="document">
  84. <form method="post" autocomplete="off" id="addTeamDialogForm" class="form-horizontal" action="{{urlfor "BookController.TeamAdd"}}">
  85. <input type="hidden" name="bookId" value="{{.Model.BookId}}">
  86. <input type="hidden" name="identify" value="{{.Model.Identify}}">
  87. <div class="modal-content">
  88. <div class="modal-header">
  89. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  90. <h4 class="modal-title" id="myModalLabel">添加团队</h4>
  91. </div>
  92. <div class="modal-body">
  93. <div class="form-group">
  94. <label class="col-sm-2 control-label" for="account">团队名称<span class="error-message">*</span></label>
  95. <div class="col-sm-10">
  96. <select type="text" name="teamId" id="teamId" class="js-data-example-ajax form-control" multiple="multiple"></select>
  97. </div>
  98. </div>
  99. <div class="clearfix"></div>
  100. </div>
  101. <div class="modal-footer">
  102. <span id="form-error-message"></span>
  103. <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
  104. <button type="submit" class="btn btn-success" data-loading-text="保存中..." id="btnAddTeam">保存
  105. </button>
  106. </div>
  107. </div>
  108. </form>
  109. </div>
  110. </div><!--END Modal-->
  111. <script src="{{cdnjs "/static/jquery/1.12.4/jquery.min.js"}}"></script>
  112. <script src="{{cdnjs "/static/bootstrap/js/bootstrap.min.js"}}"></script>
  113. <script src="{{cdnjs "/static/vuejs/vue.min.js"}}"></script>
  114. <script src="{{cdnjs "/static/js/jquery.form.js"}}" type="text/javascript"></script>
  115. <script src="{{cdnjs "/static/select2/4.0.5/js/select2.full.min.js"}}"></script>
  116. <script src="{{cdnjs "/static/select2/4.0.5/js/i18n/zh-CN.js"}}"></script>
  117. <script src="{{cdnjs "/static/js/main.js"}}" type="text/javascript"></script>
  118. <script type="text/javascript">
  119. $(function () {
  120. $("#addTeamDialogModal").on("show.bs.modal", function () {
  121. window.addTeamDialogModalHtml = $(this).find("form").html();
  122. $('.js-data-example-ajax').select2({
  123. language: "zh-CN",
  124. minimumInputLength: 1,
  125. minimumResultsForSearch: Infinity,
  126. maximumSelectionLength: 1,
  127. width: "100%",
  128. ajax: {
  129. url: '{{urlfor "BookController.TeamSearch" "identify" .Model.Identify}}',
  130. dataType: 'json',
  131. data: function (params) {
  132. return {
  133. q: params.term, // search term
  134. page: params.page
  135. };
  136. },
  137. processResults: function (data, params) {
  138. return {
  139. results: data.data.results
  140. }
  141. }
  142. }
  143. });
  144. }).on("hidden.bs.modal", function () {
  145. $(this).find("form").html(window.addTeamDialogModalHtml);
  146. }).on("shown.bs.modal", function () {
  147. $(this).find("input[name='teamId']").focus();
  148. });
  149. $("#addTeamDialogForm").ajaxForm({
  150. beforeSubmit: function () {
  151. var teamId = $.trim($("#addTeamDialogForm select[name='teamId']").val());
  152. if (teamId == "") {
  153. return showError("团队名称不能为空");
  154. }
  155. $("#btnAddTeam").button("loading");
  156. return true;
  157. },
  158. success: function ($res) {
  159. if ($res.errcode === 0) {
  160. app.lists.splice(0, 0, $res.data);
  161. $("#addTeamDialogModal").modal("hide");
  162. } else {
  163. showError($res.message);
  164. }
  165. },
  166. error: function () {
  167. showError("服务器异常");
  168. },
  169. complete: function () {
  170. $("#btnAddTeam").button("reset");
  171. }
  172. });
  173. var app = new Vue({
  174. el: "#teamList",
  175. data: {
  176. lists: {{.Result}}
  177. },
  178. delimiters: ['${', '}'],
  179. methods: {
  180. deleteTeam: function (id, e) {
  181. var $this = this;
  182. $.ajax({
  183. url: "{{urlfor "BookController.TeamDelete"}}",
  184. type: "post",
  185. data: {"teamId": id, "identify": "{{.Model.Identify}}"},
  186. dataType: "json",
  187. success: function ($res) {
  188. if ($res.errcode === 0) {
  189. for (var index in $this.lists) {
  190. var item = $this.lists[index];
  191. if (item.team_relationship_id == id) {
  192. $this.lists.splice(index, 1);
  193. break;
  194. }
  195. }
  196. } else {
  197. alert("操作失败:" + res.message);
  198. }
  199. }
  200. });
  201. }
  202. }
  203. });
  204. Vue.nextTick(function () {
  205. $("[data-toggle='tooltip']").tooltip();
  206. });
  207. });
  208. </script>
  209. </body>
  210. </html>