349 lines
15 KiB
HTML
349 lines
15 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;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<form action="">
|
||
<div class="page-content">
|
||
<div class="p-4 border-b">
|
||
<h3 class="h3-title hover">
|
||
<span>报销编号 - </span><span>{$detail.id}</span>
|
||
</h3>
|
||
<input type="text" name="pid" lay-verify="" class="layui-input" value="{$detail.pid}" id="pid"
|
||
style="display: none;"/>
|
||
<input type="text" name="department" lay-verify="" class="layui-input" value="{$detail.department}"
|
||
id="department" style="display: none;"/>
|
||
<input type="text" name="project" lay-verify="" class="layui-input" value="{$detail.project}"
|
||
id="project" style="display: none;"/>
|
||
<input type="text" name="dates" lay-verify="" class="layui-input" value="" id="dates"
|
||
style="display: none;"/>
|
||
<input type="text" name="id" lay-verify="" class="layui-input" value="{$detail.id}" id="id"
|
||
style="display: none;"/>
|
||
</div>
|
||
<div class="layui-row border-b">
|
||
<table class="layui-table layui-table-form">
|
||
<tr>
|
||
<td class="layui-td-gray-2">费用类型</td>
|
||
<td>
|
||
<select name="cate" lay-verify="required" lay-reqText="请选择费用类型" class="layui-select"
|
||
lay-search lay-filter="cate" style="width: 100%;" id="cate">
|
||
<option value="">请选择费用类型</option>
|
||
</select>
|
||
</td>
|
||
<td class="layui-td-gray-2">隶属项目</td>
|
||
<td>
|
||
<select name="project" lay-verify="required" lay-reqText="请选择隶属项目" class="layui-select"
|
||
lay-search lay-filter="cate" style="width: 100%;" id="project">
|
||
<option value="">请选择隶属项目</option>
|
||
</select>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="layui-td-gray-2">报销金额</td>
|
||
<td>
|
||
<input type="text" name="price" lay-verify="" lay-reqText="请填入报销金额，例如：52.00"
|
||
placeholder="请填入报销金额，例如：52.00" class="layui-input" value="{$detail.price}"
|
||
id="price"/>
|
||
</td>
|
||
<td class="layui-td-gray-2">是否有票</td>
|
||
<td>
|
||
<select name="haveticket" lay-verify="required" lay-reqText="请选择" class="layui-select"
|
||
lay-search lay-filter="haveticket" style="width: 100%;">
|
||
<option value="无">无</option>
|
||
<option value="有">有</option>
|
||
</select>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="layui-td-gray-2">发生时间</td>
|
||
<td>
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="times" class="layui-input" id="times" placeholder="yyyy年MM月dd日"
|
||
value="{$detail.times}">
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="layui-td-gray-2">上传票据</td>
|
||
<td colspan="4">
|
||
<input type="hidden" name="tickets" id="ticketsInput" value="{$detail.tickets}">
|
||
<div id="no-ticket-msg" style="color: red;">当前无票，不可上传</div>
|
||
<div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag">
|
||
<i class="layui-icon layui-icon-upload"></i>
|
||
<div>点击上传，或将文件拖拽到此处</div>
|
||
<div class="layui-hide" id="tickets">
|
||
<hr>
|
||
<img src="{#tickets}" alt="上传成功后渲染" style="max-width: 100%">
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="layui-td-gray-2">上传附件</td>
|
||
<td colspan="4">
|
||
<div class="layui-upload">
|
||
<button type="button" class="layui-btn layui-btn-normal" id="uploadfile">选择多文件</button>
|
||
<div class="layui-upload-list">
|
||
<table class="layui-table">
|
||
<colgroup>
|
||
<col style="min-width: 100px;">
|
||
<col width="150">
|
||
<col width="260">
|
||
<col width="150">
|
||
</colgroup>
|
||
<thead>
|
||
<th>文件名</th>
|
||
<th>大小</th>
|
||
<th>上传进度</th>
|
||
<th>操作</th>
|
||
</thead>
|
||
<tbody id="update"></tbody>
|
||
</table>
|
||
</div>
|
||
<button type="button" class="layui-btn" id="uploadfileaction">开始上传</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="layui-td-gray-2">备注</td>
|
||
<td colspan="4">
|
||
<input type="text" name="remark" lay-verify="" lay-reqText="" placeholder=""
|
||
class="layui-input" value="{$detail.remark}" id="remark"/>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="close">
|
||
<button class="layui-btn layui-btn-normal" lay-filter="webform" lay-submit="">
|
||
立即提交
|
||
</button>
|
||
</div>
|
||
</form>
|
||
|
||
</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 form = layui.form;
|
||
var layer = layui.layer;
|
||
var upload = layui.upload;
|
||
var element = layui.element;
|
||
var laydate = layui.laydate;
|
||
|
||
upload.render({
|
||
elem: '#ID-upload-demo-drag',
|
||
url: '/api/index/upload',
|
||
done: function (res) {
|
||
layer.msg('上传成功');
|
||
// 将图片路径赋值给隐藏的 input 元素
|
||
document.getElementById('ticketsInput').value = res.data.filepath;
|
||
console.log(res);
|
||
}
|
||
});
|
||
|
||
// 获取项目类别
|
||
fetch("/reimbursement/index/getproject")
|
||
.then((response) => response.json())
|
||
.then((data) => {
|
||
var select = document.querySelector('select[name="project"]');
|
||
select.innerHTML = '<option value="">请选择项目类型</option>';
|
||
data.data.forEach((project) => {
|
||
var option = document.createElement("option");
|
||
option.value = project.id;
|
||
option.innerText = project.project;
|
||
select.appendChild(option);
|
||
});
|
||
select.value = '{$detail.project}';
|
||
form.render("select");
|
||
})
|
||
.catch((error) => {
|
||
console.error("Error:", error);
|
||
});
|
||
|
||
//渲染日期选择
|
||
// laydate.render({
|
||
// elem: '#times',
|
||
// format: 'yyyy年MM月dd日',
|
||
// done: function (value) {
|
||
// console.log('您选择的日期是：' + value);
|
||
// times = value.replace(/年|月/g, '-').replace('日', '');
|
||
// }
|
||
// });
|
||
|
||
// 上传附件渲染
|
||
// 制作多文件上传表格
|
||
var uploadListIns = upload.render({
|
||
elem: '#uploadfile',
|
||
elemList: $('#update'),
|
||
url: '/api/index/upload',
|
||
accept: 'file',
|
||
multiple: true,
|
||
number: 3,
|
||
auto: false,
|
||
bindAction: '#uploadfileaction',
|
||
choose: function (obj) {
|
||
var that = this;
|
||
var files = this.files = obj.pushFile();
|
||
// 读取本地文件
|
||
obj.preview(function (index, file, result) {
|
||
var tr = $('<tr id="upload-' + index + '">' +
|
||
'<td>' + file.name + '</td>' +
|
||
'<td>' + (file.size / 1024).toFixed(1) + 'kb</td>' +
|
||
'<td><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>' +
|
||
'<td>' +
|
||
'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>' +
|
||
'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>' +
|
||
'</td>' +
|
||
'</tr>');
|
||
|
||
// 单个重传
|
||
tr.find('.demo-reload').on('click', function () {
|
||
obj.upload(index, file);
|
||
});
|
||
// 删除
|
||
tr.find('.demo-delete').on('click', function () {
|
||
delete files[index];
|
||
tr.remove();
|
||
// 清空 input file 值，以免删除后出现同名文件不可选
|
||
uploadListIns.config.elem.next()[0].value = '';
|
||
});
|
||
$('#update').append(tr);
|
||
element.render('progress');
|
||
});
|
||
},
|
||
done: function (res, index, upload) {
|
||
var that = this;
|
||
var tr = $('#update').find('tr#upload-' + index);
|
||
var tds = tr.children();
|
||
tds.eq(3).html('');
|
||
delete this.files[index];
|
||
return;
|
||
//}
|
||
this.error(index, upload);
|
||
},
|
||
allDone: function (obj) {
|
||
console.log(obj);
|
||
},
|
||
error: function (index, upload) {
|
||
var that = this;
|
||
var tr = $('#update').find('tr#upload-' + index);
|
||
var tds = tr.children();
|
||
// 显示重传
|
||
tds.eq(3).find('.demo-reload').removeClass('layui-hide');
|
||
},
|
||
progress: function (n, elem, e, index) {
|
||
element.progress('progress-demo-' + index, n + '%');
|
||
}
|
||
});
|
||
|
||
// 获取费用类型
|
||
fetch("/reimbursement/index/reimcate")
|
||
.then((response) => response.json())
|
||
.then((data) => {
|
||
var select = document.querySelector('select[name="cate"]');
|
||
// select.innerHTML = '<option value="">请选择费用类型</option>';
|
||
data.data.forEach((cate) => {
|
||
var option = document.createElement("option");
|
||
option.value = cate.id;
|
||
option.innerText = cate.cate;
|
||
select.appendChild(option);
|
||
});
|
||
select.value = '{$detail.cate}';
|
||
form.render("select");
|
||
})
|
||
.catch((error) => {
|
||
console.error("Error:", error);
|
||
});
|
||
|
||
//监听提交结果
|
||
form.on("submit(webform)", function (data) {
|
||
fetch("/reimbursement/index/editdetailitem", {
|
||
method: "POST",
|
||
body: JSON.stringify({
|
||
id: document.getElementById('id').value,
|
||
pid: document.getElementById('pid').value,
|
||
project: document.querySelector('select[name="project"]').value,
|
||
department: document.getElementById('department').value,
|
||
cate: document.querySelector('select[name="cate"]').value,
|
||
haveticket: document.querySelector('select[name="haveticket"]').value,
|
||
price: document.getElementById('price').value,
|
||
remark: document.getElementById('remark').value,
|
||
times: document.getElementById('times').value,
|
||
tickets: document.getElementById('ticketsInput').value,
|
||
}),
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
})
|
||
.then((response) => response.json())
|
||
.then((result) => {
|
||
layer.msg(result.msg, {
|
||
time: 1000,
|
||
end: function () {
|
||
if (result.code === 0) {
|
||
var index = window.parent.layer.getFrameIndex(window.name);
|
||
window.parent.layer.close(index);
|
||
window.parent.layui.table.reload('reimbursementdetail'); // 刷新表格
|
||
}
|
||
}
|
||
});
|
||
});
|
||
return false;
|
||
});
|
||
}
|
||
|
||
</script>
|
||
<script>
|
||
// 获取是否有票选择框元素
|
||
const haveticketSelect = document.querySelector('select[name="haveticket"]');
|
||
// 获取上传票据区域元素
|
||
const uploadSection = document.querySelector('#ID-upload-demo-drag');
|
||
// 获取无票提示信息元素
|
||
const noTicketMsg = document.getElementById('no-ticket-msg');
|
||
|
||
// 初始隐藏上传票据区域
|
||
uploadSection.style.display = 'none';
|
||
|
||
// 监听是否有票选择框的change事件
|
||
haveticketSelect.addEventListener('change', function () {
|
||
// 如果选择了有票
|
||
if (haveticketSelect.value === '有') {
|
||
// 显示上传票据区域
|
||
uploadSection.style.display = 'block';
|
||
// 隐藏无票提示信息
|
||
noTicketMsg.style.display = 'none';
|
||
} else {
|
||
// 否则隐藏上传票据区域
|
||
uploadSection.style.display = 'none';
|
||
// 显示无票提示信息
|
||
noTicketMsg.style.display = 'block';
|
||
}
|
||
});
|
||
</script>
|
||
<script src="/static/assets/layui/layui.js"></script>
|
||
<script src="/static/assets/gougu/gouguInit.js"></script> |