103 lines
2.5 KiB
Vue
103 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.search(
|
|
v-model="searchClient",
|
|
placeholder="Введите фамилию",
|
|
@keyup.enter="searchLastName",
|
|
size="M",
|
|
:width="280",
|
|
:icon-left="!searchClient"
|
|
)
|
|
template(v-slot:iconLeft, v-if="!searchClient")
|
|
q-icon(name="app:search", size="18px")
|
|
base-button(
|
|
v-if="createdClientName === ''",
|
|
@click="searchLastName",
|
|
label="Поиск",
|
|
width="96px"
|
|
)
|
|
base-button(
|
|
v-if="searchClient.length > 0",
|
|
type="secondary",
|
|
@click="resetLastName",
|
|
label="Сбросить",
|
|
width="124px"
|
|
)
|
|
//- clients-table-header-actions(v-if="!!isOpenActions", :is-selected-one="isOpenActions===1")
|
|
.flex.w-fit.h-10.gap-x-2
|
|
base-button(
|
|
type="secondary",
|
|
width="64px"
|
|
)
|
|
q-icon(name="app:export", size="16px")
|
|
base-button(
|
|
@click="openForm",
|
|
width="144px"
|
|
)
|
|
q-icon(name="app:plus", size="12px", left)
|
|
span Создать
|
|
</template>
|
|
|
|
<script>
|
|
import ClientsTableHeaderActions from "@/pages/clients/components/ClientsTableHeaderActions";
|
|
import BaseButton from "@/components/base/BaseButton.vue";
|
|
import BaseInput from "@/components/base/BaseInput.vue";
|
|
|
|
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
|
|
.on-left
|
|
margin-right: 10px
|
|
.search :deep(.q-field__prepend)
|
|
padding-right: 6px !important
|
|
</style>
|