feat: Implement Fast Request feature with file upload and request management
This commit is contained in:
@@ -1,172 +1,86 @@
|
||||
<script setup>
|
||||
import Select from 'primevue/select';
|
||||
import InputText from 'primevue/inputtext';
|
||||
import { ref } from 'vue';
|
||||
import ArchiveCase from './ArchiveCase.vue';
|
||||
import UiInput from '../../ui/UiInput.vue';
|
||||
import { useFastRequestStore } from '../../../store/FastRequest';
|
||||
import { petTypes, petGenders, neuteredOptions } from '../../../data/fastRequestOptions';
|
||||
|
||||
const fastRequestStore = useFastRequestStore();
|
||||
|
||||
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>
|
||||
<button type="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
|
||||
<div v-if="fastRequestStore.requestCase.petId" class="w-full flex items-center justify-between border border-[#DEE3EB] rounded-[8px] p-3">
|
||||
<p class="text-[11px] font-[600] text-[#3E4C63]">
|
||||
کیس انتخاب‌شده از آرشیو:
|
||||
<span v-if="fastRequestStore.selectedPet" class="text-[#7A1419]">{{ fastRequestStore.selectedPet.name }} ({{ fastRequestStore.selectedPet.type }})</span>
|
||||
<span v-else class="text-[#7A1419]">شناسه {{ fastRequestStore.requestCase.petId }}</span>
|
||||
</p>
|
||||
<button type="button" @click="fastRequestStore.clearArchivePet" class="text-[11px] font-[400] text-[#7A1419] cursor-pointer">حذف و ثبت کیس جدید</button>
|
||||
</div>
|
||||
<form v-else class="p-4 grid grid-cols-2 gap-4 w-full">
|
||||
<InputText
|
||||
v-model="fastRequestStore.requestCase.name"
|
||||
type="text"
|
||||
placeholder="نام"
|
||||
size="large"/> -->
|
||||
<UiInput
|
||||
type="text"
|
||||
size="large"
|
||||
prefixStart="نام"
|
||||
direction="ltr"
|
||||
/>
|
||||
</FormField>
|
||||
<FormField v-slot="$field" name="type" initialValue="" class="flex flex-col">
|
||||
<Select
|
||||
:options="types"
|
||||
size="large"
|
||||
/>
|
||||
<Select
|
||||
v-model="fastRequestStore.requestCase.type"
|
||||
:options="petTypes"
|
||||
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"
|
||||
/>
|
||||
<InputText
|
||||
v-model="fastRequestStore.requestCase.breed"
|
||||
type="text"
|
||||
placeholder="نژاد"
|
||||
size="large"
|
||||
/>
|
||||
<Select
|
||||
v-model="fastRequestStore.requestCase.gender"
|
||||
:options="petGenders"
|
||||
optionLabel="name"
|
||||
optionValue="code"
|
||||
placeholder="جنسیت"
|
||||
size="small"
|
||||
/>
|
||||
<InputText
|
||||
v-model="fastRequestStore.requestCase.age"
|
||||
type="number"
|
||||
placeholder="سن (سال)"
|
||||
size="large"
|
||||
/>
|
||||
<InputText
|
||||
v-model="fastRequestStore.requestCase.weight"
|
||||
type="number"
|
||||
placeholder="وزن (کیلوگرم)"
|
||||
size="large"
|
||||
/>
|
||||
<Select
|
||||
v-model="fastRequestStore.requestCase.sterilized"
|
||||
:options="neuteredOptions"
|
||||
optionLabel="name"
|
||||
optionValue="code"
|
||||
placeholder="وضعیت عقیم سازی"
|
||||
size="small"
|
||||
/>
|
||||
</FormField>
|
||||
</Form>
|
||||
/>
|
||||
</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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user