页面初始化操作
var processData = null
$(function () {initView();initTable();
})function initView() {layui.use(['laydate', 'form'], function () {var laydate = layui.laydate;laydate.render({elem: '#applyDateTimeRange',type: 'datetime',range: true});});
}
初始化表格操作
function initTable() {var headerObj = [[{title: '序号', width: 60, templet: function (d) {return d.LAY_TABLE_INDEX + 1;}},{field: "systemType", title: "平台", width: 100, sort: false,},{field: "applyOrderDetailId", title: "工单号", minWidth: 70, sort: false},{field: "createTime", title: "申请时间", minWidth: 60, sort: false},{field: "applyUserName", title: "申请人", width: 100, sort: false},{field: "dealState", title: "状态", width: 100, sort: false, templet: function (d) {if (d.dealState == 0) {return "未开启";} else if (d.dealState == 1) {return "流程中";} else if (d.dealState == 2) {return "已完成";} else{return "未知(" + d.applyStatus + ")";}}},{field: "", title: "操作", minWidth: 200, toolbar: '#startFlowTableBar',}]];layui.use(['table', 'form'], function (exports) {var table = layui.table;table.render({elem: '#searchTable',url: 'http://localhost:8080/getStartList',page: true, cols: headerObj,response: {statusName: 'status',statusCode: 'normal',countName: 'count',dataName: 'data'},parseData: function (res) {console.log("+++",res)return {"count": res.data.total,"data": res.data.list,"status": "normal"};}});table.on('tool(searchTable)', function (row) {var data = row.data;var layEvent = row.event;var tr = row.tr;if (layEvent == 'level2Check') {initStartFlowView(data);} else if (layEvent == 'showDetailEvent') {ajax_load_detail(data)}else if (layEvent == 'showFlowEvent'){ajax_load_flow(data)}});$('#searchBtn').on('click', function () {var moduleType = $("#moduleType").val();var applyStatus = $("#applyStatus").val();var applyDateTimeRange = $("#applyDateTimeRange").val();table.reload('searchTable', {page: {curr: 1 },where: {moduleType: moduleType,applyStatus: applyStatus,applyDateTimeRange: applyDateTimeRange}});});});
}
function showDetailView(data) {console.log("data",data)var resApplyId = data.resApplyId;var moduleType = data.moduleType;layui.use(['layer', 'laytpl', 'form', 'table'], function () {var layer = layui.layer;var form = layui.form;var laytpl = layui.laytpl;var table = layui.table;var tplHtml = insertFormTpl.innerHTML;var index;laytpl(tplHtml).render({}, function (html) {index = layer.open({type: 1,title: '展示详情',area: ['600px', '310px'],offset: 'auto',maxmin: true,content: html});form.render();});form.on('submit(insertFormBtn)', function (data) {console.log("获取到监听事件")$.ajax({url: "http://localhost:8080/getApplyOrderDetail?orderId=" + resApplyId,type: "POST",dataType: "json",data: {moduleType: moduleType,checkResult: data.field.checkResult,description: data.field.description},success: function (data) {if (data.status == 'normal') {layer.msg("审批成功");table.reload("searchTable", {});layer.close(index);} else {layer.msg(data.exception.error_msg || '审批失败!');}}});return false;});});
}
function ajax_load_detail(data) {var resApplyId = data.applyOrderDetailId;$.ajax({url: "http://localhost:8080/getApplyOrderDetail?orderId=" + resApplyId,type: "GET",dataType: "json",success: function (data_r) {console.log("+++++++" + data_r)console.log("====" + JSON.stringify(data_r))if (data_r.msg == 'NORMAL') {layui.use(['layer', 'laytpl', 'form', 'table'], function () {var layer = layui.layer;var form = layui.form;var laytpl = layui.laytpl;var table = layui.table;var tplHtml = detailHtml.innerHTML;laytpl(tplHtml).render({}, function (html) {index = layer.open({type: 1,title: '展示详情',area: ['600px', '310px'],offset: 'auto',maxmin: true,content: html});form.render();});form.val("showApplyDetail", {"applyOrderDetailId": data_r.data.applyOrderDetailId,"applyOrderDetail": data_r.data.applyOrderDetail})})} else {layer.msg();}}});
}
整个页面的HTML
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>海燕-国美统一开发者平台 - 我的申请</title><meta content="text/html;charset=UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE-edge" /><meta name="viewport" content="width=device-width,initial-scale=1" /><link rel="stylesheet" th:href="@{/css/cat-common.css}" /><link rel="stylesheet" th:href="@{/css/font.css}"><link rel="stylesheet" th:href="@{/css/xadmin.css}"><link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" /><link rel="stylesheet" th:href="@{/css/common.css}"><style>.user_left{width: 45%;float: left;margin: 20px 0 0 5%;}</style></head><body><div class="cat-body"><h1 style="color: red">开启流程相关操作(开发中。。。。)</h1><div class="layui-row"><div class="cat-block"><button class="layui-btn" onclick="reload_data();"><i class="layui-icon"></i>刷新数据</button></div></div><table id="searchTable" lay-filter="searchTable" lay-size="sm"></table></div><script type="text/html" id="startFlowTableBar">
{{# if(d.dealState==0){ }}
<a class="layui-btn layui-btn-normal layui-btn-xs" style="color: #0f3788;" lay-event="level2Check">开启流程</a>
{{# } }}
<a class="layui-btn layui-btn-normal layui-btn-xs" style="color: blue" lay-event="showFlowEvent">查看进度</a>
<a class="layui-btn layui-btn-normal layui-btn-xs" style="color: green" lay-event="showDetailEvent">工单详情</a><!--{{# if(d.applyStatus==1 || d.applyStatus==6){ }}-->
<!--<a class="layui-btn layui-btn-lg layui-btn-xs" lay-event="detail">详情</a>-->
<!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="applyFlow">进度</a>-->
<!--{{# }else if((d.applyStatus==2 || d.applyStatus==5) && (d.applyStar==null || d.applyStar==0)){ }}-->
<!--<a class="layui-btn layui-btn-lg layui-btn-xs" lay-event="detail">详情</a>-->
<!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="applyFlow">进度</a>-->
<!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="comment">评论</a>-->
<!--{{# }else if((d.applyStatus==2 || d.applyStatus==5) && (d.applyStar!=null && d.applyStar!=0)){ }}-->
<!--<a class="layui-btn layui-btn-lg layui-btn-xs" lay-event="detail">详情</a>-->
<!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="applyFlow">进度</a>-->
<!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="lookComment">查看评论</a>-->
<!--{{# }else if(d.applyStatus==4 || d.applyStatus==7){ }}-->
<!--<a class="layui-btn layui-btn-lg layui-btn-xs" lay-event="detail">详情</a>-->
<!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="applyFlow">进度</a>-->
<!--<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="reApply">重新提交</a>-->
<!--{{# }else{ }}-->
<!--<a class="layui-btn layui-btn-lg layui-btn-xs" lay-event="detail">详情</a>-->
<!--{{# } }}-->
</script><script type="text/html" id="insertFormTpl">
<div class="x-body"><form class="layui-form" action="" lay-filter="insertForm"><div class="layui-form-item"><label class="layui-form-label">审批结果</label><div class="layui-input-block"><input type="radio" name="checkResult" value="2" title="通过" checked><input type="radio" name="checkResult" value="3" title="拒绝"></div></div><div class="layui-form-item"><label class="layui-form-label">审批意见</label><div class="layui-input-block"><textarea name="description" lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea></div></div><div class="layui-form-item"><div class="layui-input-block"><button class='layui-btn' lay-submit lay-filter='insertFormBtn'>提交</button></div></div></form>
</div>
</script><script type="text/html" id="detailHtml"><div class="x-body"><h1 lay-filter="detailString">展示详情</h1><form class="layui-form" action="" lay-filter="showApplyDetail"><!-- 表单类型 --><div class="layui-form-item"><label class="layui-form-label">工单号</label><div class="layui-input-block"><input type="text" name="applyOrderDetailId" class="layui-input" disabled></div></div><!-- 申请原因 --><div class="layui-form-item"><label class="layui-form-label">工单详情</label><div class="layui-input-block"><textarea name="applyOrderDetail" class="layui-textarea" disabled></textarea></div></div></form></div></script><script type="text/html" id="startFlow"><div class="x-body"><h1>开启流程操作待开发</h1><form class="layui-form" name="addForm" id="addForm"><div class="user_left" id="selectPerson"><!-- 一个标准的input组合,这个是固定项 --><div class="layui-form-item"><label class="layui-form-label">申请人</label><div class="layui-input-block"><input type="text" id="title" name="title" lay-verify="required" class="layui-input"></div></div><!-- 根据属性List生成的input追加在这里--></div><div class="layui-form-item"><label class="layui-form-label">开启备注信息</label><div class="layui-input-block"><textarea name="description" lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea></div></div><!-- buttons --><div class="layui-form-item" style="margin-left: 5%;"><div class="layui-input-block"><!-- 这里的提交按钮是button形式,不是submit --><!--<input type="button" id="insert" onclick="return check()" class="layui-btn" value="开启流程" />--><input type="button" id="insert" lay-submit lay-filter='startFormBtn' class="layui-btn" value="开启流程" /><!-- 清空表单,这个按钮隐藏了 --><input type="button" name="reset" class="layui-btn" value="重置" /></div></div></form></div></script><script type="text/html" id="showFlow"><div class="x-body"><h1>开启流程操作待开发</h1><form class="layui-form" name="addForm" ><div class="user_left" id="showPerson"><!-- 一个标准的input组合,这个是固定项 --><div class="layui-form-item"><label class="layui-form-label">申请人</label><div class="layui-input-block"><input type="text" id="person" name="title" lay-verify="required" class="layui-input"></div></div><!-- 根据属性List生成的input追加在这里--></div></form></div></script><script type="text/html" id="insertTpl"><div class="x-body"><form class="layui-form" action=""><!-- 域账号 --><div class="layui-form-item layui-form-text"><label class="layui-form-label">主题</label><div class="layui-input-block"><input type="text" name="topic" autocomplete="off" class="layui-input"></div></div><!-- 权限 --><div class="layui-form-item"><label class="layui-form-label">受理部门</label><div class="layui-input-block"><select name="dept" lay-verify="dept" lay-filter="dept"><option value="-1">请选择一个受理部门</option><option value="1">DBA-数据库运维</option><option value="2">SRE-应用运维</option><option value="3">SA-云科</option><option value="4">DTM-桌面运维</option><option value="5">NS-网安</option><option value="6">CR-代码</option></select></div></div><div class="layui-form-item"><label class="layui-form-label">具体描述</label><div class="layui-input-block"><textarea name="applyDesc" lay-filter="required" class="layui-textarea"></textarea></div></div><!-- <div class="layui-form-item"></div> --><div class="layui-form-item"><div class="layui-input-block"><button class='layui-btn' lay-submit lay-filter="insertApply">提交</button></div></div></form></div></script><script type="text/javascript" th:src="@{/lib/jquery/jquery-3.3.1.min.js}"></script><script type="text/javascript" th:src="@{/lib/layui/layui.js}" charset="utf-8"></script><script type="text/javascript" th:src="@{/js/common.js}"></script><script type="text/javascript" th:src="@{/js/approval/startApproval.js}"></script></body>
整个页面的JS代码
var processData = null
$(function () {initView();initTable();
})function initView() {layui.use(['laydate', 'form'], function () {var laydate = layui.laydate;laydate.render({elem: '#applyDateTimeRange',type: 'datetime',range: true});});
}function initTable() {var headerObj = [[{title: '序号', width: 60, templet: function (d) {return d.LAY_TABLE_INDEX + 1;}},{field: "systemType", title: "平台", width: 100, sort: false,},{field: "applyOrderDetailId", title: "工单号", minWidth: 70, sort: false},{field: "createTime", title: "申请时间", minWidth: 60, sort: false},{field: "applyUserName", title: "申请人", width: 100, sort: false},{field: "dealState", title: "状态", width: 100, sort: false, templet: function (d) {if (d.dealState == 0) {return "未开启";} else if (d.dealState == 1) {return "流程中";} else if (d.dealState == 2) {return "已完成";} else{return "未知(" + d.applyStatus + ")";}}},{field: "", title: "操作", minWidth: 200, toolbar: '#startFlowTableBar',}]];layui.use(['table', 'form'], function (exports) {var table = layui.table;table.render({elem: '#searchTable',url: 'http://localhost:8080/getStartList',page: true, cols: headerObj,response: {statusName: 'status',statusCode: 'normal',countName: 'count',dataName: 'data'},parseData: function (res) {console.log("+++",res)return {"count": res.data.total,"data": res.data.list,"status": "normal"};}});table.on('tool(searchTable)', function (row) {var data = row.data;var layEvent = row.event;var tr = row.tr;if (layEvent == 'level2Check') {initStartFlowView(data);} else if (layEvent == 'showDetailEvent') {ajax_load_detail(data)}else if (layEvent == 'showFlowEvent'){ajax_load_flow(data)}});$('#searchBtn').on('click', function () {var moduleType = $("#moduleType").val();var applyStatus = $("#applyStatus").val();var applyDateTimeRange = $("#applyDateTimeRange").val();table.reload('searchTable', {page: {curr: 1 },where: {moduleType: moduleType,applyStatus: applyStatus,applyDateTimeRange: applyDateTimeRange}});});});
}
function initStartFlowView(data) {console.log("开启流程操作",data)var resApplyId = data.applyOrderDetailId;layui.use(['layer', 'laytpl', 'form', 'table'], function () {var layer = layui.layer;var form = layui.form;var laytpl = layui.laytpl;var table = layui.table;var tplHtml = startFlow.innerHTML;var index;laytpl(tplHtml).render({}, function (html) {index = layer.open({type: 1,title: '开启流程',area: ['800px', '700px'],offset: 'auto',maxmin: true,content: html});form.render();});initInputView()form.on('submit(startFormBtn)', function (data) {console.log("获取到监听事件")var jsonStr = initFlowData(data,resApplyId,processData)console.log("获取全局数据",processData)console.log(jsonStr)$.ajax({url: "http://localhost:8080/startTask",type: "POST",dataType: "json",contentType:"application/json",data:jsonStr,success: function (data) {console.log(data)if (data.msg == 'NORMAL') {layer.msg("审批成功");table.reload("searchTable", {});layer.close(index);} else {layer.msg();}}});return false;});});
}
function showDetailView(data) {console.log("data",data)var resApplyId = data.resApplyId;var moduleType = data.moduleType;layui.use(['layer', 'laytpl', 'form', 'table'], function () {var layer = layui.layer;var form = layui.form;var laytpl = layui.laytpl;var table = layui.table;var tplHtml = insertFormTpl.innerHTML;var index;laytpl(tplHtml).render({}, function (html) {index = layer.open({type: 1,title: '展示详情',area: ['600px', '310px'],offset: 'auto',maxmin: true,content: html});form.render();});form.on('submit(insertFormBtn)', function (data) {console.log("获取到监听事件")$.ajax({url: "http://localhost:8080/getApplyOrderDetail?orderId=" + resApplyId,type: "POST",dataType: "json",data: {moduleType: moduleType,checkResult: data.field.checkResult,description: data.field.description},success: function (data) {if (data.status == 'normal') {layer.msg("审批成功");table.reload("searchTable", {});layer.close(index);} else {layer.msg(data.exception.error_msg || '审批失败!');}}});return false;});});
}function ajax_load_detail(data) {var resApplyId = data.applyOrderDetailId;$.ajax({url: "http://localhost:8080/getApplyOrderDetail?orderId=" + resApplyId,type: "GET",dataType: "json",success: function (data_r) {console.log("+++++++" + data_r)console.log("====" + JSON.stringify(data_r))if (data_r.msg == 'NORMAL') {layui.use(['layer', 'laytpl', 'form', 'table'], function () {var layer = layui.layer;var form = layui.form;var laytpl = layui.laytpl;var table = layui.table;var tplHtml = detailHtml.innerHTML;laytpl(tplHtml).render({}, function (html) {index = layer.open({type: 1,title: '展示详情',area: ['600px', '310px'],offset: 'auto',maxmin: true,content: html});form.render();});form.val("showApplyDetail", {"applyOrderDetailId": data_r.data.applyOrderDetailId,"applyOrderDetail": data_r.data.applyOrderDetail})})} else {layer.msg();}}});
}function ajax_load_flow(data) {initFlow(data)}function initFlow(data_p) {var resApplyId = data_p.applyOrderDetailId;$.ajax({url: "http://localhost:8080/getApprovalFlowDetail?applyId=" + resApplyId,type: "GET",dataType: "json",success: function (data) {console.log("+++++++" + data)console.log("====" + JSON.stringify(data))initApplyFlowView(data.data)}});}function test() {var jsonData ="[{\"propertyShow\":\"一级审批\",\"propertyName\":\"test\",\"propertyTips\":\"test\"},{\"propertyShow\":\"二级审批\",\"propertyName\":\"test\",\"propertyTips\":\"test\"},{\n" +"\"propertyShow\":\"三级审批\",\"propertyName\":\"test\",\"propertyTips\":\"test\"}]"var data = JSON.parse(jsonData)for (var i = 0; i < data.length; i++) {str = "<div class='layui-form-item'><label class='layui-form-label'>"+ data[i].propertyShow+ "</label><div class='layui-input-block'><input type='text' id='"+ data[i].propertyName+ "' name='"+ data[i].propertyName+ "' placeholder='"+ data[i].propertyTips+ "' class='layui-input'></div></div>"var html = document.getElementById("selectPerson").innerHTML;document.getElementById("selectPerson").innerHTML=html+str;}}function initInputView() {$.ajax({ type: "get",url: "http://localhost:8080/getProcess",dataType: "json",success: function (data) {loadData(data)for (var i = 0; i < data.data.length; i++) {str = "<div class='layui-form-item'>" +"<label class='layui-form-label'>"+ data.data[i].nodeName + "</label>" +"<div class='layui-input-block'>" +"<input type='text' id='"+data.data[i].nodeId +"' name='"+"no"+data.data[i].nodeOrder+ "' placeholder='"+ "审批人域账户" + "' class='layui-input'>" +"</div>" +"</div>"var html = document.getElementById("selectPerson").innerHTML;document.getElementById("selectPerson").innerHTML = html + str;}}});}function loadData(data) {processData = data;return data;
}function jsonToObject(data ,len,applyOrderDetailId,process) {var object = {};var params = [];console.log("开始进入方法")for(var i = 0; i < len; i++){console.log("组装数据")var obj = {};console.log(i)switch (i) {case 0:obj["approvalOrder"] = process[0].nodeOrder ;obj["approvalUserName"] = data.field.no1;obj["nodeId"] = process[0].nodeId;params.push(obj);console.log(i)continue;case 1:obj["approvalOrder"] = process[1].nodeOrder;obj["approvalUserName"] = data.field.no2;obj["nodeId"] = process[1].nodeId;params.push(obj);console.log(i)continue;case 2:obj["approvalOrder"] = process[2].nodeOrder;obj["approvalUserName"] = data.field.no3;obj["nodeId"] = process[2].nodeId;params.push(obj);console.log(i)continue;case 3:obj["approvalOrder"] = process[3].nodeOrder;obj["approvalUserName"] = data.field.no4;obj["nodeId"] = process[3].nodeId;params.push(obj);console.log(i)continue;case 4:obj["approvalOrder"] = process[4].nodeOrder;obj["approvalUserName"] = data.field.no5;obj["nodeId"] = process[4].nodeId;params.push(obj);console.log(i)continue;}}object['applyId'] = applyOrderDetailId;object['processId'] = process[0].processId;object['approvalUserVoList'] = params;var json = JSON.stringify(object);return json;
}function initFlowData(data,applyOrderDetailId,process){return jsonToObject(data ,process.data.length ,applyOrderDetailId,process.data)
}
function check() {var data = new FormData($("#addForm")[0]); console.log(data)
}function reload_data() {layui.use(['table'], function () {var table = layui.table;table.reload("searchTable", {});});
}function applyFlowView(data) {var resApplyId = data.applyId;$.ajax({url: "/v1/devTool/codeAuth/apply/flow",type: "GET",dataType: "json",data: {resApplyId: resApplyId},success: function (data) {if (data.status == 'normal') {initApplyFlowView(data.response);} else {layer.msg(data.exception.error_msg || '获取表结构失败!');}}});
}function initApplyFlowView(applyFlows) {layui.use(['layer', 'laytpl'], function () {var layer = layui.layer;var form = layui.form;var laytpl = layui.laytpl;var table = layui.table;var applyFlowTplHtml = "";applyFlowTplHtml += '<div class="x-body">';applyFlowTplHtml += '<ul class="layui-timeline">';$.each(applyFlows, function (index, step) {applyFlowTplHtml += '<li class="layui-timeline-item">';applyFlowTplHtml += '<i class="layui-icon layui-timeline-axis"></i>';applyFlowTplHtml += '<div class="layui-timeline-content layui-text">';var title ="处理人: " + step.approvalPersonName+" - "+ "处理时间 "+step.lastUpdateTimeapplyFlowTplHtml += '<h3 class="layui-timeline-title">' + title + '</h3>';applyFlowTplHtml += '<p>';applyFlowTplHtml += (step.approvalPersonNote);applyFlowTplHtml += '</p>';applyFlowTplHtml += '</div>';applyFlowTplHtml += '</li>';});applyFlowTplHtml += '</ul>';applyFlowTplHtml += '</div>';var index;laytpl(applyFlowTplHtml).render({}, function (html) {index = layer.open({type: 1,title: '申请进度查询',area: ['700px', '510px'],offset: 'auto',maxmin: true,content: html});});});
}