chosen_index.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373
  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-table thead tr,
  16. .layui-table-header {
  17. background-color: #D8E6F1 !important;
  18. }
  19. .layui-form-label{
  20. width: auto;
  21. }
  22. .goback {
  23. float: left;
  24. margin-right: 20px;
  25. }
  26. .goback a {
  27. color: #269efb;
  28. }
  29. .goback i {
  30. position: relative !important;
  31. }
  32. .layui-btn-xs,.layui-btn-xs:hover {
  33. border: 1px solid #249EFB;
  34. background-color: #fff;
  35. color: #249EFB;
  36. padding: 0px 10px;
  37. }
  38. .layui-btn-danger,.layui-btn-danger:hover{
  39. color: #FF5722;
  40. background-color: #fff;
  41. border: 1px solid #FF5722;
  42. padding: 0px 10px;
  43. }
  44. .deletebtn{display:none}
  45. .commentcount img{width:18px;display: inline-block;vertical-align: -13%;margin-right: 2px;}
  46. .layui-form-item .layui-input-inline,.layui-select-title{max-width:160px !important;}
  47. </style>
  48. <body>
  49. <div class="layui-fluid">
  50. <div class="layui-card">
  51. <div class="layui-form layui-card-header layuiadmin-card-header-auto">
  52. <div class="layui-form-item">
  53. <div style="float:right;">
  54. <div class="layui-inline">
  55. <!-- <label class="layui-form-label">问题</label> -->
  56. <div class="layui-input-inline">
  57. <input type="text" name="keyword" placeholder="请输入标题" autocomplete="off" class="layui-input keyword" value="{$keyword}">
  58. </div>
  59. </div>
  60. <div class="layui-inline">
  61. <select name="cate">
  62. <option value="">请选择分类</option>
  63. {volist name='cate' id='vo'}
  64. <option value="{$vo.id}">{$vo.name}</option>
  65. {/volist}
  66. </select>
  67. </div>
  68. <div class="layui-inline">
  69. <select name="user_cate">
  70. <option value="">请选择适用部门</option>
  71. {volist name='user_cate' id='vo'}
  72. <option value="{$vo.id}">{$vo.name}</option>
  73. {/volist}
  74. </select>
  75. </div>
  76. <div class="layui-inline">
  77. <select name="house_type">
  78. <option value="">请选择房屋类型</option>
  79. {volist name='house_type' id='vo'}
  80. <option value="{$vo.id}">{$vo.name}</option>
  81. {/volist}
  82. </select>
  83. </div>
  84. <div class="layui-inline">
  85. <select name="employee_id">
  86. <option value="">请选择上传人</option>
  87. {volist name='employee' id='vo'}
  88. <option value="{$vo.id}">{$vo.opt_name}</option>
  89. {/volist}
  90. </select>
  91. </div>
  92. <div class="layui-inline">
  93. <input type="text" id="lay-date" name="addtime" placeholder="请选择上传时间" autocomplete="off"
  94. class="layui-input">
  95. </div>
  96. <div class="layui-inline">
  97. <button class="layui-btn layuiadmin-btn-useradmin searchBtn" lay-submit lay-filter="customer-search">
  98. <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
  99. </button>
  100. </div>
  101. </div>
  102. <div class="layui-inline" style="float: left;">
  103. <div class="goback">
  104. <a href="{:url('talkskill/chosen_cate')}"><i class="layui-icon layui-icon-return"></i>
  105. <span>返回</span>
  106. </a>
  107. </div>
  108. <!-- {auth:check name="talkskill/add_talkskill"}
  109. <button class="layui-btn layuiadmin-btn" data-type="add">添加标准话术</button>
  110. {/auth:check} -->
  111. {auth:check name="talkskill/talkskill_delete"}
  112. <button class="layui-btn layuiadmin-btn deletebtn" data-type="delete">批量删除</button>
  113. {/auth:check}
  114. </div>
  115. </div>
  116. </div>
  117. <div class="layui-card-body">
  118. <table lay-filter="talkskill-table" id="talkskill-table"></table>
  119. </div>
  120. </div>
  121. </div>
  122. </body>
  123. {/block} {block name="js"}
  124. <script type="text/html" id="table-talkskill-action">
  125. <a class="layui-btn layui-btn-xs" lay-event="talkskill-edit">编辑</a>
  126. <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="talkskill-del">删除</a>
  127. </script>
  128. <script type="text/html" id="user_cate">
  129. {{# if(d.user_cate_name){ }}
  130. <span>{{d.user_cate_name}}</span>
  131. {{# }else{ }}
  132. <span style="color: #cccccc;">无</span>
  133. {{# } }}
  134. </script>
  135. <script type="text/html" id="house_type">
  136. {{# if(d.house_type_name){ }}
  137. <span>{{d.house_type_name}}</span>
  138. {{# }else{ }}
  139. <span style="color: #cccccc;">无</span>
  140. {{# } }}
  141. </script>
  142. <script type="text/html" id="cate2">
  143. {{# if(d.cate2_name){ }}
  144. <span>{{d.cate2_name}}</span>
  145. {{# }else{ }}
  146. <span style="color: #cccccc;">无</span>
  147. {{# } }}
  148. </script>
  149. <script type="text/html" id="cate1">
  150. {{# if(d.cate1_name){ }}
  151. <span>{{d.cate1_name}}</span>
  152. {{# }else{ }}
  153. <span style="color: #cccccc;">无</span>
  154. {{# } }}
  155. </script>
  156. <script type="text/html" id="title">
  157. <div class="commentcount">
  158. {{# if(d.img){ }}
  159. <img src="__STATIC__/img/viewicos.png" alt="">
  160. {{d.title}}
  161. {{# }else{ }}
  162. {{d.title}}
  163. {{# } }}
  164. </div>
  165. </script>
  166. <script type="text/html" id="opt_employee">
  167. {{# if(d.employee){ }}
  168. {{d.employee.opt_name}}
  169. {{# } }}
  170. </script>
  171. <script>
  172. layui.config({
  173. base: '__LAYUI__/',
  174. urlbase: '/sys'
  175. }).extend({
  176. index: 'lib/index'
  177. }).use(['index', 'table', 'layedit', 'element', 'laydate'], function() {
  178. var $ = layui.$,
  179. table = layui.table,
  180. element = layui.element,
  181. laydate = layui.laydate,
  182. form = layui.form;
  183. laydate.render({
  184. elem: '#lay-date',
  185. range: true
  186. });
  187. form.on('submit(customer-search)', function (data) {
  188. let field = data.field;
  189. var type = $('#type').val();
  190. field['type'] = type;
  191. //执行重载
  192. table.reload('talkskill-table', {
  193. where: field
  194. ,page: {curr:1}
  195. });
  196. });
  197. //事件
  198. var active = {
  199. add: function() {
  200. layer.open({
  201. type: 2,
  202. title:['话术添加', 'color:#333333;background-color:#D8E6F1;'],
  203. content: '{:url("talkskill/talkskilladd")}',
  204. resize: false,
  205. area: ['80%', '80%'],
  206. btn: ['确定', '取消'],
  207. yes: function(index, layero) {
  208. //点击确认触发 iframe 内容中的按钮提交
  209. var submit = layero.find('iframe').contents().find("#talkskill-submit");
  210. submit.click();
  211. }
  212. });
  213. },
  214. // 批量删除
  215. delete: function() {
  216. var data = layui.table.checkStatus('talkskill-table');
  217. //console.log(checkStatus.data) //获取选中行的数据即 多个行对象
  218. //console.log(checkStatus.data.length) //获取选中行数量,可作为是否有选中行的条件
  219. //console.log(checkStatus.isAll ) //表格是否全选
  220. if (data.data.length==0) {
  221. layer.msg('请选择要删除的话术', {anim: 6,time: 800});
  222. return false;
  223. } else {
  224. var ids = [];
  225. for (var i = 0; i < data.data.length; i++) {
  226. ids.push(data.data[i].id);
  227. }
  228. layer.confirm('确定要删除么?',{title:['信息', 'color:#333333;background-color:#D8E6F1;'],}, function() {
  229. $.ajax({
  230. url: '{:url("talkskill/chosen_delete")}',
  231. type: 'post',
  232. data: {ids:ids},
  233. dataType: 'json',
  234. success: function(res) {
  235. // console.log(res)
  236. if(res.code === 0) {
  237. layer.msg(res.msg, {anim: 0,time: 800});
  238. //执行重载
  239. table.reload('talkskill-table');
  240. } else {
  241. layer.msg(res.msg, {anim: 6,time: 800});
  242. }
  243. }
  244. });
  245. });
  246. }
  247. // layer.open({
  248. // type: 2,
  249. // title: '话术添加',
  250. // content: '{:url("talkskill/talkskilladd")}',
  251. // maxmin: true,
  252. // area: ['40%', '80%'],
  253. // btn: ['确定', '取消'],
  254. // yes: function(index, layero) {
  255. // //点击确认触发 iframe 内容中的按钮提交
  256. // var submit = layero.find('iframe').contents().find("#talkskill-submit");
  257. // submit.click();
  258. // }
  259. // });
  260. }
  261. };
  262. //话术列表
  263. table.render({
  264. elem: '#talkskill-table',
  265. autoSort: false,
  266. url: "{:url('talkskill/chosen_index')}?type={$type}&keyword={$keyword}",
  267. cols: [
  268. [
  269. {type: 'checkbox',field:'id'},
  270. {
  271. type: 'numbers',
  272. field: 'id',
  273. width: 80,
  274. title: '序号',
  275. sort: true
  276. }, {
  277. title: '话术标题',
  278. templet: '#title'
  279. }, {
  280. templet: '#cate1',
  281. title: '场景'
  282. }, {
  283. title: '分类',
  284. templet: '#cate2'
  285. }, {
  286. title: '房屋类型',
  287. templet: '#house_type'
  288. }, {
  289. title: '适用部门',
  290. templet: '#user_cate'
  291. }, {
  292. field: 'view_times',
  293. title: '浏览量'
  294. }, {
  295. title: '上传人',
  296. templet: '#opt_employee'
  297. }, {
  298. field: 'addtime',
  299. title: '上传时间',
  300. minWidth: 160
  301. }, {
  302. title: '操作',
  303. width: 150,
  304. align: 'center',
  305. fixed: 'right',
  306. toolbar: '#table-talkskill-action'
  307. }]
  308. ],
  309. page: true,
  310. limit: 30,
  311. height: 'full-220',
  312. text: '对不起,加载出现异常!'
  313. });
  314. //监听列表
  315. table.on('tool(talkskill-table)', function(obj) {
  316. var data = obj.data;
  317. if(obj.event === 'talkskill-edit') {
  318. layer.open({
  319. type: 2,
  320. title:['话术编辑', 'color:#333333;background-color:#D8E6F1;'],
  321. content: "{:url('talkskill/chosen_edit')}?id=" + data.id,
  322. resize: false,
  323. area: ['80%', '80%'],
  324. btn: ['确定', '取消'],
  325. yes: function(index, layero) {
  326. //点击确认触发 iframe 内容中的按钮提交
  327. var submit = layero.find('iframe').contents().find("#talkskill-submit");
  328. submit.click();
  329. }
  330. });
  331. }else if(obj.event === 'talkskill-del') {
  332. layer.confirm('确定删除?',{title:['信息', 'color:#333333;background-color:#D8E6F1;'],}, function(index) {
  333. $.ajax({
  334. url: "{:url('talkskill/chosen_delete')}?id=" + data.id,
  335. type: 'post'
  336. });
  337. obj.del();
  338. layer.close(index);
  339. });
  340. }
  341. });
  342. table.on('checkbox(talkskill-table)', function(obj){
  343. var arrlist = table.checkStatus('talkskill-table').data;
  344. if(arrlist.length>0){
  345. $(this).prop('checked',true)
  346. $('.deletebtn').show();
  347. }else{
  348. $('.deletebtn').hide();
  349. }
  350. console.log(11111)
  351. });
  352. $('.layui-btn.layuiadmin-btn').on('click', function() {
  353. var type = $(this).data('type');
  354. active[type] ? active[type].call(this) : '';
  355. });
  356. });
  357. </script>
  358. {/block}