MahdiandCursor
36eda8653e
Keep the design refresh together with DISC, the sales copilot, and treasury behavior. Co-authored-by: Cursor <cursoragent@cursor.com>
1584 lines
54 KiB
Vue
1584 lines
54 KiB
Vue
<script setup lang="ts">
|
||
import { computed, onMounted, ref, watch } from 'vue';
|
||
import { matchesSearch } from '@/lib/search';
|
||
import { RouterLink, useRoute, useRouter } from 'vue-router';
|
||
import axios from 'axios';
|
||
import { api } from '@/lib/api';
|
||
import {
|
||
CURRENCY_OPTIONS,
|
||
currencySuffix,
|
||
formatMoney as formatMoneyLib,
|
||
} from '@/lib/money';
|
||
import { formatLocalDateInput, toFaDigits } from '@/lib/jalali';
|
||
import {
|
||
Affix as AAffix,
|
||
Alert as AAlert,
|
||
Button as AButton,
|
||
Card as ACard,
|
||
Col as ACol,
|
||
Collapse as ACollapse,
|
||
CollapsePanel as ACollapsePanel,
|
||
Descriptions as ADescriptions,
|
||
DescriptionsItem as ADescriptionsItem,
|
||
Divider as ADivider,
|
||
Flex as AFlex,
|
||
Form as AForm,
|
||
FormItem as AFormItem,
|
||
Input as AInput,
|
||
InputNumber as AInputNumber,
|
||
Row as ARow,
|
||
Segmented as ASegmented,
|
||
Select as ASelect,
|
||
Space as ASpace,
|
||
Spin as ASpin,
|
||
Textarea as ATextarea,
|
||
Typography,
|
||
} from 'ant-design-vue';
|
||
import {
|
||
ArrowLeftOutlined,
|
||
CheckOutlined,
|
||
DeleteOutlined,
|
||
EyeOutlined,
|
||
FileTextOutlined,
|
||
PlusOutlined,
|
||
UserAddOutlined,
|
||
} from '@ant-design/icons-vue';
|
||
import JalaliDateInput from '@/components/JalaliDateInput.vue';
|
||
import MoneyInput from '@/components/MoneyInput.vue';
|
||
import InvoiceDocPreview from '@/components/InvoiceDocPreview.vue';
|
||
import { useAuthStore } from '@/stores/auth';
|
||
import type {
|
||
CreateInvoiceRequest,
|
||
CreatePaymentRequest,
|
||
CreateQuoteRequest,
|
||
DealDto,
|
||
DealLineItemInput,
|
||
FinancialAccountDto,
|
||
InvoiceDto,
|
||
InvoiceInstallmentInput,
|
||
InvoiceStatus,
|
||
OrganizationDto,
|
||
OrgUserDto,
|
||
PaginatedResponse,
|
||
PaymentMethod,
|
||
PersonDto,
|
||
ProductDto,
|
||
QuoteDto,
|
||
QuoteStatus,
|
||
} from '@mento/shared';
|
||
|
||
type DocMode = 'invoice' | 'quote' | 'credit';
|
||
|
||
type LineDraft = {
|
||
key: string;
|
||
productId: string;
|
||
name: string;
|
||
description: string;
|
||
sku: string;
|
||
kind: 'product' | 'service' | '';
|
||
quantity: string;
|
||
unitPrice: string;
|
||
};
|
||
|
||
type InstallmentDraft = {
|
||
key: string;
|
||
dueDate: string;
|
||
amount: string;
|
||
};
|
||
|
||
const props = withDefaults(
|
||
defineProps<{
|
||
embedded?: boolean;
|
||
entityId?: string;
|
||
initialKind?: 'invoice' | 'credit' | 'quote';
|
||
initialFromDealId?: string;
|
||
}>(),
|
||
{ embedded: false },
|
||
);
|
||
const emit = defineEmits<{ saved: []; cancel: [] }>();
|
||
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
const loadedInvoiceKind = ref<'invoice' | 'credit' | null>(null);
|
||
|
||
const docMode = computed<DocMode>(() => {
|
||
if (props.embedded && props.initialKind) return props.initialKind;
|
||
const name = String(route.name || '');
|
||
if (name.includes('quote')) return 'quote';
|
||
if (route.query.kind === 'credit' || route.query.doc === 'credit') return 'credit';
|
||
if (route.query.doc === 'quote') return 'quote';
|
||
if (loadedInvoiceKind.value === 'credit') return 'credit';
|
||
return 'invoice';
|
||
});
|
||
|
||
const id = computed(() => {
|
||
if (props.embedded) return props.entityId ?? '';
|
||
return typeof route.params.id === 'string' ? route.params.id : '';
|
||
});
|
||
const isNew = computed(() => {
|
||
if (props.embedded) return !props.entityId;
|
||
return route.name === 'invoice-new' || route.name === 'quote-new';
|
||
});
|
||
const isInvoiceDoc = computed(() => docMode.value !== 'quote');
|
||
const listRouteName = 'invoices';
|
||
|
||
const loading = ref(false);
|
||
const saving = ref(false);
|
||
const paying = ref(false);
|
||
const error = ref('');
|
||
const mobileStep = ref<1 | 2>(1);
|
||
const showPayments = ref(false);
|
||
const productSearch = ref('');
|
||
const validityMode = ref<'days' | 'date'>('days');
|
||
const validityDays = ref<number>(30);
|
||
|
||
const number = ref('');
|
||
const title = ref('فاکتور');
|
||
const status = ref<string>('draft');
|
||
const notes = ref('');
|
||
const issuedAt = ref(formatLocalDateInput(new Date()));
|
||
const dueDate = ref('');
|
||
const validUntil = ref('');
|
||
const currency = ref('IRR');
|
||
const enabledCurrencies = ref<string[]>(['IRR']);
|
||
const discountAmount = ref('0');
|
||
const taxPercent = ref('0');
|
||
const personId = ref('');
|
||
const companyId = ref('');
|
||
const dealId = ref('');
|
||
const quoteId = ref('');
|
||
const people = ref<PersonDto[]>([]);
|
||
const products = ref<ProductDto[]>([]);
|
||
const lines = ref<LineDraft[]>([]);
|
||
const installments = ref<InstallmentDraft[]>([]);
|
||
const invoice = ref<InvoiceDto | null>(null);
|
||
const orgName = ref('');
|
||
const previewOpen = ref(false);
|
||
|
||
const payAccountId = ref('');
|
||
const financeAccounts = ref<FinancialAccountDto[]>([]);
|
||
const payAmount = ref('');
|
||
const payMethod = ref<PaymentMethod>('transfer');
|
||
const payNotes = ref('');
|
||
const payInstallmentId = ref('');
|
||
const payDate = ref(formatLocalDateInput(new Date()));
|
||
const chequeNumber = ref('');
|
||
const chequeBank = ref('');
|
||
const chequeDue = ref('');
|
||
const chequeStatus = ref<'pending' | 'cleared' | 'bounced'>('pending');
|
||
const commissionMode = ref<'percent' | 'amount'>('percent');
|
||
const commissionPercent = ref('');
|
||
const commissionFixedAmount = ref('');
|
||
const defaultCommissionPercent = ref(0);
|
||
const auth = useAuthStore();
|
||
|
||
const invoiceStatusLabel: Record<InvoiceStatus, string> = {
|
||
draft: 'پیشنویس',
|
||
issued: 'صادرشده',
|
||
partially_paid: 'پرداخت جزئی',
|
||
paid: 'پرداخت شده',
|
||
canceled: 'لغو شده',
|
||
};
|
||
|
||
const quoteStatusLabel: Record<QuoteStatus, string> = {
|
||
draft: 'پیشنویس',
|
||
sent: 'ارسالشده',
|
||
accepted: 'تأییدشده',
|
||
rejected: 'ردشده',
|
||
expired: 'منقضی',
|
||
};
|
||
|
||
const methodLabel: Record<PaymentMethod, string> = {
|
||
cash: 'نقد',
|
||
transfer: 'کارتبهکارت / حواله',
|
||
card: 'کارتخوان',
|
||
check: 'چک',
|
||
other: 'سایر',
|
||
};
|
||
|
||
const statusOptions = computed(() =>
|
||
docMode.value === 'quote' ? quoteStatusLabel : invoiceStatusLabel,
|
||
);
|
||
|
||
const pageTitle = computed(() => {
|
||
if (!isNew.value) {
|
||
return (
|
||
number.value ||
|
||
(docMode.value === 'quote'
|
||
? 'پیش فاکتور'
|
||
: docMode.value === 'credit'
|
||
? 'فاکتور برگشتی'
|
||
: 'فاکتور')
|
||
);
|
||
}
|
||
if (docMode.value === 'quote') return 'افزودن پیش فاکتور';
|
||
if (docMode.value === 'credit') return 'افزودن فاکتور برگشتی';
|
||
return 'افزودن فاکتور';
|
||
});
|
||
|
||
const pageSubtitle = computed(() => {
|
||
if (mobileStep.value === 2) return 'محصولات و خدمات را اضافه کنید';
|
||
if (docMode.value === 'quote') return 'اطلاعات پیش فاکتور را وارد کنید';
|
||
if (docMode.value === 'credit') return 'اطلاعات فاکتور برگشتی را وارد کنید';
|
||
return 'اطلاعات فاکتور را وارد کنید';
|
||
});
|
||
|
||
const defaultTitle = computed(() => {
|
||
if (docMode.value === 'quote') return 'پیش فاکتور';
|
||
if (docMode.value === 'credit') return 'فاکتور برگشتی';
|
||
return 'فاکتور';
|
||
});
|
||
|
||
const saveLabel = computed(() => {
|
||
if (docMode.value === 'quote') return 'ذخیره پیش فاکتور';
|
||
if (docMode.value === 'credit') return 'ذخیره فاکتور برگشتی';
|
||
return 'ذخیره فاکتور';
|
||
});
|
||
|
||
const currencyLabel = computed(() => currencySuffix(currency.value));
|
||
|
||
const currencySelectOptions = computed(() => {
|
||
const codes = enabledCurrencies.value.length
|
||
? [...enabledCurrencies.value]
|
||
: [currency.value || 'IRR'];
|
||
if (currency.value && !codes.includes(currency.value)) {
|
||
codes.push(currency.value);
|
||
}
|
||
return codes.map((code) => {
|
||
const opt = CURRENCY_OPTIONS.find((c) => c.code === code);
|
||
return {
|
||
code,
|
||
label: opt ? `${opt.suffix} - ${opt.code}` : code,
|
||
};
|
||
});
|
||
});
|
||
|
||
const filteredProducts = computed(() => {
|
||
const q = productSearch.value.trim();
|
||
if (!q) return products.value;
|
||
return products.value.filter((p) =>
|
||
matchesSearch(q, [p.name, p.sku, p.description, p.category]),
|
||
);
|
||
});
|
||
|
||
function roundMoney(value: number): number {
|
||
return Math.round((value + Number.EPSILON) * 100) / 100;
|
||
}
|
||
|
||
function lineTotal(line: LineDraft): number {
|
||
const qty = Number(line.quantity) || 0;
|
||
const price = Number(line.unitPrice) || 0;
|
||
return qty * price;
|
||
}
|
||
|
||
const subtotal = computed(() =>
|
||
lines.value.reduce((sum, line) => sum + lineTotal(line), 0),
|
||
);
|
||
|
||
const discountNum = computed(() => Number(discountAmount.value) || 0);
|
||
const taxPercentNum = computed(() => Number(taxPercent.value) || 0);
|
||
|
||
const taxAmount = computed(() =>
|
||
roundMoney(
|
||
Math.max(0, subtotal.value - discountNum.value) * (taxPercentNum.value / 100),
|
||
),
|
||
);
|
||
|
||
const payableSigned = computed(() =>
|
||
roundMoney(subtotal.value - discountNum.value + taxAmount.value),
|
||
);
|
||
|
||
const payableAmount = computed(() =>
|
||
docMode.value === 'credit' ? -payableSigned.value : payableSigned.value,
|
||
);
|
||
|
||
const commissionPreview = computed(() => {
|
||
const base = Math.abs(payableAmount.value);
|
||
if (commissionMode.value === 'amount') {
|
||
const n = Number(commissionFixedAmount.value);
|
||
return Number.isFinite(n) ? n : 0;
|
||
}
|
||
const n = Number(commissionPercent.value || defaultCommissionPercent.value);
|
||
return Number.isFinite(n) ? Math.round((base * n) / 100) : 0;
|
||
});
|
||
|
||
function formatMoney(amount: number) {
|
||
return formatMoneyLib(amount, currency.value);
|
||
}
|
||
|
||
function newLine(): LineDraft {
|
||
return {
|
||
key: `${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
|
||
productId: '',
|
||
name: '',
|
||
description: '',
|
||
sku: '',
|
||
kind: '',
|
||
quantity: '1',
|
||
unitPrice: '',
|
||
};
|
||
}
|
||
|
||
function newInstallment(): InstallmentDraft {
|
||
return {
|
||
key: `${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
|
||
dueDate: '',
|
||
amount: '',
|
||
};
|
||
}
|
||
|
||
function addLine() {
|
||
lines.value.push(newLine());
|
||
}
|
||
|
||
function removeLine(key: string) {
|
||
lines.value = lines.value.filter((l) => l.key !== key);
|
||
}
|
||
|
||
function onPickProduct(line: LineDraft) {
|
||
const product = products.value.find((p) => p.id === line.productId);
|
||
if (!product) return;
|
||
line.name = product.name;
|
||
line.description = product.description ?? '';
|
||
line.sku = product.sku ?? '';
|
||
line.kind = product.kind;
|
||
if (product.unitPrice != null) line.unitPrice = String(product.unitPrice);
|
||
}
|
||
|
||
function onPersonChange() {
|
||
const person = people.value.find((p) => p.id === personId.value);
|
||
companyId.value = person?.company?.id ?? '';
|
||
}
|
||
|
||
function toLineInputs(): DealLineItemInput[] {
|
||
return lines.value
|
||
.filter((l) => l.name.trim() && l.quantity !== '' && l.unitPrice !== '')
|
||
.map((l) => ({
|
||
productId: l.productId || null,
|
||
name: l.name.trim(),
|
||
quantity: Number(l.quantity),
|
||
unitPrice: Number(l.unitPrice),
|
||
currency: currency.value || 'IRR',
|
||
}));
|
||
}
|
||
|
||
function toInstallmentInputs(): InvoiceInstallmentInput[] {
|
||
return installments.value
|
||
.filter((i) => i.dueDate && i.amount !== '')
|
||
.map((i) => ({
|
||
dueDate: new Date(i.dueDate).toISOString(),
|
||
amount: Number(i.amount),
|
||
currency: currency.value || 'IRR',
|
||
}));
|
||
}
|
||
|
||
function applyValidityDays(days: number) {
|
||
validityMode.value = 'days';
|
||
validityDays.value = days;
|
||
const base = issuedAt.value ? new Date(issuedAt.value) : new Date();
|
||
const d = new Date(base);
|
||
d.setDate(d.getDate() + days);
|
||
validUntil.value = formatLocalDateInput(d);
|
||
}
|
||
|
||
function keepPrefillQuery() {
|
||
const q: Record<string, string> = {};
|
||
for (const key of ['fromDealId', 'fromQuoteId', 'personId', 'dealId'] as const) {
|
||
const v = route.query[key];
|
||
if (typeof v === 'string' && v) q[key] = v;
|
||
}
|
||
return q;
|
||
}
|
||
|
||
function switchDocMode(mode: DocMode) {
|
||
if (!isNew.value || mode === docMode.value) return;
|
||
const q = keepPrefillQuery();
|
||
if (mode === 'quote') {
|
||
void router.push({ name: 'quote-new', query: q });
|
||
return;
|
||
}
|
||
if (mode === 'credit') {
|
||
void router.push({ name: 'invoice-new', query: { ...q, kind: 'credit' } });
|
||
return;
|
||
}
|
||
void router.push({ name: 'invoice-new', query: q });
|
||
}
|
||
|
||
function mapLinesFromItems(
|
||
items: Array<{
|
||
id?: string;
|
||
productId?: string | null;
|
||
name: string;
|
||
quantity: number;
|
||
unitPrice: number;
|
||
}>,
|
||
): LineDraft[] {
|
||
return items.map((item, index) => {
|
||
const product = products.value.find((p) => p.id === item.productId);
|
||
return {
|
||
key: item.id || `line-${index}-${Date.now()}`,
|
||
productId: item.productId ?? '',
|
||
name: item.name,
|
||
description: product?.description ?? '',
|
||
sku: product?.sku ?? '',
|
||
kind: product?.kind ?? '',
|
||
quantity: String(item.quantity),
|
||
unitPrice: String(item.unitPrice),
|
||
};
|
||
});
|
||
}
|
||
|
||
async function prefillFromSources() {
|
||
const fromQuoteId =
|
||
typeof route.query.fromQuoteId === 'string' ? route.query.fromQuoteId : '';
|
||
const fromDealId =
|
||
props.initialFromDealId ||
|
||
(typeof route.query.fromDealId === 'string'
|
||
? route.query.fromDealId
|
||
: typeof route.query.dealId === 'string'
|
||
? route.query.dealId
|
||
: '');
|
||
const qPersonId =
|
||
typeof route.query.personId === 'string' ? route.query.personId : '';
|
||
|
||
if (fromQuoteId) {
|
||
quoteId.value = fromQuoteId;
|
||
const { data } = await api.get<QuoteDto>(`/quotes/${fromQuoteId}`);
|
||
title.value =
|
||
docMode.value === 'credit'
|
||
? `فاکتور برگشتی — ${data.title}`
|
||
: `فاکتور — ${data.title}`;
|
||
notes.value = data.notes ?? '';
|
||
currency.value = data.currency || currency.value;
|
||
discountAmount.value = String(data.discountAmount ?? 0);
|
||
taxPercent.value = String(data.taxPercent ?? 0);
|
||
personId.value = data.person?.id ?? '';
|
||
companyId.value = data.company?.id ?? '';
|
||
dealId.value = data.deal?.id ?? '';
|
||
if (data.issuedAt) issuedAt.value = data.issuedAt.slice(0, 10);
|
||
lines.value = mapLinesFromItems(data.lineItems ?? []);
|
||
if (!lines.value.length) lines.value = [newLine()];
|
||
return;
|
||
}
|
||
|
||
if (fromDealId) {
|
||
dealId.value = fromDealId;
|
||
const { data } = await api.get<DealDto>(`/deals/${fromDealId}`);
|
||
title.value = `${defaultTitle.value} — ${data.title}`;
|
||
notes.value = data.notes ?? '';
|
||
currency.value = data.currency || currency.value;
|
||
personId.value = data.person?.id ?? '';
|
||
companyId.value = data.company?.id ?? '';
|
||
lines.value = mapLinesFromItems(data.lineItems ?? []);
|
||
if (!lines.value.length) lines.value = [newLine()];
|
||
return;
|
||
}
|
||
|
||
if (qPersonId) {
|
||
personId.value = qPersonId;
|
||
onPersonChange();
|
||
}
|
||
if (!lines.value.length) lines.value = [newLine()];
|
||
}
|
||
|
||
async function load() {
|
||
loading.value = true;
|
||
error.value = '';
|
||
mobileStep.value = 1;
|
||
try {
|
||
const accounts = await api.get<FinancialAccountDto[]>('/treasury/accounts').catch(() => null);
|
||
financeAccounts.value = accounts?.data.filter((row) => row.isActive) ?? [];
|
||
title.value = defaultTitle.value;
|
||
status.value = 'draft';
|
||
notes.value = '';
|
||
issuedAt.value = formatLocalDateInput(new Date());
|
||
dueDate.value = '';
|
||
validUntil.value = '';
|
||
discountAmount.value = '0';
|
||
taxPercent.value = '0';
|
||
personId.value = '';
|
||
companyId.value = '';
|
||
dealId.value = '';
|
||
quoteId.value = '';
|
||
number.value = '';
|
||
invoice.value = null;
|
||
loadedInvoiceKind.value = null;
|
||
installments.value = [];
|
||
lines.value = [];
|
||
commissionMode.value = 'percent';
|
||
commissionPercent.value = '';
|
||
commissionFixedAmount.value = '';
|
||
validityMode.value = 'days';
|
||
validityDays.value = 30;
|
||
|
||
const [peopleRes, productsRes, orgRes] = await Promise.all([
|
||
api.get<PaginatedResponse<PersonDto>>('/people', {
|
||
params: { limit: 100 },
|
||
}),
|
||
api.get<ProductDto[]>('/products', { params: { activeOnly: true } }),
|
||
api.get<OrganizationDto>('/organizations/current'),
|
||
]);
|
||
people.value = peopleRes.data.items;
|
||
products.value = productsRes.data;
|
||
try {
|
||
const { data: team } = await api.get<OrgUserDto[]>('/users');
|
||
const me = team.find((u) => u.id === auth.user?.id);
|
||
defaultCommissionPercent.value = Number(me?.commissionPercent ?? 0);
|
||
if (!commissionPercent.value && defaultCommissionPercent.value) {
|
||
commissionPercent.value = String(defaultCommissionPercent.value);
|
||
}
|
||
} catch {
|
||
/* optional */
|
||
}
|
||
orgName.value = orgRes.data.name || '';
|
||
enabledCurrencies.value = orgRes.data.enabledCurrencies?.length
|
||
? orgRes.data.enabledCurrencies
|
||
: [orgRes.data.baseCurrency || 'IRR'];
|
||
currency.value = orgRes.data.baseCurrency || 'IRR';
|
||
|
||
if (!isNew.value && id.value) {
|
||
if (docMode.value === 'quote') {
|
||
const { data } = await api.get<QuoteDto>(`/quotes/${id.value}`);
|
||
number.value = data.number;
|
||
title.value = data.title;
|
||
status.value = data.status;
|
||
notes.value = data.notes ?? '';
|
||
currency.value = data.currency || currency.value;
|
||
discountAmount.value = String(data.discountAmount ?? 0);
|
||
taxPercent.value = String(data.taxPercent ?? 0);
|
||
issuedAt.value = data.issuedAt
|
||
? data.issuedAt.slice(0, 10)
|
||
: formatLocalDateInput(new Date(data.createdAt));
|
||
validUntil.value = data.validUntil ? data.validUntil.slice(0, 10) : '';
|
||
if (validUntil.value) validityMode.value = 'date';
|
||
personId.value = data.person?.id ?? '';
|
||
companyId.value = data.company?.id ?? '';
|
||
dealId.value = data.deal?.id ?? '';
|
||
lines.value = mapLinesFromItems(data.lineItems ?? []);
|
||
} else {
|
||
const { data } = await api.get<InvoiceDto>(`/invoices/${id.value}`);
|
||
invoice.value = data;
|
||
loadedInvoiceKind.value = data.kind === 'credit' ? 'credit' : 'invoice';
|
||
number.value = data.number;
|
||
title.value = data.title;
|
||
status.value = data.status;
|
||
notes.value = data.notes ?? '';
|
||
currency.value = data.currency || currency.value;
|
||
discountAmount.value = String(data.discountAmount ?? 0);
|
||
taxPercent.value = String(data.taxPercent ?? 0);
|
||
issuedAt.value = data.issuedAt
|
||
? data.issuedAt.slice(0, 10)
|
||
: formatLocalDateInput(new Date(data.createdAt));
|
||
dueDate.value = data.dueDate ? data.dueDate.slice(0, 10) : '';
|
||
personId.value = data.person?.id ?? '';
|
||
companyId.value = data.company?.id ?? '';
|
||
dealId.value = data.deal?.id ?? '';
|
||
quoteId.value = data.quote?.id ?? '';
|
||
lines.value = mapLinesFromItems(data.lineItems ?? []);
|
||
installments.value = (data.installments ?? []).map((item) => ({
|
||
key: item.id,
|
||
dueDate: item.dueDate.slice(0, 10),
|
||
amount: String(item.amount),
|
||
}));
|
||
if (data.remainingAmount > 0) {
|
||
payAmount.value = String(data.remainingAmount);
|
||
}
|
||
if (data.commissionFixedAmount != null) {
|
||
commissionMode.value = 'amount';
|
||
commissionFixedAmount.value = String(data.commissionFixedAmount);
|
||
commissionPercent.value = String(
|
||
data.commissionPercent ?? defaultCommissionPercent.value,
|
||
);
|
||
} else {
|
||
commissionMode.value = 'percent';
|
||
commissionPercent.value = String(
|
||
data.commissionPercent ?? defaultCommissionPercent.value,
|
||
);
|
||
}
|
||
}
|
||
if (!lines.value.length) lines.value = [newLine()];
|
||
} else {
|
||
await prefillFromSources();
|
||
if (docMode.value === 'quote') applyValidityDays(validityDays.value);
|
||
}
|
||
} catch {
|
||
error.value =
|
||
docMode.value === 'quote'
|
||
? 'بارگذاری فرم پیش فاکتور ناموفق بود.'
|
||
: 'بارگذاری فرم فاکتور ناموفق بود.';
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
function invoicePayload(): CreateInvoiceRequest {
|
||
const fromDealId =
|
||
isNew.value &&
|
||
(props.initialFromDealId || typeof route.query.fromDealId === 'string')
|
||
? (props.initialFromDealId ||
|
||
(typeof route.query.fromDealId === 'string' ? route.query.fromDealId : ''))
|
||
: undefined;
|
||
const fromQuoteId =
|
||
isNew.value && typeof route.query.fromQuoteId === 'string'
|
||
? route.query.fromQuoteId
|
||
: undefined;
|
||
return {
|
||
title: title.value.trim() || defaultTitle.value,
|
||
status: status.value,
|
||
kind: docMode.value === 'credit' ? 'credit' : 'invoice',
|
||
notes: notes.value || undefined,
|
||
discountAmount: discountNum.value,
|
||
taxPercent: taxPercentNum.value,
|
||
issuedAt: issuedAt.value ? new Date(issuedAt.value).toISOString() : null,
|
||
dueDate: dueDate.value ? new Date(dueDate.value).toISOString() : null,
|
||
personId: personId.value || null,
|
||
companyId: companyId.value || null,
|
||
dealId: dealId.value || null,
|
||
quoteId: quoteId.value || null,
|
||
fromDealId: fromDealId || null,
|
||
fromQuoteId: fromQuoteId || null,
|
||
lineItems: toLineInputs(),
|
||
installments: toInstallmentInputs(),
|
||
currency: currency.value || 'IRR',
|
||
commissionPercent:
|
||
commissionMode.value === 'percent'
|
||
? commissionPercent.value === ''
|
||
? null
|
||
: Number(commissionPercent.value)
|
||
: null,
|
||
commissionFixedAmount:
|
||
commissionMode.value === 'amount'
|
||
? commissionFixedAmount.value === ''
|
||
? null
|
||
: Number(commissionFixedAmount.value)
|
||
: null,
|
||
};
|
||
}
|
||
|
||
function quotePayload(): CreateQuoteRequest {
|
||
const fromDealId =
|
||
isNew.value &&
|
||
(props.initialFromDealId || typeof route.query.fromDealId === 'string')
|
||
? (props.initialFromDealId ||
|
||
(typeof route.query.fromDealId === 'string' ? route.query.fromDealId : ''))
|
||
: undefined;
|
||
if (validityMode.value === 'days') {
|
||
applyValidityDays(validityDays.value);
|
||
}
|
||
const body: CreateQuoteRequest = {
|
||
title: title.value.trim() || defaultTitle.value,
|
||
status: status.value,
|
||
notes: notes.value || undefined,
|
||
discountAmount: discountNum.value,
|
||
taxPercent: taxPercentNum.value,
|
||
issuedAt: issuedAt.value ? new Date(issuedAt.value).toISOString() : null,
|
||
personId: personId.value || null,
|
||
companyId: companyId.value || null,
|
||
dealId: dealId.value || null,
|
||
fromDealId: fromDealId || null,
|
||
lineItems: toLineInputs(),
|
||
currency: currency.value || 'IRR',
|
||
validUntil: validUntil.value
|
||
? new Date(validUntil.value).toISOString()
|
||
: null,
|
||
};
|
||
if (isNew.value && validityMode.value === 'days') {
|
||
body.validityDays = validityDays.value;
|
||
}
|
||
return body;
|
||
}
|
||
|
||
function axiosMessage(e: unknown, fallback: string) {
|
||
if (axios.isAxiosError(e)) {
|
||
const msg = (e.response?.data as { message?: string | string[] })?.message;
|
||
return Array.isArray(msg) ? msg.join('، ') : (msg ?? fallback);
|
||
}
|
||
return fallback;
|
||
}
|
||
|
||
async function save() {
|
||
if (!issuedAt.value) {
|
||
error.value = 'تاریخ را وارد کنید.';
|
||
return;
|
||
}
|
||
if (!toLineInputs().length) {
|
||
error.value = 'حداقل یک ردیف محصول وارد کنید.';
|
||
mobileStep.value = 2;
|
||
return;
|
||
}
|
||
saving.value = true;
|
||
error.value = '';
|
||
try {
|
||
if (docMode.value === 'quote') {
|
||
if (isNew.value) {
|
||
await api.post<QuoteDto>('/quotes', quotePayload());
|
||
} else {
|
||
await api.patch(`/quotes/${id.value}`, quotePayload());
|
||
}
|
||
} else if (isNew.value) {
|
||
await api.post<InvoiceDto>('/invoices', invoicePayload());
|
||
} else {
|
||
await api.patch(`/invoices/${id.value}`, invoicePayload());
|
||
}
|
||
if (props.embedded) {
|
||
emit('saved');
|
||
return;
|
||
}
|
||
await router.push({ name: listRouteName });
|
||
} catch (e) {
|
||
error.value = axiosMessage(e, 'ذخیره ناموفق بود');
|
||
} finally {
|
||
saving.value = false;
|
||
}
|
||
}
|
||
|
||
async function remove() {
|
||
const label =
|
||
docMode.value === 'quote'
|
||
? 'این پیش فاکتور حذف شود؟'
|
||
: docMode.value === 'credit'
|
||
? 'این فاکتور برگشتی حذف شود؟'
|
||
: 'این فاکتور حذف شود؟';
|
||
if (!id.value || !confirm(label)) return;
|
||
if (docMode.value === 'quote') {
|
||
await api.delete(`/quotes/${id.value}`);
|
||
} else {
|
||
await api.delete(`/invoices/${id.value}`);
|
||
}
|
||
await router.push({ name: listRouteName });
|
||
}
|
||
|
||
async function submitPayment() {
|
||
if (!id.value || !payAmount.value) {
|
||
error.value = 'مبلغ پرداخت را وارد کنید.';
|
||
return;
|
||
}
|
||
if (payMethod.value === 'check' && (!chequeNumber.value.trim() || !chequeBank.value.trim() || !chequeDue.value)) {
|
||
error.value = 'شماره، بانک و سررسید چک را وارد کنید.';
|
||
return;
|
||
}
|
||
paying.value = true;
|
||
error.value = '';
|
||
try {
|
||
const body: CreatePaymentRequest = {
|
||
amount: Number(payAmount.value),
|
||
method: payMethod.value,
|
||
notes: payNotes.value || undefined,
|
||
paidAt: payDate.value ? new Date(payDate.value).toISOString() : undefined,
|
||
installmentId: payInstallmentId.value || null,
|
||
financialAccountId: payAccountId.value || null,
|
||
cheque:
|
||
payMethod.value === 'check'
|
||
? {
|
||
number: chequeNumber.value.trim(),
|
||
bank: chequeBank.value.trim(),
|
||
dueDate: new Date(chequeDue.value).toISOString(),
|
||
status: chequeStatus.value,
|
||
}
|
||
: undefined,
|
||
};
|
||
const { data } = await api.post<InvoiceDto>(
|
||
`/invoices/${id.value}/payments`,
|
||
body,
|
||
);
|
||
invoice.value = data;
|
||
payNotes.value = '';
|
||
payInstallmentId.value = '';
|
||
chequeNumber.value = '';
|
||
chequeBank.value = '';
|
||
chequeDue.value = '';
|
||
chequeStatus.value = 'pending';
|
||
await load();
|
||
} catch (e) {
|
||
error.value = axiosMessage(e, 'ثبت پرداخت ناموفق بود');
|
||
} finally {
|
||
paying.value = false;
|
||
}
|
||
}
|
||
|
||
async function removePayment(paymentId: string) {
|
||
if (!id.value || !confirm('این پرداخت حذف شود؟')) return;
|
||
await api.delete(`/invoices/${id.value}/payments/${paymentId}`);
|
||
await load();
|
||
}
|
||
|
||
function addInstallment() {
|
||
installments.value.push(newInstallment());
|
||
}
|
||
|
||
function removeInstallment(key: string) {
|
||
installments.value = installments.value.filter((l) => l.key !== key);
|
||
}
|
||
|
||
function splitInstallments(count: number) {
|
||
const total = Math.abs(payableAmount.value);
|
||
if (!total || count < 1) return;
|
||
const base = Math.floor(total / count);
|
||
const remainder = total - base * count;
|
||
const today = new Date();
|
||
installments.value = Array.from({ length: count }, (_, i) => {
|
||
const d = new Date(today);
|
||
d.setMonth(d.getMonth() + i + 1);
|
||
return {
|
||
key: `split-${i}-${Date.now()}`,
|
||
dueDate: formatLocalDateInput(d),
|
||
amount: String(base + (i === count - 1 ? remainder : 0)),
|
||
};
|
||
});
|
||
}
|
||
|
||
function lineHasContent(line: LineDraft) {
|
||
return Boolean(
|
||
line.name.trim() ||
|
||
line.productId ||
|
||
line.description.trim() ||
|
||
(line.unitPrice !== '' && Number.isFinite(Number(line.unitPrice))),
|
||
);
|
||
}
|
||
|
||
const previewLines = computed(() =>
|
||
lines.value.filter(lineHasContent).map((l) => {
|
||
const product = products.value.find((p) => p.id === l.productId);
|
||
const qty = Number(l.quantity);
|
||
const unit = Number(l.unitPrice);
|
||
const unitPrice = Number.isFinite(unit) && l.unitPrice !== ''
|
||
? unit
|
||
: Number(product?.unitPrice) || 0;
|
||
const quantity = Number.isFinite(qty) && l.quantity !== '' ? qty : 1;
|
||
return {
|
||
name:
|
||
l.name.trim() ||
|
||
product?.name ||
|
||
(l.productId ? 'محصول انتخابشده' : 'بدون نام'),
|
||
description: l.description?.trim() || product?.description || undefined,
|
||
sku: l.sku || product?.sku || undefined,
|
||
quantity,
|
||
unitPrice,
|
||
total: quantity * unitPrice,
|
||
};
|
||
}),
|
||
);
|
||
|
||
const previewSubtotal = computed(() =>
|
||
previewLines.value.reduce((sum, l) => sum + l.total, 0),
|
||
);
|
||
const previewTaxAmount = computed(() =>
|
||
Math.round(
|
||
(Math.max(0, previewSubtotal.value - discountNum.value) * (taxPercentNum.value / 100) +
|
||
Number.EPSILON) *
|
||
100,
|
||
) / 100,
|
||
);
|
||
const previewPayable = computed(() => {
|
||
const signed = Math.round(
|
||
(previewSubtotal.value - discountNum.value + previewTaxAmount.value + Number.EPSILON) * 100,
|
||
) / 100;
|
||
return docMode.value === 'credit' ? -signed : signed;
|
||
});
|
||
|
||
const previewCustomer = computed(() => {
|
||
const p = people.value.find((x) => x.id === personId.value);
|
||
if (!p) return { name: '—', sub: '' };
|
||
const full = p.fullName || `${p.firstName ?? ''} ${p.lastName ?? ''}`.trim();
|
||
return {
|
||
name: p.company?.name || full || '—',
|
||
sub: p.company?.name ? full : '',
|
||
};
|
||
});
|
||
|
||
const previewStatusLabel = computed(() => {
|
||
const map = statusOptions.value as Record<string, string>;
|
||
return map[status.value] || status.value || '—';
|
||
});
|
||
|
||
function printDoc() {
|
||
previewOpen.value = true;
|
||
}
|
||
|
||
function goBack() {
|
||
if (props.embedded) {
|
||
emit('cancel');
|
||
return;
|
||
}
|
||
void router.push({ name: listRouteName });
|
||
}
|
||
|
||
function onValidityDaysChange() {
|
||
applyValidityDays(validityDays.value);
|
||
}
|
||
|
||
function personLabel(p: PersonDto) {
|
||
return p.company?.name
|
||
? `${p.fullName} — ${p.company.name}`
|
||
: p.fullName;
|
||
}
|
||
|
||
const pendingInstallments = computed(
|
||
() =>
|
||
invoice.value?.installments.filter((i) => i.status === 'pending') ?? [],
|
||
);
|
||
|
||
const showPaymentBlock = computed(
|
||
() => !isNew.value && isInvoiceDoc.value && !!invoice.value,
|
||
);
|
||
|
||
watch(
|
||
() => [route.name, route.params.id, route.query.kind, route.query.doc],
|
||
() => {
|
||
void load();
|
||
},
|
||
);
|
||
|
||
|
||
const { Title: ATypographyTitle, Text: ATypographyText } = Typography;
|
||
|
||
const personSelectOptions = computed(() =>
|
||
people.value.map((p) => ({ value: p.id, label: personLabel(p) })),
|
||
);
|
||
|
||
const statusSelectOptions = computed(() =>
|
||
Object.entries(statusOptions.value).map(([value, label]) => ({ value, label })),
|
||
);
|
||
|
||
const currencyAntOptions = computed(() =>
|
||
currencySelectOptions.value.map((o) => ({ value: o.code, label: o.label })),
|
||
);
|
||
|
||
const productSelectOptions = computed(() =>
|
||
filteredProducts.value.map((p) => ({ value: p.id, label: p.name })),
|
||
);
|
||
|
||
const validityDayOptions = computed(() =>
|
||
[7, 15, 30, 60].map((d) => ({ value: d, label: `${toFaDigits(d)} روز` })),
|
||
);
|
||
|
||
const methodSelectOptions = computed(() =>
|
||
(Object.entries(methodLabel) as Array<[PaymentMethod, string]>).map(
|
||
([value, label]) => ({ value, label }),
|
||
),
|
||
);
|
||
|
||
const payInstallmentOptions = computed(() => [
|
||
{ value: '', label: 'بدون اتصال به قسط' },
|
||
...pendingInstallments.value.map((inst) => ({
|
||
value: inst.id,
|
||
label: `قسط ${toFaDigits(inst.position + 1)} — ${formatMoney(inst.amount)}`,
|
||
})),
|
||
]);
|
||
|
||
const chequeStatusOptions = [
|
||
{ value: 'pending', label: 'در جریان' },
|
||
{ value: 'cleared', label: 'وصول شد' },
|
||
{ value: 'bounced', label: 'برگشت' },
|
||
];
|
||
|
||
const docModeSegOptions = computed(() => {
|
||
const opts: Array<{ value: DocMode; label: string; disabled?: boolean }> = [
|
||
{
|
||
value: 'invoice',
|
||
label: 'فاکتور',
|
||
disabled: !isNew.value && docMode.value !== 'invoice',
|
||
},
|
||
{
|
||
value: 'quote',
|
||
label: 'پیش فاکتور',
|
||
disabled: !isNew.value && docMode.value !== 'quote',
|
||
},
|
||
];
|
||
if (docMode.value === 'credit') {
|
||
opts.push({ value: 'credit', label: 'برگشتی', disabled: true });
|
||
}
|
||
return opts;
|
||
});
|
||
|
||
const sideCollapseKeys = ref<string[]>([]);
|
||
|
||
const paymentsCollapseKeys = computed({
|
||
get: () => (showPayments.value ? ['payments'] : []),
|
||
set: (keys: string[]) => {
|
||
showPayments.value = keys.includes('payments');
|
||
},
|
||
});
|
||
|
||
function setLineQty(line: LineDraft, value: number | string | null) {
|
||
const n = Number(value);
|
||
line.quantity = String(Number.isFinite(n) && n > 0 ? n : 1);
|
||
}
|
||
|
||
function setLineProduct(line: LineDraft, value: unknown) {
|
||
line.productId = value == null ? '' : String(value);
|
||
onPickProduct(line);
|
||
}
|
||
|
||
function onDocModeSeg(value: string | number) {
|
||
switchDocMode(String(value) as DocMode);
|
||
}
|
||
|
||
onMounted(load);
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<a-flex
|
||
v-if="!embedded"
|
||
justify="space-between"
|
||
align="center"
|
||
wrap="wrap"
|
||
:gap="12"
|
||
class="no-print"
|
||
:style="{ marginBottom: '16px' }"
|
||
>
|
||
<a-space :size="12" align="start">
|
||
<FileTextOutlined />
|
||
<div>
|
||
<a-typography-title :level="3" :style="{ margin: 0 }">{{ pageTitle }}</a-typography-title>
|
||
<a-typography-text type="secondary">{{ pageSubtitle }}</a-typography-text>
|
||
</div>
|
||
</a-space>
|
||
<a-button @click="goBack">
|
||
<template #icon><ArrowLeftOutlined /></template>
|
||
بازگشت
|
||
</a-button>
|
||
</a-flex>
|
||
|
||
<a-spin :spinning="loading">
|
||
<a-form v-if="!loading" layout="vertical" @finish="save">
|
||
<a-alert
|
||
v-if="error"
|
||
type="error"
|
||
show-icon
|
||
:message="error"
|
||
class="no-print"
|
||
:style="{ marginBottom: '16px' }"
|
||
/>
|
||
|
||
<a-row :gutter="[16, 16]">
|
||
<a-col :xs="24" :lg="embedded ? 24 : 17" :xl="embedded ? 24 : 18">
|
||
<a-card :bordered="false">
|
||
<a-segmented
|
||
class="no-print"
|
||
block
|
||
:value="docMode"
|
||
:options="docModeSegOptions"
|
||
:style="{ marginBottom: '16px' }"
|
||
@update:value="onDocModeSeg"
|
||
/>
|
||
|
||
<a-divider orientation="right">اطلاعات اصلی</a-divider>
|
||
|
||
<a-row :gutter="[16, 0]">
|
||
<a-col :xs="24" :md="12">
|
||
<a-form-item label="مشتری" required>
|
||
<a-select
|
||
v-model:value="personId"
|
||
show-search
|
||
option-filter-prop="label"
|
||
:options="personSelectOptions"
|
||
placeholder="انتخاب مشتری"
|
||
style="width: 100%"
|
||
@change="onPersonChange"
|
||
/>
|
||
<RouterLink :to="{ name: 'person-new' }">
|
||
<a-button type="link" style="padding-inline: 0">
|
||
<template #icon><UserAddOutlined /></template>
|
||
افزودن مشتری جدید
|
||
</a-button>
|
||
</RouterLink>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xs="24" :md="12">
|
||
<a-form-item label="تاریخ" required>
|
||
<JalaliDateInput v-model="issuedAt" required />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xs="24" :md="8">
|
||
<a-form-item label="وضعیت">
|
||
<a-select
|
||
v-model:value="status"
|
||
:options="statusSelectOptions"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xs="24" :md="8">
|
||
<a-form-item label="ارز">
|
||
<a-select
|
||
v-model:value="currency"
|
||
:options="currencyAntOptions"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<template v-if="docMode === 'quote'">
|
||
<a-col :xs="24" :md="8">
|
||
<a-form-item label="اعتبار تا">
|
||
<a-select
|
||
v-model:value="validityDays"
|
||
:options="validityDayOptions"
|
||
style="width: 100%"
|
||
@change="onValidityDaysChange"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col v-if="validUntil" :xs="24" :md="8">
|
||
<a-form-item label="تاریخ اعتبار">
|
||
<JalaliDateInput
|
||
v-model="validUntil"
|
||
@update:model-value="validityMode = 'date'"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
</template>
|
||
<a-col v-else :xs="24" :md="8">
|
||
<a-form-item label="مهلت پرداخت">
|
||
<JalaliDateInput v-model="dueDate" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="24">
|
||
<a-form-item label="یادداشت">
|
||
<a-textarea
|
||
v-model:value="notes"
|
||
:rows="3"
|
||
placeholder="یادداشت خود را وارد کنید..."
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-collapse
|
||
v-model:activeKey="sideCollapseKeys"
|
||
bordered
|
||
class="no-print"
|
||
:style="{ borderRadius: '8px', overflow: 'hidden', marginBottom: '16px' }"
|
||
>
|
||
<a-collapse-panel key="extra" header="اطلاعات تکمیلی">
|
||
<a-typography-text type="secondary">فیلدی برای تکمیل وجود ندارد.</a-typography-text>
|
||
</a-collapse-panel>
|
||
<a-collapse-panel key="shipping" header="آدرس و ارسال">
|
||
<a-typography-text type="secondary">فیلدی برای تکمیل وجود ندارد.</a-typography-text>
|
||
</a-collapse-panel>
|
||
</a-collapse>
|
||
|
||
<a-divider orientation="right">محصولات و خدمات</a-divider>
|
||
|
||
<a-flex
|
||
class="no-print"
|
||
justify="space-between"
|
||
align="center"
|
||
wrap="wrap"
|
||
:gap="8"
|
||
:style="{ marginBottom: '12px' }"
|
||
>
|
||
<a-space :size="8" wrap>
|
||
<RouterLink :to="{ name: 'product-new' }">
|
||
<a-button type="primary">
|
||
<template #icon><PlusOutlined /></template>
|
||
افزودن محصول
|
||
</a-button>
|
||
</RouterLink>
|
||
<a-button @click="addLine">
|
||
<template #icon><PlusOutlined /></template>
|
||
افزودن ردیف
|
||
</a-button>
|
||
</a-space>
|
||
<a-input
|
||
v-model:value="productSearch"
|
||
allow-clear
|
||
placeholder="جستجوی محصول..."
|
||
style="width: 220px; max-width: 100%"
|
||
/>
|
||
</a-flex>
|
||
|
||
<a-flex vertical :gap="12">
|
||
<a-card
|
||
v-for="(line, idx) in lines"
|
||
:key="line.key"
|
||
:bordered="true"
|
||
>
|
||
<a-row :gutter="[16, 0]">
|
||
<a-col :span="24">
|
||
<a-flex justify="space-between" align="center" :style="{ marginBottom: '8px' }">
|
||
<a-typography-text type="secondary">
|
||
ردیف {{ toFaDigits(idx + 1) }}
|
||
</a-typography-text>
|
||
<a-button
|
||
type="text"
|
||
danger
|
||
aria-label="حذف ردیف"
|
||
@click="removeLine(line.key)"
|
||
>
|
||
<template #icon><DeleteOutlined /></template>
|
||
</a-button>
|
||
</a-flex>
|
||
</a-col>
|
||
<a-col :xs="24" :md="12">
|
||
<a-form-item label="محصول">
|
||
<a-select
|
||
:value="line.productId || undefined"
|
||
show-search
|
||
allow-clear
|
||
option-filter-prop="label"
|
||
:options="productSelectOptions"
|
||
placeholder="انتخاب محصول…"
|
||
style="width: 100%"
|
||
@update:value="(v) => setLineProduct(line, v)"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xs="24" :md="12">
|
||
<a-form-item label="نام ردیف" required>
|
||
<a-input v-model:value="line.name" placeholder="نام ردیف" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="24">
|
||
<a-form-item label="توضیح">
|
||
<a-input v-model:value="line.description" placeholder="توضیح اختیاری" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xs="24" :md="8">
|
||
<a-form-item :label="`قیمت واحد (${currencyLabel})`">
|
||
<MoneyInput
|
||
v-model="line.unitPrice"
|
||
:decimals="0"
|
||
placeholder="قیمت"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xs="24" :md="8">
|
||
<a-form-item label="تعداد">
|
||
<a-input-number
|
||
:value="Number(line.quantity) || 1"
|
||
:min="0.01"
|
||
:step="1"
|
||
style="width: 100%"
|
||
@update:value="(v) => setLineQty(line, v)"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xs="24" :md="8">
|
||
<a-form-item :label="`مبلغ کل (${currencyLabel})`">
|
||
<a-typography-text strong>{{ formatMoney(lineTotal(line)) }}</a-typography-text>
|
||
<div>
|
||
<a-typography-text type="secondary" dir="ltr">
|
||
{{ line.sku || '—' }}
|
||
</a-typography-text>
|
||
</div>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
</a-card>
|
||
</a-flex>
|
||
|
||
<a-divider orientation="right">مبالغ</a-divider>
|
||
|
||
<a-row :gutter="[16, 0]">
|
||
<a-col :xs="24" :md="8">
|
||
<a-form-item label="تخفیف">
|
||
<MoneyInput v-model="discountAmount" :decimals="0" placeholder="۰" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xs="24" :md="8">
|
||
<a-form-item label="مالیات (%)">
|
||
<a-input-number
|
||
:value="Number(taxPercent) || 0"
|
||
:min="0"
|
||
:step="0.01"
|
||
style="width: 100%"
|
||
@update:value="(v) => (taxPercent = String(v ?? 0))"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col v-if="docMode === 'invoice'" :xs="24" :md="8">
|
||
<a-form-item label="نوع پورسانت">
|
||
<a-segmented
|
||
v-model:value="commissionMode"
|
||
block
|
||
:options="[
|
||
{ value: 'percent', label: 'درصد' },
|
||
{ value: 'amount', label: 'مبلغ ثابت' },
|
||
]"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col v-if="docMode === 'invoice' && commissionMode === 'percent'" :xs="24" :md="8">
|
||
<a-form-item label="پورسانت کارشناس (%)">
|
||
<a-input-number
|
||
:value="commissionPercent === '' ? undefined : Number(commissionPercent)"
|
||
:min="0"
|
||
:max="100"
|
||
:step="0.1"
|
||
:placeholder="String(defaultCommissionPercent || 0)"
|
||
style="width: 100%"
|
||
@update:value="(v) => (commissionPercent = v == null ? '' : String(v))"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col v-else-if="docMode === 'invoice'" :xs="24" :md="8">
|
||
<a-form-item label="مبلغ پورسانت">
|
||
<MoneyInput v-model="commissionFixedAmount" :decimals="0" />
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-collapse
|
||
v-if="showPaymentBlock"
|
||
v-model:activeKey="paymentsCollapseKeys"
|
||
bordered
|
||
class="no-print"
|
||
:style="{ borderRadius: '8px', overflow: 'hidden', marginTop: '8px' }"
|
||
>
|
||
<a-collapse-panel key="payments" header="اقساط و پرداختها">
|
||
<a-space wrap :size="12" :style="{ marginBottom: '12px' }">
|
||
<a-typography-text>
|
||
جمع: {{ formatMoney(invoice?.payableAmount ?? invoice?.totalAmount ?? 0) }}
|
||
</a-typography-text>
|
||
<a-typography-text>
|
||
وصول: {{ formatMoney(invoice?.paidAmount ?? 0) }}
|
||
</a-typography-text>
|
||
<a-typography-text>
|
||
مانده: {{ formatMoney(invoice?.remainingAmount ?? 0) }}
|
||
</a-typography-text>
|
||
</a-space>
|
||
|
||
<a-flex justify="space-between" align="center" wrap="wrap" :gap="8">
|
||
<a-typography-title :level="5" :style="{ margin: 0 }">اقساط</a-typography-title>
|
||
<a-space wrap :size="8">
|
||
<a-button @click="splitInstallments(2)">۲ قسط</a-button>
|
||
<a-button @click="splitInstallments(3)">۳ قسط</a-button>
|
||
<a-button @click="addInstallment">افزودن قسط</a-button>
|
||
</a-space>
|
||
</a-flex>
|
||
|
||
<a-row
|
||
v-for="item in installments"
|
||
:key="item.key"
|
||
:gutter="[16, 0]"
|
||
:style="{ marginTop: '8px' }"
|
||
>
|
||
<a-col :xs="24" :md="10">
|
||
<JalaliDateInput v-model="item.dueDate" />
|
||
</a-col>
|
||
<a-col :xs="24" :md="10">
|
||
<MoneyInput
|
||
v-model="item.amount"
|
||
:decimals="0"
|
||
placeholder="مبلغ قسط"
|
||
/>
|
||
</a-col>
|
||
<a-col :xs="24" :md="4">
|
||
<a-button danger block @click="removeInstallment(item.key)">
|
||
<template #icon><DeleteOutlined /></template>
|
||
</a-button>
|
||
</a-col>
|
||
</a-row>
|
||
<a-typography-text v-if="!installments.length" type="secondary">
|
||
بدون برنامه اقساط.
|
||
</a-typography-text>
|
||
|
||
<a-typography-title :level="5" :style="{ marginTop: '16px' }">
|
||
ثبت پرداخت
|
||
</a-typography-title>
|
||
<a-row :gutter="[16, 0]">
|
||
<a-col :xs="24" :md="8">
|
||
<a-form-item label="مبلغ">
|
||
<MoneyInput v-model="payAmount" :decimals="0" placeholder="مبلغ" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xs="24" :md="8">
|
||
<a-form-item label="روش">
|
||
<a-select
|
||
v-model:value="payMethod"
|
||
:options="methodSelectOptions"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xs="24" :md="8">
|
||
<a-form-item label="تاریخ پرداخت">
|
||
<JalaliDateInput v-model="payDate" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xs="24" :md="12">
|
||
<a-form-item label="قسط">
|
||
<a-select
|
||
v-model:value="payInstallmentId"
|
||
:options="payInstallmentOptions"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xs="24" :md="12">
|
||
<a-form-item label="یادداشت پرداخت">
|
||
<a-input v-model:value="payNotes" placeholder="یادداشت پرداخت" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col v-if="financeAccounts.length" :xs="24" :md="12">
|
||
<a-form-item label="حساب صندوق">
|
||
<a-select
|
||
v-model:value="payAccountId"
|
||
style="width: 100%"
|
||
:options="[
|
||
{ value: '', label: 'بدون اثر روی صندوق' },
|
||
...financeAccounts.map((account) => ({
|
||
value: account.id,
|
||
label: `واریز به ${account.name}`,
|
||
})),
|
||
]"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<template v-if="payMethod === 'check'">
|
||
<a-col :xs="24" :md="8">
|
||
<a-form-item label="شماره چک">
|
||
<a-input v-model:value="chequeNumber" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xs="24" :md="8">
|
||
<a-form-item label="بانک">
|
||
<a-input v-model:value="chequeBank" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xs="24" :md="8">
|
||
<a-form-item label="سررسید چک">
|
||
<JalaliDateInput v-model="chequeDue" placeholder="سررسید چک" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :xs="24" :md="8">
|
||
<a-form-item label="وضعیت چک">
|
||
<a-select
|
||
v-model:value="chequeStatus"
|
||
:options="chequeStatusOptions"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
</template>
|
||
<a-col :span="24">
|
||
<a-button type="primary" :loading="paying" @click="submitPayment">
|
||
ثبت پرداخت
|
||
</a-button>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-flex
|
||
v-for="p in invoice?.payments ?? []"
|
||
:key="p.id"
|
||
justify="space-between"
|
||
align="center"
|
||
:style="{ marginTop: '8px' }"
|
||
>
|
||
<div>
|
||
<a-typography-text strong>{{ formatMoney(p.amount) }}</a-typography-text>
|
||
<a-typography-text type="secondary">
|
||
· {{ methodLabel[p.method as PaymentMethod] || p.method }}
|
||
<template v-if="p.cheque">
|
||
· چک {{ p.cheque.number }} / {{ p.cheque.bank }}
|
||
</template>
|
||
· {{ p.paidAt.slice(0, 10) }}
|
||
</a-typography-text>
|
||
</div>
|
||
<a-button type="link" danger @click="removePayment(p.id)">حذف</a-button>
|
||
</a-flex>
|
||
<a-typography-text
|
||
v-if="!(invoice?.payments?.length)"
|
||
type="secondary"
|
||
>
|
||
هنوز پرداختی ثبت نشده.
|
||
</a-typography-text>
|
||
</a-collapse-panel>
|
||
</a-collapse>
|
||
|
||
<a-space
|
||
v-if="!embedded"
|
||
class="no-print"
|
||
wrap
|
||
:size="8"
|
||
:style="{ marginTop: '16px' }"
|
||
>
|
||
<a-button @click="printDoc">
|
||
<template #icon><EyeOutlined /></template>
|
||
پیشنمایش
|
||
</a-button>
|
||
<a-button
|
||
v-if="!isNew"
|
||
danger
|
||
:disabled="saving"
|
||
@click="remove"
|
||
>
|
||
<template #icon><DeleteOutlined /></template>
|
||
حذف
|
||
</a-button>
|
||
<a-button type="primary" html-type="submit" :loading="saving">
|
||
<template #icon><CheckOutlined /></template>
|
||
{{ saveLabel }}
|
||
</a-button>
|
||
</a-space>
|
||
|
||
<a-space
|
||
v-if="embedded"
|
||
class="no-print"
|
||
wrap
|
||
:size="8"
|
||
:style="{ marginTop: '16px' }"
|
||
>
|
||
<a-button type="primary" :loading="saving" @click="save">ذخیره</a-button>
|
||
<a-button :disabled="saving" @click="goBack">انصراف</a-button>
|
||
</a-space>
|
||
</a-card>
|
||
</a-col>
|
||
|
||
<a-col v-if="!embedded" :xs="24" :lg="7" :xl="6" class="no-print">
|
||
<a-affix :offset-top="24">
|
||
<a-card :bordered="false" title="خلاصه">
|
||
<a-descriptions :column="1" size="small" bordered>
|
||
<a-descriptions-item label="جمع کل">
|
||
{{ formatMoney(subtotal) }}
|
||
</a-descriptions-item>
|
||
<a-descriptions-item label="تخفیف">
|
||
{{ formatMoney(discountNum) }}
|
||
</a-descriptions-item>
|
||
<a-descriptions-item label="مالیات">
|
||
{{ formatMoney(taxAmount) }}
|
||
</a-descriptions-item>
|
||
<a-descriptions-item label="قابل پرداخت">
|
||
{{ formatMoney(payableAmount) }}
|
||
</a-descriptions-item>
|
||
<a-descriptions-item v-if="docMode === 'invoice'" label="برآورد پورسانت">
|
||
{{ formatMoney(commissionPreview) }}
|
||
<template v-if="invoice?.commission?.status === 'posted'">
|
||
· ثبتشده {{ formatMoney(invoice.commission.amount) }}
|
||
</template>
|
||
</a-descriptions-item>
|
||
</a-descriptions>
|
||
</a-card>
|
||
</a-affix>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form>
|
||
</a-spin>
|
||
|
||
<InvoiceDocPreview
|
||
v-model:open="previewOpen"
|
||
:doc-mode="docMode"
|
||
:org-name="orgName"
|
||
:number="number"
|
||
:title="title"
|
||
:status-label="previewStatusLabel"
|
||
:issued-at="issuedAt"
|
||
:due-or-valid="docMode === 'quote' ? validUntil : dueDate"
|
||
:due-or-valid-label="docMode === 'quote' ? 'اعتبار تا' : 'مهلت پرداخت'"
|
||
:customer-name="previewCustomer.name"
|
||
:customer-sub="previewCustomer.sub"
|
||
:notes="notes"
|
||
:currency="currency"
|
||
:lines="previewLines"
|
||
:subtotal="previewSubtotal"
|
||
:discount="discountNum"
|
||
:tax-amount="previewTaxAmount"
|
||
:tax-percent="taxPercentNum"
|
||
:payable="previewPayable"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|