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/edititem", {
|
|
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> |