zk——状态向导左右切换

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

@@ -15,15 +15,19 @@
 <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) + 1)" finish-status="success">
+        <div class="view-steps">
+            <div class="steps_icon" @click="onClickPrev(activeForm)"><i class="el-icon-arrow-left"></i></div>
+            <el-steps class="wizard-steps"  :active="(wizardForms.indexOf(activeForm) + 1)" finish-status="success">
         <#list ctrl.getPSDEWizard().getPSDEWizardSteps() as step>
-            <el-step :class="{'app-active-step':activeForm==='<@getStepForm ctrlmodel=ctrl step=step />'?true:false}">
-                <template v-slot:title>
-                    <div v-popover:<@getStepForm ctrlmodel=ctrl step=step />_popover @click="hanleClick('<@getStepForm ctrlmodel=ctrl step=step />')">${step.getTitle()}</div>
-                </template>
-            </el-step>
+                <el-step :class="{'app-active-step':activeForm==='<@getStepForm ctrlmodel=ctrl step=step />'?true:false}">
+                    <template v-slot:title>
+                        <div v-popover:<@getStepForm ctrlmodel=ctrl step=step />_popover @click="hanleClick('<@getStepForm ctrlmodel=ctrl step=step />')">${step.getTitle()}</div>
+                    </template>
+                </el-step>
         </#list>
-        </el-steps>
+            </el-steps>
+            <div class="steps_icon" @click="onClickNext(activeForm)"><i class="el-icon-arrow-right"></i></div>
+        </div>
         <#if ctrl.getPSDEEditForms()??>
         <#list ctrl.getPSDEEditForms() as form>
         <#assign handler = form.getPSAjaxControlHandler() />

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

 .app-wizard {
     background: #fff;
     height: 100%;
+    .view-steps{
+      display: flex;
+      padding: 0 20px;
+      .steps_icon{
+        font-size: 20px;
+        background: #409eff;
+        color: #fff;
+        line-height: 50px;
+        height: 50px;
+        border-radius: 4px;
+      }
+      .steps_icon:hover{
+        cursor: pointer;
+      }
+    }
     .wizard-steps{
-      padding: 10px 50px;
+      padding: 10px 20px;
       margin-bottom: 10px;
+      width: 100%;
       .el-step__head.is-process{
         border-color: #7e8187;
         color: #7e8187;