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
2023-07-14 18:17:57 +03:00
parent ee3c828a22
commit 27f25a8826
12 changed files with 347 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/BaseInput.vue
View File

@@ -4,7 +4,7 @@
v-model="value",
:name="name",
:multiple="multiple",
:class="{'font-input': true, 'doc': doc}",
:class="{'circle': circle, 'font-input': true, 'doc': doc}",
:input-style="{resize: resize,}",
:borderless="borderless",
:placeholder="placeholder",
@@ -78,6 +78,7 @@ export default {
name: String,
important: Boolean,
size: String,
circle: Boolean,
},
emits: ["update:modelValue"],
computed: {
@@ -214,4 +215,7 @@ export default {
font-weight: 500
font-size: 12px
line-height: 135% !important
.input :deep(.q-field__marginal)
height: auto !important
</style>

4
src/components/base/BaseAddingNetwork.vue
View File

@@ -1,11 +1,11 @@
<template lang="pug">
.flex.w-full(class="gap-x-1.5")
base-select(:items="items", v-model="network.kind")
base-input.w-full(v-model="network.username", placeholder="Ссылкa", outlined, :rule="ruleInput", no-error-icon)
base-input.w-full(v-model="network.username", placeholder="Ссылкa", :rule="ruleInput", size="M")
</template>
<script>
import BaseInput from "@/components/base/BaseInput";
import BaseInput from "@/components/BaseInput.vue";
import BaseSelect from "@/components/base/BaseSelect.vue";
export default {
name: "TableAddingNetwork",

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

@@ -1,27 +1,18 @@
<template lang="pug">
base-input-container.gap-y-2(:label="label", :style="{width: width + 'px' }")
q-input(
base-input-container.gap-y-2(:label="label", :style="{width: width + 'px', ...sizeVariable }")
q-input.input(
v-model="value",
:name="name",
:class="{'circle': circle, 'font-input': true}",
:input-style="{ color: textColor, borderColor: borderColor, resize: resize}",
:borderless="borderless",
:input-style="{resize: resize}",
:placeholder="placeholder",
:outlined="outlined",
:dense="dense",
outlined,
:readonly="readonly",
:disable="disabled",
:filled="filled",
mask="##.##.####"
:bg-color="filled || standout ? '' : 'white'",
mask="##.##.####",
:rules="[checkInput]",
:lazy-rules="lazyRule",
:item-aligned="itemAligned",
:no-error-icon="noErrorIcon",
:maxlength="maxLength",
:autogrow="autogrow",
:square="square",
:standout="standout"
no-error-icon,
:accept="accept",
:debounce="debounce",
hide-bottom-space,
@@ -31,60 +22,32 @@
q-icon(
name="app:calendar",
class="cursor-pointer",
size="16px"
size="18px"
)
q-popup-proxy(cover, transition-show="scale", transition-hide="scale")
q-date(
v-model="value",
mask="DD.MM.YYYY",
minimal
q-menu(
:style="{'margin-top': '8px !important'}",
v-model="calendarVisibility",
transition-show="scale",
transition-hide="scale",
self="top middle",
:offset="[118, 14]"
)
.flex.items-center.justify-end
q-btn(
v-close-popup,
label="Закрыть",
color="primary",
flat,
no-caps
base-calendar(
v-model="internalDate",
:start-year="2000",
:save="closeCalendar",
@update:model-value="transmitInternalDate"
)
</template>
<script>
import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
import * as moment from "moment/moment";
import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
export default {
name: "BaseInputDate",
components: { BaseInputContainer },
components: { BaseInputContainer, BaseCalendar },
props: {
circle: Boolean,
dense: {
type: Boolean,
default: true,
},
outlined: {
type: Boolean,
default: false,
},
square: {
type: Boolean,
default: false,
},
filled: {
type: Boolean,
default: false,
},
borderless: {
type: Boolean,
default: false,
},
autogrow: {
type: Boolean,
default: false,
},
standout: {
type: [Boolean, String],
default: false,
},
accept: {
type: String,
default: "",
@@ -95,11 +58,7 @@ export default {
},
debounce: [String, Number],
width: Number,
maxLength: Number,
textColor: String,
borderColor: String,
lazyRule: [Boolean, String],
noErrorIcon: Boolean,
itemAligned: Boolean,
modelValue: Date,
placeholder: String,
@@ -108,18 +67,30 @@ export default {
readonly: Boolean,
iconLeft: Boolean,
name: String,
size: String,
},
emits: ["update:modelValue"],
data() {
return {
calendarVisibility: false,
internalDate: null,
};
},
computed: {
value: {
get() {
if (
moment(this.modelValue).isValid() &&
typeof this.modelValue === "object"
)
) {
this.changeInternalDate(moment(this.modelValue));
return moment(this.modelValue).format("DD.MM.YYYY");
if (moment(this.convertFormat(this.modelValue)).isValid())
}
if (moment(this.convertFormat(this.modelValue)).isValid()) {
this.changeInternalDate(moment(this.modelValue));
return this.modelValue;
}
this.changeInternalDate(null);
return null;
},
set(value) {
@@ -131,6 +102,50 @@ export default {
);
},
},
sizeVariable() {
switch (this.size) {
case "XS":
return {
"--input-height": "28px",
"--text-size": "12px",
"--line-height": "135%",
"--px": "0 8px",
"--py": "10px 0",
};
case "S":
return {
"--input-height": "32px",
"--text-size": "12px",
"--line-height": "135%",
"--px": "0 8px",
"--py": "10px 0",
};
case "M":
return {
"--input-height": "40px",
"--text-size": "16px",
"--line-height": "normal",
"--px": "0 16px",
"--py": "8px 0",
};
case "L":
return {
"--input-height": "48px",
"--text-size": "16px",
"--line-height": "normal",
"--px": "0 16px",
"--py": "8px 0",
};
default:
return {
"--input-height": "56px",
"--text-size": "16px",
"--line-height": "normal",
"--px": "0 16px",
"--py": "8px 0",
};
}
},
},
methods: {
convertFormat(date) {
@@ -141,6 +156,15 @@ export default {
checkInput(val) {
return moment(this.convertFormat(val)).isValid();
},
closeCalendar() {
this.calendarVisibility = false;
},
changeInternalDate(value) {
this.internalDate = value;
},
transmitInternalDate(value) {
this.value = value?.format("DD.MM.YYYY");
},
},
};
</script>
@@ -149,17 +173,56 @@ export default {
.font-input
font-feature-settings: 'pnum' on, 'lnum' on
.circle
width: 100%
height: 100%
border-radius: 50%
z-index: 5
opacity: 0
cursor: pointer
</style>
<style lang="sass">
.q-field--standout.q-field--readonly .q-field__control:before
border: none !important
.q-field--standout .q-field__control
.input :deep(.q-field__native)
font-weight: 500
font-size: var(--text-size)
line-height: var(--line-height)
color: var(--font-dark-blue-color)
padding: var(--py)
&::placeholder
color: var(--font-grey-color)
opacity: 1
.input :deep(.q-field__control)
height: var(--input-height) !important
color: var(--font-dark-blue-color)
padding: var(--px)
&:before
border-color: var(--border-light-grey-color) !important
transition: none
&:hover:before
border-color: var(--font-grey-color) !important
&:after
border-width: 1px !important
transition: none
transform: none !important
.q-field--disabled :deep(.q-field__control > div)
opacity: 1 !important
.q-field--outlined.q-field--disabled :deep(.q-field__native)
color: var(--font-grey-color)
.q-field--outlined.q-field--disabled :deep(.q-field__control)
background: var(--bg-light-grey) !important
.q-field--outlined.q-field--readonly :deep(.q-field__control)
background: var(--bg-light-grey) !important
&:before
border-color: var(--bg-light-grey) !important
transition: none
&:hover:before
border-color: var(--bg-light-grey) !important
.q-field--outlined.q-field--readonly :deep(.q-field__native)
cursor: default
.q-field--error :deep(.q-field__bottom)
padding: 4px 0 0 0
font-weight: 500
font-size: 12px
line-height: 135% !important
.input :deep(.q-field__marginal)
height: auto !important
</style>

6
src/components/base/BaseInputFullName.vue
View File

@@ -29,7 +29,7 @@
type="file",
id="image-upload",
accept="image/*",
@change="(e) => previewImage(e)"
@change="(e) => previewImage(e)",
)
.avatar.flex.absolute.items-center.gap-x-6
img.avatar.object-cover(for="image-upload", :src="image", v-if="image")
@@ -41,14 +41,14 @@
padding="2px 0 0 0"
)
q-icon(name="app:ok", size="20px")
base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО пациента*", outlined)
base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО пациента*", size="M")
</template>
<script>
import BaseModal from "./BaseModal.vue";
import BaseInput from "./BaseInput.vue";
import addImageIcon from "@/assets/icons/photo.svg";
import BaseButton from "@/components/base/BaseButton.vue";
import BaseInput from "@/components/BaseInput.vue";
export default {
name: "BaseInputFullName",

165
src/components/base/BaseInputTime.vue
View File

@@ -1,36 +1,28 @@
<template lang="pug">
base-input-container.gap-y-2(:label="label", :style="{width: width + 'px' }")
q-input(
base-input-container.gap-y-2(:label="label", :style="{width: width + 'px', ...sizeVariable }")
q-input.input(
v-model="value",
:name="name",
:class="{'circle': circle, 'font-input': true}",
:input-style="{ color: textColor, borderColor: borderColor, resize: resize}",
:borderless="borderless",
:class="{'font-input': true}",
:input-style="{ resize: resize}",
:placeholder="placeholder",
:outlined="outlined",
:dense="dense",
outlined,
:readonly="readonly",
:disable="disabled",
:filled="filled",
:bg-color="filled || standout ? '' : 'white'",
:rules="[checkTime]",
:lazy-rules="lazyRule",
:item-aligned="itemAligned",
:no-error-icon="noErrorIcon",
mask="time",
:maxlength="maxLength",
:autogrow="autogrow",
:square="square",
:standout="standout"
:accept="accept",
:debounce="debounce",
hide-bottom-space
hide-bottom-space,
no-error-icon
)
template(v-slot:append)
q-icon(
name="app:time",
class="cursor-pointer",
size="16px"
size="19px"
)
q-popup-proxy(cover, transition-show="scale", transition-hide="scale")
q-time(v-model="value", mask="HH:mm")
@@ -51,35 +43,6 @@ export default {
name: "BaseInputTime",
components: { BaseInputContainer },
props: {
circle: Boolean,
dense: {
type: Boolean,
default: true,
},
outlined: {
type: Boolean,
default: false,
},
square: {
type: Boolean,
default: false,
},
filled: {
type: Boolean,
default: false,
},
borderless: {
type: Boolean,
default: false,
},
autogrow: {
type: Boolean,
default: false,
},
standout: {
type: [Boolean, String],
default: false,
},
accept: {
type: String,
default: "",
@@ -90,12 +53,8 @@ export default {
},
debounce: [String, Number],
width: Number,
maxLength: Number,
textColor: String,
borderColor: String,
rule: Array,
lazyRule: [Boolean, String],
noErrorIcon: Boolean,
itemAligned: Boolean,
modelValue: String,
placeholder: String,
@@ -104,6 +63,7 @@ export default {
readonly: Boolean,
iconLeft: Boolean,
name: String,
size: String,
},
emits: ["update:modelValue"],
computed: {
@@ -115,6 +75,50 @@ export default {
this.$emit("update:modelValue", this.checkTime(value) ? value : null);
},
},
sizeVariable() {
switch (this.size) {
case "XS":
return {
"--input-height": "28px",
"--text-size": "12px",
"--line-height": "135%",
"--px": "0 8px",
"--py": "10px 0",
};
case "S":
return {
"--input-height": "32px",
"--text-size": "12px",
"--line-height": "135%",
"--px": "0 8px",
"--py": "10px 0",
};
case "M":
return {
"--input-height": "40px",
"--text-size": "16px",
"--line-height": "normal",
"--px": "0 16px",
"--py": "8px 0",
};
case "L":
return {
"--input-height": "48px",
"--text-size": "16px",
"--line-height": "normal",
"--px": "0 16px",
"--py": "8px 0",
};
default:
return {
"--input-height": "56px",
"--text-size": "16px",
"--line-height": "normal",
"--px": "0 16px",
"--py": "8px 0",
};
}
},
},
methods: {
checkTime(val) {
@@ -133,17 +137,56 @@ export default {
.font-input
font-feature-settings: 'pnum' on, 'lnum' on
.circle
width: 100%
height: 100%
border-radius: 50%
z-index: 5
opacity: 0
cursor: pointer
</style>
<style lang="sass">
.q-field--standout.q-field--readonly .q-field__control:before
border: none !important
.q-field--standout .q-field__control
.input :deep(.q-field__native)
font-weight: 500
font-size: var(--text-size)
line-height: var(--line-height)
color: var(--font-dark-blue-color)
padding: var(--py)
&::placeholder
color: var(--font-grey-color)
opacity: 1
.input :deep(.q-field__control)
height: var(--input-height) !important
color: var(--font-dark-blue-color)
padding: var(--px)
&:before
border-color: var(--border-light-grey-color) !important
transition: none
&:hover:before
border-color: var(--font-grey-color) !important
&:after
border-width: 1px !important
transition: none
transform: none !important
.q-field--disabled :deep(.q-field__control > div)
opacity: 1 !important
.q-field--outlined.q-field--disabled :deep(.q-field__native)
color: var(--font-grey-color)
.q-field--outlined.q-field--disabled :deep(.q-field__control)
background: var(--bg-light-grey) !important
.q-field--outlined.q-field--readonly :deep(.q-field__control)
background: var(--bg-light-grey) !important
&:before
border-color: var(--bg-light-grey) !important
transition: none
&:hover:before
border-color: var(--bg-light-grey) !important
.q-field--outlined.q-field--readonly :deep(.q-field__native)
cursor: default
.q-field--error :deep(.q-field__bottom)
padding: 4px 0 0 0
font-weight: 500
font-size: 12px
line-height: 135% !important
.input :deep(.q-field__marginal)
height: auto !important
</style>

23
src/components/base/Calendar/BaseCalendar.vue
View File

@@ -56,11 +56,16 @@ export default {
type: Function,
default: () => {},
},
cancel: {
type: Function,
default: () => {},
},
width: {
type: String,
default: "286px",
},
},
emits: ["update:modelValue"],
data() {
return {
internalDate: moment(),
@@ -95,10 +100,10 @@ export default {
},
},
internalMonth() {
let formattedMonth = this.internalDate.format("MMMM");
let formattedMonth = this.internalDate?.format("MMMM");
return `${
formattedMonth[0].toUpperCase() + formattedMonth.slice(1)
} ${this.internalDate.format("YYYY")}`;
} ${this.internalDate?.format("YYYY")}`;
},
},
methods: {
@@ -106,6 +111,7 @@ export default {
this.currentForm = this.forms.find((elem) => elem.component === form);
},
changeDate() {
if (this.value) {
if (this.range) {
this.internalDate = this.value?.from?.clone();
this.externalValue = {
@@ -116,10 +122,23 @@ export default {
this.internalDate = this.value?.clone();
this.externalValue = this.value?.clone();
}
} else {
if (this.range) {
this.internalDate = moment();
this.externalValue = {
from: null,
to: null,
};
} else {
this.internalDate = moment();
this.externalValue = null;
}
}
},
cancelChanges() {
this.changeDate();
this.changeForm("CalendarDates");
this.cancel();
},
saveExternalChanges() {
if (this.range)

2
src/components/base/Calendar/CalendarDates.vue
View File

@@ -163,7 +163,7 @@ export default {
},
selectDate(date) {
if (!this.range) {
this.externalValue = date;
this.externalValue = date.clone();
return;
}
if (this.rangeCount) {

15
src/pages/clients/components/ClientsTableHat.vue
View File

@@ -2,16 +2,15 @@
.flex.justify-between.w-full.h-fit
.flex.gap-2.w-fit.h-fit
.input
base-input(
:with-icon="true",
icon-position="left",
base-input.search(
v-model="searchClient",
placeholder="Введите фамилию",
@keyup.enter="searchLastName",
outlined
size="M",
:width="280",
:icon-left="!searchClient"
)
.flex.items-center.cursor-pointer
.icon-search
q-icon(name="app:search", size="18px", v-if="!searchClient")
base-button(
v-if="createdClientName === ''",
@click="searchLastName",
@@ -42,8 +41,8 @@
<script>
import ClientsTableHeaderActions from "@/pages/clients/components/ClientsTableHeaderActions";
import BaseInput from "@/components/base/BaseInput";
import BaseButton from "@/components/base/BaseButton.vue";
import BaseInput from "@/components/BaseInput.vue";
export default {
name: "ClientsTableHat",
@@ -97,4 +96,6 @@ export default {
min-width: 280px
.on-left
margin-right: 10px
.search :deep(.q-field__prepend)
padding-right: 6px !important
</style>

50
src/pages/clients/components/FormCreateAddresses.vue
View File

@@ -5,66 +5,60 @@
v-model="addresses.full_address",
placeholder="Введите адрес целиком",
label="Полный адрес",
outlined
size="M"
)
.flex.items-center.justify-center.relative
.line.absolute
span.text-sm.separator.px-2 или
.grid.grid-cols-2.gap-y-6.gap-x-4
base-input(
disabled,
filled,
placeholder="Введите город",
v-model="addresses.city",
label="Город",
outlined
placeholder="Введите город",
disabled,
size="M"
)
base-input(
disabled,
filled,
placeholder="Введите область",
v-model="addresses.region",
label="Область",
outlined
placeholder="Введите область",
disabled,
size="M"
)
base-input(
disabled,
filled,
placeholder="Введите улицу",
v-model="addresses.street",
label="Улица",
outlined
placeholder="Введите улицу",
disabled,
size="M"
)
base-input(
disabled,
filled,
placeholder="Номер дома",
v-model="addresses.house_number",
label="Дом",
outlined
placeholder="Номер дома",
disabled,
size="M"
)
base-input(
disabled,
filled,
placeholder="Номер квартиры",
v-model="addresses.apartment_number",
label="Квартира",
outlined
placeholder="Номер квартиры",
disabled,
size="M"
)
base-input(
disabled,
filled,
placeholder="000000",
mask="######",
v-model="addresses.zip_code",
label="Индекс",
outlined
mask="######",
placeholder="000000",
disabled,
size="M"
)
</template>
<script>
import BaseInput from "@/components/base/BaseInput";
import BaseCustomSelect from "@/components/base/BaseCustomSelect";
import BaseInput from "@/components/BaseInput.vue";
export default {
name: "FormCreateAddresses",
@@ -79,7 +73,7 @@ export default {
<style lang="sass" scoped>
.wrapper-addresses
height: 368px
height: 380px
overflow-y: auto
&::-webkit-scrollbar
width: 4px

18
src/pages/clients/components/FormCreateBasicInfo.vue
View File

@@ -7,27 +7,27 @@
v-model="basicInfo.priority",
label="Приоритет"
)
base-input(
type="date"
base-input-date(
v-model="basicInfo.birth_date",
size="M",
important,
label="Дата рождения",
outlined,
important
placeholder="Дата рождения"
)
base-input(
v-model="phone.username",
placeholder="+7 (915) 644–92–23",
mask="+7 (###) ###-##-##",
label="Номер телефона",
outlined,
size="M",
important
)
base-input(
v-model="email.username",
placeholder="user@yandex.ru",
label="Email",
outlined,
important
important,
size="M",
)
.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 Ссылки на соцсети
@@ -43,9 +43,10 @@
</template>
<script>
import BaseInput from "@/components/base/BaseInput";
import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
import BaseSelect from "@/components/base/BaseSelect";
import BaseInput from "@/components/BaseInput.vue";
import BaseInputDate from "@/components/base/BaseInputDate.vue";
export default {
name: "FormCreateBasicInfo",
@@ -53,6 +54,7 @@ export default {
BaseInput,
BaseAddingNetwork,
BaseSelect,
BaseInputDate,
},
props: {
priorityList: Array,

36
src/pages/clients/components/FormCreateIdentityDocuments.vue
View File

@@ -4,59 +4,59 @@
span.title-info.text-base.font-bold Паспортные данные
.grid.grid-cols-2.gap-x-4.gap-y-6
base-input(
mask="#### ######",
v-model="identityDocument.pass.series_number",
mask="#### ######",
placeholder="0000 000000",
label="Серия и номер",
outlined
size="M"
)
base-input(
v-model="identityDocument.pass.issued_by_org",
placeholder="Точно как в паспорте",
label="Кем выдан",
outlined
size="M"
)
base-input(
mask="###-###",
v-model="identityDocument.pass.issued_by_org_code",
mask="###-###",
placeholder="000–000",
label="Код подразделения",
outlined
size="M"
)
base-input(
type="date"
base-input-date(
v-model="identityDocument.pass.issued_by_date",
placeholder="Дата",
label="Дата выдачи",
outlined
size="M"
)
.flex.flex-col.gap-y-6
span.title-info.text-base.font-bold СНИЛС и ИНН
.grid.grid-cols-2.gap-x-4.gap-y-6
base-input(
disabled,
filled,
mask="###-###-### ##",
v-model="identityDocument.snils.number",
mask="###-###-### ##",
placeholder="000–000–000 00",
label="Номер СНИЛС"
label="Номер СНИЛС",
disabled,
size="M"
)
base-input(
disabled,
filled,
mask="############",
v-model="identityDocument.inn.number",
placeholder="000000000000",
label="Номер ИНН"
mask="############",
label="Номер ИНН",
disabled,
size="M"
)
</template>
<script>
import BaseInput from "@/components/base/BaseInput";
import BaseInput from "@/components/BaseInput.vue";
import BaseInputDate from "@/components/base/BaseInputDate.vue";
export default {
name: "FormCreateIdentityDocuments",
components: { BaseInput },
components: { BaseInput, BaseInputDate },
props: {
identityDocument: Object,
saveClient: Function,

14
src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolCreateModal.vue
View File

@@ -6,18 +6,14 @@
label="Дата осмотра",
placeholder="Выберите дату"
:width="202",
type="date",
textColor="var(--font-dark-blue-color)"
outlined,
size="M"
)
base-input-time(
v-model="protocolData.startTime"
label="Время осмотра",
:width="202",
outlined,
type="time",
textColor="var(--font-dark-blue-color)",
placeholder="Выберите время"
placeholder="Выберите время",
size="M"
)
.flex.flex-col.gap-y-6px
span.color-grey.line-height.text-sm.font-semibold Врач
@@ -70,8 +66,8 @@ export default {
data() {
return {
protocolData: {
date: new Date(),
startTime: moment().format("HH:mm"),
date: null,
startTime: null,
},
};
},