feat(tahesab): PDF invoice export for asnad cards
Add per-document PDF print from account details, plus org invoice settings for logo and texts separate from CRM invoices.
This commit is contained in:
@@ -0,0 +1,305 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { api } from '@/lib/api';
|
||||
import type { TahesabInvoiceSettingsDto } from '@mento/shared';
|
||||
import { useEscClose } from '@/lib/modal-stack';
|
||||
|
||||
const props = defineProps<{ open: boolean }>();
|
||||
const emit = defineEmits<{
|
||||
'update:open': [value: boolean];
|
||||
saved: [value: TahesabInvoiceSettingsDto];
|
||||
}>();
|
||||
|
||||
const loading = ref(false);
|
||||
const saving = ref(false);
|
||||
const error = ref('');
|
||||
const ok = ref('');
|
||||
|
||||
const logoDataUrl = ref<string | null>(null);
|
||||
const companyName = ref('');
|
||||
const companySubtitle = ref('');
|
||||
const address = ref('');
|
||||
const phone = ref('');
|
||||
const headerText = ref('');
|
||||
const footerText = ref('');
|
||||
|
||||
useEscClose(
|
||||
() => props.open,
|
||||
() => close(),
|
||||
);
|
||||
|
||||
function close() {
|
||||
emit('update:open', false);
|
||||
}
|
||||
|
||||
function fill(dto: TahesabInvoiceSettingsDto) {
|
||||
logoDataUrl.value = dto.logoDataUrl;
|
||||
companyName.value = dto.companyName ?? '';
|
||||
companySubtitle.value = dto.companySubtitle ?? '';
|
||||
address.value = dto.address ?? '';
|
||||
phone.value = dto.phone ?? '';
|
||||
headerText.value = dto.headerText ?? '';
|
||||
footerText.value = dto.footerText ?? '';
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
const { data } = await api.get<TahesabInvoiceSettingsDto>(
|
||||
'/integrations/tahesab/invoice-settings',
|
||||
);
|
||||
fill(data);
|
||||
} catch (e) {
|
||||
error.value = axios.isAxiosError(e)
|
||||
? String(
|
||||
(e.response?.data as { message?: string })?.message ??
|
||||
'بارگذاری تنظیمات ناموفق بود.',
|
||||
)
|
||||
: 'بارگذاری تنظیمات ناموفق بود.';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function onLogoFile(ev: Event) {
|
||||
const input = ev.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
input.value = '';
|
||||
if (!file) return;
|
||||
if (!file.type.startsWith('image/')) {
|
||||
error.value = 'فقط فایل تصویر مجاز است.';
|
||||
return;
|
||||
}
|
||||
if (file.size > 400_000) {
|
||||
error.value = 'حجم تصویر حداکثر حدود ۴۰۰ کیلوبایت باشد.';
|
||||
return;
|
||||
}
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
const result = typeof reader.result === 'string' ? reader.result : '';
|
||||
if (!result.startsWith('data:image/')) {
|
||||
error.value = 'خواندن تصویر ناموفق بود.';
|
||||
return;
|
||||
}
|
||||
logoDataUrl.value = result;
|
||||
error.value = '';
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
|
||||
function clearLogo() {
|
||||
logoDataUrl.value = null;
|
||||
}
|
||||
|
||||
async function save() {
|
||||
saving.value = true;
|
||||
error.value = '';
|
||||
ok.value = '';
|
||||
try {
|
||||
const { data } = await api.patch<TahesabInvoiceSettingsDto>(
|
||||
'/integrations/tahesab/invoice-settings',
|
||||
{
|
||||
logoDataUrl: logoDataUrl.value,
|
||||
companyName: companyName.value,
|
||||
companySubtitle: companySubtitle.value,
|
||||
address: address.value,
|
||||
phone: phone.value,
|
||||
headerText: headerText.value,
|
||||
footerText: footerText.value,
|
||||
},
|
||||
);
|
||||
fill(data);
|
||||
ok.value = 'تنظیمات فاکتور ذخیره شد.';
|
||||
emit('saved', data);
|
||||
} catch (e) {
|
||||
error.value = axios.isAxiosError(e)
|
||||
? String(
|
||||
(e.response?.data as { message?: string })?.message ??
|
||||
'ذخیره تنظیمات ناموفق بود.',
|
||||
)
|
||||
: 'ذخیره تنظیمات ناموفق بود.';
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.open,
|
||||
(open) => {
|
||||
if (open) {
|
||||
ok.value = '';
|
||||
error.value = '';
|
||||
void load();
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
if (props.open) void load();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="open" class="backdrop" @click.self="close">
|
||||
<div class="sheet" role="dialog" aria-modal="true" aria-label="تنظیمات فاکتور ته‌حساب">
|
||||
<header class="sheet-head">
|
||||
<div>
|
||||
<h3>تنظیمات فاکتور ته‌حساب</h3>
|
||||
<p class="muted">لوگو و متن‌های ثابت خروجی PDF اسناد — جدا از فاکتور CRM</p>
|
||||
</div>
|
||||
<button type="button" class="btn ghost" @click="close">بستن</button>
|
||||
</header>
|
||||
|
||||
<p v-if="error" class="err">{{ error }}</p>
|
||||
<p v-if="ok" class="ok">{{ ok }}</p>
|
||||
<p v-if="loading" class="muted">در حال بارگذاری…</p>
|
||||
|
||||
<div v-else class="grid">
|
||||
<label class="field logo-field">
|
||||
<span>لوگو</span>
|
||||
<div class="logo-row">
|
||||
<img v-if="logoDataUrl" :src="logoDataUrl" alt="لوگو" class="logo-preview" />
|
||||
<div class="logo-actions">
|
||||
<input type="file" accept="image/*" @change="onLogoFile" />
|
||||
<button v-if="logoDataUrl" type="button" class="btn ghost" @click="clearLogo">
|
||||
حذف لوگو
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="field">
|
||||
<span>نام شرکت / فروشگاه</span>
|
||||
<input v-model="companyName" type="text" maxlength="200" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>زیرعنوان</span>
|
||||
<input v-model="companySubtitle" type="text" maxlength="200" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>آدرس</span>
|
||||
<input v-model="address" type="text" maxlength="500" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>تلفن</span>
|
||||
<input v-model="phone" type="text" maxlength="80" dir="ltr" />
|
||||
</label>
|
||||
<label class="field full">
|
||||
<span>متن بالای فاکتور</span>
|
||||
<textarea v-model="headerText" rows="2" maxlength="1000" />
|
||||
</label>
|
||||
<label class="field full">
|
||||
<span>متن پایین فاکتور</span>
|
||||
<textarea v-model="footerText" rows="2" maxlength="1000" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<footer class="sheet-foot">
|
||||
<button type="button" class="btn" :disabled="saving || loading" @click="save">
|
||||
{{ saving ? '…' : 'ذخیره تنظیمات' }}
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 80;
|
||||
background: rgba(15, 23, 42, 0.45);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 16px;
|
||||
}
|
||||
.sheet {
|
||||
width: min(640px, 100%);
|
||||
max-height: min(90vh, 820px);
|
||||
overflow: auto;
|
||||
background: var(--surface, #fff);
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--line, #e5e7eb);
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.sheet-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.sheet-head h3 {
|
||||
margin: 0;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
.muted {
|
||||
margin: 4px 0 0;
|
||||
color: var(--ink-secondary, #6b7280);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.err {
|
||||
color: #b91c1c;
|
||||
margin: 0;
|
||||
}
|
||||
.ok {
|
||||
color: #047857;
|
||||
margin: 0;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.field.full,
|
||||
.logo-field {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.field input,
|
||||
.field textarea {
|
||||
border: 1px solid var(--line, #e5e7eb);
|
||||
border-radius: 8px;
|
||||
padding: 8px 10px;
|
||||
font: inherit;
|
||||
background: var(--surface, #fff);
|
||||
}
|
||||
.logo-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.logo-preview {
|
||||
max-height: 64px;
|
||||
max-width: 140px;
|
||||
object-fit: contain;
|
||||
border: 1px solid var(--line, #e5e7eb);
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
background: #fff;
|
||||
}
|
||||
.logo-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.sheet-foot {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user