89 lines
2.0 KiB
Vue
89 lines
2.0 KiB
Vue
<template lang="pug">
|
|
.flex.flex-col.gap-y-6.justify-between
|
|
.flex.flex-col.gap-y-6
|
|
span.font-bold.text-xl Договор
|
|
.flex.self-center
|
|
base-stepper(
|
|
:steps="steps",
|
|
:currentStep="currentStep"
|
|
)
|
|
component(v-bind:is="currentTabComponent")
|
|
.flex.justify-between
|
|
.flex
|
|
base-button(
|
|
:size="40",
|
|
@click="prevStep",
|
|
v-if="currentStep !== 0",
|
|
outlined,
|
|
) Назад
|
|
.flex
|
|
base-button(
|
|
:size="40",
|
|
@click="nextStep",
|
|
v-if="currentStep < steps.length-1",
|
|
) Далее
|
|
base-button(
|
|
:size="40",
|
|
@click="finish",
|
|
v-if="currentStep === steps.length-1"
|
|
) Завершить
|
|
</template>
|
|
|
|
<script>
|
|
import BaseButton from "@/components/base/BaseButton";
|
|
import BaseStepper from "@/components/base/BaseStepper";
|
|
import AgreementCommon from "./FormsAgreementCreate/AgreementCommon";
|
|
import AgreementPerson from "./FormsAgreementCreate/AgreementPerson";
|
|
import AgreementServices from "./FormsAgreementCreate/AgreementServices";
|
|
|
|
export default {
|
|
name: "StepperCreateAgreement",
|
|
components: {
|
|
BaseButton,
|
|
BaseStepper,
|
|
AgreementCommon,
|
|
AgreementPerson,
|
|
AgreementServices,
|
|
},
|
|
data() {
|
|
return {
|
|
currentStep: 0,
|
|
steps: [
|
|
{
|
|
id: 0,
|
|
label: "1",
|
|
value: "Договор",
|
|
component: "agreement-common",
|
|
},
|
|
{
|
|
id: 1,
|
|
label: "2",
|
|
value: "Пациент",
|
|
component: "agreement-person",
|
|
},
|
|
{
|
|
id: 2,
|
|
label: "2",
|
|
value: "Услуги",
|
|
component: "agreement-services",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
computed: {
|
|
currentTabComponent: function () {
|
|
return this.steps[this.currentStep]?.component;
|
|
},
|
|
},
|
|
methods: {
|
|
nextStep() {
|
|
this.currentStep += 1;
|
|
},
|
|
prevStep() {
|
|
this.currentStep -= 1;
|
|
},
|
|
finish() {},
|
|
},
|
|
};
|
|
</script>
|