调整状态向导面板

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

 <template>
     <layout class="app-wizard">
-<#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>
-    </#list>
-    </el-steps>
-</#if>
-        <i-content class="app-wizard-content">
-<#if ctrl.getPSDEEditForms()??>
-  <#list ctrl.getPSDEEditForms() as form>
-    <#assign handler = form.getPSAjaxControlHandler() />
-            <view_${form.getName()} 
-              v-if="activeForm == '${form.getName()}'" 
-              :key="'${form.name}'" 
-              :viewState='wizardState'
-              :context="context"
-              :viewparams="viewparams"
-              updateAction="<#if form.getUpdatePSControlAction()?? && form.getUpdatePSControlAction().getPSAppDEMethod()??>${form.getUpdatePSControlAction().getPSAppDEMethod().getCodeName()}</#if>"
-              removeAction="<#if form.getRemovePSControlAction()?? && form.getRemovePSControlAction().getPSAppDEMethod()??>${form.getRemovePSControlAction().getPSAppDEMethod().getCodeName()}</#if>"
-              loadAction="<#if form.getGetPSControlAction()?? && form.getGetPSControlAction().getPSAppDEMethod()??>${form.getGetPSControlAction().getPSAppDEMethod().getCodeName()}</#if>"
-      <#if form.getHookEventNames()??>
-        <#list form.getHookEventNames() as eventName>
-              @${eventName?lower_case}="${form.name}_${eventName?lower_case}" 
+        <#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>
+                <template v-slot:title>
+                    <div v-popover:wizardpanel_form_FirstForm_popover>${step.getTitle()}</div>
+                </template>
+            </el-step>
         </#list>
-      </#if>
-              name='${form.name}' 
-              ref='${form.name}'>
-            </view_${form.getName()}>
-  </#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>
-    </layout>
+        </el-steps>
+        <#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()}
+                    :key="'${form.name}'" 
+                    :viewState='wizardState'
+                    :context="context"
+                    :viewparams="viewparams"
+                    updateAction="<#if form.getUpdatePSControlAction()?? && form.getUpdatePSControlAction().getPSAppDEMethod()??>${form.getUpdatePSControlAction().getPSAppDEMethod().getCodeName()}</#if>"
+                    removeAction="<#if form.getRemovePSControlAction()?? && form.getRemovePSControlAction().getPSAppDEMethod()??>${form.getRemovePSControlAction().getPSAppDEMethod().getCodeName()}</#if>"
+                    loadAction="<#if form.getGetPSControlAction()?? && form.getGetPSControlAction().getPSAppDEMethod()??>${form.getGetPSControlAction().getPSAppDEMethod().getCodeName()}</#if>"
+            <#if form.getHookEventNames()??>
+                <#list form.getHookEventNames() as eventName>
+                    @${eventName?lower_case}="${form.name}_${eventName?lower_case}" 
+                </#list>
+            </#if>
+                    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>
+        </#if>
+    </layout> 
 </template>
 <#ibizinclude>
 ../@MACRO/CONTROL/CONTROL_HEADER-BASE.vue.ftl
@@ -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 {
-        padding: 10px;
-        text-align: right;
-        .ivu-btn {
-            margin: 0 5px;
-        }
+    .app-wizard-footer{
+      float: right;
+      >button{
+        margin-right: 6px;
+      }
     }
+  }
 }
-
-<#ibizinclude>
-../@MACRO/CSS/DEFAULT.less.ftl
-</#ibizinclude>
\ No newline at end of file
+.el-popper[x-placement^=bottom] {
+  margin-top: 0px;
+}
\ No newline at end of file