93 lines
2.3 KiB
Vue
93 lines
2.3 KiB
Vue
<template lang="pug">
|
|
.header-wrapper.flex.w-full.justify-between.p-4
|
|
.flex.items-center.justify-center.gap-x-2
|
|
base-input.search(
|
|
:width="438",
|
|
size="M",
|
|
placeholder="Введите ФИО или номер телефона",
|
|
icon-left,
|
|
v-model="filterString"
|
|
)
|
|
template(#iconLeft)
|
|
q-icon.search-icon(name="app:search", size="20px")
|
|
base-button(width="216px", @click="showCreateModal = true")
|
|
q-icon.plus.mr-2(name="app:plus", size="24px")
|
|
span Создать медкарту
|
|
base-modal(v-model="showCreateModal", title="Создать медицинскую карту", modal-padding)
|
|
patient-creation-form(@close="handleClosePatientForm")
|
|
</template>
|
|
|
|
<script>
|
|
import BaseInput from "@/components/base/BaseInput.vue";
|
|
import BaseSelect from "@/components/base/BaseSelect.vue";
|
|
import BaseButton from "@/components/base/BaseButton.vue";
|
|
|
|
import debounce from "lodash/debounce";
|
|
import BaseModal from "@/components/base/BaseModal.vue";
|
|
import PatientCreationForm from "@/components/PatientCreationForm.vue";
|
|
import { mapActions } from "vuex";
|
|
export default {
|
|
name: "MedicalCardSearchHeader",
|
|
components: {
|
|
PatientCreationForm,
|
|
BaseModal,
|
|
BaseInput,
|
|
BaseSelect,
|
|
BaseButton,
|
|
},
|
|
emits: ["search"],
|
|
data() {
|
|
return {
|
|
filterString: "",
|
|
showCreateModal: false,
|
|
};
|
|
},
|
|
methods: {
|
|
handleClosePatientForm(val) {
|
|
this.showCreateModal = false;
|
|
if (!val) return;
|
|
this.getMedicalCardData({
|
|
personId: val.id,
|
|
successCallback: (id) => this.$router.push("medical-card/" + id),
|
|
});
|
|
},
|
|
...mapActions({
|
|
getMedicalCardData: "getMedicalCardDataByPersonId",
|
|
}),
|
|
},
|
|
watch: {
|
|
filterString: debounce(function (value) {
|
|
this.$emit("search", value);
|
|
}, 300),
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.header-wrapper
|
|
height: 72px
|
|
border-bottom: 1px solid var(--gray-secondary)
|
|
|
|
.search-icon :deep(path)
|
|
fill: var(--font-grey-color)
|
|
|
|
.search :deep(.q-field__prepend)
|
|
padding-right: 4px
|
|
|
|
.plus :deep(path)
|
|
fill: var(--default-white)
|
|
|
|
.grey-color
|
|
color: var(--font-grey-color)
|
|
|
|
.item
|
|
border-bottom: 1px solid var(--gray-secondary)
|
|
&:last-child
|
|
border-bottom: none
|
|
&:hover
|
|
background-color: var(--gray-thirdly)
|
|
|
|
span
|
|
cursor: default
|
|
</style>
|