changefillword.html 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005
  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. var uploadUrl = $api.attr(el, 'data-url');
  701. api.ajax({
  702. url: urlphp + uploadUrl,
  703. method: 'post',
  704. headers: {
  705. "Authorization": "Bearer " + token,
  706. },
  707. data: {
  708. files: {
  709. file: fileUrl
  710. }
  711. }
  712. }, function(ret, err) {
  713. if (ret) {
  714. toast.hide();
  715. if (ret.code === 0) {
  716. api.toast({
  717. msg: '上传成功',
  718. duration: 2000,
  719. location: 'top'
  720. });
  721. var fileType = ret.data.fileName.substr(ret.data.fileName.length - 3, 3);
  722. if (
  723. fileType == 'ppt' ||
  724. fileType == 'ptx' ||
  725. fileType == 'lsx' ||
  726. fileType == 'xls' ||
  727. fileType == 'doc' ||
  728. fileType == 'ocx' ||
  729. fileType == 'zip' ||
  730. fileType == 'rar' ||
  731. fileType == 'pdf' ||
  732. fileType == 'jpg' ||
  733. fileType == 'jpeg' ||
  734. fileType == 'png' ||
  735. fileType == 'gif'
  736. ) {
  737. var html =
  738. `<div class="aui-col-xs-4 fileCol" data-fileUrl="${ret.data.path}" data-fileName="${ret.data.fileName}" name="${name}">
  739. <i class="delImg aui-iconfont aui-icon-close" onclick="this.parentNode.remove()"></i>
  740. <img src="../../icon/${ret.data.path.substr(ret.data.path.length-3,3)}.png"/>
  741. <span>${ret.data.fileName}</span>
  742. </div>`;
  743. var getAttribute = el.parentNode.getAttribute('data-info');
  744. var dataInfo = getAttribute + ',,' + JSON.stringify(ret.data)
  745. el.parentNode.setAttribute('data-info', dataInfo);
  746. $api.append(el.parentNode, html);
  747. } else {
  748. api.toast({
  749. msg: '文件格式不对',
  750. duration: 2000,
  751. location: 'top'
  752. });
  753. }
  754. } else {
  755. api.toast({
  756. msg: '上传失败',
  757. duration: 2000,
  758. location: 'top'
  759. });
  760. }
  761. } else {
  762. toast.hide();
  763. api.toast({
  764. msg: '网络错误',
  765. duration: 2000,
  766. location: 'top'
  767. });
  768. }
  769. });
  770. }
  771. // 浏览手机文件夹,获取文件路径
  772. function browseFile(el, name) {
  773. var selectFile = api.require('selectFile');
  774. selectFile.open(function(ret, err) {
  775. if (ret.status) {
  776. uploadFile(el, ret.path, name)
  777. } else {
  778. alert('选择文件不存在');
  779. }
  780. });
  781. }
  782. // 提交工单信息
  783. function submitInfo() {
  784. var headers = {
  785. "Authorization": "Bearer " + token
  786. };
  787. var inputBoxArray = [],
  788. inputBoxObject = {
  789. id: id,
  790. hadFlow: [],
  791. imgAtlas: [],
  792. fileAtlas: []
  793. },
  794. inputBox = $api.domAll('.inputBox'),
  795. inputSelect = $api.domAll('.input-select'),
  796. checkboxName = document.querySelectorAll('.checkboxName'),
  797. radioName = $api.domAll('.radioName'),
  798. uploadImg = $api.domAll('.uploadImg'),
  799. imgParents = $api.domAll('.imgParents'),
  800. fileCol = $api.domAll('.fileCol'),
  801. fileList = $api.domAll('.fileList'),
  802. columnTextarea = $api.domAll('.column-textarea');
  803. // 文本框
  804. for (var i = 0; i < inputBox.length; i++) {
  805. var key = $api.attr(inputBox[i], 'name'),
  806. value = $api.val(inputBox[i]);
  807. inputBoxObject[key] = value
  808. }
  809. // 文本域
  810. for (var i = 0; i < columnTextarea.length; i++) {
  811. var key = $api.attr(columnTextarea[i], 'name'),
  812. value = $api.val(columnTextarea[i]);
  813. inputBoxObject[key] = value
  814. }
  815. // 下拉选择
  816. for (var j = 0; j < inputSelect.length; j++) {
  817. var key = $api.attr(inputSelect[j], 'name'),
  818. value = $api.val(inputSelect[j]);
  819. inputBoxObject[key] = value;
  820. }
  821. // 单选
  822. for (var k = 0; k < radioName.length; k++) {
  823. var val = $api.attr(radioName[k], 'data-info'),
  824. key = $api.attr(radioName[k], 'name');
  825. inputBoxObject[key] = val;
  826. }
  827. // 多选
  828. for (var t = 0; t < checkboxName.length; t++) {
  829. var value = checkboxName[t].getAttribute('data-info'),
  830. key = checkboxName[t].getAttribute('name');
  831. inputBoxObject[key] = value.split(',').slice(1).join(',');
  832. }
  833. // img集合
  834. var imgAtlas = {},
  835. imgAtlasArray = []
  836. for (var i = 0; i < imgParents.length; i++) {
  837. imgAtlas = {}
  838. var imgUrl = $api.attr(imgParents[i], 'data-imgUrl'),
  839. imgName = $api.attr(imgParents[i], 'data-imgName'),
  840. name = $api.attr(imgParents[i], 'name');
  841. imgAtlas.path = imgUrl
  842. imgAtlas.imageName = imgName
  843. imgAtlas.name = name
  844. imgAtlasArray.push(imgAtlas)
  845. }
  846. //file集合
  847. var fileAtlas = {},
  848. fileAtlasArray = []
  849. for (var i = 0; i < fileCol.length; i++) {
  850. fileAtlas = {}
  851. var fileUrl = $api.attr(fileCol[i], 'data-fileUrl'),
  852. fileName = $api.attr(fileCol[i], 'data-fileName'),
  853. name = $api.attr(fileCol[i], 'name');
  854. fileAtlas.path = fileUrl
  855. fileAtlas.fileName = fileName
  856. fileAtlas.name = name
  857. fileAtlasArray.push(fileAtlas)
  858. }
  859. // 审批人员
  860. var node_personal = $('.node-personal')
  861. var hadFlows = {};
  862. node_personal.each(function(index) {
  863. var hadFlows1 = [];
  864. var personal_names = $(this).find('.personal-name')
  865. var key = $(this).attr('flowName')
  866. for (var i = 0; i < personal_names.length; i++) {
  867. hadFlows1.push($(personal_names[i]).attr('jobId'))
  868. }
  869. hadFlows[key] = hadFlows1.join(',')
  870. });
  871. inputBoxObject.imgAtlas = imgAtlasArray
  872. inputBoxObject.fileAtlas = fileAtlasArray
  873. inputBoxObject.hadFlow = hadFlows
  874. inputBoxArray.push(inputBoxObject)
  875. var hadFlowLength = Object.keys(inputBoxObject.hadFlow).length;
  876. // console.log(JSON.stringify(inputBoxObject));
  877. if (hadFlowLength > 0) {
  878. $http.fnReuestDataJSON(UrlRouter.submitApply, headers, 'post', inputBoxObject, function(ret, err) {
  879. if (ret.code === 0) {
  880. api.toast({
  881. msg: '提交成功',
  882. duration: 2000,
  883. location: 'top'
  884. });
  885. setTimeout(function() {
  886. $event.openWin('myWordeOrder_win', 'myWordeOrder_win', '', '');
  887. }, 100)
  888. } else if (ret.code == 1) {
  889. api.toast({
  890. msg: ret.message,
  891. duration: 2000,
  892. location: 'bottom'
  893. });
  894. toast.hide();
  895. }
  896. })
  897. } else {
  898. api.toast({
  899. msg: '请选择审批人',
  900. duration: 2000,
  901. location: 'top'
  902. });
  903. }
  904. };
  905. // 获取部门
  906. function getDep() {
  907. var headers = {
  908. "Authorization": "Bearer " + token
  909. };
  910. $http.fnReuestDataNologing(UrlRouter.getAlllist, headers, 'get', '', function(ret, err) {
  911. var html = ''
  912. for (var i = 0; i < ret.data.length; i++) {
  913. if (i == 0) {
  914. html += `<option value="0">请选择部门</option>`
  915. }
  916. html += `<option value="${ret.data[i].id}">${ret.data[i].title}</option>`
  917. }
  918. $api.html($api.dom('.column-select'), html)
  919. })
  920. }
  921. // 获取人员列表
  922. function getApproList(id) {
  923. if (id) {
  924. $api.css($api.byId('person-name-container'), 'display: block');
  925. // $api.css($api.byId('department-list-name'), 'display: none');
  926. }
  927. $api.removeCls($api.dom('.loading'), 'hide');
  928. $apis.html(personal_List, '#getApproList', '');
  929. var headers = {
  930. "Authorization": "Bearer " + token
  931. };
  932. $http.fnReuestDataNologing(UrlRouter.getPersonalList, headers, 'post', {
  933. id: id
  934. }, function(ret, err) {
  935. if (ret.code === 0) {
  936. $api.addCls($api.dom('.loading'), 'hide');
  937. $apis.html(personal_List, '#getApproList', ret.data);
  938. departmentPerson = ret.data
  939. }
  940. })
  941. }
  942. // // 搜索部门下的人员姓名
  943. // function searchPersonName(value) {
  944. // let personValue = $api.val($api.byId('person-value'));
  945. // let newDepartMentPerson = departmentPerson.filter(function(item) {
  946. // return item.name.includes(`${personValue}`)
  947. // })
  948. // $apis.html(personal_List, '#getApproList', newDepartMentPerson);
  949. // }
  950. </script>
  951. </html>