WIP создал и интегрировал с беком карточку адреса формы создания, заменил кнопки на BaseButton
This commit is contained in:
@@ -9,7 +9,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import TheButtonSidebar from "@/components/base/buttons/BaseSidebarButton";
|
import TheButtonSidebar from "@/components/base/BaseSidebarButton";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "TheSidebar",
|
name: "TheSidebar",
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
button.base-button.text-base(
|
button.base-button.text-base(
|
||||||
:disabled="disabled",
|
: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'}"
|
:style="{height: size + 'px', minWidth: size + 'px'}"
|
||||||
)
|
)
|
||||||
.button-container
|
.button-container
|
||||||
@@ -23,7 +23,9 @@
|
|||||||
export default {
|
export default {
|
||||||
name: "BaseButton",
|
name: "BaseButton",
|
||||||
props: {
|
props: {
|
||||||
|
confirm: Boolean,
|
||||||
outlined: Boolean,
|
outlined: Boolean,
|
||||||
|
added: Boolean,
|
||||||
rounded: Boolean,
|
rounded: Boolean,
|
||||||
disabled: Boolean,
|
disabled: Boolean,
|
||||||
split: Boolean,
|
split: Boolean,
|
||||||
@@ -72,7 +74,6 @@ export default {
|
|||||||
&:disabled, &[disabled]
|
&:disabled, &[disabled]
|
||||||
background-color: var(--btn-blue-color-disabled)
|
background-color: var(--btn-blue-color-disabled)
|
||||||
border: 1px solid var(--btn-blue-color-disabled)
|
border: 1px solid var(--btn-blue-color-disabled)
|
||||||
|
|
||||||
.rounded
|
.rounded
|
||||||
padding: 0
|
padding: 0
|
||||||
border-radius: 50%
|
border-radius: 50%
|
||||||
@@ -94,6 +95,13 @@ export default {
|
|||||||
border: 1px solid var(--btn-blue-color-1)
|
border: 1px solid var(--btn-blue-color-1)
|
||||||
color: 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
|
.secondary
|
||||||
background-color: var(--btn-blue-sec-color)
|
background-color: var(--btn-blue-sec-color)
|
||||||
border: 1px solid 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)
|
border: 1px solid var(--btn-blue-sec-color)
|
||||||
color: var(--btn-blue-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
|
.button-container
|
||||||
display: flex
|
display: flex
|
||||||
gap: 8px
|
gap: 8px
|
||||||
|
|||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -3,10 +3,12 @@
|
|||||||
.section-header.flex.items-center.justify-between.pl-4.pr-3(:class="{small:settings[section].rowFlex}")
|
.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}}
|
span.text-sm.font-semibold.whitespace-nowrap {{settings[section].title}}
|
||||||
.flex.items-center.gap-x-8(v-if="isOpenChange")
|
.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")
|
.edit.icon-edit.cursor-pointer.text-sm(v-if="!isChange" @click="changeClientData")
|
||||||
.flex.relative
|
.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-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" )
|
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
|
.section-body.w-full.flex.flex-col.px-4.pt-3.pb-4.gap-y-4
|
||||||
@@ -28,8 +30,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import ClientDetailInput from "@/pages/clients/components/ClientDetailInput";
|
import ClientDetailInput from "@/pages/clients/components/ClientDetailInput";
|
||||||
import BaseButtonOk from "@/components/base/buttons/BaseButtonOk";
|
import BaseButton from "@/components/base/BaseButton";
|
||||||
import BaseButtonPlus from "@/components/base/buttons/BaseButtonPlus";
|
|
||||||
import TableAddingNewDoc from "@/pages/clients/components/TableAddingNewDoc";
|
import TableAddingNewDoc from "@/pages/clients/components/TableAddingNewDoc";
|
||||||
import TableAddingNewAdditional from "@/pages/clients/components/TableAddingNewAdditional";
|
import TableAddingNewAdditional from "@/pages/clients/components/TableAddingNewAdditional";
|
||||||
import { detail } from "@/pages/clients/utils/tableConfig";
|
import { detail } from "@/pages/clients/utils/tableConfig";
|
||||||
@@ -37,8 +38,7 @@ export default {
|
|||||||
name: "ClientDetailInfoSection",
|
name: "ClientDetailInfoSection",
|
||||||
components: {
|
components: {
|
||||||
TableAddingNewAdditional,
|
TableAddingNewAdditional,
|
||||||
BaseButtonPlus,
|
BaseButton,
|
||||||
BaseButtonOk,
|
|
||||||
ClientDetailInput,
|
ClientDetailInput,
|
||||||
TableAddingNewDoc,
|
TableAddingNewDoc,
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
span.title.text-xl.font-bold.px-4 Создание клиента
|
span.title.text-xl.font-bold.px-4 Создание клиента
|
||||||
.flex.gap-x-4.h-fit.px-4
|
.flex.gap-x-4.h-fit.px-4
|
||||||
.flex.gap-x-3.w-full
|
.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
|
.icon-download.text-xl
|
||||||
base-input.w-full(v-model:value="infoClient.basic.full_name" placeholder="ФИО*")
|
base-input.w-full(v-model:value="infoClient.basic.full_name" placeholder="ФИО*")
|
||||||
.flex.flex-col.flex-auto.l.gap-y-8
|
.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 FormCreateAdditional from "@/pages/clients/components/FormCreateAdditional";
|
||||||
import BaseInput from "@/components/base/BaseInput";
|
import BaseInput from "@/components/base/BaseInput";
|
||||||
import BaseSelect from "@/components/base/BaseSelect";
|
import BaseSelect from "@/components/base/BaseSelect";
|
||||||
|
import BaseButton from "@/components/base/BaseButton";
|
||||||
export default {
|
export default {
|
||||||
name: "ClientsFormCreate",
|
name: "ClientsFormCreate",
|
||||||
components: {
|
components: {
|
||||||
@@ -47,6 +48,7 @@ export default {
|
|||||||
FormCreateIdentityDocuments,
|
FormCreateIdentityDocuments,
|
||||||
FormCreateAddresses,
|
FormCreateAddresses,
|
||||||
FormCreateAdditional,
|
FormCreateAdditional,
|
||||||
|
BaseButton,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
closeForm: Function,
|
closeForm: Function,
|
||||||
@@ -96,8 +98,13 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
addresses: {
|
addresses: {
|
||||||
actualPlace: "",
|
full_address: "",
|
||||||
registrationPlace: "",
|
region: "",
|
||||||
|
city: "",
|
||||||
|
street: "",
|
||||||
|
house_number: "",
|
||||||
|
apartment_number: "",
|
||||||
|
index_of_address: "",
|
||||||
},
|
},
|
||||||
additional: [
|
additional: [
|
||||||
{
|
{
|
||||||
@@ -138,7 +145,22 @@ export default {
|
|||||||
"Content-Type": "application/json;charset=utf-8",
|
"Content-Type": "application/json;charset=utf-8",
|
||||||
},
|
},
|
||||||
body: JSON.stringify({
|
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,
|
person_id: id,
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
@@ -159,7 +181,20 @@ export default {
|
|||||||
}),
|
}),
|
||||||
})
|
})
|
||||||
.then((res) => res.json())
|
.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) {
|
saveNetworkId(e) {
|
||||||
this.networkId = e.currentTarget.id;
|
this.networkId = e.currentTarget.id;
|
||||||
|
|||||||
@@ -8,23 +8,21 @@
|
|||||||
.icon-filter.text-xl.leading-4
|
.icon-filter.text-xl.leading-4
|
||||||
clients-table-header-actions(v-if="!!isOpenActions" :is-selected-one="isOpenActions===1")
|
clients-table-header-actions(v-if="!!isOpenActions" :is-selected-one="isOpenActions===1")
|
||||||
.flex.w-fit.h-fit.gap-x-2
|
.flex.w-fit.h-fit.gap-x-2
|
||||||
base-export-button(:only-icon="true")
|
base-button(left-icon="icon-download" :icon-left-size="16" :size="40" :outlined="true")
|
||||||
base-create-button(@click="openFormCreate" :with-icon="true")
|
base-button(left-icon="icon-plus" :icon-left-size="13" :size="40" @click="openFormCreate")
|
||||||
|
span.font-semibold Создать
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import ClientsTableHeaderActions from "@/pages/clients/components/ClientsTableHeaderActions";
|
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 BaseInput from "@/components/base/BaseInput";
|
||||||
|
import BaseButton from "@/components/base/BaseButton";
|
||||||
export default {
|
export default {
|
||||||
name: "ClientsTableHat",
|
name: "ClientsTableHat",
|
||||||
components: {
|
components: {
|
||||||
BaseInput,
|
BaseInput,
|
||||||
BaseExportButton,
|
|
||||||
BaseCreateButton,
|
|
||||||
ClientsTableHeaderActions,
|
ClientsTableHeaderActions,
|
||||||
|
BaseButton,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
openFormCreate: Function,
|
openFormCreate: Function,
|
||||||
|
|||||||
@@ -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-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")
|
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
|
.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")
|
.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")
|
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")
|
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 ClientsActionPopup from "@/pages/clients/components/ClientsActionPopup";
|
||||||
import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
|
import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
|
||||||
import ClientDetailInfoWrapper from "@/pages/clients/components/ClientDetailInfoWrapper";
|
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";
|
import { column } from "@/pages/clients/utils/tableConfig";
|
||||||
export default {
|
export default {
|
||||||
name: "ClientsTableRow",
|
name: "ClientsTableRow",
|
||||||
components: {
|
components: {
|
||||||
|
BaseButton,
|
||||||
ClientsTableCheckbox,
|
ClientsTableCheckbox,
|
||||||
ClientsActionPopup,
|
ClientsActionPopup,
|
||||||
TableCellBodyName,
|
TableCellBodyName,
|
||||||
@@ -44,7 +46,6 @@ export default {
|
|||||||
TableCellBodyNetworks,
|
TableCellBodyNetworks,
|
||||||
TableCellBodyMeeting,
|
TableCellBodyMeeting,
|
||||||
ClientDetailInfoWrapper,
|
ClientDetailInfoWrapper,
|
||||||
BaseButtonOk,
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@@ -214,7 +215,6 @@ export default {
|
|||||||
data.identity_documents.find((el) => el.kind === "Паспорт")
|
data.identity_documents.find((el) => el.kind === "Паспорт")
|
||||||
);
|
);
|
||||||
this.saveAddress(data.address[0]);
|
this.saveAddress(data.address[0]);
|
||||||
console.log(this.dataIdentityDocument);
|
|
||||||
},
|
},
|
||||||
saveIdentityDocument(data) {
|
saveIdentityDocument(data) {
|
||||||
this.dataIdentityDocument = {
|
this.dataIdentityDocument = {
|
||||||
|
|||||||
@@ -16,15 +16,16 @@
|
|||||||
.icon-plus
|
.icon-plus
|
||||||
span Добавить еще пункт
|
span Добавить еще пункт
|
||||||
.px-4
|
.px-4
|
||||||
base-create-button(@click="saveClient" text="Создать клиента")
|
base-button(@click="saveClient" :size="40")
|
||||||
|
span.font-semibold Создать клиента
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import BaseInput from "@/components/base/BaseInput";
|
import BaseInput from "@/components/base/BaseInput";
|
||||||
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
|
import BaseButton from "@/components/base/BaseButton";
|
||||||
export default {
|
export default {
|
||||||
name: "FormCreateAdditional",
|
name: "FormCreateAdditional",
|
||||||
components: { BaseCreateButton, BaseInput },
|
components: { BaseInput, BaseButton },
|
||||||
props: {
|
props: {
|
||||||
additionalInfo: Object,
|
additionalInfo: Object,
|
||||||
saveClient: Function,
|
saveClient: Function,
|
||||||
|
|||||||
@@ -1,24 +1,42 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
.wrapper-addresses.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
|
.wrapper-addresses.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
|
||||||
.flex.flex-col.gap-y-6.px-4
|
.flex.flex-col.gap-y-6.px-4
|
||||||
span.title-info.text-base.font-bold Адреса
|
.flex.flex-col.col-start-1.col-end-3(class="gap-y-1.5")
|
||||||
.grid.grid-cols-2.gap-x-4.gap-y-6
|
span.text-sm.font-semibold Полный адрес
|
||||||
.flex.flex-col.col-start-1.col-end-3(class="gap-y-1.5")
|
base-input.input-info(v-model:value="addresses.full_address" placeholder="Введите адрес целиком")
|
||||||
span.text-sm Адрес постоянной регистрации
|
.flex.items-center.justify-center.relative
|
||||||
base-input.input-info(v-model:value="addresses.actualPlace" placeholder="Место регистрации (в паспорте)")
|
.line.absolute
|
||||||
.flex.flex-col.col-start-1.col-end-3(class="gap-y-1.5")
|
span.text-sm.separator.px-2 или
|
||||||
span.text-sm Адрес фактического проживания
|
.grid.grid-cols-2.gap-y-6.gap-x-4
|
||||||
base-input.input-info(v-model:value="addresses.registrationPlace" placeholder="Место проживания на данный момент")
|
.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
|
.px-4
|
||||||
base-create-button(text="Создать клиента" @click="saveClient")
|
base-button(@click="saveClient" :size="40")
|
||||||
|
span.font-semibold Создать клиента
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import BaseButton from "@/components/base/BaseButton";
|
||||||
import BaseInput from "@/components/base/BaseInput";
|
import BaseInput from "@/components/base/BaseInput";
|
||||||
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
|
|
||||||
export default {
|
export default {
|
||||||
name: "FormCreateAddresses",
|
name: "FormCreateAddresses",
|
||||||
components: { BaseCreateButton, BaseInput },
|
components: { BaseInput, BaseButton },
|
||||||
props: {
|
props: {
|
||||||
addresses: Object,
|
addresses: Object,
|
||||||
saveClient: Function,
|
saveClient: Function,
|
||||||
@@ -45,4 +63,12 @@ export default {
|
|||||||
color: var(--font-dark-blue-color)
|
color: var(--font-dark-blue-color)
|
||||||
.title-info
|
.title-info
|
||||||
color: var(--font-dark-blue-color)
|
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>
|
</style>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
.grid.grid-cols-2.gap-x-4.gap-y-6.px-4
|
.grid.grid-cols-2.gap-x-4.gap-y-6.px-4
|
||||||
.flex.flex-col(class="gap-y-1.5")
|
.flex.flex-col(class="gap-y-1.5")
|
||||||
span.text-sm Приоритет
|
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")
|
.flex.flex-col(class="gap-y-1.5")
|
||||||
span.text-sm Дата рождения
|
span.text-sm Дата рождения
|
||||||
span.obligatory *
|
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")
|
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") Добавить соцсеть
|
span.add-network.cursor-pointer(v-show="networks.settings.length !== basicInfo.contacts.length" @click="addNetwork") Добавить соцсеть
|
||||||
.px-4
|
.px-4
|
||||||
base-create-button(text="Создать клиента" @click="saveClient")
|
base-button(@click="saveClient" :size="40")
|
||||||
|
span.font-semibold Создать клиента
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
|
import BaseButton from "@/components/base/BaseButton";
|
||||||
import BaseInput from "@/components/base/BaseInput";
|
import BaseInput from "@/components/base/BaseInput";
|
||||||
import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
|
import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
|
||||||
import BaseSelect from "@/components/base/BaseSelect";
|
import BaseSelect from "@/components/base/BaseSelect";
|
||||||
import { column } from "@/pages/clients/utils/tableConfig";
|
import { column } from "@/pages/clients/utils/tableConfig";
|
||||||
export default {
|
export default {
|
||||||
name: "FormCreateBasicInfo",
|
name: "FormCreateBasicInfo",
|
||||||
components: { BaseInput, BaseCreateButton, BaseAddingNetwork, BaseSelect },
|
components: {
|
||||||
|
BaseInput,
|
||||||
|
BaseAddingNetwork,
|
||||||
|
BaseSelect,
|
||||||
|
BaseButton,
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
choosePriority: Function,
|
choosePriority: Function,
|
||||||
priorityList: Array,
|
priorityList: Array,
|
||||||
|
|||||||
@@ -25,15 +25,16 @@
|
|||||||
span.text-sm Номер ИНН
|
span.text-sm Номер ИНН
|
||||||
base-input.input-info(v-model:value="identityDocument.inn.numba" placeholder="000000000000" :width-input="277")
|
base-input.input-info(v-model:value="identityDocument.inn.numba" placeholder="000000000000" :width-input="277")
|
||||||
.px-4
|
.px-4
|
||||||
base-create-button(text="Создать клиента" @click="saveClient")
|
base-button(@click="saveClient" :size="40")
|
||||||
|
span.font-semibold Создать клиента
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
|
import BaseButton from "@/components/base/BaseButton";
|
||||||
import BaseInput from "@/components/base/BaseInput";
|
import BaseInput from "@/components/base/BaseInput";
|
||||||
export default {
|
export default {
|
||||||
name: "FormCreateIdentityDocuments",
|
name: "FormCreateIdentityDocuments",
|
||||||
components: { BaseCreateButton, BaseInput },
|
components: { BaseInput, BaseButton },
|
||||||
props: {
|
props: {
|
||||||
identityDocument: Object,
|
identityDocument: Object,
|
||||||
saveClient: Function,
|
saveClient: Function,
|
||||||
|
|||||||
@@ -13,15 +13,16 @@
|
|||||||
span Загрузите элемент
|
span Загрузите элемент
|
||||||
label.label.cursor-pointer(for="file-upload") с компьютера
|
label.label.cursor-pointer(for="file-upload") с компьютера
|
||||||
span или перетащите их сюда
|
span или перетащите их сюда
|
||||||
base-create-button(text="Добавить" @click="saveAdditional")
|
base-button(@click="saveAdditional" :size="40")
|
||||||
|
span.font-semibold Добавить
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
|
|
||||||
import BaseInput from "@/components/base/BaseInput";
|
import BaseInput from "@/components/base/BaseInput";
|
||||||
|
import BaseButton from "@/components/base/BaseButton";
|
||||||
export default {
|
export default {
|
||||||
name: "TableAddingNewAdditional",
|
name: "TableAddingNewAdditional",
|
||||||
components: { BaseInput, BaseCreateButton },
|
components: { BaseInput, BaseButton },
|
||||||
props: {
|
props: {
|
||||||
addNewAdditional: Function,
|
addNewAdditional: Function,
|
||||||
saveAdditional: Function,
|
saveAdditional: Function,
|
||||||
|
|||||||
@@ -11,14 +11,15 @@
|
|||||||
span или перетащите их сюда
|
span или перетащите их сюда
|
||||||
.flex.flex-col
|
.flex.flex-col
|
||||||
span.name-doc.py-2.px-3(v-for="doc in newDocs") {{doc.name}}
|
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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
|
import BaseButton from "@/components/base/BaseButton";
|
||||||
export default {
|
export default {
|
||||||
name: "TableAddingNewDoc",
|
name: "TableAddingNewDoc",
|
||||||
components: { BaseCreateButton },
|
components: { BaseButton },
|
||||||
props: {
|
props: {
|
||||||
addNewDoc: Function,
|
addNewDoc: Function,
|
||||||
saveDocs: Function,
|
saveDocs: Function,
|
||||||
|
|||||||
@@ -3,26 +3,27 @@
|
|||||||
.flex.gap-x-1
|
.flex.gap-x-1
|
||||||
.text-xl.icon.relative(v-for="network in getNetworks" :class="settings.settings.find((el) => el.network === network.kind)?.icon || ''")
|
.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)")
|
.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
|
.flex.relative.pb-2(class="pl-[46px]")
|
||||||
base-button-plus.ml-3(v-if="isOpenChange && settings.settings.length !== getNetworks.length" :with-border="true" @click="openPopupAdding")
|
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-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-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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
|
|
||||||
import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
|
import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
|
||||||
import BasePopup from "@/components/base/BasePopup";
|
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";
|
import { column } from "@/pages/clients/utils/tableConfig";
|
||||||
export default {
|
export default {
|
||||||
name: "TableCellBodyNetworks",
|
name: "TableCellBodyNetworks",
|
||||||
components: {
|
components: {
|
||||||
BaseButtonPlus,
|
|
||||||
BasePopup,
|
BasePopup,
|
||||||
BaseAddingNetwork,
|
BaseAddingNetwork,
|
||||||
BaseCreateButton,
|
BaseButton,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
networks: {
|
networks: {
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
.dot.w-2.h-2(:style="{ backgroundColor : settings.settings.find((el) => el.priority == value).color }")
|
.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}}
|
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
|
.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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -20,6 +20,12 @@ export default {
|
|||||||
selectData: ["Высокий", "Средний", "Низкий", "-"],
|
selectData: ["Высокий", "Средний", "Низкий", "-"],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
getOption() {
|
||||||
|
return this.settings.settings.find((el) => el.priority == this.value)
|
||||||
|
.text;
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user