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

[WIP] Добавил quasar input, стили, заменил маски

Browse Source
This commit is contained in:
megavrilinvv
2023-01-16 16:28:11 +03:00
parent 76754ab544
commit bf2a81aaba
15 changed files with 126 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -107,7 +107,6 @@
v-if="section!=='docs' && section!=='additional' && isChange && settings[section].options[key] !== 'Дата выдачи'",
:style="{fontWeight:key === 'number'&&600}",
v-model="sectionInfo[key]",
:rows="section ==='pass' ? 2 : 1",
:placeholder="settings[section].placeholder[key] || settings[section].placeholder"
:sharp="settings[section].sharps[key] && section === 'pass' ? settings[section].sharps[key] : ''"
)
@@ -135,8 +134,8 @@
:id="item.id",
@click="deleteNote(item.id)"
)
client-detail-input.text-sm.w-max-fit.pr-12.relative(
:maxLength="40",
client-detail-input.text-sm.w-max-fit.relative(
maxLength="40",
:style="{fontWeight:key === 'number'&&600}",
v-model="sectionInfo[key].title",
placeholder="Заголовок"
@@ -147,7 +146,7 @@
) {{`${sectionInfo[key].title.length}/40`}}
.title-section.text-xxs.font-semibold Описание
client-detail-input.text-sm.w-max-fit(
:maxLength="40",
maxLength="40",
:style="{fontWeight:key === 'number'&&600}",
v-model="sectionInfo[key].description",
placeholder="Описание"

48
src/pages/clients/components/ClientDetailInput.vue
View File

@@ -1,43 +1,30 @@
<template lang="pug">
.input-wrapper.flex.gap-x-2.px-3.box-border.w-max-fit.text-sm(class="py-2.5")
textarea.place-input.w-full.outline-0.not-italic.resize-none.font-medium(
v-if="!sharp"
:rows="textareaRows",
v-model="value",
:cols="24",
:placeholder="placeholder",
:maxLength="maxLength"
)
input.w-full.outline-0.not-italic.font-medium(
v-else,
v-model="value",
:placeholder="placeholder",
v-mask="sharp"
)
base-input(
:type="choiceType"
v-model="value",
:placeholder="placeholder",
:maxLength="maxLength",
:mask="sharp"
)
slot
</template>
<script>
import { mask } from "vue-the-mask";
import BaseInput from "@/components/base/BaseInput";
export default {
name: "ClientDetailInput",
components: { BaseInput },
emits: ["update:modelValue"],
props: {
modelValue: String,
width: Number,
sharp: String,
rows: Number,
maxLength: Number,
maxLength: String,
placeholder: String,
},
directives: { mask },
computed: {
heightInput() {
return ((this.width / 100) * 70) / 11;
},
textareaRows() {
if (this.value.length <= 22) return this.rows;
return Math.ceil(this.value.length / 22);
choiceType() {
return !this.sharp ? "textarea" : "text";
},
value: {
get() {
@@ -50,12 +37,3 @@ export default {
},
};
</script>
<style lang="sass" scoped>
.input-wrapper
border: 2px solid var(--border-light-grey-color)
border-radius: 4px
background-color: var(--default-white)
textarea
overflow: hidden
</style>

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

@@ -43,7 +43,7 @@
)
base-input(
disabled,
v-mask="'######'",
mask="######",
placeholder="000000",
label="Индекс",
v-model="dopeAddress.index",
@@ -55,7 +55,7 @@
<script>
import BaseInput from "@/components/base/BaseInput";
import BaseSelect from "@/components/base/BaseSelect";
import { mask } from "vue-the-mask";
export default {
name: "ClientDetailSectionAddress",
components: {
@@ -65,6 +65,5 @@ export default {
props: {
dopeAddress: Object,
},
directives: { mask },
};
</script>

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

@@ -12,38 +12,44 @@
.grid.grid-cols-2.gap-y-6.gap-x-4
base-input.input-info(
disabled,
filled,
placeholder="Введите город",
v-model="addresses.city",
label="Город"
)
base-input.input-info(
disabled,
filled,
placeholder="Введите область",
v-model="addresses.region",
label="Область"
)
base-input.input-info(
disabled,
filled,
placeholder="Введите улицу",
v-model="addresses.street",
label="Введите улицу"
)
base-input.input-info(
disabled,
filled,
placeholder="Номер дома",
v-model="addresses.house_number",
label="Дом"
)
base-input.input-info(
disabled,
filled,
placeholder="Номер квартиры",
v-model="addresses.apartment_number",
label="Квартира"
)
base-input.input-info(
disabled,
filled,
placeholder="000000",
v-mask="'######'",
mask="######",
v-model="addresses.zip_code",
label="Индекс"
)
@@ -56,7 +62,7 @@
import BaseButton from "@/components/base/BaseButton";
import BaseInput from "@/components/base/BaseInput";
import BaseCustomSelect from "@/components/base/BaseCustomSelect";
import { mask } from "vue-the-mask";
export default {
name: "FormCreateAddresses",
components: { BaseInput, BaseButton, BaseCustomSelect },
@@ -65,7 +71,6 @@ export default {
saveClient: Function,
saveFile: Function,
},
directives: { mask },
};
</script>

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

@@ -14,7 +14,7 @@
base-input.input-info(
v-model="phone.username",
placeholder="+7 (915) 644–92–23",
v-mask="'+7 (###) ###-##-##'",
mask="+7 (###) ###-##-##",
label="Номер телефона"
)
base-input.input-info(
@@ -48,7 +48,7 @@ import BaseInputDate from "@/components/base/BaseInputDate";
import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
import { column } from "@/pages/clients/utils/tableConfig";
import BaseCustomSelect from "@/components/base/BaseCustomSelect";
import { mask } from "vue-the-mask";
export default {
name: "FormCreateBasicInfo",
components: {
@@ -69,7 +69,6 @@ export default {
saveClient: Function,
addNetwork: Function,
},
directives: { mask },
data() {
return {
networks: column.find((el) => el.name === "networks"),

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

@@ -4,7 +4,7 @@
span.title-info.text-base.font-bold Паспортные данные
.grid.grid-cols-2.gap-x-4.gap-y-6
base-input.input-info(
v-mask="'#### ######'",
mask="#### ######",
v-model="identityDocument.pass.series_number",
placeholder="0000 000000",
label="Серия и номер"
@@ -15,7 +15,7 @@
label="Кем выдан"
)
base-input.input-info(
v-mask="'###-###'",
mask="###-###",
v-model="identityDocument.pass.issued_by_org_code",
placeholder="000–000",
label="Код подразделения"
@@ -30,14 +30,16 @@
.grid.grid-cols-2.gap-x-4.gap-y-6
base-input.input-info(
disabled,
v-mask="'###-###-### ##'",
filled,
mask="###-###-### ##",
v-model="identityDocument.snils.number",
placeholder="000–000–000 00",
label="Номер СНИЛС"
)
base-input.input-info(
disabled,
v-mask="'############'",
filled,
mask="############",
v-model="identityDocument.inn.number",
placeholder="000000000000",
label="Номер ИНН"
@@ -51,7 +53,7 @@
import BaseButton from "@/components/base/BaseButton";
import BaseInput from "@/components/base/BaseInput";
import BaseInputDate from "@/components/base/BaseInputDate";
import { mask } from "vue-the-mask";
export default {
name: "FormCreateIdentityDocuments",
components: { BaseInput, BaseInputDate, BaseButton },
@@ -59,7 +61,6 @@ export default {
identityDocument: Object,
saveClient: Function,
},
directives: { mask },
};
</script>

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

@@ -16,7 +16,7 @@
base-input(
v-model="patient.seriesAndNumber",
disabled,
v-mask="'#### ######'"
mask="#### ######"
label="Серия и номер"
)
.flex.justify-between
@@ -48,7 +48,7 @@
base-input(
v-model="patient.seriesAndNumber",
disabled,
v-mask="'#### ######'"
mask="#### ######"
label="Серия и номер"
)
.flex.justify-between
@@ -73,7 +73,6 @@ import KitShortList from "@/components/kit/KitShortList.vue";
import KitToggle from "@/components/kit/KitToggle.vue";
//import { fetchWrapper } from "@/shared/fetchWrapper";
import { mask } from "vue-the-mask";
export default {
name: "AgreementPerson",
components: {
@@ -84,7 +83,6 @@ export default {
KitShortList,
KitToggle,
},
directives: { mask },
data() {
return {
patientEqualClient: true,

5
src/pages/clients/components/cells/TableCellBodyPhone.vue
View File

@@ -8,13 +8,13 @@
@click.stop,
v-model="value.phone.username",
:placeholder="value.phone.username",
v-mask="'+7 (###) ###-##-##'"
mask="+7 (###) ###-##-##"
)
</template>
<script>
import BaseInput from "@/components/base/BaseInput";
import { mask } from "vue-the-mask";
export default {
name: "TableCellBodyPhone",
components: { BaseInput },
@@ -23,7 +23,6 @@ export default {
width: Number,
isOpenChange: Boolean,
},
directives: { mask },
};
</script>

54
src/pages/login/TheLogin.vue
View File

@@ -1,29 +1,34 @@
<template lang="pug">
.login-wrapper.flex
.left-col.flex.flex-col.items-center
.flex.h-full.w-full.relative.overflow-hidden
.left-col.flex.flex-col.items-center.justify-center
.logo-wrapper.absolute.left-12.top-12
img(:src="logoMark")
.login-panel.flex.flex-col.justify-center.gap-y-10
.flex.flex-col.gap-y-2
.text-welcome.flex.not-italic.font-bold.text-5xl Добро пожаловать!
.text-under.flex.not-italic.font-medium.text-base(
:style="{color: this.underTextColor}") Войдите в аккаунт, чтобы начать пользоваться сервисом «Астра».
.flex.flex-col.gap-y-5
:style="{color: this.underTextColor}"
) Войдите в аккаунт, чтобы начать пользоваться сервисом «Астра».
.flex.flex-col.gap-y-2
base-input.font-medium(
:borderError="wrongData",
:rule="[wrongData => !!wrongData]",
v-model="user.username",
placeholder="Введите ваш логин",
label="Логин"
)
.flex.flex-col.gap-y-6px.relative
.flex.non-italic.font-semibold.text-sm.opacity-40 Пароль
base-input(
:borderError="wrongData",
v-model="user.password",
:type="changeType",
placeholder="Введите ваш пароль"
base-input(
:rule="[wrongData => !!wrongData]",
v-model="user.password",
:type="changeType",
placeholder="Введите ваш пароль",
label="Пароль",
withIcon
)
q-icon(
v-if="!wrongData && user.password"
:name="isView ? 'visibility_off' : 'visibility'",
@click="changeView"
)
img.absolute.z-10.right-4.bottom-10px.cursor-pointer(:src="changeIcon", alt="eyePassword", @click="changeView")
span.font-medium(:style="{color: this.redColor}", v-show="wrongData") Неверный логин или пароль
.flex.items-center.gap-x-11px
input.w-4.h-4.checkbox.cursor-pointer(@click="persist", type="checkbox")
@@ -37,8 +42,6 @@
import { fetchWrapper } from "@/shared/fetchWrapper";
import BaseInput from "@/components/base/BaseInput";
import BaseButton from "@/components/base/BaseButton";
import viewPasswordIcon from "@/assets/icons/eye.svg";
import hidePasswordIcon from "@/assets/icons/openEye.svg";
import logoMark from "@/assets/images/logoMark.svg";
export default {
name: "TheLogin",
@@ -47,8 +50,6 @@ export default {
return {
underTextColor: "var(--font-grey-color)",
isView: false,
viewPassword: viewPasswordIcon,
hidePassword: hidePasswordIcon,
logoMark,
authorized: true,
user: { username: "", password: "" },
@@ -60,9 +61,6 @@ export default {
wrongData() {
return !this.authorized && !this.user.username && !this.user.password;
},
changeIcon() {
return !this.isView ? this.viewPassword : this.hidePassword;
},
changeType() {
return !this.isView ? "password" : "text";
},
@@ -118,28 +116,26 @@ export default {
</script>
<style lang="sass" scoped>
.login-wrapper
width: 100%
height: 100%
position: relative
overflow: hidden
.left-col
display: flex
justify-content: center
background-color: var(--default-white)
height: 100%
width: 40%
.logo-wrapper
width: 89.28px
height: 74.64px
width: 90px
height: 75px
.login-panel
width: 444px
height: 422px
.text-welcome
letter-spacing: 0.02em
color: var(--font-dark-blue-color)
.input-wrapper
border-width: 1.5px
.right-col
height: 100%
background-color: var(--font-dark-blue-color)

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

@@ -22,7 +22,7 @@
.input
base-input(
placeholder="000–000–000 00",
v-mask="'###-###-### ##'",
mask="###-###-### ##",
label="СНИЛС",
v-model="clientDetail.insurance_number",
)
@@ -40,7 +40,7 @@
base-input(
label="Номер телефона",
placeholder="+7 (915) 644–92–23",
v-mask="'+7 (###) ###-##-##'",
mask="+7 (###) ###-##-##",
v-model="clientDetail.phone",
)
.input
@@ -56,7 +56,6 @@ import BaseInput from "@/components/base/BaseInput";
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";
import { medicalDetailConfig } from "@/pages/medicalCard/utils/medicalConfig.js";
@@ -69,7 +68,6 @@ export default {
BaseButton,
BaseRadioButtonsGroup,
},
directives: { mask },
props: {
clientDetail: Object,
},

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

@@ -30,12 +30,10 @@ import BaseInput from "@/components/base/BaseInput";
import BaseInputDate from "@/components/base/BaseInputDate";
import BaseSelect from "@/components/base/BaseSelect";
import BaseButton from "@/components/base/BaseButton";
import { mask } from "vue-the-mask";
export default {
name: "MedicalIdentityDocuments",
components: { BaseInput, BaseInputDate, BaseSelect, BaseButton },
directives: { mask },
props: {
changeIdentityDoc: Function,
clientDetail: Object,

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

@@ -12,7 +12,7 @@
label="Серия и номер полиса ОМС",
placeholder="000000 0000000000",
v-model="clientDetail.OMSPolicy.number",
v-mask="'###### ##########'",
mask="###### ##########",
:disabled="!selectedOMSPolicy"
)
base-input.input(
@@ -25,7 +25,7 @@
label="Серия и номер полиса ДМС",
placeholder="000000 0000000000",
v-model="clientDetail.DMSPolicy.number",
v-mask="'###### ##########'",
mask="###### ##########",
:disabled="selectedOMSPolicy"
)
base-input.input(
@@ -52,7 +52,6 @@
import BaseInput from "@/components/base/BaseInput";
import BaseInputDate from "@/components/base/BaseInputDate";
import BaseSelect from "@/components/base/BaseSelect";
import { mask } from "vue-the-mask";
import BaseRadioButtonsGroup from "@/components/base/BaseRadioButtonsGroup.vue";
import { medicalDetailConfig } from "@/pages/medicalCard/utils/medicalConfig.js";
@@ -64,7 +63,6 @@ export default {
BaseSelect,
BaseRadioButtonsGroup,
},
directives: { mask },
props: {
clientDetail: Object,
},

4
src/pages/schedule/components/ScheduleBar.vue
View File

@@ -30,7 +30,7 @@
)
base-input.w-28(
v-if="template.item.id === 1"
v-mask="'#/#'",
mask="#/#",
placeholder="0/0",
label="Введите график",
v-model="template.item.label"
@@ -49,7 +49,6 @@ import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
import BaseInputTime from "@/components/base/BaseInputTime.vue";
import BaseInputDate from "@/components/base/BaseInputDate.vue";
import BaseInput from "@/components/base/BaseInput.vue";
import { mask } from "vue-the-mask";
export default {
name: "ScheduleBar",
@@ -67,7 +66,6 @@ export default {
createSchedules: Function,
deleteSchedule: Function,
},
directives: { mask },
data() {
return {
templateList: [