前台页面
// staffWage\orgExamForm\StaffWageOrgExamForm.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="renderer" content="webkit" />
<title>用工单位项目人员工资表</title>
<link href="../../../../styles/simple-line-icons.css" rel="stylesheet" />
<link
href="../../../../libs/kendoui.2018.3.1017/styles/kendo.common-bootstrap.min.css"
rel="stylesheet"
/>
<link
href="../../../../libs/kendoui.2018.3.1017/styles/kendo.bootstrap.min.css"
rel="stylesheet"
/>
<link href="../../../../styles/emscss/nav_menu3.css" rel="stylesheet" />
<link href="../../../../styles/emscss/style.css" rel="stylesheet" />
<style>
th[role='columnheader'] {
text-align: center !important;
}
.clearfloat {
clear: both;
}
#loading {
position: fixed;
top: 40%;
left: 45%;
z-index: 999;
}
.customGrid td[role='gridcell'] {
text-align: right;
padding: 4px;
font-size: 12px;
white-space: nowrap;
}
</style>
</head>
<body style="background-color: #FFFFFF; font-size:1.5em">
<table border="0px" cellspacing="0" cellpadding="0" style="width:1000px;margin-left: 150px;margin-top:10px;margin-bottom: 10px;">
<tr style="height:80px;">
<td><label>送审意见</label></td>
<td>
<textarea id="changeExamineOpinion" cols="100" rows="10" style="width:100%;height:100%" class="k-textbox">
</textarea>
</td>
</tr>
<tr style="height:30px;padding-left: 150px; margin-left: 50;">
<td colspan="2">
<button id="agreeBtn" type="button" class="k-button k-primary" style="margin-right: 20px;">
审批通过
</button>
<button id="refuseBtn" type="button" class="k-button">
驳回
</button>
</td>
</tr>
</table>
<br />
<div style="overflow: auto; height:400px">
<div id="moneyDetail" style="width:100%">
<table border="1px" cellspacing="0" cellpadding="0" style="width:1000px;margin-left: 150px;">
<caption>
项目工资基本信息
</caption>
<tr>
<td style="width:150px;text-align: right;">
项目编号:
</td>
<td>
<span style="width:150px;text-align: lfet;" id="projCode"></span>
</td>
<td style="width:150px;text-align: right;">
项目名称:
</td>
<td>
<span style="width:150px;text-align: lfet;" id="projName"></span>
</td>
<td style="width:150px;text-align: right;">
用工单位:
</td>
<td>
<span style="width:150px;text-align: lfet;" id="userOrg"></span>
</td>
</tr>
<tr>
<td style="width:150px;text-align: right;">
供应商名称:
</td>
<td>
<span style="width:150px;text-align: lfet;" id="supplierName"></span>
</td>
<td style="width:150px;text-align: right;">
工资年月:
</td>
<td>
<span style="width:150px;text-align: lfet;" id="yearMonth" ></span>
</td>
<td style="width:150px;text-align: right;">
工资总和:
</td>
<td>
<span style="width:150px;text-align: lfet;" id="wagesSum"></span>
</td>
</tr>
</table>
</div>
<br />
<div id="wagesDetail" style='width:1000px;margin-left: 150px;'></div>
<br />
<div id="gridExamineLog"></div>
</div>
<script type="text/javascript" src="../../../../libs/jquery.1.12.4/jquery.min.js"></script>
<script
type="text/javascript"
src="../../../../libs/kendoui.2018.3.1017/js/kendo.web.min.js"
></script>
<script
type="text/javascript"
src="../../../../libs/kendoui.2018.3.1017/js/kendo.culture.zh-CN.min.js"
></script>
<script
type="text/javascript"
src="../../../../libs/kendoui.2018.3.1017/js/kendo.messages.zh-CN.min.js"
></script>
<script type="text/javascript" src="../../../../libs/kendo-plus.js"></script>
</body>
</html>
方法一:直接编辑添加kendoGrid()
// staffWage\orgExamForm\StaffWageOrgExamForm.ts
import Tools from '../../../../utils/Tools';
import ProcessService from '../../../../services/ProcessService';
import MoneyTabel from '../MoneyTableData';
import DataSourceFactory from '../../../../components/DataSourceFactory';
const tools: Tools = new Tools();
const processService = new ProcessService();
const moneyTabel = new MoneyTabel();
const search: string = window.location.search;
let tableName: string;
let processInstId: string;
let taskInstId: string;
let applyCode: string;
let sourceProjCode: string;
let newProjPostId: string;
let detail: kendo.data.DataSource;
kendo.culture('zh-CN');
if (location.href.split('?')[1] !== undefined) {
processInstId = tools.GetQueryString('process_inst_id', search);
taskInstId = tools.GetQueryString('task_inst_id', search);
tableName = tools.GetQueryString('tableName', search);
}
$(function () {
$('#agreeBtn').kendoButton({
click() {
agree();
}
});
$('#refuseBtn').kendoButton({
click() {
refuse();
}
});
const dataList: kendo.data.DataSource = DataSourceFactory.createBaseFrontNoRoot('/api/staff/supplierPersonMoney/procPerMoneyDet?processInstId=' + processInstId + '&processResultCode=' + '审核');
dataList.bind('change', (elem: kendo.data.Model) => {
if (dataList.view().length > 0) {
$('#projCode').html(dataList.view()[0].get("projCode"));
$('#projName').html(dataList.view()[0].get("projName"));
$('#userOrg').html(dataList.view()[0].get("orgName"));
$('#supplierName').html(dataList.view()[0].get("supplierName"));
$('#yearMonth').html(dataList.view()[0].get("yearMonth"));
$('#wagesSum').html(dataList.view()[0].get("moneySum"));
}
})
$('#wagesDetail').kendoGrid({
dataSource: dataList,
height: 300,
resizable: true,
sortable: true,
columns: [
{ field: 'id', title: '序号', 'width': 50 },
{ field: 'yearMonth', title: '工资年月', width: 150 },
{ field: 'personName', title: '姓名', 'width': 50 },
{ field: 'personIdCode', title: '身份证号', width: 150 },
{ field: 'moneyBzgz', title: '标准工资', 'width': 50 },
{ field: 'moneyAdd', title: '加班费', width: 150 },
{ field: 'moneyJj', title: '奖金', 'width': 50 },
{ field: 'moneyKk', title: '扣款', width: 150 },
{ field: 'moneyEiBaseCount', title: '养老保险基数', width: 150 },
{ field: 'moneyMiBaseCount', title: '医疗保险基数', width: 150 },
{ field: 'moneyEi', title: '个人养老保险', width: 150 },
{ field: 'moneyMi', title: '个人医疗保险', width: 150 },
{ field: 'moneySy', title: '个人失业保险', width: 150 },
{ field: 'moneyGjj', title: '个人住房积金', width: 150 },
{ field: 'moneyDb', title: '个人大病保险', width: 150 },
{ field: 'moneyYlgz', title: '应领工资', width: 150 },
{ field: 'moneySds', title: '个人所得税额', width: 150 },
{ field: 'moneyJlgz', title: '净领工资', width: 150 },
{ field: 'moneyEiQ', title: '企业养老保险', width: 150 },
{ field: 'moneyMiQ', title: '企业医疗保险', width: 150 },
{ field: 'moneySyQ', title: '企业失业保险', width: 150 },
{ field: 'moneyGsQ', title: '企业工伤保险', width: 150 },
{ field: 'moneyBiQ', title: '企业生意保险', width: 150 },
{ field: 'moneyGjjQ', title: '企业住房公积金', width: 150 },
{ field: 'moneyGhQ', title: '工会缴费', width: 150 },
{ field: 'moneyGsbzQ', title: '工伤补助保险', width: 150 },
{ field: 'moneyDbQ', title: '企业大病保险', width: 150 },
{ field: 'moneyGlfQ', title: '管理费', width: 150 },
{ field: 'moneySfQ', title: '税费', width: 150 },
{ field: 'littleSum', title: '小计', width: 150 },
{ field: 'moneySum', title: '合计', width: 150 },
{ field: 'moneyRemark', title: '备注', width: 150 }
]
});
// moneyTabel.tableLoad(dataList);
processService.loadExamineLogTemplate(processInstId, $('#gridExamineLog'));
})
function agree() {
const changeExamineOpinion: string = $('#changeExamineOpinion').val();
if (changeExamineOpinion !== null && changeExamineOpinion !== '') {
}
else {
alert('审批意见必须填写!');
}
}
function refuse() {
const changeExamineOpinion: string = $('#changeExamineOpinion').val();
if (changeExamineOpinion !== null && changeExamineOpinion !== '') {
}
else {
alert('审批意见必须填写!');
}
}
function commonFun() {
}
方法二:自定义表格-绑定数据
// staffWage\orgExamForm\StaffWageOrgExamForm.ts
import Tools from '../../../../utils/Tools';
import ProcessService from '../../../../services/ProcessService';
import MoneyTabel from '../MoneyTableData';
import DataSourceFactory from '../../../../components/DataSourceFactory';
const tools: Tools = new Tools();
const processService = new ProcessService();
const moneyTabel = new MoneyTabel();
const search: string = window.location.search;
let tableName: string;
let processInstId: string;
let taskInstId: string;
let applyCode: string;
let sourceProjCode: string;
let newProjPostId: string;
let detail: kendo.data.DataSource;
kendo.culture('zh-CN');
if (location.href.split('?')[1] !== undefined) {
processInstId = tools.GetQueryString('process_inst_id', search);
taskInstId = tools.GetQueryString('task_inst_id', search);
tableName = tools.GetQueryString('tableName', search);
}
$(function () {
$('#agreeBtn').kendoButton({
click() {
agree();
}
});
$('#refuseBtn').kendoButton({
click() {
refuse();
}
});
const dataList: kendo.data.DataSource = DataSourceFactory.createBaseFrontNoRoot('/api/staff/supplierPersonMoney/procPerMoneyDet?processInstId=' + processInstId + '&processResultCode=' + '审核');
dataList.bind('change', (elem: kendo.data.Model) => {
if (dataList.view().length > 0) {
$('#projCode').html(dataList.view()[0].get("projCode"));
$('#projName').html(dataList.view()[0].get("projName"));
$('#userOrg').html(dataList.view()[0].get("orgName"));
$('#supplierName').html(dataList.view()[0].get("supplierName"));
$('#yearMonth').html(dataList.view()[0].get("yearMonth"));
$('#wagesSum').html(dataList.view()[0].get("moneySum"));
}
})
moneyTabel.tableLoad(dataList);
processService.loadExamineLogTemplate(processInstId, $('#gridExamineLog'));
})
function agree() {
const changeExamineOpinion: string = $('#changeExamineOpinion').val();
if (changeExamineOpinion !== null && changeExamineOpinion !== '') {
}
else {
alert('审批意见必须填写!');
}
}
function refuse() {
const changeExamineOpinion: string = $('#changeExamineOpinion').val();
if (changeExamineOpinion !== null && changeExamineOpinion !== '') {
}
else {
alert('审批意见必须填写!');
}
}
function commonFun() {
}
// staffWage\MoneyTable.hbs
<div style="overflow:auto;">
<table border="1px" cellspacing="0" cellpadding="0" style="width:1000px; margin-top:10px;">
<caption>
工资明细表
</caption>
<thead style="height: 50px;">
<th style="text-align:center;width:50px">序号</th>
<th style="width:100px">工资年月</th>
<th style="width:100px">姓名</th>
<th style="width:100px">身份证号</th>
<th style="width:100px">标准工资</th>
<th style="width:100px">加班费</th>
<th style="width:100px">奖金</th>
<th style="width:100px">扣款</th>
<th style="width:100px">养老保险基数</th>
<th style="width:100px">医疗保险基数</th>
<th style="width:100px">个人养老保险</th>
<th style="width:100px">个人医疗保险</th>
<th style="width:100px">个人失业保险</th>
<th style="width:100px">个人住房积金</th>
<th style="width:100px">个人大病保险</th>
<th style="width:100px">应领工资</th>
<th style="width:100px">个人所得税额</th>
<th style="width:100px">净领工资</th>
<th style="width:100px">企业养老保险</th>
<th style="width:100px">企业医疗保险</th>
<th style="width:100px">企业失业保险</th>
<th style="width:100px">企业工伤保险</th>
<th style="width:100px">企业生意保险</th>
<th style="width:150px">企业住房公积金</th>
<th style="width:100px">工会缴费</th>
<th style="width:100px">工伤补助保险</th>
<th style="width:100px">企业大病保险</th>
<th style="width:100px">管理费</th>
<th style="width:100px">税费</th>
<th style="width:100px">小计</th>
<th style="width:100px">合计</th>
<th style="width:100px">备注</th>
</thead>
<tbody id="gridFileBody">
{{#if data.length}}
{{#each data}}
<tr>
<td style="text-align:center;">{{id}}</td>
<td>{{yearMonth}}</td>
<td>{{personName}}</td>
<td>{{personIdCode}}</td>
<td>{{personIdCode}}</td>
<td>{{moneyBzgz}}</td>
<td>{{moneyAdd}}</td>
<td>{{moneyJj}}</td>
<td>{{moneyKk}}</td>
<td>{{moneyEiBaseCount}}</td>
<td>{{moneyMiBaseCount}}</td>
<td>{{moneyEi}}</td>
<td>{{moneyMi}}</td>
<td>{{moneySy}}</td>
<td>{{moneyGjj}}</td>
<td>{{moneyDb}}</td>
<td>{{moneyYlgz}}</td>
<td>{{moneySds}}</td>
<td>{{moneyJlgz}}</td>
<td>{{moneyEiQ}}</td>
<td>{{moneyMiQ}}</td>
<td>{{moneySyQ}}</td>
<td>{{moneyGsQ}}</td>
<td>{{moneyBiQ}}</td>
<td>{{moneyGjjQ}}</td>
<td>{{moneyGhQ}}</td>
<td>{{moneyGsbzQ}}</td>
<td>{{moneyDbQ}}</td>
<td>{{moneyGlfQ}}</td>
<td>{{moneySfQ}}</td>
<td>{{littleSum}}</td>
<td>{{moneySum}}</td>
<td>{{moneyRemark}}</td>
</tr>
{{/each}}
{{/if}}
</tbody>
</table>
</div>
// staffWage\MoneyTableData.ts
import moneyTableView from '../staffWage/MoneyTable.hbs';
export default class MoneyTableData {
public tableLoad(dataList: kendo.data.DataSource) {
dataList.fetch(() => {
const dataItem = dataList.data();
let data = [];
for (let i = 0; i < dataItem.length; i++) {
data.push({
'id': dataItem[i].id,
'yearMonth': dataItem[i].yearMonth,
'personName': dataItem[i].personName,
'personIdCode': dataItem[i].personIdCode,
'moneyBzgz': dataItem[i].moneyBzgz,
'moneyAdd': dataItem[i].moneyAdd,
'moneyJj': dataItem[i].moneyJj,
'moneyKk': dataItem[i].moneyKk,
'moneyEiBaseCount': dataItem[i].moneyEiBaseCount,
'moneyMiBaseCount': dataItem[i].moneyMiBaseCount,
'moneyEi': dataItem[i].moneyEi,
'moneyMi': dataItem[i].moneyMi,
'moneySy': dataItem[i].moneySy,
'moneyGjj': dataItem[i].moneyGjj,
'moneyDb': dataItem[i].moneyDb,
'moneyYlgz': dataItem[i].moneyYlgz,
'moneySds': dataItem[i].moneySds,
'moneyJlgz': dataItem[i].moneyJlgz,
'moneyEiQ': dataItem[i].moneyEiQ,
'moneyMiQ': dataItem[i].moneyMiQ,
'moneySyQ': dataItem[i].moneySyQ,
'moneyGsQ': dataItem[i].moneyGsQ,
'moneyBiQ': dataItem[i].moneyBiQ,
'moneyGjjQ': dataItem[i].moneyGjjQ,
'moneyGhQ': dataItem[i].moneyGhQ,
'moneyGsbzQ': dataItem[i].moneyGsbzQ,
'moneyDbQ': dataItem[i].moneyDbQ,
'moneyGlfQ': dataItem[i].moneyGlfQ,
'moneySfQ': dataItem[i].moneySfQ,
'littleSum': dataItem[i].littleSum,
'moneySum': dataItem[i].moneySum,
'moneyRemark': dataItem[i].moneyRemark
});
}
const moneyView = moneyTableView({ 'data': data });
$('#wagesDetail').append(moneyView);
});
}
}