安图前端代码

addCustomerFile.html 8.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332
  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 href="../js/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" />
  8. <script src="province.js"></script>
  9. <link rel="stylesheet" href="../css/init.css" />
  10. <title></title>
  11. <style>
  12. .clearfix:after {
  13. content: "";
  14. display: block;
  15. clear: both;
  16. }
  17. .boxCon {
  18. width: 100%;
  19. background: #fff;
  20. text-align: center;
  21. padding: 10px 15px;
  22. height: auto;
  23. overflow-y: auto;
  24. }
  25. .boxCon>div {
  26. padding: 15px 0;
  27. }
  28. .boxCon table th {
  29. padding: 5px 8px 5px 0;
  30. text-align: right;
  31. width: 32%;
  32. }
  33. .boxCon table td {
  34. padding: 6px 0 5px 10px;
  35. text-align: left;
  36. color: #717171;
  37. line-height: 200%;
  38. }
  39. .kong{
  40. display: none;
  41. }
  42. .bootstrap-select > .dropdown-toggle.bs-placeholder {
  43. background-color: #ffffff!important;
  44. border-color: #e5e6e7!important;
  45. }
  46. .filter-option{
  47. color: #676b6d;
  48. }
  49. .form-inline{
  50. display: inline-block;
  51. }
  52. .bootstrap-select > .dropdown-toggle.btn-default{
  53. background-color: #ffffff!important;
  54. border-color: #e5e6e7!important;
  55. color: #555;
  56. }
  57. .testInput-list {
  58. position: absolute;
  59. z-index: 999;
  60. border: 1px solid rgb(204, 204, 204);
  61. background-color: rgb(255, 255, 255);
  62. z-index: 99999;
  63. padding-left: 0;
  64. width: 97.6%;
  65. display: none;
  66. }
  67. .testInput-list li {
  68. padding: 5px;
  69. list-style: none;
  70. }
  71. .testInput-list li:hover {
  72. background-color: #E43926;
  73. color: #fff;
  74. }
  75. #testInput4{
  76. outline:none;
  77. border: 1px solid #ccc;
  78. padding-left: 10px;
  79. outline-color :#fff;
  80. }
  81. </style>
  82. </head>
  83. <body>
  84. <div class="container-fluid">
  85. <div class="boxCon">
  86. <table>
  87. <tbody>
  88. <tr>
  89. <th>客户名称: </th>
  90. <td>
  91. <div class="form-inline">
  92. <div class="form-group" style="position: relative;">
  93. <!--<select class="form-control selectpicker" id="customer_name" data-live-search="true">
  94. <option value="">请选择客户名称</option>
  95. </select>-->
  96. <input id="testInput4" type="text" style="width:100%;"/>
  97. <ul class="testInput-list">
  98. <li></li>
  99. </ul>
  100. </div>
  101. </div>
  102. <span class="addJsz_kong" style="color: red;">*</span>
  103. </td>
  104. </tr>
  105. <tr>
  106. <th>省份: </th>
  107. <td>
  108. <div class="form-inline">
  109. <div class="form-group">
  110. <select class="form-control selectpicker" id="province" data-live-search="true">
  111. <option value="">请选择省份</option>
  112. </select>
  113. </div>
  114. </div>
  115. <span class="addJsz_kong" style="color: red;">*</span>
  116. </tr>
  117. <tr>
  118. <th>联系人: </th>
  119. <td><input type="text" class="name" />
  120. <!--<span class="addJsz_kong" style="color: red;">*</span>-->
  121. </td>
  122. </tr>
  123. <tr>
  124. <th>电话: </th>
  125. <td >
  126. <input type="text" class="mobile" />
  127. <!--<span class="kong addJsz_kong" style="color: red;">*角色值不允许为空</span>-->
  128. </td>
  129. </tr>
  130. </tbody>
  131. </table>
  132. <div style="text-align: center;"><button class="btns addCun">保存</button></div>
  133. </div>
  134. </div>
  135. <script src="../js/bootstrap-select/js/bootstrap-select.js"></script>
  136. <script>
  137. var token = $.cookie("token");
  138. var id=helper.request.queryString("ids");
  139. Select($("#testInput4"));
  140. $(document).ready(function(){
  141. var regBox = {
  142. //regEmail: /^([A-Za-z0-9_\.-]+)@([\dA-Za-z_\.-]+)\.([A-Za-z_\.-]{2,6})$/, //邮箱
  143. //regEmail: /@/, //邮箱
  144. //regName: /^[a-z0-9_-]{3,16}$/, //用户名
  145. //regMobile: /^1(3|4|5|7|8)\d{9}$/ //手机
  146. //regTel: /^0[\d]{2,3}-[\d]{7,8}$/,
  147. //regData: /^[0-9]*$/ //数字
  148. regMobOrTel: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/
  149. }
  150. //判断
  151. function Isnullorempty(selstr) {
  152. if (selstr == null || selstr == "" || selstr == undefined || selstr == "null" || selstr == "undefined" || parseFloat(selstr) <= 0) {
  153. return true;
  154. } else {
  155. return false;
  156. }
  157. }
  158. //保存按钮
  159. $('.addCun').click(function() {
  160. var tel = $(".mobile").val();
  161. if($('#customer_name').val()=='') {
  162. layer.confirm('请选择客户名称!', {
  163. btn: ['确定']
  164. });
  165. return;
  166. }
  167. if($('#province').val()=='') {
  168. layer.confirm('请选择省份!', {
  169. btn: ['确定']
  170. });
  171. return;
  172. }
  173. if($('.mobile').val()=='') {
  174. layer.confirm('请输入正确的联系电话', {
  175. btn: ['确定']
  176. });
  177. return;
  178. }
  179. $.post(huayi.config.callcenter_url + 'Customer/AddCustomer', {
  180. cid: id,
  181. customerindustry: $('#testInput4').val(),
  182. province: $('#province').val(),
  183. mobile: $('.mobile').val(),
  184. name: $('.name').val(),
  185. "token": $.cookie("token")
  186. }, function(result) {
  187. result = $.parseJSON(result);
  188. if(result.state.toLowerCase() == "success") {
  189. $("#activess").val(result.data);
  190. var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  191. parent.layer.close(index); //再执行关闭
  192. parent.layer.msg("添加成功!");
  193. parent.table.bootstrapTable('refresh');
  194. }
  195. })
  196. })
  197. if(id){
  198. $.get(huayi.config.callcenter_url + 'Customer/GetCustomer', {
  199. cid: id,
  200. "token": $.cookie("token")
  201. }, function(result) {
  202. result = $.parseJSON(result);
  203. if(result.state.toLowerCase() == "success") {
  204. var con=result.data;
  205. $("#testInput4").val(con.F_CustomerIndustry);
  206. $('#customer_name').trigger("change");
  207. // $("#customer_name").find('option[text='+ con.F_CustomerIndustry +']').attr("selected",true);
  208. $("#province").val(con.F_Province);
  209. $('#province').trigger("change");
  210. $(".mobile").val(con.F_Telephone);
  211. $(".name").val(con.F_CustomerName);
  212. }
  213. })
  214. }
  215. })
  216. //客户名称
  217. getAccount()
  218. function getAccount() {
  219. $.ajax({
  220. type: "get",
  221. url: huayi.config.callcenter_url + "Customer/BindLDdep",
  222. dataType: 'json',
  223. async: true,
  224. data: {
  225. token: $.cookie("token")
  226. },
  227. success: function(data) {
  228. var Count = data.data.dep;
  229. $(Count).each(function(i,n){
  230. $("<option value='" + n + "'>" + n + "</option>").appendTo($("#customer_name"));
  231. })
  232. $('#customer_name').selectpicker('refresh');
  233. }
  234. });
  235. }
  236. //省份
  237. getProvince()
  238. function getProvince() {
  239. // $.ajax({
  240. // type: "get",
  241. // url: 'province.json',
  242. // dataType: 'json',
  243. // async: true,
  244. // data: {
  245. //// token: $.cookie("token")
  246. // },
  247. // success: function(data) {
  248. // var Count = data.provinces;
  249. // $(Count).each(function(i,n){
  250. // $("<option value='" + n.provinceName + "'>" + n.provinceName + "</option>").appendTo($("#province"));
  251. // })
  252. // $('#province').selectpicker('refresh');
  253. // }
  254. // });
  255. var Count = geo.provinces;
  256. $(Count).each(function (i, n) {
  257. $("<option value='" + n.provinceName + "'>" + n.provinceName + "</option>").appendTo($("#province"));
  258. })
  259. $('#province').selectpicker('refresh');
  260. }
  261. function Select(obj) {
  262. obj.click(function (event) {
  263. event.preventDefault();
  264. });
  265. obj.focus(function() { //
  266. //失去焦点后触发的事件
  267. obj.parent().find('.testInput-list').show();
  268. BindLDdep();
  269. });
  270. obj.bind("input propertychange", function() {
  271. var value = $(this).val();
  272. obj.parent().find('.testInput-list').show();
  273. BindLDdep(value)
  274. });
  275. function BindLDdep(str) {
  276. $('.testInput-list').empty();
  277. $.ajax({
  278. type: "get",
  279. url: huayi.config.callcenter_url + "Customer/BindLDdep",
  280. dataType: 'json',
  281. async: true,
  282. data: {
  283. keypara: str,
  284. token: $.cookie("token")
  285. },
  286. success: function(data) {
  287. var Count = data.data.dep;
  288. console.log(Count);
  289. var html = '';
  290. $(Count).each(function(i, n) {
  291. html = '<li value="' + n + '" id="td'+i+'">' + n + '</li>';
  292. $(html).appendTo($('.testInput-list'));
  293. });
  294. $('.testInput-list>li').click(function() {
  295. obj.val($(this).html());
  296. console.log($(this).html());
  297. $('.testInput-list').hide();
  298. })
  299. }
  300. });
  301. };
  302. //
  303. }
  304. //请求单位
  305. $(document).ready(function(){
  306. $(document).click(function(e) {
  307. if(!$(e.target).is($('.testInput-list>li'))&&!$(e.target).is($('#testInput1'))&&!$(e.target).is($('#testInput2'))&&!$(e.target).is($('#testInput3'))&&!$(e.target).is($('#testInput4'))) {
  308. $('.testInput-list').hide();
  309. }
  310. })
  311. })
  312. </script>
  313. </body>
  314. </html>