kavehhn/mbmanager-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(gallery): resolve image zoom stretching and add rich viewer features
deploy-chabokan / deploy (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
kavehhn
2026-08-30 11:25:31 +03:30
parent 7c56d2e66a
commit 195d0300a0
48 changed files with 2448 additions and 2163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/pages/WarehouseItems/WarehouseItemStockView.vue
+226 -168
View File
@@ -29,28 +29,14 @@ const txForm = ref({
warehouseId: '',
quantity: null,
reason: '',
note: '',
note: ''
});
const IN_REASONS = [
'خرید از تامین‌کننده',
'برگشت از کارگاه',
'انتقال از انبار دیگر',
'اهدا / دریافت رایگان',
'موجودی اولیه',
'سایر',
];
const IN_REASONS = ['خرید از تامین‌کننده', 'برگشت از کارگاه', 'انتقال از انبار دیگر', 'اهدا / دریافت رایگان', 'موجودی اولیه', 'سایر'];
const OUT_REASONS = [
'مصرف در پروژه',
'انتقال به انبار دیگر',
'فروش / واگذاری',
'ضایعات',
'مفقودی',
'سایر',
];
const OUT_REASONS = ['مصرف در پروژه', 'انتقال به انبار دیگر', 'فروش / واگذاری', 'ضایعات', 'مفقودی', 'سایر'];
const reasons = computed(() => txForm.value.type === 'IN' ? IN_REASONS : OUT_REASONS);
const reasons = computed(() => (txForm.value.type === 'IN' ? IN_REASONS : OUT_REASONS));
onMounted(async () => {
await Promise.all([loadStock(), loadWarehouses()]);
@@ -106,7 +92,7 @@ const submitTransaction = async () => {
type: txForm.value.type,
quantity: txForm.value.quantity,
reason: txForm.value.reason,
note: txForm.value.note,
note: txForm.value.note
});
toast.add({
severity: 'success',
@@ -158,12 +144,16 @@ const confirmDeleteTransaction = (tx, event) => {
const formatDate = (d) => {
if (!d) return '—';
return new Intl.DateTimeFormat('fa-IR', {
year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit'
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
}).format(new Date(d));
};
const getWarehouseName = (id) => {
const w = warehouses.value.find(w => w._id === id);
const w = warehouses.value.find((w) => w._id === id);
return w ? w.name : id;
};
</script>
@@ -171,7 +161,6 @@ const getWarehouseName = (id) => {
<template>
<ConfirmPopup />
<div class="stock-view-page">
<!-- ─── Back + Title ──────────────────────────────────────────── -->
<div class="page-header">
<Button icon="pi pi-arrow-right" text rounded @click="router.back()" />
@@ -183,26 +172,9 @@ const getWarehouseName = (id) => {
<p class="page-subtitle">مدیریت موجودی انبار</p>
</div>
<div class="header-actions" v-if="stockData">
<Button
icon="pi pi-plus"
label="افزودن موجودی"
severity="success"
@click="openTransactionDialog('IN')"
/>
<Button
icon="pi pi-minus"
label="کسر موجودی"
severity="danger"
outlined
@click="openTransactionDialog('OUT')"
/>
<Button
:icon="showTransactionHistory ? 'pi pi-times' : 'pi pi-history'"
:label="showTransactionHistory ? 'بستن تاریخچه' : 'تاریخچه تراکنش‌ها'"
severity="secondary"
outlined
@click="toggleHistory"
/>
<Button icon="pi pi-plus" label="افزودن موجودی" severity="success" @click="openTransactionDialog('IN')" />
<Button icon="pi pi-minus" label="کسر موجودی" severity="danger" outlined @click="openTransactionDialog('OUT')" />
<Button :icon="showTransactionHistory ? 'pi pi-times' : 'pi pi-history'" :label="showTransactionHistory ? 'بستن تاریخچه' : 'تاریخچه تراکنش‌ها'" severity="secondary" outlined @click="toggleHistory" />
</div>
</div>
@@ -211,7 +183,6 @@ const getWarehouseName = (id) => {
</div>
<div v-else-if="stockData" class="content-grid">
<!-- ─── Total Summary Card ────────────────────────────────── -->
<div class="summary-card">
<div class="summary-icon">
@@ -280,7 +251,13 @@ const getWarehouseName = (id) => {
text
rounded
v-tooltip.top="'افزودن موجودی'"
@click="() => { txForm.warehouseId = data.warehouse?._id; openTransactionDialog('IN'); txForm.warehouseId = data.warehouse?._id; }"
@click="
() => {
txForm.warehouseId = data.warehouse?._id;
openTransactionDialog('IN');
txForm.warehouseId = data.warehouse?._id;
}
"
/>
<Button
icon="pi pi-minus"
@@ -289,7 +266,13 @@ const getWarehouseName = (id) => {
text
rounded
v-tooltip.top="'کسر موجودی'"
@click="() => { txForm.warehouseId = data.warehouse?._id; openTransactionDialog('OUT'); txForm.warehouseId = data.warehouse?._id; }"
@click="
() => {
txForm.warehouseId = data.warehouse?._id;
openTransactionDialog('OUT');
txForm.warehouseId = data.warehouse?._id;
}
"
/>
</div>
</template>
@@ -306,30 +289,20 @@ const getWarehouseName = (id) => {
<span class="history-count">({{ totalTransactions }} تراکنش)</span>
</h3>
<DataTable
:value="transactions"
:loading="transactionsLoading"
stripedRows
responsiveLayout="scroll"
>
<DataTable :value="transactions" :loading="transactionsLoading" stripedRows responsiveLayout="scroll">
<template #empty>
<div class="empty-state"><p>هیچ تراکنشی یافت نشد</p></div>
</template>
<Column header="نوع" style="width:8%">
<Column header="نوع" style="width: 8%">
<template #body="{ data }">
<Tag
:severity="data.type === 'IN' ? 'success' : 'danger'"
:value="data.type === 'IN' ? 'ورود' : 'خروج'"
/>
<Tag :severity="data.type === 'IN' ? 'success' : 'danger'" :value="data.type === 'IN' ? 'ورود' : 'خروج'" />
</template>
</Column>
<Column header="مقدار">
<template #body="{ data }">
<span class="qty-value" :class="data.type === 'IN' ? 'in-qty' : 'out-qty'">
{{ data.type === 'OUT' ? '-' : '+' }}{{ data.quantity.toLocaleString('fa-IR') }} {{ data.unit }}
</span>
<span class="qty-value" :class="data.type === 'IN' ? 'in-qty' : 'out-qty'"> {{ data.type === 'OUT' ? '-' : '+' }}{{ data.quantity.toLocaleString('fa-IR') }} {{ data.unit }} </span>
</template>
</Column>
@@ -352,17 +325,9 @@ const getWarehouseName = (id) => {
<template #body="{ data }">{{ formatDate(data.date) }}</template>
</Column>
<Column style="width:5%">
<Column style="width: 5%">
<template #body="{ data }">
<Button
icon="pi pi-trash"
text
rounded
severity="danger"
size="small"
v-tooltip.top="'حذف تراکنش'"
@click="confirmDeleteTransaction(data, $event)"
/>
<Button icon="pi pi-trash" text rounded severity="danger" size="small" v-tooltip.top="'حذف تراکنش'" @click="confirmDeleteTransaction(data, $event)" />
</template>
</Column>
</DataTable>
@@ -371,70 +336,28 @@ const getWarehouseName = (id) => {
</div>
<!-- ─── Transaction Dialog ────────────────────────────────────── -->
<Dialog
v-model:visible="showTransactionDialog"
:header="txForm.type === 'IN' ? 'افزودن موجودی' : 'کسر موجودی'"
:style="{ width: '500px' }"
modal
dir="rtl"
>
<Dialog v-model:visible="showTransactionDialog" :header="txForm.type === 'IN' ? 'افزودن موجودی' : 'کسر موجودی'" :style="{ width: '500px' }" modal dir="rtl">
<div class="tx-form">
<!-- Type toggle -->
<div class="type-toggle">
<button
class="type-btn"
:class="{ active: txForm.type === 'IN', 'in-type': true }"
@click="txForm.type = 'IN'"
type="button"
>
<i class="pi pi-arrow-down"></i> ورود به انبار
</button>
<button
class="type-btn"
:class="{ active: txForm.type === 'OUT', 'out-type': true }"
@click="txForm.type = 'OUT'"
type="button"
>
<i class="pi pi-arrow-up"></i> خروج از انبار
</button>
<button class="type-btn" :class="{ active: txForm.type === 'IN', 'in-type': true }" @click="txForm.type = 'IN'" type="button"><i class="pi pi-arrow-down"></i> ورود به انبار</button>
<button class="type-btn" :class="{ active: txForm.type === 'OUT', 'out-type': true }" @click="txForm.type = 'OUT'" type="button"><i class="pi pi-arrow-up"></i> خروج از انبار</button>
</div>
<div class="form-field">
<label>انبار <span class="required">*</span></label>
<Select
v-model="txForm.warehouseId"
:options="warehouses"
optionLabel="name"
optionValue="_id"
placeholder="انتخاب انبار..."
class="w-full"
/>
<Select v-model="txForm.warehouseId" :options="warehouses" optionLabel="name" optionValue="_id" placeholder="انتخاب انبار..." class="w-full" />
</div>
<div class="form-field">
<label>مقدار ({{ stockData?.unit }}) <span class="required">*</span></label>
<InputNumber
v-model="txForm.quantity"
:min="0.001"
:minFractionDigits="0"
:maxFractionDigits="3"
class="w-full"
placeholder="مقدار را وارد کنید"
:pt="{ input: { dir: 'ltr' } }"
/>
<InputNumber v-model="txForm.quantity" :min="0.001" :minFractionDigits="0" :maxFractionDigits="3" class="w-full" placeholder="مقدار را وارد کنید" :pt="{ input: { dir: 'ltr' } }" />
</div>
<div class="form-field">
<label>دلیل <span class="required">*</span></label>
<div class="reason-chips">
<button
v-for="r in reasons"
:key="r"
class="reason-chip"
:class="{ active: txForm.reason === r }"
type="button"
@click="txForm.reason = r"
>{{ r }}</button>
<button v-for="r in reasons" :key="r" class="reason-chip" :class="{ active: txForm.reason === r }" type="button" @click="txForm.reason = r">{{ r }}</button>
</div>
<InputText v-model="txForm.reason" placeholder="یا دلیل سفارشی وارد کنید..." class="w-full mt-2" />
</div>
@@ -449,11 +372,7 @@ const getWarehouseName = (id) => {
<i class="pi pi-info-circle"></i>
<span>
موجودی فعلی در این انبار:
<strong>
{{
(stockData.stocks.find(s => s.warehouse?._id === txForm.warehouseId)?.quantity || 0).toLocaleString('fa-IR')
}} {{ stockData?.unit }}
</strong>
<strong> {{ (stockData.stocks.find((s) => s.warehouse?._id === txForm.warehouseId)?.quantity || 0).toLocaleString('fa-IR') }} {{ stockData?.unit }} </strong>
</span>
</div>
</div>
@@ -473,7 +392,10 @@ const getWarehouseName = (id) => {
</template>
<style scoped>
.stock-view-page { padding: 1.5rem; direction: rtl; }
.stock-view-page {
padding: 1.5rem;
direction: rtl;
}
/* Header */
.page-header {
@@ -483,7 +405,9 @@ const getWarehouseName = (id) => {
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.header-text { flex: 1; }
.header-text {
flex: 1;
}
.page-title {
margin: 0;
font-size: 1.4rem;
@@ -492,7 +416,9 @@ const getWarehouseName = (id) => {
align-items: center;
gap: 0.75rem;
}
.item-name-fa { color: var(--text-color); }
.item-name-fa {
color: var(--text-color);
}
.item-name-en {
font-size: 0.95rem;
color: var(--text-color-secondary);
@@ -500,13 +426,29 @@ const getWarehouseName = (id) => {
display: inline-block;
font-weight: 400;
}
.page-subtitle { margin: 0; color: var(--text-color-secondary); font-size: 0.875rem; }
.header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.page-subtitle {
margin: 0;
color: var(--text-color-secondary);
font-size: 0.875rem;
}
.header-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.loading-container { display: flex; justify-content: center; padding: 4rem; }
.loading-container {
display: flex;
justify-content: center;
padding: 4rem;
}
/* Content grid */
.content-grid { display: flex; flex-direction: column; gap: 1.5rem; }
.content-grid {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
/* Summary card */
.summary-card {
@@ -517,22 +459,46 @@ const getWarehouseName = (id) => {
display: flex;
align-items: center;
gap: 1.5rem;
box-shadow: 0 8px 30px rgba(99,102,241,0.35);
box-shadow: 0 8px 30px rgba(99, 102, 241, 0.35);
}
.summary-icon {
width: 64px; height: 64px;
background: rgba(255,255,255,0.2);
width: 64px;
height: 64px;
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
display: flex; align-items: center; justify-content: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
flex-shrink: 0;
}
.summary-details { flex: 1; }
.summary-label { font-size: 0.875rem; opacity: 0.85; display: block; margin-bottom: 0.3rem; }
.summary-value { display: flex; align-items: baseline; gap: 0.5rem; }
.summary-value .qty { font-size: 2.5rem; font-weight: 700; line-height: 1; }
.summary-value .unit { font-size: 1.1rem; opacity: 0.9; }
.unit-en-label { font-size: 0.8rem; opacity: 0.7; }
.summary-details {
flex: 1;
}
.summary-label {
font-size: 0.875rem;
opacity: 0.85;
display: block;
margin-bottom: 0.3rem;
}
.summary-value {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
.summary-value .qty {
font-size: 2.5rem;
font-weight: 700;
line-height: 1;
}
.summary-value .unit {
font-size: 1.1rem;
opacity: 0.9;
}
.unit-en-label {
font-size: 0.8rem;
opacity: 0.7;
}
.summary-locations {
font-size: 0.875rem;
opacity: 0.85;
@@ -542,7 +508,10 @@ const getWarehouseName = (id) => {
}
/* Table card */
.stock-table-card, .history-card { border-radius: 16px; }
.stock-table-card,
.history-card {
border-radius: 16px;
}
.card-title {
font-size: 1rem;
font-weight: 600;
@@ -551,38 +520,105 @@ const getWarehouseName = (id) => {
align-items: center;
gap: 0.5rem;
}
.history-count { font-size: 0.8rem; color: var(--text-color-secondary); font-weight: 400; }
.history-count {
font-size: 0.8rem;
color: var(--text-color-secondary);
font-weight: 400;
}
/* Warehouse cells */
.warehouse-name { font-weight: 600; }
.warehouse-code { font-size: 0.75rem; color: var(--text-color-secondary); font-family: monospace; }
.warehouse-address { font-size: 0.85rem; color: var(--text-color-secondary); }
.warehouse-name {
font-weight: 600;
}
.warehouse-code {
font-size: 0.75rem;
color: var(--text-color-secondary);
font-family: monospace;
}
.warehouse-address {
font-size: 0.85rem;
color: var(--text-color-secondary);
}
/* Stock quantity */
.stock-quantity { display: flex; align-items: baseline; gap: 0.4rem; }
.qty-value { font-size: 1.2rem; font-weight: 700; }
.qty-unit { font-size: 0.8rem; color: var(--text-color-secondary); }
.zero-stock .qty-value { color: #ef4444; }
.low-stock .qty-value { color: #f59e0b; }
.in-qty { color: #22c55e; font-weight: 700; }
.out-qty { color: #ef4444; font-weight: 700; }
.stock-quantity {
display: flex;
align-items: baseline;
gap: 0.4rem;
}
.qty-value {
font-size: 1.2rem;
font-weight: 700;
}
.qty-unit {
font-size: 0.8rem;
color: var(--text-color-secondary);
}
.zero-stock .qty-value {
color: #ef4444;
}
.low-stock .qty-value {
color: #f59e0b;
}
.in-qty {
color: #22c55e;
font-weight: 700;
}
.out-qty {
color: #ef4444;
font-weight: 700;
}
.row-actions { display: flex; gap: 0.25rem; }
.reason-text { font-size: 0.875rem; }
.note-text { font-size: 0.8rem; color: var(--text-color-secondary); }
.row-actions {
display: flex;
gap: 0.25rem;
}
.reason-text {
font-size: 0.875rem;
}
.note-text {
font-size: 0.8rem;
color: var(--text-color-secondary);
}
.empty-state { text-align: center; padding: 2rem; color: var(--text-color-secondary); }
.empty-state {
text-align: center;
padding: 2rem;
color: var(--text-color-secondary);
}
/* Slide animation */
.slide-fade-enter-active, .slide-fade-leave-active { transition: all 0.3s ease; }
.slide-fade-enter-from { opacity: 0; transform: translateY(-12px); }
.slide-fade-leave-to { opacity: 0; transform: translateY(-12px); }
.slide-fade-enter-active,
.slide-fade-leave-active {
transition: all 0.3s ease;
}
.slide-fade-enter-from {
opacity: 0;
transform: translateY(-12px);
}
.slide-fade-leave-to {
opacity: 0;
transform: translateY(-12px);
}
/* TX form */
.tx-form { display: flex; flex-direction: column; gap: 1rem; }
.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-field label { font-weight: 600; font-size: 0.9rem; }
.required { color: #ef4444; }
.tx-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.form-field {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.form-field label {
font-weight: 600;
font-size: 0.9rem;
}
.required {
color: #ef4444;
}
.type-toggle {
display: grid;
@@ -606,11 +642,25 @@ const getWarehouseName = (id) => {
transition: all 0.2s;
color: var(--text-color);
}
.type-btn.in-type.active { background: #dcfce7; border-color: #22c55e; color: #16a34a; }
.type-btn.out-type.active { background: #fee2e2; border-color: #ef4444; color: #dc2626; }
.type-btn:hover { border-color: var(--primary-color); }
.type-btn.in-type.active {
background: #dcfce7;
border-color: #22c55e;
color: #16a34a;
}
.type-btn.out-type.active {
background: #fee2e2;
border-color: #ef4444;
color: #dc2626;
}
.type-btn:hover {
border-color: var(--primary-color);
}
.reason-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.reason-chips {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.reason-chip {
border: 1.5px solid var(--surface-border);
background: var(--surface-50);
@@ -621,8 +671,16 @@ const getWarehouseName = (id) => {
transition: all 0.2s;
color: var(--text-color);
}
.reason-chip:hover { border-color: var(--primary-color); color: var(--primary-color); }
.reason-chip.active { background: var(--primary-50); border-color: var(--primary-color); color: var(--primary-color); font-weight: 600; }
.reason-chip:hover {
border-color: var(--primary-color);
color: var(--primary-color);
}
.reason-chip.active {
background: var(--primary-50);
border-color: var(--primary-color);
color: var(--primary-color);
font-weight: 600;
}
.stock-warning {
background: #fef3c7;