[WIP] Добавил форму Развитие настоящего заболевания, перенес данные в стор, фикс стилей

2023-05-17 16:49:25 +03:00
parent 495310f39e
commit 3fbe0dd6d8
5 changed files with 156 additions and 80 deletions
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue
@@ -1,36 +1,37 @@
 <template lang="pug">
  medical-form-wrapper(
    :title="data.title",
-    :is-edit="list?.change",
+    :is-edit="change",
    :open-edit="openCard",
    :cancel="closeCard",
-    :tag="fillInspection || list?.change"
+    :tag="fillInspection || change"
  )
    .protocol-body.flex.flex-col
-      .flex.items-center.gap-x-11px(:class="{'open-header': list.change || fillInspection}")
-      .flex.flex-col.gap-y-4(:class="{'changed': list.change || fillInspection}")
-        .flex.flex-col.gap-y-1(:class="{'open-textarea': list.change || fillInspection}")
+      .flex.items-center.gap-x-11px(:class="{'open-header': change || fillInspection}")
+      .flex.flex-col.gap-y-4(:class="{'changed': change || fillInspection}")
+        .flex.flex-col.gap-y-1(:class="{'open-textarea': change || fillInspection}")
          .tag-wrap.flex.gap-x-1.gap-y-1(v-if="!fillInspection")
            .tag.flex.items-center.px-3.cursor-pointer.font-medium.text-smm(
-              v-for="tag in list.tags", :key="tag.id"
+              v-for="tag in data.results.tags", :key="tag.id"
            ) {{tag.label}}
-          base-input.px-3(v-if="list.change || fillInspection", type="textarea", autogrow, borderless, placeholder="Введите жалобу...")
-        .wrap.gap-1.flex.flex-col(v-if="(docData.length || scanData.length) && !(list.change || fillInspection)", v-for="file in list.files")
-          .title.font-semibold.text-smm.mb-2(v-if="file?.data?.length") {{file.name}}
-          .wrap.flex.gap-x-1.gap-y-1
-            .flex.gap-x-2.items-center.pl-2.pr-4.py-2.gap-y-3(
-              v-for="item in file.data"
-              :class="{'photo-field': checkedName(file.name), 'scan-field': file.name === 'Сканы'}"
-            )
-              q-avatar(:size="checkedName(file.name) ? '24px' : '40px'", :rounded="!checkedName(file.name)")
-                img.h-10.w-10.object-cover(
-                  :src="checkedName(file.name) ? iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)] : item.file"
-                )
-              .doc-text.font-medium.text-smm(v-if="checkedName(file.name)") {{item.name}}
-              .flex.flex-col.gap-y-1(v-else)
-                .doc-text.font-medium.text-smm {{item.name.substr(0, item.name.lastIndexOf('.'))}}
-                .title.font-medium.text-xsx {{item.size + " Мб"}}
-        .filter.flex.flex-col.gap-y-4(v-if="list.change || fillInspection")
+          base-input.px-3(v-if="change || fillInspection", type="textarea", autogrow, borderless, placeholder="Введите жалобу...")
+        template(v-if="!(change || fillInspection)", v-for="file in data.results.files")
+          .wrap.flex.flex-col.gap-1.gap-y-3(v-if="file?.data?.length")
+            .title.font-semibold.text-smm.mb-2 {{file.name}}
+            .wrap.flex.gap-x-1.gap-y-1
+              .flex.gap-x-2.items-center.pl-2.pr-4.py-2.gap-y-3(
+                v-for="item in file.data"
+                :class="{'photo-field': checkedName(file.name), 'scan-field': file.name === 'Сканы'}"
+              )
+                q-avatar(:size="checkedName(file.name) ? '24px' : '40px'", :rounded="!checkedName(file.name)")
+                  img.h-10.w-10.object-cover(
+                    :src="checkedName(file.name) ? data.iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)] : item.file"
+                  )
+                .doc-text.font-medium.text-smm(v-if="checkedName(file.name)") {{item.name}}
+                .flex.flex-col.gap-y-1(v-else)
+                  .doc-text.font-medium.text-smm {{item.name.substr(0, item.name.lastIndexOf('.'))}}
+                  .title.font-medium.text-xsx {{item.size + " Мб"}}
+        .filter.flex.flex-col.gap-y-4(v-if="change || fillInspection")
          .flex.gap-x-2
            base-input(placeholder="Поиск", outlined, :width="232", iconLeft)
              q-icon(name="app:icon-search", size="20px", style="color: var(--font-grey-color)")
@@ -46,19 +47,19 @@
                :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
                padding="0"
              )
-          .field.flex.flex-col.overflow-y-scroll(v-if="list.complaints")
-            .checkbox.flex.flex-col(v-for="complaint in textSorting(list.complaints)")
+          .field.flex.flex-col.overflow-y-scroll
+            .checkbox.flex.flex-col(v-for="complaint in textSorting(data.results.complaints)")
              .letter.flex.items-center.font-bold.justify-center {{ complaint.sym }}
              .line.flex.gap-x-4.h-9.items-center(v-for="name in complaint?.array")
                q-checkbox(
                  dense,
-                  v-model="selected",
+                  v-model="data.selected",
                  :val="name?.label",
                  :style="{border: 'none', width: '16px', height: '16px'}"
                )
                .name.flex.items-center.font-medium.text-smm {{ name?.label }}
-    .protocol-data.flex.gap-x-20(v-if="list.change || fillInspection")
-      .flex.flex-col.gap-y-3(v-for="file in list.files")
+    .protocol-data.flex.gap-x-20(v-if="change || fillInspection")
+      .flex.flex-col.gap-y-3(v-for="file in data.results.files")
        .title.text-smm.font-semibold {{file.name}}
        .download.flex.relative
          base-input(
@@ -82,7 +83,7 @@
          )
            q-avatar(:size="checkedName(file.name) ? '24px' : '40px'", :rounded="!checkedName(file.name)")
              img.h-10.w-10.object-cover(
-                :src="checkedName(file.name) ? iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)] : item.file"
+                :src="checkedName(file.name) ? data.iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)] : item.file"
              )
            .doc-text.font-medium.text-smm(v-if="checkedName(file.name)") {{item.name}}
            .flex.flex-col.gap-y-1(v-else)
@@ -94,9 +95,6 @@
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
-import pdfIcon from "@/assets/icons/pdf.svg";
-import wordIcon from "@/assets/icons/word.svg";
-import exelIcon from "@/assets/icons/exel.svg";

 export default {
  name: "DataForm",
@@ -109,46 +107,9 @@ export default {
  },
  data() {
    return {
-      list: {
-        title: "Данные обследования",
-        change: false,
-        tags: [
-          { id: 1, label: "Боль при приеме сладкой пищи" },
-          { id: 2, label: "Жжение языка" },
-          { id: 3, label: "Кровоточивость десен" },
-          { id: 4, label: "Лечение у ортодонта не проводилось" },
-          { id: 5, label: "Ранее зубы лечили в ЛПУ" },
-          { id: 6, label: "Удаление зуба" },
-        ],
-        complaints: [
-          { id: 1, label: "Ранее зубы лечили в ЛПУ" },
-          { id: 2, label: "Жжение языка" },
-          { id: 3, label: "Кровоточивость десен" },
-          { id: 4, label: "Лечение у ортодонта не проводилось" },
-          { id: 5, label: "Уныние зуба" },
-          { id: 6, label: "Боль при приеме сладкой пищи" },
-          { id: 7, label: "Удаление зуба" },
-          { id: 2, label: "Жжение языка" },
-        ],
-        files: [
-          { name: "Документы", data: null },
-          { name: "Сканы", data: null },
-        ],
-      },
-      selected: [],
-      docData: [],
-      scanData: [],
-      iconDictionary: {
-        doc: wordIcon,
-        docx: wordIcon,
-        xls: exelIcon,
-        xlsx: exelIcon,
-        odt: wordIcon,
-        pdf: pdfIcon,
-      },
+      change: false,
    };
  },
-
  methods: {
    checkedName(e) {
      return e === "Документы" ? true : false;
@@ -172,28 +133,30 @@ export default {
      return srt;
    },
    openCard() {
-      this.list.change = true;
+      this.change = true;
    },
    closeCard() {
-      this.list.change = false;
+      this.change = false;
    },
    addNewDoc(arr) {
-      this.docData = [...this.docData, ...arr];
-      this.list.files.find((e) => e.name === "Документы").data = this.docData;
+      this.data.results.files.find((e) => e.name === "Документы").data = [
+        ...arr,
+      ];
    },
    addNewScan(arr) {
      [...arr].forEach((file) => {
        const reader = new FileReader();
        reader.onload = (e) => {
-          this.scanData.push({
-            file: e.target.result,
-            name: file.name,
-            size: (file.size / 1024 / 1024).toFixed(1),
-          });
+          this.data.results.files
+            .find((e) => e.name === "Сканы")
+            ?.data.push({
+              file: e.target.result,
+              name: file.name,
+              size: (file.size / 1024 / 1024).toFixed(1),
+            });
        };
        reader.readAsDataURL(file);
      });
-      this.list.files.find((e) => e.name === "Сканы").data = this.scanData;
    },
  },
 };
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DiseaseForm.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DiseaseForm.vue
@@ -0,0 +1,63 @@
+<template lang="pug">
+  medical-form-wrapper(
+    :title="data.title",
+    :is-edit="change",
+    :open-edit="openCard",
+    :cancel="closeCard",
+  )
+    .disease-body.flex
+      .flex.flex-col.gap-y-17px(v-if="fillInspection || change")
+        .flex.-ml-2
+          q-checkbox.text-smm.font-medium(v-model="data.results.checked" label="Без особенностей" size="36px")
+        .textarea.flex
+          base-input(
+            v-model="data.results.text",
+            type="textarea",
+            outlined,
+            resize="vertical",
+            :width="1176",
+            placeholder="Введите данные..."
+          )
+      .font-medium.text-smm(v-else) {{data.results?.text}}
+</template>
+
+<script>
+import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
+
+export default {
+  name: "DiseaseForm",
+  components: { MedicalFormWrapper, BaseInput },
+  props: {
+    data: Object,
+    fillInspection: Boolean,
+    inspection: Boolean,
+  },
+  data() {
+    return { change: false };
+  },
+  methods: {
+    openCard() {
+      this.change = true;
+    },
+    closeCard() {
+      this.change = false;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.disease-body
+  background: var(--default-white)
+  border-radius: 4px
+  color: var(--font-dark-blue-color)
+
+.q-checkbox :deep(.q-checkbox__bg)
+  border-radius: 4px
+  border: 1.5px solid var(--font-grey-color)
+
+.textarea
+  box-sizing: border-box
+  min-height: 130px
+</style>
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsInspection.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsInspection.vue
@@ -44,6 +44,7 @@
 <script>
 import MedicalFormTag from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue";
 import DataForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue";
+import DiseaseForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DiseaseForm.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
 import IndexForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/IndexForm.vue";
 import ThermometryForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ThermometryForm.vue";
@@ -54,6 +55,7 @@ export default {
  components: {
    MedicalFormTag,
    DataForm,
+    DiseaseForm,
    BaseButton,
    IndexForm,
    ThermometryForm,