astra-frontend/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsInspection.vue

<template lang="pug">
  .protocols-wrapper.h-full.flex.flex-col.gap-y-2
    .flex.font-bold.text-6xl.items-center.h-full.justify-center(
      v-if="!inspection && !fillInspection"
      :style="{color: 'var(--font-grey-color)'}"
    ) Выберите осмотр
    .flex.flex-col.gap-y-2(v-else)
      .protocol.flex.justify-between.p-6(v-for="elem in list")
        .flex.font-bold.text-6xl {{elem.label}}
        .flex.gap-x-4
          .button
            q-btn(
              icon="print",
              size="20px",
              :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
              padding="0"
            )
          .button
            q-btn(
              icon="app:basket",
              size="20px",
              :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
              padding="0"
            )
      medical-form-tag(
        v-if="inspection || fillInspection",
        :list="list",
        :abc="abc",
        :fill-inspection="fillInspection"
        :open-card="openCard",
        :close-card="closeCard"
      )
      div(v-for="form in protocolForms", :key="form.key", v-if="inspection || fillInspection")  
        component(v-bind:is="form.component", :data="form", :fill-inspection="fillInspection", :abc="abc")
      .protocol.flex.justify-between.p-6(v-if="fillInspection")
        .flex.h-fit.w-fit.gap-2
          base-button.text-base.font-semibold(outlined, :size="40") Отменить
          base-button.text-base.font-semibold(:size="40") Сохранить
        .flex.items-center.gap-x-3(:style="{color: 'var(--font-grey-color)'}")
          .flex.font-semibold.text-7xl 0%
          .flex.font-medium.text-smm.w-20 заполнение осмотра
</template>

<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";
import { protocolForms } from "@/pages/newMedicalCard/utils/medicalConfig.js";

export default {
  name: "MedicalProtocolsInspection",
  components: {
    MedicalFormTag,
    DataForm,
    DiseaseForm,
    BaseButton,
    IndexForm,
    ThermometryForm,
  },
  props: { inspection: Boolean, fillInspection: Boolean },
  data() {
    return {
      protocolForms: protocolForms,
      list: [
        {
          id: 1,
          label: "Первичный осмотр 2023 года",
          data: [
            {
              id: 1,
              change: false,
              name: "Жалобы",
              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: "Жжение языка" },
              ],
            },
            {
              id: 2,
              change: false,
              name: "Аллергологический анамнез",
              tags: [],
            },
            {
              id: 3,
              change: false,
              name: "Принимаемые лекарственные препараты",
              tags: [],
            },
          ],
        },
      ],
      abc: [
        "А",
        "Б",
        "В",
        "Г",
        "Д",
        "Е",
        "Ё",
        "Ж",
        "З",
        "И",
        "Й",
        "К",
        "Л",
        "М",
        "Н",
        "О",
        "П",
        "Р",
        "С",
        "Т",
        "У",
        "Ф",
        "Х",
        "Ц",
        "Ч",
        "Ш",
        "Щ",
        "Ы",
        "Э",
        "Ю",
        "Я",
      ],
    };
  },
  methods: {
    openCard(index) {
      this.list[0].data[index].change = true;
    },
    closeCard(index) {
      this.list[0].data[index].change = false;
    },
  },
};
</script>

<style lang="sass" scoped>
.protocols-wrapper
  flex: 1
  overflow-y: auto
  &::-webkit-scrollbar
    width: 0

.protocol
  background: var(--default-white)
  width: 100%
  height: 80px
  border-radius: 4px

.button
  display: flex
  align-items: center
  width: 40px
  height: 40px
  justify-content: center
  cursor: pointer
  border-radius: 4px
  background: var(--bg-light-grey)
</style>