importing.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537
  1. {extend name="public/layout" /} {block name="title"}素材库{/block} {block name="body"}
  2. <link rel="stylesheet" href="__STATIC__/css/csspc.css">
  3. <link rel="stylesheet" href="__STATIC__/css/font.css">
  4. <link rel="stylesheet" " href=" __STATIC__/css/common.css">
  5. <style type="text/css">
  6. html,body{
  7. background: #f5f5f5;
  8. font-size: 12px;
  9. padding-bottom: 60px;
  10. }
  11. .toptitbox{
  12. display: block;
  13. width: 900px;
  14. padding: 15px 10px;
  15. border: 1px solid #F0F0F0;
  16. background: #FCFCFC;
  17. margin-bottom: 10px;
  18. position: relative;
  19. line-height: 28px;
  20. }
  21. .golastbtn{
  22. display: block;
  23. margin-right: 21px;
  24. color: #000;
  25. background: url(__STATIC__/img/btn_bg.gif) repeat-x;
  26. border: 1px solid #C0C0C0;
  27. padding: 0 12px;
  28. *padding: 0 6px;
  29. height: 28px;
  30. cursor: pointer;
  31. }
  32. .mainbox{
  33. display: block;
  34. width: 900px;
  35. height:100%;
  36. padding-top: 20px;
  37. margin: 0 auto;
  38. }
  39. .bodys{
  40. height: calc(100% - 20px);
  41. padding: 25px;
  42. background-color: #fff;
  43. }
  44. .layui-icon {
  45. font-size: 18px !important;
  46. line-height: 38px;
  47. }
  48. .layui-table-view .layui-table th,
  49. .layui-table-view .layui-table td {
  50. text-align: center;
  51. border-color: #B6CADE;
  52. }
  53. .upload-img .area i {
  54. font-size: 50px;
  55. color: #009688;
  56. }
  57. .evi-block {
  58. float: left;
  59. margin-right: 10px;
  60. }
  61. /*///*/
  62. .addImages {
  63. display: inline-block;
  64. width: 140px;
  65. height: 125px;
  66. -webkit-box-sizing: border-box;
  67. -moz-box-sizing: border-box;
  68. box-sizing: border-box;
  69. border: 1px dashed darkgray;
  70. background: #f8f8f8;
  71. position: relative;
  72. overflow: hidden;
  73. }
  74. .text-detail {
  75. margin-top: 40px;
  76. text-align: center;
  77. }
  78. .text-detail>span {
  79. font-size: 40px;
  80. }
  81. .imageDiv div {
  82. width: 100%;
  83. height: 100%;
  84. position: absolute;
  85. top: 0px;
  86. background-color: #e6e6e600;
  87. }
  88. .imageDiv div i {
  89. display: none;
  90. font-size: 31px;
  91. position: absolute;
  92. top: 37%;
  93. left: 40%;
  94. }
  95. .imageDiv div:hover {
  96. background-color: #e6e6e680;
  97. }
  98. .imageDiv div:hover i {
  99. display: block;
  100. cursor: pointer;
  101. }
  102. .layui-card-header p a:hover {
  103. text-decoration-line: underline;
  104. }
  105. .clearfix::after {
  106. clear: both;
  107. content: ' ';
  108. display: table;
  109. }
  110. .clearfix::before {
  111. content: ' ';
  112. display: table;
  113. }
  114. .left {
  115. float: left;
  116. }
  117. .templetbox {
  118. display: block;
  119. width: 80px;
  120. height: 80px;
  121. border:unset;
  122. text-align: center;
  123. background-color: #fff;
  124. box-shadow: 0 0 10px 6px rgba(209,205,205,0.2);
  125. cursor: pointer;
  126. }
  127. .templetbox img {
  128. display: block;
  129. width: 40px;
  130. margin: 14px auto 4px;
  131. }
  132. .templetbox span,
  133. .templetbox button {
  134. display: block;
  135. width: 100%;
  136. text-align: center;
  137. font-size: 12px;
  138. color: #384855;
  139. height: 20px;
  140. background-color: transparent;
  141. line-height: 20px;
  142. }
  143. .leftextbox {
  144. color: #249efb;
  145. font-size: 14px;
  146. line-height: 88px;
  147. margin-right: 32px;
  148. }
  149. .uploadbox {
  150. margin-left: 40px;
  151. }
  152. .noticebox {
  153. margin-top: 40px;
  154. }
  155. .sourcebox {
  156. margin-top: 40px;
  157. }
  158. .sourcebtn {
  159. padding-left: 0;
  160. width: auto;
  161. }
  162. .sourceinput {
  163. margin-left: 84px;
  164. }
  165. .width33_3{
  166. width: 33.333%;
  167. }
  168. .resultbox{
  169. display: block;
  170. border: 1px solid #e6e6e6;
  171. margin-top: 24px;
  172. padding: 16px 0;
  173. }
  174. .everyresultbox{
  175. height: 48px;
  176. border-right: 1px solid #e6e6e6;
  177. box-sizing: border-box;
  178. text-align: center;
  179. line-height: 48px;
  180. }
  181. .resultbox .everyresultbox:last-child{
  182. border: unset;
  183. }
  184. .numbox{
  185. height: 18px;
  186. font-size: 12px;
  187. padding: 0 2px;
  188. background-color: #249efb;
  189. color: #fff;
  190. line-height: 18px;
  191. margin-right: 4px;
  192. border-radius: 4px;
  193. }
  194. .sourcebox .layui-form-select{width:50%;display: inline-block;}
  195. .layui-form-select dl{max-height: 200px;}
  196. </style>
  197. <body>
  198. <div class="mainbox">
  199. <div class="clearfix toptitbox">
  200. <div class="left">您当前的操作 · <b>资源库添加</b></div>
  201. <div class="right">
  202. <div class="left">点击这里返回列表:</div>
  203. <button class="left golastbtn" type="button">返回列表</button>
  204. </div>
  205. </div>
  206. <div class="bodys wpsr">
  207. <div class="layui-fluid">
  208. <div class="layui-card">
  209. <div class="layui-card-body">
  210. <form class="layui-form">
  211. <div class="layui-upload">
  212. <div class="clearfix">
  213. <div class="left clearfix">
  214. <div class="left leftextbox">资源模板</div>
  215. <a class="left templetbox" href="../../static/templist.xlsx" download>
  216. <img src="__STATIC__/img/file.png" />
  217. <span>下载模板</span>
  218. </a>
  219. </div>
  220. <div class="left uploadbox">
  221. <div class="left leftextbox">资源分配</div>
  222. <!--<button type="button" class="left templetbox" id="excelfile">
  223. <img src="__STATIC__/img/upload.png" />
  224. <span>上传文档</span>
  225. </button>-->
  226. <div class="left templetbox" id="excelfile" style="cursor: pointer;" href>
  227. <img src="__STATIC__/img/upload.png" />
  228. <span>上传文档</span>
  229. <input type="file" hidden id="xlsx-file" accept=".xls,.xlsx" />
  230. </div>
  231. <span class="layui-inline layui-upload-choose filename" style="line-height: 80px;"></span>
  232. </div>
  233. </div>
  234. <p class="noticebox" style="color:red"><span>注意:
  235. <br/>
  236. 1、客户姓名最长20个字符以内,超过20个字符不再显示
  237. <br/>
  238. 2、客户重要等级仅限A/B/C/D,未按要求上传则不记录客户重要等级
  239. <br/>
  240. 3、仅支持xlsx、xls格式,若未按照规范,则可能造成导入失败(单次限制3000条数据)</span></p>
  241. <div class="layui-form-item sourcebox">
  242. <label class="layui-form-label sourcebtn"><span style="color:red">*</span>来源渠道:</label>
  243. <div class="layui-input-block sourceinput">
  244. <!--<input type="text" name="" id="sourcelist" required lay-verify="required" placeholder="请输入来源渠道" autocomplete="off" class="layui-input layui-qd">-->
  245. <select name="from">
  246. {volist name='source' id='v'}
  247. <option value="{$v.id}" {eq name="$old_source" value="$v.id" }selected{/eq}>{$v.source}</option>
  248. {/volist}
  249. </select>
  250. <!--<a href="javascript:void(0)" class="layui-btn layui-btn-primary" id="cate_add" data-type="source">添加客户来源</a>-->
  251. <i class="layui-icon layui-icon-add-circle adding"
  252. style="font-size: 32px;margin-left:5px;cursor: pointer;" id="cate_add" data-type="source"></i>
  253. </div>
  254. </div>
  255. </div>
  256. <div class="layui-form-item ">
  257. <button class="layui-btn submitbox" lay-submit style="float:right" lay-filter="submit">开始上传</button>
  258. </div>
  259. </form>
  260. </div>
  261. </div>
  262. <div class="resultbox clearfix" style="display:none;">
  263. <div class="left width33_3 everyresultbox">
  264. <span class="numbox badphone">0</span>
  265. <span>无效线索数</span>
  266. </div>
  267. <div class="left width33_3 everyresultbox">
  268. <span class="numbox avaliable">0</span>
  269. <span>有效线索数</span>
  270. </div>
  271. <div class="left width33_3 everyresultbox">
  272. <span class="numbox repeat">0</span>
  273. <span>重复数</span>
  274. </div>
  275. </div>
  276. <div id="loadings" hidden><span style="color:black;margin: 43%;">上传中请稍后...</span></div>
  277. </div>
  278. </div>
  279. </div>
  280. </body>
  281. {/block} {block name="js"}
  282. <script src="__STATIC__/js/xlsx.core.min.js"></script>
  283. <!-- <script type="text/javascript" src="__STATIC__/js/plupload/js/plupload.full.min.js"></script> -->
  284. <script>
  285. layui.config({
  286. base: '__LAYUI__/' //静态资源所在路径
  287. ,
  288. urlbase: '/sys'
  289. }).extend({
  290. index: 'lib/index' //主入口模块
  291. }).use(['index', 'form', 'upload'], function () {
  292. var $ = layui.$,
  293. form = layui.form,
  294. upload = layui.upload,
  295. isloading = false;
  296. $('#sourcelist').on('click', function () {
  297. layer.open({
  298. type:2,
  299. title:'来源渠道',
  300. content:'{:url("crm/sourcelist")}',
  301. area:['1000px', '600px']
  302. });
  303. });
  304. $('#cate_add').click(function () {
  305. var title = '添加客户来源';
  306. layer.prompt({ title: [title, 'color:#333333;background-color:#D8E6F1;'], }, function (value, index) {
  307. var data = {};
  308. data['source'] = value;
  309. edit(data);
  310. layer.close(index);
  311. });
  312. });
  313. var edit = function (data) {
  314. requestAjax('{:url("crm/apisourceadding")}', data)
  315. }
  316. var requestAjax = function (url, data) {
  317. $.post(url, data, function (res) {
  318. if (res.code === 0) {
  319. layer.msg(res.msg, {
  320. icon: 1,
  321. time: 2000
  322. }, function () {
  323. location.reload();
  324. });
  325. } else {
  326. layer.msg(res.msg, {
  327. icon: 0,
  328. time: 2000
  329. });
  330. }
  331. })
  332. }
  333. function isPhoneNum(phone) {
  334. var myreg =/^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(19[0-9]{1}))+\d{8})$/;
  335. if (!myreg.test(phone)) {
  336. return false;
  337. }
  338. return true;
  339. }
  340. function uniqueArray(arr) {
  341. const newArr = [];
  342. var repeat = 0;
  343. const tmp = new Map();
  344. for (let i = 0; i < arr.length; i++) {
  345. if (!tmp.get(arr[i].phone)) {
  346. tmp.set(arr[i].phone, 1);
  347. newArr.push(arr[i])
  348. } else {
  349. repeat++;
  350. }
  351. }
  352. return [newArr,repeat];
  353. }
  354. $('.golastbtn').click(function () {
  355. window.parent.backresourcefun(window.location.search.split('?')[1], '{:url("manager_emp/importing")}', 'add1');
  356. })
  357. $('#excelfile').click(function(){
  358. $('#xlsx-file')[0].click()
  359. })
  360. var fileobj='';
  361. $('#xlsx-file').change(function(e) {
  362. fileobj = e.target.files;
  363. var fileReader = new FileReader();
  364. $('.filename').html(fileobj[0].name);
  365. fileReader.readAsDataURL(document.querySelector('#xlsx-file').files[0])
  366. fileReader.onload = function(ev) {
  367. try {
  368. // console.log( ev.target.result)
  369. } catch (e) {
  370. console.log('文件类型不正确');
  371. return;
  372. }
  373. };
  374. });
  375. var log_id='',allnum=0,invalidnum=0,repeatnum=0;
  376. form.on('submit(submit)', function (obj) {
  377. if(!fileobj){
  378. layer.msg("数据不能为空!", {time: 1000});
  379. return false;
  380. }
  381. if (isloading) {
  382. return false;
  383. }
  384. isloading = true;
  385. $(obj.elem).addClass('layui-btn layui-btn-disabled');
  386. var myMsg = layer.msg("数据上传中...", {
  387. icon: 16,
  388. time: -1,
  389. shade: 0.01
  390. })
  391. let formData = new FormData();
  392. formData.append('file_name', fileobj[0].name);
  393. formData.append('source', $('.sourceinput select')[0].value);
  394. formData.append('file', fileobj[0]);
  395. $.ajax({
  396. type: 'post',
  397. url: '{:url("manager_emp/importLog")}',
  398. data: formData,
  399. processData: false,
  400. contentType: false,
  401. success: function (data) {
  402. layer.close(myMsg);//手动关闭
  403. if (data.code === 0) {
  404. log_id=data.data;
  405. layer.msg(data.msg);
  406. setTimeout(() => {
  407. isloading = false;
  408. window.parent.backresourcefun(window.location.search.split('?')[1], '{:url("manager_emp/importing")}', 'add1');
  409. }, 1500)
  410. }else if(data.code == 403){
  411. $(".exitbtn").trigger("click");
  412. } else {
  413. layer.msg(data.msg, {
  414. anim: 6
  415. , time: 2000
  416. }, function() {
  417. isloading = false;
  418. });
  419. }
  420. }
  421. })
  422. return false;
  423. })
  424. function crmsourceadd(num,persons,myMsg){
  425. if (!persons.length) {
  426. layer.msg('Excel数据为空,请检查导入数据内容', {
  427. anim: 6
  428. , time: 2000
  429. });
  430. return;
  431. }
  432. // var index = parent.layer.getFrameIndex(window.name);
  433. let n= num*40,nextnum= (num*1+1) * 40-1;
  434. var arr=[];
  435. for(var i= n;i<= nextnum;i++){
  436. arr.push(persons[i]);
  437. }
  438. if(arr.length==0){
  439. return false;
  440. }
  441. $.ajax({
  442. type: 'post',
  443. url: '{:url("manager_emp/add")}',
  444. data: {
  445. log_id: log_id,
  446. source_id: $('.sourceinput select')[0].value,
  447. customers: arr
  448. },
  449. dataType: 'json',
  450. success: function (data) {
  451. if(persons.length- (num*1+1) * 40 <= 0){
  452. layer.close(myMsg);//手动关闭
  453. repeatnum = repeatnum * 1 + data.data.repeat * 1;
  454. invalidnum = invalidnum * 1 + data.data.error * 1;
  455. if(data.code === 0){
  456. layer.msg(data.msg, {
  457. anim: 0
  458. , time: 2000
  459. }, function () {
  460. window.parent.backresourcefun(window.location.search.split('?')[1], '{:url("manager_emp/importing")}','add');
  461. // 关掉本页面,打开上一个页面
  462. // parent.layui.table.reload('pool_customer_table'); //重载表格
  463. // parent.layer.close(index); //再执行关闭
  464. });
  465. } else {
  466. layer.msg(data.msg, {
  467. anim: 6
  468. , time: 2000
  469. });
  470. }
  471. if(data){
  472. $('.resultbox').show();
  473. $('.avaliable').html(persons.length);
  474. $('.badphone').html(invalidnum);
  475. $('.repeat').html(repeatnum);
  476. }
  477. }else{
  478. repeatnum = repeatnum * 1 + data.data.repeat * 1;
  479. invalidnum = invalidnum * 1 + data.data.error * 1;
  480. crmsourceadd(num * 1 + 1, persons, myMsg)
  481. }
  482. }
  483. })
  484. }
  485. });
  486. </script>
  487. {/block}