[WIP] Добавил формы на модальном окне создания записи

2023-06-09 19:41:04 +03:00
parent 900cc7b2ba
commit 10c72e8b61
10 changed files with 297 additions and 86 deletions
--- a/src/pages/clients/components/FormCreateBasicInfo.vue
+++ b/src/pages/clients/components/FormCreateBasicInfo.vue
@@ -11,20 +11,23 @@
        type="date"
        v-model="basicInfo.birth_date",
        label="Дата рождения",
-        outlined
+        outlined,
+        important
      )
      base-input(
        v-model="phone.username",
        placeholder="+7 (915) 644–92–23",
        mask="+7 (###) ###-##-##",
        label="Номер телефона",
-        outlined
+        outlined,
+        important
      )
      base-input(
        v-model="email.username",
        placeholder="user@yandex.ru",
        label="Email",
-        outlined
+        outlined,
+        important
      )
      .flex.flex-col.col-start-1.col-end-3.w-100(class="gap-y-1.5")
        span.text-sm.font-semibold.opacity-40.input-info Ссылки на соцсети
--- a/src/pages/newCalendar/TheCalendar.vue
+++ b/src/pages/newCalendar/TheCalendar.vue
@@ -3,8 +3,8 @@
    calendar-sidebar(v-if="!isOpen", :open-sidebar="openSidebar", :create-form="createForm")
    calendar-open-sidebar(v-else, :open-sidebar="openSidebar", :create-form="createForm")
    calendar-wrapper.ml-2(:open-sidebar="isOpen")
-    base-modal(v-model="isShowForm", title="Создание записи")
-      record-creation-form(v-model="isShowForm")
+    base-modal(v-model="isShowForm", title="Создание записи", modal-padding)
+      record-creation-form(v-model="isShowForm", :close-form="closeForm")
 </template>

 <script>
@@ -38,6 +38,9 @@ export default {
    createForm() {
      this.isShowForm = true;
    },
+    closeForm() {
+      this.isShowForm = false;
+    },
  },
 };
 </script>
--- a/src/pages/newCalendar/components/RecordCreationForm.vue
+++ b/src/pages/newCalendar/components/RecordCreationForm.vue
@@ -5,24 +5,42 @@
        .flex.gap-x-3.items-center
          .text.font-semibold Статус
          .flex.gap-x-1
-            .input.flex.items-center.pl-4
-              .text-input.font-medium Не принят
+            .input.flex.items-center.pl-4.gap-x-1
+              img(:src="currentStatus.icon")
+              .text-input.font-medium {{currentStatus.name}}
            q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
              img(:src="folder")
+              q-menu
+                .status.flex.items-center.gap-x-1.font-medium.text-smm(
+                  v-for="status in patientData.statuses",
+                  @click="choiceStatus(status)",
+                  v-close-popup
+                )
+                  img(:src="status.icon")
+                  span {{status.name}}
        .flex.gap-x-3.items-center
          .text.font-semibold Дата:
          .flex.gap-x-1
            .input.flex.items-center.pl-4
-              .text-input.font-medium 24 мая 2020
+              .text-input.font-medium {{currentDate.format("DD MMMM YYYY")}}
            q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
              img(:src="calendar")
+              q-menu(
+                transition-show="scale",
+                transition-hide="scale",
+                self="top middle",
+                :offset="[118, 14]",
+              )
+                base-calendar(v-model="currentDate")
        .flex.gap-x-3.items-center
          .text.font-semibold Время:
          .flex.gap-x-1
            .input.flex.items-center.pl-4
              .text-input.font-medium 13:00 - 14:00
-            q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
+            q-btn.change.flex.w-7.h-7(@click="isShowTime = true", dense, padding="4px 4px")
              img(:src="time")
+            base-modal(v-model="isShowTime", title="Время", modal-padding)
+              base-time-modal(:times="times", :close-modal-time="closeModalTime")
      .flex.h-14.gap-x-3.items-center.text-smm
        .text.font-semibold Медкарта:
        .flex.gap-x-1 
@@ -42,7 +60,7 @@
          span Выберите услуги
        q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
          img(:src="folder")
-    base-input-full-name(:info-client="infoClient")
+    base-input-full-name(:info-client="patientData")
    .flex.flex-col.flex-auto.l.gap-y-8
      .flex
        button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm(
@@ -54,16 +72,36 @@
        ) {{form.title}}
      component(
        v-bind:is="currentForm",
-        :basic-info="infoClient.basic",
-        :phone="infoClient.phone",
-        :email="infoClient.email",
+        :basic-info="patientData.basic",
+        :phone="patientData.phone",
+        :email="patientData.email",
        :add-network="addNewNetwork",
-        :priority-list="priorityList",
-        :identity-document="infoClient.identity_document",
-        :addresses="infoClient.addresses",
+        :priority-list="patientData.priorityList",
+        :identity-document="patientData.identity_document",
+        :addresses="patientData.addresses",
        :save-file="saveDocFile",
        :networks-list="getNetworksList",
      )
+  .footer.flex.gap-2
+    q-btn(
+      color="primary",
+      outline,
+      size="16px",
+      no-caps,
+      label="Отменить"
+      :style="{width: '126px', height: '40px'}",
+      padding="0",
+      @click="closeForm"
+    )
+    q-btn(
+      color="primary",
+      size="16px",
+      no-caps,
+      label="Создать запись"
+      :style="{width: '174px', height: '40px'}",
+      padding="0",
+      @click="closeForm"
+    )
 </template>

 <script>
@@ -79,6 +117,10 @@ import FormCreateIdentityDocuments from "@/pages/clients/components/FormCreateId
 import FormCreateAddresses from "@/pages/clients/components/FormCreateAddresses";
 import BaseInput from "@/components/base/BaseInput.vue";
 import BaseInputFullName from "@/components/base/BaseInputFullName.vue";
+import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
+import BaseCalendar from "@/components/base/BaseCalendar.vue";
+import BaseTimeModal from "@/components/base/BaseTimeModal.vue";
+import * as moment from "moment/moment";

 export default {
  name: "RecordCreationForm",
@@ -89,8 +131,10 @@ export default {
    FormCreateAddresses,
    BaseInput,
    BaseInputFullName,
+    BaseCalendar,
+    BaseTimeModal,
  },
-  props: { isShowForm: Boolean },
+  props: { isShowForm: Boolean, closeForm: Function },
  mixins: [v_model],
  data() {
    return {
@@ -99,13 +143,11 @@ export default {
      time,
      calendar,
      isPhoto: false,
-      infoClient: {
-        basic: { contacts: [] },
-        phone: { username: "" },
-        email: { username: "" },
-        identity_document: {},
-        addresses: {},
-      },
+      patientData: patientData,
+      currentStatus: patientData.statuses.find((e) => e.name === "Не принят"),
+      currentDate: moment().clone(),
+      isShowTime: false,
+      times: { from: "8:30", to: "10:30" },
      forms: [
        {
          title: "Основное",
@@ -124,31 +166,13 @@ export default {
        },
      ],
      currentForm: "form-create-basic-info",
-      priorityList: [
-        {
-          id: 1,
-          label: "Высокий",
-        },
-        {
-          id: 2,
-          label: "Средний",
-        },
-        {
-          id: 3,
-          label: "Низкий",
-        },
-        {
-          id: 4,
-          label: "-",
-        },
-      ],
      networksSettings: column.find((el) => el.name === "networks")?.settings,
    };
  },
  computed: {
    getNetworksList() {
      let contacts = [];
-      this.infoClient.basic.contacts.forEach((elem) =>
+      this.patientData.basic.contacts.forEach((elem) =>
        contacts.push(elem.kind.id)
      );
      let filteredNetworks = this.networksSettings.filter(
@@ -167,12 +191,12 @@ export default {
      )?.component;
    },
    saveDocFile(e) {
-      this.infoClient.doc = e.target.files;
+      this.patientData.doc = e.target.files;
    },
    addNewNetwork() {
      const newNetwork = this.getNetworksList;
      if (newNetwork[0])
-        this.infoClient.basic.contacts.push({
+        this.patientData.basic.contacts.push({
          kind: {
            id: newNetwork[0].id,
            icon: newNetwork[0].icon,
@@ -180,6 +204,12 @@ export default {
          username: "",
        });
    },
+    choiceStatus(e) {
+      this.currentStatus = e;
+    },
+    closeModalTime() {
+      this.isShowTime = false;
+    },
  },
 };
 </script>
@@ -231,4 +261,17 @@ export default {
  &.active
    color: var(--btn-blue-color)
    border-bottom: 1.5px solid var(--btn-blue-color)
+
+.footer
+  border-top: 1px solid var(--border-light-grey-color)
+  margin: 40px -32px 0px
+  padding: 16px 32px 0px 32px
+
+.status
+  border-radius: 4px
+  height: 28px
+  padding: 8px 8px 8px 5px
+  &:hover
+    background: var(--bg-light-grey)
+    cursor: pointer
 </style>
--- a/src/pages/newCalendar/utils/calendarConfig.js
+++ b/src/pages/newCalendar/utils/calendarConfig.js
@@ -136,3 +136,65 @@ export const patientList = [
    choice: false,
  },
 ];
+export const patientData = {
+  basic: {
+    full_name: "",
+    birth_date: null,
+    priority: {
+      id: null,
+      label: "",
+    },
+    contacts: [
+      {
+        kind: {
+          id: "TELEGRAM",
+          icon: "app:icon-tg",
+        },
+        username: "",
+      },
+    ],
+  },
+  identity_document: {
+    pass: {
+      series_number: "",
+      issued_by_org: "",
+      issued_by_date: null,
+      issued_by_org_code: "",
+    },
+    snils: {
+      kind: "СНИЛС",
+      number: "",
+    },
+    inn: {
+      kind: "ИНН",
+      number: "",
+    },
+  },
+  phone: { username: "" },
+  email: { username: "" },
+  addresses: {},
+  priorityList: [
+    {
+      id: 1,
+      label: "Высокий",
+    },
+    {
+      id: 2,
+      label: "Средний",
+    },
+    {
+      id: 3,
+      label: "Низкий",
+    },
+    {
+      id: 4,
+      label: "-",
+    },
+  ],
+  statuses: [
+    { name: "Отказ", icon: rejected, check: false },
+    { name: "Не принят", icon: not_accepted, check: true },
+    { name: "На приеме", icon: reception, check: false },
+    { name: "Принят", icon: accepted, check: false },
+  ],
+};