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

Merge branch 'UC-206' into 'master'

Browse Source 
WIP Исправлены найденные baseInputs

See merge request andrusyakka/urban-couscous!236
This commit is contained in:
Daria Golova
2022-12-30 14:14:44 +00:00
parent 2b13957fe2 bda481cfe5
commit c6d13dc26e
14 changed files with 302 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/sass/variables.sass
View File

@@ -17,6 +17,7 @@
--btn-blue-color-4: rgba(65, 105, 225, 0.8)
--bg-btn-icons-color: rgba(215, 217, 255, 0.6)
--font-grey-color: #9294a7
--font-grey-color-0: #85858b
--border-light-grey-color: #d3d4dc
--row-overlay-color: #f5f6ff
--default-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)

17
src/components/base/BaseCustomSelect.vue
View File

@@ -1,6 +1,9 @@
<template lang="pug">
.flex.flex-col.gap-y-2
.label.font-semibold.text-sm.opacity-40(v-if="label") {{ label }}
.font-semibold.text-sm.opacity-40(
v-if="label",
:class="labelClass"
) {{ label }}
.base-select.flex.justify-between.items-center.py-9px.px-4.gap-4.cursor-pointer.relative(
ref="select",
@click="open = !open",
@@ -46,6 +49,7 @@ export default {
center: Boolean,
label: String,
textStyle: String,
labelStyle: String,
},
emits: ["update:modelValue"],
data() {
@@ -71,6 +75,15 @@ export default {
"text-base": true,
};
},
labelClass() {
return this.labelStyle
? {
[this.labelStyle]: true,
}
: {
"text-sm": true,
};
},
},
methods: {
clickItem(id, label) {
@@ -108,7 +121,7 @@ export default {
overflow-y: auto
.placeholder
color: #090A15
opacity: 0.5
opacity: 0.4
text-overflow: ellipsis
overflow: hidden
.item

27
src/components/base/BaseInput.vue
View File

@@ -1,12 +1,17 @@
<template lang="pug">
.flex.flex-col.gap-y-2
.label.font-semibold.text-sm.opacity-40(v-if="label") {{ label }}
.label.font-semibold.text-sm.opacity-40(
v-if="label",
:class="labelClass"
) {{ label }}
.input-wrapper.flex.gap-x-2.px-4.box-border.py-10px(
:class="{'border-none': borderNone, 'border-error': borderError }"
:style="{'background-color': disabled && 'var(--bg-disable-grey-color)'}"
)
input.input.w-full.outline-0.not-italic(
v-model="value",
:style="{'color': disabled && 'var(--font-grey-color-0)'}",
:class="textClass",
:placeholder="placeholder",
:disabled="disabled",
:type="type"
@@ -34,6 +39,8 @@ export default {
borderError: Boolean,
disabled: Boolean,
label: String,
textStyle: String,
labelStyle: String,
},
emits: ["update:modelValue"],
computed: {
@@ -45,6 +52,24 @@ export default {
this.$emit("update:modelValue", value);
},
},
textClass() {
return this.textStyle
? {
[this.textStyle]: true,
}
: {
"text-base": true,
};
},
labelClass() {
return this.labelStyle
? {
[this.labelStyle]: true,
}
: {
"text-sm": true,
};
},
},
};
</script>

5
src/components/base/BaseInputDate.vue
View File

@@ -1,7 +1,7 @@
<template lang="pug">
.flex.flex-col.gap-y-2
.label(v-if="!!label") {{label}}
.field
.field(:class="{'placeholder-color': !modelValue}")
input(
v-model="value",
type="date",
@@ -52,10 +52,11 @@ export default {
&::-webkit-calendar-picker-indicator
opacity: 0
cursor: pointer
.label
font-weight: 600
font-size: 14px
line-height: 16px
opacity: 0.4
.placeholder-color
color: var(--font-grey-color)
</style>

18
src/components/base/BaseSelect.vue
View File

@@ -1,7 +1,13 @@
<template lang="pug">
.flex.flex-col.gap-y-2
.font-semibold.opacity-40(
v-if="label",
:class="labelClass"
) {{ label }}
.base-select(
@click="invertOpen",
:class="{'open': open && !disable, 'border-none': borderNone}",
:style="{'background-color': disable && 'var(--bg-disable-grey-color)'}"
ref="select"
)
.placeholder(
@@ -37,6 +43,8 @@ export default {
placeholderOpacity: Boolean,
disable: Boolean,
textStyle: String,
labelStyle: String,
label: String,
},
emits: ["update:modelValue"],
data() {
@@ -62,6 +70,15 @@ export default {
"text-base": true,
};
},
labelClass() {
return this.labelStyle
? {
[this.labelStyle]: true,
}
: {
"text-sm": true,
};
},
},
methods: {
clickItem(id) {
@@ -80,6 +97,7 @@ export default {
<style scoped lang="sass">
.base-select
width: 100%
height: 40px
border: 1.5px solid #D3D4DC
border-radius: 4px
padding: 9px 16px

8
src/pages/calendar/components/CalendarFormAddEvent.vue
View File

@@ -523,8 +523,8 @@ export default {
schedules: [
{
date: elem.date,
end_time: elem.end_time.slice(0, elem.end_time.length - 3),
start_time: elem.start_time.slice(
end_time: elem.end_time?.slice(0, elem.end_time.length - 3),
start_time: elem.start_time?.slice(
0,
elem.start_time.length - 3
),
@@ -536,8 +536,8 @@ export default {
} else {
foundedElem.schedules.push({
date: elem.date,
end_time: elem.end_time.slice(0, elem.end_time.length - 3),
start_time: elem.start_time.slice(0, elem.start_time.length - 3),
end_time: elem.end_time?.slice(0, elem.end_time.length - 3),
start_time: elem.start_time?.slice(0, elem.start_time.length - 3),
status: elem.status,
id: elem.id,
});

56
src/pages/clients/components/ClientDetailSectionAddress.vue
View File

@@ -1,55 +1,54 @@
<template lang="pug">
.flex.flex-col.gap-y-4
.flex.flex-col(class="gap-y-1.5")
.text-info.text-xxs.font-semibold Город
base-select.select.text-sm(
base-select(
disable,
textStyle="text-sm",
labelStyle="text-xxs",
placeholder="Введите город",
v-model="dopeAddress.city",
:style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
label="Город"
)
.flex.flex-col(class="gap-y-1.5")
.text-info.text-xxs.font-semibold Область
base-input.text-sm.input-info(
base-input(
disabled,
placeholder="Введите область",
labelStyle="text-xxs",
textStyle="text-sm",
v-model="dopeAddress.region",
:style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
label="Область"
)
.flex.flex-col(class="gap-y-1.5")
.text-info.text-xxs.font-semibold Улица
base-input.text-sm.input-info(
base-input(
disabled,
placeholder="Введите улицу",
labelStyle="text-xxs",
textStyle="text-sm",
v-model="dopeAddress.street",
:style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
label="Улица"
)
.flex.gap-x-4
.flex.flex-col(class="gap-y-1.5")
.text-info.text-xxs.font-semibold Дом
base-input.text-sm.input-info(
base-input(
disabled,
placeholder="Дом",
label="Дом"
v-model="dopeAddress.house",
:style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
labelStyle="text-xxs",
textStyle="text-sm",
)
.flex.flex-col(class="gap-y-1.5")
.text-info.text-xxs.font-semibold Квартира
base-input.text-sm.input-info(
base-input(
disabled,
placeholder="Квартира",
label="Квартира",
v-model="dopeAddress.flat",
:style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
labelStyle="text-xxs",
textStyle="text-sm",
)
.flex.flex-col(class="gap-y-1.5")
.text-info.text-xxs.font-semibold Индекс
base-input.text-sm.input-info(
base-input(
disabled,
v-mask="'######'",
placeholder="000000",
label="Индекс",
v-model="dopeAddress.index",
:style="{backgroundColor: 'var(--bg-disable-grey-color)'}"
labelStyle="text-xxs",
textStyle="text-sm",
)
</template>
@@ -69,12 +68,3 @@ export default {
directives: { mask },
};
</script>
<style lang="sass" scoped>
.input-info
color: var(--font-dark-blue-color)
.text-info
color: var(--font-grey-color)
.select
height: 40px
</style>

30
src/pages/clients/components/FormsAgreementCreate/AgreementCommon.vue
View File

@@ -1,53 +1,43 @@
<template lang="pug">
.flex-col
.flex.flex-col.gap-y-6
span.font-bold Общая информация
.flex-col
.flex-col.my-6
.counter.font-semibold.text-smm Категория
base-custom-select.select.text-sm(
base-custom-select(
placeholder="Категория договора",
v-model="category",
:items="categories",
label="Категория"
)
.flex.justify-between.w-full.gap-4
base-input-date(
.flex.justify-between.gap-4
base-input-date.w-48(
v-model="signedDate",
label="Дата подписания"
)
base-input-date(
base-input-date.w-48(
v-model="startDate",
label="Начало оказания услуг"
)
base-input-date(
base-input-date.w-48(
v-model="endDate",
label="Окончание оказания услуг"
)
.flex-col.w-full.my-6
.font-semibold.text-smm Исполнитель
base-custom-select.select.text-sm(
base-custom-select(
placeholder="Поручить",
v-model="employee",
:items="employees",
label="Исполнитель"
)
</template>
<script>
import BaseButton from "@/components/base/BaseButton";
import BaseStepper from "@/components/base/BaseStepper";
import BaseSelect from "@/components/base/BaseSelect";
import BaseInputDate from "@/components/base/BaseInputDate";
import BaseInput from "@/components/base/BaseInput";
import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
export default {
name: "AgreementCommon",
components: {
BaseButton,
BaseStepper,
BaseSelect,
BaseInputDate,
BaseInput,
BaseCustomSelect,
},
data() {
@@ -72,5 +62,3 @@ export default {
},
};
</script>
<style lang="sass" scoped></style>

81
src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue
View File

@@ -1,81 +1,72 @@
<template lang="pug">
.flex-col
.flex-col
.font-semibold.text-smm ФИО пациента
.flex.flex-col.gap-y-6
base-input(
:width-input="200",
label="ФИО пациента",
v-model="patient.full_name"
)
.flex
.flex-col
.font-semibold.text-smm Документ, удостоверяющий личность
base-custom-select.select.text-sm(
.flex.justify-between
base-custom-select.w-80(
placeholder="Тип документа",
v-model="patient.doc_type",
:items="patentIdentityDocumentTypes",
label="Документ, удостоверяющий личность"
)
.flex-col
.font-semibold.text-smm Серия и номер
base-input(
v-model="patient.seriesAndNumber",
disabled,
v-mask="'#### ######'"
label="Серия и номер"
)
.flex
.flex-col
.font-semibold.text-smm Телефон
base-custom-select.select.text-sm(
v-model="patient.phone",
:items="patentIdentityDocumentTypes",
.flex.justify-between
base-input.w-80(
v-model="patient.address",
label="Адрес"
)
.flex-col
.font-semibold.text-smm Адрес
base-custom-select.select.text-sm(
v-model="patient.phone",
:items="patentIdentityDocumentTypes"
)
.flex-col
.font-semibold.text-smm ФИО Заказчика
base-input(
:width-input="200",
v-model="patient.full_name"
v-model="patient.phone",
v-mask="'+7 (###) ###-##-##'",
label="Телефон"
)
.flex
.flex-col
.font-semibold.text-smm Документ, удостоверяющий личность
base-custom-select.select.text-sm(
base-input(
v-model="patient.full_name"
label="ФИО Заказчика",
)
.flex.justify-between
base-custom-select.w-80(
placeholder="Тип документа",
v-model="patient.doc_type",
:items="patentIdentityDocumentTypes",
label="Документ, удостоверяющий личность"
)
.flex-col
.font-semibold.text-smm Серия и номер
base-input(
v-model="patient.seriesAndNumber",
disabled,
v-mask="'#### ######'"
label="Серия и номер"
)
.flex
.flex-col
.font-semibold.text-smm Телефон
base-custom-select.select.text-sm(
v-model="patient.phone",
:items="patentIdentityDocumentTypes",
.flex.justify-between
base-input.w-80(
v-model="patient.address",
label="Адрес"
)
.flex-col
.font-semibold.text-smm Адрес
base-custom-select.select.text-sm(
base-input(
v-model="patient.phone",
:items="patentIdentityDocumentTypes" )
v-mask="'+7 (###) ###-##-##'",
label="Телефон"
)
</template>
<script>
import BaseInput from "@/components/base/BaseInput";
import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
import { mask } from "vue-the-mask";
export default {
name: "AgreementPerson",
components: {
BaseInput,
BaseCustomSelect,
},
directives: { mask },
data() {
return {
patient: {
@@ -85,10 +76,8 @@ export default {
label: "",
},
seriesAndNumber: "2354 125423",
phone: {
id: null,
label: "",
},
phone: "",
address: "",
},
};
},

51
src/pages/clients/components/FormsAgreementCreate/AgreementServices.vue
View File

@@ -1,62 +1,41 @@
<template lang="pug">
.flex-col
.flex.flex-col.gap-y-6
span.font-bold Общая информация
.flex-col
.flex-col.my-6
.counter.font-semibold.text-smm Категория
base-custom-select.select.text-sm(
base-custom-select(
placeholder="Категория договора",
v-model="category",
:items="categories",
label="Категория"
)
.flex.w-full.my-6
.flex-col
.font-semibold.text-smm Дата подписания
.input-date.flex.h-10.justify-center
base-input-date(
:width-input="200",
v-model="signedDate"
.flex.gap-x-4
base-input-date.w-48(
v-model="signedDate",
label="Дата подписания"
)
.flex-col
.font-semibold.text-smm Начало оказания услуг
.input-date.flex.h-10.justify-center
base-input-date(
:width-input="200",
v-model="startDate"
base-input-date.w-48(
v-model="startDate",
label="Начало оказания услуг"
)
.flex-col
.font-semibold.text-smm Окончание оказания услуг
.input-date.flex.h-10.justify-center
base-input-date(
:width-input="200",
v-model="endDate"
base-input-date.w-48(
v-model="endDate",
label="Окончание оказания услуг"
)
.flex-col.w-full.my-6
.font-semibold.text-smm Исполнитель
base-custom-select.select.text-sm(
base-custom-select(
placeholder="Поручить",
v-model="employee",
:items="employees",
label="Исполнитель"
)
</template>
<script>
import BaseButton from "@/components/base/BaseButton";
import BaseStepper from "@/components/base/BaseStepper";
import BaseSelect from "@/components/base/BaseSelect";
import BaseInputDate from "@/components/base/BaseInputDate";
import BaseInput from "@/components/base/BaseInput";
import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
export default {
name: "AgreementServices",
components: {
BaseButton,
BaseStepper,
BaseSelect,
BaseInputDate,
BaseInput,
BaseCustomSelect,
},
data() {

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

@@ -10,34 +10,35 @@
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 СНИЛС
.input
base-input-date(label="Дата рождения")
.input
base-input(
:width-input="277",
placeholder="000–000–000 00",
v-mask="'###-###-### ##'"
v-mask="'###-###-### ##'",
label="СНИЛС"
)
.flex.flex-col.gap-y-6
.flex.flex-col.gap-y-2
.counter.font-semibold.text-smm Адрес регистрации
base-input(:width-input="277", placeholder="Введите полный адрес")
.flex.flex-col.gap-y-2
.counter.font-semibold.text-smm Фактический адрес места жительства
base-input(:width-input="277", placeholder="Введите полный адрес")
.flex.gap-x-4
.flex.flex-col.gap-y-2
.counter.font-semibold.text-smm Номер телефона
base-input(
:width-input="277",
label="Адрес регистрации",
placeholder="Введите полный адрес"
)
base-input(
label="Фактический адрес места жительства",
placeholder="Введите полный адрес"
)
.flex.gap-x-4
.input
base-input(
label="Номер телефона",
placeholder="+7 (915) 644–92–23",
v-mask="'+7 (###) ###-##-##'"
)
.flex.flex-col.gap-y-2
.counter.font-semibold.text-smm Email
base-input(:width-input="277", placeholder="user@yandex.ru")
.input
base-input(
label="Email",
placeholder="user@yandex.ru"
)
</template>
<script>
@@ -79,10 +80,6 @@ export default {
</script>
<style lang="sass" scoped>
.input-date
border: 1.5px solid var(--border-light-grey-color)
border-radius: 4px
.counter
color: var(--font-grey-color)
.input
width: 277px
</style>

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

@@ -4,19 +4,22 @@
span.font-bold Паспортные данные
.flex.flex-col.gap-y-6
.flex.gap-x-4
.flex.flex-col.gap-y-2
.counter.font-semibold.text-smm Серия и номер
base-input(:width-input="277", placeholder="0000 000000")
.flex.flex-col.gap-y-2
.counter.font-semibold.text-smm Дата выдачи
base-input-date.input-date.h-10(:width-input="277")
.input
base-input(
label="Серия и номер",
placeholder="0000 000000"
)
.input
base-input-date(label="Дата выдачи")
.flex.flex-col.gap-y-6
.flex.flex-col.gap-y-2
.counter.font-semibold.text-smm Кем выдан
base-input(:width-input="277", placeholder="Точно как в паспорте")
.flex.flex-col.gap-y-2
.counter.font-semibold.text-smm Страховая оганизация
base-input(:width-input="277", placeholder="Введите название организации")
base-input(
label="Кем выдан",
placeholder="Точно как в паспорте"
)
base-input(
label="Страховая оганизация",
placeholder="Введите название организации"
)
</template>
<script>
@@ -37,10 +40,6 @@ export default {
</script>
<style lang="sass" scoped>
.input-date
border: 1.5px solid var(--border-light-grey-color)
border-radius: 4px
.counter
color: var(--font-grey-color)
.input
width: 277px
</style>

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

@@ -4,23 +4,23 @@
.flex.flex-col.gap-y-6
span.font-bold Полис
.flex.gap-x-6
.flex.flex-col.gap-y-2
.counter.font-semibold.text-smm Серия и номер полиса ОМС
base-input(:width-input="277", placeholder="0000 000000")
.flex.flex-col.gap-y-2
.counter.font-semibold.text-smm Серия и номер полиса ДМС
base-input(:width-input="277", placeholder="0000 000000")
.flex.flex-col.gap-y-2
.counter.font-semibold.text-smm Код категории льготы
base-input(:width-input="277", placeholder="000")
.flex.flex-col.gap-y-6
.flex.flex-col.gap-y-2
.counter.font-semibold.text-smm К кому обращаться в случае необходимости
base-input.w-full(placeholder="ФИО*")
.flex.flex-col.gap-y-2
.counter.font-semibold.text-smm Номер телефона
.input
base-input(
:width-input="277",
label="Серия и номер полиса ОМС",
placeholder="0000 000000"
)
.input
base-input(
label="Серия и номер полиса ДМС",
placeholder="0000 000000"
)
base-input(label="Код категории льготы", placeholder="000")
base-input(
label="К кому обращаться в случае необходимости",
placeholder="ФИО*"
)
base-input(
label="Номер телефона",
placeholder="+7 (915) 644–92–23"
)
</template>
@@ -40,10 +40,6 @@ export default {
</script>
<style lang="sass" scoped>
.input-date
border: 1.5px solid var(--border-light-grey-color)
border-radius: 4px
.counter
color: var(--font-grey-color)
.input
width: 277px
</style>