maintainPlan-shortcut.jsp 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502
  1. <%@ taglib prefix="t" uri="/easyui-tags" %>
  2. <%@ page language="java" contentType="text/html; charset=UTF-8"
  3. pageEncoding="UTF-8"%>
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <title>常用快速日期设置</title>
  8. <t:base type="DatePicker"></t:base>
  9. <link href="plug-in/cron/themes/bootstrap/easyui.min.css" rel="stylesheet" type="text/css" />
  10. <link href="plug-in/cron/themes/icon.css" rel="stylesheet" type="text/css" />
  11. <link href="plug-in/cron/icon.css" rel="stylesheet" type="text/css" />
  12. <link href="plug-in/lhgDialog/skins/metrole.css" rel="stylesheet" type="text/css"/>
  13. <script src="plug-in/cron/jquery-1.6.2.min.js" type="text/javascript"></script>
  14. <script src="plug-in/cron/jquery.easyui.min.js" type="text/javascript"></script>
  15. <script src="plug-in/cron/cron.js" type="text/javascript"></script>
  16. <style type="text/css">
  17. .line
  18. {
  19. height: 35px;
  20. line-height: 25px;
  21. margin: 3px;
  22. }
  23. .imp
  24. {
  25. padding-left: 25px;
  26. }
  27. .col
  28. {
  29. width: 95px;
  30. }
  31. ul {
  32. list-style:none;
  33. padding-left:10px;
  34. }
  35. li {
  36. height:30px;
  37. }
  38. .multiline
  39. {
  40. height: 185px;
  41. line-height: 25px;
  42. margin: 3px;
  43. }
  44. </style>
  45. </head>
  46. <body>
  47. <center>
  48. <div class="easyui-layout" style="width:880px;height:560px; border: 1px rgb(202, 196, 196) solid;
  49. border-radius: 5px;">
  50. <div style="height: 100%;">
  51. <input id="firsttime" type="hidden" value="${firsttime}"/>
  52. <input id="lasttime" type="hidden" value="${lasttime}"/>
  53. <div class="easyui-tabs" data-options="fit:true,border:false">
  54. <div title="常用快速日期设置" style="font-size: 12px;font-weight: 400;color: #333333;">
  55. <div class="line">
  56. <input type="radio" name="second" checked="checked" onclick="onWeek(this)" value="week">
  57. 每月第
  58. <input class="numberspinner" style="width: 60px;" data-options="min:1,max:4" value="1"
  59. id="monthlyweek">
  60. 周</div>
  61. <div class="line">
  62. <input type="radio" name="second" onclick="onHalfmonth(this)" value="halfmonth">
  63. 每月:
  64. <input type="radio" name="monthlyhalf" disabled="disabled" checked="checked" value="0">
  65. 上半月
  66. <input type="radio" name="monthlyhalf" disabled="disabled" value="1">
  67. 下半月 </div>
  68. <div class="line">
  69. <input type="radio" name="second" onclick="onDay(this)" value="day">
  70. 每月从
  71. <input class="numberspinner" style="width: 60px;" data-options="min:1,max:31" value="1"
  72. id="monthlyStart">
  73. 日 -
  74. <input class="numberspinner" style="width: 60px;" data-options="min:2,max:31" value="2"
  75. id="monthlyEnd">
  76. 日</div>
  77. <div class="line">
  78. <input type="radio" name="second" onclick="onMultiMonth(this)" id="sencond_appoint" value="multimonth">
  79. 指定月份
  80. </div>
  81. <div class="multiline" id="multilinediv">
  82. <fieldset id="fieldset" style="border-radius: 3px; height: 155px;background-color: #F2F2F2;">
  83. <legend>指定月份设置</legend>
  84. <div class="imp secondList">
  85. <input type="checkbox" value="0" disabled="disabled" id="m1">一月
  86. <input type="checkbox" value="1" disabled="disabled" id="m2">二月
  87. <input type="checkbox" value="2" disabled="disabled" id="m3">三月
  88. <input type="checkbox" value="3" disabled="disabled" id="m4">四月
  89. <input type="checkbox" value="4" disabled="disabled" id="m5">五月
  90. <input type="checkbox" value="5" disabled="disabled" id="m6">六月
  91. <input type="checkbox" value="6" disabled="disabled" id="m7">七月
  92. <input type="checkbox" value="7" disabled="disabled" id="m8">八月
  93. <input type="checkbox" value="8" disabled="disabled" id="m9">九月
  94. <input type="checkbox" value="9" disabled="disabled" id="m10">十月
  95. <input type="checkbox" value="10" disabled="disabled" id="m11">十一月
  96. <input type="checkbox" value="11" disabled="disabled" id="m12">十二月
  97. </div>
  98. <div class="line">
  99. <input type="radio" name="checkmultimonth" checked="checked" onclick="onMultiMonthWeek(this)" disabled="disabled" value="week">
  100. <input class="numberspinner" style="width: 60px;" data-options="min:1,max:4" value="1"
  101. id="multiMonthWeek">
  102. 周</div>
  103. <div class="line">
  104. <input type="radio" name="checkmultimonth" onclick="onMultiMonthHalfmonth(this)" disabled="disabled" value="halfmonth">
  105. 每月:
  106. <input type="radio" name="mutimonthhalf" checked="checked" value="0" disabled="disabled">
  107. 上半月
  108. <input type="radio" name="mutimonthhalf" value="1" disabled="disabled">
  109. 下半月 </div>
  110. <div class="line">
  111. <input type="radio" name="checkmultimonth" onclick="onMultiMonthDay(this)" disabled="disabled" value="day">
  112. <input class="numberspinner" style="width: 60px;" data-options="min:1,max:31" value="1"
  113. id="multiMonthStart">
  114. 日 -
  115. <input class="numberspinner" style="width: 60px;" data-options="min:2,max:31" value="2"
  116. id="multiMonthEnd">
  117. 日</div>
  118. </fieldset>
  119. </div>
  120. <div class="line">
  121. <input type="radio" name="second" onclick="onMultiDay(this)" value="multiDay">
  122. 指定日期
  123. <fieldset id="fieldsetDay" style="border-radius: 3px; background-color: #F2F2F2;">
  124. <legend>指定日期设置</legend>
  125. <span id="multiDaySpan"></span>
  126. <input type="button" value="+" class="ui_state_highlight" disabled="disabled" style="font-weight:bold" onclick="addMultiDay()">
  127. </fieldset>
  128. </div>
  129. </div>
  130. </div>
  131. </div>
  132. <div>
  133. </div>
  134. </div>
  135. </center>
  136. <script type="text/javascript">
  137. function getDate() {
  138. var checkType = $("input[type='radio'][name='second']:checked").val();
  139. console.log("checkType:" + checkType);
  140. var datelist = {} ;
  141. if(checkType == 'week'){//计算第几周:从每月第一天算起,每七天为一周
  142. datelist = getweek($('#firsttime').val(),$('#lasttime').val(),$('#monthlyweek').val());
  143. }else if(checkType == 'halfmonth'){//1 ~ 15日为上半月,15 ~ 最后一天为下半月
  144. var half = $("input[type='radio'][name='monthlyhalf']:checked").val();
  145. datelist = gethalfmonth($('#firsttime').val(),$('#lasttime').val(),half);
  146. }else if(checkType == 'day'){//如果日期超过本月最后一天 ,即为最后一天
  147. datelist = getday($('#firsttime').val(),$('#lasttime').val(),$('#monthlyStart').val(),$('#monthlyEnd').val()) ;
  148. }else if(checkType == 'multimonth'){
  149. datelist = getMultiMonthDate();
  150. }else if(checkType=='multiDay'){
  151. datelist = [];
  152. $('#multiDaySpan input').each(function(){
  153. var $t = $(this);
  154. var v=$t.val();
  155. if(v){
  156. datelist.push({"stime":v,"etime":v});
  157. }
  158. });
  159. }
  160. console.log("datelist:" + JSON.stringify(datelist));
  161. return JSON.stringify(datelist);
  162. }
  163. function getweek(startdate,enddate,weeknum,checkmonths){
  164. startdate = new Date(startdate);
  165. enddate = new Date(enddate);
  166. var arrayJson = [];
  167. //设置不超过120个月
  168. for(var i = 0;i<120;i++){
  169. var caldate ;
  170. if(i == 0)
  171. caldate = startdate;
  172. else {
  173. caldate = DateAdd("m", 1, startdate);
  174. caldate.setDate(1);
  175. }
  176. var retstart = new Date(caldate.getFullYear(),caldate.getMonth(),(weeknum-1)*7+1);
  177. var retend = new Date(caldate.getFullYear(),caldate.getMonth(),(weeknum-1)*7+7);
  178. if(retstart > enddate){
  179. break;
  180. }
  181. if(checkmonths && checkmonths.indexOf(retstart.getMonth()+',') == -1){
  182. continue;
  183. }
  184. if(retstart < startdate){
  185. retstart = startdate;
  186. }
  187. if(retend < startdate){
  188. continue;
  189. }
  190. if(retend > enddate){
  191. retend = enddate;
  192. }
  193. arrayJson.push({"stime":formateDate(retstart),"etime":formateDate(retend)});
  194. }
  195. return arrayJson;
  196. }
  197. function gethalfmonth(startdate,enddate,halfflag,checkmonths){
  198. startdate = new Date(startdate);
  199. enddate = new Date(enddate);
  200. var arrayJson = [];
  201. //设置不超过120个月
  202. for(var i = 0;i<120;i++){
  203. var caldate ;
  204. if(i == 0)
  205. caldate = startdate;
  206. else {
  207. caldate = DateAdd("m", 1, startdate);
  208. caldate.setDate(1);
  209. }
  210. var retstart = new Date(caldate.getFullYear(),caldate.getMonth(),halfflag == "0" ? 1 : 16);
  211. var endMonth =caldate.getMonth();
  212. if(halfflag == "1"){
  213. endMonth+=1;
  214. }
  215. var retend = new Date(caldate.getFullYear(),endMonth,halfflag == "0" ? 15 : 0);//0表示本月最后一天
  216. if(retstart > enddate){
  217. break;
  218. }
  219. if(checkmonths && checkmonths.indexOf(retstart.getMonth()+',') == -1){
  220. continue;
  221. }
  222. if(retstart < startdate){
  223. retstart = startdate;
  224. }
  225. if(retend < startdate){
  226. continue;
  227. }
  228. if(retend > enddate){
  229. retend = enddate;
  230. }
  231. arrayJson.push({"stime":formateDate(retstart),"etime":formateDate(retend)});
  232. }
  233. return arrayJson;
  234. }
  235. function getday(startdate,enddate,monthlydaystart,monthlydayend,checkmonths){
  236. startdate = new Date(startdate);
  237. enddate = new Date(enddate);
  238. var arrayJson = [];
  239. //设置不超过120个月
  240. for(var i = 0;i<120;i++){
  241. var caldate ;
  242. if(i == 0)
  243. caldate = startdate;
  244. else {
  245. caldate = DateAdd("m", 1, startdate);
  246. caldate.setDate(1);
  247. }
  248. var curMonthLastday = new Date(caldate.getFullYear(),caldate.getMonth(),0);
  249. if (curMonthLastday.getDate() < monthlydaystart){
  250. monthlydaystart = curMonthLastday.getDate();
  251. }
  252. if (curMonthLastday.getDate() < monthlydayend){
  253. monthlydayend = curMonthLastday.getDate();
  254. }
  255. var retstart = new Date(caldate.getFullYear(),caldate.getMonth(),monthlydaystart);
  256. var retend = new Date(caldate.getFullYear(),caldate.getMonth(),monthlydayend);
  257. if(retstart > enddate){
  258. break;
  259. }
  260. if(checkmonths && checkmonths.indexOf(retstart.getMonth()+',') == -1){
  261. continue;
  262. }
  263. if(retstart < startdate){
  264. retstart = startdate;
  265. }
  266. if(retend < startdate){
  267. continue;
  268. }
  269. if(retend > enddate){
  270. retend = enddate;
  271. }
  272. arrayJson.push({"stime":formateDate(retstart),"etime":formateDate(retend)});
  273. }
  274. return arrayJson;
  275. }
  276. function getMultiMonthDate(){
  277. var checkedList = $("input[type='checkbox']:checked");
  278. var checknums = '';
  279. for(var k = 0;k < checkedList.length;k++){
  280. if(checkedList[k].checked){
  281. checknums += (checkedList[k].value + ',');
  282. }
  283. }
  284. var checkType = $("input[type='radio'][name='checkmultimonth']:checked").val();
  285. console.log("multyMonthcheckType:" + checkType);
  286. var datelist ;
  287. if(checkType == 'week'){//计算第几周:从每月第一天算起,每七天为一周
  288. datelist = getweek($('#firsttime').val(),$('#lasttime').val(),$('#multiMonthWeek').val(),checknums);
  289. }else if(checkType == 'halfmonth'){//1 ~ 15日为上半月,15 ~ 最后一天为下半月
  290. var half = $("input[type='radio'][name='mutimonthhalf']:checked").val();
  291. datelist = gethalfmonth($('#firsttime').val(),$('#lasttime').val(),half,checknums);
  292. }else if(checkType == 'day'){//如果日期超过本月最后一天 ,即为最后一天
  293. datelist = getday($('#firsttime').val(),$('#lasttime').val(),$('#multiMonthStart').val(),$('#multiMonthEnd').val(),checknums) ;
  294. }
  295. return datelist;
  296. }
  297. function onMultiMonth(obj) {
  298. for(var i = 1;i <13 ;i++){
  299. $("#m"+i).removeAttr("disabled");
  300. }
  301. // $("input[name=mutimonthhalf]").removeAttr("disabled");
  302. $("input[name=checkmultimonth]").removeAttr("disabled");
  303. // $("#multiMonthStart").removeAttr("disabled");
  304. // $("#multiMonthEnd").removeAttr("disabled");
  305. $("#multiMonthWeek").removeAttr("disabled");
  306. $("#fieldset").css({"background-color":"#FCFCFC"});
  307. //其他选项置灰
  308. $("#monthlyweek").attr("disabled",true);
  309. $("input[name=monthlyhalf]").attr("disabled",true);
  310. $("#monthlyStart").attr("disabled",true);
  311. $("#monthlyEnd").attr("disabled",true);
  312. disableMultiDay()
  313. }
  314. function onNotMultiMonth(obj) {
  315. for(var i = 1;i <13 ;i++){
  316. $("#m"+i).attr("disabled",true);
  317. }
  318. $("input[name=mutimonthhalf]").attr("disabled",true);
  319. $("input[name=checkmultimonth]").attr("disabled",true);
  320. $("#multiMonthStart").attr("disabled",true);
  321. $("#multiMonthEnd").attr("disabled",true);
  322. $("#multiMonthWeek").attr("disabled",true);
  323. $("#fieldset").css({"background-color":"#F2F2F2"});
  324. disableMultiDay()
  325. }
  326. function onWeek(obj) {
  327. $("#monthlyweek").removeAttr("disabled");
  328. //其他选项置灰
  329. $("input[name=monthlyhalf]").attr("disabled",true);
  330. $("#monthlyStart").attr("disabled",true);
  331. $("#monthlyEnd").attr("disabled",true);
  332. //多月份设置都置灰
  333. for(var i = 1;i <13 ;i++){
  334. $("#m"+i).attr("disabled",true);
  335. }
  336. $("input[name=mutimonthhalf]").attr("disabled",true);
  337. $("input[name=checkmultimonth]").attr("disabled",true);
  338. $("#multiMonthStart").attr("disabled",true);
  339. $("#multiMonthEnd").attr("disabled",true);
  340. $("#multiMonthWeek").attr("disabled",true);
  341. $("#fieldset").css({"background-color":"#F2F2F2"});
  342. disableMultiDay()
  343. }
  344. function onHalfmonth(obj) {
  345. $("input[name=monthlyhalf]").removeAttr("disabled");
  346. //其他选项置灰
  347. $("#monthlyweek").attr("disabled",true);
  348. $("#monthlyStart").attr("disabled",true);
  349. $("#monthlyEnd").attr("disabled",true);
  350. //多月份设置都置灰
  351. for(var i = 1;i <13 ;i++){
  352. $("#m"+i).attr("disabled",true);
  353. }
  354. $("input[name=mutimonthhalf]").attr("disabled",true);
  355. $("input[name=checkmultimonth]").attr("disabled",true);
  356. $("#multiMonthStart").attr("disabled",true);
  357. $("#multiMonthEnd").attr("disabled",true);
  358. $("#multiMonthWeek").attr("disabled",true);
  359. $("#fieldset").css({"background-color":"#F2F2F2"});
  360. disableMultiDay()
  361. }
  362. function onDay(obj) {
  363. $("#monthlyStart").removeAttr("disabled");
  364. $("#monthlyEnd").removeAttr("disabled");
  365. //其他选项置灰
  366. $("#monthlyweek").attr("disabled",true);
  367. $("input[name=monthlyhalf]").attr("disabled",true);
  368. //多月份设置都置灰
  369. for(var i = 1;i <13 ;i++){
  370. $("#m"+i).attr("disabled",true);
  371. }
  372. $("input[name=mutimonthhalf]").attr("disabled",true);
  373. $("input[name=checkmultimonth]").attr("disabled",true);
  374. $("#multiMonthStart").attr("disabled",true);
  375. $("#multiMonthEnd").attr("disabled",true);
  376. $("#multiMonthWeek").attr("disabled",true);
  377. $("#fieldset").css({"background-color":"#F2F2F2"});
  378. disableMultiDay()
  379. }
  380. function onMultiMonthWeek(obj) {
  381. $("#multiMonthWeek").removeAttr("disabled");
  382. //其他选项置灰
  383. $("#multiMonthStart").attr("disabled",true);
  384. $("#multiMonthEnd").attr("disabled",true);
  385. $("input[name=mutimonthhalf]").attr("disabled",true);
  386. }
  387. function onMultiMonthHalfmonth(obj) {
  388. $("input[name=mutimonthhalf]").removeAttr("disabled");
  389. //其他选项置灰
  390. $("#multiMonthWeek").attr("disabled",true);
  391. $("#multiMonthStart").attr("disabled",true);
  392. $("#multiMonthEnd").attr("disabled",true);
  393. }
  394. function onMultiMonthDay(obj) {
  395. $("#multiMonthStart").removeAttr("disabled");
  396. $("#multiMonthEnd").removeAttr("disabled");
  397. //其他选项置灰
  398. $("#multiMonthWeek").attr("disabled",true);
  399. $("input[name=mutimonthhalf]").attr("disabled",true);
  400. }
  401. function onMultiDay(){
  402. $("#fieldsetDay input").removeAttr("disabled");
  403. $("#fieldsetDay").css({"background-color":"#FCFCFC"});
  404. //其他选项置灰
  405. $("#monthlyweek").attr("disabled",true);
  406. $("#monthlyStart").attr("disabled",true);
  407. $("#monthlyEnd").attr("disabled",true);
  408. //多月份设置都置灰
  409. for(var i = 1;i <13 ;i++){
  410. $("#m"+i).attr("disabled",true);
  411. }
  412. $("input[name=mutimonthhalf]").attr("disabled",true);
  413. $("input[name=checkmultimonth]").attr("disabled",true);
  414. $("#multiMonthStart").attr("disabled",true);
  415. $("#multiMonthEnd").attr("disabled",true);
  416. $("#multiMonthWeek").attr("disabled",true);
  417. $("#fieldset").css({"background-color":"#F2F2F2"});
  418. }
  419. function disableMultiDay(){
  420. $("#fieldsetDay").css({"background-color":"#F2F2F2"});
  421. $('#fieldsetDay input').attr('disabled','disabled');
  422. }
  423. function DateAdd(interval, number, date) {
  424. switch (interval) {
  425. case "y": {
  426. date.setFullYear(date.getFullYear() + number);
  427. return date;
  428. break;
  429. }
  430. case "q": {
  431. date.setMonth(date.getMonth() + number * 3);
  432. return date;
  433. break;
  434. }
  435. case "m": {
  436. date.setMonth(date.getMonth() + number);
  437. return date;
  438. break;
  439. }
  440. case "w": {
  441. date.setDate(date.getDate() + number * 7);
  442. return date;
  443. break;
  444. }
  445. case "d": {
  446. date.setDate(date.getDate() + number);
  447. return date;
  448. break;
  449. }
  450. case "h": {
  451. date.setHours(date.getHours() + number);
  452. return date;
  453. break;
  454. }
  455. case "m": {
  456. date.setMinutes(date.getMinutes() + number);
  457. return date;
  458. break;
  459. }
  460. case "s": {
  461. date.setSeconds(date.getSeconds() + number);
  462. return date;
  463. break;
  464. }
  465. default: {
  466. date.setDate(d.getDate() + number);
  467. return date;
  468. break;
  469. }
  470. }
  471. }
  472. //格式化日期
  473. function formateDate(date) {
  474. var date = new Date(date);
  475. var y = date.getFullYear();
  476. var m = date.getMonth() + 1;
  477. var d = date.getDate();
  478. m = m > 9 ? m : '0' + m;
  479. d = d > 9 ? d : '0' + d;
  480. return y + '-' + m + '-' + d ;
  481. }
  482. function addMultiDay(){
  483. var input = '<input type="text" readonly="readonly" name="multiDay" class="Wdate" style="width:85px;margin-right:10px"' +
  484. ' onClick="WdatePicker({dateFmt:\'yyyy-MM-dd\',minDate:\'#F{$dp.$D(\\\'firsttime\\\')}\',maxDate:\'#F{$dp.$D(\\\'lasttime\\\')}\'})">';
  485. $('#multiDaySpan').append(input);
  486. }
  487. </script>
  488. </body>
  489. </html>