[WIP] Добавил страницу Зубных формул

src/pages/newMedicalCard/components/DentalFormulas/FormulasPageWrapper.vue

@@ -0,0 +1,104 @@
+<template lang="pug">
+  .flex.w-full
+    .flex.w-full.flex-col.gap-y-2(v-if="getProtocol")
+      .header.h-fit.flex.w-full.py-5.pr-5.pl-6.rounded.justify-between.items-center
+        span.text-xxl.font-bold {{`Зубная формула ${moment(getProtocol.start).format("YYYY")} года`}}
+        .flex.gap-x-2
+          q-btn.button(
+            icon="app:edit",
+            size="14px",
+            padding="0",
+            @click="openEdit",
+          )
+          q-btn.button(
+            icon="print",
+            size="20px",
+            padding="0"
+          )
+          q-btn.button(
+            icon="app:basket",
+            size="14px",
+            padding="0",
+            @click="deleteFormula",
+          )
+      .wrapper-form.rounded.relative
+        tooth-formula-form(
+          :data="formulaConfig",
+          no-top-buttons,
+          :is-outside-edit="isEdit"
+          @updateIsEdit="updateIsEdit",
+          )
+        .protocol-link.flex.absolute.gap-x-2.items-center.cursor-pointer(@click="goToProtocol")
+          span.font-medium Перейти к протоколу первичного осмотра
+          q-icon(
+            name="east",
+            size="24px"
+            )
+    .flex.w-full.h-full.items-center.justify-center(v-else)
+      span.text-xxl.font-bold(:style="{color: 'var(--font-grey-color)'}") Выберите осмотр
+</template>
+
+<script>
+import ToothFormulaForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue";
+import moment from "moment";
+import { protocolForms } from "@/pages/newMedicalCard/utils/medicalConfig.js";
+import { mapState, mapActions } from "vuex";
+
+export default {
+  name: "FormulasPageWrapper",
+  components: { ToothFormulaForm },
+  data() {
+    return {
+      moment,
+      formulaConfig: protocolForms.find((el) => el.key === "toothFormula"),
+      isEdit: false,
+    };
+  },
+  props: {
+    goToProtocol: Function,
+    protocolId: Number,
+  },
+  computed: {
+    ...mapState({
+      protocolsList: (state) => state.medical.protocolsList,
+    }),
+    getProtocol() {
+      return this.protocolsList.find((el) => el.id === this.protocolId);
+    },
+  },
+  methods: {
+    ...mapActions({
+      deleteProtocolFormData: "deleteProtocolFormData",
+    }),
+    updateIsEdit(edit) {
+      this.isEdit = edit;
+    },
+    openEdit() {
+      this.isEdit = true;
+    },
+    deleteFormula() {
+      this.deleteProtocolFormData({ key: "toothFormula" });
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.protocol-link
+  bottom: 34px
+  right: 24px
+  color: var(--btn-blue-color)
+  &:hover
+    opacity: 0.7
+.wrapper-form
+  height: 606px
+  background-color: var(--default-white)
+.header
+  background-color: var(--default-white)
+.button
+  width: 40px
+  height: 40px
+  border-radius: 4px
+  background: var(--bg-light-grey)
+  color: var(--font-grey-color)
+</style>

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue

@@ -4,6 +4,7 @@
     :is-edit="isEdit",
     :open-edit="openEdit",
     :cancel="cancelEdit",
+    :no-top-buttons="noTopButtons"
      )
     .flex.flex-col.gap-y-4
       .flex.gap-x-7px.rounded.py-7px.px-3.w-fit(:style="{'backgroundColor': isEdit ? 'var(--default-white)': 'var(--bg-light-grey)'}")
@@ -32,20 +33,19 @@
         v-model="filtredTooths",
         :data="protocol[data.state]",
         )
-    template(v-slot:right-corner)
+    .toogle.flex.flex-toogle.h-10.p-1.rounded.absolute
-      .flex.flex-toogle.h-10.p-1.rounded(:style="{'backgroundColor': 'var(--bg-light-grey)'}")
+      q-btn.w-12.h-full.rounded(
-        q-btn.w-12.h-full.rounded(
+        size="12px",
-          size="12px",
+        :style="{'backgroundColor': !isShowSecondView ? 'var(--bg-aqua-blue)' : 'var(--bg-light-grey)'}",
-          :style="{'backgroundColor': !isShowSecondView ? 'var(--bg-aqua-blue)' : 'var(--bg-light-grey)'}",
+        @click="()=>{ isShowSecondView=false }",
-          @click="()=>{ isShowSecondView=false }",
+      )
-        )
+        img(:src="teeth")
-          img(:src="teeth")
+      q-btn.w-12.h-full.rounded(
-        q-btn.w-12.h-full.rounded(
+        size="12px",
-          size="12px",
+        :style="{'backgroundColor': isShowSecondView ? 'var(--bg-aqua-blue)' : 'var(--bg-light-grey)'}",
-          :style="{'backgroundColor': isShowSecondView ? 'var(--bg-aqua-blue)' : 'var(--bg-light-grey)'}",
+        @click="()=>{isShowSecondView=true }",
-          @click="()=>{isShowSecondView=true }",
+      )
-        )
+        img(:src="teeth_2")
-          img(:src="teeth_2")
 </template>
 
 <script>
@@ -70,6 +70,8 @@ export default {
     };
   },
   props: {
+    isOutsideEdit: Boolean,
+    noTopButtons: Boolean,
     data: Object,
     fillInspection: Boolean,
   },
@@ -85,12 +87,19 @@ export default {
     },
     cancelEdit() {
       this.isEdit = false;
+      this.$emit("updateIsEdit", false);
     },
   },
   mounted() {
     this.filtredTooths = Object.keys(this.protocol[this.data.state].formula);
   },
   watch: {
+    isOutsideEdit: {
+      immediate: true,
+      handler(value) {
+        this.isEdit = value;
+      },
+    },
     fillInspection: {
       immediate: true,
       handler(value) {
@@ -104,3 +113,10 @@ export default {
   },
 };
 </script>
+
+<style lang="sass" scoped>
+.toogle
+  background-color: var(--bg-light-grey)
+  top: 16px
+  right: 24px
+</style>

src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolCard.vue

@@ -8,6 +8,7 @@
           .rounded-full.h-1.w-1.background-grey
           span.align-middle {{ `${time?.start} - ${time?.end}` }}
       .flex.items-center.justify-center.h-6.w-6.rounded(
+        v-if="!noFillIndicator",
         :style="statusСolors"
       )
         img.teeth-icon(src="@/assets/icons/teeth.svg")
@@ -32,6 +33,7 @@ export default {
   components: { BaseAvatar },
   props: {
     protocolData: Object,
+    noFillIndicator: Boolean,
   },
   computed: {
     avatar() {

src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsList.vue

@@ -1,17 +1,18 @@
 <template lang="pug">
   .list-wrapper.h-full.flex.gap-y-1.flex-col
-    .p-4.rounded.background
+    .background.h-72px.flex.w-full.justify-between.items-center.p-4.rounded
+      span.text-2xl.font-bold Осмотры
       q-btn(
+        v-if="createInspection"
         color="primary",
         size="16px",
-        label="Создать осмотр",
         no-caps,
         icon="add",
-        :style="{width: '100%', height: '40px'}"
+        :style="{width: '40px', height: '40px'}"
         padding="0",
         @click="changeShownCreateModal(true)"
       )
-    .p-4.rounded.background.list
+    .p-4.rounded.background.list.flex.flex-col.gap-y-6
       .flex
         base-select(
           :style="{flex: 1}",
@@ -26,13 +27,12 @@
           :class="sortingClass",
           @click="invertSorting"
         )
-      .flex.py-4.w-full.color-grey.text-base.justify-center
-        span.opacity-50 {{ `Осмотров: ${sortingProtocols?.length}` }}
       .flex.flex-col.gap-y-2
         medical-protocol-card(
           v-for="protocol in sortingProtocols", :key="protocol.id",
           :protocol-data="protocol",
-          @click="openInspection"
+          :no-fill-indicator="noFillIndicator",
+          @click="() => openInspection(protocol.id)"
         )
     base-modal(
       v-model="showModal",
@@ -63,6 +63,7 @@ export default {
   props: {
     openInspection: Function,
     createInspection: Function,
+    noFillIndicator: Boolean,
   },
   data() {
     return {

src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsWrapper.vue

@@ -17,6 +17,10 @@ export default {
       fillInspection: false,
     };
   },
+  props: {
+    openProtocol: Boolean,
+    clearProps: Function,
+  },
   methods: {
     ...mapActions({
       getProtocolData: "getProtocolData",
@@ -36,6 +40,17 @@ export default {
       });
     },
   },
+  watch: {
+    openProtocol: {
+      immediate: true,
+      handler(value) {
+        this.inspection = value;
+      },
+    },
+  },
+  unmounted() {
+    this.clearProps();
+  },
 };
 </script>
 

src/pages/newMedicalCard/components/MedicalBaseInfo.vue

@@ -3,7 +3,9 @@
     medical-sidebar(v-model="currentMenuItem")
     component(
       v-if="currentMenuItem",
-      v-bind:is="currentMenuItem"
+      v-bind="{...componentProps, updateCurrentItem:updateCurrentItem, clearProps:clearProps}"
+      :is="currentMenuItem",
+      @update-current-item="updateCurrentItem"
     )
 </template>
 
@@ -14,6 +16,7 @@ import MedicalAllergiesWrapper from "@/pages/newMedicalCard/components/MedicalAl
 import MedicalConfidantWrapper from "@/pages/newMedicalCard/components/MedicalConfidantWrapper.vue";
 import MedicalHealthStateWrapper from "@/pages/newMedicalCard/components/MedicalHealthStateWrapper.vue";
 import MedicalProtocolsWrapper from "@/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsWrapper.vue";
+import MedicalDentalFormulasWrapper from "@/pages/newMedicalCard/components/MedicalDentalFormulasWrapper.vue";
 export default {
   name: "MedicalBaseInfo",
   components: {
@@ -23,12 +26,23 @@ export default {
     MedicalConfidantWrapper,
     MedicalHealthStateWrapper,
     MedicalProtocolsWrapper,
+    MedicalDentalFormulasWrapper,
   },
   data() {
     return {
+      componentProps: {},
       currentMenuItem: "MedicalBasicDataWrapper",
     };
   },
+  methods: {
+    updateCurrentItem(item, props) {
+      this.currentMenuItem = item;
+      this.componentProps = { ...props };
+    },
+    clearProps() {
+      this.componentProps = {};
+    },
+  },
 };
 </script>
 <style lang="sass" scoped>

src/pages/newMedicalCard/components/MedicalDentalFormulasWrapper.vue

@@ -0,0 +1,38 @@
+<template lang="pug">
+  .flex.gap-x-2.w-full
+    medical-protocols-list(:open-inspection="openInspection", no-fill-indicator)
+    formulas-page-wrapper(:protocol-id="selectedProtocol", :go-to-protocol="goToProtocol")
+</template>
+
+<script>
+import MedicalProtocolsList from "@/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsList.vue";
+import FormulasPageWrapper from "@/pages/newMedicalCard/components/DentalFormulas/FormulasPageWrapper.vue";
+import { mapActions } from "vuex";
+
+export default {
+  name: "MedicalDentalFormulasWrapper",
+  components: { MedicalProtocolsList, FormulasPageWrapper },
+  data() {
+    return {
+      selectedProtocol: null,
+    };
+  },
+  props: {
+    updateCurrentItem: Function,
+  },
+  methods: {
+    ...mapActions({
+      getProtocolData: "getProtocolData",
+    }),
+    openInspection(id) {
+      this.selectedProtocol = id;
+      this.getProtocolData({
+        fillInspection: false,
+      });
+    },
+    goToProtocol() {
+      this.updateCurrentItem("MedicalProtocolsWrapper", { openProtocol: true });
+    },
+  },
+};
+</script>

src/pages/newMedicalCard/components/MedicalFormWrapper.vue

@@ -14,12 +14,12 @@
         size="20px",
         )
     .flex.flex-col.h-full.gap-25px.p-6
-      .flex.w-full.justify-between
+      .flex.w-full.justify-between(v-if="!noTopButtons")
         .flex.w-fit.gap-11px.items-center(v-if="!tag")
           span.font-bold.text-base.whitespace-nowrap {{title}}
           q-icon.edit-button.text-lg.cursor-pointer(
             name="app:edit",
-            v-if="!isEdit",
+            v-if="!isEdit && !noEditBtn",
             @click="openEdit",
             size="20"
             )
@@ -42,7 +42,6 @@
           )
           q-icon(name="app:basket" size="20")
           span.text-smm.font-medium {{ titleDelete }}
-        slot(name="right-corner")
       slot
       .flex.h-fit.w-fit.gap-2(v-if="isEdit && buttonsPresence")
         q-btn(
@@ -82,6 +81,8 @@ export default {
     template: Boolean,
     title: String,
     titleDelete: String,
+    noEditBtn: Boolean,
+    noTopButtons: Boolean,
     cancel: {
       type: Function,
       default: () => {},

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -358,9 +358,9 @@ export const baseInfoMenu = [
     component: "MedicalHistory",
   },
   {
-    title: "Зубная формула",
+    title: "Зубные формулы",
     id: "dental-formula",
-    component: "DentalFormula",
+    component: "MedicalDentalFormulasWrapper",
   },
 ];
 

src/store/modules/medicalCard.js

@@ -421,6 +421,9 @@ const actions = {
   deleteItemData({ commit }, props) {
     commit("setDataWithouDeleted", props);
   },
+  deleteProtocolFormData({ commit }, props) {
+    commit("setDeletedProtocolForm", props);
+  },
   addNewListData({ commit }, props) {
     commit("setNewListData", props);
   },
@@ -496,6 +499,9 @@ const mutations = {
       (item) => item.id !== props.itemId
     );
   },
+  setDeletedProtocolForm(state, props) {
+    state.protocolData[props.key] = this.getters.getInitProtocol[props.key];
+  },
   setNewListData(state, props) {
     state[props.stateKey] = [...state[props.stateKey], props.data];
   },