调整状态向导面板

@CONTROL/状态向导面板/CONTROL-BASE.vue.ftl

 <template>
     <layout class="app-wizard">
-<#if ctrl.getPSDEWizard?? && ctrl.getPSDEWizard()?? && ctrl.getPSDEWizard().getPSDEWizardSteps?? && ctrl.getPSDEWizard().getPSDEWizardSteps()??>
+        <#if ctrl.getPSDEWizard?? && ctrl.getPSDEWizard()?? && ctrl.getPSDEWizard().getPSDEWizardSteps?? && ctrl.getPSDEWizard().getPSDEWizardSteps()??>
         <el-steps class="wizard-steps"  :active="wizardForms.indexOf(activeForm)" finish-status="success">
         <#list ctrl.getPSDEWizard().getPSDEWizardSteps() as step>
-      <el-step title="${step.getTitle()}"></el-step>
+            <el-step>
+                <template v-slot:title>
+                    <div v-popover:wizardpanel_form_FirstForm_popover>${step.getTitle()}</div>
+                </template>
+            </el-step>
         </#list>
         </el-steps>
-</#if>
-        <i-content class="app-wizard-content">
-<#if ctrl.getPSDEEditForms()??>
+        <#if ctrl.getPSDEEditForms()??>
         <#list ctrl.getPSDEEditForms() as form>
         <#assign handler = form.getPSAjaxControlHandler() />
+        <el-popover v-if="activeForm === '${form.getName()}'" ref="${form.getName()}_popover" popper-class="app-wizard-popover-container" placement="bottom-start" trigger="click">
+            <div class="app-wizard-container">
+                <div class="app-wizard-header">
+                    <div class="app-wizard-header-extra">
+                        <Icon type="md-open" size="18" @click="handleOPen"/>
+                        <Icon type="md-close" size="18" @click="handleClose"/>
+                    </div>
+                </div>
+                <div class="app-wizard-content">
                     <view_${form.getName()}
-              v-if="activeForm == '${form.getName()}'" 
                     :key="'${form.name}'" 
                     :viewState='wizardState'
                     :context="context"
@@ -28,14 +38,17 @@
                     name='${form.name}' 
                     ref='${form.name}'>
                     </view_${form.getName()}>
+                </div>
+                <div class="app-wizard-footer">
+                    <i-button size="small" :disabled="isDisabled('PREV')" @click="onClickPrev()" type="primary">上一步</i-button>
+                    <i-button size="small" :disabled="isDisabled('NEXT')" @click="onClickNext()" type="primary">下一步</i-button>
+                    <i-button size="small" :disabled="isDisabled('FINISH')" @click="onClickFinish()" type="primary">完成</i-button>
+                </div>
+            </div>
+        </el-popover>
         </#list>
-</#if>
-        </i-content>
-        <footer class="app-wizard-footer">
-            <i-button :disabled="isDisabled('PREV')" @click="onClickPrev()" type="primary">上一步</i-button>
-            <i-button :disabled="isDisabled('NEXT')" @click="onClickNext()" type="primary">下一步</i-button>
-            <i-button :disabled="isDisabled('FINISH')" @click="onClickFinish()" type="primary">完成</i-button>
-        </footer>
+        </#if>
+        </#if>
     </layout> 
 </template>
 <#ibizinclude>
@@ -308,6 +321,24 @@
         }
     }
 
+    /**
+     * 打开链接
+     *
+     * @memberof ${srfclassname('${ctrl.codeName}')}Base
+     */
+    public handleOPen(){
+        console.log("open");
+    }
+
+    /**
+     * 关闭
+     *
+     * @memberof ${srfclassname('${ctrl.codeName}')}Base
+     */
+    public handleClose(){
+        this.activeForm = "";
+    }
+
     /**
      * 获取下一步向导表单
      *

@CONTROL/状态向导面板/CONTROL.less.ftl

@@ -3,7 +3,6 @@
     height: 100%;
     .wizard-steps{
       padding: 10px 50px;
-      border-bottom: 1px solid #ddd;
       margin-bottom: 10px;
       .el-step__head.is-process{
         border-color: #7e8187;
@@ -19,20 +18,35 @@
       .el-step__title.is-success{
         color: #1890ff;
       }
+      .el-step__title:hover{
+        cursor: pointer;
+      }
+    }
+}
+.app-wizard-popover-container{
+  .app-wizard-container{
+    width: 100%;
+    .app-wizard-header{
+      width: 100%;
+      height: 22px;
+      line-height: 22px;
+      padding: 2px;
+      .app-wizard-header-extra{
+        float: right;
+      }
     }
     .app-wizard-content{
-        height: 100%;
-        overflow-y: auto;
+      width: 100%;
+      padding: 4px 0px;
+    }
+    .app-wizard-footer{
+      float: right;
+      >button{
+        margin-right: 6px;
       }
-    .app-wizard-footer {
-        padding: 10px;
-        text-align: right;
-        .ivu-btn {
-            margin: 0 5px;
     }
   }
 }
-
-<#ibizinclude>
-../@MACRO/CSS/DEFAULT.less.ftl
-</#ibizinclude>
+.el-popper[x-placement^=bottom] {
+  margin-top: 0px;
+}
\ No newline at end of file
\ No newline at end of file