100 lines
3.7 KiB
Vue
100 lines
3.7 KiB
Vue
<script setup>
|
||
import Dialog from 'primevue/dialog';
|
||
import UiButton from '../../ui/UiButton.vue';
|
||
import TableGeneric from '../../ui/TableGeneric.vue';
|
||
import { computed, ref } from 'vue';
|
||
import CaseNumber from './CaseNumber.vue';
|
||
import { useFastRequestStore } from '../../../store/FastRequest';
|
||
|
||
const visible = defineModel('visible');
|
||
const fastRequestStore = useFastRequestStore();
|
||
|
||
const isChooseCaseNumber = ref(false);
|
||
const selectedPetId = ref(null);
|
||
|
||
const showChooseCaseNumber = () => {
|
||
isChooseCaseNumber.value = true;
|
||
}
|
||
|
||
const data = computed(() => fastRequestStore.pets.map((pet) => ({
|
||
id: pet.id,
|
||
case_number: pet.id,
|
||
case_name: pet.name,
|
||
case_type: pet.breed ? `${pet.type} (${pet.breed})` : pet.type,
|
||
})));
|
||
|
||
const selectPet = (petId) => {
|
||
selectedPetId.value = petId;
|
||
}
|
||
|
||
const confirmSelection = () => {
|
||
if (!selectedPetId.value) return;
|
||
fastRequestStore.selectArchivePet(selectedPetId.value);
|
||
visible.value = false;
|
||
}
|
||
|
||
const columns = ref([
|
||
{
|
||
title: 'شناسه کیس',
|
||
key: 'case_number'
|
||
},
|
||
{
|
||
title: 'نام کیس',
|
||
key: 'case_name'
|
||
},
|
||
{
|
||
title: 'نوع(نژاد)',
|
||
key: 'case_type'
|
||
},
|
||
{
|
||
title: '',
|
||
key: 'actions',
|
||
width: 60,
|
||
style: 'grid grid-cols-1',
|
||
slot: true,
|
||
}
|
||
]);
|
||
</script>
|
||
|
||
<template>
|
||
<Dialog v-model:visible="visible" :modal="true" :closable="true" :dismissableMask="true" :maximizable="false" :style="{ width: '554px' , minHeight: '326px' }" class="fast-request-dialog">
|
||
<template #header>
|
||
<h3>انتخاب کیس از آرشیو</h3>
|
||
</template>
|
||
<div class="w-full py-2 flex flex-col items-start justify-center border-t border-[#EBEBEB] text-[11px] font-[600]">
|
||
<p>لیست کیس‌های ثبت‌شده توسط شما در ادامه نمایش داده می‌شود.</p>
|
||
<p>در صورتیکه شماره مرجع یک کیس را در اختیار داشته باشید می‌توانید درخواست را برای کیس مربوطه نیز ثبت کنید.</p>
|
||
</div>
|
||
<div class="h-[180px] overflow-y-scroll">
|
||
<p v-if="!data.length" class="w-full py-8 text-center text-[11px] font-[400] text-[#7188AD]">کیسی در آرشیو شما ثبت نشده است.</p>
|
||
<TableGeneric
|
||
v-else
|
||
class="bg-white !rounded-2xl"
|
||
:data="data"
|
||
customStyle="!text-[11px] !font-normal"
|
||
:searchable="false"
|
||
:columns="columns"
|
||
:selectable="false"
|
||
:pagination="null"
|
||
:model-value="[]"
|
||
>
|
||
<template #column-actions="{ data }">
|
||
<div class="flex items-center justify-end">
|
||
<UiButton
|
||
:severity="selectedPetId === data.id ? 'success' : 'secondary'"
|
||
size="small"
|
||
:label="selectedPetId === data.id ? 'انتخاب شد' : 'انتخاب'"
|
||
@click="selectPet(data.id)"
|
||
/>
|
||
</div>
|
||
</template>
|
||
</TableGeneric>
|
||
</div>
|
||
<div class="w-full pt-3 flex items-center justify-end gap-2 border-t border-[#EBEBEB]">
|
||
<ui-button label="افزودن از طریق شناسه کیس" severity="secondary" @click="showChooseCaseNumber"/>
|
||
<ui-button label="تایید و انتخاب" severity="success" size="small" :disabled="!selectedPetId" @click="confirmSelection" />
|
||
</div>
|
||
<case-number v-model:visible="isChooseCaseNumber" @selected="visible = false"></case-number>
|
||
</Dialog>
|
||
</template>
|