some edits
This commit is contained in:
@@ -1,25 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import BaseModal from '@/components/ui/BaseModal.vue'
|
||||
import AdminIcon from '@/components/icons/AdminIcon.vue'
|
||||
import StatusBadge from '@/components/ui/StatusBadge.vue'
|
||||
import { orders } from '@/data/mockData'
|
||||
import { mapAdminOrder, ordersApi, type ApiOrder } from '@/services/api'
|
||||
import { ApiError } from '@/services/http'
|
||||
import { formatCurrency, formatNumber } from '@/utils/format'
|
||||
import { confirm } from '@/composables/useConfirm'
|
||||
import { useToast } from '@/composables/useToast'
|
||||
import type { OrderItem } from '@/types'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
|
||||
const order = computed(() => orders.find((o) => o.id === route.params.id) ?? orders[0]!)
|
||||
|
||||
const items = ref<OrderItem[]>(order.value.items?.map((i) => ({ ...i })) ?? [])
|
||||
|
||||
const order = ref<ApiOrder | null>(null)
|
||||
const items = ref<OrderItem[]>([])
|
||||
const shippingCost = ref(0)
|
||||
const customerNote = ref('')
|
||||
const showAddModal = ref(false)
|
||||
const formError = ref('')
|
||||
const saving = ref(false)
|
||||
const loading = ref(true)
|
||||
|
||||
const emptyForm = () => ({
|
||||
catalogCode: '',
|
||||
@@ -38,6 +41,28 @@ const isFormValid = computed(
|
||||
form.requestedMeterage > 0,
|
||||
)
|
||||
|
||||
const displayOrder = computed(() =>
|
||||
order.value ? mapAdminOrder(order.value) : null,
|
||||
)
|
||||
|
||||
async function loadOrder() {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await ordersApi.get(String(route.params.id))
|
||||
order.value = data
|
||||
items.value = (data.items ?? []).map((i) => ({ ...i }))
|
||||
shippingCost.value = data.shippingCost ?? 0
|
||||
} catch (err) {
|
||||
toast.error(err instanceof ApiError ? err.message : 'بارگذاری سفارش انجام نشد.')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void loadOrder()
|
||||
})
|
||||
|
||||
function goBack() {
|
||||
router.push('/orders')
|
||||
}
|
||||
@@ -88,6 +113,36 @@ function submitAddProduct() {
|
||||
|
||||
closeAddModal()
|
||||
}
|
||||
|
||||
async function savePricing() {
|
||||
if (!order.value) return
|
||||
const pricedItems = items.value.filter((i) => !i.id.startsWith('oi-'))
|
||||
if (!pricedItems.length) {
|
||||
toast.error('اقلام قابل قیمتگذاری یافت نشد.')
|
||||
return
|
||||
}
|
||||
|
||||
saving.value = true
|
||||
try {
|
||||
const updated = await ordersApi.updatePricing(order.value.id, {
|
||||
items: pricedItems.map((item) => ({
|
||||
id: item.id,
|
||||
confirmedMeterage: item.confirmedMeterage ?? undefined,
|
||||
supplyPrice: item.supplyPrice ?? undefined,
|
||||
unitDiscount: item.unitDiscount,
|
||||
})),
|
||||
shippingCost: shippingCost.value,
|
||||
note: customerNote.value.trim() || undefined,
|
||||
})
|
||||
order.value = updated
|
||||
items.value = (updated.items ?? []).map((i) => ({ ...i }))
|
||||
toast.success('قیمتگذاری ذخیره شد.')
|
||||
} catch (err) {
|
||||
toast.error(err instanceof ApiError ? err.message : 'ذخیره قیمتگذاری انجام نشد.')
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -98,7 +153,12 @@ function submitAddProduct() {
|
||||
<p class="admin-page-header__breadcrumb">سفارشها / قیمتگذاری سفارش</p>
|
||||
</div>
|
||||
<div class="admin-action-group">
|
||||
<button type="button" class="admin-btn admin-btn--success admin-btn--sm">
|
||||
<button
|
||||
type="button"
|
||||
class="admin-btn admin-btn--success admin-btn--sm"
|
||||
:disabled="saving || loading"
|
||||
@click="savePricing"
|
||||
>
|
||||
ارسال پیشفاکتور
|
||||
</button>
|
||||
<button type="button" class="admin-btn admin-btn--primary admin-btn--sm" @click="goBack">
|
||||
@@ -107,155 +167,172 @@ function submitAddProduct() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pricing-page__summary admin-card">
|
||||
<div class="pricing-page__order-meta">
|
||||
<div>
|
||||
<strong class="pricing-page__order-id">{{ order.orderNumber }}</strong>
|
||||
<p class="pricing-page__customer">{{ order.customerName }}</p>
|
||||
<StatusBadge :status="order.status" />
|
||||
<template v-if="displayOrder">
|
||||
<div class="pricing-page__summary admin-card">
|
||||
<div class="pricing-page__order-meta">
|
||||
<div>
|
||||
<strong class="pricing-page__order-id">{{ displayOrder.orderNumber }}</strong>
|
||||
<p class="pricing-page__customer">{{ displayOrder.customerName }}</p>
|
||||
<StatusBadge :status="displayOrder.status" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="admin-summary-grid">
|
||||
<div class="admin-summary-item">
|
||||
<p class="admin-summary-item__label">مجموع مبلغ</p>
|
||||
<p class="admin-summary-item__value">
|
||||
{{ displayOrder.totalAmount ? formatCurrency(displayOrder.totalAmount) : '—' }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="admin-summary-item">
|
||||
<p class="admin-summary-item__label">تخفیف کل</p>
|
||||
<p class="admin-summary-item__value">
|
||||
{{ formatCurrency(order?.totalDiscount ?? 0) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="admin-summary-item">
|
||||
<p class="admin-summary-item__label">هزینه حمل</p>
|
||||
<p class="admin-summary-item__value">
|
||||
{{ formatCurrency(shippingCost) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="admin-summary-item">
|
||||
<p class="admin-summary-item__label">مبلغ نهایی</p>
|
||||
<p class="admin-summary-item__value">
|
||||
{{ order?.finalAmount ? formatCurrency(order.finalAmount) : '—' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="admin-summary-grid">
|
||||
<div class="admin-summary-item">
|
||||
<p class="admin-summary-item__label">مجموع مبلغ</p>
|
||||
<p class="admin-summary-item__value">—</p>
|
||||
</div>
|
||||
<div class="admin-summary-item">
|
||||
<p class="admin-summary-item__label">تخفیف کل</p>
|
||||
<p class="admin-summary-item__value">۰ تومان</p>
|
||||
</div>
|
||||
<div class="admin-summary-item">
|
||||
<p class="admin-summary-item__label">هزینه حمل (٪)</p>
|
||||
<p class="admin-summary-item__value">۰٪</p>
|
||||
</div>
|
||||
<div class="admin-summary-item">
|
||||
<p class="admin-summary-item__label">مبلغ نهایی</p>
|
||||
<p class="admin-summary-item__value">— تومان</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pricing-page__table admin-card desktop-only">
|
||||
<div class="admin-table-wrap">
|
||||
<table class="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ردیف</th>
|
||||
<th>کالیته</th>
|
||||
<th>محصول</th>
|
||||
<th>رنگ / نوع</th>
|
||||
<th>متراژ درخواستی</th>
|
||||
<th>متراژ تأیید شده</th>
|
||||
<th>قیمت تأمینی (واحد)</th>
|
||||
<th>تخفیف (واحد)</th>
|
||||
<th>مبلغ کل (تومان)</th>
|
||||
<th>عملیات</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in items" :key="item.id">
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>{{ item.catalogCode }}</td>
|
||||
<td>{{ item.productName }}</td>
|
||||
<td>{{ item.color }}</td>
|
||||
<td>{{ formatNumber(item.requestedMeterage) }}</td>
|
||||
<td>
|
||||
<input
|
||||
v-model.number="item.confirmedMeterage"
|
||||
type="number"
|
||||
class="admin-input admin-input--sm"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
:value="item.supplyPrice ?? ''"
|
||||
type="text"
|
||||
class="admin-input admin-input--sm"
|
||||
placeholder="—"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
v-model.number="item.unitDiscount"
|
||||
type="number"
|
||||
class="admin-input admin-input--sm"
|
||||
/>
|
||||
</td>
|
||||
<td>—</td>
|
||||
<td>
|
||||
<button
|
||||
type="button"
|
||||
class="admin-btn admin-btn--outline-danger admin-btn--xs"
|
||||
@click="removeItem(item.id)"
|
||||
>
|
||||
حذف
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="pricing-page__table admin-card desktop-only">
|
||||
<div class="admin-table-wrap">
|
||||
<table class="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ردیف</th>
|
||||
<th>کالیته</th>
|
||||
<th>محصول</th>
|
||||
<th>رنگ / نوع</th>
|
||||
<th>متراژ درخواستی</th>
|
||||
<th>متراژ تأیید شده</th>
|
||||
<th>قیمت تأمینی (واحد)</th>
|
||||
<th>تخفیف (واحد)</th>
|
||||
<th>مبلغ کل (تومان)</th>
|
||||
<th>عملیات</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in items" :key="item.id">
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>{{ item.catalogCode }}</td>
|
||||
<td>{{ item.productName }}</td>
|
||||
<td>{{ item.color }}</td>
|
||||
<td>{{ formatNumber(item.requestedMeterage) }}</td>
|
||||
<td>
|
||||
<input
|
||||
v-model.number="item.confirmedMeterage"
|
||||
type="number"
|
||||
class="admin-input admin-input--sm"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
v-model.number="item.supplyPrice"
|
||||
type="number"
|
||||
class="admin-input admin-input--sm"
|
||||
placeholder="—"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
v-model.number="item.unitDiscount"
|
||||
type="number"
|
||||
class="admin-input admin-input--sm"
|
||||
/>
|
||||
</td>
|
||||
<td>{{ item.totalAmount ? formatCurrency(item.totalAmount) : '—' }}</td>
|
||||
<td>
|
||||
<button
|
||||
type="button"
|
||||
class="admin-btn admin-btn--outline-danger admin-btn--xs"
|
||||
@click="removeItem(item.id)"
|
||||
>
|
||||
حذف
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<button type="button" class="admin-btn admin-btn--ghost pricing-page__add-btn" @click="openAddModal">
|
||||
<AdminIcon name="products" :size="16" />
|
||||
افزودن محصول
|
||||
</button>
|
||||
</div>
|
||||
<button type="button" class="admin-btn admin-btn--ghost pricing-page__add-btn" @click="openAddModal">
|
||||
<AdminIcon name="products" :size="16" />
|
||||
افزودن محصول
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="compact-only admin-card-list pricing-page__compact-items">
|
||||
<article v-for="(item, index) in items" :key="item.id" class="admin-card-item">
|
||||
<div class="admin-card-item__header">
|
||||
<p class="admin-card-item__title">{{ item.productName }}</p>
|
||||
<span class="pricing-page__item-index">#{{ index + 1 }}</span>
|
||||
</div>
|
||||
<div class="admin-card-item__meta">
|
||||
<span>کالیته {{ item.catalogCode }}</span>
|
||||
<span>{{ item.color }}</span>
|
||||
<span>درخواست: {{ formatNumber(item.requestedMeterage) }} متر</span>
|
||||
</div>
|
||||
<div class="pricing-page__compact-fields">
|
||||
<label>
|
||||
متراژ تأیید شده
|
||||
<input v-model.number="item.confirmedMeterage" type="number" class="admin-input" />
|
||||
</label>
|
||||
<label>
|
||||
تخفیف واحد
|
||||
<input v-model.number="item.unitDiscount" type="number" class="admin-input" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="admin-card-item__actions">
|
||||
<button type="button" class="admin-btn admin-btn--outline-danger admin-btn--xs" @click="removeItem(item.id)">
|
||||
حذف
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
<button type="button" class="admin-btn admin-btn--ghost" @click="openAddModal">
|
||||
<AdminIcon name="products" :size="16" />
|
||||
افزودن محصول
|
||||
</button>
|
||||
</div>
|
||||
<div class="compact-only admin-card-list pricing-page__compact-items">
|
||||
<article v-for="(item, index) in items" :key="item.id" class="admin-card-item">
|
||||
<div class="admin-card-item__header">
|
||||
<p class="admin-card-item__title">{{ item.productName }}</p>
|
||||
<span class="pricing-page__item-index">#{{ index + 1 }}</span>
|
||||
</div>
|
||||
<div class="admin-card-item__meta">
|
||||
<span>کالیته {{ item.catalogCode }}</span>
|
||||
<span>{{ item.color }}</span>
|
||||
<span>درخواست: {{ formatNumber(item.requestedMeterage) }} متر</span>
|
||||
</div>
|
||||
<div class="pricing-page__compact-fields">
|
||||
<label>
|
||||
متراژ تأیید شده
|
||||
<input v-model.number="item.confirmedMeterage" type="number" class="admin-input" />
|
||||
</label>
|
||||
<label>
|
||||
تخفیف واحد
|
||||
<input v-model.number="item.unitDiscount" type="number" class="admin-input" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="admin-card-item__actions">
|
||||
<button type="button" class="admin-btn admin-btn--outline-danger admin-btn--xs" @click="removeItem(item.id)">
|
||||
حذف
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
<button type="button" class="admin-btn admin-btn--ghost" @click="openAddModal">
|
||||
<AdminIcon name="products" :size="16" />
|
||||
افزودن محصول
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="admin-form-grid">
|
||||
<div class="admin-form-field">
|
||||
<label>اعمال تخفیف روی فاکتور</label>
|
||||
<select class="admin-input">
|
||||
<option>بدون اعمال</option>
|
||||
</select>
|
||||
<div class="admin-form-grid">
|
||||
<div class="admin-form-field">
|
||||
<label>اعمال تخفیف روی فاکتور</label>
|
||||
<select class="admin-input">
|
||||
<option>بدون اعمال</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="admin-form-field">
|
||||
<label>هزینه حمل (تومان)</label>
|
||||
<input v-model.number="shippingCost" type="number" class="admin-input" />
|
||||
</div>
|
||||
<div class="admin-form-field">
|
||||
<label>توضیحات برای مشتری</label>
|
||||
<textarea v-model="customerNote" placeholder="توضیحات خود را وارد کنید..." />
|
||||
</div>
|
||||
</div>
|
||||
<div class="admin-form-field">
|
||||
<label>هزینه حمل (تومان)</label>
|
||||
<input v-model.number="shippingCost" type="number" class="admin-input" />
|
||||
</div>
|
||||
<div class="admin-form-field">
|
||||
<label>توضیحات برای مشتری</label>
|
||||
<textarea v-model="customerNote" placeholder="توضیحات خود را وارد کنید..." />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="admin-footer-actions">
|
||||
<button type="button" class="admin-btn admin-btn--success">ارسال پیشفاکتور</button>
|
||||
<button type="button" class="admin-btn admin-btn--outline-warning">نیاز به اصلاح</button>
|
||||
<button type="button" class="admin-btn admin-btn--outline-danger">رد سفارش</button>
|
||||
</div>
|
||||
<div class="admin-footer-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="admin-btn admin-btn--success"
|
||||
:disabled="saving"
|
||||
@click="savePricing"
|
||||
>
|
||||
ارسال پیشفاکتور
|
||||
</button>
|
||||
<button type="button" class="admin-btn admin-btn--outline-warning">نیاز به اصلاح</button>
|
||||
<button type="button" class="admin-btn admin-btn--outline-danger">رد سفارش</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<BaseModal :open="showAddModal" title="افزودن محصول" size="lg" @close="closeAddModal">
|
||||
<form class="admin-form" @submit.prevent="submitAddProduct">
|
||||
|
||||
Reference in New Issue
Block a user