hot_word.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. {extend name="public/layout" /} {block name="title"}话术热词搜索{/block} {block name="body"}
  2. <style type="text/css">
  3. html,
  4. body {
  5. display: block;
  6. min-width: 1100px;
  7. }
  8. .layui-fluid {
  9. display: block;
  10. box-shadow: 0 0 4px 0 #B6CADE;
  11. border-radius: 5px;
  12. margin: 15px;
  13. background-color: #ffffff;
  14. }
  15. .layui-tab {
  16. padding: 15px;
  17. height: 100%;
  18. }
  19. .layui-form-item {
  20. width: 100%;
  21. }
  22. .layui-form-item .layui-inline {
  23. display: block;
  24. float: left;
  25. width: 145px;
  26. height: 38px;
  27. line-height: 38px;
  28. background: #FFFFFF;
  29. margin-right: 16px;
  30. }
  31. .layui-form-item .layui-input-inline {
  32. width: 145px;
  33. height: 38px;
  34. line-height: 38px;
  35. margin-bottom: 0;
  36. }
  37. .layui-form-item .layui-input-inline .layui-input {
  38. border: 1px solid #9DB6CF;
  39. border-radius: 5px;
  40. }
  41. .layui-form-select dl dd.layui-this {
  42. background-color: #249EFB;
  43. }
  44. .layui-form-item div.searchBox {
  45. width: 320px;
  46. background: #FFFFFF;
  47. border: 1px solid #B6CADE;
  48. border-radius: 24px;
  49. height: 38px;
  50. overflow: hidden;
  51. padding-left: 18px;
  52. position: relative;
  53. margin-bottom: 0px;
  54. float: right;
  55. }
  56. .searchBox .inputBox {
  57. width: 240px;
  58. float: left;
  59. height: 36px;
  60. line-height: 36px;
  61. border-width: 0;
  62. }
  63. .searchBtn {
  64. position: absolute;
  65. top: 0;
  66. right: 0;
  67. width: 51px;
  68. height: 38px;
  69. background-color: #fff;
  70. }
  71. .searchBtn img {
  72. position: absolute;
  73. width: 26px;
  74. top: 6px;
  75. left: 0;
  76. }
  77. .layui-btn.layui-btn-success {
  78. background-color: #009688;
  79. }
  80. .layui-table thead tr,
  81. .layui-table-header {
  82. background-color: #D8E6F1 !important;
  83. }
  84. </style>
  85. <body>
  86. <div class="layui-fluid">
  87. <div class="layui-card">
  88. <div class="layui-form layui-card-header layuiadmin-card-header-auto">
  89. <div class="layui-form-item clearfix">
  90. <div class="layui-inline searchBox">
  91. <input type="text" name="keyword" placeholder="请输入搜索关键字" autocomplete="off" class="layui-input inputBox keyword">
  92. <button class="layui-btn layuiadmin-btn-useradmin searchBtn" lay-submit lay-filter="customer-search">
  93. <img src="/static/layuiadmin//image/sous.png" alt="">
  94. </button>
  95. </div>
  96. </div>
  97. </div>
  98. <div class="layui-card-body">
  99. <table lay-filter="talkskill-table" id="talkskill-table"></table>
  100. </div>
  101. </div>
  102. </div>
  103. </body>
  104. {/block} {block name="js"}
  105. <script type="text/html" id="comment">
  106. <a class="layui-table-link" lay-event="commentCount">{{d.commentCount}}</a>
  107. </script>
  108. <script type="text/html" id="table-edit">
  109. <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="hot-keyword-del"><i class="layui-icon layui-icon-delete"></i>删除</a>
  110. </script>
  111. <script>
  112. layui.config({
  113. base: '__LAYUI__/',
  114. urlbase: '/sys'
  115. }).extend({
  116. index: 'lib/index'
  117. }).use(['index', 'table', 'layedit', 'element'], function() {
  118. var $ = layui.$,
  119. table = layui.table,
  120. element = layui.element,
  121. form = layui.form;
  122. var field = {};
  123. form.on('submit(customer-search)', function(data) {
  124. var keyword = $('.keyword').val();
  125. field['keyword'] = keyword;
  126. //执行重载
  127. table.reload('talkskill-table', {
  128. where: field
  129. ,page: {curr:1}
  130. });
  131. });
  132. //事件
  133. var active = {};
  134. //话术列表
  135. table.render({
  136. elem: '#talkskill-table',
  137. autoSort: false,
  138. url: "{:url('talkskill/hot_word')}",
  139. cols: [
  140. [{
  141. type: 'numbers',
  142. field: 'id',
  143. width: 80,
  144. title: '序号',
  145. sort: true
  146. }, {
  147. field: 'keyword',
  148. title: '热词'
  149. }, {
  150. field: 'use_count',
  151. title: '热搜次数'
  152. }, {
  153. title: '操作',
  154. width: 150,
  155. align: 'center',
  156. fixed: 'right',
  157. toolbar: '#table-edit'
  158. }]
  159. ],
  160. page: true,
  161. limit: 30,
  162. height: 'full-220',
  163. text: '对不起,加载出现异常!'
  164. });
  165. //监听列表
  166. table.on('tool(talkskill-table)', function(obj) {
  167. var data = obj.data;
  168. if(obj.event === 'hot-keyword-del') {
  169. $.ajax({
  170. url: "{:url('talkskill/how_keyword_del')}?id=" + data.id,
  171. type: 'post',
  172. success:function(res){
  173. obj.del();
  174. layer.msg(res.msg, {anim: 0 , time: 800});
  175. }
  176. });
  177. }
  178. });
  179. $('.layui-btn.layuiadmin-btn').on('click', function() {
  180. var type = $(this).data('type');
  181. active[type] ? active[type].call(this) : '';
  182. });
  183. });
  184. </script>
  185. {/block}