designer.jsp 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath=path+"/";
  5. String id =request.getParameter("id");
  6. String action = request.getParameter("action");
  7. %>
  8. <!doctype html>
  9. <html>
  10. <head>
  11. <meta charset="utf-8">
  12. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  13. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  14. <title>流程设计器</title>
  15. <link rel="stylesheet" href="<%=basePath %>player/design/bpmn/common/assets/diagram-js.css">
  16. <link rel="stylesheet" href="<%=basePath %>player/design/bpmn/common/assets/bpmn-font/css/bpmn-embedded.css">
  17. <link rel="stylesheet" type="text/css" href="<%=basePath %>player/js/bootstrap-3.3.7-dist/css/bootstrap.css">
  18. <style type="text/css">
  19. html, body {
  20. height: 100%;
  21. padding: 0;
  22. }
  23. #canvas {
  24. height: calc(100% - 50px);
  25. padding: 0;
  26. }
  27. .row {
  28. position: absolute;
  29. top: calc(100% - 50px);
  30. width: 100%;
  31. margin-left:0px;
  32. padding-top:10px;
  33. }
  34. .row label{
  35. width: 80px;
  36. padding-left: 15px;
  37. padding-right: 0px;
  38. padding-top:6px;
  39. }
  40. .col-sm-10{
  41. width:250px;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <!-- element to draw bpmn diagram in -->
  47. <div id="canvas"></div>
  48. <div class="row">
  49. <div style="float: left;">
  50. <label for="firstname" class="col-sm-2 control-label" >流程名称</label>
  51. <input type="text" class="form-control" id="ptName" placeholder="请输入流程名称" style="width: 300px;display: inline;">
  52. </div>
  53. <div style="float: left;width: calc(100% - 400px);">
  54. <label for="lastname" class="col-sm-2 control-label" >流程描述</label>
  55. <input type="text" class="form-control" id="ptDesc" placeholder="请输入流程描述" style="width: calc(100% - 80px);display: inline;">
  56. </div>
  57. <button type="submit" class="btn btn-default" style="display: none;" id="save-button">保存</button>
  58. </div>
  59. <script src="<%=basePath%>player/js/jquery/dist/jquery.min.js"></script>
  60. <script type="text/javascript">
  61. var basePath = '<%=basePath %>';
  62. var id = '<%=id %>';
  63. var action = '<%=action %>';
  64. var template = null;
  65. if(id!=null&&id!='null'){
  66. $.ajax({
  67. type: "POST",
  68. dataType: "json",
  69. async:false,
  70. url: basePath + "/WFP?module=template&action=findById",
  71. data: {id:id},
  72. success: function(data) {
  73. template = data;
  74. if(action=='copy'){
  75. $("#ptName").val(data.name+"副本");
  76. $("#ptDesc").val(data.label+"副本");
  77. }else{
  78. $("#ptName").val(data.name);
  79. $("#ptDesc").val(data.label);
  80. }
  81. }
  82. });
  83. }
  84. </script>
  85. <script src="<%=basePath %>player/design/bpmn/design/bpmn-modeler.min.js"></script>
  86. <script src="<%=basePath %>player/design/bpmn/design/modeler.js"></script>
  87. </body>
  88. </html>