Initial commit: fabric-trade-admin panel with responsive layouts and UI refinements.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -0,0 +1,387 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, 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 { formatCurrency, formatNumber } from '@/utils/format'
|
||||
import type { OrderItem } from '@/types'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const order = computed(() => orders.find((o) => o.id === route.params.id) ?? orders[0]!)
|
||||
|
||||
const items = ref<OrderItem[]>(order.value.items?.map((i) => ({ ...i })) ?? [])
|
||||
|
||||
const shippingCost = ref(0)
|
||||
const customerNote = ref('')
|
||||
const showAddModal = ref(false)
|
||||
const formError = ref('')
|
||||
|
||||
const emptyForm = () => ({
|
||||
catalogCode: '',
|
||||
productName: '',
|
||||
color: '',
|
||||
requestedMeterage: 100,
|
||||
confirmedMeterage: 100,
|
||||
})
|
||||
|
||||
const form = reactive(emptyForm())
|
||||
|
||||
const isFormValid = computed(
|
||||
() =>
|
||||
form.catalogCode.trim().length > 0 &&
|
||||
form.productName.trim().length > 0 &&
|
||||
form.requestedMeterage > 0,
|
||||
)
|
||||
|
||||
function goBack() {
|
||||
router.push('/orders')
|
||||
}
|
||||
|
||||
function removeItem(id: string) {
|
||||
items.value = items.value.filter((i) => i.id !== id)
|
||||
}
|
||||
|
||||
function openAddModal() {
|
||||
Object.assign(form, emptyForm())
|
||||
formError.value = ''
|
||||
showAddModal.value = true
|
||||
}
|
||||
|
||||
function closeAddModal() {
|
||||
showAddModal.value = false
|
||||
formError.value = ''
|
||||
}
|
||||
|
||||
function submitAddProduct() {
|
||||
if (!isFormValid.value) {
|
||||
formError.value = 'کالیته، نام محصول و متراژ الزامی هستند.'
|
||||
return
|
||||
}
|
||||
|
||||
items.value.push({
|
||||
id: `oi-${crypto.randomUUID().slice(0, 8)}`,
|
||||
catalogCode: form.catalogCode.trim(),
|
||||
productName: form.productName.trim(),
|
||||
color: form.color.trim() || '—',
|
||||
requestedMeterage: form.requestedMeterage,
|
||||
confirmedMeterage: form.confirmedMeterage || form.requestedMeterage,
|
||||
supplyPrice: null,
|
||||
unitDiscount: 0,
|
||||
totalAmount: null,
|
||||
})
|
||||
|
||||
closeAddModal()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="pricing-page">
|
||||
<div class="admin-page-header">
|
||||
<div>
|
||||
<h1 class="admin-page-header__title">قیمت‌گذاری سفارش</h1>
|
||||
<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>
|
||||
<button type="button" class="admin-btn admin-btn--primary admin-btn--sm" @click="goBack">
|
||||
بازگشت
|
||||
</button>
|
||||
</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" />
|
||||
</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>
|
||||
<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="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-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>
|
||||
|
||||
<BaseModal :open="showAddModal" title="افزودن محصول" size="lg" @close="closeAddModal">
|
||||
<form class="admin-form" @submit.prevent="submitAddProduct">
|
||||
<p v-if="formError" class="admin-form__error" role="alert">{{ formError }}</p>
|
||||
|
||||
<div class="admin-form__row">
|
||||
<div class="admin-form__field">
|
||||
<label for="catalog-code">کالیته <span class="admin-form__required">*</span></label>
|
||||
<input
|
||||
id="catalog-code"
|
||||
v-model="form.catalogCode"
|
||||
type="text"
|
||||
class="admin-input"
|
||||
placeholder="377"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin-form__field">
|
||||
<label for="product-name">محصول <span class="admin-form__required">*</span></label>
|
||||
<input
|
||||
id="product-name"
|
||||
v-model="form.productName"
|
||||
type="text"
|
||||
class="admin-input"
|
||||
placeholder="پارچه آبی"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="admin-form__field">
|
||||
<label for="product-color">رنگ / نوع</label>
|
||||
<input
|
||||
id="product-color"
|
||||
v-model="form.color"
|
||||
type="text"
|
||||
class="admin-input"
|
||||
placeholder="آبی"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="admin-form__row">
|
||||
<div class="admin-form__field">
|
||||
<label for="requested-meterage">
|
||||
متراژ درخواستی <span class="admin-form__required">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="requested-meterage"
|
||||
v-model.number="form.requestedMeterage"
|
||||
type="number"
|
||||
min="1"
|
||||
class="admin-input"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin-form__field">
|
||||
<label for="confirmed-meterage">متراژ تأیید شده</label>
|
||||
<input
|
||||
id="confirmed-meterage"
|
||||
v-model.number="form.confirmedMeterage"
|
||||
type="number"
|
||||
min="0"
|
||||
class="admin-input"
|
||||
/>
|
||||
</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="submitAddProduct"
|
||||
>
|
||||
افزودن به سفارش
|
||||
</button>
|
||||
</template>
|
||||
</BaseModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.pricing-page__summary {
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.pricing-page__order-meta {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.pricing-page__order-id {
|
||||
font-size: 1rem;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.pricing-page__customer {
|
||||
margin: 0 0 8px;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.pricing-page__table {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.pricing-page__add-btn {
|
||||
margin: 12px 16px 16px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.pricing-page__compact-items {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.pricing-page__item-index {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.pricing-page__compact-fields {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.pricing-page__compact-fields label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { provideOrdersPage } from '@/composables/useOrdersPage'
|
||||
import DesktopOrdersPage from '@/views/orders/components/DesktopOrdersPage.vue'
|
||||
import CompactOrdersPage from '@/views/orders/components/CompactOrdersPage.vue'
|
||||
|
||||
provideOrdersPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DesktopOrdersPage class="desktop-only" />
|
||||
<CompactOrdersPage class="compact-only" />
|
||||
</template>
|
||||
@@ -0,0 +1,159 @@
|
||||
<script setup lang="ts">
|
||||
import AdminIcon from '@/components/icons/AdminIcon.vue'
|
||||
import StatusBadge from '@/components/ui/StatusBadge.vue'
|
||||
import OrderDetailContent from '@/views/orders/components/OrderDetailContent.vue'
|
||||
import OrderAddModal from '@/views/orders/components/OrderAddModal.vue'
|
||||
import { useOrdersPageContext } from '@/composables/useOrdersPage'
|
||||
import { ORDER_TABS } from '@/utils/orderStatus'
|
||||
import { formatCurrency, formatDateTime, formatMeterage } from '@/utils/format'
|
||||
|
||||
const {
|
||||
activeTab,
|
||||
selectedOrderId,
|
||||
searchQuery,
|
||||
filteredOrders,
|
||||
selectedOrder,
|
||||
showDetailPanel,
|
||||
selectOrder,
|
||||
closeDetailPanel,
|
||||
settlementLabel,
|
||||
goPricing,
|
||||
goChecks,
|
||||
openAddModal,
|
||||
} = useOrdersPageContext()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="compact-orders">
|
||||
<div class="compact-page-header">
|
||||
<div class="compact-page-header__row">
|
||||
<div>
|
||||
<h2 class="compact-page-header__title">سفارش‌ها</h2>
|
||||
<p class="compact-page-header__breadcrumb">داشبورد / سفارش‌ها</p>
|
||||
</div>
|
||||
<div class="compact-page-header__actions">
|
||||
<button type="button" class="admin-btn admin-btn--outline admin-btn--sm">
|
||||
<AdminIcon name="filter" :size="16" />
|
||||
فیلتر
|
||||
</button>
|
||||
<button type="button" class="admin-btn admin-btn--primary admin-btn--sm" @click="openAddModal">
|
||||
سفارش جدید
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="orders-page__search admin-card">
|
||||
<AdminIcon name="search" :size="18" />
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="search"
|
||||
placeholder="جستجو در شماره سفارش، مشتری..."
|
||||
class="orders-page__search-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="admin-tabs compact-orders__tabs">
|
||||
<button
|
||||
v-for="tab in ORDER_TABS"
|
||||
:key="tab.key"
|
||||
type="button"
|
||||
class="admin-tab"
|
||||
:class="{ active: activeTab === tab.key }"
|
||||
@click="activeTab = tab.key"
|
||||
>
|
||||
{{ tab.label }}
|
||||
<template v-if="'count' in tab && tab.count"> ({{ tab.count }})</template>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="admin-card-list">
|
||||
<button
|
||||
v-for="order in filteredOrders"
|
||||
:key="order.id"
|
||||
type="button"
|
||||
class="admin-card-item"
|
||||
:class="{ selected: selectedOrderId === order.id }"
|
||||
@click="selectOrder(order, true)"
|
||||
>
|
||||
<div class="admin-card-item__header">
|
||||
<p class="admin-card-item__title">{{ order.orderNumber }}</p>
|
||||
<StatusBadge :status="order.status" />
|
||||
</div>
|
||||
<div class="admin-card-item__meta">
|
||||
<span><strong>مشتری:</strong> {{ order.customerName }}</span>
|
||||
<span><strong>متراژ:</strong> {{ formatMeterage(order.meterage) }}</span>
|
||||
<span><strong>مبلغ:</strong> {{ order.totalAmount ? formatCurrency(order.totalAmount) : '—' }}</span>
|
||||
<span>{{ formatDateTime(order.createdAt) }}</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="admin-detail-panel" :class="{ open: showDetailPanel && selectedOrder }">
|
||||
<div v-if="selectedOrder" class="admin-detail-panel__inner">
|
||||
<div class="admin-detail-panel__header">
|
||||
<button
|
||||
type="button"
|
||||
class="admin-detail-panel__back"
|
||||
aria-label="بازگشت به لیست"
|
||||
@click="closeDetailPanel"
|
||||
>
|
||||
<AdminIcon name="chevron-left" :size="20" />
|
||||
</button>
|
||||
<h2 class="admin-detail-panel__title">جزئیات سفارش</h2>
|
||||
</div>
|
||||
<div class="admin-detail-panel__body">
|
||||
<OrderDetailContent
|
||||
:order="selectedOrder"
|
||||
:settlement-label="settlementLabel"
|
||||
@pricing="goPricing(selectedOrder)"
|
||||
@checks="goChecks(selectedOrder)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<OrderAddModal />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.compact-orders__tabs {
|
||||
margin-bottom: 16px;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 4px 8px 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.orders-page__search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.orders-page__search-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 0.875rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.admin-card-item {
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.admin-detail-panel__inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: var(--color-bg);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,241 @@
|
||||
<script setup lang="ts">
|
||||
import AdminIcon from '@/components/icons/AdminIcon.vue'
|
||||
import StatusBadge from '@/components/ui/StatusBadge.vue'
|
||||
import BaseModal from '@/components/ui/BaseModal.vue'
|
||||
import OrderDetailContent from '@/views/orders/components/OrderDetailContent.vue'
|
||||
import OrderAddModal from '@/views/orders/components/OrderAddModal.vue'
|
||||
import { useOrdersPageContext } from '@/composables/useOrdersPage'
|
||||
import { ORDER_TABS } from '@/utils/orderStatus'
|
||||
import { formatCurrency, formatDateTime, formatMeterage } from '@/utils/format'
|
||||
|
||||
const {
|
||||
activeTab,
|
||||
selectedOrderId,
|
||||
searchQuery,
|
||||
filteredOrders,
|
||||
selectedOrder,
|
||||
showDetailModal,
|
||||
openOrderDetail,
|
||||
closeDetailModal,
|
||||
settlementLabel,
|
||||
goPricing,
|
||||
goChecks,
|
||||
openAddModal,
|
||||
} = useOrdersPageContext()
|
||||
|
||||
function handlePricing() {
|
||||
if (!selectedOrder.value) return
|
||||
closeDetailModal()
|
||||
goPricing(selectedOrder.value)
|
||||
}
|
||||
|
||||
function handleChecks() {
|
||||
if (!selectedOrder.value) return
|
||||
closeDetailModal()
|
||||
goChecks(selectedOrder.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="orders-page">
|
||||
<div class="orders-page__list-panel admin-card">
|
||||
<div class="orders-page__list-header">
|
||||
<div>
|
||||
<h2 class="orders-page__list-title">سفارش‌ها</h2>
|
||||
<p class="orders-page__breadcrumb">داشبورد / سفارش‌ها</p>
|
||||
</div>
|
||||
<div class="orders-page__list-actions">
|
||||
<button type="button" class="admin-btn admin-btn--outline admin-btn--sm">
|
||||
<AdminIcon name="filter" :size="16" />
|
||||
فیلتر
|
||||
</button>
|
||||
<button type="button" class="admin-btn admin-btn--primary admin-btn--sm" @click="openAddModal">
|
||||
سفارش جدید
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="orders-page__search">
|
||||
<AdminIcon name="search" :size="18" />
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="search"
|
||||
placeholder="جستجو در شماره سفارش، مشتری..."
|
||||
class="orders-page__search-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="admin-tabs">
|
||||
<button
|
||||
v-for="tab in ORDER_TABS"
|
||||
:key="tab.key"
|
||||
type="button"
|
||||
class="admin-tab"
|
||||
:class="{ active: activeTab === tab.key }"
|
||||
@click="activeTab = tab.key"
|
||||
>
|
||||
{{ tab.label }}
|
||||
<template v-if="'count' in tab && tab.count"> ({{ tab.count }})</template>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="admin-table-wrap">
|
||||
<table class="admin-table admin-table--compact">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>شماره سفارش</th>
|
||||
<th>مشتری</th>
|
||||
<th>روش تسویه</th>
|
||||
<th>مبلغ کل</th>
|
||||
<th>متراژ</th>
|
||||
<th>وضعیت</th>
|
||||
<th>تاریخ ثبت</th>
|
||||
<th>عملیات</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="order in filteredOrders"
|
||||
:key="order.id"
|
||||
:class="{ 'is-selected': selectedOrderId === order.id }"
|
||||
@click="openOrderDetail(order)"
|
||||
>
|
||||
<td>{{ order.orderNumber }}</td>
|
||||
<td>{{ order.customerName }}</td>
|
||||
<td>{{ settlementLabel(order.settlementMethod) }}</td>
|
||||
<td>{{ order.totalAmount ? formatCurrency(order.totalAmount) : '—' }}</td>
|
||||
<td>{{ formatMeterage(order.meterage) }}</td>
|
||||
<td><StatusBadge :status="order.status" /></td>
|
||||
<td>{{ formatDateTime(order.createdAt) }}</td>
|
||||
<td>
|
||||
<button type="button" class="orders-page__more-btn" @click.stop>
|
||||
<AdminIcon name="more" :size="18" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="admin-pagination">
|
||||
<span>نمایش ۱ تا ۷ از ۱۰۳ سفارش</span>
|
||||
<div class="admin-pagination__pages">
|
||||
<button type="button" class="admin-pagination__page active">۱</button>
|
||||
<button type="button" class="admin-pagination__page">۲</button>
|
||||
<button type="button" class="admin-pagination__page">۳</button>
|
||||
<span>...</span>
|
||||
<button type="button" class="admin-pagination__page">۱۲</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<BaseModal
|
||||
:open="showDetailModal && !!selectedOrder"
|
||||
title="جزئیات سفارش"
|
||||
size="xl"
|
||||
@close="closeDetailModal"
|
||||
>
|
||||
<template v-if="selectedOrder">
|
||||
<p class="orders-page__breadcrumb orders-page__modal-breadcrumb">
|
||||
سفارش‌ها / جزئیات سفارش
|
||||
</p>
|
||||
<OrderDetailContent
|
||||
:order="selectedOrder"
|
||||
layout="desktop"
|
||||
:settlement-label="settlementLabel"
|
||||
@pricing="handlePricing"
|
||||
@checks="handleChecks"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<button type="button" class="admin-btn admin-btn--outline admin-btn--sm">
|
||||
<AdminIcon name="sms" :size="16" />
|
||||
ارسال پیامک
|
||||
</button>
|
||||
<button type="button" class="admin-btn admin-btn--outline admin-btn--sm">
|
||||
<AdminIcon name="print" :size="16" />
|
||||
چاپ
|
||||
</button>
|
||||
</template>
|
||||
</BaseModal>
|
||||
|
||||
<OrderAddModal />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.orders-page {
|
||||
min-height: calc(100dvh - var(--header-height) - 48px);
|
||||
}
|
||||
|
||||
.orders-page__list-panel {
|
||||
padding: 20px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.orders-page__list-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.orders-page__list-title {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.orders-page__breadcrumb {
|
||||
margin: 4px 0 0;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.orders-page__list-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.orders-page__search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-border-light);
|
||||
margin-bottom: 16px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.orders-page__search-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 0.875rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.orders-page__more-btn {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--color-text-muted);
|
||||
padding: 4px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.admin-table tbody tr {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.admin-table tbody tr.is-selected {
|
||||
background: var(--color-primary-soft);
|
||||
}
|
||||
|
||||
.orders-page__modal-breadcrumb {
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,88 @@
|
||||
<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>
|
||||
@@ -0,0 +1,183 @@
|
||||
<script setup lang="ts">
|
||||
import AdminIcon from '@/components/icons/AdminIcon.vue'
|
||||
import StatusBadge from '@/components/ui/StatusBadge.vue'
|
||||
import { formatMeterage } from '@/utils/format'
|
||||
import type { Order } from '@/types'
|
||||
|
||||
defineProps<{
|
||||
order: Order
|
||||
settlementLabel: (method: string) => string
|
||||
layout?: 'desktop' | 'compact'
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
pricing: []
|
||||
checks: []
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="order-detail">
|
||||
<div class="order-detail__id">
|
||||
<strong>{{ order.orderNumber }}</strong>
|
||||
<StatusBadge :status="order.status" />
|
||||
</div>
|
||||
|
||||
<div class="order-detail__section">
|
||||
<h3 class="order-detail__section-title">اطلاعات مشتری</h3>
|
||||
<div class="admin-info-grid">
|
||||
<div class="admin-info-row">
|
||||
<AdminIcon name="building" :size="16" />
|
||||
<span class="admin-info-row__label">شرکت:</span>
|
||||
<span class="admin-info-row__value">{{ order.customerName }}</span>
|
||||
</div>
|
||||
<div class="admin-info-row">
|
||||
<AdminIcon name="phone" :size="16" />
|
||||
<span class="admin-info-row__label">تلفن:</span>
|
||||
<span class="admin-info-row__value">{{ order.customerPhone ?? '—' }}</span>
|
||||
</div>
|
||||
<div class="admin-info-row">
|
||||
<AdminIcon name="id-card" :size="16" />
|
||||
<span class="admin-info-row__label">شناسه ملی:</span>
|
||||
<span class="admin-info-row__value">{{ order.customerNationalId ?? '—' }}</span>
|
||||
</div>
|
||||
<div class="admin-info-row">
|
||||
<AdminIcon name="user" :size="16" />
|
||||
<span class="admin-info-row__label">نوع مشتری:</span>
|
||||
<span class="admin-info-row__value">{{ order.customerType ?? '—' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="order-detail__section">
|
||||
<h3 class="order-detail__section-title">اطلاعات سفارش</h3>
|
||||
<div class="admin-info-grid">
|
||||
<div class="admin-info-row">
|
||||
<span class="admin-info-row__label">شرکت:</span>
|
||||
<span class="admin-info-row__value">{{ order.companyName }}</span>
|
||||
</div>
|
||||
<div class="admin-info-row">
|
||||
<span class="admin-info-row__label">روش تسویه:</span>
|
||||
<span class="admin-info-row__value">
|
||||
{{ settlementLabel(order.settlementMethod) }} — مختص
|
||||
</span>
|
||||
</div>
|
||||
<div class="admin-info-row">
|
||||
<span class="admin-info-row__label">متراژ کل:</span>
|
||||
<span class="admin-info-row__value">{{ formatMeterage(order.meterage) }}</span>
|
||||
</div>
|
||||
<div class="admin-info-row">
|
||||
<span class="admin-info-row__label">مبلغ کل:</span>
|
||||
<span class="admin-info-row__value">پس از قیمت‌گذاری</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="order.items?.length" class="order-detail__section">
|
||||
<h3 class="order-detail__section-title">محصولات سفارش</h3>
|
||||
<div v-if="layout === 'desktop'" class="admin-table-wrap">
|
||||
<table class="admin-table admin-table--compact">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>کالیته</th>
|
||||
<th>محصول</th>
|
||||
<th>رنگ / نوع</th>
|
||||
<th>متراژ</th>
|
||||
<th>قیمت تأیید شده</th>
|
||||
<th>مبلغ کل</th>
|
||||
<th>وضعیت</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in order.items" :key="item.id">
|
||||
<td>{{ item.catalogCode }}</td>
|
||||
<td>{{ item.productName }}</td>
|
||||
<td>{{ item.color }}</td>
|
||||
<td>{{ item.confirmedMeterage ?? item.requestedMeterage }}</td>
|
||||
<td>—</td>
|
||||
<td>—</td>
|
||||
<td><StatusBadge status="pending_review" /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<ul v-else class="order-detail__items">
|
||||
<li v-for="item in order.items" :key="item.id" class="order-detail__item">
|
||||
<strong>{{ item.productName }}</strong>
|
||||
<span>{{ item.catalogCode }} · {{ item.color }}</span>
|
||||
<span>{{ item.confirmedMeterage ?? item.requestedMeterage }} متر</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="order-detail__footer">
|
||||
<button type="button" class="admin-btn admin-btn--primary admin-btn--sm" @click="$emit('pricing')">
|
||||
قیمت‌گذاری سفارش
|
||||
</button>
|
||||
<button
|
||||
v-if="order.settlementMethod === 'check'"
|
||||
type="button"
|
||||
class="admin-btn admin-btn--outline admin-btn--sm"
|
||||
@click="$emit('checks')"
|
||||
>
|
||||
مدیریت چک‌ها
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.order-detail__id {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.order-detail__section {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
}
|
||||
|
||||
.order-detail__section-title {
|
||||
margin: 0 0 12px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.order-detail__items {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.order-detail__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: 10px 12px;
|
||||
background: var(--color-border-light);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.order-detail__item strong {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.order-detail__item span {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.order-detail__footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user