PingAnYeXianSZCG_Web 前端代码

addPlan.html 5.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <script src="../Script/Common/huayi.load.js"></script>
  6. <script src="../Script/Common/huayi.load.js"></script>
  7. <script src="../Script/Common/huayi.config.js"></script>
  8. <link href="../css/Table/table1.css" rel="stylesheet" />
  9. <link href="../css/init.css" rel="stylesheet" />
  10. <title>增加试题分类</title>
  11. <style>
  12. .Content {
  13. text-align: center;
  14. padding: 10px;
  15. }
  16. .btn {
  17. background: #1ab394;
  18. }
  19. .Btn_box {
  20. margin-top: 20px;
  21. color: #fff;
  22. }
  23. .Content_ {
  24. padding-bottom: 10px;
  25. }
  26. .form_table {
  27. width: 100%;
  28. }
  29. .form_table th {
  30. padding: 5px 8px 5px 0;
  31. color: #333;
  32. font-weight: 700;
  33. text-align: right;
  34. background: #f9f9f9;
  35. }
  36. .form_table td {
  37. padding: 6px 0 5px 10px;
  38. text-align: left;
  39. color: #717171;
  40. line-height: 200%;
  41. margin-bottom: 20px;
  42. }
  43. .txtInput {
  44. width: 50%;
  45. margin-right: 5px;
  46. padding: 0 3px 0 3px;
  47. height: 22px;
  48. line-height: 22px;
  49. background: #FAFAFA;
  50. border: 1px solid #D7D7D7;
  51. vertical-align: middle;
  52. font-size: 12px;
  53. }
  54. #Search {
  55. color: #1ab394;
  56. }
  57. .Table_box {
  58. display: none;
  59. }
  60. .Btn_box {
  61. margin-top: 10px;
  62. text-align: center;
  63. }
  64. </style>
  65. </head>
  66. <body>
  67. <div>
  68. <div style="padding: 10px; margin-bottom: 20px;">
  69. <table class="form_table">
  70. <tr>
  71. <th>
  72. <span> 计划名称:</span>
  73. </th>
  74. <td>
  75. <input type="text" class=" txtInput name Planname" />
  76. </td>
  77. </tr>
  78. <tr>
  79. <th>
  80. <span>调查问卷:</span>
  81. </th>
  82. <td>
  83. <input type="text" class=" txtInput name Qubound" />
  84. <i class="fa fa-search size-14" id="Search"></i>
  85. </td>
  86. </tr>
  87. <tr>
  88. <th>
  89. <span>说明备注:</span>
  90. </th>
  91. <td>
  92. <input type="text " class=" txtInput name remark" />
  93. </td>
  94. </tr>
  95. </table>
  96. <div class="Table_box">
  97. <table id="tb1">
  98. <thead>
  99. <tr>
  100. <th data-field="checkbox" data-align="center" data-formatter="setCode"></th>
  101. <th data-align="center" data-field="F_Title">问卷名称</th>
  102. <th data-align="center" data-field="F_CreateOn">生成时间</th>
  103. </tr>
  104. </thead>
  105. <tbody>
  106. </tbody>
  107. </table>
  108. </div>
  109. <div class="Btn_box">
  110. <button class="btns Add">保存</button>
  111. </div>
  112. </div>
  113. </div>
  114. <script>
  115. var $tableLeft = $('#tb1');
  116. var token = $.cookie("token");
  117. var pagerid;
  118. $(document).ready(function() {
  119. $("#Search").click(function() {
  120. IndexCategoryGe();
  121. $(".Table_box").show();
  122. $('.Btn_box').hide();
  123. })
  124. $(".Add").click(function() {
  125. pagerid=$(".Qubound").attr("index")
  126. console.log(pagerid);
  127. if(!$(".Planname").val()) {
  128. layer.msg("名称不能为空");
  129. }else if(!$(".remark").val()){
  130. layer.msg("备注不能为空");
  131. }else if(!$(".Qubound").val()){
  132. ayer.msg("问卷不能为空");
  133. }else{
  134. //增加分类
  135. $.ajax({
  136. type: "post",
  137. url: huayi.config.callcenter_url + "CallOutPlan/CreateOrUpdateTask",
  138. dataType: 'json',
  139. data: {
  140. pagerid:pagerid,
  141. remark:$(".remark").val(),
  142. name: $(".Planname").val(),
  143. token: $.cookie("token")
  144. },
  145. async: true,
  146. success: function(data) {
  147. if(data.state == "success") {
  148. var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  149. parent.layer.close(index); //再执行关闭
  150. parent.IndexCategoryGe();
  151. parent.layer.msg(data.message);
  152. }
  153. }
  154. });
  155. }
  156. })
  157. })
  158. //问卷列表
  159. function IndexCategoryGe() {
  160. //销毁表格
  161. $tableLeft.bootstrapTable('destroy');
  162. //初始化表格,动态从服务器加载数据
  163. $tableLeft.bootstrapTable({
  164. method: "get", //使用get请求到服务器获取数据
  165. url: huayi.config.callcenter_url + "Questionnaire/GetPagerInfoList",
  166. striped: true, //表格显示条纹
  167. pagination: true, //启动分页
  168. pageSize: 5, //每页显示的记录数
  169. pageNumber: 1, //当前第几页
  170. pageList: [5, 20, 50, 100], //记录数可选列表
  171. search: false, //是否启用查询
  172. showColumns: false, //显示下拉框勾选要显示的列
  173. showRefresh: false, //显示刷新按钮
  174. sidePagination: "server", //表示服务端请求
  175. //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
  176. //设置为limit可以获取limit, offset, search, sort, order
  177. queryParamsType: "undefined",
  178. queryParams: function queryParams(params) { //设置查询参数
  179. var param = {
  180. pageindex: params.pageNumber,
  181. pagesize: params.pageSize,
  182. token: token
  183. };
  184. return param;
  185. },
  186. onLoadSuccess: function() { //加载成功时执行
  187. // layer.msg("加载成功");
  188. },
  189. onLoadError: function() { //加载失败时执行
  190. //layer.msg("加载数据失败", { time: 1500, icon: 2 });
  191. },
  192. onDblClickRow: function(row) {
  193. $(".Qubound").val(row.F_Title);
  194. $(".Qubound").attr("index", row.F_PagerId); //设置问卷ID
  195. $(".Table_box").hide();
  196. $('.Btn_box').show();
  197. }
  198. });
  199. }
  200. //编号
  201. function setCode(val, row, index) {
  202. return index + 1;
  203. }
  204. /*获取选中行对象*/
  205. $tableLeft.on("click-row.bs.table", function(e, row, ele) {
  206. $('.success').removeClass('success'); //去除之前选中的行的,选中样式
  207. $(ele).addClass('success'); //添加当前选中的 success样式用于区别;
  208. });
  209. </script>
  210. </body>
  211. </html>