changefillword.html 35 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024
  1. <!DOCTYPE HTML>
  2. <html class="mask">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  6. <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7. <title></title>
  8. <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
  9. <link rel="stylesheet" href="../../css/style.css">
  10. <link rel="stylesheet" href="../../css/projeck.css">
  11. <style>
  12. body {
  13. background: #009fe8;
  14. }
  15. .hidden {
  16. width: 100%;
  17. height: 100%;
  18. overflow: hidden;
  19. }
  20. .api_layout {
  21. width: 95%;
  22. margin: 10px;
  23. background: #fff;
  24. border-radius: 5px;
  25. }
  26. .column-row-container {
  27. margin: 10px;
  28. }
  29. .column {
  30. margin-bottom: 10px;
  31. }
  32. .column:first-child {
  33. /*padding-top: 10px;*/
  34. }
  35. .column-title {
  36. display: block;
  37. font-size: 15px;
  38. color: #97a3b4;
  39. margin-bottom: 10px;
  40. }
  41. input::placeholder {
  42. font-size: 14px;
  43. color: #bdc3c7;
  44. }
  45. .api_layout .font-s {
  46. font-size: 14px;
  47. }
  48. .api_layout .input-s {
  49. height: 45px;
  50. border: 1px solid #ebebeb;
  51. -webkit-border-radius: 5px;
  52. -moz-border-radius: 5px;
  53. border-radius: 5px;
  54. padding-left: 10px;
  55. }
  56. /*#person-name {
  57. margin-top: 10px;
  58. display: none;
  59. }*/
  60. #person-name-container {
  61. height: 43px;
  62. display: flex;
  63. justify-content: space-between;
  64. align-items: center;
  65. border: solid 1px #97a3b4;
  66. border-radius: 5px;
  67. display: none;
  68. }
  69. .column-input {
  70. border: none;
  71. padding-left: 15px;
  72. padding-top: 12px
  73. }
  74. .person-search-btn {
  75. display: block;
  76. height: 100%;
  77. width: 50px;
  78. background: #009FE8;
  79. border: none
  80. }
  81. .aui-list-item-input1 {
  82. position: relative;
  83. }
  84. .aui-list-item-input1:after {
  85. content: "";
  86. border-left: 5px solid transparent;
  87. border-right: 5px solid transparent;
  88. border-bottom: 5px solid #b3c0ce;
  89. -webkit-transform-origin: 5px 2.5px;
  90. transform-origin: 5px 2.5px;
  91. -webkit-transition: all .5s ease;
  92. transition: all .5s ease;
  93. position: absolute;
  94. right: 10px;
  95. top: 18px;
  96. -webkit-transform: rotate(180deg);
  97. transform: rotate(180deg);
  98. }
  99. .column-textarea {
  100. border: 1px solid #97a3b4;
  101. -webkit-border-radius: 5px;
  102. -moz-border-radius: 5px;
  103. border-radius: 5px;
  104. padding: 10px;
  105. height: 160px;
  106. }
  107. .column-textarea::placeholder {
  108. font-size: 14px;
  109. color: #333;
  110. }
  111. .aui-row {
  112. border: 1px dashed #c8d2de;
  113. -webkit-border-radius: 5px;
  114. -moz-border-radius: 5px;
  115. border-radius: 5px;
  116. padding: 10px;
  117. }
  118. .technological-process {
  119. margin-top: 10px;
  120. display: flex;
  121. justify-content: flex-start;
  122. flex-wrap: wrap;
  123. }
  124. .technologicals {
  125. margin-bottom: 20px;
  126. }
  127. .aui-list-item-input label {
  128. font-size: 14px;
  129. height: 21px;
  130. display: inline-block;
  131. line-height: 22px;
  132. margin-right: 5px;
  133. }
  134. .aui-list-item-input label:last-child {
  135. margin-right: 0;
  136. }
  137. .uploadImg .imgParent {
  138. padding: 15px;
  139. }
  140. .imgParent img {
  141. width: 79px;
  142. height: 79px;
  143. }
  144. .imgParents img {
  145. width: 104px;
  146. height: 104px;
  147. object-fit: cover;
  148. border-radius: 3px;
  149. }
  150. .aui-toast-content {
  151. font-size: 16px;
  152. }
  153. .delImg {
  154. width: 15px;
  155. height: 15px;
  156. line-height: 15px;
  157. position: absolute;
  158. top: -5px;
  159. left: -5px;
  160. border: 1px solid red;
  161. border-radius: 50%;
  162. color: red;
  163. font-size: 12px;
  164. font-weight: bold;
  165. text-align: center;
  166. }
  167. .fileList img {
  168. width: 35px;
  169. height: 35px;
  170. margin: auto;
  171. margin-top: 8px;
  172. }
  173. .fileList .uploadFiles {
  174. padding: 15px;
  175. }
  176. .uploadFiles img {
  177. width: auto;
  178. height: auto;
  179. margin-top: 0;
  180. }
  181. .aui-col-xs-4 span {
  182. overflow: hidden;
  183. text-overflow: ellipsis;
  184. display: -webkit-box;
  185. -webkit-line-clamp: 2;
  186. -webkit-box-orient: vertical;
  187. padding: 0 3px;
  188. height: 48px;
  189. text-align: center;
  190. margin: 5px 0;
  191. font-size: 15px;
  192. }
  193. .node-content {
  194. width: 100%;
  195. display: flex;
  196. justify-content: space-between;
  197. flex-wrap: nowrap;
  198. margin-bottom: 10px;
  199. }
  200. .node-name {
  201. width: 35%;
  202. }
  203. .node-personal {
  204. width: 65%;
  205. display: -webkit-box;
  206. justify-items: flex-start;
  207. align-items: center;
  208. align-content: center;
  209. flex-wrap: wrap;
  210. line-height: normal;
  211. }
  212. .personal-name {
  213. display: inline-block;
  214. font-size: 13px;
  215. padding: 4px 3px;
  216. background: #009fe8;
  217. color: #fff;
  218. border-radius: 2px;
  219. margin-left: 5px;
  220. margin-bottom: 5px;
  221. position: relative;
  222. }
  223. .addNode-name {
  224. padding: 5px 5px;
  225. background: #009fe8;
  226. font-size: 16px;
  227. color: #fff;
  228. font-weight: bold;
  229. text-align: center;
  230. display: inline-block;
  231. border-radius: 2px;
  232. margin-left: 5px;
  233. }
  234. .aui-btn-block {
  235. font-size: 18px;
  236. height: 40px;
  237. line-height: 40px;
  238. }
  239. .ico-loading {
  240. position: absolute;
  241. top: 0;
  242. left: 0;
  243. bottom: 0;
  244. right: 0;
  245. margin: auto;
  246. width: 35px;
  247. height: 35px;
  248. background: url("../../icon/loading.gif") no-repeat;
  249. background-size: cover;
  250. background-position: center;
  251. }
  252. .loading {
  253. position: absolute;
  254. width: 100%;
  255. height: 100%;
  256. background: rgba(255, 255, 255, .3);
  257. top: 0;
  258. left: 0;
  259. }
  260. .aui-radio,
  261. .aui-checkbox {
  262. position: relative;
  263. top: 3px;
  264. }
  265. .selectTitle {
  266. display: flex;
  267. align-items: center;
  268. justify-content: space-between;
  269. }
  270. .sure-btn {
  271. /*padding: 5px;*/
  272. padding: 3px 5px 0 5px;
  273. border-radius: 3px;
  274. color: #fff;
  275. background: #009fe8;
  276. font-size: 14px;
  277. }
  278. /*.department-list-name option{
  279. height: 40px;
  280. -webkit-appearance: none;
  281. appearance: none;
  282. border: none;
  283. font-size: 18px;
  284. padding: 0px 10px;
  285. display: block;
  286. width: 100%;
  287. -webkit-box-sizing: border-box;
  288. box-sizing: border-box;
  289. background-color: #FFFFFF;
  290. color: red;
  291. border-radius: 4px;
  292. }*/
  293. .template_my_record{
  294. display: flex;
  295. justify-content: space-between;
  296. align-items: center;
  297. padding: 10px 0 0 10px;
  298. }
  299. .template_name{
  300. font-size: 20px;
  301. font-weight: bold;
  302. color: #009FE8;
  303. }
  304. </style>
  305. </head>
  306. <body class="mask">
  307. <div class="api_layout" id="column_row">
  308. <div class="template_my_record">
  309. <div class="template_name"></div>
  310. </div>
  311. </div>
  312. </div>
  313. <!--添加审核人员-->
  314. <div class="api_layout_box hide">
  315. <div class="box_m">
  316. <div class="api_box">
  317. <div class="selectTitle after-border relative">
  318. <h3 class="h3">选择审批人</h3>
  319. <div class="sure-btn" onclick="closesss()">确认</div>
  320. </div>
  321. <div class="aui-list-item-input relative">
  322. <select class="column-select input-s font-s" id="department-list-name" onchange="getApproList($api.val(this))">
  323. <option value="0">请选择部门</option>
  324. </select>
  325. <!-- 根据姓名查人员 -->
  326. <!-- <div id="person-name-container">
  327. <input class="column-input" id='person-value' oninput="searchPersonName(this)" placeholder="请输入人员姓名" />
  328. </div> -->
  329. </div>
  330. </div>
  331. <!-- 人员列表 -->
  332. <ul class="column" id="personal_List" style="margin-bottom: 0">
  333. </ul>
  334. <div class="loading hide">
  335. 确认
  336. <!-- <i class="ico-loading"></i> -->
  337. </div>
  338. </div>
  339. </div>
  340. <!--*****-->
  341. </body>
  342. <script type="text/template" id="template">
  343. <div class="column-row-container">
  344. <div class="column-row">
  345. {{ for (var i = 0;i
  346. <it.length;i++) { }} {{? it[i].type=='input' || it[i].mold}} {{? it[i].mold=='date' }} <div class="column">
  347. <label class="column-title">{{=it[i].label}}:</label>
  348. <input type="date" name="{{=it[i].name}}" value="" placeholder="请输入{{=it[i].label}}" class="inputBox colimn-input input-s font-s time" style="line-height: 41px">
  349. </div>
  350. {{?? it[i].mold == 'num'}}
  351. <div class="column">
  352. <label class="column-title">{{=it[i].label}}:</label>
  353. <input type="number" name="{{=it[i].name}}" value="" placeholder="请输入{{=it[i].label}}" class="inputBox colimn-input input-s font-s">
  354. </div>
  355. {{?? it[i].mold == 'name'}}
  356. <div class="column">
  357. <label class="column-title">{{=it[i].label}}:</label>
  358. <input type="text" name="{{=it[i].name}}" readonly value="{{=JSON.parse($api.getStorage('data')).data.user.name}}" placeholder="请输入{{=it[i].label}}" class="inputBox colimn-input input-s font-s">
  359. </div>
  360. {{?? it[i].mold == 'section'}}
  361. <div class="column">
  362. <label class="column-title">{{=it[i].label}}:</label>
  363. <input type="text" name="{{=it[i].name}}" readonly value="{{=JSON.parse($api.getStorage('data')).data.user.section}}" placeholder="请输入{{=it[i].label}}" class="inputBox colimn-input input-s font-s">
  364. </div>
  365. {{?? it[i].mold == 'phone'}}
  366. <div class="column">
  367. <label class="column-title">{{=it[i].label}}:</label>
  368. <input type="number" name="{{=it[i].name}}" value="{{=JSON.parse($api.getStorage('data')).data.user.mobile}}" placeholder="请输入{{=it[i].label}}" class="inputBox colimn-input input-s font-s">
  369. </div>
  370. {{?? it[i].mold == 'datetime'}}
  371. <div class="column">
  372. <label class="column-title">{{=it[i].label}}:</label>
  373. <input type="datetime-local" name="{{=it[i].name}}" value="" placeholder="请输入{{=it[i].label}}" class="inputBox colimn-input input-s font-s" style="line-height: 41px">
  374. </div>
  375. {{??}}
  376. <div class="column">
  377. <label class="column-title">{{=it[i].label}}:</label>
  378. <input type="text" name="{{=it[i].name}}" value="" placeholder="请输入{{=it[i].label}}" class="inputBox colimn-input input-s font-s">
  379. </div>
  380. {{?}} {{?? it[i].type == 'radio'}}
  381. <div class="column">
  382. <label class="column-title">{{=it[i].label}}:</label>
  383. <div class="radioName" name="{{=it[i].name}}" data-info>
  384. {{ for(var j=0;j
  385. <it[i].select.length;j++) { }} <label><input class="aui-radio" type="radio" name="{{=it[i].name}}" value="{{=it[i].select[j]}}" onchange="radioFun(this)">{{=it[i].select[j]}}</label>
  386. {{ } }}
  387. </div>
  388. </div>
  389. {{?? it[i].type == 'checkbox'}}
  390. <div class="column">
  391. <label class="column-title">{{=it[i].label}}:</label>
  392. <div class="checkboxName" name={{=it[i].name}} data-info>
  393. {{ for(var j=0;j
  394. <it[i].select.length;j++) { }} <label><input class="aui-checkbox" type="checkbox" name="{{=it[i].name}}" value="{{=it[i].select[j]}}" onchange="checkboxFun(this)">{{=it[i].select[j]}}</label>
  395. {{ } }}
  396. </div>
  397. </div>
  398. {{?? it[i].type == 'textarea'}}
  399. <div class="column">
  400. <label class="column-title">{{=it[i].label}}:</label>
  401. <textarea name="{{=it[i].name}}" rows="8" cols="80" class="column-textarea font-s column-textarea1" placeholder="请输入{{=it[i].label}}"></textarea>
  402. </div>
  403. {{?? it[i].type == 'select'}}
  404. <div class="column">
  405. <label class="column-title">选择:</label>
  406. <div class="aui-list-item-input1">
  407. <select class="input-select font-s input-s" name="{{=it[i].name}}">
  408. <option value="">请选择</option>
  409. {{ for(var j=0;j<it[i].select.length;j++) { }}
  410. <option value="{{=it[i].select[j]}}">{{=it[i].select[j]}}</option>
  411. {{ } }}
  412. </select>
  413. </div>
  414. </div>
  415. {{?? it[i].type == 'images'}}
  416. <div class="column">
  417. <label class="column-title">{{=it[i].label}}:</label>
  418. <div class="aui-row aui-row-padded uploadImg" data-info name="{{=it[i].name}}">
  419. <div class="aui-col-xs-4 imgParent" onclick="actionSheetFun(this, '{{=it[i].name}}')" data-url='{{=it[i].url}}'>
  420. <img src="../../image/upload.png" />
  421. </div>
  422. </div>
  423. </div>
  424. {{?? it[i].type == 'files'}}
  425. <div class="column">
  426. <label class="column-title">{{=it[i].label}}:</label>
  427. <div class="aui-row aui-row-padded fileList" data-info name="{{=it[i].name}}">
  428. <div class="aui-col-xs-4 uploadFiles" onclick="browseFile(this,'{{=it[i].name}}')" data-url='{{=it[i].url}}'>
  429. <img src="../../image/upload.png" />
  430. </div>
  431. </div>
  432. </div>
  433. <!-- <div class="column">
  434. <label class="column-title">{{=it[i].label}}:</label>
  435. </div> -->
  436. {{?}} {{ } }}
  437. </div>
  438. <div class="technologicals" id="technologicals">
  439. </div>
  440. <div class="aui-btn aui-btn-info aui-btn-block" onclick="submitInfo()">
  441. 提交
  442. </div>
  443. <div style="width: 100%; height: 10px;"></div>
  444. </div>
  445. </script>
  446. <script type="text/template" id="templateApply">
  447. <label class="column-title">固定审批流程:(双击可删除已选定的审批人)</label>
  448. <div class="technological-process">
  449. {{ for(var i=0;i < it.length; i++) { }}
  450. <div class="node-content">
  451. <span class="node-name">{{=it[i]}}:</span>
  452. <div class="node-personal" flowName='{{=it[i]}}' jobIDs="">
  453. <i class="aui-iconfont aui-icon-plus addNode-name" onclick="approValPesonal(this)"></i>
  454. </div>
  455. </div>
  456. {{ } }}
  457. </div>
  458. </script>
  459. <!-- 部门人员 -->
  460. <script type="text/template" id="getApproList">
  461. {{ for (var i = 0;i
  462. <it.length;i++) { }} <li class="after-border relative">
  463. <label class="remember-me-label flex-space">
  464. <div class="flex-start">
  465. <img src="" onerror=javascript:this.src="http://jiewei-icon.oss-cn-beijing.aliyuncs.com/icon/default-avatar.png" class="api_leader_head">
  466. <div>
  467. <p class="name font-s">{{=it[i].name}}</p>
  468. <p class="del font-s">{{=it[i].section_fullname}}</p>
  469. </div>
  470. </div>
  471. <div class="remember-password-container">
  472. <div class="remember-password-content">
  473. <input type="checkbox" class='checkbox' onchange="addApproValPesonal(this)" {{=personals.length>0?(it[i].staff_num == personals[i]?'checked':''):''}} value="{{=it[i].staff_num}}" name="{{=it[i].name}}">
  474. <span></span>
  475. </div>
  476. </div>
  477. </label>
  478. </li>
  479. {{ } }}
  480. </script>
  481. <script type="text/javascript" src="../../script/api.js"></script>
  482. <script type="text/javascript" src="../../script/doT.min.js"></script>
  483. <script src="../../script/zepto.js" charset="utf-8"></script>
  484. <script type="text/javascript" src="../../script/config.js"></script>
  485. <script type="text/javascript">
  486. var toast = new auiToast(),
  487. token;
  488. var UIAlbumBrowser;
  489. var i = 0;
  490. var imgarr = [];
  491. var id = "",
  492. addNodeThis = '',
  493. personals = '',
  494. titleName;
  495. var departmentPerson = []
  496. apiready = function() {
  497. var info = $api.getStorage('data');
  498. token = JSON.parse(info).data.access_token;
  499. id = api.pageParam.id;
  500. getApplyDe(api.pageParam.id, token);
  501. UIAlbumBrowser = api.require('UIAlbumBrowser');
  502. };
  503. function getApplyDe(id, token) {
  504. var headers = {
  505. "Authorization": "Bearer " + token
  506. };
  507. $http.fnReuestDataNologing(UrlRouter.getApplyD + id, headers, 'get', '', function(ret, err) {
  508. if (ret.code === 0) {
  509. toast.hide();
  510. $apis.append(column_row, '#template', ret.data.form);
  511. titleName = ret.data.title
  512. $api.append($api.dom('.template_name'), titleName);
  513. $apis.append(technologicals, '#templateApply', ret.data.flow);
  514. }
  515. })
  516. }
  517. // open审核人员
  518. var ruleTop = '';
  519. function approValPesonal(that) {
  520. addNodeThis = that;
  521. $('.api_layout_box').show();
  522. $('.mask').addClass('hidden');
  523. ruleTop = $(addNodeThis).offset().top;
  524. $apis.html(personal_List, '#getApproList', '');
  525. getDep() //调用部门接口
  526. }
  527. // 添加审核人员
  528. function addApproValPesonal(that) {
  529. var personal_name = $(addNodeThis).parent().find('.personal-name');
  530. var name = $api.attr(that, 'name'),
  531. ID = $api.val(that),
  532. IDS = [];
  533. if (that.checked) {
  534. $api.prepend(addNodeThis.parentNode, `<sapn class="personal-name" jobId="${ID}" ondblclick="this.remove()">${name}</span>`);
  535. $(addNodeThis).parent().attr('jobIDs', IDS.push(ID))
  536. } else {
  537. $(addNodeThis).parent().find('[jobid*="' + ID + '"]').remove()
  538. }
  539. }
  540. function closesss() {
  541. $api.css($api.byId('person-name-container'), 'display: none');
  542. $api.css($api.byId('department-list-name'), 'display: block');
  543. // $api.css($api.byId('aui-list-item-input1'), 'display: none');
  544. $('.api_layout_box').hide()
  545. $('.mask').removeClass('hidden')
  546. $("body,html").scrollTop(ruleTop);
  547. }
  548. // 上传图片
  549. var headImg;
  550. function actionSheetFun(el, name) {
  551. api.actionSheet({
  552. title: '选择',
  553. cancelTitle: '取消',
  554. buttons: ['相机', '相册']
  555. }, function(ret, err) {
  556. if (ret.buttonIndex != 3) {
  557. var type = 'camera';
  558. if (ret.buttonIndex == 1) {
  559. type = 'camera';
  560. api.getPicture({
  561. sourceType: type
  562. }, function(ret, err) {
  563. if (ret && ret.data != "") {
  564. uploadHead(el, ret.data, name);
  565. }
  566. });
  567. } else {
  568. type = 'album';
  569. // 支持多图片上传,UIAlbumBrowser模块获取图片路径
  570. changeImageUrl(el, name)
  571. }
  572. }
  573. });
  574. }
  575. // upload img
  576. function uploadHead(el, imgUrl, name) {
  577. var uploadUrl = $api.attr(el, 'data-url');
  578. toast.loading({
  579. title: "上传中",
  580. duration: 2000
  581. });
  582. api.ajax({
  583. url: urlphp + uploadUrl,
  584. method: 'post',
  585. headers: {
  586. "Authorization": "Bearer " + token,
  587. },
  588. data: {
  589. files: {
  590. image: imgUrl
  591. }
  592. }
  593. }, function(ret, err) {
  594. if (ret) {
  595. toast.hide();
  596. if (ret.code === 0) {
  597. var html =
  598. `<div class="aui-col-xs-4 imgParents" data-imgUrl="${ret.data.path}" data-imgName="${ret.data.imageName}" name="${name}">
  599. <i class="delImg aui-iconfont aui-icon-close" onclick="this.parentNode.remove()"></i>
  600. <img src="${ret.data.path}"/>
  601. </div>`;
  602. $api.append(el.parentNode, html);
  603. api.toast({
  604. msg: '上传成功',
  605. duration: 2000,
  606. location: 'top'
  607. });
  608. } else {
  609. api.toast({
  610. msg: '上传失败',
  611. duration: 2000,
  612. location: 'top'
  613. });
  614. }
  615. } else {
  616. toast.hide();
  617. api.toast({
  618. msg: '网络错误',
  619. duration: 2000,
  620. location: 'top'
  621. });
  622. }
  623. });
  624. }
  625. // radio
  626. function radioFun(el) {
  627. var value = el.value;
  628. if (el.checked) {
  629. el.parentNode.parentNode.setAttribute('data-info', value);
  630. }
  631. }
  632. // chexkbox
  633. function checkboxFun(el) {
  634. var value = el.value;
  635. if (el.checked) {
  636. var getAttribute = el.parentNode.parentNode.getAttribute('data-info').split(',');
  637. getAttribute.push(value);
  638. el.parentNode.parentNode.setAttribute('data-info', getAttribute);
  639. } else {
  640. var getAttribute = el.parentNode.parentNode.getAttribute('data-info').split(',');
  641. getAttribute.remove(value);
  642. el.parentNode.parentNode.setAttribute('data-info', getAttribute);
  643. }
  644. }
  645. // 选择图片库路径
  646. function changeImageUrl(el, name) {
  647. UIAlbumBrowser.imagePicker({
  648. max: 9,
  649. styles: {
  650. bg: '#000000',
  651. //cameraImg: 'widget://res/cameraImg.png',
  652. mark: {
  653. position: 'top_right',
  654. size: 20
  655. },
  656. nav: {
  657. bg: '#000000',
  658. cancelColor: '#fff',
  659. cancelSize: 16,
  660. nextStepColor: '#7fff00',
  661. nextStepSize: 16
  662. },
  663. thumbnail: { //(可选项)返回的缩略图配置,**建议本图片不要设置过大** 若已有缩略图,则使用已有的缩略图。若要重新生成缩略图,可先调用清除缓存接口api.clearCache()。
  664. w: 100, //(可选项)数字类型;返回的缩略图的宽;默认:原图的宽度
  665. h: 100 //(可选项)数字类型;返回的缩略图的宽;默认:原图的高度
  666. }
  667. },
  668. animation: true,
  669. }, function(ret) {
  670. if (ret.eventType == 'nextStep') {
  671. if (ret.list && ret.list.length > 0) {
  672. imgarr = ret.list;
  673. UIAlbumBrowser_transPath(el, name);
  674. }
  675. UIAlbumBrowser.closePicker();
  676. }
  677. if (ret.originalPath && ret.originalPath.length > 0) {
  678. uploadHead(el, ret.originalPath, name)
  679. }
  680. });
  681. }
  682. // 转换缩略图路径 ios
  683. function UIAlbumBrowser_transPath(el, name) {
  684. UIAlbumBrowser.transPath({
  685. path: imgarr[i].path
  686. }, function(ret, err) {
  687. if (ret) {
  688. i++;
  689. if (i < imgarr.length) {
  690. UIAlbumBrowser_transPath(el, name);
  691. } else {
  692. i = 0;
  693. }
  694. uploadHead(el, ret.path, name)
  695. }
  696. });
  697. }
  698. // 上传文件
  699. function uploadFile(el, fileUrl, name) {
  700. // console.log(fileUrl);
  701. var uploadUrl = $api.attr(el, 'data-url');
  702. api.ajax({
  703. url: urlphp + uploadUrl,
  704. method: 'post',
  705. headers: {
  706. "Authorization": "Bearer " + token,
  707. },
  708. data: {
  709. files: {
  710. file: fileUrl
  711. }
  712. }
  713. }, function(ret, err) {
  714. if (ret) {
  715. toast.hide();
  716. if (ret.code === 0) {
  717. api.toast({
  718. msg: '上传成功',
  719. duration: 2000,
  720. location: 'top'
  721. });
  722. var fileType = ret.data.fileName.substr(ret.data.fileName.length - 3, 3);
  723. if (
  724. fileType == 'ppt' ||
  725. fileType == 'ptx' ||
  726. fileType == 'lsx' ||
  727. fileType == 'xls' ||
  728. fileType == 'doc' ||
  729. fileType == 'ocx' ||
  730. fileType == 'zip' ||
  731. fileType == 'rar' ||
  732. fileType == 'pdf' ||
  733. fileType == 'jpg' ||
  734. fileType == 'jpeg' ||
  735. fileType == 'png' ||
  736. fileType == 'gif'
  737. ) {
  738. var html =
  739. `<div class="aui-col-xs-4 fileCol" data-fileUrl="${ret.data.path}" data-fileName="${ret.data.fileName}" name="${name}">
  740. <i class="delImg aui-iconfont aui-icon-close" onclick="this.parentNode.remove()"></i>
  741. <img src="../../icon/${ret.data.path.substr(ret.data.path.length-3,3)}.png"/>
  742. <span>${ret.data.fileName}</span>
  743. </div>`;
  744. var getAttribute = el.parentNode.getAttribute('data-info');
  745. var dataInfo = getAttribute + ',,' + JSON.stringify(ret.data)
  746. el.parentNode.setAttribute('data-info', dataInfo);
  747. $api.append(el.parentNode, html);
  748. } else {
  749. api.toast({
  750. msg: '文件格式不对',
  751. duration: 2000,
  752. location: 'top'
  753. });
  754. }
  755. } else {
  756. api.toast({
  757. msg: '上传失败',
  758. duration: 2000,
  759. location: 'top'
  760. });
  761. }
  762. } else {
  763. toast.hide();
  764. api.toast({
  765. msg: '网络错误',
  766. duration: 2000,
  767. location: 'top'
  768. });
  769. }
  770. });
  771. }
  772. // 浏览手机文件夹,获取文件路径
  773. function browseFile(el, name) {
  774. var fileBrowser = api.require('fileBrowser');
  775. fileBrowser.open(function(ret) {
  776. if (ret) {
  777. var type = ret.name.substring(ret.name.lastIndexOf('.'))
  778. if (
  779. type === '.xls' ||
  780. type === '.ppt' ||
  781. type === '.pptx' ||
  782. type === '.xlsx' ||
  783. type === '.doc' ||
  784. type === '.docx' ||
  785. type === '.zip' ||
  786. type === '.rar' ||
  787. type === '.pdf'
  788. ) {
  789. setTimeout(function () {
  790. uploadFile(el, ret.url, name)
  791. },500)
  792. }else {
  793. alert('选择文件格式不正确');
  794. }
  795. }
  796. });
  797. fileBrowser.skin({
  798. skin:1
  799. });
  800. }
  801. // 提交工单信息
  802. function submitInfo() {
  803. var headers = {
  804. "Authorization": "Bearer " + token
  805. };
  806. var inputBoxArray = [],
  807. inputBoxObject = {
  808. id: id,
  809. hadFlow: [],
  810. imgAtlas: [],
  811. fileAtlas: []
  812. },
  813. inputBox = $api.domAll('.inputBox'),
  814. inputSelect = $api.domAll('.input-select'),
  815. checkboxName = document.querySelectorAll('.checkboxName'),
  816. radioName = $api.domAll('.radioName'),
  817. uploadImg = $api.domAll('.uploadImg'),
  818. imgParents = $api.domAll('.imgParents'),
  819. fileCol = $api.domAll('.fileCol'),
  820. fileList = $api.domAll('.fileList'),
  821. columnTextarea = $api.domAll('.column-textarea');
  822. // 文本框
  823. for (var i = 0; i < inputBox.length; i++) {
  824. var key = $api.attr(inputBox[i], 'name'),
  825. value = $api.val(inputBox[i]);
  826. inputBoxObject[key] = value
  827. }
  828. // 文本域
  829. for (var i = 0; i < columnTextarea.length; i++) {
  830. var key = $api.attr(columnTextarea[i], 'name'),
  831. value = $api.val(columnTextarea[i]);
  832. inputBoxObject[key] = value
  833. }
  834. // 下拉选择
  835. for (var j = 0; j < inputSelect.length; j++) {
  836. var key = $api.attr(inputSelect[j], 'name'),
  837. value = $api.val(inputSelect[j]);
  838. inputBoxObject[key] = value;
  839. }
  840. // 单选
  841. for (var k = 0; k < radioName.length; k++) {
  842. var val = $api.attr(radioName[k], 'data-info'),
  843. key = $api.attr(radioName[k], 'name');
  844. inputBoxObject[key] = val;
  845. }
  846. // 多选
  847. for (var t = 0; t < checkboxName.length; t++) {
  848. var value = checkboxName[t].getAttribute('data-info'),
  849. key = checkboxName[t].getAttribute('name');
  850. inputBoxObject[key] = value.split(',').slice(1).join(',');
  851. }
  852. // img集合
  853. var imgAtlas = {},
  854. imgAtlasArray = []
  855. for (var i = 0; i < imgParents.length; i++) {
  856. imgAtlas = {}
  857. var imgUrl = $api.attr(imgParents[i], 'data-imgUrl'),
  858. imgName = $api.attr(imgParents[i], 'data-imgName'),
  859. name = $api.attr(imgParents[i], 'name');
  860. imgAtlas.path = imgUrl
  861. imgAtlas.imageName = imgName
  862. imgAtlas.name = name
  863. imgAtlasArray.push(imgAtlas)
  864. }
  865. //file集合
  866. var fileAtlas = {},
  867. fileAtlasArray = []
  868. for (var i = 0; i < fileCol.length; i++) {
  869. fileAtlas = {}
  870. var fileUrl = $api.attr(fileCol[i], 'data-fileUrl'),
  871. fileName = $api.attr(fileCol[i], 'data-fileName'),
  872. name = $api.attr(fileCol[i], 'name');
  873. fileAtlas.path = fileUrl
  874. fileAtlas.fileName = fileName
  875. fileAtlas.name = name
  876. fileAtlasArray.push(fileAtlas)
  877. }
  878. // 审批人员
  879. var node_personal = $('.node-personal')
  880. var hadFlows = {};
  881. node_personal.each(function(index) {
  882. var hadFlows1 = [];
  883. var personal_names = $(this).find('.personal-name')
  884. var key = $(this).attr('flowName')
  885. for (var i = 0; i < personal_names.length; i++) {
  886. hadFlows1.push($(personal_names[i]).attr('jobId'))
  887. }
  888. hadFlows[key] = hadFlows1.join(',')
  889. });
  890. inputBoxObject.imgAtlas = imgAtlasArray
  891. inputBoxObject.fileAtlas = fileAtlasArray
  892. inputBoxObject.hadFlow = hadFlows
  893. inputBoxArray.push(inputBoxObject)
  894. var hadFlowLength = Object.keys(inputBoxObject.hadFlow).length;
  895. // console.log(JSON.stringify(inputBoxObject));
  896. if (hadFlowLength > 0) {
  897. $http.fnReuestDataJSON(UrlRouter.submitApply, headers, 'post', inputBoxObject, function(ret, err) {
  898. if (ret.code === 0) {
  899. api.toast({
  900. msg: '提交成功',
  901. duration: 2000,
  902. location: 'top'
  903. });
  904. setTimeout(function() {
  905. $event.openWin('myWordeOrder_win', 'myWordeOrder_win', '', '');
  906. }, 100)
  907. } else if (ret.code == 1) {
  908. api.toast({
  909. msg: ret.message,
  910. duration: 2000,
  911. location: 'bottom'
  912. });
  913. toast.hide();
  914. }
  915. })
  916. } else {
  917. api.toast({
  918. msg: '请选择审批人',
  919. duration: 2000,
  920. location: 'top'
  921. });
  922. }
  923. };
  924. // 获取部门
  925. function getDep() {
  926. var headers = {
  927. "Authorization": "Bearer " + token
  928. };
  929. $http.fnReuestDataNologing(UrlRouter.getAlllist, headers, 'get', '', function(ret, err) {
  930. var html = ''
  931. for (var i = 0; i < ret.data.length; i++) {
  932. if (i == 0) {
  933. html += `<option value="0">请选择部门</option>`
  934. }
  935. html += `<option value="${ret.data[i].id}">${ret.data[i].title}</option>`
  936. }
  937. $api.html($api.dom('.column-select'), html)
  938. })
  939. }
  940. // 获取人员列表
  941. function getApproList(id) {
  942. if (id) {
  943. $api.css($api.byId('person-name-container'), 'display: block');
  944. // $api.css($api.byId('department-list-name'), 'display: none');
  945. }
  946. $api.removeCls($api.dom('.loading'), 'hide');
  947. $apis.html(personal_List, '#getApproList', '');
  948. var headers = {
  949. "Authorization": "Bearer " + token
  950. };
  951. $http.fnReuestDataNologing(UrlRouter.getPersonalList, headers, 'post', {
  952. id: id
  953. }, function(ret, err) {
  954. if (ret.code === 0) {
  955. $api.addCls($api.dom('.loading'), 'hide');
  956. $apis.html(personal_List, '#getApproList', ret.data);
  957. departmentPerson = ret.data
  958. }
  959. })
  960. }
  961. // // 搜索部门下的人员姓名
  962. // function searchPersonName(value) {
  963. // let personValue = $api.val($api.byId('person-value'));
  964. // let newDepartMentPerson = departmentPerson.filter(function(item) {
  965. // return item.name.includes(`${personValue}`)
  966. // })
  967. // $apis.html(personal_List, '#getApproList', newDepartMentPerson);
  968. // }
  969. </script>
  970. </html>