step

admin管理员组

文章数量:1516870

step

components

firstStep.vue

<template><div><el-formref="el_form"label-width="100px":model="formData"@submit.native.prevent><el-row><el-col :span="6"><el-form-itemlabel="用户姓名："prop="name":rules="[{ required: true, message: '必填', trigger: 'blur' }]"><el-inputv-model.trim="formData.name"clearableplaceholder="请输入用户姓名"/></el-form-item></el-col><el-col :span="6"><el-form-itemlabel="手机号："prop="phone":rules="[{ required: true, message: '必填', trigger: 'blur' }]"><el-inputv-model.trim="formData.phone"clearableplaceholder="请输入角色名称"/></el-form-item></el-col><el-col :span="6"><el-form-itemlabel="账号："prop="account":rules="[{ required: true, message: '必填', trigger: 'blur' }]"><el-inputv-model.trim="formData.account"clearableplaceholder="请输入角色名称"/></el-form-item></el-col><el-col :span="6"><el-form-itemprop="status"label="状态：":rules="[{ required: true, message: '必填', trigger: 'change' }]"><el-selectv-model="formData.status"clearable><el-optionv-for="item in $getDicList('maintainOrderStatus')":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item></el-col></el-row></el-form><nx-base-tablev-bind="tableConfig"@handleSizeChange="handleSizeChange"@handleCurrentChange="handleCurrentChange"/><component:is="dialog.name":ref="dialog.name"v-model="dialog.visible"v-bind="dialog.args"/></div>
</template>
<script>
import mixins from '../mixins'
import tableColum from '../config/table-colum.js'
export default {mixins: mixins,data() {return {// 上一步数据prevData: {},formData: {// 姓名name: '',// 手机号phone: '',// 账号account: '',// 状态status: ''},tableConfig: {theadData: {needIndex: true,data: tableColum(this)},tableData: [],border: false,totalCount: 0,pageSize: 10,currentPage: 1,needPagination: true,needPapinationOPs: true,operationBtns: [{isShow: ({ row, $index }) => {return true},isDisabled: ({ row, $index }) => {return false},handleClick: (row, index) => {},btnTxt: '编辑'}]}}},methods: {getData() {console.log('first');},handleSizeChange() {},handleCurrentChange() {},handleValidate() {return new Promise((resolve, reject) => {this.$refs.el_form.validate((valid) => {if (valid) {resolve({ ...this.formData })} else {this.$message.warning('firstTab必填')reject()}});})}}
}
</script>

secondStep.vue

<template><div><el-formref="el_form"label-width="100px":model="formData"@submit.native.prevent><el-row><el-col :span="6"><el-form-itemlabel="用户姓名："prop="name":rules="[{ required: true, message: '必填', trigger: 'blur' }]"><el-inputv-model.trim="formData.name"clearableplaceholder="请输入用户姓名"/></el-form-item></el-col><el-col :span="6"><el-form-itemlabel="手机号："prop="phone":rules="[{ required: true, message: '必填', trigger: 'blur' }]"><el-inputv-model.trim="formData.phone"clearableplaceholder="请输入角色名称"/></el-form-item></el-col><el-col :span="6"><el-form-itemlabel="账号："prop="account":rules="[{ required: true, message: '必填', trigger: 'blur' }]"><el-inputv-model.trim="formData.account"clearableplaceholder="请输入角色名称"/></el-form-item></el-col><el-col :span="6"><el-form-itemprop="status"label="状态：":rules="[{ required: true, message: '必填', trigger: 'change' }]"><el-selectv-model="formData.status"clearable><el-optionv-for="item in $getDicList('maintainOrderStatus')":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item></el-col></el-row></el-form><component:is="dialog.name":ref="dialog.name"v-model="dialog.visible"v-bind="dialog.args"/></div>
</template>
<script>
import mixins from '../mixins'
export default {mixins: mixins,data() {return {formData: {// 姓名name: '',// 手机号phone: '',// 账号account: '',// 状态status: ''},// 上一步数据prevData: {}}},methods: {getData() {console.log('second');},handleValidate() {return new Promise((resolve, reject) => {this.$refs.el_form.validate((valid) => {if (valid) {resolve({ ...this.formData })} else {this.$message.warning('secondTab必填')reject()}});})}}
}
</script>

index.vue

<template><div class="container-wrapper"><div class="step_box"><el-steps:active="activeIndex"align-centerfinish-status="success"><template v-for="(item, index) in stepList"><el-step:key="item.activeName":title="item.title"@click.native="handleStep({activeName: item.activeName, activeIndex: index})"/></template></el-steps></div><div><first-stepv-show="['firstStep'].includes(activeName)"ref="firstStep"/><second-stepv-show="['secondStep'].includes(activeName)"ref="secondStep"/></div><el-rowtype="flex"justify="center"style="padding-top: 16px;"><el-buttonv-show="activeIndex != 0"type="primary"size="medium"@click="handlePrev">上一步</el-button><el-buttonv-show="activeIndex != stepList.length - 1"type="primary"size="medium"@click="handleNext">下一步</el-button><el-buttonv-show="activeIndex === stepList.length - 1"type="primary"size="medium"@click="handleSubmit">提交</el-button></el-row></div>
</template>
<script>
import FirstStep from './components/firstStep'
import SecondStep from './components/secondStep'
import mixins from './mixins'
import { cloneDeep } from 'lodash'
export default {components: {FirstStep,SecondStep},mixins: mixins,data() {return {activeIndex: 0,activeName: 'firstStep',// 进度配置stepConfig: [{show: () => {return true},title: '办理退租',activeName: 'firstStep'},{show: () => {return true},title: '费用结算',activeName: 'secondStep'}]}},computed: {stepList() {return this.stepConfig.filter(item => item.show())},activeList() {return this.stepList.map(item => item.activeName)}},mounted() {},methods: {handleStep({ activeName = this.activeName, activeIndex = this.activeIndex } = {}) {console.log('activeName', activeName);this.activeIndex = activeIndexthis.activeName = activeName},// 提交async handleSubmit() {const [firstData, secondData] = await Promise.all([this.$refs.firstStep.handleValidate(),this.$refs.secondStep.handleValidate()])console.log({firstData, secondData});},// 取消handleCancel() {},// 上一步handlePrev() {this.activeIndex -= 1this.activeName = this.activeList[this.activeIndex]},// 下一步async handleNext() {const [formData] = await Promise.all([this.$refs[this.activeName].handleValidate()])this.activeIndex += 1// 把上一个组件的数据 传递给下一个组件this.activeName = this.activeList[this.activeIndex]this.$refs[this.activeName].prevData = cloneDeep(formData)}}
}
</script>
<style lang="scss" scoped>
.container-wrapper {.step_box {background: #fff;padding: 24px 24px 24px 16px;/deep/.el-steps {width: 30%;margin: 0 auto;.el-step.is-center {.is-wait {.el-step__icon {background: none;color: #c2c3c4;border-color: #c2c3c4;}}.el-step__title.is-wait {font-weight: normal;color: #c2c3c4;}.is-success {.el-step__icon {background: none;color: #797979;border-color: #797979;.el-step__icon-inner::before {content: "1";}}}.el-step__title.is-success {font-weight: normal;color: #797979;}.el-step__title.is-process {color: #007cc8;font-weight: normal;}.el-step__line {left: 62%;right: -38%;top: 15px;height: 1px;.el-step__line-inner {background: #abacad;border: none;height: 1px;}}.el-step__icon {width: 32px;height: 32px;border-width: 1px;background: #007cc8;border-color: #007cc8;color: #fff;cursor: pointer;.el-step__icon-inner {font-size: 16px;}}}}}
}
</style>

本文标签： step