后台管理界面的前端组件

一、Layui日期控件

1.开始时间结束时间的js

layui.use('laydate', function () {
				var laydate = layui.laydate;
				var startDate = laydate.render({
					elem: '#startTime',
					type: 'datetime',
					done: function (value, {year, month, date, hours, minutes, seconds}) {
						endDate.config.min = {
							year,
							month: month - 1,
							date,
							hours,
							minutes,
							seconds
						};
					}
				});
				var endDate = laydate.render({
					elem: '#endTime',
					type: 'datetime',
					done: function (value, {year, month, date, hours, minutes, seconds}) {
						startDate.config.max = {
							year,
							month: month - 1, //关键  
							date,
							hours,
							minutes,
							seconds
						};
					}
				});
			});

2.时间框的HTML

<div class="col-xs-6">
					<div class="form-group">
						<label class="control-label col-sm-4"  title="">
							<span class="required ">*</span> 结束时间:
						</label>
						<div class="col-sm-8">
							<div class="input-group">
							<input type="text" id="endTime" name="endTime" maxlength="64" minlength=1  class="form-control required "/>
							<span class="input-group-btn">
									<a href="javascript:$('#endTime').focus();" class="btn btn-default "><i class="fa fa-calendar"></i></a>
							</span>
							</div>
						</div>
					</div>
				</div>

3.补充重置的bug-

$("#btn-resert").on("click",function(){
					$("#searchForm")[0].reset();
					endDate.config.min='1900-1-1';
					startDate.config.max=endDate.config.max;
				});

二、Layui多选框

1.多选框的HTML

<div class="form-unit">套餐明细</div>
			<div class="row">
				<div class="col-xs-11">
					<a href="javascript:void(0);" class="layui-btn layui-btn-default layui-btn-sm " id="btnDishes" title="添加明细" onclick="geroRepastPlanInfoAddForm.addDishesDialog();"><i class="fa fa-plus-square"></i>&nbsp;添加菜品</a>
					<a href="javascript:void(0);" class="layui-btn layui-btn-primary layui-btn-sm"  onclick="geroRepastPlanInfoAddForm.removeAllLine();"><i class="fa fa-minus-square"></i>&nbsp;全部移除</a>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<table id="tab2" class="layui-table" style="margin-top:5px;">
						<thead>
						<tr>
							<td align="center">菜品名称</td>
							<td align="center">餐饮类型</td>
							<td align="center">操作</td>


						</tr>
						</thead>
						<tbody id="shift_tr">

						</tbody>
					</table>
				</div>
			</div>

2.多选框的JS

addDishesDialog: function () {
			var options = {
				shade: 0.3,
				type: 2,
				maxmin: true,
				shadeClose: true,
				title: '【菜品选择】',
				area: ['50%', '70%'],
				content: ctx + '/repast/order/info/dishesDialog',
				btn: ['<i class="fa fa-check"></i> 确定'],
				btn1: function (index, layero) {
					var win = parent.layer.iframeWindow(index);
					var ids = win.$("#grid").jqGrid('getGridParam', 'selarrrow')
					if (ids.length == 0) {
						parent.layer.msg("请选择菜品！");
					} else {
						var num=0;
						var len=$("#shift_tr > tr").length
						if(len==1){
							num=len;
						}else{
							num=len+num;
						}
						$.each(ids, function (i, v) {
							var data = win.$("#grid").jqGrid('getRowData', v);
							_that.addDishesLine(i+num,data);
						})
					}
					parent.layer.close(index);
				}
			};
			options.btn.push('<i class="fa fa-close"></i> 关闭');
			options['btn' + options.btn.length] = function (index, layero) {
				if (typeof treeselectCallback == 'function') {
					treeselectCallback('parent', 'cancel', index, layero);
				}
			};
			parent.layer.open(options);
		},
		addDishesLine: function (index,shift) {
			//先获取 去重复
			var dom = "";
			dom += "<tr id=\"shiftTr_" + index + "\" data-index-id=" + shift.id + ">";
			dom += "    <td align='center'>";
			dom += "        <div class=\"input-group input-group-sm\">";
			dom += "            <input type=\"hidden\" id=\"geroRepastPlanDineDishesList[" + index + "].dishesId\" name=\"geroRepastPlanDineDishesList[" + index + "].dishesId\" value=\"" + shift.id + "\" class=\"form-control  dishesId\">";
			dom += "			<div>"+shift.dishesName+"</div>";
			dom += "        </div>";
			dom += "    </td>";

			dom += "    <td align='center' style=\"text-align:center;\">";
			dom += "       <select id='geroRepastPlanDineDishesList["+ index +"].planDineType' name='geroRepastPlanDineDishesList["+ index +"].planDineType' class='form-control required'>";
			dom += "       		<option value='' >--请选择--</option>";
			dom += "       		<option value='0' >早餐</option>";
			dom += "       		<option value='1' >早点</option>";
			dom += "       		<option value='2' >午餐</option>";
			dom += "       		<option value='3' >午点</option>";
			dom += "       		<option value='4' >晚餐</option>";
			dom += "       		<option value='5' >夜宵</option>";
			dom += "       	</select>";
			dom += "    </td>";

			dom += "    <td align='center' style=\"text-align:center;\">";
			dom += "        <a href=\"javascript:void(0);\" class=\"btnList layui-btn layui-btn-xs layui-btn-danger\"  οnclick=\"geroRepastPlanInfoAddForm.removeLine('shiftTr_" + index + "');\">&nbsp;删除</a>";
			dom += "    </td>";
			dom += "</tr>";

			var flag=true;
			$('tr .dishesId').each(function(i,val){
				if(shift.id==$(this).val()){
					Js.layer.msg("菜品【"+shift.dishesName+"】已经存在,不能重复添加");
					flag=false;
				}
			});
			if(flag){
				$("#shift_tr").append(dom);
			}
		},
		removeLine: function (id) {
			$("#" + id).remove();
		},
		removeAllLine: function () {
			$("#shift_tr").html("");
		},

三、Dialog界面的书写

1.HTML

<div class="form-unit">护理员明细</div>
			<div class="row">
				<div class="col-xs-11">
					<a href="javascript:void(0);" class="layui-btn layui-btn-default layui-btn-sm " id="btnDishes" title="添加明细" onclick="geroNursingArrangeCheckAddForm.addArrangeCheck();"><i class="fa fa-plus-square"></i>&nbsp;添加明细</a>
					<a href="javascript:void(0);" class="layui-btn layui-btn-primary layui-btn-sm"  onclick="geroNursingArrangeCheckAddForm.removeAllLine();"><i class="fa fa-minus-square"></i>&nbsp;全部移除</a>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<table id="tab2" class="layui-table" style="margin-top:5px;">
						<thead>
						<tr>
							<td align="center">护理员名称</td>
							<td align="center">排班时间</td>
							<td align="center">排班开始时间</td>
							<td align="center">排班结束时间</td>
							<td align="center">排班完成情况</td>
							<td align="center">操作</td>


						</tr>
						</thead>
						<tbody id="shift_tr">

						</tbody>
					</table>
				</div>
			</div>

<!--	编辑界面-->

<tbody id="shift_tr">
<!--							geroNursingArrangeCheck-->
								<tr id="shiftTr_1">
								<td align="center">
									<div class="input-group input-group-sm">
										<div>${geroNursingArrangeCheck.employeeName}</div>
									</div>
								</td>

									<td align="center" style="text-align:center;">
										<div class="input-group input-group-sm">
											<div>${geroNursingArrangeCheck.arrangeTime,"yyyy-MM-dd HH:mm:ss"}</div>
										</div>
									</td>

									<td align="center" style="text-align:center;">
										<div class="input-group input-group-sm">
											<div>${geroNursingArrangeCheck.startTime}</div>
										</div>
									</td>

									<td align="center" style="text-align:center;">
										<div class="input-group input-group-sm">
											<div>${geroNursingArrangeCheck.endTime}</div>
										</div>
									</td>

									<td align="center" style="text-align:center;">
										<div class="input-group input-group-sm">
											<input id="performance" name="performance" class='form-control required' type="number"  min="0.00" max="1.00" value="${geroNursingArrangeCheck.performance}" step="0.01"  />
										</div>
									</td>

<!--							<td align='center' style=text-align:center;>-->
<!--								<a href="javascript:void(0);" class="btnList layui-btn layui-btn-xs layui-btn-danger"  οnclick=geroNursingArrangeCheckEditForm.removeLine('shiftTr_1');>&nbsp;删除</a>-->
<!--							</td>-->
							</tr>

							</tbody>

2.JS

addArrangeCheck: function () {
			var options = {
				shade: 0.3,
				type: 2,
				maxmin: true,
				shadeClose: true,
				title: '【护理员选择】',
				area: ['60%', '70%'],
				content: ctx + '/nursing/arrange/arrangeDialog',
				btn: ['<i class="fa fa-check"></i> 确定'],
				btn1: function (index, layero) {
					var win = parent.layer.iframeWindow(index);
					var ids = win.$("#grid").jqGrid('getGridParam', 'selarrrow')
					if (ids.length == 0) {
						parent.layer.msg("请选择护理员！");
					} else {
						var num=0;
						var len=$("#shift_tr > tr").length
						if(len==1){
							num=len;
						}else{
							num=len+num;
						}
						$.each(ids, function (i, v) {
							var data = win.$("#grid").jqGrid('getRowData', v);
							_that.addArrangeLine(i+num,data);
						})
					}
					parent.layer.close(index);
				}
			};
			options.btn.push('<i class="fa fa-close"></i> 关闭');
			options['btn' + options.btn.length] = function (index, layero) {
				if (typeof treeselectCallback == 'function') {
					treeselectCallback('parent', 'cancel', index, layero);
				}
			};
			parent.layer.open(options);
		},
		addArrangeLine: function (index,shift) {
			//先获取 去重复
			var dom = "";
			dom += "<tr id=\"shiftTr_" + index + "\" data-index-id=" + shift.id + ">";
			dom += "    <td align='center'>";
			dom += "        <div class=\"input-group input-group-sm\">";
			dom += "            <input type=\"hidden\" id=\"geroNursingArrangeCheckList[" + index + "].arrangeId\" name=\"geroNursingArrangeCheckList[" + index + "].arrangeId\" value=\"" + shift.id + "\" class=\"form-control  arrangeId\">";
			dom += "			<div>"+shift.employeeName+"</div>";
			dom += "        </div>";
			dom += "    </td>";

			dom += "    <td align='center' style=\"text-align:center;\">";
			dom += "        <div class=\"input-group input-group-sm\">";
			dom += "			<div>"+shift.arrangeTime+"</div>";
			dom += "        </div>";
			dom += "    </td>";

			dom += "    <td align='center' style=\"text-align:center;\">";
			dom += "        <div class=\"input-group input-group-sm\">";
			dom += "			<div>"+shift.startTime+"</div>";
			dom += "        </div>";
			dom += "    </td>";

			dom += "    <td align='center' style=\"text-align:center;\">";
			dom += "        <div class=\"input-group input-group-sm\">";
			dom += "			<div>"+shift.endTime+"</div>";
			dom += "        </div>";
			dom += "    </td>";

			dom += "    <td align='center' style=\"text-align:center;\">";
			dom += " <div class=\"input-group input-group-sm\">";
			dom += "<input id=\"geroNursingArrangeCheckList[" + index + "].performance\" name=\"geroNursingArrangeCheckList[" + index + "].performance\" class='form-control required' type=\"number\"  min=\"0.00\" max=\"1.00\" value='0.00' step=\"0.01\"  />";
			dom += "        </div>";
			dom += "    </td>";

			dom += "    <td align='center' style=\"text-align:center;\">";
			dom += "        <a href=\"javascript:void(0);\" class=\"btnList layui-btn layui-btn-xs layui-btn-danger\"  οnclick=\"geroNursingArrangeCheckAddForm.removeLine('shiftTr_" + index + "');\">&nbsp;删除</a>";
			dom += "    </td>";
			dom += "</tr>";

			var flag=true;
			$('tr .arrangeId').each(function(i,val){
				if(shift.id==$(this).val()){
					Js.layer.msg("已经存在的排班信息,不能重复添加");
					flag=false;
				}
			});
			if(flag){
				$("#shift_tr").append(dom);
			}
		},
		removeLine: function (id) {
			$("#" + id).remove();
		},
		removeAllLine: function () {
			$("#shift_tr").html("");
		},

3.controller

 /**
     * 护理员选择跳转弹窗
     * @param request
     * @param response
     * @param model
     * @return
     */
    @GetMapping(value = "/arrangeDialog")
    public String arrangeDialog(
        HttpServletRequest request,
        HttpServletResponse response,
        Model model
    ){
//        QueryWrapper<GeroNursingArrange> nursingArrangeQueryWrapper = new QueryWrapper<>();
//        nursingArrangeQueryWrapper.lambda().eq(GeroNursingArrange::getDelFlag, State.NORMAL.getValue());

//        model.addAttribute("arrange",arrangeService.selectList(nursingArrangeQueryWrapper));

        return prefix + "/arrange_dialog";
    }

    /**
     * 跳转弹窗的护理人员分页列表
     * @param request
     * @param geroNursingArrange
     * @param pageNo
     * @param pageSize
     * @param startTime
     * @param endTime
     * @return
     */
    @PostMapping(value = "/getNormalStatePage")
    @ResponseBody
    public JqGrid<GeroNursingArrange> getNormalStatePage(
            HttpServletRequest request,
            @ModelAttribute GeroNursingArrange geroNursingArrange,
            @RequestParam(value = "pageNo", required = true)Integer pageNo,
            @RequestParam(value = "pageSize", required = true)Integer pageSize,
            @RequestParam(value = "startTime", required = false) String startTime,
            @RequestParam(value = "endTime", required = false) String endTime
            ){
        QueryWrapper<GeroNursingArrange> wrapper = new QueryWrapper<>();
        wrapper.lambda().like(StringUtils.isNoneBlank(geroNursingArrange.getEmployeeName()),
                GeroNursingArrange::getEmployeeName,geroNursingArrange.getEmployeeName())
                .ne(GeroNursingArrange::getCheckFlag,"1")
                .ge(StringUtils.isNoneBlank(startTime),
                        GeroNursingArrange::getArrangeTime,startTime)
                .le(StringUtils.isNoneBlank(endTime),
                        GeroNursingArrange::getArrangeTime,endTime);

        return arrangeService.jqGridPage(pageNo, pageSize, wrapper);
    }

4.dialog的html

<% layout('/layouts/manager_content.html',{title:'geroNursingArrange-page',libs: ['jqGrid','siufung','select2']}){ %>
<div class="main-content">
    <div class="box box-main">
        <div class="box-body">
            <form id="searchForm" action="${ctxPath}/nursing/arrange/getNormalStatePage" class="form-inline" method="post">
                <div class="form-group">
                    <label class="control-label">护理员名称：</label>
                    <div class="control-inline">
                        <input id="employeeName" name="employeeName" class="form-control width-140"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label">排班起止时间：</label>
                    <div class="control-inline">
                        <input id="startTime" name="startTime" readonly style="background: #fff" class="form-control width-120"/> -
                        <input id="endTime" name="endTime" readonly style="background: #fff" class="form-control width-120"/>
                    </div>
                </div>
                <div class="form-group">
                    <button type="submit" class="layui-btn layui-btn-default layui-btn-sm"><i class="fa fa-search"></i>&nbsp;查询</button>
                    <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm"><i class="fa fa-wrench"></i>&nbsp;重置</button>
                </div>
            </form>
            <table id="grid"></table>
            <div id="gridPage"></div>
        </div>
    </div>
</div>
<script src="${ctxPath}/modules/nursing/arrange/arrange_dialog.js"></script>
<script type="text/javascript">
    $(function(){
        arrangeCheckDialogForm.init();
        $('#grid').dataGrid({
            searchForm: $("#searchForm"),
            showCheckbox:true,
            columnModel: [
                {header:'序列号', name:'id', index:'ID', hidden:true, key:true},
                {header:'护理员名称', name:'employeeName', index:'EMPLOYEE_NAME', width:150, align:"center"},
                {header:'排班日期', name:'arrangeTime', index:'ARRANGE_TIME', width:150, align:"center"},
                {header:'开始时间', name:'startTime', index:'START_TIME', width:150, align:"center"},
                {header:'结束时间', name:'endTime', index:'END_TIME', width:150, align:"center"},
            ],
            ajaxSuccess: function(data){

            }
        });
    });
</script>
<% } %>

5.dialog的js

var arrangeCheckDialogForm = function($){
    var _that = null;
    return {
        init:function(){
            _that = this;
            _that.bindEvent();
            _that.bindData();
            _that.bingComponent();
        },
        bindEvent:function(){

        },
        bindData:function(){

        },
        bingComponent:function () {
            layui.use('laydate', function () {
                var laydate = layui.laydate;
                var startDate = laydate.render({
                    elem: '#startTime',
                    type: 'date',
                    max:getNowFormatDate(),
                    done: function (value, {year, month, date}) {
                        endDate.config.min = {
                            year,
                            month: month - 1,
                            date
                        };
                    }
                });
                var endDate = laydate.render({
                    elem: '#endTime',
                    type: 'date',
                    max:getNowFormatDate(),
                    done: function (value, {year, month, date}) {
                        startDate.config.max = {
                            year,
                            month: month - 1, //关键  
                            date
                        };
                    }
                });
            });
            function getNowFormatDate (){
                var date = new Date();
                var seperator1 = "-";
                var seperator2 = ":";
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                var currentdate = date.getFullYear() + seperator1 + month
                    + seperator1 + strDate + " " + date.getHours() + seperator2
                    + date.getMinutes() + seperator2 + date.getSeconds();
                return currentdate;
            }
        },

    }
}(jQuery);