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

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

Browse Source
This commit is contained in:
Daria Golova
2023-09-26 17:54:47 +03:00
parent 615200f4ca
commit 019c8c0459
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, events: (state) => state.calendar.events,
}), }),
filteredRecords() { 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}} .font-semibold.text-sm.whitespace-nowrap {{data.dataLabel}}
.flex.w-full.items-center.gap-4(v-for="field in data.fields") .flex.w-full.items-center.gap-4(v-for="field in data.fields")
.label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}} .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") base-avatar(:size="40")
img.avatar.object-cover( img.avatar.object-cover(
v-if="basic[data.dataKey][field.key]?.photo" v-if="basic[data.dataKey][field.key]?.photo"

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

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

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

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

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

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