106 lines
2.5 KiB
Vue
106 lines
2.5 KiB
Vue
<template lang="pug">
|
|
.flex.justify-between.w-full.h-fit
|
|
.flex.gap-2.w-fit.h-fit
|
|
.input
|
|
base-input(
|
|
:with-icon="true",
|
|
icon-position="left",
|
|
v-model="searchClient",
|
|
placeholder="Введите фамилию",
|
|
@keyup.enter="searchLastName",
|
|
outlined
|
|
)
|
|
.flex.items-center.cursor-pointer
|
|
.icon-search
|
|
q-btn(
|
|
v-if="createdClientName === ''",
|
|
@click="searchLastName",
|
|
color="primary",
|
|
label="Поиск",
|
|
padding="8px 24px",
|
|
no-caps
|
|
)
|
|
q-btn(
|
|
v-if="searchClient.length > 0",
|
|
outline,
|
|
@click="resetLastName",
|
|
color="primary",
|
|
label="Сбросить",
|
|
padding="8px 24px",
|
|
no-caps
|
|
)
|
|
//- clients-table-header-actions(v-if="!!isOpenActions", :is-selected-one="isOpenActions===1")
|
|
.flex.w-fit.h-10.gap-x-2
|
|
q-btn(
|
|
outline,
|
|
icon="icon-download",
|
|
color="primary",
|
|
size="12px",
|
|
padding="8px 24px",
|
|
)
|
|
q-btn(
|
|
@click="openForm",
|
|
color="primary",
|
|
icon="add",
|
|
label="Создать",
|
|
padding="6px 24px",
|
|
no-caps
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
import ClientsTableHeaderActions from "@/pages/clients/components/ClientsTableHeaderActions";
|
|
import BaseInput from "@/components/base/BaseInput";
|
|
import BaseButton from "@/components/base/BaseButton";
|
|
export default {
|
|
name: "ClientsTableHat",
|
|
components: {
|
|
BaseInput,
|
|
ClientsTableHeaderActions,
|
|
BaseButton,
|
|
},
|
|
props: {
|
|
openForm: Function,
|
|
isOpenActions: Number,
|
|
clearingTextSearch: Boolean,
|
|
changeClearingTextSearch: Function,
|
|
createdClientName: String,
|
|
},
|
|
data() {
|
|
return {
|
|
searchClient: "",
|
|
};
|
|
},
|
|
methods: {
|
|
searchLastName() {
|
|
if (this.searchClient.length >= 3 && !this.createdClientName)
|
|
this.$emit("search", this.searchClient);
|
|
},
|
|
resetLastName() {
|
|
this.searchClient = "";
|
|
},
|
|
},
|
|
watch: {
|
|
createdClientName() {
|
|
if (this.createdClientName) this.searchClient = this.createdClientName;
|
|
},
|
|
searchClient() {
|
|
if (!this.searchClient && !this.clearingTextSearch) {
|
|
this.$emit("search");
|
|
}
|
|
if (this.clearingTextSearch) this.changeClearingTextSearch();
|
|
},
|
|
clearingTextSearch() {
|
|
if (this.clearingTextSearch) {
|
|
this.searchClient = "";
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.input
|
|
min-width: 280px
|
|
</style>
|