Merge branch 'ASTRA-104' into 'master'

[WIP] Доработал форму состояния зубов See merge request andrusyakka/urban-couscous!403
2023-06-02 13:07:37 +00:00
parent 0d1d704b09 e55176efdc
commit e579eb4e52
4 changed files with 54 additions and 27 deletions
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue
@@ -1,17 +1,17 @@
 <template lang="pug">
  .flex.p-1
-    .wrapper-tooth.felx.h-250px.w-28.flex-col.rounded.justify-around.items-center
+    .wrapper-tooth.flex.h-250px.w-28.flex-col.rounded.justify-around.items-center
      span.text-base.font-medium {{cellConfig.tooth_number}}
    .flex.flex-col.pt-2.pl-4.pr-1.gap-y-2.w-350px.h-250px
      span.font-bold.text-m Состояние зуба
-      .options-wrapper.flex.flex-col.h-250px.overflow-y-auto.gap-y-1.pb-14px
+      .scroll.flex.flex-col.h-250px.overflow-y-auto.gap-y-1.pb-14px
        q-expansion-item.expansion-item.rounded.mr-2.w-318px(
-          v-for="(kind, key) in formConfig.conditions", 
-          :label="kind.label"
+          v-for="(type, key) in formConfig.conditions", 
+          :label="type.label"
          )
-          .general-expaction.flex.flex-col.pl-4(v-if="!kind?.partsTooth")
+          .general-expaction.flex.flex-col.pl-4(v-if="!type?.partsTooth")
            .condition-item.flex.gap-11px.items-center.h-10.w-full(
-              v-for="option in kind.options"
+              v-for="option in type.options"
            )
              q-radio(
                v-model="data[key]",
@@ -26,9 +26,9 @@
                span.font-medium {{ option.label }}
          .flex.flex-col.pl-4(v-else)
            .flex.flex-col.gap-y-3
-              .part-item.flex.flex-col(v-for="(part, partKey) in kind?.partsTooth")
+              .part-item.flex.flex-col(v-for="(part, partKey) in type?.partsTooth")
                span.part-label.text-smm.font-medium {{part.label}}
-                .condition-item.flex.gap-11px.items-center.h-10.w-full.pr-4(v-for="option in kind.options")
+                .condition-item.flex.gap-11px.items-center.h-10.w-full.pr-4(v-for="option in type.options")
                  q-checkbox(
                    v-model="data[key][partKey]", 
                    :val="option.value",
@@ -40,28 +40,40 @@
                  .condition-label.flex.gap-x-2.h-full.w-full.items-center.text-smm
                    span.font-semibold {{ option.value }}
                    span.font-medium {{ option.label }}
-    q-menu.h-258px(
+    q-menu(
      v-model="isOpenInfoSelected",
      anchor="top right",
      no-parent-event,
      :offset="[4,0]"
    )
-      .flex.flex-col.px-4.py-2.gap-y-3
+      .h-258px.w-240px.flex.flex-col.pl-4.pr-2.py-2.gap-y-3
        .flex.gap-x-2.text-m.font-bold
          span Выбранное
-          span(:style="{'color': 'var(--font-grey-color)'}") {{countSelected}}
+          span(:style="{'color': 'var(--font-grey-color)'}") {{listSelected.map((el) => el.value).flat().length}}
+        .scroll.flex.flex-col.gap-y-3.h-full
+          .flex.flex-col.gap-y-2.text-smm.font-medium(v-for="condition in listSelected")
+            .flex.gap-x-6px.items-center.whitespace-nowrap
+              span.part-label {{formConfig.conditions[condition.type].label}}
+              .light-grey-background.flex.w-1.h-1.rounded(v-if="condition.part")
+              span.part-label(v-if="condition.part") {{formConfig.conditions[condition.type].partsTooth[condition.part].label}}
+            .flex.flex-col.gap-y-1
+              .grey-background.flex.px-3.py-7px.rounded.w-fit.whitespace-nowrap(
+                v-for="value in [condition.value].flat()"
+                ) {{`${value} – ${toothConditions[value]}`}}
 </template>

 <script>
 import { getFiiledConditions } from "@/pages/newMedicalCard/utils/gettersObjects";
+import { toothConditions } from "@/pages/newMedicalCard/utils/medicalConfig";

 export default {
  name: "DentalConditionForm",
  data() {
    return {
      isOpenInfoSelected: false,
-      countSelected: 0,
+      listSelected: [],
      getFiiledConditions,
+      toothConditions,
    };
  },
  props: {
@@ -72,9 +84,13 @@ export default {
  methods: {
    updateConditions() {
      let arraySelected = [...this.getFiiledConditions(this.data)];
-      if (this.data.general) arraySelected.push(this.data.general);
-      this.countSelected = arraySelected.length;
-      if (this.data.general) {
+      if (this.data.general)
+        arraySelected.unshift({
+          value: this.data.general,
+          type: "general",
+        });
+      this.listSelected = [...arraySelected];
+      if (arraySelected.length) {
        this.isOpenInfoSelected = true;
      } else {
        this.isOpenInfoSelected = false;
@@ -102,9 +118,13 @@ export default {
        border-bottom: none
 .part-label
  color: var(--font-grey-color)
+.light-grey-background
+  background-color: var(--font-grey-color)
+.grey-background
+  background-color: var(--bg-light-grey)
 .condition-label
  border-bottom: 1px solid var(--bg-light-grey)
-.options-wrapper
+.scroll
  &::-webkit-scrollbar
      width: 4px
 </style>
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue
@@ -6,7 +6,7 @@
  )
  .edit-cell.flex.h-full.w-full.rounded.justify-center.items-center(
    v-if="isEdit && rowKey !== 'tooth_number'"
-    @click.self="()=>{isEditCondition=!isEditCondition}",
+    @click.stop="()=>{isEditCondition=!isEditCondition}",
    :class="{'open-edit': isEditCondition}"
    )
    q-icon(
@@ -43,7 +43,7 @@
      tooth-conditions-info(
        v-model="isOpenConditionsInfo",
        :general="value[rowKey].general",
-        :conditions="getFiiledConditions(value[rowKey])"
+        :conditions="getFiiledConditions(value[rowKey]).map((el) => el.value).flat()"
        :config="conditionConfig"
        )
  span.text-smm.font-medium(
--- a/src/pages/newMedicalCard/utils/gettersObjects.js
+++ b/src/pages/newMedicalCard/utils/gettersObjects.js
@@ -56,13 +56,19 @@ export function getConfidantObject(data) {
 }

 export const getFiiledConditions = (condition) => {
-  let filledConditions = [
-    ...Object.values(condition.crown)
-      .filter((val) => val.length)
-      .flat(),
-    ...Object.values(condition.root)
-      .filter((val) => val.length)
-      .flat(),
-  ];
-  return filledConditions;
+  let crown = Object.keys(condition.crown)
+    .map((key) => ({
+      value: condition.crown[key],
+      type: "crown",
+      part: key,
+    }))
+    .filter((el) => el.value.length);
+  let root = Object.keys(condition.root)
+    .map((key) => ({
+      value: condition.root[key],
+      type: "root",
+      part: key,
+    }))
+    .filter((el) => el.value.length);
+  return [...crown, ...root];
 };
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -69,6 +69,7 @@ module.exports = {
        "143px": "143px",
        "148px": "148px",
        "212px": "212px",
+        "240px": "240px",
        "250px": "250px",
        "258px": "258px",
        "318px": "318px",