[WIP] Добавил отображение данных с бэка на форме страховки

2023-04-13 17:36:08 +03:00
parent a99cf55200
commit 405ef5ade9
6 changed files with 187 additions and 127 deletions
--- a/src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue
+++ b/src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue
@@ -0,0 +1,118 @@
+<template lang="pug">
+  medical-form-wrapper(
+    title="Страховка",
+    :is-edit="isEdit",
+    :open-edit="openEdit",
+    :cancel="cancelEdit"
+  )
+    .form-wrap.gap-24.w-full
+      .data-section.flex.flex-col.gap-4(v-for="insurance in insuranceConfig")
+        .font-semibold.text-sm.whitespace-nowrap {{insurance.insuranceLabel}}
+        .flex.w-full.justify-between.items-center.gap-4(v-for="field in insurance.fields")
+          .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
+          .avatar-field.flex.gap-3.items-center.h-10.w-10(v-if="field.type === 'photo'")
+            img.avatar.object-cover(
+              v-if="basic[insurance.insuranceKey][field.key]",
+              :src="basic[insurance.insuranceKey][field.key]",
+              alt="AV"
+            )
+            .replace-photo.font-medium.text-base.cursor-pointer(
+              v-if="isEdit"
+            ) {{ basic[insurance.insuranceKey][field.key] ? "Заменить фото" : "Добавить фото"}}
+          .flex.flex-col.relative(v-else)
+            base-input(
+              v-model="basic[insurance.insuranceKey][field?.key]",
+              @update:model-value="checkChangeInput",
+              :disabled="!isEdit",
+              :standout="!isEdit",
+              :outlined="isEdit",
+              :type="field.type", 
+              :width="300",
+              text-color="black"
+            )
+            .flex.font-medium.text-smm.absolute.top-10(
+              v-if="basic?.benefit[insurance?.discount]",
+              :style="{color: 'var(--font-grey-color)'}"
+            )
+              span Процент скидки: 
+              span(
+                :style="{color: 'var(--font-dark-blue-color)'}"
+              ) {{"\xa0" + basic?.benefit[insurance?.discount] + "%"}}
+</template>
+
+<script>
+import { baseInsuranceForm } from "@/pages/newMedicalCard/utils/medicalConfig";
+import { mapGetters, mapState } from "vuex";
+import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
+import BaseAvatar from "@/components/base/BaseAvatar.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
+
+export default {
+  name: "InsuranceForm",
+  components: { MedicalFormWrapper, BaseAvatar, BaseInput },
+  data() {
+    return {
+      insuranceConfig: baseInsuranceForm,
+      isCheckChange: false,
+      isEdit: false,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      url: "getUrl",
+      initDataBasic: "getBasicData",
+    }),
+    ...mapState({
+      basic: (state) => state.medical.basicData,
+    }),
+  },
+  methods: {
+    checkChangeInput() {
+      let initData = JSON.stringify(this.initDataBasic);
+      let changeData = JSON.stringify(this.basic);
+      if (initData !== changeData) {
+        this.isCheckChange = true;
+      } else {
+        this.isCheckChange = false;
+      }
+    },
+    cancelEdit() {
+      this.isEdit = false;
+    },
+    openEdit() {
+      this.isEdit = true;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.select
+  width: 324px
+
+.avatar-field
+  min-width: 324px
+
+.avatar
+  height: 100%
+
+.replace-photo
+  color: var(--btn-blue-color)
+
+.input
+  color: purple
+
+.form-wrap
+  display: grid
+  grid-template-columns: repeat(3, 1fr)
+  grid-template-rows: repeat(1, 1fr)
+  @media(max-width: 1900px)
+    grid-template-columns: repeat(2, 1fr)
+    grid-template-rows: repeat(2, 1fr)
+  @media(max-width: 1320px)
+    grid-template-columns: repeat(1, 1fr)
+    grid-template-rows: repeat(3, 1fr)
+
+.label-field
+  color: var(--font-grey-color)
+</style>