person.html 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
  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. background-color: #fff;
  7. }
  8. .layui-table thead tr,
  9. .layui-table-header {
  10. background-color: #D8E6F1 !important;
  11. }
  12. .layui-fluid {
  13. display: block;
  14. border-radius: 5px;
  15. background-color: #ffffff;
  16. padding: 15px 30px;
  17. }
  18. .layui-tab {
  19. padding: 15px;
  20. height: 100%;
  21. }
  22. .layui-form-item {
  23. width: 100%;
  24. }
  25. .layui-form-item .layui-inline {
  26. display: block;
  27. float: left;
  28. width: 145px;
  29. height: 38px;
  30. line-height: 38px;
  31. background: #FFFFFF;
  32. margin-right: 16px;
  33. }
  34. .layui-form-item .layui-input-inline {
  35. width: 145px;
  36. height: 38px;
  37. line-height: 38px;
  38. margin-bottom: 0;
  39. }
  40. .layui-icon {
  41. font-size: 20px !important;
  42. }
  43. .layui-form-item .layui-input-inline .layui-input {
  44. border: 1px solid #9DB6CF;
  45. border-radius: 5px;
  46. }
  47. .layui-form-select dl dd.layui-this {
  48. background-color: #249EFB;
  49. }
  50. .layui-form-item div.searchBox {
  51. width: 320px;
  52. background: #FFFFFF;
  53. border: 1px solid #B6CADE;
  54. border-radius: 24px;
  55. height: 38px;
  56. overflow: hidden;
  57. padding-left: 18px;
  58. position: relative;
  59. margin-bottom: 0px;
  60. float: right;
  61. }
  62. .searchBox .inputBox {
  63. width: 240px;
  64. float: left;
  65. height: 36px;
  66. line-height: 36px;
  67. border-width: 0;
  68. }
  69. .searchBtn {
  70. position: absolute;
  71. top: 0;
  72. right: 0;
  73. width: 51px;
  74. height: 38px;
  75. background-color: #fff;
  76. }
  77. .searchBtn img {
  78. position: absolute;
  79. width: 26px;
  80. top: 6px;
  81. left: 0;
  82. }
  83. .layui-card .layui-tab {
  84. margin: 0;
  85. height: 31%;
  86. width: 80%;
  87. float: right;
  88. padding: 1px;
  89. }
  90. .layui-btn-primary {
  91. color: #249EFB;
  92. border: 1px solid #249EFB;
  93. }
  94. .layui-btn-primary:hover {
  95. background-color: #E3F7FF;
  96. color: #249EFB;
  97. }
  98. .layui-btn-xs,
  99. .layui-btn-xs:hover {
  100. border: 1px solid #249EFB;
  101. background-color: #fff;
  102. color: #249EFB;
  103. padding: 0px 10px;
  104. }
  105. .layui-btn-danger,
  106. .layui-btn-danger:hover {
  107. border: 1px solid #FF5722;
  108. background-color: #fff;
  109. color: #FF5722;
  110. padding: 0px 10px;
  111. }
  112. .layui-card-header {
  113. background-color: #F6FAFD;
  114. }
  115. .layui-card-body {
  116. padding: 10px 0px 0px;
  117. }
  118. </style>
  119. <body>
  120. <div class="layui-fluid">
  121. <div class="layui-card">
  122. <div class="layui-card-header layuiadmin-card-header-auto">
  123. <a href="#" type="button" class="layui-btn layui-btn-primary" id="cate_add">添加适用人群</a>
  124. </div>
  125. <div class="layui-card-body">
  126. <table id="evidence-table" lay-filter="evidence-table"></table>
  127. </div>
  128. </div>
  129. </div>
  130. </body>
  131. {/block} {block name="js"}
  132. <script type="text/html" id="table-evidence-action">
  133. <a class="layui-btn layui-btn-xs" lay-event="evi-details">编辑</a>
  134. <!-- <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="evidence-delete">删除</a> -->
  135. </script>
  136. <script>
  137. layui.config({
  138. base: '__LAYUI__/',
  139. urlbase: '/sys'
  140. }).extend({
  141. index: 'lib/index' //主入口模块
  142. }).use(['index', 'table', 'element'], function () {
  143. var $ = layui.$,
  144. form = layui.form,
  145. element = layui.element,
  146. table = layui.table;
  147. //添加分类
  148. $('#cate_add').click(function () {
  149. layer.prompt({ title: ['添加', 'color:#333333;background-color:#D8E6F1;'], value: '' }, function (value, index) {
  150. if (value == '') {
  151. layer.msg('请填写名称', {
  152. anim: 6
  153. , time: 800
  154. });
  155. return false;
  156. }
  157. if (value.length > 5) {
  158. layer.msg('分类名称超长', {
  159. anim: 6, time: 800
  160. });
  161. return false;
  162. }
  163. $.ajax({
  164. url: '{:url("talkskill/person_add")}',
  165. type: 'post',
  166. data: { name: value },
  167. dataType: 'json',
  168. success: function (res) {
  169. console.log(res)
  170. if (res.code === 0) {
  171. layer.msg(res.msg, {
  172. anim: 0
  173. , time: 800
  174. });
  175. //执行重载
  176. table.reload('evidence-table', {
  177. });
  178. } else {
  179. layer.msg(res.msg, {
  180. anim: 6
  181. , time: 800
  182. });
  183. }
  184. }
  185. });
  186. layer.close(index);
  187. });
  188. });
  189. //客户见证列表
  190. table.render({
  191. elem: '#evidence-table',
  192. autoSort: false,
  193. url: '{:url("talkskill/person_list")}',
  194. cols: [
  195. [{
  196. type: 'numbers',
  197. field: 'id',
  198. width: 80,
  199. title: '序号',
  200. sort: true
  201. }, {
  202. field: 'name',
  203. title: '名称'
  204. }, {
  205. title: '操作',
  206. width: 240,
  207. align: 'center',
  208. fixed: 'right',
  209. toolbar: '#table-evidence-action'
  210. }]
  211. ],
  212. page: true,
  213. limit: 30,
  214. height: 'full-120',
  215. text: '对不起,加载出现异常!'
  216. });
  217. //监听列表
  218. table.on('tool(evidence-table)', function (obj) {
  219. var data = obj.data;
  220. if (obj.event === 'evi-details') {
  221. layer.prompt({ title: ['编辑', 'color:#333333;background-color:#D8E6F1;'], value: data.name }, function (value, index) {
  222. if (value == data.name || value == '') {
  223. layer.msg('请修改名称', {
  224. anim: 6
  225. , time: 800
  226. });
  227. return false;
  228. }
  229. if (value.length > 5) {
  230. layer.msg('分类名称超长', {
  231. anim: 6
  232. , time: 800
  233. });
  234. return false;
  235. }
  236. $.ajax({
  237. url: '{:url("talkskill/person_edit")}',
  238. type: 'post',
  239. data: { id: data.id, name: value },
  240. dataType: 'json',
  241. success: function (res) {
  242. if (res.code === 0) {
  243. layer.msg(res.msg, {
  244. anim: 0
  245. , time: 800
  246. });
  247. //执行重载
  248. table.reload('evidence-table', {
  249. });
  250. } else {
  251. layer.msg(res.msg, {
  252. anim: 6
  253. , time: 800
  254. });
  255. }
  256. }
  257. });
  258. layer.close(index);
  259. });
  260. }
  261. });
  262. });
  263. </script>
  264. {/block}