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

src/assets/icons/layers.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.58301 3.36973C9.71781 3.32207 9.86487 3.32207 9.99967 3.36973L18.333 6.31601C18.5827 6.4043 18.7497 6.6404 18.7497 6.90526C18.7497 7.17013 18.5827 7.40623 18.333 7.49452L15.2856 8.57193L18.333 9.64934C18.5827 9.73763 18.7497 9.97373 18.7497 10.2386C18.7497 10.5035 18.5827 10.7396 18.333 10.8279L15.2856 11.9053L18.333 12.9827C18.5827 13.071 18.7497 13.3071 18.7497 13.5719C18.7497 13.8368 18.5827 14.0729 18.333 14.1612L9.99967 17.1075C9.86487 17.1551 9.71781 17.1551 9.58301 17.1075L1.24967 14.1612C0.999958 14.0729 0.833008 13.8368 0.833008 13.5719C0.833008 13.3071 0.999958 13.071 1.24967 12.9827L4.29705 11.9053L1.24967 10.8279C0.999958 10.7396 0.833008 10.5035 0.833008 10.2386C0.833008 9.97373 0.999958 9.73763 1.24967 9.64934L4.29705 8.57193L1.24967 7.49452C0.999958 7.40623 0.833008 7.17013 0.833008 6.90526C0.833008 6.6404 0.999958 6.4043 1.24967 6.31601L9.58301 3.36973ZM6.17205 9.23484L3.33301 10.2386L9.79134 12.522L16.2497 10.2386L13.4106 9.23484L9.99967 10.4408C9.86487 10.4885 9.71781 10.4885 9.58301 10.4408L6.17205 9.23484ZM6.17205 12.5682L3.33301 13.5719L9.79134 15.8553L16.2497 13.5719L13.4106 12.5682L9.99967 13.7741C9.86487 13.8218 9.71781 13.8218 9.58301 13.7741L6.17205 12.5682ZM3.33301 6.90526L9.79134 9.18863L16.2497 6.90526L9.79134 4.6219L3.33301 6.90526Z" fill="#4772F2"/>
+</svg>

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue

@@ -4,17 +4,19 @@
     :is-edit="change",
     :open-edit="openCard",
     :cancel="closeCard",
-    :tag="fillInspection || change"
+    :tag="fillInspection || change",
+    template
   )
     .protocol-body.flex.flex-col
       .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(
+            .tag.flex.items-center.px-3.font-medium.text-smm(
+              :class="{'pointer': fillInspection || change}"
               v-for="tag in data.results.tags", :key="tag.id"
             ) {{tag.label}}
-          base-input.px-3(v-if="change || fillInspection", type="textarea", autogrow, borderless, placeholder="Введите жалобу...")
+          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}}
@@ -58,21 +60,20 @@
                   :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="change || fillInspection")
+    .flex.gap-x-20.w-full(v-if="change || fillInspection")
-      .flex.flex-col.gap-y-3(v-for="file in data.results.files")
+      .flex.flex-col.gap-y-3.w-full(v-for="file in data.results.files")
         .title.text-smm.font-semibold {{file.name}}
-        .download.flex.relative
+        .download.flex.relative.w-full
-          base-input(
+          base-input.w-full(
             @update:model-value="(e) => addNewFiles(e, file.name)",
             doc,
-            :width="548",
             type="file",
             id="upload",
             :accept="checkedName(file.name) ? '.xlsx, .xls, .doc, .docx, .pdf, .odt' : 'image/*'",
             borderless,
             multiple
           )
-          .text.flex.flex-col.items-center.justify-center.absolute.font-medium.text-smm
+          .text.flex.flex-col.items-center.justify-center.absolute.font-medium.text-smm.w-full
             span {{checkedName(file.name) ? 'Загрузите документ' : 'Загрузите скан документа'}}
               label.label.cursor-pointer(for="upload")  с компьютера
             span  или перетащите его в это поле
@@ -139,11 +140,20 @@ export default {
       this.change = false;
     },
     addNewDoc(arr) {
+      let doc = [...arr];
+      if (
+        this.data.iconDictionary[
+          doc[0]?.name.substr(doc[0].name.lastIndexOf(".") + 1)
+        ]
+      )
         this.data.results.files.find((e) => e.name === "Документы").data = [
+          ...this.data.results.files.find((e) => e.name === "Документы").data,
           ...arr,
         ];
     },
     addNewScan(arr) {
+      let scan = [...arr];
+      if (scan[0].type.split("/")[0] !== "image") return;
       [...arr].forEach((file) => {
         const reader = new FileReader();
         reader.onload = (e) => {
@@ -251,14 +261,12 @@ export default {
   background: none !important
 
 .download
-  width: 548px
   height: 62px
   border: 1px dashed var(--border-light-grey-color)
   border-radius: 4px
   cursor: pointer
 
 .text
-  width: 548px
   height: 62px
   cursor: pointer
   color: var(--font-grey-color)
@@ -282,6 +290,9 @@ export default {
 .wrap
   flex-wrap: wrap !important
 
+.pointer
+  cursor: pointer
+
 .scan-field
   height: 56px
   background: var(--bg-light-grey)

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DiseaseForm.vue

@@ -7,16 +7,15 @@
     :tag="fillInspection || change"
   )
     .disease-body.flex
-      .flex.flex-col.gap-y-17px(v-if="fillInspection || change")
+      .flex.flex-col.gap-y-17px.w-full(v-if="fillInspection || change")
         .flex.-ml-2
           q-checkbox.text-smm.font-medium(v-model="data.results.checked" label="Без особенностей" size="36px")
-        .textarea.flex
+        .textarea.flex.w-full
-          base-input(
+          base-input.w-full(
             v-model="data.results.text",
             type="textarea",
             outlined,
             resize="vertical",
-            :width="1176",
             placeholder="Введите данные..."
           )
       .font-medium.text-smm(v-else) {{data.results?.text}}

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue

@@ -11,9 +11,13 @@
       .flex.gap-x-4(:style="{height: change || fillInspection ? '300px' : ''}")
         .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.text-smm(v-for="tag in data.results.tags" :key="tag.id") {{tag.label}}
+            .tag.flex.items-center.px-3.text-smm(
+              v-for="tag in data.results.tags",
+              :key="tag.id"
+              :class="{'pointer': change || fillInspection}"
+            ) {{tag.label}}
           base-input.px-3(v-if="change || fillInspection", type="textarea", autogrow, borderless, placeholder="Введите жалобу...")
-        .filter.flex.flex-col.gap-y-4(v-if="change || fillInspection")
+        .filter.flex.flex-col.gap-y-4.relative(v-if="change || fillInspection")
           .flex.gap-x-2
             base-input(placeholder="Поиск", outlined, :width="232", iconLeft)
               q-icon(
@@ -44,6 +48,9 @@
                   :style="{border: 'none', width: '16px', height: '16px'}"
                 )
                 .name.flex.items-center.font-medium.text-smm {{ name?.label }}
+          .flex.h-10.w-10.absolute.right-4.bottom-4
+            q-btn(color="primary", dense, padding="4px 12px")
+              q-icon(name="app:icon-plus", size="17px")
 </template>
 
 <script>
@@ -159,6 +166,9 @@ export default {
   width: 268px
   color: var(--font-dark-blue-color)
 
+.pointer
+  cursor: pointer
+
 .q-checkbox :deep(.q-checkbox__bg)
   border-radius: 4px
   border: 1.5px solid var(--font-grey-color)

src/pages/newMedicalCard/components/MedicalFormWrapper.vue

@@ -10,10 +10,10 @@
           q-icon.edit-button.text-lg.cursor-pointer(name="app:edit" v-if="!isEdit" @click="openEdit" size="20")
         .flex.w-full.gap-11px.items-center.justify-between(v-else)
           span.font-bold.text-base.whitespace-nowrap {{title}}
-          .flex.items-center.h-5(:style="{color: 'var(--btn-blue-color)'}")
+          .flex.items-center.h-5(v-if="!template", :style="{color: 'var(--btn-blue-color)'}")
-            q-btn(flat, no-caps)
+            q-btn(no-caps, outline)
-              q-icon(left, name="app:plus", size="10px")
+              img.mr-2(:src="layers")
-              span.text-smm.font-medium Создать шаблон
+              span.text-smm.font-medium Шаблоны
         .flex.w-fit.gap-10px.items-center.delete-button.cursor-pointer(v-if="!isEdit && titleDelete" @click="deleteItem")
           q-icon(name="app:basket" size="20")
           span.text-smm.font-medium {{ titleDelete }}
@@ -44,6 +44,7 @@
 <script>
 import BaseButton from "@/components/base/BaseButton.vue";
 import BaseLoader from "@/components/Loader/BaseLoader.vue";
+import layers from "@/assets/icons/layers.svg";
 export default {
   name: "MedicalFormWrapper",
   components: { BaseButton, BaseLoader },
@@ -52,6 +53,7 @@ export default {
       type: Boolean,
       default: false,
     },
+    template: Boolean,
     title: String,
     titleDelete: String,
     cancel: {
@@ -87,6 +89,11 @@ export default {
       default: true,
     },
   },
+  data() {
+    return {
+      layers,
+    };
+  },
 };
 </script>
 

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -727,7 +727,6 @@ export const protocolForms = [
     key: "data",
     state: "data",
     results: {
-      title: "Данные обследования",
       tags: [
         { id: 1, label: "Боль при приеме сладкой пищи" },
         { id: 2, label: "Жжение языка" },