WIP Перенесла компоненты

2023-05-12 12:54:42 +03:00
parent a898cf31d1
commit 8d64c400c5
7 changed files with 7 additions and 7 deletions
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTagWrapper.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTagWrapper.vue
@@ -0,0 +1,195 @@
+<template lang="pug">
+  medical-form-wrapper(
+    v-for="(item, index) in list[0].data",
+    :key="item.id"
+    :title="item.name",
+    :is-edit="item?.change",
+    :open-edit="()=>openCard(index)",
+    :cancel="()=>closeCard(index)"
+    :tag="fillInspection || item?.change"
+  )
+    .protocol-body.flex.flex-col
+      .flex.items-center.gap-x-11px(:class="{'open-header': item.change || fillInspection}")
+      .flex.gap-x-4(:style="{height: item.change || fillInspection ? '300px' : ''}")
+        .flex.flex-col.gap-y-1(:class="{'open-textarea': item.change || fillInspection}")
+          .tag-wrap.flex.gap-x-1.gap-y-1(v-if="!fillInspection")
+            .tag.flex.items-center.px-3.cursor-pointer(v-for="tag in item.tags" :key="tag.id") {{tag.label}}
+          base-input.px-3(v-if="item.change || fillInspection", type="textarea", autogrow, borderless, placeholder="Введите жалобу...")
+        .filter.flex.flex-col.gap-y-4(v-if="item.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)"
+              )
+            .button
+              q-btn(
+                icon="filter_alt",
+                :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
+                padding="0"
+              )
+            .button
+              q-btn(
+                icon="app:sort-number",
+                :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
+                padding="0"
+              )
+          .field.flex.flex-col.overflow-y-scroll(v-if="item.complaints")
+            .checkbox.flex.flex-col(v-for="complaint in textSorting(item.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",
+                  :val="name?.label",
+                  :style="{border: 'none', width: '16px', height: '16px'}",
+                 
+                )
+                .name.flex.items-center.font-medium.text-smm {{ name?.label }}
+</template>
+
+<script>
+import BaseButton from "@/components/base/BaseButton.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
+import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
+
+export default {
+  name: "MedicalFormTagWrapper",
+  components: { BaseButton, BaseInput, MedicalFormWrapper },
+  props: {
+    list: Array,
+    inspection: Boolean,
+    fillInspection: Boolean,
+    openCard: Function,
+    closeCard: Function,
+  },
+  data() {
+    return {
+      selected: [],
+      abc: [
+        "А",
+        "Б",
+        "В",
+        "Г",
+        "Д",
+        "Е",
+        "Ё",
+        "Ж",
+        "З",
+        "И",
+        "Й",
+        "К",
+        "Л",
+        "М",
+        "Н",
+        "О",
+        "П",
+        "Р",
+        "С",
+        "Т",
+        "У",
+        "Ф",
+        "Х",
+        "Ц",
+        "Ч",
+        "Ш",
+        "Щ",
+        "Ы",
+        "Э",
+        "Ю",
+        "Я",
+      ],
+    };
+  },
+  methods: {
+    textSorting(arr) {
+      let srt = [];
+      this.abc.forEach((letter) => {
+        arr.forEach((str) => {
+          let finded = srt.find((obj) => obj.sym === letter);
+          if (str.label[0] === letter) {
+            if (!finded) {
+              srt.push({ sym: letter, array: [{ label: str.label }] });
+            } else if (finded.sym === letter)
+              finded.array.push({ label: str.label });
+          }
+        });
+      });
+      return srt;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.protocol-body
+  background: var(--default-white)
+  border-radius: 4px
+
+.icon
+  background: var(--bg-light-grey)
+
+.open-header
+  justify-content: space-between
+
+.open-textarea
+  width: 800px
+  padding: 4px
+  border: 1px solid var(--border-light-grey-color)
+  border-radius: 4px
+
+.tag
+  height: 32px
+  background: var(--bg-light-grey)
+  border-radius: 4px
+
+.tag-wrap
+  flex-wrap: wrap !important
+
+.filter
+  border: 1px solid var(--border-light-grey-color)
+  border-radius: 4px
+  padding: 16px 16px 0
+  width: 360px
+
+.button
+  display: flex
+  align-items: center
+  width: 40px
+  height: 40px
+  justify-content: center
+  cursor: pointer
+  border-radius: 4px
+  background: var(--bg-light-grey)
+
+.field
+  margin-right: -10px
+  &::-webkit-scrollbar-track:vertical
+    margin-bottom: 12px
+  &::-webkit-scrollbar
+    width: 4px
+
+.checkbox
+  width: 328px
+
+.line
+  border-bottom: 1px solid var(--bg-light-grey)
+  min-height: 36px
+
+.letter
+  width: 18px
+  height: 34px
+  color: var(--font-grey-color)
+
+.name
+  width: 268px
+  color: var(--font-dark-blue-color)
+
+.q-checkbox :deep(.q-checkbox__bg)
+  border-radius: 4px
+  border: 1.5px solid var(--font-grey-color)
+
+.q-checkbox :deep(.q-checkbox__inner:before)
+  background: none !important
+</style>