89 lines
2.7 KiB
Vue
89 lines
2.7 KiB
Vue
 
|
<script setup lang="ts">
|
||
|
|
import BaseModal from '@/components/ui/BaseModal.vue'
|
||
|
|
import { useOrdersPageContext } from '@/composables/useOrdersPage'
|
||
|
|
|
||
|
|
const {
|
||
|
|
showAddModal,
|
||
|
|
formError,
|
||
|
|
form,
|
||
|
|
isFormValid,
|
||
|
|
companies,
|
||
|
|
closeAddModal,
|
||
|
|
submitAddOrder,
|
||
|
|
} = useOrdersPageContext()
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<BaseModal :open="showAddModal" title="سفارش جدید" size="lg" @close="closeAddModal">
|
||
|
|
<form class="admin-form" @submit.prevent="submitAddOrder">
|
||
|
|
<p v-if="formError" class="admin-form__error" role="alert">{{ formError }}</p>
|
||
|
|
|
||
|
|
<div class="admin-form__field">
|
||
|
|
<label for="order-customer">نام مشتری <span class="admin-form__required">*</span></label>
|
||
|
|
<input
|
||
|
|
id="order-customer"
|
||
|
|
v-model="form.customerName"
|
||
|
|
type="text"
|
||
|
|
class="admin-input"
|
||
|
|
placeholder="مثال: پارچهسرای نیکو"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="admin-form__row">
|
||
|
|
<div class="admin-form__field">
|
||
|
|
<label for="order-company">شرکت <span class="admin-form__required">*</span></label>
|
||
|
|
<select id="order-company" v-model="form.companyId" class="admin-input">
|
||
|
|
<option v-for="company in companies" :key="company.id" :value="company.id">
|
||
|
|
{{ company.name }}
|
||
|
|
</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="admin-form__field">
|
||
|
|
<label for="order-settlement">روش تسویه</label>
|
||
|
|
<select id="order-settlement" v-model="form.settlementMethod" class="admin-input">
|
||
|
|
<option value="check">چکی</option>
|
||
|
|
<option value="cash">نقدی</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="admin-form__row">
|
||
|
|
<div class="admin-form__field">
|
||
|
|
<label for="order-meterage">متراژ (متر)</label>
|
||
|
|
<input
|
||
|
|
id="order-meterage"
|
||
|
|
v-model.number="form.meterage"
|
||
|
|
type="number"
|
||
|
|
min="1"
|
||
|
|
class="admin-input"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="admin-form__field">
|
||
|
|
<label for="order-phone">تلفن مشتری</label>
|
||
|
|
<input
|
||
|
|
id="order-phone"
|
||
|
|
v-model="form.customerPhone"
|
||
|
|
type="tel"
|
||
|
|
class="admin-input"
|
||
|
|
placeholder="۰۹۱۲۱۲۳۴۵۶۷"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<template #footer>
|
||
|
|
<button type="button" class="admin-btn admin-btn--outline" @click="closeAddModal">
|
||
|
|
انصراف
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="admin-btn admin-btn--primary"
|
||
|
|
:disabled="!isFormValid"
|
||
|
|
@click="submitAddOrder"
|
||
|
|
>
|
||
|
|
ثبت سفارش
|
||
|
|
</button>
|
||
|
|
</template>
|
||
|
|
</BaseModal>
|
||
|
|
</template>
|