424 lines
16 KiB
HTML
424 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title></title>
|
|
<meta name="renderer" content="webkit">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="format-detection" content="telephone=no">
|
|
<link rel="stylesheet" href="/static/assets/gougu/css/gougu.css">
|
|
<style>
|
|
.close {
|
|
width: 100%;
|
|
height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#statusSelect,
|
|
#lockSelect {
|
|
display: inline-block;
|
|
width: 150px;
|
|
}
|
|
|
|
.status-button {
|
|
display: inline-block;
|
|
margin-left: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="page-content">
|
|
<div class="p-4 border-b">
|
|
<div style="display: flex;justify-content: space-between;align-items: center;">
|
|
<div>
|
|
<h3 class="h3-title hover">
|
|
<span>基本信息</span>
|
|
</h3>
|
|
</div>
|
|
<div style="color: #b3b3b3;">
|
|
创建时间：{$detail.create_time}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input type="text" value="{$detail.id}" id="pid" style="display: none;">
|
|
<div class="layui-row border-b">
|
|
<table class="layui-table layui-table-form">
|
|
<tr>
|
|
<td class="layui-td-gray-2">账单号
|
|
</td>
|
|
<td>
|
|
{$detail.order}
|
|
</td>
|
|
<td class="layui-td-gray-2">创建者
|
|
</td>
|
|
<td>
|
|
{$detail.creater}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="layui-td-gray-2">隶属部门
|
|
</td>
|
|
<td>
|
|
{$detail.department}
|
|
</td>
|
|
<td class="layui-td-gray-2">报销状态
|
|
</td>
|
|
<td>
|
|
{$detail.status}
|
|
<a href="javascript:;" onclick="editstatus('{$detail.id}')" style="margin-left: 20px;">修改</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="layui-td-gray-2">备注
|
|
</td>
|
|
<td colspan="4">
|
|
{$detail.remark}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="p-4 border-b">
|
|
<h3 class="h3-title hover">
|
|
<span>详细信息</span>
|
|
<span>
|
|
<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="additem" id="additem">增加报销</a>
|
|
<a class="layui-btn layui-btn-xs" lay-event="edititem" id="edititem">编辑</a>
|
|
<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="delete" id="delete">删除</a>
|
|
</span>
|
|
</h3>
|
|
</div>
|
|
<div class="layui-row border-b">
|
|
<table class="layui-table layui-table-form" id="reimbursementdetail"></table>
|
|
</div>
|
|
</div>
|
|
<div class="close">
|
|
<button class="layui-btn" onclick="printPage()">打印本页</button>
|
|
<button class="layui-btn layui-bg-blue" id="refresh">刷新</button>
|
|
</div>
|
|
</body>
|
|
|
|
<script>
|
|
const moduleInit = ["tool", "gouguEdit", "gouguComment"];
|
|
|
|
function gouguInit() {
|
|
var table = layui.table;
|
|
var tool = layui.tool;
|
|
var dropdown = layui.dropdown;
|
|
var $ = layui.jquery;
|
|
var layer = layui.layer;
|
|
var pid = document.getElementById('pid').value;
|
|
var project = "{$detail.project}";
|
|
var department = "{$detail.department}";
|
|
var lock = "{$detail.lock}";
|
|
var dates = "{$detail.create_time}";
|
|
var currentStatus = "{$detail.status}";
|
|
// var id = pid;
|
|
|
|
// 检查状态并设置按钮状态
|
|
if (currentStatus === "已报销") {
|
|
$("#additem").prop("disabled", true).addClass("layui-btn-disabled");
|
|
$("#edititem").prop("disabled", true).addClass("layui-btn-disabled");
|
|
$("#delete").prop("disabled", true).addClass("layui-btn-disabled");
|
|
}
|
|
|
|
//增加报销
|
|
$("#additem").on("click", function () {
|
|
// 只有在未报销状态下才允许增加报销
|
|
if (currentStatus === "已报销") return;
|
|
var layerIndex = layui.layer.open({
|
|
type: 2,
|
|
title: '增加报销',
|
|
shadeClose: true,
|
|
shade: 0.8,
|
|
area: ['70%', '90%'],
|
|
content: '/reimbursement/index/additem?pid=' + pid + '&project=' + project + '&department=' + department + '&dates=' + dates,
|
|
end: function () {
|
|
// 弹出层关闭时刷新当前页面
|
|
layui.table.reload('reimbursementdetail');
|
|
}
|
|
});
|
|
});
|
|
|
|
//修改报销
|
|
$("#edititem").on("click", function () {
|
|
// 只有在未报销状态下才允许编辑
|
|
if (currentStatus === "已报销") return;
|
|
var checkStatus = layui.table.checkStatus('reimbursementdetail'); // 获取选中行的状态
|
|
var data = checkStatus.data; // 获取选中的数据
|
|
if (data.length === 0) {
|
|
layer.msg('请先选择要编辑的项'); // 如果没有选中项，提示用户
|
|
return;
|
|
}
|
|
var id = data[0].id; // 获取第一个选中项的 ID
|
|
console.log(id);
|
|
var layerIndex = layui.layer.open({
|
|
type: 2,
|
|
title: '编辑报销',
|
|
shadeClose: true,
|
|
shade: 0.8,
|
|
area: ['70%', '90%'],
|
|
content: '/reimbursement/index/edititem?id=' + id,
|
|
end: function () {
|
|
// 弹出层关闭时刷新当前页面
|
|
layui.table.reload('reimbursementdetail');
|
|
}
|
|
});
|
|
});
|
|
|
|
//删除报销
|
|
$("#delete").on("click", function () {
|
|
// 只有在未报销状态下才允许删除
|
|
if (currentStatus === "已报销") return;
|
|
layui.layer.confirm("确定删除该内容吗？", { icon: 3, title: "提示" }, function (index) {
|
|
var checkStatus = layui.table.checkStatus('reimbursementdetail'); // 获取选中行的状态
|
|
var data = checkStatus.data; // 获取选中的数据
|
|
if (data.length === 0) {
|
|
layer.msg('请先选择要删除的项'); // 如果没有选中项，提示用户
|
|
return;
|
|
}
|
|
var id = data[0].id; // 获取第一个选中项的 ID
|
|
$.post("/reimbursement/index/delete", { id: id }, function (res) {
|
|
if (res.code === 0) {
|
|
layui.layer.msg(res.msg);
|
|
layui.table.reload('reimbursementdetail'); // 刷新表格
|
|
} else {
|
|
layui.layer.msg(res.msg);
|
|
}
|
|
});
|
|
layui.layer.close(index);
|
|
});
|
|
});
|
|
|
|
//刷新表格
|
|
$("#refresh").on("click", function () {
|
|
layui.table.reload('reimbursementdetail', {
|
|
url: '/reimbursement/index/viewitem?id=' + pid, // 替换为你的数据接口URL
|
|
page: {
|
|
curr: 1 // 重新从第一页开始加载
|
|
}
|
|
});
|
|
});
|
|
|
|
//渲染表格
|
|
layui.pageTable = layui.table.render({
|
|
elem: "#reimbursementdetail",
|
|
// toolbar: '#toolbarDemo',
|
|
// cellMinWidth: 80,
|
|
url: "/reimbursement/index/viewitemlist?id=" + pid,// 数据接口
|
|
page: true,
|
|
limit: 50,
|
|
totalRow: true,
|
|
filter: "reimbursementdetail",
|
|
cols: [
|
|
[
|
|
{ type: 'checkbox', },
|
|
{
|
|
field: 'id',
|
|
width: 100,
|
|
title: '编号',
|
|
sort: true,
|
|
align: "center",
|
|
totalRowText: '合计：',
|
|
},
|
|
{
|
|
field: "times",
|
|
title: "发生日期",
|
|
width: 120,
|
|
align: "center",
|
|
rowspan: 2,
|
|
templet: function (d) {
|
|
return '<span>' + d.times + "</span>";
|
|
},
|
|
},
|
|
{
|
|
field: "cate",
|
|
title: "报销类别",
|
|
width: 120,
|
|
align: "center",
|
|
rowspan: 2,
|
|
templet: function (d) {
|
|
return '<span>' + d.cate + "</span>";
|
|
},
|
|
},
|
|
{
|
|
field: "project",
|
|
title: "隶属项目",
|
|
width: 180,
|
|
align: "center",
|
|
rowspan: 2,
|
|
sort: true,
|
|
templet: function (d) {
|
|
return '<span>' + (d.project !== null && d.project !== undefined ? d.project : '无') + "</span>";
|
|
},
|
|
},
|
|
{
|
|
field: "price",
|
|
title: "报销金额",
|
|
align: "center",
|
|
width: 120,
|
|
rowspan: 2,
|
|
templet: function (d) {
|
|
return '<span>' + d.price + "</span>";
|
|
},
|
|
totalRow: true, // 添加此行以计算总计
|
|
},
|
|
// {
|
|
// field: "haveticket",
|
|
// title: "是否有票",
|
|
// width: 120,
|
|
// align: "center",
|
|
// rowspan: 2,
|
|
// templet: function (d) {
|
|
// return '<span>' + d.haveticket + "</span>";
|
|
// },
|
|
// },
|
|
{
|
|
field: "tickets",
|
|
title: "发票查看",
|
|
align: "center",
|
|
width: 120,
|
|
rowspan: 2,
|
|
templet: function (d) {
|
|
if (d.tickets) {
|
|
return `<span><img src="${d.tickets}" alt="" style="cursor: pointer;" onclick="viewImage('${d.tickets}')"></span>`;
|
|
} else {
|
|
return "<span>无</span>";
|
|
}
|
|
},
|
|
},
|
|
{
|
|
field: "remark",
|
|
title: "备注",
|
|
align: "center",
|
|
rowspan: 2,
|
|
templet: function (d) {
|
|
if (d.remark) {
|
|
return '<span>' + d.remark + "</span>";
|
|
} else {
|
|
return "";
|
|
}
|
|
},
|
|
},
|
|
],
|
|
],
|
|
});
|
|
}
|
|
|
|
</script>
|
|
<script src="/static/assets/layui/layui.js"></script>
|
|
<script src="/static/assets/gougu/gouguInit.js"></script>
|
|
|
|
<script>
|
|
//打印数据
|
|
function printPage() {
|
|
var content = document.querySelector('.page-content').innerHTML;
|
|
var originalContent = document.body.innerHTML;
|
|
document.body.innerHTML = content;
|
|
window.print();
|
|
document.body.innerHTML = originalContent;
|
|
}
|
|
|
|
//发票查看大图
|
|
function viewImage(src) {
|
|
var img = new Image();
|
|
img.src = src;
|
|
var imgHtml = "<img src='" + src + "' style='width:100%;'/>";
|
|
layer.open({
|
|
type: 1,
|
|
shade: 0.8,
|
|
title: false,
|
|
area: ['80%', '80%'],
|
|
content: imgHtml,
|
|
});
|
|
}
|
|
|
|
//修改报销状态
|
|
function editstatus(id) {
|
|
layui.use('layer', function () {
|
|
var layer = layui.layer;
|
|
var id = document.getElementById('pid').value;
|
|
var currentStatus = "{$detail.status}";
|
|
layer.open({
|
|
type: 1,
|
|
title: '修改报销状态',
|
|
content: '<div style="padding: 20px;">' +
|
|
'<select id="statusSelect" lay-filter="statusSelect" class="layui-input">' +
|
|
'<option value="未报销" ' + (currentStatus === '未报销' ? 'selected' : '') + '>未报销</option>' +
|
|
'<option value="已报销" ' + (currentStatus === '已报销' ? 'selected' : '') + '>已报销</option>' +
|
|
'</select>' +
|
|
'<button class="layui-btn layui-btn-sm" onclick="updateStatus(' + id + ')" style="margin-left: 20px;">确定</button>' +
|
|
'</div>'
|
|
});
|
|
});
|
|
}
|
|
|
|
//修改账单状态
|
|
function editlock(id) {
|
|
var id = document.getElementById('pid').value;
|
|
// console.log(id);
|
|
var currentlock = "{$detail.lock}";
|
|
layui.use('layer', function () {
|
|
var layer = layui.layer;
|
|
layer.open({
|
|
type: 1,
|
|
title: '修改账单状态',
|
|
content: '<div style="padding: 20px; display: flex; align-items: center;">' +
|
|
'<select id="lockSelect" class="layui-input">' +
|
|
'<option value="未锁定" ' + (currentlock === '未锁定' ? 'selected' : '') + '>未锁定</option>' +
|
|
'<option value="锁定" ' + (currentlock === '锁定' ? 'selected' : '') + '>锁定</option>' +
|
|
'</select>' +
|
|
'<button class="layui-btn layui-btn-sm" onclick="updatelocks(' + id + ')" style="margin-left: 20px;">确定</button>' +
|
|
'</div>'
|
|
});
|
|
});
|
|
}
|
|
|
|
//更新报销状态接口
|
|
function updateStatus(id) {
|
|
var status = $('#statusSelect').val();
|
|
$.ajax({
|
|
url: '/reimbursement/index/editstatus',
|
|
type: 'POST',
|
|
data: { id: id, status: status },
|
|
success: function (response) {
|
|
if (response.code === 0) {
|
|
layer.closeAll();
|
|
layer.msg(response.msg, { icon: 1 });
|
|
} else {
|
|
layer.msg(response.msg, { icon: 2 });
|
|
}
|
|
},
|
|
error: function () {
|
|
layer.msg('请求失败', { icon: 2 });
|
|
}
|
|
});
|
|
}
|
|
|
|
//更新账单状态接口
|
|
function updatelocks(id) {
|
|
var lock = $('#lockSelect').val();
|
|
$.ajax({
|
|
url: '/reimbursement/index/editlock',
|
|
type: 'POST',
|
|
data: { id: id, lock: lock },
|
|
success: function (response) {
|
|
if (response.code === 0) {
|
|
layer.closeAll();
|
|
layer.msg(response.msg, { icon: 1 });
|
|
} else {
|
|
layer.msg(response.msg, { icon: 2 });
|
|
}
|
|
},
|
|
error: function () {
|
|
layer.msg('请求失败', { icon: 2 });
|
|
}
|
|
});
|
|
}
|
|
|
|
</script> |