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/ListWarehouseItems.vue
+68 -81
View File
@@ -18,7 +18,6 @@ const perPage = ref(Number(route.query.per_page) || 20);
const searchPhrase = ref(route.query.search || '');
const loading = ref(true);
// Create/Edit dialog
const showDialog = ref(false);
const editMode = ref(false);
@@ -48,7 +47,7 @@ const UNITS = [
{ fa: 'رول', en: 'Roll' },
{ fa: 'جعبه', en: 'Box' },
{ fa: 'کیسه', en: 'Bag' },
{ fa: 'پالت', en: 'Pallet' },
{ fa: 'پالت', en: 'Pallet' }
];
let searchTimeout = null;
@@ -64,12 +63,16 @@ watch(searchPhrase, (val) => {
}, 400);
});
watch(() => route.query, () => {
page.value = Number(route.query.page) || 1;
perPage.value = Number(route.query.per_page) || 20;
searchPhrase.value = route.query.search || '';
loadData();
}, { deep: true });
watch(
() => route.query,
() => {
page.value = Number(route.query.page) || 1;
perPage.value = Number(route.query.per_page) || 20;
searchPhrase.value = route.query.search || '';
loadData();
},
{ deep: true }
);
const loadData = async () => {
loading.value = true;
@@ -169,7 +172,6 @@ const viewStock = (itemId) => {
<template>
<ConfirmPopup />
<div class="warehouse-items-page">
<!-- ─── Header ─────────────────────────────────────────────────── -->
<div class="page-header">
<div class="header-content">
@@ -182,12 +184,7 @@ const viewStock = (itemId) => {
</div>
</div>
<div class="header-actions">
<Button
label="افزودن قلم جدید"
icon="pi pi-plus"
class="create-btn"
@click="openCreateDialog"
/>
<Button label="افزودن قلم جدید" icon="pi pi-plus" class="create-btn" @click="openCreateDialog" />
</div>
</div>
@@ -233,15 +230,14 @@ const viewStock = (itemId) => {
</div>
</template>
<Column field="code" header="کد" style="width:8%">
<Column field="code" header="کد" style="width: 8%">
<template #body="{ data }">
<span class="code-badge" v-if="data.code">{{ data.code }}</span>
<span class="text-muted" v-else>—</span>
</template>
</Column>
<Column field="nameFa" header="نام فارسی" sortable style="width:18%">
<Column field="nameFa" header="نام فارسی" sortable style="width: 18%">
<template #body="{ data }">
<div class="item-name">
<span class="name-fa">{{ data.nameFa }}</span>
@@ -249,58 +245,37 @@ const viewStock = (itemId) => {
</template>
</Column>
<Column field="nameEn" header="نام انگلیسی" sortable style="width:18%">
<Column field="nameEn" header="نام انگلیسی" sortable style="width: 18%">
<template #body="{ data }">
<span class="name-en">{{ data.nameEn }}</span>
</template>
</Column>
<Column header="واحد" style="width:12%">
<Column header="واحد" style="width: 12%">
<template #body="{ data }">
<span class="unit-badge">{{ data.unitFa }} / {{ data.unitEn }}</span>
</template>
</Column>
<Column field="category" header="دسته‌بندی" style="width:14%">
<Column field="category" header="دسته‌بندی" style="width: 14%">
<template #body="{ data }">
<span v-if="data.category" class="category-chip">{{ data.category }}</span>
<span v-else class="text-muted">—</span>
</template>
</Column>
<Column field="isActive" header="وضعیت" style="width:9%">
<Column field="isActive" header="وضعیت" style="width: 9%">
<template #body="{ data }">
<Tag :severity="data.isActive ? 'success' : 'danger'"
:value="data.isActive ? 'فعال' : 'غیرفعال'" />
<Tag :severity="data.isActive ? 'success' : 'danger'" :value="data.isActive ? 'فعال' : 'غیرفعال'" />
</template>
</Column>
<Column header="عملیات" style="width:21%">
<Column header="عملیات" style="width: 21%">
<template #body="{ data }">
<div class="action-buttons">
<Button
icon="pi pi-chart-bar"
outlined
rounded
severity="info"
v-tooltip.top="'مشاهده موجودی'"
@click="viewStock(data._id)"
/>
<Button
icon="pi pi-pencil"
outlined
rounded
v-tooltip.top="'ویرایش'"
@click="openEditDialog(data)"
/>
<Button
icon="pi pi-ban"
outlined
rounded
severity="danger"
v-tooltip.top="'غیرفعال‌سازی'"
@click="confirmDelete(data, $event)"
/>
<Button icon="pi pi-chart-bar" outlined rounded severity="info" v-tooltip.top="'مشاهده موجودی'" @click="viewStock(data._id)" />
<Button icon="pi pi-pencil" outlined rounded v-tooltip.top="'ویرایش'" @click="openEditDialog(data)" />
<Button icon="pi pi-ban" outlined rounded severity="danger" v-tooltip.top="'غیرفعال‌سازی'" @click="confirmDelete(data, $event)" />
</div>
</template>
</Column>
@@ -308,13 +283,7 @@ const viewStock = (itemId) => {
</div>
<!-- ─── Create/Edit Dialog ──────────────────────────────────────── -->
<Dialog
v-model:visible="showDialog"
:header="editMode ? 'ویرایش قلم انبار' : 'افزودن قلم جدید'"
:style="{ width: '580px' }"
modal
:dir="'rtl'"
>
<Dialog v-model:visible="showDialog" :header="editMode ? 'ویرایش قلم انبار' : 'افزودن قلم جدید'" :style="{ width: '580px' }" modal :dir="'rtl'">
<div class="form-grid">
<div class="form-row">
<div class="form-field">
@@ -342,14 +311,7 @@ const viewStock = (itemId) => {
<div class="form-field full-width">
<label>واحد شمارش <span class="required">*</span></label>
<div class="unit-picker">
<button
v-for="u in UNITS"
:key="u.en"
class="unit-chip"
:class="{ active: form.unitFa === u.fa }"
type="button"
@click="onUnitSelect(u)"
>
<button v-for="u in UNITS" :key="u.en" class="unit-chip" :class="{ active: form.unitFa === u.fa }" type="button" @click="onUnitSelect(u)">
{{ u.fa }}
<span class="unit-en">{{ u.en }}</span>
</button>
@@ -368,12 +330,7 @@ const viewStock = (itemId) => {
<template #footer>
<Button label="انصراف" icon="pi pi-times" text @click="showDialog = false" />
<Button
:label="editMode ? 'ذخیره تغییرات' : 'ایجاد قلم'"
icon="pi pi-check"
:loading="submitting"
@click="submitForm"
/>
<Button :label="editMode ? 'ذخیره تغییرات' : 'ایجاد قلم'" icon="pi pi-check" :loading="submitting" @click="submitForm" />
</template>
</Dialog>
</div>
@@ -443,7 +400,9 @@ const viewStock = (itemId) => {
font-size: 1rem;
font-weight: 600;
}
.search-input { width: 260px; }
.search-input {
width: 260px;
}
/* Empty state */
.empty-state {
@@ -467,7 +426,9 @@ const viewStock = (itemId) => {
font-size: 0.8rem;
font-weight: 600;
}
.name-fa { font-weight: 600; }
.name-fa {
font-weight: 600;
}
.name-en {
color: var(--text-color-secondary);
font-size: 0.875rem;
@@ -475,7 +436,7 @@ const viewStock = (itemId) => {
display: inline-block;
}
.unit-badge {
background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.1));
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
color: #6366f1;
padding: 3px 10px;
border-radius: 20px;
@@ -488,7 +449,10 @@ const viewStock = (itemId) => {
border-radius: 20px;
font-size: 0.8rem;
}
.text-muted { color: var(--text-color-secondary); opacity: 0.5; }
.text-muted {
color: var(--text-color-secondary);
opacity: 0.5;
}
/* Actions */
.action-buttons {
@@ -498,12 +462,31 @@ const viewStock = (itemId) => {
}
/* Form */
.form-grid { display: flex; flex-direction: column; gap: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-field.full-width { grid-column: span 2; }
.form-field label { font-weight: 600; font-size: 0.9rem; }
.required { color: #ef4444; }
.form-grid {
display: flex;
flex-direction: column;
gap: 1rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.form-field {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.form-field.full-width {
grid-column: span 2;
}
.form-field label {
font-weight: 600;
font-size: 0.9rem;
}
.required {
color: #ef4444;
}
/* Unit picker */
.unit-picker {
@@ -526,10 +509,14 @@ const viewStock = (itemId) => {
transition: all 0.2s;
color: var(--text-color);
}
.unit-chip:hover { border-color: #6366f1; color: #6366f1; background: rgba(99,102,241,0.06); }
.unit-chip:hover {
border-color: #6366f1;
color: #6366f1;
background: rgba(99, 102, 241, 0.06);
}
.unit-chip.active {
border-color: #6366f1;
background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.15));
background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
color: #6366f1;
}
.unit-en {