173 lines
5.3 KiB
Vue
173 lines
5.3 KiB
Vue
<script setup>
|
|
import Select from 'primevue/select';
|
|
import { ref } from 'vue';
|
|
import ArchiveCase from './ArchiveCase.vue';
|
|
import UiInput from '../../ui/UiInput.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"/> -->
|
|
<UiInput
|
|
type="text"
|
|
size="large"
|
|
prefixStart="نام"
|
|
direction="ltr"
|
|
/>
|
|
</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>
|
|
|