diff --git a/src/pages/newMedicalCard/components/MedicalFormTagWrapper.vue b/src/pages/newMedicalCard/components/MedicalFormTagWrapper.vue index c16e41b..5386919 100644 --- a/src/pages/newMedicalCard/components/MedicalFormTagWrapper.vue +++ b/src/pages/newMedicalCard/components/MedicalFormTagWrapper.vue @@ -2,17 +2,19 @@ .protocol.flex.justify-between.p-6(v-for="elem in list") .flex.font-bold.text-6xl {{elem.label}} .flex.gap-x-4 - .icon.flex.rounded.w-10.h-10.items-center.justify-center - q-icon( - name="print", + .button + q-btn( + icon="print", size="20px", - style="color: var(--font-grey-color)" + :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}", + padding="0" ) - .icon.flex.rounded.w-10.h-10.items-center.justify-center - q-icon( - name="app:basket", + .button + q-btn( + icon="app:basket", size="20px", - style="color: var(--font-grey-color)" + :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}", + padding="0" ) medical-form-wrapper( v-for="(item, index) in list[0].data", @@ -59,18 +61,19 @@ :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}", padding="0" ) - .field.flex.flex-col.overflow-y-scroll - .checkbox.flex.items-center.gap-x-4( - v-for="complaint in item.complaints", - :key="complaint.id" + .field.flex.flex-col.overflow-y-scroll(v-if="item.complaints") + .checkbox.flex.flex-col( + v-for="complaint in textSorting(item.complaints)", ) - q-checkbox( - v-model="selected", - :val="complaint", - :style="{border: 'none', width: '15px'}", - size="32px" - ) - .name.flex.items-center.font-medium.text-xm {{complaint.label}} + .letter.flex.items-center.font-bold {{ complaint.sym }} + .line.flex.gap-x-4.h-9.items-center(v-for="name in complaint?.array") + q-checkbox( + v-model="selected", + :val="name?.label", + :style="{border: 'none', width: '16px'}", + size="32px" + ) + .name.flex.items-center.font-medium.text-smm {{ name?.label }} .protocol.flex.justify-between.p-6(v-if="fillInspection") .flex.h-fit.w-fit.gap-2 base-button.text-base.font-semibold(outlined, :size="40") Отменить @@ -98,8 +101,58 @@ export default { data() { return { selected: [], + abc: [ + "А", + "Б", + "В", + "Г", + "Д", + "Е", + "Ё", + "Ж", + "З", + "И", + "Й", + "К", + "Л", + "М", + "Н", + "О", + "П", + "Р", + "С", + "Т", + "У", + "Ф", + "Х", + "Ц", + "Ч", + "Ш", + "Щ", + "Ы", + "Э", + "Ю", + "Я", + ], }; }, + methods: { + textSorting(arr) { + let srt = []; + this.abc.forEach((letter) => { + arr.forEach((str) => { + let finded = srt.find((obj) => obj.sym === letter); + if (str.label[0] === letter) { + if (!finded) { + srt.push({ sym: letter, array: [{ label: str.label }] }); + } else if (finded.sym === letter) + finded.array.push({ label: str.label }); + } + }); + }); + return srt; + }, + }, }; @@ -152,18 +205,26 @@ export default { .field margin-right: -10px + &::-webkit-scrollbar-track:vertical + margin-bottom: 12px &::-webkit-scrollbar width: 4px .checkbox - border-bottom: 1px solid var(--bg-light-grey) width: 328px +.line + margin-left: -8px + border-bottom: 1px solid var(--bg-light-grey) + min-height: 36px + +.letter + height: 34px + color: var(--font-grey-color) + .name - min-height: 40px - padding-top: 4px - padding-bottom: 4px width: 268px + color: var(--font-dark-blue-color) .q-checkbox :deep(.q-checkbox__bg) border-radius: 4px diff --git a/src/pages/newMedicalCard/components/MedicalProtocolsInspection.vue b/src/pages/newMedicalCard/components/MedicalProtocolsInspection.vue index 549be2f..1dfada1 100644 --- a/src/pages/newMedicalCard/components/MedicalProtocolsInspection.vue +++ b/src/pages/newMedicalCard/components/MedicalProtocolsInspection.vue @@ -1,12 +1,12 @@