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

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.items-center.gap-x-11px(:class="{'open-header': change || fillInspection}")
-      .flex.flex-col.gap-y-4(:class="{'changed': list.change || fillInspection}")
+      .flex.flex-col.gap-y-4(:class="{'changed': change || fillInspection}")
-        .flex.flex-col.gap-y-1(:class="{'open-textarea': list.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="Введите жалобу...")
+          base-input.px-3(v-if="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")
+        template(v-if="!(change || fillInspection)", v-for="file in data.results.files")
-          .title.font-semibold.text-smm.mb-2(v-if="file?.data?.length") {{file.name}}
+          .wrap.flex.flex-col.gap-1.gap-y-3(v-if="file?.data?.length")
-          .wrap.flex.gap-x-1.gap-y-1
+            .title.font-semibold.text-smm.mb-2 {{file.name}}
-            .flex.gap-x-2.items-center.pl-2.pr-4.py-2.gap-y-3(
+            .wrap.flex.gap-x-1.gap-y-1
-              v-for="item in file.data"
+              .flex.gap-x-2.items-center.pl-2.pr-4.py-2.gap-y-3(
-              :class="{'photo-field': checkedName(file.name), 'scan-field': file.name === 'Сканы'}"
+                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(
+                q-avatar(:size="checkedName(file.name) ? '24px' : '40px'", :rounded="!checkedName(file.name)")
-                  :src="checkedName(file.name) ? iconDictionary[item.name.substr(item.name.lastIndexOf('.') + 1)] : item.file"
+                  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(v-if="checkedName(file.name)") {{item.name}}
-                .doc-text.font-medium.text-smm {{item.name.substr(0, item.name.lastIndexOf('.'))}}
+                .flex.flex-col.gap-y-1(v-else)
-                .title.font-medium.text-xsx {{item.size + " Мб"}}
+                  .doc-text.font-medium.text-smm {{item.name.substr(0, item.name.lastIndexOf('.'))}}
-        .filter.flex.flex-col.gap-y-4(v-if="list.change || fillInspection")
+                  .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")
+          .field.flex.flex-col.overflow-y-scroll
-            .checkbox.flex.flex-col(v-for="complaint in textSorting(list.complaints)")
+            .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")
+    .protocol-data.flex.gap-x-20(v-if="change || fillInspection")
-      .flex.flex-col.gap-y-3(v-for="file in list.files")
+      .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: {
+      change: false,
-        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,
-      },
     };
   },
-
   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.data.results.files.find((e) => e.name === "Документы").data = [
-      this.list.files.find((e) => e.name === "Документы").data = this.docData;
+        ...arr,
+      ];
     },
     addNewScan(arr) {
       [...arr].forEach((file) => {
         const reader = new FileReader();
         reader.onload = (e) => {
-          this.scanData.push({
+          this.data.results.files
-            file: e.target.result,
+            .find((e) => e.name === "Сканы")
-            name: file.name,
+            ?.data.push({
-            size: (file.size / 1024 / 1024).toFixed(1),
+              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;
     },
   },
 };

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>

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,

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -6,6 +6,9 @@ import {
   ruleDateValue,
   ruleOptionalFields,
 } from "@/shared/utils/rulesInputs";
+import pdfIcon from "@/assets/icons/pdf.svg";
+import wordIcon from "@/assets/icons/word.svg";
+import exelIcon from "@/assets/icons/exel.svg";
 
 export const baseDataForm = [
   {
@@ -670,6 +673,40 @@ export const protocolForms = [
     component: "DataForm",
     key: "data",
     state: "data",
+    results: {
+      title: "Данные обследования",
+      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: 8, label: "Кровоточивость языка" },
+      ],
+      files: [
+        { name: "Документы", data: [] },
+        { name: "Сканы", data: [] },
+      ],
+    },
+    selected: [],
+    iconDictionary: {
+      doc: wordIcon,
+      docx: wordIcon,
+      xls: exelIcon,
+      xlsx: exelIcon,
+      odt: wordIcon,
+      pdf: pdfIcon,
+    },
   },
   {
     title: "Термометрия (по показаниям)",
@@ -714,4 +751,14 @@ export const protocolForms = [
       ],
     },
   },
+  {
+    title: "Развитие настоящего заболевания",
+    component: "DiseaseForm",
+    key: "disease",
+    state: "disease",
+    results: {
+      checked: false,
+      text: "",
+    },
+  },
 ];

tailwind.config.js

@@ -34,6 +34,7 @@ module.exports = {
         "7px": "7px",
         "10px": "10px",
         "11px": "11px",
+        "17px": "17px",
         "30px": "30px",
         "25px": "25px",
         43: "43px",