pending_advent.html 19 KB

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