2025-04-01 14:13:41 +08:00

276 lines
10 KiB
Cheetah

{{template "header" .}}
<!-- 工具栏 -->
<script id="toolbar" type="text/html">
{{ genBtn .AuthorizeMenus "add"}}
<button type="button" lay-event="search" lay-on="search" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon layui-icon-search"></i>
</button>
</script>
<div class="search-layer" id="search-layer" style="display: none;">
<div class="layui-form layui-row">
<div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
<div class="layui-form-column">
<label class="tips">开始时间</label>
<input type="text" name="timeBegin" id="timeBegin" placeholder="yyyy-MM-dd" readonly
value="{{ yearBegin }}" class="layui-input" />
</div>
</div>
<div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
<div class="layui-form-column">
<label class="tips">结束时间</label>
<input type="text" name="timeEnd" id="timeEnd" placeholder="yyyy-MM-dd" readonly value="{{ monthEnd }}"
class="layui-input" />
</div>
</div>
<div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
<div class="layui-form-column">
<label class="tips">状态</label>
<select name="status" id="status">
{{range.Statuses}}
<option value="{{.Value}}">{{.Name}}</option>
{{end}}
</select>
</div>
</div>
</div>
<div class="layui-form layui-row">
<div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
<div class="layui-form-column">
<label class="tips">类别</label>
<select id="category" name="category">
{{range.Categories}}
<option value="{{.Value}}">{{.Name}}</option>
{{end}}
</select>
</div>
</div>
<div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
<div class="layui-form-column">
<label class="tips">来源</label>
<select id="source">
{{range.Sources}}
<option value="{{.Value}}">{{.Name}}</option>
{{end}}
</select>
</div>
</div>
<div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
<div class="layui-form-column">
<label class="tips">名称</label>
<input type="text" name="title" id="title" placeholder="请输入名称" autocomplete="off" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-panel">
<table id="tablelist" lay-filter="tablelist"></table>
</div>
<script type="text/html" id="actionBox">
{{ genLink .AuthorizeMenus "edit"}}
</script>
{{define "js"}}
<script>
layui.use(['table', 'form', 'jquery', 'laydate', 'util'], function () {
let table = layui.table;
let form = layui.form;
let $ = layui.jquery;
let util = layui.util;
let laydate = layui.laydate;
/**开始时间 */
laydate.render({
elem: '#timeBegin',
type: 'datetime',
value: '{{ yearBegin }}',
ready: function (date) {
this.dateTime.hours = 0;
this.dateTime.minutes = 0;
this.dateTime.seconds = 0;
}
});
/**截止时间 */
laydate.render({
elem: '#timeEnd',
type: 'datetime',
value: '{{ monthEnd }}',
ready: function (date) {
this.dateTime.hours = 23;
this.dateTime.minutes = 59;
this.dateTime.seconds = 59;
}
});
// 加载列表
table.render({
elem: '#tablelist',
url: "/budget/list",
method: "POST",
headers: { 'X-CSRF-Token': $('#csrf_token').val() },
where: getQueryParams(),
// height: 'full-100',
height: function () {
return $(window).height() - 22;
},
page: true,
limit: 15,
limits: [15, 30, 45, 60, 75, 90],
cols: [[
{ field: 'id', title: '预算编号', align: 'left', fixed: 'left', width: 90 },
{ field: 'name', title: '预算名称', align: 'left', fixed: 'left', width: 120 },
{ field: 'project_name', title: '关联项目', align: 'left', width: 200 },
{ field: 'project_id', title: '项目编号', align: 'left', width: 200 },
{
field: 'budget_type', title: '预算类型', align: 'center', width: 90, templet: function (row) {
switch (row.budget_type) {
case 1: return '<span class="table-field-select-01">支出</span>';
case 2: return '<span class="table-field-select-04">收入</span>';
default: return '其它';
}
return '';
}
},
{ field: 'category_name', title: '预算类别', align: 'left', width: 100 },
// {
// field: 'status', title: '状态', align: 'center', width: 90, templet: function (row) {
// switch (row.status) {
// case 0: return '<span style="color:green;">正常</span>';
// case -1: return '<span style="color:red;">删除</span>';
// default: return '其它';
// }
// return '';
// }
// },
{ field: 'start_at', title: '预算开始时间', align: 'left', width: 160, templet: function (d) { return !d.start_at ? '' : util.toDateString(d.start_at) } },
{ field: 'end_at', title: '预算结束时间', align: 'left', width: 160, templet: function (d) { return !d.end_at ? '' : util.toDateString(d.end_at) } },
{ field: 'amount', title: '预算金额', align: 'left', width: 120 },
{ field: 'used_amount', title: '已支付金额', align: 'center', width: 120 },
{ field: 'remaining_amount', title: '剩余金额', align: 'center', width: 120 },
{ field: 'remark', title: '备注', align: 'left', width: 200 },
{ field: 'created_at', title: '创建时间', align: 'center', width: 160, templet: function (d) { return !d.created_at ? '' : util.toDateString(d.created_at) } },
{ field: 'created_name', title: '创建人', align: 'center', width: 100 },
{ field: 'updated_at', title: '更新时间', align: 'center', width: 160, templet: function (d) { return !d.updated_at ? '' : util.toDateString(d.updated_at) } },
{ field: 'updated_name', title: '更新人', align: 'center', width: 100 },
{ title: '操作', toolbar: '#actionBox', align: 'center', fixed: 'right', width: 100 },
]],
skin: 'line',
toolbar: '#toolbar',
defaultToolbar: [{
title: '刷新',
layEvent: 'refresh',
icon: 'layui-icon-refresh',
}, 'filter', 'exports'],
request: {
pageName: 'page',
limitName: 'rows'
}
});
// 工具栏
table.on('toolbar(tablelist)', function (obj) {
switch (obj.event) {
case 'add': add(); break;
case 'search': search(); break;
case 'refresh': refresh(); break;
}
});
function add(obj) {
layer.open({
type: 2,
// offset: 'r',
// anim: 'slideLeft',
title: '新增',
shade: 0.1,
area: ['99%', '98%'],
content: "/budget/add"
});
}
function search() {
layer.open({
type: 1,
offset: '20px',
title: '搜索',
content: $('#search-layer'), // 捕获的元素
shade: 0.1,
shadeClose: false,
scrollbar: false,
resize: false,
move: false,
skin: 'search-layer-open',
area: ['50%', '350px'],
btn: ['搜索', '重置'],
btn1: function (index, layero) {
search_btn();
layer.close(index);
},
btn2: function (index, layero) {
$('#timeBegin').val(formatDate(getCurrentYearStart(), 'YYYY-MM-DD HH:mm:ss'));
$('#timeEnd').val(formatDate(getCurrentMonthEnd(), 'YYYY-MM-DD HH:mm:ss'));
$('#title').val('');
$('#category').val('');
$('#source').val('');
$('#status').val(9999);
form.render('select');
return false;
}
});
}
function refresh() {
table.reload('tablelist');
}
// 表格项操作按钮
table.on('tool(tablelist)', function (obj) {
switch (obj.event) {
case 'edit': edit(obj); break;
}
});
function edit(obj) {
layer.open({
type: 2,
// offset: 'r',
// anim: 'slideLeft',
title: '修改',
shade: 0.1,
area: ['99%', '98%'],
content: "/budget/edit?id=" + obj.data['id']
});
}
// 搜索条件
function getQueryParams() {
return {
timeBegin: $('#timeBegin').val(),
timeEnd: $('#timeEnd').val(),
status: $('#status').val(),
category: $('#category').val(),
project: $('#project').val(),
budgetType: $('#budgetType').val(),
title: $('#title').val()
};
}
// 搜索
function search_btn() {
table.reload('tablelist', {
where: getQueryParams(),
page: {
curr: 1
}
})
return false;
}
});
</script>
{{end}}
{{template "footer" .}}