fourcal/src/main/resources/templates/admin/department_list.ftl

248 lines
12 KiB
Plaintext

<#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>>${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>