Merge branch 'ASTRA-143' into 'master'

Resolve ASTRA-143 See merge request andrusyakka/urban-couscous!493
2023-07-31 14:14:27 +00:00
parent e004009b09 64c246a5e3
commit e054ec6bc2
5 changed files with 298 additions and 12 deletions
--- a/src/components/base/BaseButton.vue
+++ b/src/components/base/BaseButton.vue
@@ -46,6 +46,11 @@ export default {
          height: "48px",
          "min-height": "48px",
        };
+      if (this.size === "S")
+        return {
+          height: "32px",
+          "min-height": "32px",
+        };
      return {
        height: "40px",
        "min-height": "40px",
@@ -116,6 +121,24 @@ export default {
    background-color: var(--btn-mini-color-active)
    color: var(--bg-status-green)

+.grey
+  color: var(--font-dark-blue-color)
+  border: 1.5px solid var(--gray-secondary)
+  background-color: var(--gray-thirdly)
+  font-weight: 500
+  font-size: 14px
+  line-height: 19px
+  &:hover
+    background-color: var(--btn-blue-sec-color-hover)
+  &:active
+    background-color: var(--btn-blue-sec-color-active)
+  &:disabled, &[disabled]
+    opacity: 1 !important
+    color: var(--btn-blue-sec-color-disabled)
+    background-color: white
+    border: 1.5px solid var(--btn-blue-sec-border-color-disabled)
+
+
 .q-btn :deep(.q-focus-helper)
  display: none
 .q-btn :deep(.q-ripple)
--- a/src/components/base/BaseTimeModal.vue
+++ b/src/components/base/BaseTimeModal.vue
@@ -2,12 +2,14 @@
  .flex.flex-col.gap-y-6.pt-6.dark-blue
    .table-time.flex.p-4
      .top-block.flex.flex-col.-mr-4(v-for="time in timeCoil")
-        .timeline.flex.text-smm.font-medium {{time}}
+        .timeline.flex.text-smm.font-medium {{time.hour}}
        .side.flex.p-1.h-9
-          q-btn.plus-btn(size="9px", padding="0 8px")
-            q-icon.icon-grey(name="app:plus", size="20px")
-          q-btn.lock-btn(size="4px", padding="0 4px")
-            q-icon.icon(name="app:lock", size="20px")
+          q-btn.left-btn(:class="{'default-btn': !checkStartTime(time.hour)}", size="9px", padding="0 8px")
+            q-icon.icon(v-if="checkStartTime(time.hour)", name="app:lock", size="20px")
+            q-icon.icon-grey(v-else, name="app:plus", size="20px")
+          q-btn.right-btn(:class="{'default-btn': !checkEndTime(time.hour)}", size="4px", padding="0 4px")
+            q-icon.icon(v-if="checkEndTime(time.hour  )", name="app:lock", size="20px")
+            q-icon.icon-grey(v-else, name="app:plus", size="20px")
    .flex.justify-between.items-center
      .flex.gap-2
        base-button(
@@ -29,7 +31,7 @@ import BaseButton from "@/components/base/BaseButton.vue";

 export default {
  name: "BaseTimeModal",
-  props: { times: Object, closeModalTime: Function },
+  props: { times: Object, closeModalTime: Function, data: Array },
  components: { BaseButton },
  data() {
    return { select: false };
@@ -44,7 +46,7 @@ export default {
    timeCoil() {
      let time = [];
      for (let i = this.validateStartTime; i <= this.validateEndTime; i++) {
-        time.push(`${i}:00`);
+        time.push({ hour: `${i}:00`, check: false });
      }
      return time;
    },
@@ -55,6 +57,17 @@ export default {
      let newTime = timeArray[1] > 30 ? timeArray[0] + 1 : timeArray[0];
      return newTime;
    },
+    checkStartTime(time) {
+      return this.data.find((e) => e.start === time || e.end === time)
+        ? true
+        : false;
+    },
+    checkEndTime(time) {
+      let subtime = time.substr(0, 2) + ":30";
+      return this.data.find((e) => e.end === subtime || e.start === subtime)
+        ? true
+        : false;
+    },
  },
 };
 </script>
@@ -74,12 +87,15 @@ export default {
  border-left: 1px solid var(--font-dark-blue-color)
  margin-left: 16px
  margin-bottom: 24px
+  height: 36px

-.plus-btn
+.left-btn
+  width: 29px
  border-radius: 6px 1px 1px 6px
  border: 1px solid var(--gray-secondary)

-.lock-btn
+.right-btn
+  width: 29px
  border-radius: 1px 6px 6px 1px
  border: 1px solid var(--gray-secondary)

@@ -88,4 +104,7 @@ export default {

 .icon-grey :deep(path)
  fill: var(--font-grey-color)
+
+.default-btn
+  background: var(--gray-thirdly)
 </style>
--- a/src/pages/newCalendar/components/HeaderRecordForm.vue
+++ b/src/pages/newCalendar/components/HeaderRecordForm.vue
@@ -40,7 +40,7 @@
          q-btn.change.flex.w-7.h-7.rounded-md(@click="isShowTime = true", dense, padding="4px 4px")
            q-icon.icon(name="app:time", size="20px")
          base-modal(v-model="isShowTime", title="Время", modal-padding)
-            base-time-modal(:times="times", :close-modal-time="closeModalTime")
+            base-time-modal(:times="times", :close-modal-time="closeModalTime", :data="data")
    .flex.h-14.gap-x-3.items-center.text-smm
      .text.font-semibold Медкарта:
      .flex.gap-x-1 
@@ -72,6 +72,16 @@ export default {
      currentDate: moment().clone(),
      isShowTime: false,
      times: { from: "8:30", to: "10:30" },
+      data: [
+        {
+          start: "8:00",
+          end: "8:30",
+        },
+        {
+          start: "11:30",
+          end: "12:00",
+        },
+      ],
    };
  },
  methods: {
--- a/src/pages/newCalendar/components/RecordCreationForm.vue
+++ b/src/pages/newCalendar/components/RecordCreationForm.vue
@@ -26,8 +26,10 @@
            )
          .other.flex.h-7.items-center.justify-center.rounded(v-if="otherColor") {{`+${otherServices.length}`}}
        .price.flex.items-center.items-center.justify-center.rounded-md(v-if="services.length") {{sumService}}
-        q-btn.change.flex.w-7.h-9.rounded-md(dense, padding="4px 4px")
-          img(:src="folder")
+        q-btn.change.flex.w-7.h-9.rounded-md(@click="isShowServices = true", dense, padding="4px 4px")
+          q-icon.icon(name="app:folder", size="20px")
+        base-modal(v-model="isShowServices", title="Услуги", modal-padding)
+          services-modal(:close-services="closeServices")
    base-input-full-name(:info-client="patientData")
    .flex.flex-col.flex-auto.l.gap-y-8
      .flex
@@ -68,6 +70,8 @@ import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
 import HeaderRecordForm from "./HeaderRecordForm.vue";
 import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
+import BaseModal from "@/components/base/BaseModal.vue";
+import ServicesModal from "./ServicesModal.vue";

 export default {
  name: "RecordCreationForm",
@@ -80,6 +84,8 @@ export default {
    BaseCalendar,
    HeaderRecordForm,
    BaseButton,
+    BaseModal,
+    ServicesModal,
  },
  props: { isShowForm: Boolean, closeForm: Function },
  mixins: [v_model],
@@ -126,6 +132,7 @@ export default {
      networksSettings: column.find((el) => el.name === "networks")?.settings,
      otherColor: null,
      otherServices: [],
+      isShowServices: false,
    };
  },
  computed: {
@@ -181,6 +188,9 @@ export default {
      });
      this.otherColor = this.otherServices[0]?.style.background;
    },
+    closeServices() {
+      this.isShowServices = false;
+    },
  },
  mounted() {
    this.addShadow();
@@ -244,4 +254,7 @@ export default {
  border-top: 1px solid var(--border-light-grey-color)
  margin: 40px -32px 0px
  padding: 16px 32px 0px 32px
+
+.icon :deep(path)
+  fill: var(--font-grey-color)
 </style>
--- a/src/pages/newCalendar/components/ServicesModal.vue
+++ b/src/pages/newCalendar/components/ServicesModal.vue
@@ -0,0 +1,221 @@
+<template lang="pug">
+  .wrapper.flex.flex-col.pt-6.dark-blue.font-medium
+    .flex.flex-col.gap-y-4
+      base-input.search(
+        placeholder="Поиск",
+        :width="422",
+        iconLeft
+        size="M"
+      )
+        template(v-slot:iconLeft)
+          q-icon(name="app:search", size="20px", style="color: var(--font-grey-color)")
+      .flex.gap-x-2
+        base-button(
+          @click="choiceService(item.name)",
+          v-for="item in baseServices",
+          size="S",
+          width="100px",
+          type="grey"
+        ) {{item.name}}
+      template(v-for="item in baseServices")
+        .serice-wrapper.flex.flex-col(v-if="item.check")
+          .service.flex.items-center(v-for="serve in item.data")
+            q-checkbox(v-model="serve.checked")
+            .info-block.flex.justify-between.w-full
+              .flex.flex-col.gap-y-1
+                .text-m {{serve.title}}
+                .grey-color.text-smm {{item.name}}
+              .flex.flex-col.gap-y-1
+                .text-m.font-bold {{serve.price}}
+                .grey-color.text-smm {{serve.time}}
+    .footer.flex.gap-2
+      base-button(type="secondary", label="Отменить", width="125px", @click="closeServices")
+      base-button(width="132px", label="Сохранить", @click="closeServices", disabled)
+</template>
+
+<script>
+import BaseInput from "@/components/base/BaseInput.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
+
+export default {
+  name: "SevicesModal",
+  components: { BaseInput, BaseButton },
+  props: {
+    closeServices: Function,
+  },
+  data() {
+    return {
+      baseServices: [
+        {
+          name: "Терапия",
+          check: true,
+          data: [
+            {
+              title: "Пломбирование кариеса",
+              price: "350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Консультация стоматолога",
+              price: "1 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Пломбирование кариеса",
+              price: "2 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Пломбирование кариеса",
+              price: "3 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Пломбирование кариеса",
+              price: "5 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Пломбирование кариеса",
+              price: "50 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Пломбирование кариеса",
+              price: "3 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Пломбирование кариеса",
+              price: "5 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Пломбирование кариеса",
+              price: "50 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+          ],
+        },
+        {
+          name: "Хирургия",
+          check: false,
+          data: [
+            {
+              title: "Пломбирование кариеса",
+              price: "2 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Консультация стоматолога",
+              price: "1 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+          ],
+        },
+        {
+          name: "Ортопедия  ",
+          check: false,
+          data: [
+            {
+              title: "Пломбирование кариеса",
+              price: "2 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Консультация стоматолога",
+              price: "1 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+          ],
+        },
+        {
+          name: "Ортодонтия",
+          check: false,
+          data: [
+            {
+              title: "Пломбирование кариеса",
+              price: "2 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+            {
+              title: "Консультация стоматолога",
+              price: "1 350 ₽",
+              time: "1 ч. 30 мин.",
+              checked: false,
+            },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    choiceService(name) {
+      this.baseServices.forEach((e) => {
+        e.check = false;
+        if (e.name === name) e.check = true;
+      });
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrapper
+  width: 422px
+
+.search :deep(path)
+  fill: var(--font-grey-color)
+
+.search :deep(.q-field__prepend)
+  padding-right: 4px
+
+.base-service
+  border-radius: 4px
+  border: 1px solid var(--gray-secondary)
+  background: var(--gray-thirdly)
+
+.serice-wrapper
+  overflow: auto
+  max-height: 546px
+  margin-right: -18px
+  &::-webkit-scrollbar
+    width: 4px
+  &::-webkit-scrollbar-track:vertical
+    margin-bottom: 16px
+
+.service
+  height: 67px
+  margin-right: 14px
+  &:last-child .info-block
+    border-bottom: none
+
+.info-block
+  padding: 11px 0px
+  border-bottom: 1px solid var(--gray-secondary)
+
+.footer
+  border-top: 1px solid var(--gray-secondary)
+  margin: 0px -32px -12px
+  padding: 16px 32px 0px 32px
+
+.dark-blue
+  color: var(--font-dark-blue-color)
+
+.grey-color
+  color: var(--font-grey-color)
+</style>