add guide for custome invoice
This commit is contained in:
parent
1bc05834f9
commit
29625b7afa
|
|
@ -23,10 +23,266 @@
|
|||
<v-tabs v-model="activeTab" color="primary" class="px-4">
|
||||
<v-tab value="business">قالب‌های کسب‌وکار</v-tab>
|
||||
<v-tab value="public">قالب‌های عمومی</v-tab>
|
||||
<v-tab value="help">راهنمای استفاده</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<div class="pa-4">
|
||||
|
||||
<!-- Help Tab Content -->
|
||||
<div v-if="activeTab === 'help'" class="help-content">
|
||||
<v-card class="mb-4">
|
||||
<v-card-title class="text-h6 d-flex align-center">
|
||||
<v-icon icon="mdi-help-circle" class="me-2" color="primary"></v-icon>
|
||||
راهنمای استفاده از افزونه فاکتور سفارشی
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="text-body-1">
|
||||
<p class="mb-4">
|
||||
این افزونه به شما امکان ایجاد و مدیریت قالب‌های فاکتور سفارشی را می‌دهد.
|
||||
شما می‌توانید قالب‌های خود را ایجاد کنید یا از قالب‌های عمومی موجود استفاده کنید.
|
||||
</p>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- Template Selection Guide -->
|
||||
<v-card class="mb-4">
|
||||
<v-card-title class="text-h6 d-flex align-center">
|
||||
<v-icon icon="mdi-cog" class="me-2" color="info"></v-icon>
|
||||
انتخاب قالب برای انواع مختلف اسناد
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="text-body-1">
|
||||
<p class="mb-3">
|
||||
برای استفاده از قالب‌های سفارشی در فاکتورهای مختلف، مراحل زیر را دنبال کنید:
|
||||
</p>
|
||||
|
||||
<!-- Step Indicator -->
|
||||
<div class="d-flex align-center mb-4">
|
||||
<v-chip
|
||||
:color="stepperStep >= 1 ? 'primary' : 'grey'"
|
||||
variant="flat"
|
||||
class="me-2"
|
||||
>
|
||||
۱
|
||||
</v-chip>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
<v-chip
|
||||
:color="stepperStep >= 2 ? 'primary' : 'grey'"
|
||||
variant="flat"
|
||||
class="me-2"
|
||||
>
|
||||
۲
|
||||
</v-chip>
|
||||
<v-divider class="mx-2"></v-divider>
|
||||
<v-chip
|
||||
:color="stepperStep >= 3 ? 'primary' : 'grey'"
|
||||
variant="flat"
|
||||
>
|
||||
۳
|
||||
</v-chip>
|
||||
</div>
|
||||
|
||||
<!-- Step Content -->
|
||||
<v-card variant="outlined" class="mb-4">
|
||||
<v-card-text>
|
||||
<!-- Step 1 -->
|
||||
<div v-if="stepperStep === 1">
|
||||
<h4 class="mb-2">رفتن به بخش تنظیمات</h4>
|
||||
<p>از منوی اصلی به بخش <strong>تنظیمات</strong> بروید</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 2 -->
|
||||
<div v-if="stepperStep === 2">
|
||||
<h4 class="mb-2">انتخاب چاپ اسناد</h4>
|
||||
<p>در بخش تنظیمات، گزینه <strong>چاپ اسناد</strong> را انتخاب کنید</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 3 -->
|
||||
<div v-if="stepperStep === 3">
|
||||
<h4 class="mb-2">انتخاب قالب سفارشی</h4>
|
||||
<p>برای هر نوع سند، قالب سفارشی مورد نظر خود را انتخاب کنید</p>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- Navigation Buttons (moved outside stepper) -->
|
||||
<div class="d-flex justify-space-between align-center pa-4">
|
||||
<v-btn
|
||||
v-if="stepperStep > 1"
|
||||
variant="text"
|
||||
@click="prevStep"
|
||||
>
|
||||
<v-icon icon="mdi-arrow-right" class="me-1"></v-icon>
|
||||
مرحله قبل
|
||||
</v-btn>
|
||||
<v-spacer v-else></v-spacer>
|
||||
|
||||
<v-btn
|
||||
v-if="stepperStep < 3"
|
||||
color="primary"
|
||||
@click="nextStep"
|
||||
>
|
||||
مرحله بعد
|
||||
<v-icon icon="mdi-arrow-left" class="ms-1"></v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
v-else
|
||||
color="success"
|
||||
@click="resetStepper"
|
||||
>
|
||||
<v-icon icon="mdi-refresh" class="me-1"></v-icon>
|
||||
شروع مجدد
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<v-alert type="info" variant="tonal" class="mb-4">
|
||||
<template #prepend>
|
||||
<v-icon icon="mdi-information"></v-icon>
|
||||
</template>
|
||||
<div>
|
||||
<strong>نکته مهم:</strong> قالب‌های سفارشی را می‌توانید برای انواع مختلف اسناد تنظیم کنید:
|
||||
</div>
|
||||
</v-alert>
|
||||
|
||||
<v-list class="mb-4">
|
||||
<v-list-item prepend-icon="mdi-file-document-outline">
|
||||
<v-list-item-title>فاکتور فروش</v-list-item-title>
|
||||
<v-list-item-subtitle>قالب برای فاکتورهای فروش کالا و خدمات</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
<v-list-item prepend-icon="mdi-file-document-outline">
|
||||
<v-list-item-title>فاکتور خرید</v-list-item-title>
|
||||
<v-list-item-subtitle>قالب برای فاکتورهای خرید از تامین‌کنندگان</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
<v-list-item prepend-icon="mdi-file-document-outline">
|
||||
<v-list-item-title>برگشت از فروش</v-list-item-title>
|
||||
<v-list-item-subtitle>قالب برای اسناد برگشت کالا از مشتریان</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
<v-list-item prepend-icon="mdi-file-document-outline">
|
||||
<v-list-item-title>برگشت به خرید</v-list-item-title>
|
||||
<v-list-item-subtitle>قالب برای اسناد برگشت کالا به تامین‌کنندگان</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- Invoice Generation Guide -->
|
||||
<v-card class="mb-4">
|
||||
<v-card-title class="text-h6 d-flex align-center">
|
||||
<v-icon icon="mdi-printer" class="me-2" color="success"></v-icon>
|
||||
تولید و چاپ فاکتور
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="text-body-1">
|
||||
<p class="mb-3">
|
||||
پس از تنظیم قالب‌ها، می‌توانید فاکتورهای خود را با قالب سفارشی تولید کنید:
|
||||
</p>
|
||||
|
||||
<v-timeline density="compact" class="mb-4">
|
||||
<v-timeline-item dot-color="primary" size="small">
|
||||
<template #opposite>
|
||||
<div class="text-caption">مرحله ۱</div>
|
||||
</template>
|
||||
<div>
|
||||
<h4 class="text-subtitle-2">ایجاد سند</h4>
|
||||
<p class="text-body-2">سند مورد نظر (فاکتور فروش، خرید و...) را ایجاد کنید</p>
|
||||
</div>
|
||||
</v-timeline-item>
|
||||
|
||||
<v-timeline-item dot-color="info" size="small">
|
||||
<template #opposite>
|
||||
<div class="text-caption">مرحله ۲</div>
|
||||
</template>
|
||||
<div>
|
||||
<h4 class="text-subtitle-2">تکمیل اطلاعات</h4>
|
||||
<p class="text-body-2">اطلاعات سند را تکمیل و ذخیره کنید</p>
|
||||
</div>
|
||||
</v-timeline-item>
|
||||
|
||||
<v-timeline-item dot-color="success" size="small">
|
||||
<template #opposite>
|
||||
<div class="text-caption">مرحله ۳</div>
|
||||
</template>
|
||||
<div>
|
||||
<h4 class="text-subtitle-2">چاپ با قالب سفارشی</h4>
|
||||
<p class="text-body-2">از دکمه چاپ استفاده کنید تا سند با قالب سفارشی تولید شود</p>
|
||||
</div>
|
||||
</v-timeline-item>
|
||||
</v-timeline>
|
||||
|
||||
<v-alert type="success" variant="tonal">
|
||||
<template #prepend>
|
||||
<v-icon icon="mdi-check-circle"></v-icon>
|
||||
</template>
|
||||
<div>
|
||||
<strong>مزایای استفاده از قالب‌های سفارشی:</strong>
|
||||
</div>
|
||||
<ul class="mt-2">
|
||||
<li>طراحی منحصر به فرد و مطابق با برند شما</li>
|
||||
<li>امکان اضافه کردن لوگو و اطلاعات شرکت</li>
|
||||
<li>تنظیم فونت، رنگ و چیدمان دلخواه</li>
|
||||
<li>پشتیبانی از متغیرهای پویا</li>
|
||||
<li>امکان اشتراک‌گذاری قالب‌ها با سایر کاربران</li>
|
||||
</ul>
|
||||
</v-alert>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- Template Management Guide -->
|
||||
<v-card>
|
||||
<v-card-title class="text-h6 d-flex align-center">
|
||||
<v-icon icon="mdi-tools" class="me-2" color="warning"></v-icon>
|
||||
مدیریت قالب‌ها
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="text-body-1">
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-card variant="outlined" class="mb-3">
|
||||
<v-card-title class="text-subtitle-1">قالب‌های کسب‌وکار</v-card-title>
|
||||
<v-card-text>
|
||||
<ul class="text-body-2">
|
||||
<li>قالب‌های شخصی شما</li>
|
||||
<li>امکان ویرایش و حذف</li>
|
||||
<li>تنها شما به آن‌ها دسترسی دارید</li>
|
||||
<li>برای استفاده در کسب‌وکار خود</li>
|
||||
</ul>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-card variant="outlined" class="mb-3">
|
||||
<v-card-title class="text-subtitle-1">قالب‌های عمومی</v-card-title>
|
||||
<v-card-text>
|
||||
<ul class="text-body-2">
|
||||
<li>قالب‌های اشتراک‌گذاری شده</li>
|
||||
<li>امکان کپی و ویرایش</li>
|
||||
<li>دسترسی برای همه کاربران</li>
|
||||
<li>نمایش تعداد کپی‌ها</li>
|
||||
</ul>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-alert type="warning" variant="tonal" class="mt-4">
|
||||
<template #prepend>
|
||||
<v-icon icon="mdi-alert"></v-icon>
|
||||
</template>
|
||||
<div>
|
||||
<strong>توجه:</strong> قبل از حذف قالب، مطمئن شوید که در هیچ سندی استفاده نمی‌شود.
|
||||
</div>
|
||||
</v-alert>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
|
||||
<!-- Data Table (only show for business and public tabs) -->
|
||||
<div v-else>
|
||||
|
||||
<v-data-table-server
|
||||
v-model:items-per-page="serverOptions.rowsPerPage"
|
||||
v-model:page="serverOptions.page"
|
||||
|
|
@ -134,6 +390,7 @@
|
|||
</template>
|
||||
</v-data-table-server>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
|
|
@ -175,6 +432,7 @@ const searchValue = ref('')
|
|||
const items = ref([])
|
||||
const totalItems = ref(0)
|
||||
const activeTab = ref('business') // business | public
|
||||
const stepperStep = ref(1)
|
||||
|
||||
const serverOptions = ref({
|
||||
page: 1,
|
||||
|
|
@ -213,6 +471,22 @@ const openMessage = (title, text) => {
|
|||
showMessageDialog.value = true
|
||||
}
|
||||
|
||||
const nextStep = () => {
|
||||
if (stepperStep.value < 3) {
|
||||
stepperStep.value = stepperStep.value + 1
|
||||
}
|
||||
}
|
||||
|
||||
const prevStep = () => {
|
||||
if (stepperStep.value > 1) {
|
||||
stepperStep.value = stepperStep.value - 1
|
||||
}
|
||||
}
|
||||
|
||||
const resetStepper = () => {
|
||||
stepperStep.value = 1
|
||||
}
|
||||
|
||||
const fetchData = async () => {
|
||||
if (debounceTimer) clearTimeout(debounceTimer)
|
||||
debounceTimer = window.setTimeout(async () => {
|
||||
|
|
@ -249,6 +523,9 @@ const clearSearch = () => { searchValue.value = '' }
|
|||
watch(searchValue, fetchData)
|
||||
watch(serverOptions, fetchData, { deep: true })
|
||||
watch(activeTab, () => {
|
||||
if (activeTab.value === 'help') {
|
||||
return // Don't fetch data for help tab
|
||||
}
|
||||
serverOptions.value.page = 1
|
||||
// default sort for public tab: by copyCount desc
|
||||
if (activeTab.value === 'public') {
|
||||
|
|
@ -260,7 +537,9 @@ watch(activeTab, () => {
|
|||
})
|
||||
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
if (activeTab.value !== 'help') {
|
||||
fetchData()
|
||||
}
|
||||
})
|
||||
|
||||
const showRowActions = (item) => {
|
||||
|
|
@ -331,4 +610,4 @@ const confirmDelete = async () => {
|
|||
.custom-table tbody tr:nth-child(odd) {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Loading…
Reference in a new issue