pending_late.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>逸管FEP</title>
  7. <link rel="stylesheet" href="{__MOBILE__}/css/base.css">
  8. <link rel="stylesheet" href="{__MOBILE__}/css/pending.css">
  9. <link rel="stylesheet" href="{__MOBILE__}/layui/css/layui.css">
  10. <link rel="stylesheet" href="{__MOBILE__}/layui-v2.8.18-rc.1/layui-v2.8.18-rc.1/layui/css/layui.css">
  11. <style>
  12. .footer_icon1 {
  13. background-image: url('{__MOBILE__}/img/first.png') !important;
  14. }
  15. .footer_icon2 {
  16. background-image: url('{__MOBILE__}/img/second.png') !important;
  17. }
  18. .footer_icon3 {
  19. background-image: url('{__MOBILE__}/img/third-a.png') !important;
  20. }
  21. .footer_icon4 {
  22. background-image: url('{__MOBILE__}/img/forth.png') !important;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <!-- <div class="top">
  28. <span><img src="{__MOBILE__}/img/left.png" alt="" style="width: 5vw;"></span><span>待处理</span><span><img
  29. src="{__MOBILE__}/img/list.png" alt="" style="width: 5vw;"></span>
  30. </div> -->
  31. <div class="pending">
  32. <div class="layui-tab layui-tab-brief">
  33. <ul class="layui-tab-title">
  34. <a href="{:url('mobile/index/pending')}">
  35. <li>待审项目&nbsp;<span class="dot-img">{if $red}<img src="{__MOBILE__}/img/dot.png" alt="" style="width: 1.2vh;">{/if}</span></li>
  36. </a>
  37. {if $unit_type != 1}
  38. <a href="{:url('mobile/index/pending_invite')}">
  39. <li>待审请款&nbsp;<span class="dot-img">{if $red}<img src="{__MOBILE__}/img/dot.png" alt="" style="width: 1.2vh;">{/if}</span></li>
  40. </a>
  41. {/if}
  42. <a href="{:url('mobile/index/pending_advent')}">
  43. <li>临期</li>
  44. </a>
  45. <a href="{:url('mobile/index/pending_late')}">
  46. <li class="layui-this">逾期</li>
  47. </a>
  48. </ul>
  49. <div class="layui-tab-content">
  50. <div class="layui-tab-item">
  51. </div>
  52. <div class="layui-tab-item">
  53. </div>
  54. <div class="layui-tab-item layui-show">
  55. <div class="kan-sreach">
  56. <!-- <div class="layui-form" style="width: 80%;">
  57. <div class="layui-input-wrap">
  58. <input type="text" lay-affix="search" lay-filter="search" lay-options="{split: true}"
  59. placeholder="搜索…" class="layui-input">
  60. </div>
  61. </div> -->
  62. <form id="taskForm" class="layui-form" lay-filter="barsearchform">
  63. <div class="layui-input-wrap" style="display: flex;">
  64. <input type="text" name="keyword" lay-filter="search" placeholder="搜索…"
  65. class="layui-input">
  66. <span><button type="button" lay-submit lay-filter="webform"><img
  67. src="{__MOBILE__}/img/search.png" alt=""
  68. style="height: 5vw;"></button></span>
  69. </div>
  70. </form>
  71. <!--<div class="kan-sift"><span id="btn">筛选</span><span><img src="{__MOBILE__}/img/sift.png"-->
  72. <!-- alt=""></span></div>-->
  73. </div>
  74. <div style="margin-bottom: 18vw;">
  75. {volist name="late_list" id="vo"}
  76. <div class="pending-item">
  77. <div class="pending-top">
  78. <span style="font-size: 4vw;"><b>{$vo.project_name}</b></span>
  79. <a href='{:url("mobile/index/pdetail")}?id={$vo.id}'>
  80. <span style="display: flex;align-items: center;font-size: 3.5vw;color: #187FDD;">
  81. <span style="width: 15vw;"><b>查看详情</b></span>
  82. <span><img src="{__MOBILE__}/img/right2.png" alt=""
  83. style="width: 4vw;height: 3.5vw;"></span>
  84. </span>
  85. </a>
  86. </div>
  87. <div class="pending-content">项目编号:{$vo.project_num}</div>
  88. <div class="pending-content content">
  89. <span>项目状态:
  90. {switch $vo.project_status}
  91. {case 1}立项中{/case}
  92. {case 2}审批中{/case}
  93. {case 3}待接收{/case}
  94. {case 4}待分配{/case}
  95. {case 5}作业中{/case}
  96. {case 6}归档中{/case}
  97. {case 7}退审中{/case}
  98. {case 8}已归档{/case}
  99. {case 9}已退审{/case}
  100. {default /}未知
  101. {/switch}
  102. </span>
  103. <span class="pending-advent">
  104. <span>逾期时间:</span>
  105. <span style="color: rgb(250, 71, 71);"><b>{$vo.advent_time}</b></span>
  106. </span>
  107. </div>
  108. <div class="pending-content content">
  109. <span>项目负责人:{$vo.review_head_name}</span><span>作业负责人:{$vo.operate_head_name}</span>
  110. </div>
  111. <div class="pending-content"
  112. style="display: flex;justify-content: space-between;align-items: center;">
  113. <span style="color: darkgray;"><b>{$vo.review_unit_name}</b></span>
  114. </div>
  115. </div>
  116. {/volist}
  117. </div>
  118. </div>
  119. <div>
  120. <!-- <div>
  121. 页面里的内容 <button id="btn">展示弹窗</button>
  122. </div> -->
  123. <div class="mask" id="mask"></div>
  124. <div class="dialog" id="dialog">
  125. <div class="sift">
  126. <div class="sift-top" style="margin-bottom: 2vw;">
  127. <b>项目状态</b>
  128. </div>
  129. <form class="layui-form" action="">
  130. <div class="layui-form-item">
  131. <div class="layui-input-block">
  132. <input type="radio" name="project_status" value="2" title="审批中" class="sift-state">
  133. <input type="radio" name="project_status" value="3" title="待接收" class="sift-state">
  134. <input type="radio" name="project_status" value="4" title="分配中" class="sift-state">
  135. <input type="radio" name="project_status" value="5" title="作业中" class="sift-state">
  136. <input type="radio" name="project_status" value="6" title="归档中" class="sift-state">
  137. <input type="radio" name="project_status" value="7" title="退审中" class="sift-state">
  138. <input type="radio" name="project_status" value="8" title="已归档" class="sift-state">
  139. <input type="radio" name="project_status" value="9" title="已退审" class="sift-state">
  140. </div>
  141. <!--<div class="sift-top">-->
  142. <!-- <b>相关区域</b>-->
  143. <!--</div>-->
  144. </div>
  145. <!--<div class="layui-form-item">-->
  146. <!-- <div class="layui-input-inline">-->
  147. <!-- <select name="province">-->
  148. <!-- <option value=""selected>请选择省</option>-->
  149. <!-- <option value="浙江" >浙江省</option>-->
  150. <!-- <option value="你的工号">江西省</option>-->
  151. <!-- <option value="你最喜欢的老师">福建省</option>-->
  152. <!-- </select>-->
  153. <!-- </div>-->
  154. <!-- <div class="layui-input-inline">-->
  155. <!-- <select name="city">-->
  156. <!-- <option value="">请选择市</option>-->
  157. <!-- <option value="杭州">杭州</option>-->
  158. <!-- <option value="宁波" disabled>宁波</option>-->
  159. <!-- <option value="温州">温州</option>-->
  160. <!-- <option value="温州">台州</option>-->
  161. <!-- <option value="温州">绍兴</option>-->
  162. <!-- </select>-->
  163. <!-- </div>-->
  164. <!-- <div class="layui-input-inline">-->
  165. <!-- <select name="area">-->
  166. <!-- <option value="">请选择县/区</option>-->
  167. <!-- <option value="西湖区">西湖区</option>-->
  168. <!-- <option value="余杭区">余杭区</option>-->
  169. <!-- <option value="拱墅区">临安市</option>-->
  170. <!-- </select>-->
  171. <!-- </div>-->
  172. <!-- <div class="layui-form-mid layui-text-em">
  173. <i class="layui-icon layui-icon-tips" lay-tips="{
  174. content: '此处只是演示联动排版,并未做联动交互',
  175. margin: '0 0 0 -10px'
  176. } "></i>
  177. </div> -->
  178. <!--</div>-->
  179. <!--<div class="layui-form-item">-->
  180. <!-- <div class="sift-top">-->
  181. <!-- <b>日期范围</b>-->
  182. <!-- </div>-->
  183. <!-- <div class="layui-inline" id="ID-laydate-rangeLinked"-->
  184. <!-- style="display: flex;align-items: center;">-->
  185. <!-- <div class="layui-input-inline">-->
  186. <!-- <input type="text" autocomplete="off" id="ID-laydate-start-date-1" style="margin: 0;padding: 0;text-align: center;"-->
  187. <!-- class="layui-input" placeholder="开始日期" id="datePicker" name="project_start_time">-->
  188. <!-- </div>-->
  189. <!-- <div class="layui-form-mid">-</div>-->
  190. <!-- <div class="layui-input-inline">-->
  191. <!-- <input type="text" autocomplete="off" id="ID-laydate-end-date-1" class="layui-input" style="margin: 0;padding: 0;text-align: center;"-->
  192. <!-- placeholder="结束日期" id="datePicker1" name="project_end_time">-->
  193. <!-- </div>-->
  194. <!-- </div>-->
  195. <!--</div>-->
  196. <div class="layui-form-item">
  197. <div class="sift-bottom">
  198. <div class="layui-input-block">
  199. <button type="button" class="layui-btn" lay-submit lay-filter="demo1"
  200. style="padding: 0;">立即提交</button>
  201. <!-- <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
  202. </div>
  203. </div>
  204. </div>
  205. </form>
  206. </div>
  207. </div>
  208. </div>
  209. </div>
  210. </div>
  211. </div>
  212. <div class="footer">
  213. <div class="footer_ge">
  214. <a href="{:url('mobile/index/main')}" title="首页">
  215. <div class="footer_icon footer_icon1"></div>
  216. 首页
  217. </a>
  218. </div>
  219. <div class="footer_ge">
  220. <a href="{:url('mobile/index/kan_list')}" title="看板">
  221. <div class="dot">
  222. <div>
  223. <div class="footer_icon footer_icon2"></div>
  224. <div>看板</div>
  225. </div>
  226. <div class="dot-img">
  227. {if $red_kan} <img src="{__MOBILE__}/img/dot.png" alt="" style="width: 1.2vh;"> {/if}
  228. </div>
  229. </div>
  230. </a>
  231. </div>
  232. <div class="footer_ge">
  233. <a href="{:url('mobile/index/pending')}" title="待处理" style="color: #187FDD;">
  234. <div class="dot">
  235. <div>
  236. <div class="footer_icon footer_icon3"></div>
  237. <div>待处理</div>
  238. </div>
  239. <div class="dot-img">
  240. {if $red} <img src="{__MOBILE__}/img/dot.png" alt="" style="width: 1.2vh;margin-left: -4.5vw;">{/if}
  241. </div>
  242. </div>
  243. </a>
  244. </div>
  245. <div class="footer_ge">
  246. <a href="{:url('mobile/index/person')}" title="我的">
  247. <div class="footer_icon footer_icon4"></div>
  248. 我的
  249. </a>
  250. </div>
  251. </div>
  252. <script src="{__MOBILE__}/layui-v2.8.18-rc.1/layui-v2.8.18-rc.1/layui/layui.js"></script>
  253. <script>
  254. layui.use(function () {
  255. var form = layui.form;
  256. form.on('submit(webform)', function (data) {
  257. console.log(data.field);
  258. const host = window.location.host;
  259. window.location.href = 'http://' + host + '/mobile/index/pending_late?keyword=' + data.field['keyword'];
  260. return false;
  261. });
  262. })
  263. </script>
  264. <script>
  265. layui.use(function () {
  266. var form = layui.form;
  267. // 输入框点缀事件 - 位置示例
  268. form.on('input-affix(location)', function (data) {
  269. var elem = data.elem; // 输入框
  270. // do something
  271. layer.msg('模拟获取位置中…', { icon: 16, time: 1.5 * 1000 }, function () {
  272. elem.value = '浙江杭州'; // 向输入框赋值
  273. })
  274. });
  275. // 输入框点缀事件 - 搜索示例
  276. form.on('input-affix(search)', function (data) {
  277. var elem = data.elem; // 输入框
  278. var value = elem.value; // 输入框的值
  279. if (!value) {
  280. layer.msg('请输入搜索内容');
  281. return elem.focus()
  282. };
  283. // 模拟搜索跳转
  284. location.href = '?keywords=' + value + '&_' + new Date().getTime() + '#affix-custom';
  285. });
  286. });
  287. </script>
  288. <script>
  289. /*const btn = document.getElementById('btn');
  290. console.log(btn);
  291. const mask = document.getElementById('mask');
  292. const dialog = document.getElementById('dialog');
  293. btn.addEventListener('click', () => {
  294. mask.classList.add('show');
  295. dialog.classList.add('show');
  296. });
  297. mask.addEventListener('click', () => {
  298. mask.classList.remove('show');
  299. dialog.classList.remove('show');
  300. });*/
  301. </script>
  302. <script>
  303. layui.use(function () {
  304. var laydate = layui.laydate;
  305. // 日期范围 - 左右面板联动选择模式
  306. laydate.render({
  307. elem: '#ID-laydate-rangeLinked',
  308. range: ['#ID-laydate-start-date-1', '#ID-laydate-end-date-1'],
  309. rangeLinked: true // 开启日期范围选择时的区间联动标注模式 --- 2.8+ 新增
  310. });
  311. });
  312. </script>
  313. <script>
  314. layui.use(['form', 'laydate', 'util'], function () {
  315. var form = layui.form;
  316. var layer = layui.layer;
  317. var laydate = layui.laydate;
  318. var util = layui.util;
  319. // 自定义验证规则
  320. form.verify({
  321. pass: function (value) {
  322. if (!/(.+){6,12}$/.test(value)) {
  323. return '密码必须 6 到 12 位';
  324. }
  325. }
  326. });
  327. // 指定开关事件
  328. form.on('switch(switchTest)', function (data) {
  329. layer.msg('开关 checked:' + (this.checked ? 'true' : 'false'), {
  330. offset: '6px'
  331. });
  332. layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅仅是 ON|OFF', data.othis)
  333. });
  334. //buttom
  335. form.on('button', function (data) {
  336. console.log(data.field);
  337. });
  338. // 提交事件
  339. form.on('submit(demo1)', function (data) {
  340. var field = data.field; // 获取表单字段值
  341. // 显示填写结果,仅作演示用
  342. // console.log(field);
  343. const host = window.location.host;
  344. window.location.href = 'http://' + host + '/mobile/index/pending_late?project_status=' + data.field['project_status']+'&province=' + data.field['province']+'&city=' + data.field['city']+'&area=' + data.field['area']+'&project_start_time=' + data.field['project_start_time']+'&project_end_time=' + data.field['project_end_time'];
  345. return false; // 阻止默认 form 跳转
  346. });
  347. // 日期
  348. laydate.render({
  349. elem: '#date'
  350. });
  351. // 普通事件
  352. util.on('lay-on', {
  353. // 获取验证码
  354. "get-vercode": function (othis) {
  355. var isvalid = form.validate('.demo-phone'); // 主动触发验证,v2.7.0 新增
  356. // 验证通过
  357. if (isvalid) {
  358. layer.msg('手机号规则验证通过');
  359. // 此处可继续书写「发送验证码」等后续逻辑
  360. // …
  361. }
  362. }
  363. });
  364. });
  365. </script>
  366. </body>
  367. </html>