zk——向导抽屉

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

@@ -35,7 +35,7 @@
             <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-open" size="18" @click="handleOPen('${form.getName()}')"/>
                         <Icon type="md-close" size="18" @click="handleClose('${form.getName()}')"/>
                     </div>
                 </div>
@@ -64,6 +64,34 @@
                 </div>
             </div>
         </el-popover>
+        <drawer
+        class="app-wizard-drawer"
+        :closable="false"
+        :value="drawerOpenStatus.isOpen && drawerOpenStatus.formName == '${form.name}'"
+        :width="1000"
+        title="${form.getLogicName()}"
+        @on-visible-change="onVisibleChange($event)">
+                  <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 class="drawer-button">          
+                <i-button  style="margin-right:10px" type="primary">确认</i-button>
+                <i-button>取消</i-button>
+            </div>
+        </drawer>
         </#list>
         </#if>
         </#if>
@@ -206,6 +234,16 @@
      */
     public curState = '';
 
+    /**
+     * 抽屉状态
+     *
+     * @memberof ${srfclassname('${ctrl.codeName}')}Base
+     */
+    public drawerOpenStatus:any = {
+        isOpen:false,
+        formName:""
+    }
+
     /**
      * Vue声明周期(处理组件的输入属性)
      *
@@ -405,8 +443,10 @@
      *
      * @memberof ${srfclassname('${ctrl.codeName}')}Base
      */
-    public handleOPen(){
-        console.log("open");
+    public handleOPen(formName:string){
+        this.handleClose(formName);
+        this.drawerOpenStatus.isOpen = true;
+        this.drawerOpenStatus.formName = formName;
     }
 
     /**
@@ -533,6 +573,16 @@
             return false;
         }
     }
+    /**
+     * 抽屉状态改变
+     *
+     * @memberof ${srfclassname('${ctrl.codeName}')}Base
+     */
+    public onVisibleChange(value:any){
+        if(!value){
+            this.drawerOpenStatus.isOpen = false;
+        }
+    }
 
 <#ibizinclude>
 ../@MACRO/CONTROL/CONTROL_BOTTOM-BASE.vue.ftl

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

@@ -75,4 +75,13 @@
 }
 .el-popper[x-placement^=bottom] {
   margin-top: 0px;
+}
+.app-wizard-drawer{
+  .app-form {
+    height: calc(100% - 51px);
+  }
+  .drawer-button{
+    display: flex;
+    justify-content: flex-end;
+  }
 }
\ No newline at end of file