提交 0653ae99 编写于 作者: KK's avatar KK

zk——状态向导左右切换

上级 3761fef2
<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"> <div class="view-steps">
<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 title="${step.getTitle()}"></el-step>
</#list> </#list>
</el-steps> </el-steps>
<div class="steps_icon" @click="onClickNext('statewizardpanel_form_FirstForm')"><i class="el-icon-arrow-right"></i></div>
</div>
</#if> </#if>
<i-content class="app-wizard-content"> <i-content class="app-wizard-content">
<#if ctrl.getPSDEEditForms()??> <#if ctrl.getPSDEEditForms()??>
......
...@@ -15,15 +15,19 @@ ...@@ -15,15 +15,19 @@
<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) + 1)" finish-status="success"> <div class="view-steps">
<div class="steps_icon" @click="onClickPrev('${form.name}')"><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> <#list ctrl.getPSDEWizard().getPSDEWizardSteps() as step>
<el-step :class="{'app-active-step':activeForm==='<@getStepForm ctrlmodel=ctrl step=step />'?true:false}"> <el-step :class="{'app-active-step':activeForm==='<@getStepForm ctrlmodel=ctrl step=step />'?true:false}">
<template v-slot:title> <template v-slot:title>
<div v-popover:<@getStepForm ctrlmodel=ctrl step=step />_popover @click="hanleClick('<@getStepForm ctrlmodel=ctrl step=step />')">${step.getTitle()}</div> <div v-popover:<@getStepForm ctrlmodel=ctrl step=step />_popover @click="hanleClick('<@getStepForm ctrlmodel=ctrl step=step />')">${step.getTitle()}</div>
</template> </template>
</el-step> </el-step>
</#list> </#list>
</el-steps> </el-steps>
<div class="steps_icon" @click="onClickNext('${form.name}')"><i class="el-icon-arrow-right"></i></div>
</div>
<#if ctrl.getPSDEEditForms()??> <#if ctrl.getPSDEEditForms()??>
<#list ctrl.getPSDEEditForms() as form> <#list ctrl.getPSDEEditForms() as form>
<#assign handler = form.getPSAjaxControlHandler() /> <#assign handler = form.getPSAjaxControlHandler() />
......
.app-wizard { .app-wizard {
background: #fff; background: #fff;
height: 100%; 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{ .wizard-steps{
padding: 10px 50px; padding: 10px 20px;
margin-bottom: 10px; margin-bottom: 10px;
width: 100%;
.el-step__head.is-process{ .el-step__head.is-process{
border-color: #7e8187; border-color: #7e8187;
color: #7e8187; color: #7e8187;
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册