You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
143 lines
3.5 KiB
143 lines
3.5 KiB
<script lang="ts">
|
|
import { defineComponent, reactive, ref, toRefs } from 'vue'
|
|
import { Steps } from 'ant-design-vue'
|
|
import Step1 from './step/Step1.vue'
|
|
import Step2 from './step/Step2.vue'
|
|
import Step3 from './step/Step3.vue'
|
|
import Step4 from './step/Step4.vue'
|
|
import { PageWrapper } from '@/components/Page'
|
|
import { BasicDrawer } from '@/components/Drawer'
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
Step1,
|
|
Step2,
|
|
Step3,
|
|
Step4,
|
|
BasicDrawer,
|
|
PageWrapper,
|
|
[Steps.name]: Steps,
|
|
[Steps.Step.name]: Steps.Step,
|
|
},
|
|
props: {
|
|
systemId: {
|
|
type: Number,
|
|
},
|
|
unitId: {
|
|
type: Number,
|
|
},
|
|
},
|
|
setup(props) {
|
|
const current = ref(0)
|
|
const step1Data = ref(null)
|
|
const step2Data = ref(null)
|
|
const step3Data = ref(null)
|
|
const step4Data = ref(null)
|
|
|
|
const state = reactive({
|
|
initStep2: false,
|
|
initStep3: false,
|
|
initStep4: false,
|
|
initStep5: false,
|
|
})
|
|
function handleStep1Next(step1Values: any) {
|
|
current.value++
|
|
console.log(step1Values)
|
|
step1Data.value = step1Values
|
|
state.initStep2 = true
|
|
}
|
|
function handleStepPrev() {
|
|
current.value--
|
|
}
|
|
function handleStep2Next(step2Values: any) {
|
|
current.value++
|
|
step2Data.value = step2Values
|
|
step2Values.systemId = props.systemId
|
|
step2Values.unitId = props.unitId
|
|
console.log(step2Values)
|
|
state.initStep3 = true
|
|
}
|
|
function handleStep3Next(step3Values: any) {
|
|
current.value++
|
|
step3Data.value = step3Values
|
|
console.log(step3Values)
|
|
state.initStep4 = true
|
|
}
|
|
function handleStep4Next(step4Values: any) {
|
|
current.value++
|
|
step4Data.value = step4Values
|
|
console.log(step4Values)
|
|
state.initStep5 = true
|
|
}
|
|
|
|
function handleRedo() {
|
|
current.value = 0
|
|
state.initStep2 = false
|
|
state.initStep3 = false
|
|
state.initStep4 = false
|
|
state.initStep5 = false
|
|
}
|
|
return {
|
|
step1Data,
|
|
step2Data,
|
|
step3Data,
|
|
step4Data,
|
|
current,
|
|
handleRedo,
|
|
handleStepPrev,
|
|
handleStep1Next,
|
|
handleStep2Next,
|
|
handleStep3Next,
|
|
handleStep4Next,
|
|
...toRefs(state),
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<BasicDrawer :is-detail="true" title="新建模型">
|
|
<PageWrapper title="新建模型" content-background content-class="p-4">
|
|
<div class="step-form-form">
|
|
<a-steps :current="current">
|
|
<a-step title="填写基本信息" />
|
|
<a-step title="算法参数配置" />
|
|
<a-step title="数据源选取" />
|
|
<a-step title="完成" />
|
|
</a-steps>
|
|
</div>
|
|
<div class="mt-5">
|
|
<Step1 v-show="current === 0" @next="handleStep1Next" />
|
|
<Step2
|
|
v-show="current === 1"
|
|
v-if="initStep2"
|
|
:before-data="step1Data"
|
|
@prev="handleStepPrev"
|
|
@next="handleStep2Next"
|
|
/>
|
|
<Step3
|
|
v-show="current === 2"
|
|
v-if="initStep3"
|
|
:before-data="step2Data"
|
|
:system-id="systemId"
|
|
:unit-id="unitId"
|
|
@prev="handleStepPrev"
|
|
@next="handleStep3Next"
|
|
/>
|
|
<Step4 v-show="current === 3" v-if="initStep4" :model-id="step3Data" @redo="handleRedo" />
|
|
</div>
|
|
</PageWrapper>
|
|
</BasicDrawer>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.step-form-content {
|
|
padding: 24px;
|
|
background-color: @component-background;
|
|
}
|
|
|
|
.step-form-form {
|
|
width: 750px;
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|
|
|