112 lines
3.3 KiB
Vue
112 lines
3.3 KiB
Vue
<script setup>
|
||
import Dialog from 'primevue/dialog';
|
||
import UiButton from '../../ui/UiButton.vue';
|
||
import TableGeneric from '../../ui/TableGeneric.vue';
|
||
import { ref } from 'vue';
|
||
import CaseNumber from './CaseNumber.vue';
|
||
|
||
const isChooseCaseNumber = ref(false);
|
||
|
||
const showChooseCaseNumber = () => {
|
||
isChooseCaseNumber.value = true;
|
||
}
|
||
const data = ref([
|
||
{
|
||
id: 1,
|
||
case_number: '1234567890',
|
||
case_name: 'مایلو',
|
||
case_type: 'سگ',
|
||
},
|
||
{
|
||
id: 2,
|
||
case_number: '1234567891',
|
||
case_name: 'تدی',
|
||
case_type: 'گربه',
|
||
},
|
||
{
|
||
id: 3,
|
||
case_number: '1234567892',
|
||
case_name: 'پونی',
|
||
case_type: 'خرگوش',
|
||
},
|
||
{
|
||
id: 4,
|
||
case_number: '1234567893',
|
||
case_name: 'روبیک',
|
||
case_type: 'همستر',
|
||
},
|
||
{
|
||
id: 5,
|
||
case_number: '1234567894',
|
||
case_name: 'کولا',
|
||
case_type: 'خوکچه هندی',
|
||
}
|
||
]);
|
||
|
||
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 :modal="true" :closable="true" :dismissableMask="true" :maximizable="false" :style="{ width: '554px' , minHeight: '326px' }">
|
||
<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">
|
||
<TableGeneric
|
||
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="secondary" size="small">
|
||
<template #icon>
|
||
|
||
</template>
|
||
</UiButton>
|
||
</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" @click="handleNext" />
|
||
</div>
|
||
<case-number v-model:visible="isChooseCaseNumber"></case-number>
|
||
</Dialog>
|
||
</template>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|
||
|
||
|