222 lines
6.2 KiB
Vue
222 lines
6.2 KiB
Vue
<template lang="pug">
|
|
.selection-wrapper.flex
|
|
.left-side.flex.flex-col
|
|
.flex.flex-col.gap-y-4.h-full
|
|
.flex.flex-col.gap-y-6
|
|
.flex.font-bold.text-xl Категории
|
|
base-input.search(
|
|
placeholder="Поиск",
|
|
@keyup.enter="searchCategory",
|
|
@input="searchCategory",
|
|
v-model="searchBenefit",
|
|
debounce="10",
|
|
:width="300",
|
|
size="M",
|
|
iconLeft
|
|
)
|
|
template(v-slot:iconLeft)
|
|
q-icon(name="app:icon-search", size="20px", style="color: var(--font-grey-color)")
|
|
.field.flex.flex-col.overflow-y-scroll(:class="{'filed-category': findSelected(selected?.id)}")
|
|
.flex.items-center(v-for="benefit in benefitData", :key="benefit.id")
|
|
q-item(tag="label", :style="{alignItems: benefit.name.length > 28 ? 'start' : 'center'}")
|
|
q-item-section(top)
|
|
q-radio.radio(
|
|
v-model="selected",
|
|
:val="benefit",
|
|
:style="{paddingTop: benefit.name.length > 28 ? '7px' : '2px'}",
|
|
size="24px",
|
|
checked-icon="check_circle",
|
|
unchecked-icon="radio_button_unchecked"
|
|
)
|
|
q-item-label
|
|
.name.flex.items-center.font-medium.text-xm {{benefit.name}}
|
|
.buttons-group.flex.py-4.px-8.justify-center(v-if="!findSelected(selected?.id)")
|
|
base-button(
|
|
type="secondary",
|
|
label="Сбросить",
|
|
width="146px",
|
|
@click="closeModalCategories"
|
|
)
|
|
base-button(
|
|
label="Сохранить",
|
|
width="146px",
|
|
@click="saveCategories(selected)"
|
|
)
|
|
.right-side.flex.px-10.font-bold.relative
|
|
q-icon(name="app:icon-cancel").text-sm.absolute.top-4.right-4.cursor-pointer(@click="closeModalCategories")
|
|
.flex.gap-y-6.flex-col.w-full(v-if="selected?.id && selected?.name !== 'Без льготы'")
|
|
.right-header.flex
|
|
span.text-6xl {{selected?.name}}
|
|
.flex.text-xm.flex-col.gap-y-3.mt-1 Критерии:
|
|
.flex.flex-col.gap-y-2
|
|
.grey-color.flex.font-medium.text-smm(v-for="item in choiceCriteria", :key="item.id") {{"- " + item}}
|
|
.flex.text-xm.flex-col.gap-y-3 Документы для подтверждения:
|
|
.flex.flex-col.gap-y-2
|
|
.grey-color.flex.font-medium.text-smm(v-for="item in choiceDocumentation", :key="item.id") {{"- " + item}}
|
|
.flex.text-xm.flex-col.gap-y-3 Льготы:
|
|
.flex.flex-col.gap-y-2
|
|
.grey-color.flex.font-medium.text-smm(v-for="item in choicePrivileges", :key="item.id") {{"- " + 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 BaseButton from "@/components/base/BaseButton.vue";
|
|
import BaseInput from "@/components/base/BaseInput.vue";
|
|
|
|
export default {
|
|
name: "BaseCategorySelection",
|
|
components: { BaseInput, BaseButton },
|
|
props: {
|
|
benefitData: Array,
|
|
shiftSelected: Function,
|
|
closeModalCategories: Function,
|
|
saveCategories: Function,
|
|
showModal: Boolean,
|
|
basic: Object,
|
|
},
|
|
data() {
|
|
return {
|
|
selected: {},
|
|
searchBenefit: "",
|
|
};
|
|
},
|
|
computed: {
|
|
choiceCriteria() {
|
|
return this.selected?.criteria.split(",");
|
|
},
|
|
choiceDocumentation() {
|
|
return this.selected?.documentation.split(",");
|
|
},
|
|
choicePrivileges() {
|
|
return this.selected?.privileges.split(",");
|
|
},
|
|
},
|
|
methods: {
|
|
findSelected(id) {
|
|
return this.basic?.id === id ? true : false;
|
|
},
|
|
searchCategory() {
|
|
this.$emit("search", this.searchBenefit);
|
|
},
|
|
},
|
|
watch: {
|
|
showModal: {
|
|
immediate: true,
|
|
handler(newVal) {
|
|
if (!newVal) {
|
|
this.searchBenefit = "";
|
|
} else {
|
|
this.selected = this.benefitData.find((e) => e.name === "Без льготы");
|
|
}
|
|
},
|
|
},
|
|
benefitData: {
|
|
immediate: true,
|
|
deep: true,
|
|
handler() {
|
|
if (this.benefitData && this.showModal && !this.basic.id) {
|
|
this.selected = this.benefitData.find((e) => e.name === "Без льготы");
|
|
} else if (this.basic.id) {
|
|
this.selected = this.benefitData.find((e) => e.id === this.basic.id);
|
|
}
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.selection-wrapper
|
|
width: 895px
|
|
height: 660px
|
|
font-feature-settings: 'pnum' on, 'lnum' on
|
|
color: var(--font-dark-blue-color)
|
|
|
|
.left-side
|
|
width: 364px
|
|
padding: 28px 32px 0px
|
|
|
|
.field
|
|
height: 456px
|
|
margin-right: -16px
|
|
&::-webkit-scrollbar
|
|
width: 4px
|
|
&::-webkit-scrollbar-track:vertical
|
|
margin-bottom: 24px
|
|
|
|
.filed-category
|
|
height: 100%
|
|
&::-webkit-scrollbar-track:vertical
|
|
margin-bottom: 16px
|
|
|
|
.name
|
|
min-height: 40px
|
|
padding-top: 8px
|
|
padding-bottom: 4px
|
|
border-bottom: 1px solid var(--bg-light-grey)
|
|
width: 264px
|
|
|
|
.q-checkbox :deep(.q-checkbox__bg)
|
|
border-radius: 50%
|
|
border: 1.5px solid var(--font-grey-color)
|
|
|
|
.buttons-group
|
|
border-top: 1px solid var(--bg-event-gret-color-2)
|
|
margin-left: -32px
|
|
margin-right: -32px
|
|
column-gap: 7px
|
|
|
|
.right-side
|
|
line-height: 135%
|
|
background: var(--default-white)
|
|
border-left: 1px solid var(--border-light-grey-color)
|
|
width: 531px
|
|
height: 100%
|
|
|
|
.right-header
|
|
padding: 27px 40px
|
|
margin-left: -40px
|
|
margin-right: -40px
|
|
border-bottom: 1px solid var(--border-light-grey-color)
|
|
|
|
.grey-color
|
|
color: var(--font-grey-color)
|
|
|
|
.q-item
|
|
padding: 0
|
|
min-height: 40px
|
|
|
|
.q-item__section
|
|
width: 32px
|
|
min-width: 32px
|
|
|
|
.q-item :deep(.q-focus-helper)
|
|
width: 0
|
|
height: 0
|
|
|
|
.input :deep(.q-field__native)
|
|
color: var(--font-grey-color)
|
|
font-size: 16px !important
|
|
font-style: normal
|
|
line-height: normal !important
|
|
|
|
.input :deep(.q-field__control)
|
|
color: var(--font-dark-blue-color)
|
|
&:hover:before
|
|
border: 1px solid var(--font-dark-blue-color)
|
|
&:after
|
|
border-width: 1px !important
|
|
|
|
.radio :deep(.q-icon)
|
|
font-size: 20px
|
|
|
|
.radio :deep(.q-radio__inner)
|
|
height: 24px
|
|
|
|
.search :deep(.q-field__prepend)
|
|
padding-right: 6px
|
|
</style>
|