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,166 @@
+<script setup>
+import Select from 'primevue/select';
+import { ref } from 'vue';
+import ArchiveCase from './ArchiveCase.vue';
+
+const isChooseArchive = ref(false);
+
+const showChooseArchive = () => {
+    isChooseArchive.value = true;
+}
+const genders = ref([
+    { name: 'نر', code: 'male' },
+    { name: 'ماده', code: 'female' }
+]);
+
+const types = ref([
+    { name: 'سگ', code: 'dog' },
+    { name: 'گربه', code: 'cat' },
+    { name: 'پرنده', code: 'bird' },
+    { name: 'خرگوش', code: 'rabbit' },
+    { name: 'همستر', code: 'hamster' },
+    { name: 'خوکچه هندی', code: 'guinea_pig' },
+    { name: 'لاک پشت', code: 'turtle' },
+    { name: 'مار', code: 'snake' },
+    { name: 'مارمولک', code: 'lizard' },
+]);
+
+const neuteredStatus = ref([
+    { name: 'عقیم سازی شده', code: 'neutered' },
+    { name: 'عقیم سازی نشده', code: 'not_neutered' }
+]);
+</script>
+    
+<template>
+<div class="w-full space-y-2 py-6">
+    <div class="w-full h-[12px] flex items-center justify-between">
+        <p class="flex h-full items-center justify-start text-[11px] font-[600] text-[#3E4C63]">مشخصات کیس(حیوان) مورد نظر را وارد نمایید.</p>
+        <button @click="showChooseArchive" class="flex h-full items-center justify-end text-[11px] font-[400] text-[#7A1419] cursor-pointer">انتخاب از آرشیو</button>
+    </div>
+    <p class="flex items-center justify-start text-[11px] font-[600] text-[#576989]">
+        در صورتی که قبلا این کیس در پلتفرم رادیکال ثبت شده، برای بررسی سوابق قبلی از دکمه «انتخاب از آرشیو» استفاده نمایید.
+    </p>
+    <Form ref="formRef" v-slot="$form" class="p-4 grid grid-cols-2 gap-4 !w-full">
+        <FormField v-slot="$field" name="name" initialValue="" class="flex flex-col">
+            <InputText 
+            type="text" 
+            placeholder="نام" 
+            size="large"/>
+        </FormField>
+        <FormField v-slot="$field" name="type" initialValue=""  class="flex flex-col">
+            <Select 
+            :options="types" 
+            optionLabel="name" 
+            optionValue="code" 
+            placeholder="نوع" 
+            />
+        </FormField>
+        <FormField v-slot="$field" name="breed" initialValue=""  class="flex flex-col">
+            <InputText 
+                type="text"  
+                placeholder="نژاد" 
+                size="large"/>
+        </FormField>
+        <FormField v-slot="$field" name="gender" initialValue=""  class="flex flex-col">
+            <Select :options="genders" optionLabel="name" optionValue="code" placeholder="جنسیت" size="small"/>
+        </FormField>
+        <FormField v-slot="$field" name="age" initialValue=""  class="flex flex-col">
+            <InputText 
+                type="text"  
+                placeholder="سن" 
+                size="large"
+                />        
+            </FormField>
+        <FormField v-slot="$field" name="birthday" initialValue=""  class="flex flex-col">
+            <InputText 
+                type="text"  
+                placeholder="وزن" 
+                size="large"
+                />
+        </FormField>
+        <FormField v-slot="$field" name="sterilized" initialValue=""  class="flex flex-col">
+            <Select 
+            :options="neuteredStatus" 
+            optionLabel="name" 
+            optionValue="code" 
+            placeholder="وضعیت عقیم سازی"
+            size="small"
+            />
+        </FormField>
+    </Form>
+    <archive-case v-model:visible="isChooseArchive"></archive-case>
+</div>
+</template>
+
+<style scoped>
+:deep(.p-select) {
+    border: 1px solid #DEE3EB !important;
+    border-radius: 8px !important;
+    height: 37px !important;
+    display: flex !important;
+    align-items: center !important;
+}
+
+:deep(.p-select-label) {
+    padding: 0 12px;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+
+:deep(.p-select-label.p-placeholder) {
+    color: #6E91C9 !important;
+    font-size: 11px !important;
+    font-weight: 400 !important;
+}
+
+
+:deep(.p-inputtext) {
+    font-size: 11px !important;
+    font-weight: 400 !important;
+    border: 1px solid #DEE3EB !important;
+    border-radius: 8px !important;
+}
+:deep(.p-inputtext::placeholder) {
+    color: #6E91C9;
+}
+
+:deep(.vpd-main) {
+    border: 1px solid #DEE3EB !important;
+    border-radius: 8px !important;
+    overflow: hidden !important;
+    height: 45px !important;
+
+}
+:deep(.vpd-input-group) {
+    border: 0 !important;
+    font-size: 16px !important;
+    border-radius: 8px !important;
+    border: 0 !important;
+    font-weight: 400 !important;
+    height: 45px !important;
+}
+:deep(.vpd-input-group .vpd-placeholder) {
+    font-size: 13px !important;
+    font-weight: 400 !important;
+    color: #3E4C63 !important;
+}
+:deep(.vpd-input-group input) {
+    border: 0 !important;
+}
+:deep(.vpd-icon-btn) {
+    background: #576989 !important;
+}
+:deep(.vpd-content) {
+    border-radius: 12px !important;
+    overflow: hidden !important;
+    border: 0 !important;
+}
+:deep(.vpd-wrapper) {
+    background-color: rgba(0,0,0,.1) !important;
+}
+
+</style>
+    
+