111 lines
4.8 KiB
Vue
111 lines
4.8 KiB
Vue
<script setup>
|
|
import UiButton from '../../components/ui/UiButton.vue';
|
|
import { computed, ref, watch } from 'vue';
|
|
import Dialog from 'primevue/dialog';
|
|
import ProgressBar from 'primevue/progressbar';
|
|
import { toast } from 'vue3-toastify';
|
|
import RequestType from './fastRequest/RequestType.vue';
|
|
import RequestCase from './fastRequest/RequestCase.vue';
|
|
import RequestDetails from './fastRequest/RequestDetails.vue';
|
|
import RequestDoctor from './fastRequest/RequestDoctor.vue';
|
|
import RequestReview from './fastRequest/RequestReview.vue';
|
|
import InvoiceModal from './fastRequest/InvoiceModal.vue';
|
|
import { useFastRequestStore } from '../../store/FastRequest';
|
|
import { useAnimatedHeight } from '../../composables/useAnimatedHeight';
|
|
|
|
const visible = defineModel('visible');
|
|
const fastRequestStore = useFastRequestStore();
|
|
|
|
const stepContentRef = ref(null);
|
|
const stepContentHeight = useAnimatedHeight(stepContentRef);
|
|
|
|
const invoiceVisible = ref(false);
|
|
const invoiceDocument = ref(null);
|
|
|
|
const steps = [
|
|
{ label: 'نوع درخواست', component: RequestType },
|
|
{ label: 'انتخاب کیس', component: RequestCase },
|
|
{ label: 'جزئیات درخواست', component: RequestDetails },
|
|
{ label: 'انتخاب پزشک', component: RequestDoctor },
|
|
{ label: 'مرور نهایی', component: RequestReview },
|
|
];
|
|
|
|
const currentStepComponent = computed(() => {
|
|
return steps[fastRequestStore.step - 1]?.component || RequestType;
|
|
});
|
|
|
|
const isLastStep = computed(() => fastRequestStore.step === steps.length);
|
|
|
|
watch(visible, (isVisible) => {
|
|
if (isVisible) {
|
|
fastRequestStore.fetchCreateData();
|
|
} else {
|
|
fastRequestStore.reset();
|
|
}
|
|
});
|
|
|
|
const handleNext = async () => {
|
|
if (!fastRequestStore.canProceed) {
|
|
toast.error('لطفا اطلاعات این مرحله را کامل کنید.');
|
|
return;
|
|
}
|
|
|
|
if (!isLastStep.value) {
|
|
fastRequestStore.nextStep();
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const document = await fastRequestStore.submit();
|
|
invoiceDocument.value = document;
|
|
visible.value = false;
|
|
invoiceVisible.value = true;
|
|
} catch (error) {
|
|
toast.error(error.response?.data?.message || 'خطا در ثبت درخواست. لطفا دوباره تلاش کنید.');
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Dialog v-model:visible="visible" :modal="true" :closable="true" :dismissableMask="true" :maximizable="false" :style="{ width: '688px' , minHeight: '376px' }" class="fast-request-dialog" :pt="{header : '!bg-client-primaryBlue'}">
|
|
<template #header>
|
|
<div class="w-full flex items-center justify-start">
|
|
<h2 class="text-[14px] font-[700] text-[#576989]">ثبت آنی درخواست</h2>
|
|
</div>
|
|
</template>
|
|
<div class="w-full h-[56px] flex items-center justify-between border-b border-[#EBEBEB] pb-3">
|
|
<template v-for="(item, index) in steps" :key="item.label">
|
|
<ProgressBar v-if="index > 0" :value="fastRequestStore.step > index ? 100 : 0" :showValue="false" mode="determinate"></ProgressBar>
|
|
<div class="w-auto h-[40px] grid grid-cols-1 items-center justify-center gap-1">
|
|
<div class="w-full h-[20px] flex items-center justify-center">
|
|
<span
|
|
class="w-[20px] h-[20px] rounded-full text-white flex items-center justify-center text-[10px] font-[600]"
|
|
:class="fastRequestStore.step >= index + 1 ? 'bg-[#576989]' : 'bg-[#C1D0E8]'"
|
|
>{{ index + 1 }}</span>
|
|
</div>
|
|
<span class="text-[10px] font-[600]" :class="fastRequestStore.step >= index + 1 ? 'text-[#576989]' : 'text-[#7188AD]'">{{ item.label }}</span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div class="overflow-hidden transition-[height] duration-300 ease-in-out" :style="stepContentHeight !== null ? { height: `${stepContentHeight}px` } : null">
|
|
<div ref="stepContentRef">
|
|
<component :is="currentStepComponent" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full pt-3 flex items-center justify-between border-t border-[#EBEBEB]">
|
|
<ui-button v-if="fastRequestStore.step > 1" label="مرحله قبل" severity="secondary" size="small" @click="fastRequestStore.prevStep" />
|
|
<span v-else></span>
|
|
<ui-button
|
|
:label="isLastStep ? 'ثبت نهایی درخواست' : 'تایید و مرحله بعد'"
|
|
severity="success"
|
|
size="small"
|
|
:loading="fastRequestStore.submitting"
|
|
:disabled="fastRequestStore.submitting"
|
|
@click="handleNext"
|
|
/>
|
|
</div>
|
|
</Dialog>
|
|
<invoice-modal v-model:visible="invoiceVisible" :document="invoiceDocument"></invoice-modal>
|
|
</template>
|