From d0c1cccd10b36ff2bb98f9f4063aa9565e399f06 Mon Sep 17 00:00:00 2001 From: megavrilinvv Date: Mon, 31 Jul 2023 13:43:25 +0300 Subject: [PATCH 1/2] =?UTF-8?q?[WIP]=20=D0=9F=D1=80=D0=B0=D0=B2=D0=BA?= =?UTF-8?q?=D0=B0=20=D0=BC=D0=BE=D0=B4=D0=B0=D0=BB=D0=BA=D0=B8=20=D0=B2?= =?UTF-8?q?=D1=80=D0=B5=D0=BC=D0=B5=D0=BD=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/base/BaseTimeModal.vue | 33 +++++++++++++++---- .../components/HeaderRecordForm.vue | 12 ++++++- 2 files changed, 37 insertions(+), 8 deletions(-) diff --git a/src/components/base/BaseTimeModal.vue b/src/components/base/BaseTimeModal.vue index 7ac954c..ab763b3 100644 --- a/src/components/base/BaseTimeModal.vue +++ b/src/components/base/BaseTimeModal.vue @@ -4,10 +4,12 @@ .top-block.flex.flex-col.-mr-4(v-for="time in timeCoil") .timeline.flex.text-smm.font-medium {{time}} .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)}", size="9px", padding="0 8px") + q-icon.icon(v-if="checkStartTime(time)", 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)}", size="4px", padding="0 4px") + q-icon.icon(v-if="checkEndTime(time)", 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 }; @@ -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; + }, }, }; @@ -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) diff --git a/src/pages/newCalendar/components/HeaderRecordForm.vue b/src/pages/newCalendar/components/HeaderRecordForm.vue index 483691f..f815467 100644 --- 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: { From 64c246a5e3026158ef4924ea89f098df1a144cd3 Mon Sep 17 00:00:00 2001 From: megavrilinvv Date: Mon, 31 Jul 2023 17:14:00 +0300 Subject: [PATCH 2/2] =?UTF-8?q?[WIP]=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2?= =?UTF-8?q?=D0=B8=D0=BB=20=D0=BC=D0=BE=D0=B4=D0=B0=D0=BB=D1=8C=D0=BD=D0=BE?= =?UTF-8?q?=D0=B5=20=D0=BE=D0=BA=D0=BD=D0=BE=20=D0=B2=D1=8B=D0=B1=D0=BE?= =?UTF-8?q?=D1=80=D0=B0=20=D1=83=D1=81=D0=BB=D1=83=D0=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/base/BaseButton.vue | 23 ++ src/components/base/BaseTimeModal.vue | 12 +- .../components/RecordCreationForm.vue | 17 +- .../newCalendar/components/ServicesModal.vue | 221 ++++++++++++++++++ 4 files changed, 265 insertions(+), 8 deletions(-) create mode 100644 src/pages/newCalendar/components/ServicesModal.vue diff --git a/src/components/base/BaseButton.vue b/src/components/base/BaseButton.vue index e3f7366..43d492a 100644 --- 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) diff --git a/src/components/base/BaseTimeModal.vue b/src/components/base/BaseTimeModal.vue index ab763b3..e49e8f1 100644 --- a/src/components/base/BaseTimeModal.vue +++ b/src/components/base/BaseTimeModal.vue @@ -2,13 +2,13 @@ .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.left-btn(:class="{'default-btn': !checkStartTime(time)}", size="9px", padding="0 8px") - q-icon.icon(v-if="checkStartTime(time)", 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)}", size="4px", padding="0 4px") - q-icon.icon(v-if="checkEndTime(time)", name="app:lock", 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 @@ -46,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; }, diff --git a/src/pages/newCalendar/components/RecordCreationForm.vue b/src/pages/newCalendar/components/RecordCreationForm.vue index cedc96a..5620a7d 100644 --- 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) diff --git a/src/pages/newCalendar/components/ServicesModal.vue b/src/pages/newCalendar/components/ServicesModal.vue new file mode 100644 index 0000000..7b5c581 --- /dev/null +++ b/src/pages/newCalendar/components/ServicesModal.vue @@ -0,0 +1,221 @@ + + + + +