WIP Создание договора 1

src/pages/clients/components/StepperCreateAgreement.vue

@@ -0,0 +1,75 @@
+<template lang="pug">
+  .wrap.flex.flex-col.gap-y-6
+    .flex.flex.flex-col.gap-y-9
+      span.font-bold.text-xl Договор
+      base-stepper(
+        :steps="steps",
+        :currentStep="currentStep"
+      )      
+      component(v-bind:is="currentTabComponent")     
+    .flex.gap-6
+      .flex.flex-col.gap-2
+        base-button(
+            :size="40",
+            @click="prevStep",
+            v-if="currentStep !== 0"
+          ) Назад
+      .flex.flex-col.gap-2
+        base-button(
+          :size="40",
+          @click="nextStep",
+          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";
+
+export default {
+  name: "StepperCreateAgreement",
+  components: {
+    BaseButton,
+    BaseStepper,
+    AgreementCommon,
+    AgreementPerson,
+  },
+  data() {
+    return {
+      isService: true,
+      currentStep: 0,
+      steps: [
+        {
+          id: 0,
+          label: "1",
+          value: "Договор",
+          component: "agreement-common",
+        },
+        {
+          id: 1,
+          label: "2",
+          value: "Пациент",
+          component: "agreement-person",
+        },
+      ],
+    };
+  },
+  computed: {
+    currentTabComponent: function () {
+      return this.steps[this.currentStep]?.component;
+    },
+  },
+  methods: {
+    nextStep() {
+      this.currentStep += 1;
+    },
+    prevStep() {
+      this.currentStep -= 1;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped></style>