VIP search fullname
This commit is contained in:
dderbentsov
79
src/components/base/BaseInputWithSearch.vue
Normal file
79
src/components/base/BaseInputWithSearch.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template lang="pug">
|
||||
.flex
|
||||
.col
|
||||
base-input(v-model="fullName", debounce="1000")
|
||||
.state(v-if="showMessageBar")
|
||||
.row
|
||||
.col {{ message }}
|
||||
.col
|
||||
q-btn(
|
||||
@click="createPerson"
|
||||
)
|
||||
q-icon(name="app:icon-plus", size="12px", left)
|
||||
span Создать
|
||||
.candidates
|
||||
.row.w-full(
|
||||
v-for="candidate in candidates",
|
||||
key="candidate.id",
|
||||
@click="pickPerson(candidate)"
|
||||
)
|
||||
.col {{ candidate.last_name + ' ' + candidate.first_name + ' ' + candidate.patronymic }}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseInput from "./BaseInput.vue";
|
||||
import { fetchWrapper } from "@/shared/fetchWrapper";
|
||||
import { v_model } from "@/shared/mixins/v-model";
|
||||
export default {
|
||||
name: "BaseInputWithSearch",
|
||||
components: {
|
||||
BaseInput,
|
||||
},
|
||||
mixins: [v_model],
|
||||
emits: ["createPerson", "update:modelValue"],
|
||||
data() {
|
||||
return {
|
||||
fullName: "",
|
||||
message: "",
|
||||
showMessageBar: true,
|
||||
candidates: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
fullName: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
if (!val) return;
|
||||
fetchWrapper.get(`persons/?full_name=${val}`).then((result) => {
|
||||
this.candidates = result;
|
||||
this.showMessageBar = true;
|
||||
this.message = `Нужный ${val} не найден?`;
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
pickPerson(person) {
|
||||
this.$emit("update:modelValue", { ...person });
|
||||
},
|
||||
createPerson() {
|
||||
this.$emit("createPerson");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.candidates
|
||||
max-height: 400px
|
||||
overflow-y: auto
|
||||
|
||||
.row
|
||||
border: 1px solid black
|
||||
cursor: pointer
|
||||
&:hover
|
||||
background: gray
|
||||
|
||||
.state
|
||||
background: yellow
|
||||
</style>
|
||||
@@ -4,7 +4,7 @@
|
||||
calendar-open-sidebar(v-else, :open-sidebar="openSidebar", :create-form="createForm")
|
||||
calendar-wrapper.ml-2(:open-sidebar="isOpen")
|
||||
base-modal(v-model="isShowForm", title="Создание записи <Переделка>", modal-padding)
|
||||
record-creation-form(v-model="isShowForm", :close-form="closeForm")
|
||||
create-event-form(v-model="isShowForm", :close-form="closeForm")
|
||||
base-modal(v-model="previewVisibility", :hideHeader="true", :modalPadding="true")
|
||||
calendar-record-preview(v-model:preview-visibility="previewVisibility")
|
||||
</template>
|
||||
@@ -13,7 +13,7 @@
|
||||
import CalendarSidebar from "@/pages/newCalendar/components/CalendarSidebar";
|
||||
import CalendarOpenSidebar from "@/pages/newCalendar/components/CalendarOpenSidebar";
|
||||
import CalendarWrapper from "@/pages/newCalendar/components/CalendarWrapper";
|
||||
import RecordCreationForm from "@/pages/newCalendar/components/RecordCreationForm";
|
||||
import CreateEventForm from "@/pages/newCalendar/components/CreateEventForm";
|
||||
import * as moment from "moment/moment";
|
||||
import BaseModal from "@/components/base/BaseModal.vue";
|
||||
import CalendarRecordPreview from "./components/CalendarRecordPreview.vue";
|
||||
@@ -24,7 +24,7 @@ export default {
|
||||
CalendarSidebar,
|
||||
CalendarOpenSidebar,
|
||||
CalendarWrapper,
|
||||
RecordCreationForm,
|
||||
CreateEventForm,
|
||||
BaseModal,
|
||||
CalendarRecordPreview,
|
||||
},
|
||||
|
||||
128
src/pages/newCalendar/components/CreateEventForm.vue
Normal file
128
src/pages/newCalendar/components/CreateEventForm.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<template lang="pug">
|
||||
.flex.flex-col.pt-6.gap-y-4(:style="{maxWidth: '682px'}")
|
||||
header-record-form(
|
||||
:current-status="currentStatus",
|
||||
:statuses="patientData.statuses",
|
||||
:choice-status="choiceStatus"
|
||||
)
|
||||
base-input-with-search(v-model="patient", @createPerson="createPerson")
|
||||
.text {{ patient }}
|
||||
.flex.flex-col.flex-auto.l.gap-y-8
|
||||
.wrapper-info.h-full
|
||||
.grid.grid-cols-2.gap-x-4.gap-y-6
|
||||
base-input-date(
|
||||
v-model="patient",
|
||||
size="M",
|
||||
important,
|
||||
label="Дата рождения",
|
||||
placeholder="Дата рождения"
|
||||
)
|
||||
base-input(
|
||||
v-model="patient",
|
||||
placeholder="+7 (915) 644–92–23",
|
||||
mask="+7 (###) ###-##-##",
|
||||
label="Номер телефона",
|
||||
size="M",
|
||||
important
|
||||
)
|
||||
|
||||
.footer.flex.gap-2
|
||||
base-button(type="secondary", label="Отменить", width="126px", @click="closeForm")
|
||||
base-button(width="168px", label="Создать запись", @click="closeForm", disabled)
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseInputWithSearch from "@/components/base/BaseInputWithSearch.vue";
|
||||
import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
|
||||
import HeaderRecordForm from "./HeaderRecordForm.vue";
|
||||
import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
|
||||
import BaseButton from "@/components/base/BaseButton.vue";
|
||||
|
||||
export default {
|
||||
name: "CreateEventForm",
|
||||
components: {
|
||||
BaseCalendar,
|
||||
HeaderRecordForm,
|
||||
BaseButton,
|
||||
BaseInputWithSearch,
|
||||
},
|
||||
props: { isShowForm: Boolean, closeForm: Function },
|
||||
data() {
|
||||
return {
|
||||
patient: {},
|
||||
|
||||
patientData: patientData,
|
||||
currentStatus: patientData.statuses.find((e) => e.name === "Не принят"),
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
createPerson() {
|
||||
alert("crea");
|
||||
},
|
||||
|
||||
choiceStatus(e) {
|
||||
this.currentStatus = e;
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.dark-blue
|
||||
color: var(--font-dark-blue-color)
|
||||
min-width: 50px
|
||||
|
||||
.text
|
||||
color: var(--font-grey-color)
|
||||
width: 76px
|
||||
|
||||
.change
|
||||
background: var(--bg-light-grey)
|
||||
color: var(--font-grey-color)
|
||||
|
||||
.services
|
||||
background: var(--bg-light-grey)
|
||||
color: var(--font-grey-color)
|
||||
width: 560px
|
||||
|
||||
.service
|
||||
display: -webkit-box
|
||||
overflow: hidden
|
||||
|
||||
.gradient
|
||||
width: 10%
|
||||
height: 28px
|
||||
right: 0
|
||||
|
||||
.other-serivices
|
||||
width: 474px
|
||||
padding: 4px
|
||||
border: 1px solid var(--border-light-grey-color)
|
||||
background: var(--default-white)
|
||||
|
||||
.other
|
||||
width: 46px
|
||||
background: var(--bg-light-grey)
|
||||
|
||||
.price
|
||||
background: var(--bg-light-grey)
|
||||
width: 82px
|
||||
color: var(--font-grey-color)
|
||||
|
||||
.title-info
|
||||
color: var(--font-grey-color)
|
||||
border-bottom: 1.5px solid var(--font-grey-color)
|
||||
&:hover
|
||||
color: var(--btn-blue-color)
|
||||
border-bottom: 1.5px solid var(--btn-blue-color)
|
||||
&.active
|
||||
color: var(--btn-blue-color)
|
||||
border-bottom: 1.5px solid var(--btn-blue-color)
|
||||
|
||||
.footer
|
||||
border-top: 1px solid var(--border-light-grey-color)
|
||||
margin: 40px -32px 0px
|
||||
padding: 16px 32px 0px 32px
|
||||
</style>
|
||||
@@ -6,7 +6,7 @@
|
||||
:choice-status="choiceStatus"
|
||||
)
|
||||
.flex.items-center.gap-x-3.text-smm
|
||||
.text.font-semibold Услуги:
|
||||
.text.font-semibold Жалобы:
|
||||
.flex.gap-x-1
|
||||
.services.flex.items-center.px-4.font-medium.text-smm.gap-x-1.h-9.rounded-md(
|
||||
:class="{'other-serivices': services.length}"
|
||||
Reference in New Issue
Block a user