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

2023-05-19 14:30:56 +03:00
parent 0c557d185c
commit cd5d7b8a66
6 changed files with 54 additions and 25 deletions
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue
+++ b/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.flex-col.gap-y-3(v-for="file in data.results.files")
+    .flex.gap-x-20.w-full(v-if="change || fillInspection")
+      .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
-          base-input(
+        .download.flex.relative.w-full
+          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) {
-      this.data.results.files.find((e) => e.name === "Документы").data = [
-        ...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)
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DiseaseForm.vue
+++ b/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
-          base-input(
+        .textarea.flex.w-full
+          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}}
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue
+++ b/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)
--- a/src/pages/newMedicalCard/components/MedicalFormWrapper.vue
+++ b/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)'}")
-            q-btn(flat, no-caps)
-              q-icon(left, name="app:plus", size="10px")
-              span.text-smm.font-medium Создать шаблон
+          .flex.items-center.h-5(v-if="!template", :style="{color: 'var(--btn-blue-color)'}")
+            q-btn(no-caps, outline)
+              img.mr-2(:src="layers")
+              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>

--- a/src/pages/newMedicalCard/utils/medicalConfig.js
+++ b/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: "Жжение языка" },