385 lines
14 KiB
HTML
385 lines
14 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">
|
||
<!-- <link rel="stylesheet" href="/static/assets/gougu/css/layout.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>
|
||
</h3>
|
||
<!-- pid等参数 -->
|
||
<input type="text" name="pid" lay-verify="" class="layui-input" value="" id="pid" style="display: none;" />
|
||
<input type="text" name="department" lay-verify="" class="layui-input" value="" id="department"
|
||
style="display: none;" />
|
||
<input type="text" name="project" lay-verify="" class="layui-input" value="" id="project"
|
||
style="display: none;" />
|
||
<input type="text" name="dates" lay-verify="" class="layui-input" value="" id="dates" 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"></select>
|
||
</td>
|
||
<td class="layui-td-gray-2">隶属项目
|
||
</td>
|
||
<td>
|
||
<select name="project" lay-verify="required" class="layui-select" lay-search=""
|
||
lay-filter="project" style="width: 100%;" id="project"></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="" 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>
|
||
<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日">
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="layui-td-gray-2">上传票据
|
||
</td>
|
||
<td colspan="4">
|
||
<input type="hidden" name="tickets" id="ticketsInput" value="">
|
||
<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=""
|
||
id="remark" />
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="close">
|
||
<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">
|
||
立即提交
|
||
</button>
|
||
</div>
|
||
</form>
|
||
|
||
</body>
|
||
|
||
<script>
|
||
// 获取URL参数中的pid的值
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const pidValue = urlParams.get('pid');
|
||
const departmentValue = urlParams.get('department');
|
||
const projectValue = urlParams.get('project');
|
||
// 将获取的日期时间数据格式转换为日期数据格式
|
||
const datesValue = urlParams.get('dates');
|
||
const dates = new Date(datesValue);
|
||
console.log(dates);
|
||
const formattedDate = dates.toISOString().split('T')[0];
|
||
|
||
// 将pid的值设置给id为pid的input元素
|
||
document.getElementById('pid').value = pidValue;
|
||
document.getElementById('department').value = departmentValue;
|
||
document.getElementById('project').value = projectValue;
|
||
document.getElementById('dates').value = formattedDate;
|
||
|
||
// 获取是否有票选择框元素
|
||
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>
|
||
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);
|
||
});
|
||
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);
|
||
});
|
||
form.render("select");
|
||
})
|
||
.catch((error) => {
|
||
console.error("Error:", error);
|
||
});
|
||
|
||
//监听提交结果
|
||
form.on("submit(webform)", function (data) {
|
||
fetch("/reimbursement/index/additem", {
|
||
method: "POST",
|
||
body: JSON.stringify({
|
||
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: times,
|
||
// 使用隐藏的 input 元素的值
|
||
tickets: document.getElementById('ticketsInput').value,
|
||
}),
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
})
|
||
.then((response) => response.json())
|
||
.then((result) => {
|
||
// 显示提示消息
|
||
layer.msg(result.msg, {
|
||
time: 1000,
|
||
end: function () {
|
||
// 检查后端返回的 code，如果等于 2 则关闭 #additem 的 layer
|
||
if (result.code === 2) {
|
||
var index = window.parent.layer.getFrameIndex(window.name);
|
||
window.parent.layer.close(index);
|
||
// 向父页面返回值999
|
||
if (window.parent.opener) {
|
||
window.parent.opener.returnValue = 999;
|
||
console.log(window.parent.opener.returnValue);
|
||
} else {
|
||
console.log("No parent opener found.");
|
||
}
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
return false;
|
||
});
|
||
|
||
|
||
|
||
|
||
|
||
}
|
||
|
||
</script>
|
||
|
||
<script type="text/html" id="barDemo">
|
||
<a class="layui-btn layui-btn-xs " lay-event="edit">编辑</a>
|
||
<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="delete">删除</a>
|
||
</script>
|
||
<script src="/static/assets/layui/layui.js"></script>
|
||
<script src="/static/assets/gougu/gouguInit.js"></script> |