<#assign base=request.contextPath /> <#import "../common/defaultLayout.ftl" as defaultLayout> <@defaultLayout.layout> <link rel="stylesheet" href="${base}/assets/css/amazeui.switch.css"/> <div class="admin-content"> <div class="am-cf am-padding" style="padding:1rem 1.6rem 1.6rem 1rem;margin:0px;"> <!-- padding:1px 2px 3px 4px;上、右、下,和左 --> <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">配置管理</strong> / <small>部门配置</small> </div> </div> <div class="am-g"> <div class="am-u-sm-12"> <form class="am-form" id="listForm" action="${base}/department/list" method="POST"> <input type="hidden" id="keywords" name="keywords" value='${keywords!""}'/> <table class="am-table am-table-bordered am-table-radius table-main" style="padding:0;"> <tbody> <tr> <th class="am-text-middle">部门名称</th> <td> <div class="am-u-sm-10"> <input type="text" id="name" class="am-form-field am-input-sm" value="${name!}"/> </div> </td> <th class="am-text-middle">启用状态</th> <td> <div class="am-u-sm-10"> <select data-am-selected="{btnWidth: '40%', btnSize: 'sm'" id="enabled"> <option value="-1">全部</option> <option value="1" <#if enabled! == "1">selected</#if> >启用</option> <option value="0" <#if enabled! == "0">selected</#if> >禁用</option> </select> </div> </td> <th class="am-text-middle">所属上级</th> <td> <div class="am-u-sm-10"> <select data-am-selected="{btnWidth: '40%', btnSize: 'sm'" id="parentId"> <option value="-1">全部</option> <option value="0" <#if parentId! == "0">selected</#if>>无</option> <#if parentList??> <#list parentList as parent> <option value="${parent.id!}" <#if parentId! == parent.id + "" > selected </#if>><#if parent.level gt 1>--</#if>${parent.name}</option> </#list> </#if> </select> </div> </td> </tr> <tr> <th class="am-text-middle">创建时间</th> <td colspan="3"> <div class="am-u-sm-10"> <div class="am-form am-form-inline"> <div class="am-form-group am-form-icon"> <i class="am-icon-calendar"></i> <input type="text" class="am-form-field am-input-sm" id="startTime" readonly value="${startTime!}" placeholder="开始日期" data-am-datepicker> </div> <div class="am-form-group">至</div> <div class="am-form-group am-form-icon"> <i class="am-icon-calendar"></i> <input type="text" class="am-form-field am-input-sm" id="endTime" value="${endTime!}" readonly placeholder="结束日期" data-am-datepicker> </div> </div> </div> </td> <td colspan="2"> <div align='right'> <button type="button" class="am-btn am-btn-default am-btn-sm am-text-secondary" id="submit-btn" onclick="sub_function('query')">搜索 </button> <@shiro.hasPermission name="DEPARTMENT_EXPORT"> <button type="button" class="am-btn am-btn-default am-btn-sm am-text-secondary" id="submit-btn-export" onclick="sub_function('export')">导出 </button> </@shiro.hasPermission> </div> </td> </tr> </tbody> </table> </form> </div> <div class="am-btn-toolbar" style="padding-left:.5rem;"> <div class="am-btn-group am-btn-group-xs"> <@shiro.hasPermission name="DEPARTMENT_ADD"> <button type="button" class="am-btn am-btn-default" onclick="location.href='${base}/department/add'"> <span class="am-icon-plus"></span> 新增 </button> </@shiro.hasPermission> </div> </div> </div> <div class="am-g"> <div class="am-u-sm-12"> <div class="am-scrollable-horizontal"> <table class="am-table am-table-striped am-table-hover table-main"> <thead> <tr class="am-text-nowrap"> <th class="table-title">序号</th> <th class="table-title">部门名称</th> <th class="table-title">部门领导</th> <th class="table-title">所属上级</th> <th class="table-title">创建人</th> <th class="table-title">创建时间</th> <th class="table-title">操作</th> </tr> </thead> <tbody> <#if (pager.list)?exists && (pager.list?size>0)> <#list pager.list as list> <tr> <td>${list.tempId!}</td> <td>${list.name!}</td> <td>${list.realName!}</td> <td>${list.parentName!}</td> <td>${list.createdBy!}</td> <td><#if list.createdTime??>${list.createdTime?datetime}</#if></td> <td> <div id="edit-div" class="am-btn-toolbar switch-button"> <div class="am-btn-group am-btn-group-xs"> <@shiro.hasPermission name="DEPARTMENT_EDIT"> <button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" onclick="location.href='${base}/department/edit?id=${list.id}'"><span class="am-icon-pencil-square-o"></span>编辑 </button> </@shiro.hasPermission> <input id="${list.id}" type="checkbox" data-size='xs' data-am-switch data-off-text="已禁用" data-on-text="已启用" <#if list.enabled==1 >checked</#if> /> </div> </div> </td> </tr> </#list> </#if> </tbody> </table> </div> <div class="am-cf"> <!-- 分页 --> <#if (pager.list)?exists && (pager.list?size>0) > <div class="am-fr"> <#include "../common/order_list_pager.ftl"> </div> <#else> <div class="am-kai" align="center"> <h3>没有找到任何记录!</h3> </div> </#if> </div> </div> </div> </div> </@defaultLayout.layout> <script src="${base}/assets/js/amazeui.switch.js"></script> <script type="text/javascript"> var sub_function = function (type) { initSearch(); if (type == 'export') { $("#listForm").attr("action", "${base}/department/export"); } else { $("#listForm").attr("action", "${base}/department/list"); } $("#listForm").submit(); }; function initSearch() { var keywordsObj = {}; if ($("#name").val()) keywordsObj.name = $("#name").val(); if ($("#type").val()) keywordsObj.type = $("#type").val(); if ($("#parentId").val()) keywordsObj.parentId = $("#parentId").val(); if ($("#enabled").val()) keywordsObj.enabled = $("#enabled").val(); if ($("#startTime").val()) keywordsObj.startTime = $("#startTime").val(); if ($("#endTime").val()) keywordsObj.endTime = $("#endTime").val(); var keywords = ""; if (!$.isEmptyObject(keywordsObj)) { keywords = JSON.stringify(keywordsObj); } console.log("keywords = " + keywords); $("#keywords").val(keywords); } $(function () { //为每个启用或禁用按钮增加事件 var $mycheckbox = $('.switch-button').find("input[type='checkbox']"); $mycheckbox.each(function () { var myid = $(this).attr("id"); var prop = $(this).attr("prop"); $(this).on({ 'switchChange.bootstrapSwitch': function (event, state) { toggle(myid, state ? 1 : 0); } }); }); }); //启用或者禁用 var toggle = function (id, status) { $.ajax({ url: "${base}/department/enableOrDisable", data: {id: id, status: status}, type: "post", dataType: "json", async: false, success: function (data) { parent.layer.msg(data.msg); } }); }; </script>