[WIP] Добавил сохранение новой записи, поправил баги

2023-07-03 18:49:09 +03:00
parent 6be76c0fd5
commit 888181f990
6 changed files with 160 additions and 115 deletions
--- a/src/pages/newMedicalCard/components/HealthState/HealthStateCreateModal.vue
+++ b/src/pages/newMedicalCard/components/HealthState/HealthStateCreateModal.vue
@@ -8,13 +8,33 @@
          base-download(
            v-model="dataEntry.pictures",
            multiple,
+            title-type="снимок",
            :returned-fields="['photo', 'id', 'name', 'size']"
            )
          .grey-border.rounded-md.flex.w-full.py-2.pr-4.pl-2.justify-between.items-center(v-for="picture in dataEntry.pictures")
-            .flex
-              img.grey-border.rounded.w-8.h-8(:src="picture.photo")
+            .flex.items-center
+              img.grey-border.rounded.w-8.h-8.mr-3(:src="picture.photo")
+              span.text-base.font-normal.mr-2 {{picture.name}}
+              span.text-smm.font-normal(:style="{color: 'var(--font-dark-grey-color)'}") {{`${picture.size} МБ`}}
+            q-icon.delete-img.cursor-pointer(
+              @click="() => deleteImg(picture.id)",
+              name="app:cancel", 
+              size="15px",
+              )
        .flex.flex-col.gap-y-6px.justify-start.w-full
          span.text-smm.font-semibold.title-inputs Комментарий врача
+          .flex.comments.rounded
+            base-input.w-full.min-h-75(
+              v-model="dataEntry.comment",
+              type="textarea",
+              borderless,
+              dense,
+              placeholder="Введите описание"
+              autogrow,
+              min-height="75px",
+              font-size="16px",
+              :text-color="!dataEntry.comment ? 'var(--font-grey-color)' : 'var(--font-dark-blue-color)'"
+              )
      .flex.gap-x-2.text-smm
        q-btn(
          color="primary",
@@ -31,38 +51,80 @@
          no-caps,
          label="Сохранить",
          padding="10px 24px 10px 24px",
+          @click="createNewEntry"
        )
 </template>

 <script>
 import BaseModal from "@/components/base/BaseModal.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
 import BaseDownload from "@/components/base/BaseDownload.vue";
+import { mapActions } from "vuex";
 import { v_model } from "@/shared/mixins/v-model";
 import moment from "moment";

 export default {
  name: "HealthStateCreateModal",
-  components: { BaseModal, BaseDownload },
+  components: { BaseModal, BaseDownload, BaseInput },
  mixins: [v_model],
  data() {
    return {
-      dataEntry: {
-        id: 1,
-        date: moment().format("DD.MM.YYYY"),
-        pictures: [],
-        comments: [],
-      },
+      dataEntry: {},
    };
  },
  methods: {
+    ...mapActions({
+      addNewListData: "addNewListData",
+    }),
+    deleteImg(id) {
+      this.dataEntry.pictures = this.dataEntry.pictures.filter(
+        (img) => img.id !== id
+      );
+    },
    closeModal() {
      this.value = false;
    },
+    createNewEntry() {
+      this.addNewListData({
+        stateKey: "healthState",
+        data: { ...this.dataEntry, id: Math.random },
+      });
+      this.value = false;
+    },
+  },
+  computed: {
+    getData() {
+      return {
+        date: moment().format("YYYY-MM-DD"),
+        pictures: [],
+        comment: "",
+      };
+    },
+  },
+  mounted() {
+    this.dataEntry = JSON.parse(JSON.stringify(this.getData));
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler() {
+        if (!this.value) {
+          this.dataEntry = JSON.parse(JSON.stringify(this.getData));
+        }
+      },
+    },
  },
 };
 </script>

 <style lang="sass" scoped>
+.delete-img
+  color: var(--font-grey-color)
+  &:hover
+    opacity: 0.7
+.comments
+  border: 1px solid var(--border-light-grey-color)
+  padding: 3px 8px 6px 16px
 .title-inputs
  color: var(--font-grey-color)
 .form-wrapper
--- a/src/pages/newMedicalCard/components/HealthState/HealthStateForm.vue
+++ b/src/pages/newMedicalCard/components/HealthState/HealthStateForm.vue
@@ -8,7 +8,11 @@
    :save="saveСhanges",
    :is-check-change="isCheckChange"
    )
-    .flex.w-full.gap-x-4
+    .flex.w-full.gap-x-4.relative
+      span.absolute.bottom-0.right-0.text-smm.font-medium(
+        v-if="!isEdit",
+        :style="{color: 'var(--font-grey-color)'}"
+        ) {{moment(value?.date).format('DD.MM.YYYY')}}
      base-modal-showing-picture(
        v-model="isShowsPicture",
        :init-picture="value.pictures.find((el) => el.id === pictureId)",
@@ -45,48 +49,36 @@
                size="8px",
                :style="{color: 'var(--default-white)'}"
                )
-        label.download.flex.cursor-pointer.relative.items-center.justify-center.rounded(
+        base-download(
          v-if="isEdit",
-          )
-          q-icon.absolute(
-            name="app:download",
-            size="24px"
-            )
-          base-input(
-            @change="(e) => addNewFiles(e)",
-            doc,
-            type="file",
-            accept="image/*",
-            id="download",
-            :style="{zIndex: '-1'}",
-            borderless,
+          v-model="value.pictures",
+          multiple,
+          with-icon,
+          size-icon="18px",
+          :returned-fields="['photo', 'id', 'name', 'size']"
          )
      .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(
-          :class="{'comments': isEdit}",
-          :style="{padding: isEdit ? '12px 8px 12px 16px' : '0 0 0 12px'}"
-          )
-          .flex.flex-col.w-full
-            .flex.items-center.gap-x-2(v-for="(comment, index) in value.comments")
-              .flex.w-1.h-1.rounded-full(
-                v-if="!isEdit",
+        .flex.comments.rounded(v-if="isEdit")
+          q-input.w-full(
+            v-model="value.comment",
+            type="textarea",
+            borderless,
+            dense,
+            :input-style="{'min-height': '75px', 'font-weight': '500'}"
+            )
+        .flex.flex-col.w-full.pl-10px(v-else)
+          .flex(v-for="comment in getListComment")
+            .flex.gap-x-10px.w-full(v-if="comment")
+              .flex.w-1.h-1.rounded-full.mt-7px(
                :style="{backgroundColor: 'var(--font-dark-blue-color)'}")
-              q-input.comment.w-full(
-                :ref="`comment-${index}`",
-                :readonly="!isEdit",
-                v-model="comment.text",
-                borderless,
-                autofocus,
-                dense,
-                :input-style="{'height': '18px', 'font-weight': '500'}"
-                @keyup="(el) => switchСomment(el, index, comment.text)"
-                )
+              span.w-full.font-medium {{comment}}
 </template>

 <script>
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import BaseInput from "@/components/base/BaseInput";
+import BaseDownload from "@/components/base/BaseDownload.vue";
 import BaseModalShowingPicture from "@/components/base/BaseModalShowingPicture.vue";
 import moment from "moment";
 import { mapActions, mapGetters } from "vuex";
@@ -94,7 +86,12 @@ import { v_model } from "@/shared/mixins/v-model";

 export default {
  name: "HealthStateForm",
-  components: { MedicalFormWrapper, BaseModalShowingPicture, BaseInput },
+  components: {
+    MedicalFormWrapper,
+    BaseModalShowingPicture,
+    BaseInput,
+    BaseDownload,
+  },
  data() {
    return {
      moment,
@@ -102,6 +99,7 @@ export default {
      isCheckChange: true,
      isShowsPicture: false,
      pictureId: "",
+      initData: {},
    };
  },
  mixins: [v_model],
@@ -109,10 +107,24 @@ export default {
    ...mapGetters({
      getHealthStateData: "getHealthStateData",
    }),
+    getListComment() {
+      return this.value.comment.split("\n");
+    },
+  },
+  watch: {
+    isEdit: {
+      immediate: true,
+      handler() {
+        if (this.isEdit) {
+          this.initData = JSON.parse(JSON.stringify(this.value));
+        }
+      },
+    },
  },
  methods: {
    ...mapActions({
      deleteItemData: "deleteItemData",
+      returnInitData: "returnInitData",
    }),
    showPicture(id) {
      this.pictureId = id;
@@ -142,31 +154,12 @@ export default {
      this.isEdit = true;
    },
    cancelEdit() {
-      this.value = this.getHealthStateData.find(
-        (el) => el.id === this.value.id
-      );
+      this.value = this.initData;
      this.isEdit = false;
    },
    saveСhanges() {
-      this.value.comments = this.value.comments.filter((el) => el.text);
      this.isEdit = false;
    },
-    switchСomment(event, index, comment) {
-      if (event.code === "Enter") {
-        event.target.blur();
-        if (index + 1 === this.value.comments.length) {
-          this.value.comments.push({ text: "" });
-        }
-      }
-      if (event.code === "Backspace") {
-        if (!comment && this.value.comments.length > 1) {
-          this.value.comments = this.value.comments.filter(
-            (_, i) => index !== i
-          );
-          this.$refs[`comment-${index - 1}`][0].focus();
-        }
-      }
-    },
  },
 };
 </script>
@@ -200,9 +193,5 @@ export default {
    color: var(--btn-blue-color)
 .comments
  border: 1px solid var(--border-light-grey-color)
-</style>
-
-<style lang="sass">
-.comment .q-field__inner .q-field__control
-  height: 20px
+  padding: 3px 8px 6px 16px
 </style>