图标替换和新建流程流程弹框前端实现

zjugis-workflow/src/main/resources/templates/HandlerCaseCenter/index.ftl

@@ -24,11 +24,84 @@ javascripts=['/HandlerCaseCenter/js/config.js','/HandlerCaseCenter/js/index.js']
         .down_menu_item_box > li {
             width: 80px !important;
         }
+        .handlercasecenter .dialog-pane {
+            position: absolute;
+            top: 30px;
+            left: 0px;
+            z-index: 9999999;
+            padding: 30px;
+            background: linear-gradient( 180deg, #F4F9FF 0%, #FFFFFF 100%);
+            box-shadow: 0px 4px 30px 0px #EFEFEF;
+            border-radius: 4px 4px 4px 4px;
+            display: none;
+        }
+        .handlercasecenter .dialog-pane li {
+            display: inline-block;
+        }
+        .handlercasecenter .dialog-pane li:first-child {
+            margin-left: 0px;
+        }
+        .handlercasecenter .dialog-pane li {
+            margin-left: 60px;
+        }
+        .handlercasecenter .dialog-pane li .title {
+            font-weight: bold;
+            font-size: 17px;
+            margin: 0px;
+            color: #333;
+            text-align: left;
+        }
+        .handlercasecenter .dialog-pane li .process_list {
+            margin-top: 10px;
+        }
+        .handlercasecenter .dialog-pane li .process_list>div {
+            padding: 8px 5px;
+            font-size: 14px;
+            border-radius: 3px;
+            cursor: pointer;
+            color: #333;
+            text-align: left;
+        }
+        .handlercasecenter .dialog-pane li .process_list>div:hover {
+            background: #e7ecf9;
+        }
     </style>
     <div class="z-position handlercasecenter">
         <div class="z-comp-tab tab-bomb" name="tab">
-                <div class="btn btn-sm btn-danger flowCatalogBtn" name="flowCatalogBtn">
+                <div class="btn btn-sm btn-danger flowCatalogBtn" style="position: relative;" name="flowCatalogBtn">
                     <i class="fa fa-plus-circle" aria-hidden="true" /></i> 新建流程
+                    <div class="dialog-pane" id="process-dialog">
+                        <ul>
+                            <li>
+                                <p class="title">项目相关</p>
+                                <div class="process_list">
+                                    <div>立项</div>
+                                    <div>采购合同</div>
+                                </div>
+                            </li>
+                            <li>
+                                <p class="title">办公室相关流程</p>
+                                <div class="process_list">
+                                    <div>立项</div>
+                                    <div>采购合同</div>
+                                </div>
+                            </li>
+                            <li>
+                                <p class="title">项目相关</p>
+                                <div class="process_list">
+                                    <div>立项</div>
+                                    <div>采购合同</div>
+                                </div>
+                            </li>
+                            <li>
+                                <p class="title">项目相关</p>
+                                <div class="process_list">
+                                    <div>立项采购合同采购合同采购合同</div>
+                                    <div>采购合同</div>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
                 <ul class="z-tab-bar pull-left" name="statusTab">
                     <li z-tabindex="0" z-trigger="1" data-status="1" class="on"><a>待办（<span lang="NORMAL">${NORMAL!'0'}</span>）</a></li>

zjugis-workflow/src/main/resources/templates/HandlerCaseCenter/js/index.js

@@ -42,20 +42,35 @@ var windowid;
 			}
 		}
 	}
+	//初始化流程弹框
+	function initProcessDialog(){
 
+        z.ui.ajax({
+            url: window.data.workflowUrl + "/HandlerCaseCenter/getCalBackActivity",
+            data: {
+                "activityInstanceId": data.activityInsId,
+                "flowInsId": data.flowInsId
+            },
+            success: function (res) {
+
+			}
+        });
+        function processItemHtml(arr){
+
+		}
+	}
 	//绑定事件
 	function bindEvents() {
-		$("[name=flowCatalogBtn]").click(function () {
-			var option = {
-				id: '016e927ecfc379294d786e9261f90019',
-				title: "新建流程",
-				url: "/TFlowCatalog/index?webContainerTabId=016e927ecfc379294d786e9261f90019"
-			}
-			if (window.data.toSystemMark) {
-				option.url += "&system=" + window.data.toSystemMark;
-			}
-			z.webcontainer.openTab(option);
-		});
+		$("[name=flowCatalogBtn]").on({
+            mouseenter: function() {
+                // 当鼠标移入时的操作
+				$("#process-dialog").toggle();
+            },
+            mouseleave: function() {
+                // 当鼠标移出时的操作
+                $("#process-dialog").toggle();
+            }
+        });
 		z.ui.tab("[name=tab]").bindEvents({
 			onBeforeSelect: function (event) {
 				var link = $(event.link);