Нет описания

customerList.html 10KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
  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.config.js"></script>
  7. <link rel="stylesheet" href="../css/init.css" />
  8. <link rel="stylesheet" type="text/css" href="../js/layui/css/layui.css" />
  9. <title>客户列表</title>
  10. <style type="text/css">
  11. body {
  12. color: #000;
  13. font-family: 'Open Sans';
  14. font-size: 13px;
  15. }
  16. .m-kuang {
  17. width: 134px;
  18. background-color: #ffffff;
  19. background-image: none !important;
  20. filter: none !important;
  21. border: 1px solid #e5e5e5;
  22. outline: none;
  23. height: 34px !important;
  24. line-height: 30px;
  25. padding: 4px 6px;
  26. }
  27. .zt, .cz {
  28. display: block;
  29. height: 20px;
  30. width: 20px;
  31. margin: 0 auto;
  32. }
  33. .zt {
  34. background: url(../img/bf1.png) no-repeat;
  35. }
  36. .cz {
  37. background: url(../img/sz1.png) no-repeat;
  38. }
  39. .jia {
  40. display: inline-block;
  41. height: 16px;
  42. width: 16px;
  43. background: url(../img/jia.png) no-repeat;
  44. vertical-align: sub;
  45. margin-right: 3px;
  46. }
  47. .tool {
  48. margin: 20px 0;
  49. }
  50. .searchbox input {
  51. width: 99%;
  52. height: 98%;
  53. border: 0;
  54. outline: none;
  55. padding-left: 10px;
  56. }
  57. .secon {
  58. width: 100%;
  59. height: 34px;
  60. margin-bottom: 15px;
  61. }
  62. .secl {
  63. width: 65%;
  64. display: inline-block;
  65. height: 100%;
  66. margin: 0;
  67. border: 1px solid #eee;
  68. }
  69. .stb {
  70. display: block;
  71. width: 10%;
  72. background-color: #1ab394;
  73. background-image: url(../img/sear1.png);
  74. background-position: center center;
  75. background-repeat: no-repeat;
  76. height: 100%;
  77. float: left;
  78. border: 0;
  79. border-top-right-radius: 3px;
  80. border-bottom-right-radius: 3px;
  81. }
  82. .cz_down {
  83. position: absolute;
  84. top: 130%;
  85. left: -42px;
  86. z-index: 9999;
  87. display: none;
  88. float: left;
  89. list-style: none;
  90. text-shadow: none;
  91. margin: 0px;
  92. background: #fff;
  93. border: 1px solid #e5e5e5;
  94. text-align: left;
  95. padding: 5px;
  96. }
  97. .cz_down li > a {
  98. padding: 6px 0 6px 13px;
  99. color: #333;
  100. text-decoration: none;
  101. display: block;
  102. clear: both;
  103. font-weight: normal;
  104. line-height: 18px;
  105. white-space: nowrap;
  106. }
  107. .cz_down li:hover {
  108. background: #eee;
  109. }
  110. .cz_down .divider {
  111. height: 1px;
  112. margin: 9px 1px;
  113. overflow: hidden;
  114. background-color: #e5e5e5;
  115. border-bottom: 1px solid #e5e5e5;
  116. }
  117. .ztColor {
  118. padding: 2px;
  119. color: #fff;
  120. }
  121. .taskName {
  122. cursor: pointer;
  123. }
  124. .ztc {
  125. background: #fcb322;
  126. }
  127. .clw {
  128. background: #3cc051;
  129. }
  130. .clz {
  131. background: #57b5e3;
  132. }
  133. .dzx {
  134. background: #ed4e2a;
  135. }
  136. .ysc {
  137. background: #ef2e18;
  138. }
  139. .layui-layer-title{
  140. color: #fff!important;
  141. background: #019587!important;
  142. }
  143. </style>
  144. </head>
  145. <body>
  146. <form class="container-fluid" enctype="multipart/form-data">
  147. <div class="container-fluid">
  148. <div class="daoHang clearfix">
  149. <div class="dhLeft">
  150. <sapn>
  151. <i class="syIcon"></i>位置:
  152. <a id="ReIndex" href="javaScript:;">首页</a>&gt;
  153. <a href="javaScript:;">客户管理</a>&gt;
  154. <a href="javaScript:;" style="color: #000;">客户列表</a>
  155. </sapn>
  156. </div>
  157. </div>
  158. <div class="tcon">
  159. <div class="tool clearfix">
  160. <!--<div class="searchbox col-sm-2">
  161. <div class="secon">
  162. <b>号码</b>
  163. <p class="secl"><input type="text" placeholder="号码" class="phone" /></p>
  164. </div>
  165. </div>-->
  166. </div>
  167. <div class="anniu" style="margin: 20px 0;">
  168. <button class="btns search" type="button"><i class="fa fa-search"></i>查询</button>
  169. <a class="btns" id="addto"><i class="fa fa-plus"></i>添加</a>
  170. </div>
  171. <table class="layui-hide" id="table1" lay-filter="demo"></table>
  172. </div>
  173. </div>
  174. </form>
  175. <script type="text/html" id="barDemo">
  176. <!--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>-->
  177. <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  178. <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  179. </script>
  180. <script src="../js/layui/layui.js"></script>
  181. <script src="../js/jquery.form.min.js"></script>
  182. <script>
  183. var sear;
  184. var token = $.cookie("token");
  185. //搜索功能
  186. $('.search').click(function () {
  187. initTable();
  188. });
  189. //添加
  190. $('#addto').click(function () {
  191. // top.$("iframe:visible")[0].src = "keHuManager/customerListAdd.html";
  192. layer.open({
  193. type: 2,
  194. content: "../keHuManager/customerListAdd.html", //iframe的url,no代表不显示滚动条
  195. title: '客户列表添加',
  196. area: ['75%', '80%'], //宽高
  197. });
  198. });
  199. initTable()
  200. function initTable() {
  201. var colsData = [];
  202. var arrData = [];
  203. $.ajax({
  204. url: huayi.config.callcenter_url + 'Customer/GetList',
  205. type: 'get',
  206. data: {
  207. token: token,
  208. },
  209. dataType: "json",
  210. async: true,
  211. success: function (returnValue) {
  212. //异步获取数据
  213. if (returnValue.data) {
  214. var theadData = returnValue.data.headlist,
  215. resultData1 = returnValue.data.datalist,
  216. searchBar=returnValue.data.search;
  217. //搜索条件
  218. $('.tool').html('');
  219. $(searchBar).each(function(k,q){
  220. console.log(q.F_Search);
  221. if(q.F_Search>0){
  222. $('<div class="searchbox col-sm-2">'+
  223. '<div class="secon">'+
  224. '<b>'+q.F_Name +':</b>'+
  225. '<p class="secl"><input type="text" class="phone" name="'+q.F_DBFieldName+'"/></p>'+
  226. '</div>'+
  227. '</div>').appendTo('.tool')
  228. }
  229. })
  230. //加载头部
  231. $(theadData).each(function(i,n){
  232. var obj1 = {};
  233. obj1['field'] = 'items' + i;
  234. obj1['title'] = theadData[i];
  235. colsData.push(obj1);
  236. })
  237. colsData.push({fixed: 'right', align:'center', toolbar: '#barDemo'});
  238. colsData.unshift({checkbox: true, fixed: true});
  239. //表身数据
  240. $(resultData1).each(function(j,m){
  241. var obj={};
  242. obj['id'] = m.id;
  243. $(m.dataarr).each(function(y,g){
  244. obj['items' + y + ''] = g;
  245. })
  246. arrData.push(obj);
  247. })
  248. layui.use('table', function () {
  249. var table = layui.table;
  250. //展示已知数据
  251. table.render({
  252. elem: '#table1',
  253. cols: [colsData],
  254. data: arrData,
  255. //skin: 'line', //表格风格
  256. even: true,
  257. page: true //是否显示分页
  258. //,limits: [5, 7, 10]
  259. //,limit: 5 //每页默认显示的数量
  260. });
  261. });
  262. } else {
  263. //console.log(returnValue.message);
  264. }
  265. },
  266. });
  267. }
  268. layui.use('table', function () {
  269. var table = layui.table;
  270. //操作
  271. table.on('tool(demo)', function(obj){
  272. console.log(obj)
  273. var data = obj.data;
  274. var srr=[];
  275. // if(obj.event === 'detail'){
  276. // layer.msg('ID:'+ data.id + ' 的查看操作');
  277. // } else
  278. if(obj.event === 'del'){
  279. layer.confirm('确定删除吗?', function(index){
  280. srr.push(data.id);
  281. $.ajax({
  282. type:"post",
  283. url: huayi.config.callcenter_url + 'Customer/DelCustomer',
  284. async:true,
  285. dataType:'json',
  286. data:{
  287. token: token,
  288. ids:srr
  289. },
  290. success:function(res){
  291. if(res.state.toLowerCase()=='success'){
  292. layer.close(index);
  293. layer.msg('删除成功!');
  294. initTable();
  295. }
  296. }
  297. });
  298. });
  299. } else if(obj.event === 'edit'){
  300. layer.open({
  301. type: 2,
  302. content: "../keHuManager/customerListEdit.html?id="+data.id, //iframe的url,no代表不显示滚动条
  303. title: '客户列表修改',
  304. area: ['75%', '80%'], //宽高
  305. });
  306. // layer.alert('编辑行:<br>'+ JSON.stringify(data))
  307. }
  308. });
  309. });
  310. </script>
  311. </body>
  312. </html>