151 lines
4.2 KiB
Vue
151 lines
4.2 KiB
Vue
<template lang="pug">
|
|
.selection-wrapper.flex
|
|
.left-side.flex.flex-col.gap-y-4
|
|
.flex.font-bold.text-xl Категории
|
|
base-input(
|
|
placeholder="Поиск",
|
|
@keyup.enter="searchCategory",
|
|
v-model="searchBenefit",
|
|
outlined,
|
|
:width="300",
|
|
iconLeft
|
|
)
|
|
q-icon(
|
|
name="app:icon-search",
|
|
size="20px",
|
|
style="color: var(--font-grey-color)"
|
|
)
|
|
.field.flex.flex-col.overflow-y-scroll
|
|
.flex.items-center(
|
|
v-for="benefit in benefitData",
|
|
:key="benefit.id",
|
|
:style="{alignItems: benefit.name.length > 28 ? 'start' : 'center'}"
|
|
)
|
|
q-checkbox(
|
|
v-model="selected",
|
|
:val="benefit",
|
|
:style="{border: 'none', width: '36px'}",
|
|
size="32px"
|
|
)
|
|
.name.flex.items-center.font-medium.text-xm {{benefit.name}}
|
|
.buttons-group.flex.py-4.px-8.justify-center
|
|
base-button.text-base.font-semibold(outlined, :size="40", @click="closeModalCategories") Отменить
|
|
base-button.text-base.font-semibold(
|
|
v-if="selected.length > 0",
|
|
:size="40",
|
|
@click="saveCategories(selected[0])"
|
|
) Сохранить
|
|
.right-side.flex.px-14.font-bold.relative
|
|
q-icon(name="app:icon-cancel").text-sm.absolute.top-4.right-4.cursor-pointer(@click="closeModalCategories")
|
|
.flex.py-10.gap-y-6.flex-col(v-if="selected.length > 0 && selected[0]?.name !== 'Без льготы'")
|
|
.flex.text-6xl {{selected[0]?.name}}
|
|
.flex.text-xm.flex-col.gap-y-3 Критерии:
|
|
.flex.flex-col.gap-y-2
|
|
.flex.font-medium.text-smm(v-for="item in choiceCriteria", :key="item.id")
|
|
span {{"- " + item}}
|
|
.flex.text-xm.flex-col.gap-y-3 Документы для подтверждения:
|
|
.flex.flex-col.gap-y-2
|
|
.flex.font-medium.text-smm(v-for="item in choiceDocumentation", :key="item.id")
|
|
span {{"- " + item}}
|
|
.flex.text-xm.flex-col.gap-y-3 Льготы:
|
|
.flex.flex-col.gap-y-2
|
|
.flex.font-medium.text-smm(v-for="item in choicePrivileges", :key="item.id")
|
|
span {{"- " + item}}
|
|
.flex.items-center.h-full.w-full.justify-center.font-medium.text-6xl(
|
|
v-else,
|
|
:style="{color: 'var(--font-grey-color)'}"
|
|
) Выберите категорию
|
|
</template>
|
|
|
|
<script>
|
|
import BaseInput from "@/components/base/BaseInput.vue";
|
|
import BaseButton from "@/components/base/BaseButton.vue";
|
|
export default {
|
|
name: "BaseCategorySelection",
|
|
components: { BaseInput, BaseButton },
|
|
props: {
|
|
benefitData: Array,
|
|
shiftSelected: Function,
|
|
closeModalCategories: Function,
|
|
saveCategories: Function,
|
|
showModal: Boolean,
|
|
},
|
|
data() {
|
|
return {
|
|
selected: [],
|
|
searchBenefit: "",
|
|
};
|
|
},
|
|
computed: {
|
|
choiceCriteria() {
|
|
return this.selected[0]?.criteria.split(",");
|
|
},
|
|
choiceDocumentation() {
|
|
return this.selected[0]?.documentation.split(",");
|
|
},
|
|
choicePrivileges() {
|
|
return this.selected[0]?.privileges.split(",");
|
|
},
|
|
},
|
|
methods: {
|
|
searchCategory() {
|
|
this.$emit("search", this.searchBenefit);
|
|
},
|
|
},
|
|
watch: {
|
|
selected: {
|
|
immediate: true,
|
|
deep: true,
|
|
handler() {
|
|
if (this.selected.length >= 2) this.selected.shift();
|
|
},
|
|
},
|
|
showModal: {
|
|
immediate: true,
|
|
handler(newVal) {
|
|
if (!newVal) this.searchBenefit = "";
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.selection-wrapper
|
|
width: 895px
|
|
height: 660px
|
|
font-feature-settings: 'pnum' on, 'lnum' on
|
|
|
|
.left-side
|
|
width: 364px
|
|
padding: 32px 28px 0px
|
|
|
|
.field
|
|
height: 457px
|
|
margin-right: -12px
|
|
&::-webkit-scrollbar
|
|
width: 4px
|
|
|
|
.name
|
|
min-height: 40px
|
|
padding-top: 4px
|
|
padding-bottom: 4px
|
|
border-bottom: 1px solid var(--bg-light-grey)
|
|
width: 268px
|
|
|
|
.q-checkbox :deep(.q-checkbox__bg)
|
|
border-radius: 50%
|
|
border: 1.5px solid var(--font-grey-color)
|
|
|
|
.buttons-group
|
|
border-top: 1px solid #D3D4D0
|
|
margin-left: -28px
|
|
margin-right: -28px
|
|
column-gap: 7px
|
|
|
|
.right-side
|
|
background: var(--bg-light-grey)
|
|
width: 531px
|
|
height: 100%
|
|
</style>
|