安图前端代码

huiFangHaoMaDaoRu.html 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <link href="../css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
  6. <link href="../css/bootstrap.min.css" />
  7. <link href="../css/bootstrap-table-fixed-columns.css" />
  8. <link rel="stylesheet" href="../css/boot/bootstrap-table.css" />
  9. <link href="../css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
  10. <link href="../css/animate.min.css" rel="stylesheet">
  11. <link href="../css/style.min862f.css?v=4.1.0" rel="stylesheet">
  12. <link href="../css/layer/need/layer.css" />
  13. <link rel="stylesheet" href="../css/init.css" />
  14. <title>号码导入</title>
  15. <style>
  16. .btns {
  17. background: #18a689;
  18. }
  19. .btns {
  20. color: rgb(255, 255, 255);
  21. font-size: 12px;
  22. margin-left: 15px;
  23. box-sizing: border-box;
  24. background: rgb(26, 179, 148);
  25. padding: 6px 10px;
  26. outline: none;
  27. border-width: 0px;
  28. border-style: initial;
  29. border-color: initial;
  30. border-image: initial;
  31. border-radius: 3px;
  32. }
  33. .fr p{
  34. display: inline-block;
  35. margin-bottom: 0;
  36. }
  37. .fl {
  38. float: left;
  39. }
  40. .daoHang .dhLeft a {
  41. font-size: 14px;
  42. color: #999;
  43. }
  44. #tbResult thead th .th-inner {
  45. width: 100px;
  46. }
  47. #newOld {
  48. width: 100px;
  49. background-color: #FFF;
  50. background-image: none;
  51. border: 1px solid #e5e6e7;
  52. border-radius: 1px;
  53. color: inherit;
  54. padding: 6px 12px;
  55. outline: none;
  56. }
  57. .tableCon>div.newClient {
  58. display: none;
  59. }
  60. </style>
  61. </head>
  62. <body>
  63. <div class="wrapper wrapper-content animated fadeInRight">
  64. <div class="container-fluid">
  65. <div class="daoHang clearfix">
  66. <div class="dhLeft">
  67. <sapn><i class="syIcon"></i>位置:
  68. <a href="javaScript:;" id="ReIndex">首页</a>&gt;
  69. <a href="javaScript:;">电销回访管理</a>&gt;
  70. <a href="" style="color: #000;">回访号码导入</a>
  71. </sapn>
  72. </div>
  73. </div>
  74. <div class="fr" style="margin-bottom: 20px; text-align: right;">
  75. <p style="margin-right: 10px;">
  76. </p>
  77. <p>
  78. <button class="btns drBtn">导入</button>
  79. </p>
  80. </div>
  81. </div>
  82. <div class="treeTable clearfix">
  83. <div class="tableCon ">
  84. <div class="newClient">
  85. <table id="ncTable" data-row-style="rowStyle" data-query-params="queryParams" data-pagination="true">
  86. <thead>
  87. <tr>
  88. <th data-field="F_SerialNo" data-align="center">序号</th>
  89. <th data-field="F_InfoDode" data-align="center">信息编号</th>
  90. <th data-field="F_License" data-align="center">车牌号</th>
  91. <th data-field="F_brand" data-align="center">品牌</th>
  92. <th data-field="F_series" data-align="center">车系</th>
  93. <th data-field="F_CarType" data-align="center">车型</th>
  94. <th data-field="F_ownerName" data-align="center">车主姓名</th>
  95. <th data-field="F_Telphone" data-align="center">固定电话</th>
  96. <th data-field="F_MobilePhone" data-align="center">移动电话</th>
  97. <th data-field="F_ownerships" data-align="center">归属人</th>
  98. <th data-field="F_usePlace" data-align="center">使用地</th>
  99. <th data-field="F_ReportRemark" data-align="center">报备备注</th>
  100. <th data-field="F_khInfor" data-align="center">客户提供信息</th>
  101. <th data-field="F_GroupName" data-align="center">集团名称</th>
  102. <th data-field="F_khType" data-align="center">客户类别</th>
  103. <th data-field="F_isInto" data-align="center">是否进店</th>
  104. <th data-field="F_intointent" data-align="center">进店意向程度</th>
  105. <th data-field="F_ReportUser" data-align="center">报备人</th>
  106. <th data-field="F_ownerships2" data-align="center">归属人2</th>
  107. <th data-field="F_ReportTime" data-align="center">报备时间</th>
  108. <th data-field="F_PerfectRate" data-align="center">信息完善率</th>
  109. <th data-field="F_infoState" data-align="center">信息状态</th>
  110. <th data-field="F_aging" data-align="center">跟进时效</th>
  111. <th data-field="F_liableP" data-align="center">责任人</th>
  112. </tr>
  113. </thead>
  114. </table>
  115. </div>
  116. <div class="oldClient">
  117. <table id="ocTable" data-row-style="rowStyle" data-query-params="queryParams" data-pagination="true">
  118. <thead>
  119. <tr>
  120. <th data-field="F_CardDate" data-align="center">办保养卡时间</th>
  121. <th data-field="F_CardType" data-align="center">保养卡类别</th>
  122. <th data-field="F_CardAmount" data-align="center">保养卡金额</th>
  123. <th data-field="F_MaintainUser" data-align="center">电销维护人员</th>
  124. <th data-field="F_ComLocations" data-align="center">车辆常用地</th>
  125. <th data-field="F_Grade" data-align="center">等级</th>
  126. <th data-field="F_Reciver" data-align="center">接车员</th>
  127. <th data-field="F_RepairTimes" data-align="center">历史维修次</th>
  128. <th data-field="F_FirstInDate" data-align="center">首次入厂日期</th>
  129. <th data-field="F_LastMileage" data-align="center">上次入厂里程</th>
  130. <th data-field="F_LastOutDate" data-align="center">上次出厂日期</th>
  131. <th data-field="F_Years" data-align="center">年份</th>
  132. <th data-field="F_InsuranceC" data-align="center">承保公司</th>
  133. <th data-field="F_InsuranceDate" data-align="center">保险到期日</th>
  134. <th data-field="F_Storefront" data-align="center">店面</th>
  135. <th data-field="F_License" data-align="center">系统车牌号</th>
  136. <th data-field="F_brand" data-align="center">品牌</th>
  137. <th data-field="F_CarType" data-align="center">车型</th>
  138. <th data-field="F_Contacts" data-align="center">联系人</th>
  139. <th data-field="F_khMobile" data-align="center">客户手机</th>
  140. <th data-field="F_khPhone" data-align="center">客户电话</th>
  141. <th data-field="F_PreLoss" data-align="center">预流失</th>
  142. <th data-field="F_WoOrder" data-align="center">工单</th>
  143. <th data-field="F_usePlace" data-align="center">使用地</th>
  144. <th data-field="F_khInfor" data-align="center">客户提供信息</th>
  145. <th data-field="F_lossReason" data-align="center">流失原因</th>
  146. <th data-field="F_hanleMode" data-align="center">处理方式</th>
  147. <th data-field="F_liableP" data-align="center">责任人</th>
  148. </tr>
  149. </thead>
  150. </table>
  151. </div>
  152. </div>
  153. </div>
  154. <div class="model daoRu">
  155. <div class="box">
  156. <div class="btop clearfix">
  157. <p class="btl">导入信息</p>
  158. <p class="btr closed"><i class="fa fa-remove"></i></p>
  159. </div>
  160. <div class="boxCon">
  161. <table>
  162. <tr>
  163. <td><input class="fl" type="file" id="upFile" name="upFile" /></td>
  164. <td>
  165. <select name="" id="newOld">
  166. <option value="0">老客户</option>
  167. <option value="1">新客户</option>
  168. </select>
  169. <a class="btns fr" id="aa">导入</a>
  170. </td>
  171. </tr>
  172. <tr>
  173. <td><a href="dxmb/l老客户.xlsx" download="老客户模板.xlsx" title="点击下载老客户模板" style="margin-right: 10px;">老客户模板</a></td>
  174. <td><a href="dxmb/X新客户.xlsx" download="新客户模板.xlsx" title="点击下载新客户模板">新客户模板</a></td>
  175. </tr>
  176. </table>
  177. <table class="seeDr table table-bordered">
  178. <thead>
  179. <tr>
  180. <td>文件名称</td>
  181. <td>类型</td>
  182. <td>上传用户</td>
  183. <td>上传时间</td>
  184. <td>操作</td>
  185. </tr>
  186. </thead>
  187. <tbody>
  188. </tbody>
  189. </table>
  190. </div>
  191. </div>
  192. </div>
  193. </div>
  194. <script src="../js/jquery.min.js?v=2.1.4"></script>
  195. <script src="../js/jquery.cookie.js"></script>
  196. <script src="../js/bootstrap-table-fixed-columns.js"></script>
  197. <script src="../Script/Common/huayi.load.js"></script>
  198. <script src="../Script/Common/huayi.config.js"></script>
  199. <script src="../js/visit/ajaxfileupload.js"></script>
  200. <script>
  201. $(function() {
  202. var type = 0;
  203. oldFinish(type);
  204. $("#aa").click(function() {
  205. type = $('#newOld').val();
  206. ajaxFileUpload(type);
  207. });
  208. $('.drBtn').click(function(){
  209. $('.daoRu').show();
  210. })
  211. //关闭按钮
  212. $('.closed').click(function(){
  213. $('.daoRu').hide();
  214. })
  215. getDr();
  216. });
  217. function getDr(){
  218. $('.seeDr tbody').html('');
  219. $.ajax({
  220. type:"get",
  221. url: huayi.config.callcenter_url + "VisFile/GetList",
  222. async:true,
  223. dataType:'json',
  224. data:{
  225. token: $.cookie("token"),
  226. typegroup:1
  227. },
  228. success:function(data){
  229. var con=data.rows;
  230. // if(data.state.toLowerCase()=='success'){
  231. $(con).each(function(i,n){
  232. if(n.F_FileType=='0'){
  233. n.F_FileType='老客户'
  234. }else{
  235. n.F_FileType='新客户'
  236. }
  237. $('<tr>'+
  238. '<td>'+n.F_FileOldName+'</td>'+
  239. '<td>'+n.F_FileType+'</td>'+
  240. '<td>'+n.F_InputUserCode+'</td>'+
  241. '<td>'+n.F_InputDate+'</td>'+
  242. '<td><a href="javaScripe:;" data-index="'+n.F_FileID+'" onclick=del(this)>删除</a></td>'+
  243. '</tr>').appendTo('.seeDr tbody');
  244. });
  245. // }
  246. }
  247. });
  248. }
  249. function del(obj){
  250. var state=$(obj).attr('data-index');
  251. $.ajax({
  252. type:"get",
  253. url:huayi.config.callcenter_url +"VisFile/DelFile",
  254. async:true,
  255. dataType:'json',
  256. data:{
  257. token: $.cookie("token"),
  258. ids:state
  259. },
  260. success:function(data){
  261. if(data.state.toLowerCase()=='success'){
  262. layer.msg("删除成功!");
  263. getDr();
  264. }
  265. }
  266. });
  267. }
  268. //新客户
  269. function newFinish(type) {
  270. var newTable = $('#ncTable');
  271. newTable.bootstrapTable('destroy');
  272. //初始化表格,动态从服务器加载数据
  273. newTable.bootstrapTable({
  274. method: "get", //使用get请求到服务器获取数据
  275. url: huayi.config.callcenter_url + "DXTel/GetList",
  276. contentType: 'application/x-www-form-urlencoded',
  277. striped: true, //表格显示条纹
  278. pagination: true, //启动分页
  279. pageSize: 5, //每页显示的记录数
  280. pageNumber: 1, //当前第几页
  281. fixedColumns: true,
  282. fixedNumber: 3,
  283. pageList: [5, 20, 50, 100], //记录数可选列表
  284. search: false, //是否启用查询
  285. showColumns: false, //显示下拉框勾选要显示的列
  286. showRefresh: false, //显示刷新按钮
  287. sidePagination: "server", //表示服务端请求
  288. //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
  289. //设置为limit可以获取limit, offset, search, sort, order
  290. queryParamsType: "undefined",
  291. queryParams: function queryParams(params) { //设置查询参数
  292. var param = {
  293. page: params.pageNumber,
  294. pagesize: params.pageSize,
  295. token: $.cookie("token"),
  296. type: type
  297. };
  298. return param;
  299. },
  300. onLoadSuccess: function() { //加载成功时执行
  301. // layer.msg("加载成功");
  302. },
  303. onLoadError: function() { //加载失败时执行
  304. //layer.msg("加载数据失败", { time: 1500, icon: 2 });
  305. }
  306. });
  307. }
  308. //老客户
  309. function oldFinish(type) {
  310. var oldTable = $('#ocTable');
  311. oldTable.bootstrapTable('destroy');
  312. //初始化表格,动态从服务器加载数据
  313. oldTable.bootstrapTable({
  314. method: "get", //使用get请求到服务器获取数据
  315. url: huayi.config.callcenter_url + "DXTel/GetList",
  316. contentType: 'application/x-www-form-urlencoded',
  317. striped: true, //表格显示条纹
  318. pagination: true, //启动分页
  319. pageSize: 5, //每页显示的记录数
  320. pageNumber: 1, //当前第几页
  321. fixedColumns: true,
  322. fixedNumber: 3,
  323. pageList: [5, 20, 50, 100], //记录数可选列表
  324. search: false, //是否启用查询
  325. showColumns: false, //显示下拉框勾选要显示的列
  326. showRefresh: false, //显示刷新按钮
  327. sidePagination: "server", //表示服务端请求
  328. //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
  329. //设置为limit可以获取limit, offset, search, sort, order
  330. queryParamsType: "undefined",
  331. queryParams: function queryParams(params) { //设置查询参数
  332. var param = {
  333. page: params.pageNumber,
  334. pagesize: params.pageSize,
  335. token: $.cookie("token"),
  336. type: type
  337. };
  338. return param;
  339. },
  340. onLoadSuccess: function() { //加载成功时执行
  341. // layer.msg("加载成功");
  342. },
  343. onLoadError: function() { //加载失败时执行
  344. //layer.msg("加载数据失败", { time: 1500, icon: 2 });
  345. }
  346. });
  347. }
  348. function ajaxFileUpload(type) {
  349. $.ajaxFileUpload({
  350. url: huayi.config.callcenter_url + 'InputDXTel/TelInput', //用于文件上传的服务器端请求地址
  351. secureuri: false, //是否需要安全协议,一般设置为false
  352. fileElementId: 'upFile', //文件上传域的ID
  353. dataType: 'json', //返回值类型 一般设置为json
  354. data: {
  355. token: $.cookie("token"),
  356. fileid: "upFile",
  357. type: type
  358. },
  359. success: function(data) //服务器成功响应处理函数
  360. {
  361. //layer.msg("导入成功");
  362. if(type == 0) {
  363. $('.oldClient').show().siblings().hide();
  364. oldFinish(type);
  365. } else {
  366. $('.newClient').show().siblings().hide();
  367. newFinish(type);
  368. }
  369. getDr();
  370. }
  371. })
  372. return false;
  373. }
  374. </script>
  375. </body>
  376. </html>