admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP Добавила радиокнопки для выбора пола

Browse Source
This commit is contained in:
Daria Golova
2022-12-26 19:28:11 +03:00
parent 2d3e38212e
commit dd954cd47a
9 changed files with 148 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/calendar/TheCalendar.vue
View File

@@ -48,6 +48,7 @@
</template>
<script>
//TODO: Вынести emits в массив
import { fetchWrapper } from "../../shared/fetchWrapper.js";
import * as moment from "moment/moment";
import CalendarSchedule from "./components/CalendarSchedule.vue";
@@ -83,6 +84,7 @@ export default {
isOpenForm: false,
WORKING_STATUS: "WORKS",
changeFormWasClosed: false,
//TODO: Вынести eventStatuses в config
eventStatuses: [
{
id: 0,

1
src/pages/clients/components/ClientDetailInfoSection.vue
View File

@@ -170,6 +170,7 @@
</template>
<script>
//TODO: Разбить на несколько компонент
import ClientDetailInput from "@/pages/clients/components/ClientDetailInput";
import BaseButton from "@/components/base/BaseButton";
import TableAddingNewDoc from "@/pages/clients/components/TableAddingNewDoc";

126
src/pages/clients/components/FormCreateMedicalCard.vue
View File

@@ -1,23 +1,32 @@
<template lang="pug">
.wrap.flex.flex-col.gap-y-6
.flex.flex.flex-col.gap-y-9
.wrapper.flex.flex-col.gap-y-6.justify-between
.flex.flex.flex-col.gap-y-6
span.text-center.font-bold.text-xl Создание медицинской карты стоматологического пациента
.flex.justify-center.items-center.gap-x-2
base-button.button(:size="32", :rounded="true")
span(v-if="isBaseData") 1
.icon-ok.text-xs(v-else)
span(:style="{color: 'var(--btn-blue-color)'}") Основное
.line.flex.mx-2
base-button.button(:class="{'active-button': !isIdentityDoc && isBaseData}", :size="32", :rounded="true")
span(v-if="isBaseData") 2
.icon-ok.text-xs(v-else)
span(:style="{color: !isBaseData ? 'var(--btn-blue-color)' : 'var(--font-dark-blue-color)' }") ДУЛ
.line.flex.mx-2
base-button.button(:class="{'active-button': !isPolicyDoc }", :size="32", :rounded="true") 3
span(:style="{color: isPolicyDoc ? 'var(--btn-blue-color)' : 'var(--font-dark-blue-color)' }") Полис
medical-base-data(v-if="isBaseData", :change-base-data="changeBaseData")
medical-identity-documents(v-if="isIdentityDoc", :change-identity-doc="changeIdentityDoc")
medical-policy-documents(v-if="isPolicyDoc")
.flex.self-center
base-stepper(
:steps="steps",
:currentStep="currentStep"
)
component(v-bind:is="currentTabComponent")
.flex.justify-between
.flex
base-button.font-semibold(
:size="40",
@click="prevStep",
v-if="currentStep !== 0",
outlined,
) Назад
.flex
base-button.font-semibold(
:size="40",
@click="nextStep",
v-if="currentStep < steps.length-1",
) Далее
base-button.font-semibold(
:size="40",
@click="finish",
v-if="currentStep === steps.length-1"
) Создать медицинскую карту
</template>
<script>
@@ -28,6 +37,7 @@ import BaseSelect from "@/components/base/BaseSelect";
import MedicalBaseData from "@/pages/medicalCard/components/MedicalBaseData";
import MedicalIdentityDocuments from "@/pages/medicalCard/components/MedicalIdentityDocuments";
import MedicalPolicyDocuments from "@/pages/medicalCard/components/MedicalPolicyDocuments";
import BaseStepper from "@/components/base/BaseStepper.vue";
export default {
name: "FormCreateMedicalCard",
@@ -39,68 +49,54 @@ export default {
MedicalBaseData,
MedicalIdentityDocuments,
MedicalPolicyDocuments,
BaseStepper,
},
data() {
return {
isBaseData: true,
isIdentityDoc: false,
isPolicyDoc: false,
currentStep: 0,
steps: [
{
id: 0,
label: "1",
value: "Основное",
component: "medical-base-data",
},
{
id: 1,
label: "2",
value: "ДУЛ",
component: "medical-identity-documents",
},
{
id: 2,
label: "3",
value: "Полис",
component: "medical-policy-documents",
},
],
};
},
computed: {
currentTabComponent: function () {
return this.steps[this.currentStep]?.component;
},
},
methods: {
changeBaseData() {
this.isBaseData = !this.isBaseData;
this.isIdentityDoc = !this.isIdentityDoc;
nextStep() {
this.currentStep += 1;
},
changeIdentityDoc() {
this.isIdentityDoc = !this.isIdentityDoc;
this.isPolicyDoc = !this.isPolicyDoc;
prevStep() {
this.currentStep -= 1;
},
finish() {},
},
};
</script>
<style lang="sass" scoped>
.wrap
.wrapper
width: 570px
height: fit-content
min-height: 485px
.services-wrapper
border: 1px solid var(--btn-grey-color)
border-radius: 8px
.list-services
overflow-y: auto
max-height: 280px
.input-date
border: 1.5px solid var(--border-light-grey-color)
border-radius: 4px
.button
&:hover
background-color: var(--btn-blue-color)
border: none
.active-button
background: var(--btn-grey-color)
color: var(--font-dark-blue-color)
border-color: var(--btn-grey-color)
&:hover
background-color: var(--btn-grey-color)
border: none
.line
width: 78px
border: 1.5px solid var(--btn-grey-color)
.place
width: 100%
border: 2px dashed var(--font-grey-color)
border-radius: 4px
color: var(--font-grey-color)
.counter
color: var(--font-grey-color)
</style>

41
src/pages/medicalCard/components/MedicalBaseData.vue
View File

@@ -4,13 +4,22 @@
span.font-bold Основное
.flex.flex-col.gap-y-6
base-input.w-full(placeholder="ФИО*")
base-radio-buttons-group(
:items="gendersList",
radioButtonsLabel="Пол",
v-model="gender",
)
.flex.gap-x-4
.flex.flex-col.gap-y-2
.counter.font-semibold.text-smm Дата рождения
base-input-date.input-date.h-10(:width-input="277")
.flex.flex-col.gap-y-2
.counter.font-semibold.text-smm СНИЛС
base-input(:width-input="277", placeholder="000–000–000 00")
base-input(
:width-input="277",
placeholder="000–000–000 00",
v-mask="'###-###-### ##'"
)
.flex.flex-col.gap-y-6
.flex.flex-col.gap-y-2
.counter.font-semibold.text-smm Адрес регистрации
@@ -29,9 +38,6 @@
.flex.flex-col.gap-y-2
.counter.font-semibold.text-smm Email
base-input(:width-input="277", placeholder="user@yandex.ru")
.flex.py-2.justify-between
base-button(:size="40", @click="changeBaseData")
span.font-semibold Далее
</template>
<script>
@@ -40,13 +46,34 @@ import BaseInputDate from "@/components/base/BaseInputDate";
import BaseSelect from "@/components/base/BaseSelect";
import BaseButton from "@/components/base/BaseButton";
import { mask } from "vue-the-mask";
import BaseRadioButtonsGroup from "@/components/base/BaseRadioButtonsGroup.vue";
export default {
name: "MedicalBaseData",
components: { BaseInput, BaseInputDate, BaseSelect, BaseButton },
components: {
BaseInput,
BaseInputDate,
BaseSelect,
BaseButton,
BaseRadioButtonsGroup,
},
directives: { mask },
props: {
changeBaseData: Function,
data() {
return {
gendersList: [
{
id: "1",
label: "Мужской",
value: "male",
},
{
id: "2",
label: "Женский",
value: "woman",
},
],
gender: "",
};
},
};
</script>

3
src/pages/medicalCard/components/MedicalIdentityDocuments.vue
View File

@@ -17,9 +17,6 @@
.flex.flex-col.gap-y-2
.counter.font-semibold.text-smm Страховая оганизация
base-input(:width-input="277", placeholder="Введите название организации")
.flex.py-2
base-button(:size="40", @click="changeIdentityDoc")
span.font-semibold Далее
</template>
<script>

3
src/pages/medicalCard/components/MedicalPolicyDocuments.vue
View File

@@ -23,9 +23,6 @@
:width-input="277",
placeholder="+7 (915) 644–92–23"
)
.flex.py-2
base-button(:size="40")
span.font-semibold Создать медицинскую карту
</template>
<script>

1
src/pages/schedule/components/ScheduleBody.vue
View File

@@ -233,6 +233,7 @@ export default {
border: 1.5px solid var(--border-light-grey-color-1)
border-radius: 4px
min-height: 87px
width: calc(100vw - 136px)
.schedule-body
&:hover