WIP создал и интегрировал с беком карточку адреса формы создания, заменил кнопки на BaseButton

This commit is contained in:
DwCay
2022-11-02 15:58:59 +03:00
parent a720f73bed
commit ec5ee3aaa5
20 changed files with 155 additions and 246 deletions

View File

@@ -9,7 +9,7 @@
</template>
<script>
import TheButtonSidebar from "@/components/base/buttons/BaseSidebarButton";
import TheButtonSidebar from "@/components/base/BaseSidebarButton";
export default {
name: "TheSidebar",

View File

@@ -1,7 +1,7 @@
<template lang="pug">
button.base-button.text-base(
:disabled="disabled",
:class="{'rounded': rounded, 'outlined': outlined, 'secondary': secondary}"
:class="{'rounded': rounded, 'outlined': outlined, 'secondary': secondary, 'confirm': confirm, 'added': added}"
:style="{height: size + 'px', minWidth: size + 'px'}"
)
.button-container
@@ -23,7 +23,9 @@
export default {
name: "BaseButton",
props: {
confirm: Boolean,
outlined: Boolean,
added: Boolean,
rounded: Boolean,
disabled: Boolean,
split: Boolean,
@@ -72,7 +74,6 @@ export default {
&:disabled, &[disabled]
background-color: var(--btn-blue-color-disabled)
border: 1px solid var(--btn-blue-color-disabled)
.rounded
padding: 0
border-radius: 50%
@@ -94,6 +95,13 @@ export default {
border: 1px solid var(--btn-blue-color-1)
color: var(--btn-blue-color-1)
.added
border: 2px solid var(--btn-blue-color)
&:hover
border: none
background-color: var(--btn-blue-color)
color: var(--default-white)
.secondary
background-color: var(--btn-blue-sec-color)
border: 1px solid var(--btn-blue-sec-color)
@@ -107,6 +115,17 @@ export default {
border: 1px solid var(--btn-blue-sec-color)
color: var(--btn-blue-color)
.confirm
border-color: var(--btn-blue-color)
border: 2px solid var(--btn-blue-color)
&:hover
border: none
background-color: var(--btn-blue-color)
color: var(--default-white)
&:active
background-color: var(--btn-light-green-color)
color: var(--btn-green-color)
.button-container
display: flex
gap: 8px

View File

@@ -1,45 +0,0 @@
<template lang="pug">
button.button-ok.flex.items-center.justify-center.cursor-pointer.text-xs.box-border(:style="{width:size + 'px', height:size + 'px'}" :class="{change:darkStyle}")
.flex.w-fit.h-fit
span.icon-ok.leading-none(:style="{fontSize:iconSize + 'px'}")
</template>
<script>
export default {
name: "BaseButtonOk",
props: {
size: {
default: 24,
},
iconSize: {
default: 14,
},
darkStyle: {
default: false,
},
},
};
</script>
<style lang="sass" scoped>
.button-ok
color: var(--btn-blue-color)
border: 1.5px solid var(--btn-blue-color-3)
border-radius: 50%
&:hover
border: none
background-color: var(--btn-blue-color-3)
&:active
border: none
background-color: var(--btn-light-green-color)
color: var(--btn-green-color)
.change
border-color: var(--btn-blue-color)
&:hover
border: none
background-color: var(--btn-blue-color)
color: var(--default-white)
&:active
background-color: var(--btn-light-green-color)
color: var(--btn-green-color)
</style>

View File

@@ -1,38 +0,0 @@
<template lang="pug">
button.flex.items-center.justify-center.cursor-pointer.button-plus.text-xs.box-border(:style="{width:size + 'px', height:size + 'px'}" :class="{change:withBorder}")
.flex.w-fit.h-fit
span.icon-plus.leading-none(:style="{fontSize:iconSize + 'px'}")
</template>
<script>
export default {
name: "BaseButtonPlus",
props: {
size: {
default: 24,
},
iconSize: {
default: 14,
},
withBorder: {
default: false,
},
},
};
</script>
<style lang="sass" scoped>
.button-plus
outline: none
border: none
color: var(--btn-blue-color)
border-radius: 50%
.change
background-color: var(--btn-blue-color-0)
color: var(--btn-blue-color)
border: 1.5px solid var(--btn-blue-color)
&:hover
border: none
background-color: var(--btn-blue-color)
color: var(--default-white)
</style>

View File

@@ -1,54 +0,0 @@
<template lang="pug">
button.button.flex.w-fit.gap-x-2.text-base.pt-3.pb-2.px-6
.flex.text-xs.w-fit.pt-1(v-if="withIcon" :class="iconPosition")
span.icon-plus(:style="{fontSize:iconSize + 'px'}")
span.text-base.font-semibold(:class="textStyled") {{text}}
</template>
<script>
export default {
name: "BaseCreateButton",
props: {
text: {
default: "Создать",
},
withIcon: {
default: false,
},
iconPosition: {
default: "left",
},
iconSize: {
default: 13,
},
textStyled: {
default: "normal",
},
},
};
</script>
<style lang="sass" scoped>
.button
border: none
color: var(--default-white)
background-color: var(--btn-blue-color)
border-radius: 4px
&:hover
opacity: 0.7
&:active
opacity: 1
background-color: var(--font-dark-blue-color)
.left
order: -1
.right
order: 1
padding-top: 1px
border-left: 1px solid var(--bg-white-color-0)
padding-left: 14px
height: 24px
align-items: center
.createEvent
font-weight: 500
padding-right: 2px
</style>

View File

@@ -1,28 +0,0 @@
<template lang="pug">
button.button.flex.gap-x-2.px-6.box-border(class="py-2.5")
.icon-download.text(v-if="withIcon || onlyIcon")
span.text-base.font-semibold(v-if="!onlyIcon" ) Сохранить
</template>
<script>
export default {
name: "BaseExportButton",
props: {
withIcon: {
default: false,
},
onlyIcon: {
default: false,
},
},
};
</script>
<style lang="sass" scoped>
.button
border: 2px solid var(--btn-blue-color)
border-radius: 4px
color: var(--btn-blue-color)
&:hover
opacity: 0.7
</style>

View File

@@ -1,21 +0,0 @@
<template lang="pug">
button.cursor-pointer.icon-long-arrow.open-button.text-xs.pt-1
</template>
<script>
export default {
name: "OpenButton",
};
</script>
<style lang="sass" scoped>
.open-button
outline: none
border: none
width: 24px
height: 24px
max-height: 24px
color: var(--btn-blue-color)
background-color: var(--bg-ligth-blue-color)
border-radius: 50%
</style>

View File

@@ -3,10 +3,12 @@
.section-header.flex.items-center.justify-between.pl-4.pr-3(:class="{small:settings[section].rowFlex}")
span.text-sm.font-semibold.whitespace-nowrap {{settings[section].title}}
.flex.items-center.gap-x-8(v-if="isOpenChange")
base-button-ok(@click="saveChange" v-if="isChange" :size="20" :icon-size="10" :dark-style="true")
base-button(v-if="isChange" @click="saveChange" :confirm="true" :rounded="true" :outlined="true" :size="20")
.icon-ok.text-xsm(class="pt-[3px]")
.edit.icon-edit.cursor-pointer.text-sm(v-if="!isChange" @click="changeClientData")
.flex.relative
base-button-plus(v-if="settings[section].addFile" :size="20" :icon-size="10" :with-border="true" @click="openAddingWrap")
base-button(v-if="settings[section].addFile" @click="openAddingWrap" :rounded="true" :outlined="true" :added="true" :size="24")
.icon-plus(class="pt-[2px]")
table-adding-new-doc(v-if="section === 'docs' && isOpenAddingWrap" :add-new-doc="addNewDoc" :save-docs="saveDocs" :new-docs="docData")
table-adding-new-additional(v-if="section === 'additional' && isOpenAddingWrap" :new-additional-data="additionalData" :add-new-additional="addDocAdditional" :save-additional="saveDocs" )
.section-body.w-full.flex.flex-col.px-4.pt-3.pb-4.gap-y-4
@@ -28,8 +30,7 @@
<script>
import ClientDetailInput from "@/pages/clients/components/ClientDetailInput";
import BaseButtonOk from "@/components/base/buttons/BaseButtonOk";
import BaseButtonPlus from "@/components/base/buttons/BaseButtonPlus";
import BaseButton from "@/components/base/BaseButton";
import TableAddingNewDoc from "@/pages/clients/components/TableAddingNewDoc";
import TableAddingNewAdditional from "@/pages/clients/components/TableAddingNewAdditional";
import { detail } from "@/pages/clients/utils/tableConfig";
@@ -37,8 +38,7 @@ export default {
name: "ClientDetailInfoSection",
components: {
TableAddingNewAdditional,
BaseButtonPlus,
BaseButtonOk,
BaseButton,
ClientDetailInput,
TableAddingNewDoc,
},

View File

@@ -4,7 +4,7 @@
span.title.text-xl.font-bold.px-4 Создание клиента
.flex.gap-x-4.h-fit.px-4
.flex.gap-x-3.w-full
.export-avatar.cursor-pointer.flex.justify-center.items-center
base-button(:rounded="true" :secondary="true" :size="40")
.icon-download.text-xl
base-input.w-full(v-model:value="infoClient.basic.full_name" placeholder="ФИО*")
.flex.flex-col.flex-auto.l.gap-y-8
@@ -38,6 +38,7 @@ import FormCreateAddresses from "@/pages/clients/components/FormCreateAddresses"
import FormCreateAdditional from "@/pages/clients/components/FormCreateAdditional";
import BaseInput from "@/components/base/BaseInput";
import BaseSelect from "@/components/base/BaseSelect";
import BaseButton from "@/components/base/BaseButton";
export default {
name: "ClientsFormCreate",
components: {
@@ -47,6 +48,7 @@ export default {
FormCreateIdentityDocuments,
FormCreateAddresses,
FormCreateAdditional,
BaseButton,
},
props: {
closeForm: Function,
@@ -96,8 +98,13 @@ export default {
},
},
addresses: {
actualPlace: "",
registrationPlace: "",
full_address: "",
region: "",
city: "",
street: "",
house_number: "",
apartment_number: "",
index_of_address: "",
},
additional: [
{
@@ -138,7 +145,22 @@ export default {
"Content-Type": "application/json;charset=utf-8",
},
body: JSON.stringify({
...this.infoClient.identity_document.pass,
...this.filterDataEmptyProperty(
this.infoClient.identity_document.pass
),
person_id: id,
}),
});
},
createAddress(id) {
fetch("http://45.84.227.122:8080/general/address/create/", {
method: "POST",
headers: {
Accept: "*/*",
"Content-Type": "application/json;charset=utf-8",
},
body: JSON.stringify({
...this.filterDataEmptyProperty(this.infoClient.addresses),
person_id: id,
}),
});
@@ -159,7 +181,20 @@ export default {
}),
})
.then((res) => res.json())
.then((result) => this.createIdentityDocument(result.id));
.then((result) => {
this.createIdentityDocument(result.id);
this.createAddress(result.id);
});
},
filterDataEmptyProperty(data) {
let postData = data;
let keys = Object.keys(postData);
keys.forEach((key) => {
if (!postData[key]) {
delete postData[key];
}
});
return postData;
},
saveNetworkId(e) {
this.networkId = e.currentTarget.id;

View File

@@ -8,23 +8,21 @@
.icon-filter.text-xl.leading-4
clients-table-header-actions(v-if="!!isOpenActions" :is-selected-one="isOpenActions===1")
.flex.w-fit.h-fit.gap-x-2
base-export-button(:only-icon="true")
base-create-button(@click="openFormCreate" :with-icon="true")
base-button(left-icon="icon-download" :icon-left-size="16" :size="40" :outlined="true")
base-button(left-icon="icon-plus" :icon-left-size="13" :size="40" @click="openFormCreate")
span.font-semibold Создать
</template>
<script>
import ClientsTableHeaderActions from "@/pages/clients/components/ClientsTableHeaderActions";
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
import BaseExportButton from "@/components/base/buttons/BaseExportButton";
import BaseInput from "@/components/base/BaseInput";
import BaseButton from "@/components/base/BaseButton";
export default {
name: "ClientsTableHat",
components: {
BaseInput,
BaseExportButton,
BaseCreateButton,
ClientsTableHeaderActions,
BaseButton,
},
props: {
openFormCreate: Function,

View File

@@ -10,7 +10,8 @@
table-cell-body-email(:value="dataClient" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'email').width")
table-cell-body-networks(:delete-network="deleteNetwork" :add-network="addNetwork" :networks="dataClient.contacts" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'networks').width")
.dots.flex.justify-center.items-center
base-button-ok(v-if="isOpenChange" :size="20" :icon-size="10" :dark-style="true" @click="closeChangeData")
base-button(v-if="isOpenChange" @click="closeChangeData" :confirm="true" :rounded="true" :outlined="true" :size="20")
.icon-ok.text-xsm(class="pt-[3px]")
.relative.dots-button.icon-dots.cursor-pointer.leading-6.text-center(v-show="!isOpenChange" :tabindex="1" @click="(e) => openPopup(e)" @blur="handleUnFocusPopup")
clients-action-popup(v-if="isOpenPopup" :open-change-data="openChangeData")
client-detail-info-wrapper(v-if="isOpenDetailInfo" :data-address="dataAddress" :data-detail="dataDetail" :data-document="dataIdentityDocument" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc")
@@ -28,11 +29,12 @@ import TableCellBodyName from "@/pages/clients/components/cells/TableCellBodyNam
import ClientsActionPopup from "@/pages/clients/components/ClientsActionPopup";
import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
import ClientDetailInfoWrapper from "@/pages/clients/components/ClientDetailInfoWrapper";
import BaseButtonOk from "@/components/base/buttons/BaseButtonOk";
import BaseButton from "@/components/base/BaseButton";
import { column } from "@/pages/clients/utils/tableConfig";
export default {
name: "ClientsTableRow",
components: {
BaseButton,
ClientsTableCheckbox,
ClientsActionPopup,
TableCellBodyName,
@@ -44,7 +46,6 @@ export default {
TableCellBodyNetworks,
TableCellBodyMeeting,
ClientDetailInfoWrapper,
BaseButtonOk,
},
data() {
return {
@@ -214,7 +215,6 @@ export default {
data.identity_documents.find((el) => el.kind === "Паспорт")
);
this.saveAddress(data.address[0]);
console.log(this.dataIdentityDocument);
},
saveIdentityDocument(data) {
this.dataIdentityDocument = {

View File

@@ -16,15 +16,16 @@
.icon-plus
span Добавить еще пункт
.px-4
base-create-button(@click="saveClient" text="Создать клиента")
base-button(@click="saveClient" :size="40")
span.font-semibold Создать клиента
</template>
<script>
import BaseInput from "@/components/base/BaseInput";
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
import BaseButton from "@/components/base/BaseButton";
export default {
name: "FormCreateAdditional",
components: { BaseCreateButton, BaseInput },
components: { BaseInput, BaseButton },
props: {
additionalInfo: Object,
saveClient: Function,

View File

@@ -1,24 +1,42 @@
<template lang="pug">
.wrapper-addresses.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
.flex.flex-col.gap-y-6.px-4
span.title-info.text-base.font-bold Адреса
.grid.grid-cols-2.gap-x-4.gap-y-6
.flex.flex-col.col-start-1.col-end-3(class="gap-y-1.5")
span.text-sm Адрес постоянной регистрации
base-input.input-info(v-model:value="addresses.actualPlace" placeholder="Место регистрации (в паспорте)")
.flex.flex-col.col-start-1.col-end-3(class="gap-y-1.5")
span.text-sm Адрес фактического проживания
base-input.input-info(v-model:value="addresses.registrationPlace" placeholder="Место проживания на данный момент")
.flex.flex-col.col-start-1.col-end-3(class="gap-y-1.5")
span.text-sm.font-semibold Полный адрес
base-input.input-info(v-model:value="addresses.full_address" placeholder="Введите адрес целиком")
.flex.items-center.justify-center.relative
.line.absolute
span.text-sm.separator.px-2 или
.grid.grid-cols-2.gap-y-6.gap-x-4
.flex.flex-col(class="gap-y-1.5")
span.text-sm.font-semibold Город
base-input.input-info(v-model:value="addresses.city" placeholder="Ввыберите город")
.flex.flex-col(class="gap-y-1.5")
span.text-sm.font-semibold Область
base-input.input-info(v-model:value="addresses.region" placeholder="Введите область")
.flex.flex-col(class="gap-y-1.5")
span.text-sm.font-semibold Улица
base-input.input-info(v-model:value="addresses.street" placeholder="Введите улицу")
.flex.flex-col(class="gap-y-1.5")
span.text-sm.font-semibold Дом
base-input.input-info(v-model:value="addresses.house_number" placeholder="Номер дома")
.flex.flex-col(class="gap-y-1.5")
span.text-sm.font-semibold Квартира
base-input.input-info(v-model:value="addresses.apartment_number" placeholder="Номер квартиры")
.flex.flex-col(class="gap-y-1.5")
span.text-sm.font-semibold Индекс
base-input.input-info(v-model:value="addresses.index_of_address" placeholder="000000")
.px-4
base-create-button(text="Создать клиента" @click="saveClient")
base-button(@click="saveClient" :size="40")
span.font-semibold Создать клиента
</template>
<script>
import BaseButton from "@/components/base/BaseButton";
import BaseInput from "@/components/base/BaseInput";
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
export default {
name: "FormCreateAddresses",
components: { BaseCreateButton, BaseInput },
components: { BaseInput, BaseButton },
props: {
addresses: Object,
saveClient: Function,
@@ -45,4 +63,12 @@ export default {
color: var(--font-dark-blue-color)
.title-info
color: var(--font-dark-blue-color)
.line
width: 570px
height: 1px
background-color: var(--border-light-grey-color)
z-index: -1
.separator
color: var(--font-dark-blue-color)
background-color: var(--default-white)
</style>

View File

@@ -3,7 +3,7 @@
.grid.grid-cols-2.gap-x-4.gap-y-6.px-4
.flex.flex-col(class="gap-y-1.5")
span.text-sm Приоритет
base-select(:list-data="priorityList" :option-data="basicInfo.priority" placeholder="Приоритет клиента" :for-networks="false" :style-border="true" :choose-option="choosePriority" :size-input="22")
base-select(:list-data="priorityList" :option-data="basicInfo.priority" placeholder="Приоритет клиента" :for-networks="false" :style-border="true" :choose-option="choosePriority" :size-input="22" disabled)
.flex.flex-col(class="gap-y-1.5")
span.text-sm Дата рождения
span.obligatory *
@@ -22,18 +22,24 @@
base-adding-network(:list-adding-networks="networks.settings" :selected-option="network.icon" :value="network" :choose-network="chooseOption" :save-network-id="saveNetworkId")
span.add-network.cursor-pointer(v-show="networks.settings.length !== basicInfo.contacts.length" @click="addNetwork") Добавить соцсеть
.px-4
base-create-button(text="Создать клиента" @click="saveClient")
base-button(@click="saveClient" :size="40")
span.font-semibold Создать клиента
</template>
<script>
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
import BaseButton from "@/components/base/BaseButton";
import BaseInput from "@/components/base/BaseInput";
import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
import BaseSelect from "@/components/base/BaseSelect";
import { column } from "@/pages/clients/utils/tableConfig";
export default {
name: "FormCreateBasicInfo",
components: { BaseInput, BaseCreateButton, BaseAddingNetwork, BaseSelect },
components: {
BaseInput,
BaseAddingNetwork,
BaseSelect,
BaseButton,
},
props: {
choosePriority: Function,
priorityList: Array,

View File

@@ -25,15 +25,16 @@
span.text-sm Номер ИНН
base-input.input-info(v-model:value="identityDocument.inn.numba" placeholder="000000000000" :width-input="277")
.px-4
base-create-button(text="Создать клиента" @click="saveClient")
base-button(@click="saveClient" :size="40")
span.font-semibold Создать клиента
</template>
<script>
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
import BaseButton from "@/components/base/BaseButton";
import BaseInput from "@/components/base/BaseInput";
export default {
name: "FormCreateIdentityDocuments",
components: { BaseCreateButton, BaseInput },
components: { BaseInput, BaseButton },
props: {
identityDocument: Object,
saveClient: Function,

View File

@@ -13,15 +13,16 @@
span Загрузите элемент
label.label.cursor-pointer(for="file-upload") с компьютера
span или перетащите их сюда
base-create-button(text="Добавить" @click="saveAdditional")
base-button(@click="saveAdditional" :size="40")
span.font-semibold Добавить
</template>
<script>
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
import BaseInput from "@/components/base/BaseInput";
import BaseButton from "@/components/base/BaseButton";
export default {
name: "TableAddingNewAdditional",
components: { BaseInput, BaseCreateButton },
components: { BaseInput, BaseButton },
props: {
addNewAdditional: Function,
saveAdditional: Function,

View File

@@ -11,14 +11,15 @@
span или перетащите их сюда
.flex.flex-col
span.name-doc.py-2.px-3(v-for="doc in newDocs") {{doc.name}}
base-create-button(text="Добавить" @click="saveDocs")
base-button(@click="saveDocs" :size="40")
span.font-semibold Добавить
</template>
<script>
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
import BaseButton from "@/components/base/BaseButton";
export default {
name: "TableAddingNewDoc",
components: { BaseCreateButton },
components: { BaseButton },
props: {
addNewDoc: Function,
saveDocs: Function,

View File

@@ -3,26 +3,27 @@
.flex.gap-x-1
.text-xl.icon.relative(v-for="network in getNetworks" :class="settings.settings.find((el) => el.network === network.kind)?.icon || ''")
.absolute.icon-cancel-mini.delete.flex.w-4.h-4.justify-center.items-center.bottom-4.left-2(v-if="isOpenChange" :id="network.kind" @click="(e) => deleteNetwork(e)")
.flex.relative.pb-2
base-button-plus.ml-3(v-if="isOpenChange && settings.settings.length !== getNetworks.length" :with-border="true" @click="openPopupAdding")
.flex.relative.pb-2(class="pl-[46px]")
base-button(v-if="isOpenChange && settings.settings.length !== getNetworks.length" @click="openPopupAdding" :rounded="true" :outlined="true" :added="true" :size="24")
.icon-plus(class="pt-[2px]")
base-popup.right-3.top-6(v-if="isOpenPopupAdding" :width="485")
base-adding-network(:value="network" :selected-option="getSelectedIcon" :list-adding-networks="getAddingNetworks" :choose-network="chooseNetwork")
base-create-button(text="Добавить" @click="saveNetwork")
.w-fit
base-button(:size="40" @click="saveNetwork")
span.font-semibold Добавить
</template>
<script>
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
import BasePopup from "@/components/base/BasePopup";
import BaseButtonPlus from "@/components/base/buttons/BaseButtonPlus";
import BaseButton from "@/components/base/BaseButton";
import { column } from "@/pages/clients/utils/tableConfig";
export default {
name: "TableCellBodyNetworks",
components: {
BaseButtonPlus,
BasePopup,
BaseAddingNetwork,
BaseCreateButton,
BaseButton,
},
props: {
networks: {

View File

@@ -4,7 +4,7 @@
.dot.w-2.h-2(:style="{ backgroundColor : settings.settings.find((el) => el.priority == value).color }")
span.text-sm(:style="{ color : settings.settings.find((el) => el.priority == value).color }") {{settings.settings.find((el) => el.priority == value).text}}
.flex.gap-x-2.text-sm
base-select(v-if="isOpenChange" :width-select="120" :option-data="settings.settings.find((el) => el.priority == value).text" :list-data="selectData" :style-border="true" :choose-option="choosePriority")
base-select(v-if="isOpenChange" :size-input="10" :option-data="getOption" :list-data="selectData" :style-border="true" :choose-option="choosePriority" disabled)
</template>
<script>
@@ -20,6 +20,12 @@ export default {
selectData: ["Высокий", "Средний", "Низкий", "-"],
};
},
computed: {
getOption() {
return this.settings.settings.find((el) => el.priority == this.value)
.text;
},
},
};
</script>