Browse Source
新增：报销单财务审核页面，整理财务审核根据报销方式是否为公转报销，来显示供应商信息。新增：报销单修改方法新增子表修改，子表修改时获取当前登录的申请用户信息。 修改：报销单清除多余的报销人，与申请人一致的字段清除。dev
zhangsiqi
3 months ago
12 changed files with 1318 additions and 407 deletions
@ -1,39 +1,285 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" > |
|||
<head> |
|||
<th:block th:include="include :: header('财务报销审核')" /> |
|||
<th:block th:include="include :: header('财务审核')" /> |
|||
<th:block th:include="include :: datetimepicker-css" /> |
|||
<th:block th:include="include :: select2-css" /> |
|||
</head> |
|||
<body class="white-bg"> |
|||
<div class="wrapper wrapper-content animated fadeInRight ibox-content"> |
|||
<form class="form-horizontal m" id="form-expense-cw-audit" th:object="${formData}"> |
|||
<form class="form-horizontal m" id="form-baseExpense-cw" th:object="${formData}"> |
|||
<input name="expenseId" th:field="*{expenseId}" type="hidden"> |
|||
<input name="taskId" th:field="*{taskId}" type="hidden"> |
|||
<input name="taskName" th:field="*{taskName}" type="hidden"> |
|||
<input name="instanceId" th:field="*{instanceId}" type="hidden"> |
|||
<input name="instanceType" th:field="*{instanceType}" type="hidden"> |
|||
<input type="hidden" name="p_COM_comment" /> |
|||
<div class="form-group"> |
|||
<label class="col-sm-3 control-label">申请人：</label> |
|||
<div class="col-sm-8"> |
|||
<input name="applyUserName" th:field="*{applyUserName}" class="form-control" type="text" readonly> |
|||
</div> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label class="col-sm-3 control-label">申请时间：</label> |
|||
<div class="col-sm-8"> |
|||
<div class="input-group date"> |
|||
<span class="input-group-addon"><i class="fa fa-calendar"></i></span> |
|||
<input name="applyTime" th:value="${#dates.format(formData.applyTime, 'yyyy-MM-dd HH:mm')}" class="form-control" type="text" disabled> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label class="col-sm-3 control-label">标题：</label> |
|||
<div class="col-sm-8"> |
|||
<input name="title" th:field="*{applyTitle}" class="form-control" type="text" readonly> |
|||
</div> |
|||
</div> |
|||
<div class="form-group" hidden="hidden"> |
|||
<label class="col-sm-3 control-label">报销单号：</label> |
|||
<div class="col-sm-8"> |
|||
<input name="expenseCode" th:field="*{expenseCode}" class="form-control" type="text"> |
|||
</div> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label class="col-sm-3 control-label">部门：</label> |
|||
<div class="col-sm-8"> |
|||
<select name="deptName" th:field="*{deptName}" class="form-control"></select> |
|||
</div> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label class="col-sm-3 control-label">岗位：</label> |
|||
<div class="col-sm-8"> |
|||
<select name="postName" th:field="*{postName}" class="form-control"></select> |
|||
</div> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label class="col-sm-3 control-label">姓名：</label> |
|||
<div class="col-sm-8"> |
|||
<select name="fullName" th:field="*{fullName}" class="form-control"></select> |
|||
</div> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label class="col-sm-6 control-label">报销方式：</label> |
|||
<div class="col-sm-6"> |
|||
<select id="cw_expenseMethod" name="expenseMethod" th:field="*{expenseMethod}" onchange="handleExpenseMethod(this)" class="form-control" th:with="dictList=${@dict.getType('sys_base_expense_method')}"> |
|||
<option th:each="dict : ${dictList}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option> |
|||
</select> |
|||
</div> |
|||
</div> |
|||
<div id="cw_expenseMethodModal" class="container" style="display: none"> |
|||
<div class="form-group"> |
|||
<label class="col-sm-6 control-label">是否是委外/采购采销：</label> |
|||
<div class="col-sm-6"> |
|||
<select name="isPurchaseOutsource" class="form-control" th:with="dictList=${@dict.getType('sys_whether')}"> |
|||
<option th:each="dict : ${dictList}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option> |
|||
</select> |
|||
</div> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label class="col-sm-6 control-label">供应商ID：</label> |
|||
<div class="col-sm-6"> |
|||
<select id="supplierCode" name="supplierCode" class="form-control"> |
|||
</select> |
|||
</div> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label class="col-sm-6 control-label">对公收款方：</label> |
|||
<div class="col-sm-6"> |
|||
<input name="corporatePayee" class="form-control" type="text"> |
|||
</div> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label class="col-sm-6 control-label">对公收款账户：</label> |
|||
<div class="col-sm-6"> |
|||
<input name="corporateReceivingAccount" class="form-control" type="text"> |
|||
</div> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label class="col-sm-6 control-label">对公开户行：</label> |
|||
<div class="col-sm-6"> |
|||
<input name="publicAccountBanks" class="form-control" type="text"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label class="col-sm-3 control-label is-required" for="cwVerifyApproved">审批意见：</label> |
|||
<div class="col-sm-6"> |
|||
<select name="p_B_cwVerifyApproved" id="cwVerifyApproved" class="form-control" required> |
|||
<option value=""></option> |
|||
<option value="true">同意</option> |
|||
<option value="false">拒绝</option> |
|||
</select> |
|||
</div> |
|||
</div> |
|||
|
|||
</form> |
|||
<div class="container"> |
|||
<div class="form-row"> |
|||
<div class="btn-group-sm" id="toolbar" role="group"> |
|||
<span>选择报销分类信息</span> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-sm-12 select-table table-striped"> |
|||
<table id="bootstrap-sub-table-expense-cw"></table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<th:block th:include="include :: footer" /> |
|||
<th:block th:include="include :: datetimepicker-js" /> |
|||
<th:block th:include="include :: select2-js" /> |
|||
<script th:src="@{/js/activiti.js}"></script> |
|||
<script th:inline="javascript"> |
|||
var prefix = ctx + "system/requisitioning"; |
|||
$("#form-expense-cw-audit").validate({focusCleanup: true}); |
|||
|
|||
function submitHandler() { |
|||
if ($.validate.form()) { |
|||
$.operate.save(prefix + "/complete/"+taskId, $('#form-expense-cw-audit').serialize()); |
|||
var prefix = ctx + "system/baseExpense"; |
|||
var costTypeDatas = [[${@category.getChildByCode('costType')}]]; |
|||
var taskId = [[${taskId}]]; |
|||
$("#form-baseExpense-cw").validate({focusCleanup: true}); |
|||
$(function() { |
|||
var options = { |
|||
id:'bootstrap-sub-table-expense-cw', |
|||
url: ctx + "system/expenseChild/list", |
|||
queryParams: function(params) { |
|||
return { |
|||
expenseCode: $("#expenseCode").val() |
|||
}; |
|||
}, |
|||
pagination: false, |
|||
sidePagination: "client", |
|||
model: "报销单数据", |
|||
editable: true, |
|||
columns: [ |
|||
{checkbox: true}, |
|||
{title: '主键',field: 'index',visible: false, |
|||
formatter: function (value, row, index) { |
|||
return index; |
|||
} |
|||
}, |
|||
{title: '报销单分项子表',field: 'expenseChildId',visible: false}, |
|||
{title: '关联报销单号',field: 'expenseCode',visible: false}, |
|||
{title: '成本类型',field: 'costType', |
|||
formatter:function (value, row, index) { |
|||
return costTypeFormatter(value,row,index); |
|||
} |
|||
}, |
|||
{title: '成本小类',field: 'costSmallType', |
|||
formatter:function(value, row, index){ |
|||
return getCostSmallType(value,row,index) |
|||
} |
|||
}, |
|||
{title: '用途',field: 'purpose',editable:{type:'text',mode:'inline'}}, |
|||
{title: '金额',field: 'amounts',editable: {type:'text',mode:'inline'}}, |
|||
{title: '报销时间',field: 'expenseTime',editable:{type:'date',mode:'inline',}}, |
|||
{title: '出差单号',field: 'evectionCode',editable: {type:'text',mode:'inline'}}, |
|||
{title: '采购单号',field: 'purcahseCode',editable: {type:'text',mode:'inline',}}, |
|||
{title: '委外单号',field: 'outsourceCode',editable: {type:'text',mode:'inline',}}, |
|||
], |
|||
}; |
|||
$.table.init(options); |
|||
}); |
|||
// 列中获取成本类型的下拉改变数据 |
|||
function onCostTypeChange(selectElement, rowIndex) { |
|||
var newSupplierId = $(selectElement).val(); |
|||
var tableData = $table.bootstrapTable('getData'); |
|||
var newRow = tableData[rowIndex]; // 获取当前行数据 |
|||
newRow.costType = newSupplierId; // 更新供应商ID |
|||
// 重新渲染成本小类的设备名称列 |
|||
// 更新行数据 |
|||
$table.bootstrapTable('updateRow', {index: rowIndex, row: newRow}); |
|||
} |
|||
|
|||
function getSelections(){ |
|||
// 自定义供应商名称列的格式化函数 |
|||
function costTypeFormatter(value, row, index) { |
|||
var selectHtml = '<select class="form-control" disabled onchange="onCostTypeChange(this, ' + index + ')">'; |
|||
costTypeDatas.forEach(function (child) { |
|||
selectHtml += '<option value="' + child.code + '"' + (value === child.code ? ' selected' : '') + '>' + child.name + '</option>' ; |
|||
}); |
|||
selectHtml += '</select>'; |
|||
return selectHtml; |
|||
} |
|||
|
|||
// 自定义设备名称列的格式化函数，依赖于供应商列的选择 |
|||
function getCostSmallType(value, row, index) { |
|||
var selectHtml = '<select class="form-control" disabled onchange="onCostSmallTypeChange(this, ' + index + ')">'; |
|||
// 假设此函数根据供应商ID返回设备列表 |
|||
var costSamllTypes = []; |
|||
$.ajax({ |
|||
url: ctx + "system/requisitioning/getEmpUserName", |
|||
type: "get", |
|||
dataType: "json", |
|||
success: function (data) { |
|||
$("select[name='deptName']").append($('<option></option>').val(data.deptName).html(data.deptName)); |
|||
$("select[name='evectionBy']").append($('<option></option>').val(data.userName).html(data.userName)); |
|||
$("select[name='postName']").append($('<option></option>').val(data.postName).html(data.postName)); |
|||
url: ctx + 'system/category/getChildCode', |
|||
type: 'post', |
|||
data: {code: row.costType}, |
|||
async: false, |
|||
success: function (result) { |
|||
console.log(result); |
|||
costSamllTypes = result; |
|||
} |
|||
}); |
|||
if (costSamllTypes) { |
|||
costSamllTypes.forEach(function (child) { |
|||
selectHtml += '<option value="' + child.code + '"' + (value === child.code ? ' selected' : '') + '>' + child.name + '</option>'; |
|||
}); |
|||
selectHtml += '</select>'; |
|||
return selectHtml; |
|||
} |
|||
} |
|||
|
|||
function onCostSmallTypeChange(selectElement, rowIndex) { |
|||
var newCostSmallType = $(selectElement).val(); |
|||
var tableData = $table.bootstrapTable('getData'); |
|||
var newRow = tableData[rowIndex]; // 获取当前行数据 |
|||
newRow.costSmallType = newCostSmallType; |
|||
// 重新渲染当前行的设备名称列 |
|||
// 更新行数据 |
|||
$table.bootstrapTable('updateRow', {index: rowIndex, row: newRow}); |
|||
} |
|||
|
|||
// 假设此函数返回供应商列表 |
|||
$("#supplierCode").select2({ |
|||
theme: "bootstrap", |
|||
allowClear: true, |
|||
placeholder: "请选择供应商", |
|||
ajax: { |
|||
url: '/system/supplier/getSupplier', |
|||
dataType: 'json', |
|||
method: "post", |
|||
delay: 250, |
|||
processResults: function (res, params) { |
|||
var options = []; |
|||
if(res.code==0){ |
|||
var resultList = res.rows; |
|||
for(let i in resultList){ |
|||
var option = resultList[i]; |
|||
option.id = resultList[i]["supplierCode"]; |
|||
option.text = resultList[i]["supplierCode"]; |
|||
options.push(option); |
|||
} |
|||
} |
|||
return {results: options}; |
|||
} |
|||
} |
|||
}); |
|||
function handleExpenseMethod(expenseMethodSelect) { |
|||
//获取页面元素中的下拉框选中的值 |
|||
var expenseMethod = $("#cw_expenseMethod option:selected").val(); |
|||
if (expenseMethod === '1') { |
|||
$("#cw_expenseMethodModal").show(); |
|||
} else { |
|||
$("#cw_expenseMethodModal").hide(); |
|||
} |
|||
} |
|||
$('#supplierCode').on('select2:select', function (e) { |
|||
var data = e.params.data; |
|||
$("input[name='corporatePayee']").val(data.supplierName); |
|||
$("input[name='corporateReceivingAccount']").val(data.bankAccount); |
|||
$("input[name='publicAccountBanks']").val(data.depositBank); |
|||
}); |
|||
function submitHandler() { |
|||
if ($.validate.form()) { |
|||
if ($('textarea[name="comment"]').val()) { |
|||
$('input[name="p_COM_comment"]').val($('textarea[name="comment"]').val()); |
|||
} |
|||
$.operate.save(prefix + "/complete/"+taskId, $('#form-baseExpense-cw').serialize()); |
|||
} |
|||
} |
|||
</script> |
|||
</body> |
|||
|
|||
Loading…
Reference in new issue