105 lines
5.5 KiB
Vue
105 lines
5.5 KiB
Vue
<script setup>
|
|
import { convertEnglishToPersian } from '../../utils/numberUtils';
|
|
import UiButton from '../../components/ui/UiButton.vue';
|
|
import CtScanIcon from '../../components/svg/ctScanIcon.svg';
|
|
import MriIcon from '../../components/svg/mriIcon.svg';
|
|
import SonographyIcon from '../../components/svg/sonographyIcon.svg';
|
|
import ECOIcon from '../../components/svg/ecoIcon.svg';
|
|
import RadiologyIcon from '../../components/svg/radiologyIcon.svg';
|
|
import { computed } from 'vue';
|
|
import Dialog from 'primevue/dialog';
|
|
import { ref } from 'vue';
|
|
import ProgressBar from 'primevue/progressbar';
|
|
import RequestCard from './RequestCard.vue';
|
|
|
|
const value1 = ref(50);
|
|
const value2 = ref(0);
|
|
const value3 = ref(0);
|
|
const value4 = ref(0);
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
icon: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Dialog :modal="true" :closable="true" :dismissableMask="true" :maximizable="false" :style="{ width: '688px' , minHeight: '376px' }" :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">
|
|
<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] bg-[#576989] rounded-full text-white flex items-center justify-center text-[10px] font-[600]">1</span>
|
|
</div>
|
|
<span class="text-[10px] font-[600] text-[#7188AD]">نوع درخواست</span>
|
|
</div>
|
|
<ProgressBar :value="value1" :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] bg-[#576989] rounded-full text-white flex items-center justify-center text-[10px] font-[600]">2</span>
|
|
</div>
|
|
<span class="text-[10px] font-[600] text-[#7188AD]">انتخاب کیس</span>
|
|
</div>
|
|
<ProgressBar :value="value2" :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] bg-[#576989] rounded-full text-white flex items-center justify-center text-[10px] font-[600]">3</span>
|
|
</div>
|
|
<span class="text-[10px] font-[600] text-[#7188AD]">جزئیات درخواست</span>
|
|
</div>
|
|
<ProgressBar :value="value3" :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] bg-[#576989] rounded-full text-white flex items-center justify-center text-[10px] font-[600]">4</span>
|
|
</div>
|
|
<span class="text-[10px] font-[600] text-[#7188AD]">انتخاب پزشک</span>
|
|
</div>
|
|
<ProgressBar :value="value4" :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] bg-[#576989] rounded-full text-white flex items-center justify-center text-[10px] font-[600]">5</span>
|
|
</div>
|
|
<span class="text-[10px] font-[600] text-[#7188AD]">مرور نهایی</span>
|
|
</div>
|
|
</div>
|
|
<div class="w-full space-y-3 py-6">
|
|
<p class="h-[17px] flex items-center justify-start text-[11px] font-[600] text-[#3E4C63]">نوع درخواست خود را مشخص کنید</p>
|
|
<div class="w-full h-[133px] grid grid-cols-5 gap-3 justify-start">
|
|
<RequestCard v-model="selectedCt" title="CT Scan" icon="ct-scan" severity="primary" :selectable="true"/>
|
|
<RequestCard v-model="selectedCt" title="MRI" icon="mri" severity="primary" :selectable="true"/>
|
|
<RequestCard v-model="selectedCt" title="سونوگرافی" icon="sonography" severity="primary" :selectable="true"/>
|
|
<RequestCard v-model="selectedCt" title="اکوکاردیوگرافی" icon="echo" severity="primary" :selectable="true"/>
|
|
<RequestCard v-model="selectedCt" title="رادیولوژی" icon="radiology" severity="primary" :selectable="true"/>
|
|
</div>
|
|
</div>
|
|
<div class="w-full pt-3 flex items-center justify-end border-t border-[#EBEBEB]">
|
|
<ui-button label="تایید و مرحله بعد" severity="success" size="small" />
|
|
</div>
|
|
|
|
</Dialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
:deep(.p-progressbar) {
|
|
min-width: 60px !important;
|
|
height: 4px;
|
|
}
|
|
|
|
:deep(.p-progressbar-value) {
|
|
background: #576989 !important;
|
|
}
|
|
</style>
|
|
|
|
|