var grid_selector = "#grid-table"; var pager_selector = "#grid-pager";
//员工计划价值观id var hrEffPfmcePlaneecptId = "";
//表格操作新增的数量 var newcount = 0;
var leaderName = ""; //直接上级的名称
var rowidNew = ""; //新增的 id var editRowid = ""; //存放在编辑当前行之前的编辑的行id
var totalWeight = 0; //总权重和 var totalWeightAdd = 0; var editWeight = "0"; //当前编辑的行的修改之前的权重。
function isUpdateFunction() { var isUpdateFlag = $('#isUpdateFlag').val(); var flag = true; if (isUpdateFlag == "false") { flag = false; } return flag; }
$(function() {
// 获取员工计划价值观id
hrEffPfmcePlaneecptId = $("#hepPlaneecptid").text();
//初始会 列表数据
listData();
//表单- 返回
$("#prevBtn").click(function() {
cleanForm("hrEffPfmcePlaneeSaveForm"); //清空表单
$("#editFormDiv").hide();
$("#girdContentDiv").show();
//移除 对提交按钮的 隐藏
$("#submitBtn").removeClass("hide");
$("#resetBtn").removeClass("hide");
});
//表格操作撤销
$("#resetBtn").click(function() {
jbAlertInfoCallBack('温馨提示', '撤销当前编辑记录吗', function() {
var id = $(grid_selector).jqGrid('getGridParam', 'selrow');
if (id) {
//如果是新增的话,就删除。
if (id.indexOf("new") >= 0) {
//根据rowid删除行,但不会从服务器端删除数据
jQuery(grid_selector).jqGrid("delRowData", id);
rowidNew = ""; //表格已被刷新,重置新增id
return;
} else {
if (editRowid) {
//如果是编辑的话就撤销编辑历史。
$(grid_selector).jqGrid('restoreRow', editRowid);
editRowid = "";
}
}
}
});
});
//显示上级在按钮上
if (leaderName) {
$("#saveNowBtn").html("<i class='icon-ok '></i>提交上级(" + leaderName + ")审批");
}
});
function listData() { jQuery(grid_selector).jqGrid({ url: _ctxPath + '/pfmcePlan/hrEffPfmcePlanee/achievementsTargetlistData.do?' + 'hrEffPfmcePlaneecptId=' + hrEffPfmcePlaneecptId, datatype: "json", mtype: 'POST', height: 500,
colNames: ['主键', '类别', '工作目标', '描述', '权重(%)',
'完成时间', '状态', '操作', '上级名称', '员工计划价值观id'
],
colModel: [
{ name: 'id', width: 100, hidden: true },
// sortable: false 不可以排序,即点击不会出现排序图标选择的。
{ name: 'type', width: 75, sortable: false, editable: true, edittype: "select", formatter: typeFmatter, editoptions: { value: "1:OKR;2:重点工作" } },
// editable: true 可编辑,即在单元格里面编辑。
// 为列加上css样式 classes: 'form-control' 因此不要乱加,尽量不要加上,搞不好很影响的列表显示的。
{ name: 'title', width: 140, editable: true, sortable: false, edittype: "textarea", editrules: { required: true } },
{ name: 'workContent', width: 310, editable: true, sortable: false, edittype: "textarea", editrules: { required: true } },
// 评估标准
//{ name: 'goal', width: 120, editable: true, sortable: false, edittype: "textarea", editrules: { required: true } },
{ name: 'weight', width: 55, editable: true, sortable: false, editrules: { required: true, integer: true, minValue: 0, maxValue: 100 }, editoptions: { placeholder: "0到100" }, formatter: weightFormatter },
{ name: 'planEtime', width: 80, editable: true, sortable: false, edittype: "text", editrules: { required: true }, editoptions: { readonly: "true", placeholder: "点击时间", onFocus: "WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd'})" } },
{ name: 'processStatus', width: 80, formatter: processStatusFormatter, sortable: false },
{ name: 'act', width: 40, sortable: false, hidden: true, formatter: actFormatter },
//直接上级名称
{ name: 'creator', width: 70, sortable: false, hidden: true, formatter: leaderNameFormatter },
{ name: 'hrEffPfmcePlaneecptId', width: 100, formatter: findPlaneecptIdFmatter, hidden: true }
],
viewrecords: true,
rowNum: 20,
rowList: [10, 20, 30],
pager: pager_selector,
altRows: true,
// rownumbers: true, //显示 行的数字
multiselect: false, //true 为checkbox框,
multiboxonly: true,
autowidth: true,
//需要再需要编辑的单元格里面加上: editable: true,
// 编辑后就可以发送请求更新了,是单个单元格的更新的,不是批量,如果要批量就是 全列编辑了。
//cellEdit: true, //启用单元格编辑功能,
//列编辑的提交地址,这里似乎不要这样可以,使用自定义。
editurl: _ctxPath + "/pfmcePlan/hrEffPfmcePlanee/save.do",
loadComplete: function() {
rowidNew = ""; //表格已被刷新,重置新增id
editRowid = "";
//初始化权重总和
totalWeight = totalWeightAdd;
totalWeightAdd = 0;
var table = this;
setTimeout(function() {
updatePagerIcons(table);
enableTooltips(table);
}, 100);
},
ondblClickRow: function() {
editRow();
},
beforeSelectRow: function(rowid, e) {
if (rowidNew) {
//新增,固定选择中 当前新增的记录。
$(grid_selector).jqGrid('setSelection', rowidNew);
//不选择该行。
return false;
}
return true;
}
});
function typeFmatter(cellvalue) {
var str = "";
if (cellvalue == "1") {
str = "<span class='badge badge-info'>OKR</span>";
return str;
} else if (cellvalue == "2") {
str = "<span class='badge badge-success'>重点工作</span>";
return str;
} else {
return cellvalue;
}
}
//获取一行的 员工计划价值观id
function findPlaneecptIdFmatter(cellvalue) {
if (hrEffPfmcePlaneecptId) {
return cellvalue + "";
} else {
hrEffPfmcePlaneecptId = cellvalue;
return hrEffPfmcePlaneecptId + "";
}
}
//操作保存
function actFormatter(cellvalue, options, rowObject) {
var rowid = "";
rowid = options.rowId;
var str = "";
str = "<a class='btn btn-link' role='button' href='javascript:void(0);' onclick='saveGridRow(\"" + rowid + "\")' > 保存 </a>";
//如果过时或者是 已提交了,就不应该显示操作按钮。
return str;
}
//上级名称
function leaderNameFormatter(cellvalue) {
if (!leaderName) {
if (cellvalue) {
leaderName = cellvalue;
$("#saveNowBtn").html("<i class='icon-ok '></i>提交上级(" + leaderName + ")审批");
}
}
return leaderName;
}
//计算权重总和
function weightFormatter(cellvalue) {
var str = "";
if (cellvalue) {
str = cellvalue;
totalWeightAdd = totalWeightAdd + Math.round(str);
}
return str;
}
//按钮菜单
jQuery(grid_selector).jqGrid('navGrid', pager_selector, { //navbar options
edit: isUpdateFunction(),
editicon: 'fa fa-pencil blue',
add: isUpdateFunction(),
addicon: 'fa fa-plus purple',
del: isUpdateFunction(),
delicon: 'fa fa-trash red',
search: false,
searchicon: 'fa fa-search-plus orange',
refresh: true,
refreshicon: 'fa fa-refresh green',
view: false,
viewicon: 'icon-zoom-in grey',
addfunc: addRow,
delfunc: deleteRows,
editfunc: editRow,
});
}
//新增 function addRow() {
if (rowidNew) {
showNotice('已有新增,请先保存或者删除新增的数据');
//选择到新增的行。
$(grid_selector).jqGrid('setSelection', rowidNew);
return;
}
//表格操作新增。
actAddRow();
}
//表格里面操作 新增 function actAddRow() {
var rowid = "new" + newcount;
var dataRow = {
id: rowid,
//type: "",
// title: "",
// workContent: "",
// goal: "",
// weight: "",
// planEtime: "",
processStatus: "new",
//hrEffPfmcePlaneecptId: ""
};
// last 在表格最后一列的下面新增。
jQuery(grid_selector).jqGrid("addRowData", rowid, dataRow, "last");
//setRowData(rowid);
//添加后,进行编辑
jQuery(grid_selector).jqGrid('editRow', rowid);
rowidNew = rowid;
//选择该行数据。
$(grid_selector).jqGrid('setSelection', rowidNew);
if (editRowid) {
//说明之前有编辑其他行的历史,撤销之前的编辑状态。
$(grid_selector).jqGrid('restoreRow', editRowid);
//更新当前的编辑历史。
editRowid = "";
}
newcount++;
}
function setRowData(rowid) { // 新增行的数据 jQuery(grid_selector).jqGrid('setRowData', rowid, {
type: '<select class="form-field" id="type_' + rowid + '" ><option value="1">OKR</option><option value="2">重点工作</option></select>',
title: '<textarea class="form-field " id="title_' + rowid + '" rows="3" maxlength="480" style="width:100%; " >' + ' </textarea>',
workContent: '<textarea class="form-field " id="workContent_' + rowid + '" rows="3" maxlength="480" style="width:100%; " >' + ' </textarea>',
// goal: '<textarea class="form-field " id="goal_' + rowid + '" rows="3" maxlength="480" style="width:100%; " >' + ' </textarea>',
planEtime: '<input type="text" class="wdateTime form-field " onFocus="WdatePicker({lang:' + "'zh-cn'" + ',dateFmt:' + "'yyyy-MM-dd'" + '})" placeholder="请填写" id="planEtimeString_' + rowid + '" readonly />',
weight: '<input type="text" class=" form-field " placeholder=" 0到100数字" id="weight_' + rowid + '" />',
});
}
//表格里面保存该行表格里面的数据。 function saveGridRow(rowid) {
var rowOneData = $(grid_selector).jqGrid('getRowData', rowid);
var type = $("#" + rowid + "_type").val();
if (!type) {
showNotice("类别不能为空");
return;
}
var idnew = "";
if (rowid.indexOf("new") >= 0) {
idnew = ""; //新增,会替换原来的向后台提交的id内容的
} else {
idnew = rowid;
}
//会覆盖原来的设置的地址的
var editurl = _ctxPath + "/pfmcePlan/hrEffPfmcePlanee/save.do";
var extraparam = { id: idnew, hrEffPfmcePlaneecptId: hrEffPfmcePlaneecptId };
jQuery(grid_selector).jqGrid('saveRow', rowid, saveCallbackGrid, editurl, extraparam);
}
function save() {
var notOnTime = $("#notOnTime").text();
if (notOnTime) {
//不能填报
showNotice("绩效工作未展开,或已过期");
return;
}
var rowid = $(grid_selector).jqGrid('getGridParam', 'selrow');
if (!rowid) {
showNotice("请选择行");
return;
}
if (rowid.indexOf("new") >= 0) {
// rowid = ""; //新增,会替换原来的向后台提交的id内容的
} else {
//编辑的 更新。
if (editRowid) {
rowid = editRowid;
} else {
showNotice("请选择需要编辑的行");
return;
}
}
var type = $("#" + rowid + "_type").val();
if (!type) {
showNotice("类别:不能为空");
return;
}
var title = $("#" + rowid + "_title").val();
if (!title) {
showNotice("工作目标:不能为空");
return;
}
var workContent = $("#" + rowid + "_workContent").val();
if (!workContent) {
showNotice("描述:不能为空");
return;
}
var planEtime = $("#" + rowid + "_planEtime").val();
if (!planEtime) {
showNotice("完成时间:不能为空");
return;
}
var weight = $("#" + rowid + "_weight").val();
if (weight) {
if ((!isNaN(weight)) && (weight >= 0 && weight <= 100)) {
if (Math.floor(weight) != weight) {
showNotice("权重:整数且0到100之间");
return;
}
} else {
showNotice("权重:整数且0到100之间");
return;
}
} else {
showNotice("权重不能为空,整数且0到100之间");
return;
}
if (rowid.indexOf("new") >= 0) {
rowid = ""; //新增,会替换原来的向后台提交的id内容的
var totalWeightsave = totalWeight + Math.round(weight);
if (totalWeightsave > 100) {
showNotice("权重:总和不能超过100%");
return;
}
} else {
//编辑的 检验权重和 editWeight
var totalWeightedit = totalWeight + Math.round(weight) - Math.round(editWeight);
if (totalWeightedit > 100) {
showNotice("权重:总和不能超过100%");
return;
}
}
setBtnStatus(false, "saveNowBtn"); //为了防止重复提交的
setBtnStatus(false, "submitBtn"); //保存也禁用
setBtnStatus(false, "resetBtn");
var url = _ctxPath + "/pfmcePlan/hrEffPfmcePlanee/save.do";
loadDataTip();
$.post(url, {
id: rowid,
type: type,
title: title,
workContent: workContent,
planEtimeString: planEtime,
weight: weight,
hrEffPfmcePlaneecptId: hrEffPfmcePlaneecptId
}, function(result) {
removeLoadDataTip();
if (result.success) {
showNotice("保存成功");
setBtnStatus(true, "saveNowBtn");
setBtnStatus(true, "submitBtn");
setBtnStatus(true, "resetBtn");
if (hrEffPfmcePlaneecptId) {
setTimeout(function() {
//刷新 数据
$(grid_selector).trigger("reloadGrid");
}, 200); //0.5秒后 刷新
} else {
hrEffPfmcePlaneecptId = result.object;
setTimeout(function() {
//刷新 数据
window.location.reload();
}, 200); //0.5秒后 刷新
}
} else {
showError(result.message);
setBtnStatus(true, "saveNowBtn");
setBtnStatus(true, "submitBtn");
setBtnStatus(true, "resetBtn");
}
}, "json").error(function() {
removeLoadDataTip();
showError("网络错误");
setBtnStatus(true, "saveNowBtn");
setBtnStatus(true, "submitBtn");
setBtnStatus(true, "resetBtn");
});
}
//提交审核 function saveNow() { // 提交审核
var notOnTime = $("#notOnTime").text();
if (notOnTime) {
//不能填报
showNotice("绩效工作未展开,或已过期");
return;
}
if (hrEffPfmcePlaneecptId) {
} else {
showNotice("请先保存");
return;
}
if (totalWeight != 100) {
showNotice("权重总和不是100%,不能提交!,请先进行编辑保存");
return;
}
jbAlertInfoCallBack('温馨提示', '提交后将不能修改,确定提交吗', function() {
setBtnStatus(false, "saveNowBtn"); //为了防止重复提交的
setBtnStatus(false, "submitBtn"); //保存也禁用
setBtnStatus(false, "resetBtn");
var url = _ctxPath + "/pfmcePlan/hrEffPfmcePlanee/saveNow.do";
loadDataTip();
$.post(url, { hrEffPfmcePlaneecptId: hrEffPfmcePlaneecptId }, function(data) {
removeLoadDataTip();
if (data.success) {
showNotice("提交审核成功");
setTimeout(function() {
//刷新 数据
window.location.href = _ctxPath + "/index.do";
}, 200); //0.5秒后 刷新
} else {
if (data.code == 1) {
showError("权重总和不是100%,不能提交!");
setBtnStatus(true, "saveNowBtn");
setBtnStatus(true, "submitBtn");
setBtnStatus(true, "resetBtn");
} else {
showError("提交失败,不能重复提交或者数据不能为空");
setBtnStatus(true, "saveNowBtn");
setBtnStatus(true, "submitBtn");
setBtnStatus(true, "resetBtn");
}
}
}, "json").error(function() {
removeLoadDataTip();
showError("网络错误");
setBtnStatus(true, "saveNowBtn");
setBtnStatus(true, "submitBtn");
setBtnStatus(true, "resetBtn");
});
});
}
//表格操作保存调。 function saveCallbackGrid(data) { var result; if (data.responseText) {
var resultString = data.responseText;
//string 转json
result = JSON.parse(resultString);
} else {
result = data;
}
removeLoadDataTip();
if (result.success) {
showNotice("保存成功");
setBtnStatus(true, "submitBtn");
if (hrEffPfmcePlaneecptId) {
setTimeout(function() {
//刷新 数据
$(grid_selector).trigger("reloadGrid");
}, 200); //0.5秒后 刷新
} else {
hrEffPfmcePlaneecptId = result.object;
setTimeout(function() {
//刷新 数据
window.location.reload();
}, 200); //0.5秒后 刷新
}
} else {
showError("保存失败");
setBtnStatus(true, "submitBtn");
}
}
//编辑 function editRow() { var id = $(grid_selector).jqGrid('getGridParam', 'selrow');
if (rowidNew) {
showNotice('已有新增,请先保存或者删除新增的数据');
//选择到新增的行。
$(grid_selector).jqGrid('setSelection', rowidNew);
return;
}
if (editRowid) {
//说明之前有编辑其他行的历史,撤销之前的编辑状态。
$(grid_selector).jqGrid('restoreRow', editRowid);
//更新当前的编辑历史。
editRowid = id;
} else {
editRowid = id;
}
//编辑之前的历史数据
var rowOneData = $(grid_selector).jqGrid('getRowData', id);
var typeStr = "";
typeStr = rowOneData.type;
editWeight = rowOneData.weight;
var type = "";
if (typeStr) {
if (typeStr.indexOf("OKR") >= 0) {
type = "1";
} else if (typeStr.indexOf("重点工作") >= 0) {
type = "2";
}
}
//全列可编辑的编辑
jQuery(grid_selector).jqGrid('editRow', id);
//显示之前选好的select
if (type) {
//获取编辑的 select的 id 进行选择。
$("#" + id + "_type").val(type + "");
}
}
//删除 function deleteRows() { delConfirm(function() { var id = $(grid_selector).jqGrid('getGridParam', 'selrow');
//如果是新增的行,删除的话,就不会向服务器端发送删除数据的。
if (id.indexOf("new") >= 0) {
//根据rowid删除行,但不会从服务器端删除数据
jQuery(grid_selector).jqGrid("delRowData", id);
rowidNew = ""; //重置新增id
editRowid = "";
return;
}
var deletePostUrl = _ctxPath + "/pfmcePlan/hrEffPfmcePlanee/delete.do";
$.post(deletePostUrl, { id: id.toString() }, function(data) {
if (data.success) {
showNotice("删除成功");
setTimeout(function() {
setBtnStatus(true, "submitBtn");
$("#editFormDiv").hide();
$("#girdContentDiv").show();
$(grid_selector).trigger("reloadGrid");
}, 500); //0.5秒后 刷新
cleanForm("hrEffPfmcePlaneeSaveForm");
} else {
showError("删除失败");
}
}, "json")
.error(function() {
showError("网络错误");
});
});
}
function processStatusFormatter(cellValue) { var str = ""; if (cellValue == '1_11') { str = '<span class="badge badge-success">员工填报中</span>'; } else if (cellValue == '1_12') { str = '<span class="badge badge-warning">上级审批中</span>'; } else if (cellValue == '1_13') { str = '<span class="badge badge-danger">填报被驳回</span>'; } else if (cellValue == '1_15') { str = '<span class="badge badge-danger">HRBP审批中</span>'; } else if (cellValue == '1_17') { str = '<span class="badge badge-danger">上级审批中</span>'; } else if (cellValue == '1_18') { str = '<span class="badge badge-danger">上级审批中</span>'; } else if (cellValue == '1_19') { str = '<span class="badge badge-success">员工待确认</span>'; } else if (cellValue == '2_20') { str = '<span class="badge badge-success">员工自评中</span>'; } else if (cellValue == '2_21') { str = '<span class="badge badge-success">员工自评中</span>'; } else if (cellValue == '2_22') { str = '<span class="badge badge-success">上级评中</span>'; } else if (cellValue == '2_23') { str = '<span class="badge badge-danger">自评被驳回</span>'; } else if (cellValue == '2_24') { str = '<span class="badge badge-success">他评中</span>'; } else if (cellValue == '2_25') { str = '<span class="badge badge-success">他评已提交</span>'; } else if (cellValue == '2_26') { str = '<span class="badge badge-danger">他评中</span>'; } else if (cellValue == '2_27') { str = '<span class="badge badge-success">上级评价中</span>'; } else if (cellValue == '2_28') { str = '<span class="badge badge-success">员工待确认</span>'; } else if (cellValue == '2_29') { str = '<span class="badge badge-danger">上级评价中</span>'; } else if (cellValue == '2_30') { str = '<span class="badge badge-success">结束</span>'; } else if (cellValue == '3_32') { str = '<span class="badge badge-warning">绩效审批中</span>'; } else if (cellValue == '3_39') { str = '<span class="badge badge-danger">绩效审批中</span>'; } else if (cellValue == '4_41') { str = '<span class="badge badge-success">员工面谈</span>'; } else if (cellValue == '4_42') { str = '<span class="badge badge-warning">改进跟踪 </span>'; } else if (cellValue == 'new') { str = '<span class="badge badge-warning">新增</span>'; } else { str = '<span class="badge badge-danger">未知</span>'; } return str; }
前端:
<table id="grid-table"></table> <div id="grid-pager"></div>