[WIP] Исправил баги и отображение фото

2023-06-29 17:24:54 +03:00
parent d082412927
commit b72886f674
6 changed files with 126 additions and 89 deletions
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -27,6 +27,7 @@
      :accept="accept",
      :debounce="debounce",
      :shadow-text="shadowText",
+      :autofocus="autofocus",
      hide-bottom-space
    )
      template(v-slot:prepend, v-if="iconLeft")
@@ -46,6 +47,7 @@ export default {
    multiple: Boolean,
    circle: Boolean,
    doc: Boolean,
+    autofocus: Boolean,
    dense: {
      type: Boolean,
      default: true,
--- a/src/components/base/BaseModalShowingPicture.vue
+++ b/src/components/base/BaseModalShowingPicture.vue
@@ -6,7 +6,7 @@
    .flex.justify-center.items-center.absolut.w-screen.h-screen.pointer-events-none
      .wrapper.flex.relative.rounded-2xl(:style="{color: 'var(--default-white)'}")
        .flex.absolute(:style="{color: 'var(--default-white)'}")
-        img.h-full.w-full.rounded-2xl(:src="picture?.photo || initPicture?.photo")
+        img.rounded-2xl.w-full.h-full(:src="picture?.photo || initPicture?.photo")
        q-btn.btn.right(
          @click="closeModal"
          round,
--- a/src/pages/newMedicalCard/components/HealthState/HealthStateForm.vue
+++ b/src/pages/newMedicalCard/components/HealthState/HealthStateForm.vue
@@ -14,21 +14,23 @@
        :init-picture="value.pictures.find((el) => el.id === pictureId)",
        :list-pictures="value.pictures"
        )
-      .flex.flex-col.gap-y-2.p-2.rounded(
+      .flex.flex-col.gap-y-2.p-2.rounded.h-fit(
        v-if="value.pictures.length || isEdit",
        :style="{backgroundColor: 'var(--bg-light-grey)'}",
        )
-        .flex.gap-2.w-full(v-if="value.pictures.length")
+        .pictures.gap-2(
+          v-if="value.pictures.length"
+          :class="{'edit': isEdit, 'no-edit': !isEdit, 'one-picture': value.pictures.length === 1}"
+          )
          .photo.flex.relative(
            v-for="(picture, index) in value.pictures",
-            :style="{width: isEdit ? '40px' : '104px', height: isEdit ? '40px' : '104px'}",
            )
            .photo-viewing.flex.absolute.rounded.cursor-pointer.w-full.h-full.items-center.justify-center(
              v-if="!isEdit",
              @click="() => showPicture(picture.id)"
              )
              img(src="@/assets/icons/whiteEye.svg" alt="eye")
-            img.h-full.w-full.rounded(:src="picture.photo")
+            img.h-full.w-full.rounded.object-cover(:src="picture.photo")
            q-btn.absolute(
              v-if="isEdit",
              @click="() => deletePicture(picture.id)",
@@ -43,24 +45,23 @@
                size="8px",
                :style="{color: 'var(--default-white)'}"
                )
-        .download.flex.cursor-pointer.relative.items-center.justify-center.rounded(
+        label.download.flex.cursor-pointer.relative.items-center.justify-center.rounded(
          v-if="isEdit",
-          :style="{ height: '93px' }",
          )
-          base-input.w-full.h-full(
-            @update:model-value="(e) => addNewFiles(e)",
+          q-icon.absolute(
+            name="app:download",
+            size="24px"
+            )
+          base-input(
+            @change="(e) => addNewFiles(e)",
            doc,
            type="file",
-            id="download",
            accept="image/*",
+            id="download",
+            :style="{zIndex: '-1'}",
            borderless,
            multiple
          )
-          label.absolute.w-fit.h-fit(for="download")
-            q-icon(
-              name="app:download",
-              size="24px"
-              )
      .flex.w-full.flex-col.gap-y-2
        .flex.font-semibold.text-sm(:style="{color: 'var(--font-grey-color)'}") Комментарий врача
        .flex.flex-col.rounded.h-full(
@@ -77,8 +78,9 @@
                :readonly="!isEdit",
                v-model="comment.text",
                borderless,
+                autofocus,
                dense,
-                :input-style="{'height': '16px', 'font-weight': '500'}"
+                :input-style="{'height': '18px', 'font-weight': '500'}"
                @keyup="(el) => switchСomment(el, index, comment.text)"
                )
 </template>
@@ -87,7 +89,7 @@
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import BaseInput from "@/components/base/BaseInput";
 import BaseModalShowingPicture from "@/components/base/BaseModalShowingPicture.vue";
-import { mapActions } from "vuex";
+import { mapActions, mapGetters } from "vuex";
 import { v_model } from "@/shared/mixins/v-model";

 export default {
@@ -102,6 +104,11 @@ export default {
    };
  },
  mixins: [v_model],
+  computed: {
+    ...mapGetters({
+      getHealthStateData: "getHealthStateData",
+    }),
+  },
  methods: {
    ...mapActions({
      deleteItemData: "deleteItemData",
@@ -117,7 +124,7 @@ export default {
      this.value.pictures = this.value.pictures.filter((el) => el.id !== id);
    },
    addNewFiles(e) {
-      Object.values(e).forEach((file) => {
+      Object.values(e.target.files).forEach((file) => {
        let reader = new FileReader();
        reader.onload = (e) => {
          this.value.pictures.push({
@@ -128,14 +135,19 @@ export default {
        };
        reader.readAsDataURL(file);
      });
+      e.target.value = null;
    },
    openEdit() {
      this.isEdit = true;
    },
    cancelEdit() {
+      this.value = this.getHealthStateData.find(
+        (el) => el.id === this.value.id
+      );
      this.isEdit = false;
    },
    saveСhanges() {
+      this.value.comments = this.value.comments.filter((el) => el.text);
      this.isEdit = false;
    },
    switchСomment(event, index, comment) {
@@ -144,15 +156,13 @@ export default {
        if (index + 1 === this.value.comments.length) {
          this.value.comments.push({ text: "" });
        }
-        if (this.$refs[`comment-${index + 1}`]) {
-          this.$refs[`comment-${index + 1}`][0].focus();
-        }
      }
      if (event.code === "Backspace") {
-        if (!comment) {
+        if (!comment && this.value.comments.length > 1) {
          this.value.comments = this.value.comments.filter(
            (_, i) => index !== i
          );
+          this.$refs[`comment-${index - 1}`][0].focus();
        }
      }
    },
@@ -161,6 +171,16 @@ export default {
 </script>

 <style lang="sass" scoped>
+.pictures
+  display: grid
+  &.no-edit
+    grid-template-columns: repeat(2, 104px)
+    grid-auto-rows: 104px
+    &.one-picture
+      grid-template-columns: repeat(1, 104px)
+  &.edit
+    grid-template-columns: repeat(4, 40px)
+    grid-auto-rows: 40px
 .photo-viewing
  display: none
  background-color: var(--font-dark-blue-color-1)
@@ -169,6 +189,7 @@ export default {
  &:hover .photo-viewing
    display: flex
 .download
+  min-height: 93px
  width: 216px
  border: 1px dashed var(--font-grey-color)
  background-color: var(--default-white)
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue
@@ -90,5 +90,17 @@ export default {
  mounted() {
    this.filtredTooths = Object.keys(this.protocol[this.data.state].formula);
  },
+  watch: {
+    fillInspection: {
+      immediate: true,
+      handler(value) {
+        if (value) {
+          this.isEdit = true;
+        } else {
+          this.isEdit = false;
+        }
+      },
+    },
+  },
 };
 </script>
--- a/src/pages/newMedicalCard/components/MedicalFormWrapper.vue
+++ b/src/pages/newMedicalCard/components/MedicalFormWrapper.vue
@@ -3,6 +3,16 @@
    transition(name="medical-form", mode="out-in")
      .loader.absolute.z-10.flex.items-center.justify-center.w-full.h-full.rounded(v-if="isLoadingData")
        base-loader
+    q-btn.absolute.top-4.right-6(
+      @click="deleteItem",
+      v-if="!titleDelete && deleteItem",
+      :style="{backgroundColor: 'var(--bg-light-grey)', color: 'var(--font-grey-color)',}",
+      padding="10px",
+      )
+      q-icon(
+        name="app:basket",
+        size="20px",
+        )
    .flex.flex-col.h-full.gap-25px.p-6
      .flex.w-full.justify-between
        .flex.w-fit.gap-11px.items-center(v-if="!tag")
@@ -26,23 +36,12 @@
              )
              img.mr-2(:src="layers")
              span.text-smm.font-medium Шаблоны
-        .flex(v-if="deleteItem")
-          q-btn(
-            @click="deleteItem",
-            v-if="!titleDelete",
-            :style="{backgroundColor: 'var(--bg-light-grey)', color: 'var(--font-grey-color)'}",
-            padding="10px",
-            )
-            q-icon(
-              name="app:basket",
-              size="20px",
-              )
-          .flex.w-fit.gap-10px.items-center.delete-button.cursor-pointer(
-            v-else-if="!isEdit && titleDelete", 
-            @click="deleteItem"
-            )
-            q-icon(name="app:basket" size="20")
-            span.text-smm.font-medium {{ titleDelete }}
+        .flex.w-fit.gap-10px.items-center.delete-button.cursor-pointer(
+          v-if="!isEdit && titleDelete && deleteItem", 
+          @click="deleteItem"
+          )
+          q-icon(name="app:basket" size="20")
+          span.text-smm.font-medium {{ titleDelete }}
        slot(name="right-corner")
      slot
      .flex.h-fit.w-fit.gap-2(v-if="isEdit && buttonsPresence")
--- a/src/store/modules/medicalCard.js
+++ b/src/store/modules/medicalCard.js
@@ -128,56 +128,7 @@ const state = () => ({
    },
  ],
  protocolData: null,
-  healthState: [
-    {
-      id: 1,
-      year: 2023,
-      pictures: [],
-      comments: [
-        {
-          text: "Пациент склонен к преувеличению фактов",
-        },
-        {
-          text: "Пациент отказывался заполнять карту",
-        },
-        {
-          text: "Тяжело идет на контакт",
-        },
-      ],
-    },
-    {
-      id: 2,
-      year: 2022,
-      pictures: [],
-      comments: [
-        {
-          text: "Пациент склонен к преувеличению фактов",
-        },
-        {
-          text: "Пациент отказывался заполнять карту",
-        },
-        {
-          text: "Тяжело идет на контакт",
-        },
-      ],
-    },
-    {
-      id: 3,
-      year: 2021,
-      pictures: [],
-      comments: [
-        {
-          text: "Пациент склонен к преувеличению фактов",
-        },
-        {
-          text: "Пациент отказывался заполнять карту",
-        },
-        {
-          text: "Тяжело идет на контакт",
-        },
-      ],
-    },
-  ],
+  healthState: getters.getHealthStateData(),
 });

 const getters = {
@@ -439,6 +390,58 @@ const getters = {
      clinical: [],
    };
  },
+  getHealthStateData() {
+    return [
+      {
+        id: 1,
+        year: 2023,
+        pictures: [],
+        comments: [
+          {
+            text: "Пациент склонен к преувеличению фактов",
+          },
+          {
+            text: "Пациент отказывался заполнять карту",
+          },
+          {
+            text: "Тяжело идет на контакт",
+          },
+        ],
+      },
+      {
+        id: 2,
+        year: 2022,
+        pictures: [],
+        comments: [
+          {
+            text: "Пациент склонен к преувеличению фактов",
+          },
+          {
+            text: "Пациент отказывался заполнять карту",
+          },
+          {
+            text: "Тяжело идет на контакт",
+          },
+        ],
+      },
+      {
+        id: 3,
+        year: 2021,
+        pictures: [],
+        comments: [
+          {
+            text: "Пациент склонен к преувеличению фактов",
+          },
+          {
+            text: "Пациент отказывался заполнять карту",
+          },
+          {
+            text: "Тяжело идет на контакт",
+          },
+        ],
+      },
+    ];
+  },
 };

 const actions = {