141 lines
3.7 KiB
Vue
141 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import { computed, watch } from 'vue'
|
|
import BaseModal from '@/components/ui/BaseModal.vue'
|
|
import AdminSelect from '@/components/ui/AdminSelect.vue'
|
|
import { useOrdersPageContext } from '@/composables/useOrdersPage'
|
|
|
|
const {
|
|
showAddModal,
|
|
formError,
|
|
form,
|
|
isFormValid,
|
|
companies,
|
|
activeCustomers,
|
|
applyCustomer,
|
|
closeAddModal,
|
|
submitAddOrder,
|
|
} = useOrdersPageContext()
|
|
|
|
const companyOptions = computed(() =>
|
|
companies.value.map((company) => ({ value: company.id, label: company.name })),
|
|
)
|
|
|
|
const customerOptions = computed(() =>
|
|
activeCustomers.value.map((customer) => ({
|
|
value: customer.id,
|
|
label: customer.phone
|
|
? `${customer.name} — ${customer.phone}`
|
|
: customer.name,
|
|
})),
|
|
)
|
|
|
|
const settlementOptions = [
|
|
{ value: 'check', label: 'چکی' },
|
|
{ value: 'cash', label: 'نقدی' },
|
|
]
|
|
|
|
watch(
|
|
() => form.customerId,
|
|
(id) => {
|
|
if (!id) {
|
|
form.customerName = ''
|
|
form.customerPhone = ''
|
|
return
|
|
}
|
|
applyCustomer(id)
|
|
},
|
|
)
|
|
</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>نام مشتری <span class="admin-form__required">*</span></label>
|
|
<AdminSelect
|
|
v-model="form.customerId"
|
|
block
|
|
aria-label="انتخاب مشتری"
|
|
placeholder="انتخاب مشتری از لیست"
|
|
:options="customerOptions"
|
|
/>
|
|
<p v-if="!customerOptions.length" class="admin-form__hint">
|
|
مشتری فعالی یافت نشد. ابتدا از بخش مشتریان ثبت کنید.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="admin-form__row">
|
|
<div class="admin-form__field">
|
|
<label>شرکت <span class="admin-form__required">*</span></label>
|
|
<AdminSelect
|
|
v-model="form.companyId"
|
|
block
|
|
aria-label="انتخاب شرکت"
|
|
placeholder="انتخاب شرکت"
|
|
:options="companyOptions"
|
|
/>
|
|
</div>
|
|
<div class="admin-form__field">
|
|
<label>روش تسویه</label>
|
|
<AdminSelect
|
|
v-model="form.settlementMethod"
|
|
block
|
|
aria-label="روش تسویه"
|
|
:options="settlementOptions"
|
|
/>
|
|
</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="پس از انتخاب مشتری پر میشود"
|
|
inputmode="tel"
|
|
dir="ltr"
|
|
readonly
|
|
/>
|
|
</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>
|
|
|
|
<style scoped>
|
|
.admin-form__hint {
|
|
margin: 6px 0 0;
|
|
font-size: 0.75rem;
|
|
color: var(--color-text-muted);
|
|
}
|
|
</style>
|