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

Merge branch 'fix-basic-data-forms' into 'master'

Browse Source 
Изменила сетки форм

See merge request astra/astra-frontend!511
This commit is contained in:
Kirill Andrusyak
2023-10-03 17:40:39 +00:00
parent 615200f4ca 019c8c0459
commit 35cc0ee059
5 changed files with 45 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/newCalendar/components/managerCalendar/CalendarColumn.vue
View File

@@ -49,7 +49,7 @@ export default {
events: (state) => state.calendar.events,
}),
filteredRecords() {
return this.events.filter((elem) => elem?.medic?.id === this.medic?.id);
return this.events.filter((elem) => elem?.medic?.ID === this.medic?.ID);
},
},
};

2
src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue
View File

@@ -14,7 +14,7 @@
.font-semibold.text-sm.whitespace-nowrap {{data.dataLabel}}
.flex.w-full.items-center.gap-4(v-for="field in data.fields")
.label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
.avatar-field.flex.gap-3.items-center(v-if="field.type === 'avatar'")
.flex.gap-3.items-center.h-10(v-if="field.type === 'avatar'")
base-avatar(:size="40")
img.avatar.object-cover(
v-if="basic[data.dataKey][field.key]?.photo"

49
src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue
View File

@@ -9,13 +9,13 @@
:cancel="cancelEdit"
:open-edit="openEdit"
)
q-form.form-wrap.gap-24.w-full(ref="formContacts")
.flex.flex-col.gap-4(v-for="(contact, key) in contacts")
q-form.form-wrap.gap-6.w-full(ref="formContacts")
.flex.flex-col.gap-2(v-for="(contact, key) in contacts")
.font-semibold.text-sm.whitespace-nowrap {{configData[key].title}}
.flex.w-full.justify-between.items-center.gap-4(v-for="(data, index) in contact")
.flex.w-full.items-center.gap-4(v-for="(data, index) in contact")
.label-field.font-sm.text-sm.whitespace-nowrap {{`${configData[key].fieldName} ${index+1} :`}}
.input-wrapper.items-center.flex.h-10.gap-10px
.flex(v-if="key === 'networks'")
.w-full.items-center.flex.h-10
.flex.w-full(v-if="key === 'networks'")
.flex.rounded-full.cursor-pointer.items-center.gap-10px.py-1.pl-1.pr-2(
v-if="data.id || data.filled"
@click="() => copyLinkNetwork(data.value)"
@@ -23,7 +23,7 @@
)
q-icon.icon(:name="mapNetworks[data.category].icon" :class="{old: data.id, new: data.filled}")
span.text-sm.font-medium {{ mapNetworks[data.category].title || data.value }}
.flex.gap-10px(v-else v-click-outside="() => checkNetworksField(index)" :key="key+index")
.flex.gap-10px.w-full(v-else v-click-outside="() => checkNetworksField(index)" :key="key+index")
base-select-networks(
:list-data="Object.values(mapNetworks)"
:option-data="data.category"
@@ -31,13 +31,14 @@
:style-border="true"
:size-input="50"
)
base-input.w-full(
base-input(
v-model="data.value",
:name="key",
:rule="configData[key].rules",
size="M"
size="M",
width="100%"
)
base-input.w-full(
base-input(
v-else,
:readonly="!isEdit",
v-model="data.value",
@@ -45,23 +46,25 @@
:mask="configData[key].inputMask",
:rule="configData[key].rules",
@update:model-value="checkChangeInput",
size="M"
size="M",
width="100%"
)
.delete-contact.icon-cancel.text-xxs.cursor-pointer(
q-icon.delete-icon.ml-2.cursor-pointer(
v-if="isEdit"
@click="() => deleteContact(key, index)"
)
name="app:cancel-mini",
size="24px"
)
q-btn.ml-2px(
v-if="isEdit",
color="primary",
flat,
:style="{'font-weight': 500, width: '104px', height: '24px'}",
:style="{'font-weight': 500, width: '76px', height: '40px'}",
no-caps,
padding="0",
@click="(e) => addNewContact(e, key)"
label="Добавить"
)
q-icon(name="app:icon-plus", size="12px", left)
span Добавить
</template>
<script>
@@ -219,24 +222,20 @@ export default {
color: var(--btn-blue-color)
&.new
color: var(--icon-violet-color)
.input-wrapper
width: 302px
.form-wrap
display: grid
grid-template-columns: repeat(3, 1fr)
grid-template-rows: repeat(1, auto)
@media(max-width: 1900px)
grid-template-rows: repeat(1, 1fr)
@media(max-width: 1440px)
grid-template-columns: repeat(2, 1fr)
grid-template-rows: repeat(2, auto)
@media(max-width: 1320px)
grid-template-columns: repeat(1, 1fr)
grid-template-rows: repeat(3, auto)
grid-template-rows: repeat(2, 1fr)
.network-field
background-color: var(--bg-light-grey)
.label-field
min-width: 110px
color: var(--font-grey-color)
.delete-contact
color: var(--font-grey-color)
.delete-icon :deep(path)
fill: var(--font-grey-color)
.on-left
margin-right: 10px
.q-btn :deep(.q-ripple)

20
src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue
View File

@@ -8,15 +8,15 @@
:open-edit="openEdit",
:save="saveChange"
)
q-form.form-wrap.gap-24.w-full(ref="documentForm", :no-error-focus="true")
.data-section.flex.flex-col.gap-4(v-for="data in configData", :key="data.dataLabel")
q-form.form-wrap.gap-6.w-full(ref="documentForm", :no-error-focus="true")
.data-section.flex.flex-col.gap-2(v-for="data in configData", :key="data.dataLabel")
.font-semibold.text-sm.whitespace-nowrap {{data.dataLabel}}
.flex.w-full.justify-between.items-center.gap-4(
.flex.w-full.items-center.gap-4(
v-for="field in data.fields",
:key="field.label"
)
.label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
.photo-field.flex.gap-3.items-center(v-if="field.type === 'photo'")
.flex.gap-3.items-center.h-10(v-if="field.type === 'photo'")
q-avatar(
rounded,
size="40px",
@@ -49,7 +49,7 @@
:name="data.dataKey + ':' + field.key",
@update:model-value="checkChangeDocData",
:readonly="!isEdit",
:width="302",
width="100%",
:mask="field?.inputMask",
:rule="(val) => !personDataField.includes(data.dataKey + ':' + field.key) ? checkPassportFields(val, field.rules) : field.rules(val)",
size="M",
@@ -61,7 +61,7 @@
@update:model-value="checkChangeDocData",
:readonly="!isEdit",
:type="field.type",
:width="302",
width="100%",
:mask="field?.inputMask",
:rule="[(val) => !personDataField.includes(data.dataKey + ':' + field.key) ? checkPassportFields(val, field.rules) : field.rules(val, initialDocData?.[data.dataKey]?.id)]",
size="M"
@@ -315,13 +315,11 @@ export default {
display: grid
grid-template-columns: repeat(3, 1fr)
grid-template-rows: repeat(1, 1fr)
@media(max-width: 1900px)
@media(max-width: 1440px)
grid-template-columns: repeat(2, 1fr)
grid-template-rows: 2.5fr 0.5fr
@media(max-width: 1320px)
grid-template-columns: repeat(1, 1fr)
grid-template-rows: 2.5fr 0.5fr 0.5fr
grid-template-rows: 3fr 1fr
.label-field
min-width: 110px
color: var(--font-grey-color)
.replace-photo
color: var(--btn-blue-color)

30
src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue
View File

@@ -9,10 +9,10 @@
:save="saveChange",
:cancel="cancelEdit"
)
q-form.form-wrap.gap-24.w-full(ref="insuranceForm", :no-error-focus="true")
.flex.flex-col.gap-4(v-for="insurance in insuranceConfig", :key="insurance.insuranceKey")
q-form.form-wrap.gap-6.w-full(ref="insuranceForm", :no-error-focus="true")
.flex.flex-col.gap-2(v-for="insurance in insuranceConfig", :key="insurance.insuranceKey")
.font-semibold.text-sm.whitespace-nowrap {{insurance.insuranceLabel}}
.flex.w-full.justify-between.items-center.gap-4(
.flex.w-full.items-center.gap-4(
v-for="field in insurance.fields",
:key="insurance.insuranceKey + field.key",
:style="{marginTop: field.label === 'Документы' ? '20px' : null}"
@@ -49,8 +49,8 @@
v-model="insuranceData[photoId][field.key]"
:confirm-upload="confirmChangePhoto"
)
.category.flex.h-10.relative.gap-x-2(v-else-if="field.type === 'select'")
.category-select.flex.items-center.change.px-4.rounded {{selectCategory(basic[insurance.insuranceKey][field.key])}}
.flex.h-10.relative.gap-x-2.w-full(v-else-if="field.type === 'select'")
.w-full.flex.items-center.change.px-4.rounded {{selectCategory(basic[insurance.insuranceKey][field.key])}}
q-btn.change.flex.w-7.h-9.rounded-md(
v-if="isEdit",
@click="openModalCategories",
@@ -80,12 +80,13 @@
span(
:style="{color: 'var(--font-dark-blue-color)'}"
) {{"\xa0" + basic?.benefit[insurance?.discount] + "%"}}
.input-container.flex.flex-col.relative(v-else)
.w-full.flex.flex-col.relative(v-else)
base-input(
v-model="insuranceData[insurance.insuranceKey][field.key]",
@update:model-value="checkChangeInput",
:readonly="!isEdit",
size="M",
width="100%",
:name="insurance.insuranceKey + ':' + field.key",
:rule="[(val) => checkFields(val, insurance.insuranceKey, field.rules)]"
)
@@ -355,9 +356,6 @@ export default {
.avatar
height: 100%
.input-container
width: 302px
.replace-photo
color: var(--btn-blue-color)
@@ -365,14 +363,12 @@ export default {
display: grid
grid-template-columns: repeat(3, 1fr)
grid-template-rows: repeat(1, 1fr)
@media(max-width: 1900px)
@media(max-width: 1440px)
grid-template-columns: repeat(2, 1fr)
grid-template-rows: repeat(2, 1fr)
@media(max-width: 1320px)
grid-template-columns: repeat(1, 1fr)
grid-template-rows: repeat(3, 1fr)
grid-template-rows: 1.2fr 0.8fr
.label-field
min-width: 110px
color: var(--font-grey-color)
.q-badge
@@ -382,12 +378,6 @@ export default {
.delete
background-color: var(--btn-red-color)
.category
width: 324px
.category-select
min-width: 276px
.icon :deep(path)
fill: var(--font-grey-color)