change fast request section RAD-2

This commit is contained in:
2026-01-04 17:45:47 +03:30
parent 723f44fe69
commit f602ba68e3
@@ -0,0 +1,105 @@
<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>