79 lines
1.9 KiB
Vue
79 lines
1.9 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="Найти медкарту",
|
|
iconLeft
|
|
)
|
|
template(v-slot:iconLeft)
|
|
q-icon.search-icon(name="app:search", size="20px")
|
|
base-select(
|
|
width="280px",
|
|
:items="items",
|
|
size="M",
|
|
placeholder="Сортировать по ...",
|
|
v-model="sortingType"
|
|
)
|
|
base-button(width="216px")
|
|
q-icon.plus.mr-2(name="app:plus", size="24px")
|
|
span Создать медкарту
|
|
</template>
|
|
|
|
<script>
|
|
import BaseInput from "@/components/base/BaseInput.vue";
|
|
import BaseSelect from "@/components/base/BaseSelect.vue";
|
|
import BaseButton from "@/components/base/BaseButton.vue";
|
|
export default {
|
|
name: "MedicalCardListHeader",
|
|
components: { BaseInput, BaseSelect, BaseButton },
|
|
data() {
|
|
return {
|
|
items: [
|
|
{
|
|
label: "ФИО",
|
|
id: "name",
|
|
},
|
|
{
|
|
label: "приоритету",
|
|
id: "priority",
|
|
},
|
|
{
|
|
label: "дате рождения",
|
|
id: "birthDate",
|
|
},
|
|
{
|
|
label: "номеру медкарты",
|
|
id: "medcardNumber",
|
|
},
|
|
{
|
|
label: "проценту заполнения",
|
|
id: "percent",
|
|
},
|
|
{
|
|
label: "дате создания медкарты",
|
|
id: "creationDate",
|
|
},
|
|
],
|
|
sortingType: null,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.header-wrapper
|
|
height: 72px
|
|
border-bottom: 1px solid var(--gray-scondary)
|
|
|
|
.search-icon :deep(path)
|
|
fill: var(--font-grey-color)
|
|
|
|
.search :deep(.q-field__prepend)
|
|
padding-right: 4px
|
|
|
|
.plus :deep(path)
|
|
fill: var(--default-white)
|
|
</style>
|