109 lines
2.4 KiB
Vue
109 lines
2.4 KiB
Vue
<template>
|
|
|
|
<a-modal
|
|
:title="modalTitle"
|
|
:width="1200"
|
|
:visible="visible"
|
|
:confirmLoading="confirmLoading"
|
|
:destroyOnClose="true"
|
|
@ok="handleSubmit"
|
|
@cancel="handleCancel"
|
|
>
|
|
<!-- PageHeader 第二种使用方式 (v-slot) -->
|
|
<a-card :bordered="false">
|
|
<a-steps class="steps" :current="currentTab">
|
|
<a-step title="基本信息" />
|
|
<a-step title="选择单位" />
|
|
<a-step title="选择课程" />
|
|
<a-step title="选择人员" />
|
|
<a-step title="完成" />
|
|
</a-steps>
|
|
<div class="content">
|
|
<step1 v-if="currentTab === 0" @nextStep="nextStep"/>
|
|
<step2 v-if="currentTab === 1" @nextStep="nextStep" @prevStep="prevStep"/>
|
|
<step3 v-if="currentTab === 2" @nextStep="nextStep" @prevStep="prevStep"/>
|
|
<step4 v-if="currentTab === 3" @nextStep="nextStep" @prevStep="prevStep"/>
|
|
<step5 v-if="currentTab === 4" @prevStep="prevStep" @finish="finish"/>
|
|
</div>
|
|
</a-card>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script>
|
|
import Step1 from './form/ProjectForm'
|
|
import Step2 from './form/ProjectUnitSelect'
|
|
import Step3 from './form/ProjectCourseList'
|
|
|
|
export default {
|
|
components: {
|
|
Step1,
|
|
Step2,
|
|
Step3,
|
|
},
|
|
data () {
|
|
return {
|
|
currentTab: 0,
|
|
labelCol: {
|
|
xs: { span: 24 },
|
|
sm: { span: 6 },
|
|
},
|
|
wrapperCol: {
|
|
xs: { span: 24 },
|
|
sm: { span: 16 },
|
|
},
|
|
modalTitle: '新增项目',
|
|
visible: false,
|
|
confirmLoading: false,
|
|
type: '',
|
|
form: null
|
|
}
|
|
},
|
|
methods: {
|
|
// 新增打开页面初始化
|
|
add (type) {
|
|
this.modalTitle = "新增项目"
|
|
this.visible = true
|
|
this.formLoading = false
|
|
},
|
|
// 编辑打开页面初始化
|
|
edit (record) {
|
|
console.log(record)
|
|
this.modalTitle = "编辑项目"
|
|
this.visible = true
|
|
this.formLoading = false
|
|
},
|
|
|
|
// handler
|
|
//下一步
|
|
nextStep () {
|
|
if (this.currentTab < 5) {
|
|
this.currentTab += 1
|
|
}
|
|
},
|
|
//上一步
|
|
prevStep () {
|
|
console.log("返回上一步")
|
|
if (this.currentTab > 0) {
|
|
this.currentTab -= 1
|
|
}
|
|
},
|
|
finish () {
|
|
this.currentTab = 0
|
|
},
|
|
handleSubmit() {
|
|
|
|
},
|
|
handleCancel() {
|
|
this.visible = false;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.steps {
|
|
max-width: 750px;
|
|
margin: 16px auto;
|
|
}
|
|
</style>
|