WIP Перемещен инпут

This commit is contained in:
Daria Golova
2023-07-18 17:39:53 +03:00
parent 1fdc22a1be
commit 51470f0ed3
61 changed files with 670 additions and 585 deletions

View File

@@ -14,33 +14,25 @@
.w-32.justify-start
.label-field.font-sm.text-sm.whitespace-nowrap {{ `Аллерген ${index+1}:` }}
.flex.min-w-64.gap-2.w-full.items-center
base-input(
base-input(
:readonly="!isEdit"
v-model="allergy.name"
@update:model-value="checkChangeInput"
name="name"
:rule="configData.name.rules"
no-error-icon
:width="350"
placeholder="Аллерген"
type="text"
:standout="!isEdit"
:outlined="isEdit"
text-color="black"
)
size="M"
)
base-input.w-full(
:readonly="!isEdit"
v-model="allergy.title"
@update:model-value="checkChangeInput"
name="title"
:rule="configData.title.rules"
no-error-icon
placeholder="Проявление аллергии"
type="text"
:standout="!isEdit"
:outlined="isEdit"
text-color="black"
)
placeholder="Проявление аллергии",
size="M"
)
.delete-contact.icon-cancel.text-xxs.cursor-pointer(
v-if="isEdit"
@click="() => deleteAllergy(index)"
@@ -60,7 +52,6 @@
<script>
import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
import BaseInput from "@/components/base/BaseInput.vue";
import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider.vue";
import { getFieldsNameUnvalidated } from "@/shared/utils/changesObjects";
import { addNotification } from "@/components/Notifications/notificationContext";
@@ -68,6 +59,7 @@ import { checkChangeData } from "@/shared/utils/changesObjects";
import { allergiesConfig } from "@/pages/newMedicalCard/utils/medicalConfig";
import { mapState, mapGetters } from "vuex";
import { getRequestArrayData } from "@/shared/utils/wrapperRequestChangeData";
import BaseInput from "@/components/base/BaseInput.vue";
export default {
name: "AllergiesForm",

View File

@@ -78,7 +78,7 @@ import {
errorMap,
} from "@/pages/newMedicalCard/utils/medicalConfig.js";
import { mapGetters, mapState } from "vuex";
import BaseInput from "@/components/BaseInput.vue";
import BaseInput from "@/components/base/BaseInput.vue";
import BaseInputDate from "@/components/base/BaseInputDate.vue";
export default {

View File

@@ -76,7 +76,7 @@ import {
import { contactsDataForm } from "@/pages/newMedicalCard/utils/medicalConfig";
import { getRequestArrayData } from "@/shared/utils/wrapperRequestChangeData";
import { mapState, mapGetters } from "vuex";
import BaseInput from "@/components/BaseInput.vue";
import BaseInput from "@/components/base/BaseInput.vue";
export default {
name: "ContactsForm",

View File

@@ -85,7 +85,7 @@ import {
import { fetchWrapper } from "@/shared/fetchWrapper.js";
import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
import { addNotification } from "@/components/Notifications/notificationContext";
import BaseInput from "@/components/BaseInput.vue";
import BaseInput from "@/components/base/BaseInput.vue";
import BaseInputDate from "@/components/base/BaseInputDate.vue";
export default {
name: "DocumentsForm",

View File

@@ -50,9 +50,8 @@
)
q-field.items-center.categories(
:style="{cursor: isEdit ? 'pointer' : 'default'}",
standout,
:readonly="!isEdit",
:outlined="isEdit",
outlined
) {{selectCategory(basic[insurance.insuranceKey][field.key])}}
base-modal(
default-padding,
@@ -104,7 +103,7 @@ import BaseUploadPhoto from "@/components/base/BaseUploadPhoto.vue";
import BaseCategorySelection from "@/components/base/BaseCategorySelection.vue";
import { checkChangeData } from "@/shared/utils/changesObjects";
import { addNotification } from "@/components/Notifications/notificationContext";
import BaseInput from "@/components/BaseInput.vue";
import BaseInput from "@/components/base/BaseInput.vue";
export default {
name: "InsuranceForm",
@@ -425,6 +424,7 @@ export default {
height: 40px
color: var(--font-dark-blue-color)
padding: 0 16px
background: var(--bg-light-grey) !important
&:before
border: none !important
transition: none
@@ -439,4 +439,16 @@ export default {
line-height: normal
color: var(--font-dark-blue-color)
padding: 8px 0
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
</style>

View File

@@ -51,39 +51,47 @@
)
.flex.w-full.relative(v-else)
q-menu.h-fit(
v-if="field.key === 'last_name'"
fit
v-model="isOpenListConfidant"
:style="{'max-height': '160px', 'position': 'fixed !important'}"
no-focus
anchor="bottom right"
v-if="field.key === 'last_name'",
fit,
v-model="isOpenListConfidant",
:style="{'max-height': '160px', 'position': 'fixed !important'}",
no-focus,
anchor="bottom right",
self="top right"
)
)
.flex.flex-col.w-full.h-full.overflow-y-auto
.confidant-item.flex.h-10.items-center.cursor-pointer.text-base.px-2(
v-for="person in listPersons"
:id="person.id"
@click="(e) => choiceConfidant(e)"
) {{ `${person.last_name || ""} ${person.first_name || ""} ${person.patronymic || ""}` }}
) {{ `${person.last_name || ""} ${person.first_name || ""} ${person.patronymic || ""}` }}
base-textarea.w-full(
v-if="field.type === 'textarea'",
:readonly="!isEdit",
v-model="confidant[field.key].value",
@update:model-value="(val) => checkChangeInput(val, field.key)",
:mask="field.mask",
:type="field.type",
:name="field.key",
:placeholder="field.placeholder",
height="96px"
)
base-input.w-full(
:readonly="!isEdit"
v-model="confidant[field.key].value"
@update:model-value="(val) => checkChangeInput(val, field.key)"
:mask="field.mask"
:type="field.type"
:name="field.key"
:placeholder="field.placeholder"
:standout="!isEdit"
:outlined="isEdit"
no-error-icon
:rule="field.rules"
text-color="black"
)
v-else,
:readonly="!isEdit",
v-model="confidant[field.key].value",
@update:model-value="(val) => checkChangeInput(val, field.key)",
:mask="field.mask",
:type="field.type",
:name="field.key",
:placeholder="field.placeholder",
:rule="field.rules",
size="M"
)
</template>
<script>
import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
import BaseInput from "@/components/base/BaseInput.vue";
import BaseSelectNetworks from "@/components/base/BaseSelectNetworks.vue";
import BaseButton from "@/components/base/BaseButton.vue";
import BasePopup from "@/components/base/BasePopup.vue";
@@ -102,6 +110,8 @@ import {
mapNetworks,
} from "@/pages/newMedicalCard/utils/medicalConfig";
import { fetchWrapper } from "@/shared/fetchWrapper";
import BaseTextarea from "@/components/base/BaseTextarea.vue.vue";
import BaseInput from "@/components/base/BaseInput.vue";
export default {
name: "ConfidantForm",
@@ -114,6 +124,7 @@ export default {
BasePopup,
BaseAddingNetwork,
TheNotificationProvider,
BaseTextarea,
},
data() {
return {

View File

@@ -14,7 +14,7 @@
.grey-border.rounded-md.flex.w-full.py-2.pr-4.pl-2.justify-between.items-center(v-for="picture in dataEntry.pictures")
.flex.items-center
img.grey-border.rounded.w-8.h-8.mr-3(:src="picture.photo")
span.name.text-base.font-normal.mr-2.whitespace-pre-wrap {{picture.name}}
span.name.text-base.font-normal.mr-2.whitespace-pre-wrap.color-dark {{picture.name}}
span.text-smm.font-normal.whitespace-nowrap(:style="{color: 'var(--font-dark-grey-color)'}") {{`${picture.size} МБ`}}
q-icon.delete-img.cursor-pointer(
@click="() => deleteImg(picture.id)",
@@ -23,18 +23,11 @@
)
.flex.flex-col.gap-y-6px.justify-start.w-full
span.text-smm.font-semibold.title-inputs Комментарий врача
.flex.comments.rounded
base-input.w-full.min-h-75(
v-model="dataEntry.comment",
type="textarea",
borderless,
dense,
placeholder="Введите описание"
autogrow,
min-height="75px",
font-size="16px",
:text-color="!dataEntry.comment ? 'var(--font-grey-color)' : 'var(--font-dark-blue-color)'"
)
base-textarea.w-full(
v-model="dataEntry.comment",
placeholder="Введите описание"
height="92px"
)
.flex.gap-x-2.text-smm
base-button(
width="126px",
@@ -51,16 +44,21 @@
<script>
import BaseModal from "@/components/base/BaseModal.vue";
import BaseInput from "@/components/base/BaseInput.vue";
import BaseDownload from "@/components/base/BaseDownload.vue";
import { mapActions } from "vuex";
import { v_model } from "@/shared/mixins/v-model";
import moment from "moment";
import BaseButton from "@/components/base/BaseButton.vue";
import BaseTextarea from "@/components/base/BaseTextarea.vue.vue";
export default {
name: "HealthStateCreateModal",
components: { BaseModal, BaseDownload, BaseInput, BaseButton },
components: {
BaseModal,
BaseDownload,
BaseButton,
BaseTextarea,
},
mixins: [v_model],
data() {
return {
@@ -113,15 +111,14 @@ export default {
</script>
<style lang="sass" scoped>
.color-dark
color: var(--font-dark-blue-color)
.name
max-width: 270px
.delete-img
color: var(--font-grey-color)
&:hover
opacity: 0.7
.comments
border: 1px solid var(--border-light-grey-color)
padding: 3px 8px 6px 16px
.title-inputs
color: var(--font-grey-color)
.form-wrapper

View File

@@ -56,17 +56,17 @@
with-icon,
size-icon="18px",
:returned-fields="['photo', 'id', 'name', 'size']"
)
:width="216"
:height="92"
)
.flex.w-full.flex-col.gap-y-2
.flex.font-semibold.text-sm(:style="{color: 'var(--font-grey-color)'}") Комментарий врача
.flex.comments.rounded(v-if="isEdit")
q-input.w-full(
v-model="value.comment",
type="textarea",
borderless,
dense,
:input-style="{'min-height': '75px', 'font-weight': '500'}"
)
base-textarea.w-full(
v-if="isEdit",
v-model="value.comment",
size="126px",
height="126px"
)
.flex.flex-col.w-full.pl-10px(v-else)
.flex(v-for="comment in getListComment")
.flex.gap-x-10px.w-full(v-if="comment")
@@ -77,20 +77,20 @@
<script>
import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
import BaseInput from "@/components/base/BaseInput";
import BaseDownload from "@/components/base/BaseDownload.vue";
import BaseModalShowingPicture from "@/components/base/BaseModalShowingPicture.vue";
import moment from "moment";
import { mapActions, mapGetters } from "vuex";
import { v_model } from "@/shared/mixins/v-model";
import BaseTextarea from "@/components/base/BaseTextarea.vue.vue";
export default {
name: "HealthStateForm",
components: {
MedicalFormWrapper,
BaseModalShowingPicture,
BaseInput,
BaseDownload,
BaseTextarea,
},
data() {
return {

View File

@@ -19,12 +19,15 @@
) {{item.label + " - " + item.value}}
.filter.flex.flex-col.gap-y-4.relative(v-if="change || fillInspection")
.flex.gap-x-2
base-input(placeholder="Поиск", outlined, :width="452", iconLeft)
q-icon(
name="app:icon-search",
size="20px",
style="color: var(--font-grey-color)"
)
base-input.search(
placeholder="Поиск",
:width="452",
iconLeft,
size="M",
icon-left
)
template(v-slot:iconLeft)
q-icon(name="app:search", size="20px", style="color: var(--font-grey-color)")
.button
q-btn(
icon="filter_alt",
@@ -47,9 +50,9 @@
<script>
import BaseButton from "@/components/base/BaseButton.vue";
import BaseInput from "@/components/base/BaseInput.vue";
import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
import { mapState } from "vuex";
import BaseInput from "@/components/base/BaseInput.vue";
export default {
name: "ClinicalForm",
@@ -165,4 +168,7 @@ export default {
.q-checkbox :deep(.q-checkbox__inner:before)
background: none !important
.search :deep(.q-field__prepend)
padding-right: 6px
</style>

View File

@@ -15,7 +15,7 @@
:class="{'pointer': fillInspection || change}"
v-for="tag in protocolData[data.state].complaints", :key="tag.id"
) {{ tag }}
base-input.px-3(v-if="change || fillInspection", type="textarea", autogrow, borderless, placeholder="Введите данные...")
q-input.input.px-3(v-if="change || fillInspection", type="textarea", autogrow, borderless, placeholder="Введите данные...")
template(v-if="!(change || fillInspection)", v-for="file in protocolData[data.state].files")
.wrap.flex.flex-col.gap-1.gap-y-3(v-if="file?.data?.length")
.title.font-semibold.text-smm.mb-2 {{file.name}}
@@ -34,8 +34,15 @@
.title.font-medium.text-xsx {{item.size + " Мб"}}
.filter.flex.flex-col.gap-y-4.relative(v-if="change || fillInspection")
.flex.gap-x-2
base-input(placeholder="Поиск", outlined, :width="232", iconLeft)
q-icon(name="app:icon-search", size="20px", style="color: var(--font-grey-color)")
base-input.search(
placeholder="Поиск",
:width="232",
iconLeft,
icon-left,
size="M",
)
template(v-slot:iconLeft)
q-icon(name="app:search", size="20px", style="color: var(--font-grey-color)")
.button
q-btn(
icon="filter_alt",
@@ -77,8 +84,8 @@
type="file",
id="upload",
:accept="checkedName(file.name) ? '.xlsx, .xls, .doc, .docx, .pdf, .odt' : 'image/*'",
borderless,
multiple
size="62px"
)
.text.flex.flex-col.items-center.justify-center.absolute.font-medium.text-smm.w-full
span {{checkedName(file.name) ? 'Загрузите документ' : 'Загрузите скан документа'}}
@@ -103,9 +110,9 @@
import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
import TagCreationForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue";
import BaseButton from "@/components/base/BaseButton.vue";
import BaseInput from "@/components/base/BaseInput.vue";
import BaseModal from "@/components/base/BaseModal.vue";
import { mapState } from "vuex";
import BaseInput from "@/components/base/BaseInput.vue";
export default {
name: "DataForm",
@@ -308,7 +315,7 @@ export default {
.download
height: 62px
border: 1px dashed var(--border-light-grey-color)
background-color: var(--bg-light-grey)
border-radius: 4px
cursor: pointer
@@ -345,4 +352,17 @@ export default {
border-radius: 4px
width: fit-content
padding: 8px 16px 8px 8px
.search :deep(.q-field__prepend)
padding-right: 6px
.input :deep(.q-field__native)
font-weight: 500
font-size: 14px
line-height: 135%
color: var(--font-dark-blue-color)
padding: 4px 0
&::placeholder
color: var(--font-grey-color)
opacity: 1
</style>

View File

@@ -16,24 +16,24 @@
size="36px"
)
.textarea.flex.w-full
base-input.w-full(
base-textarea.w-full(
v-model="protocolData[data.state].text",
type="textarea",
outlined,
resize="vertical",
placeholder="Введите данные..."
placeholder="Введите данные...",
height="126px"
)
.font-medium.text-smm(v-else) {{protocolData[data.state]?.text}}
</template>
<script>
import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
import BaseInput from "@/components/base/BaseInput.vue";
import { mapState } from "vuex";
import BaseTextarea from "@/components/base/BaseTextarea.vue.vue";
export default {
name: "DiseaseForm",
components: { MedicalFormWrapper, BaseInput },
components: { MedicalFormWrapper, BaseTextarea },
props: {
data: Object,
fillInspection: Boolean,
@@ -77,8 +77,4 @@ export default {
.q-checkbox :deep(.q-checkbox__bg)
border-radius: 4px
border: 1.5px solid var(--font-grey-color)
.textarea
box-sizing: border-box
min-height: 130px
</style>

View File

@@ -23,10 +23,10 @@
base-input-number(
v-else,
v-model="modelValue",
outlined,
:step="0.1",
:max="10",
:min="0"
size="M"
)
.rounded.grey-background.py-3.px-4.blue-color
span.font-bold.text-base.line-height Справка

View File

@@ -16,10 +16,10 @@
:max="data.config[key].max",
reverse-value
:label="data.config[key].label",
outlined,
:shadow-text="data.config[key].shadowText",
:placeholder="`0${data.config[key].shadowText}`"
)
:placeholder="`0${data.config[key].shadowText}`",
size="M"
)
.flex.flex-col.gap-y-2.w-full(v-if="data.key === 'thermometry'")
base-input.w-full(
v-model="dataValue.result",
@@ -69,7 +69,7 @@ import BaseInputNumber from "@/components/base/BaseInputNumber.vue";
import { thermometryResultsMap } from "@/pages/newMedicalCard/utils/medicalConfig";
import { mapState } from "vuex";
import { mapActions } from "vuex";
import BaseInput from "@/components/BaseInput.vue";
import BaseInput from "@/components/base/BaseInput.vue";
export default {
name: "ThermometryForm",

View File

@@ -69,7 +69,7 @@ import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWra
import TagCreationForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue";
import BaseModal from "@/components/base/BaseModal.vue";
import { mapState } from "vuex";
import BaseInput from "@/components/BaseInput.vue";
import BaseInput from "@/components/base/BaseInput.vue";
export default {
name: "MedicalFormTag",

View File

@@ -29,7 +29,7 @@
q-icon(name="app:icon-plus", size="10px",)
span Добавить категорию
.flex.flex-col(class="gap-x-1.5")
new-base-input(
base-input(
v-model="model.tag",
label="Текст тега",
placeholder="Введите тег",
@@ -53,7 +53,7 @@
<script>
import BaseButton from "@/components/base/BaseButton.vue";
import BaseInput from "@/components/BaseInput.vue";
import BaseInput from "@/components/base/BaseInput.vue";
export default {
name: "TagCreationForm",

View File

@@ -43,7 +43,6 @@
</template>
<script>
import BaseInput from "@/components/base/BaseInput.vue";
import BaseAvatar from "@/components/base/BaseAvatar.vue";
import BaseInputDate from "@/components/base/BaseInputDate.vue";
import BaseInputTime from "@/components/base/BaseInputTime.vue";
@@ -53,7 +52,6 @@ import BaseButton from "@/components/base/BaseButton.vue";
export default {
name: "MedicalProtocolCreateModal",
components: {
BaseInput,
BaseAvatar,
BaseInputDate,
BaseInputTime,