complete design for submission flow

2026-01-06 16:20:17 +03:30
parent f602ba68e3
commit 954947af77
12 changed files with 497 additions and 49 deletions
@@ -0,0 +1,112 @@
+<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>
+    
+