提交 7d9f1aab 编写于 作者: tony001's avatar tony001

调整状态向导面板

上级 8c08f0ad
<template> <template>
<layout class="app-wizard"> <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"> <el-steps class="wizard-steps" :active="wizardForms.indexOf(activeForm)" finish-status="success">
<#list ctrl.getPSDEWizard().getPSDEWizardSteps() as step> <#list ctrl.getPSDEWizard().getPSDEWizardSteps() as step>
<el-step title="${step.getTitle()}"></el-step> <el-step>
</#list> <template v-slot:title>
</el-steps> <div v-popover:wizardpanel_form_FirstForm_popover>${step.getTitle()}</div>
</#if> </template>
<i-content class="app-wizard-content"> </el-step>
<#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}"
</#list> </#list>
</#if> </el-steps>
name='${form.name}' <#if ctrl.getPSDEEditForms()??>
ref='${form.name}'> <#list ctrl.getPSDEEditForms() as form>
</view_${form.getName()}> <#assign handler = form.getPSAjaxControlHandler() />
</#list> <el-popover v-if="activeForm === '${form.getName()}'" ref="${form.getName()}_popover" popper-class="app-wizard-popover-container" placement="bottom-start" trigger="click">
</#if> <div class="app-wizard-container">
</i-content> <div class="app-wizard-header">
<footer class="app-wizard-footer"> <div class="app-wizard-header-extra">
<i-button :disabled="isDisabled('PREV')" @click="onClickPrev()" type="primary">上一步</i-button> <Icon type="md-open" size="18" @click="handleOPen"/>
<i-button :disabled="isDisabled('NEXT')" @click="onClickNext()" type="primary">下一步</i-button> <Icon type="md-close" size="18" @click="handleClose"/>
<i-button :disabled="isDisabled('FINISH')" @click="onClickFinish()" type="primary">完成</i-button> </div>
</footer> </div>
</layout> <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> </template>
<#ibizinclude> <#ibizinclude>
../@MACRO/CONTROL/CONTROL_HEADER-BASE.vue.ftl ../@MACRO/CONTROL/CONTROL_HEADER-BASE.vue.ftl
...@@ -308,6 +321,24 @@ ...@@ -308,6 +321,24 @@
} }
} }
/**
* 打开链接
*
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public handleOPen(){
console.log("open");
}
/**
* 关闭
*
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public handleClose(){
this.activeForm = "";
}
/** /**
* 获取下一步向导表单 * 获取下一步向导表单
* *
......
...@@ -3,7 +3,6 @@ ...@@ -3,7 +3,6 @@
height: 100%; height: 100%;
.wizard-steps{ .wizard-steps{
padding: 10px 50px; padding: 10px 50px;
border-bottom: 1px solid #ddd;
margin-bottom: 10px; margin-bottom: 10px;
.el-step__head.is-process{ .el-step__head.is-process{
border-color: #7e8187; border-color: #7e8187;
...@@ -19,20 +18,35 @@ ...@@ -19,20 +18,35 @@
.el-step__title.is-success{ .el-step__title.is-success{
color: #1890ff; 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{ .app-wizard-content{
height: 100%; width: 100%;
overflow-y: auto; padding: 4px 0px;
} }
.app-wizard-footer { .app-wizard-footer{
padding: 10px; float: right;
text-align: right; >button{
.ivu-btn { margin-right: 6px;
margin: 0 5px; }
}
} }
}
} }
.el-popper[x-placement^=bottom] {
<#ibizinclude> margin-top: 0px;
../@MACRO/CSS/DEFAULT.less.ftl }
</#ibizinclude> \ No newline at end of file
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册