Добавил одно окно создание клиента для двух кнопок

This commit is contained in:
megavrilinvv
2022-11-16 18:10:47 +03:00
parent 49ef6e22c3
commit 6f78177452
9 changed files with 36 additions and 90 deletions

View File

@@ -1,9 +1,9 @@
<template lang="pug">
.flex.flex-col.w-full.h-full.gap-y-2
the-header(:is-open-create-client="isOpenCreateClient", @is-close-header-form="changeCloseHeaderForm")
the-header(:is-open-form="isOpenForm", :close-form="closeForm", :open-form="openForm")
.flex.flex-auto
the-sidebar
router-view(@create-client="transmitOpenCreateClient", :is-close-header-form="isCloseHeaderForm")
router-view(:open-form="openForm")
</template>
<script>
@@ -15,16 +15,15 @@ export default {
components: { TheHeader, TheSidebar },
data() {
return {
isOpenCreateClient: false,
isCloseHeaderForm: true,
isOpenForm: false,
};
},
methods: {
transmitOpenCreateClient(value) {
this.isOpenCreateClient = value;
openForm() {
this.isOpenForm = true;
},
changeCloseHeaderForm(value) {
this.isCloseHeaderForm = value;
closeForm() {
this.isOpenForm = false;
},
},
};

View File

@@ -1,6 +1,6 @@
<template lang="pug">
.header-wrapper.relative.flex.justify-center.box-border.py-2.pl-4_75px.pr-6
base-client-form-create(v-if="this.isOpenCreateClient || this.isOpenFormCreate", :close-form="closeFormCreate")
base-client-form-create(v-if="isOpenForm", :close-form="closeForm")
.flex.items-center.box-border.cursor-pointer.mr-auto
img.logo-img.mr-29_25px(src="@/assets/images/logo.svg", alt="Logo")
header-inputs
@@ -13,7 +13,7 @@
:size="40",
right-icon="icon-person",
:icon-right-size="18",
@click="openFormCreate"
@click="openForm"
)
button.header-buttons.flex.justify-center.items-center.mr-8.p-0(@click="logout")
.icon-bell.text-xxl
@@ -35,7 +35,9 @@ export default {
name: "TheHeader",
components: { HeaderInputs, BaseAvatar, BaseButton, BaseClientFormCreate },
props: {
isOpenCreateClient: Boolean,
openForm: Function,
closeForm: Function,
isOpenForm: Boolean,
},
data() {
return {
@@ -44,18 +46,9 @@ export default {
avatarSrc: chargePersonAvatar,
name: "Гордеев Николай Степанович",
},
isOpenFormCreate: false,
};
},
methods: {
closeFormCreate() {
this.isOpenFormCreate = false;
this.$emit("is-close-header-form", this.isOpenFormCreate);
},
openFormCreate() {
this.isOpenFormCreate = true;
this.$emit("is-close-header-from", this.isOpenFormCreate);
},
logout() {
localStorage.clear();
this.$router.push("/login");

View File

@@ -20,7 +20,7 @@
:save-client="saveClient"
:choose-option="chooseOptionNetworks"
:choose-priority="choosePriority"
:priority-list="getPriorityList"
:priority-list="priorityList"
:current-year="currentYear"
)
.flex(:style="{display :'none'}" ref="doc")
@@ -75,7 +75,10 @@ export default {
basic: {
full_name: "",
birth_date: "",
priority: "",
priority: {
id: null,
label: "",
},
contacts: [
{
id: "network",
@@ -146,19 +149,19 @@ export default {
],
priorityList: [
{
id: "1",
id: 1,
label: "Высокий",
},
{
id: "2",
id: 2,
label: "Средний",
},
{
id: "3",
id: 3,
label: "Низкий",
},
{
id: "4",
id: 4,
label: "-",
},
],

View File

@@ -1,5 +1,5 @@
<template lang="pug">
clients-wrapper(@create-client="transmitOpenCreateForm", :is-close-header-form="isCloseHeaderForm")
clients-wrapper(:open-form="openForm")
</template>
<script>
@@ -8,12 +8,7 @@ export default {
name: "TheClients",
components: { ClientsWrapper },
props: {
isCloseHeaderForm: Boolean,
},
methods: {
transmitOpenCreateForm(value) {
this.$emit("create-client", value);
},
openForm: Function,
},
};
</script>

View File

@@ -1,7 +1,6 @@
<template lang="pug">
.wrapper-table.relative.flex.flex-col.gap-y-8.px-6.py-6.h-full.w-full
//- base-client-form-create(v-if="isOpenFormCreate" :close-form="closeFormCreateClient")
clients-table-hat(:is-open-actions="marked.length" :open-form-create="openFormCreateClient")
clients-table-hat(:is-open-actions="marked.length" :open-form="openForm")
.flex.flex-col.h-full.gap-y-2.table-container.w-full
clients-table-header(:check="selectedCheck" :is-check="selectAll")
.flex.flex-col
@@ -33,7 +32,7 @@ export default {
BaseClientFormCreate,
},
props: {
isCloseHeaderForm: Boolean,
openForm: Function,
},
data() {
@@ -42,19 +41,9 @@ export default {
selectAll: false,
marked: [],
dataClients: [],
isOpen: false,
};
},
methods: {
openFormCreateClient() {
this.isOpenFormCreate = true;
this.$emit("create-client", this.isOpenFormCreate);
},
closeFormCreateClient() {
this.isOpenFormCreate = false;
this.$emit("create-client", this.isOpenFormCreate);
this.fetchDataClients();
},
saveDataClients(data) {
this.dataClients = data.results;
},
@@ -86,16 +75,6 @@ export default {
mounted() {
this.fetchDataClients();
},
watch: {
isCloseHeaderForm: {
immediate: true,
handler(newValue) {
if (newValue === false) {
this.closeFormCreateClient();
}
},
},
},
};
</script>

View File

@@ -9,7 +9,7 @@
clients-table-header-actions(v-if="!!isOpenActions" :is-selected-one="isOpenActions===1")
.flex.w-fit.h-fit.gap-x-2
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")
base-button(left-icon="icon-plus" :icon-left-size="13" :size="40" @click="openForm")
span.font-semibold Создать
</template>
@@ -25,7 +25,7 @@ export default {
BaseButton,
},
props: {
openFormCreate: Function,
openForm: Function,
isOpenActions: Number,
},
};

View File

@@ -1,10 +1,6 @@
<template lang="pug">
.wrapper.flex.w-full.relative.mx-6
clients-table(
:open-form-create="openFormCreateClient",
@create-client="transmitOpenCreateForm",
:is-close-header-form="isCloseHeaderForm"
)
clients-table(:open-form="openForm")
</template>
<script>
@@ -13,23 +9,7 @@ export default {
name: "ClientsWrapper",
components: { ClientsTable },
props: {
isCloseHeaderForm: Boolean,
},
data() {
return {
isOpenForm: true,
};
},
methods: {
openFormCreateClient() {
this.isOpenForm = true;
},
closeFormCreateClient() {
this.isOpenForm = false;
},
transmitOpenCreateForm(value) {
this.$emit("create-client", value);
},
openForm: Function,
},
};
</script>

View File

@@ -11,12 +11,9 @@
.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(placeholder="Выберите город", :items="cities")
.flex.flex-col(class="gap-y-1.5")
.text-info.text-xxs.font-semibold Город
base-select(
base-custom-select(
placeholder="Выберите город",
:items="cities",
v-model="currentCity"
@@ -44,11 +41,11 @@
<script>
import BaseButton from "@/components/base/BaseButton";
import BaseInput from "@/components/base/BaseInput";
import BaseSelect from "@/components/base/BaseSelect";
import BaseCustomSelect from "@/components/base/BaseCustomSelect";
import { mask } from "vue-the-mask";
export default {
name: "FormCreateAddresses",
components: { BaseInput, BaseButton, BaseSelect },
components: { BaseInput, BaseButton, BaseCustomSelect },
props: {
addresses: Object,
saveClient: Function,
@@ -57,7 +54,7 @@ export default {
directives: { mask },
data() {
return {
currentCity: "",
currentCity: { id: null, label: "" },
cities: [
{ id: 1, label: "Владивосток" },
{ id: 2, label: "Москва" },

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(
base-custom-select(
:items="priorityList",
placeholder="Приоритет клиента",
v-model="basicInfo.priority"
@@ -55,14 +55,14 @@ import BaseButton from "@/components/base/BaseButton";
import BaseInput from "@/components/base/BaseInput";
import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
import { column } from "@/pages/clients/utils/tableConfig";
import BaseSelect from "@/components/base/BaseSelect";
import BaseCustomSelect from "@/components/base/BaseCustomSelect";
export default {
name: "FormCreateBasicInfo",
components: {
BaseInput,
BaseAddingNetwork,
BaseButton,
BaseSelect,
BaseCustomSelect,
},
props: {
choosePriority: Function,