first commit
This commit is contained in:
@@ -0,0 +1,242 @@
|
||||
<style>
|
||||
.layui-table-cell {
|
||||
overflow: visible;
|
||||
text-overflow: inherit;
|
||||
height: auto !important;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
.layui-table-box {
|
||||
min-height: 400px !important;
|
||||
}
|
||||
|
||||
.layui-table-body {
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
<form class="layui-form page-content p-4">
|
||||
<h3 class="h3-title">新建报销</h3>
|
||||
<div class="p-4 border-b">
|
||||
<h3 class="h3-title hover">
|
||||
<span>基本信息</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="layui-row border-b">
|
||||
<table class="layui-table layui-table-form">
|
||||
<tr>
|
||||
<td class="layui-td-gray-2">账单编号<font>*</font>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" name="order" lay-verify="required" disabled class="layui-input"
|
||||
value="{{ generateBillNumber() }}" />
|
||||
</td>
|
||||
<td class="layui-td-gray-2">隶属部门<font>*</font>
|
||||
</td>
|
||||
<td colspan="3">
|
||||
<select name="department" lay-verify="required" lay-reqText="请选择项目类型" class="layui-select" lay-search=""
|
||||
lay-filter="department"></select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="layui-td-gray-2">隶属项目<font>*</font>
|
||||
</td>
|
||||
<td colspan="4">
|
||||
<select name="project" lay-verify="required" lay-reqText="请选择项目类型" class="layui-select" lay-search=""
|
||||
lay-filter="project"></select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="layui-td-gray-2">备注
|
||||
</td>
|
||||
<td colspan="4">
|
||||
<textarea name="schedule" lay-verify="" lay-reqText="请输入" placeholder="请输入备注" class="layui-textarea" value=""
|
||||
rows="1"></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="p-4 border-b">
|
||||
<h3 class="h3-title hover">
|
||||
<span>报销信息</span>
|
||||
<button class="layui-btn layui-btn-normal" id="addRowBtn">增加条目</button>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="layui-row border-b">
|
||||
<table class="layui-table" id="editableTable"></table>
|
||||
</div>
|
||||
|
||||
<div class="pt-1">
|
||||
<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">
|
||||
立即提交
|
||||
</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- 模态框 -->
|
||||
<div id="myModal" style="display:none;">
|
||||
<div class="layui-form layui-form-pane" style="padding: 20px;">
|
||||
<!-- 在这里放置你的表单内容 -->
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">报销类别</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="reimcate" lay-verify="required">
|
||||
<option value=""></option>
|
||||
<!-- 这里放置报销类别的选项 -->
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 其他表单项 -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
//生成账单编号
|
||||
function generateBillNumber() {
|
||||
var currentDate = new Date();
|
||||
var year = currentDate.getFullYear().toString().slice(-2);
|
||||
var month = ('0' + (currentDate.getMonth() + 1)).slice(-2);
|
||||
var day = ('0' + currentDate.getDate()).slice(-2);
|
||||
var hours = ('0' + currentDate.getHours()).slice(-2);
|
||||
var minutes = ('0' + currentDate.getMinutes()).slice(-2);
|
||||
var seconds = ('0' + currentDate.getSeconds()).slice(-2);
|
||||
var milliseconds = ('00' + currentDate.getMilliseconds()).slice(-3);
|
||||
|
||||
return year + month + day + hours + minutes + seconds + milliseconds;
|
||||
}
|
||||
// 修改生成账单编号的函数，直接设置到对应的input元素的value属性上
|
||||
function setBillNumber() {
|
||||
var billNumber = generateBillNumber();
|
||||
document.querySelector('input[name="order"]').value = billNumber;
|
||||
}
|
||||
|
||||
// 调用函数设置账单编号
|
||||
setBillNumber();
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
layui.use(["form", "layer", "table", "jquery"], function () {
|
||||
var form = layui.form,
|
||||
layer = layui.layer,
|
||||
table = layui.table,
|
||||
$ = layui.jquery;
|
||||
|
||||
// 初始化表格
|
||||
var editableTable = table.render({
|
||||
elem: '#editableTable',
|
||||
cols: [[
|
||||
{
|
||||
field: 'cate', title: '报销类别', templet: function (d) {
|
||||
return `<select name="reimcate${d.LAY_INDEX}" class="layui-select" lay-filter="reimcateSelects"></select>`;
|
||||
}
|
||||
},
|
||||
{ field: 'price', title: '报销金额', edit: 'text' },
|
||||
{ field: 'haveticket', title: '是否有票', edit: 'text' },
|
||||
{ field: 'tickets', title: '发票查看', edit: 'text' },
|
||||
{ field: 'remark', title: '备注', edit: 'text' },
|
||||
{ fixed: 'right', title: "操作", align: "center", toolbar: "#barDemo" },
|
||||
]],
|
||||
data: []
|
||||
});
|
||||
|
||||
// 点击按钮打开模态框
|
||||
$("#addRowBtn").on("click", function (event) {
|
||||
event.preventDefault(); // 阻止默认的点击行为
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '新增条目',
|
||||
shade: 0.8,
|
||||
area: ['70%', '90%'], // 宽高
|
||||
content: '/reimbursement/index/additem',//
|
||||
success: function (layero, index) {
|
||||
// 弹出层加载成功后的回调，可在此处进行其他操作
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 获取项目类别
|
||||
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);
|
||||
});
|
||||
|
||||
// 获取部门
|
||||
fetch("/reimbursement/index/getdepartment")
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
var select = document.querySelector('select[name="department"]');
|
||||
select.innerHTML = '<option value="">请选择项目类型</option>';
|
||||
data.data.forEach((department) => {
|
||||
var option = document.createElement("option");
|
||||
option.value = department.id;
|
||||
option.innerText = department.department;
|
||||
select.appendChild(option);
|
||||
});
|
||||
form.render("select");
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error:", error);
|
||||
});
|
||||
|
||||
// 获取报销类别
|
||||
// fetch("/reimbursement/index/reimcate")
|
||||
// .then((response) => response.json())
|
||||
// .then((data) => {
|
||||
// var select = document.querySelector('select[name="reimcate"]');
|
||||
// select.innerHTML = '<option value="">请选择项目类型</option>';
|
||||
// data.data.forEach((reimcate) => {
|
||||
// var option = document.createElement("option");
|
||||
// option.value = reimcate.id;
|
||||
// option.innerText = reimcate.reimcate;
|
||||
// select.appendChild(option);
|
||||
// });
|
||||
// form.render("select");
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.error("Error:", error);
|
||||
// });
|
||||
|
||||
// 监听提交事件
|
||||
form.on("submit(webform)", function (data) {
|
||||
// 发送请求并处理响应
|
||||
fetch("/reimbursement/index/add", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(data.field),
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((result) => {
|
||||
layer.msg(result.msg);
|
||||
if (result.code === 2) {
|
||||
setTimeout(function () {
|
||||
document.querySelector("form").reset(); // Reset the form
|
||||
location.reload(); // 刷新页面
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="barDemo">
|
||||
<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="delete">删除</a>
|
||||
</script>
|
||||
Reference in New Issue
Block a user