127 lines
4.6 KiB
Vue
127 lines
4.6 KiB
Vue
<template>
|
|
<MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="sheetTitle">
|
|
<template #default="{ item: row }">
|
|
<MobileSheetHeader :title="sheetTitle" :subtitle="dateLabel(row)" :show-title="isMobile" />
|
|
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<span class="rounded-lg border px-2 py-0.5 text-xs font-600" :class="typeTagClass(row)">
|
|
{{ typeLabel(row) }}
|
|
</span>
|
|
<span
|
|
v-if="!isMoneyType(row) && row.transaction_metal_label"
|
|
class="rounded-lg border border-amber-300 bg-amber-50 px-2 py-0.5 text-xs font-600 text-amber-700"
|
|
>
|
|
{{ row.transaction_metal_label }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<MobileStatCard
|
|
v-for="entry in metalEntries(row)"
|
|
:key="entry.metal_id"
|
|
bordered
|
|
:variant="entry.value > 0 ? 'success' : 'danger'"
|
|
:label="transactionMetalAmountTitle(entry.metal_id, entry.label)"
|
|
:value="entry.display"
|
|
>
|
|
<template #prefix>
|
|
<BaseIcon icon="vuesax-linear:coin" size="18" :color="entry.value > 0 ? '#15803d' : '#dc2626'" />
|
|
</template>
|
|
</MobileStatCard>
|
|
<MobileStatCard
|
|
bordered
|
|
:variant="(row.cash ?? 0) > 0 ? 'success' : 'danger'"
|
|
label="مقدار پول (ریال)"
|
|
:value="usePrice(row.cash ?? 0, true, '')"
|
|
>
|
|
<template #prefix>
|
|
<BaseIcon icon="vuesax-linear:empty-wallet" size="18" :color="(row.cash ?? 0) > 0 ? '#15803d' : '#dc2626'" />
|
|
</template>
|
|
</MobileStatCard>
|
|
</div>
|
|
|
|
<MobileInfoGrid>
|
|
<MobileDetailRow label="نوع فلز" :value="isMoneyType(row) ? '-' : (row.transaction_metal_label ?? '-')" />
|
|
<MobileDetailRow label="کد تراکنش" :value="row.id ?? '-'" />
|
|
<MobileDetailRow label="نام تراکنش" :value="row.type_str || '-'" />
|
|
<MobileDetailRow label="علت تراکنش" full-width :value="noteLabel(row)" />
|
|
<MobileDetailRow label="نام مشتری" full-width :value="row.customer?.name || '-'" />
|
|
<MobileDetailRow label="تاریخ تراکنش" :value="dateLabel(row)" />
|
|
</MobileInfoGrid>
|
|
</template>
|
|
</MobileDetailSheet>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Transaction } from '@/model/transaction'
|
|
import MobileDetailRow from '@/components/mobile/MobileDetailRow.vue'
|
|
import MobileDetailSheet from '@/components/mobile/MobileDetailSheet.vue'
|
|
import MobileInfoGrid from '@/components/mobile/MobileInfoGrid.vue'
|
|
import MobileSheetHeader from '@/components/mobile/MobileSheetHeader.vue'
|
|
import MobileStatCard from '@/components/mobile/MobileStatCard.vue'
|
|
import { isMobile } from '@core/utils/is'
|
|
import { toJalaliNoTime } from '@core/utils/useDataTime'
|
|
import { usePrice } from '@core/utils/usePrice'
|
|
import { metalLabel, transactionMetalAmountTitle } from '@/utils/adminMetalLabels'
|
|
import { formatMetalDisplayValue, metalCellValue } from '@/utils/metalWeight'
|
|
import type { TransactionMetalColumn } from '../hooks/transactionsColumns'
|
|
|
|
const props = defineProps<{
|
|
visible: boolean
|
|
item: Transaction | null
|
|
metals?: TransactionMetalColumn[]
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:visible', value: boolean): void
|
|
}>()
|
|
|
|
const visibleProxy = computed({
|
|
get: () => props.visible,
|
|
set: (value: boolean) => emit('update:visible', value)
|
|
})
|
|
|
|
const sheetTitle = computed(() => props.item?.type_str || `تراکنش #${props.item?.id ?? '-'}`)
|
|
|
|
function isMoneyType(row: Transaction) {
|
|
return row.type === 4 || row.type === 3
|
|
}
|
|
|
|
function typeLabel(row: Transaction) {
|
|
return isMoneyType(row) ? 'پول' : 'فلز'
|
|
}
|
|
|
|
function typeTagClass(row: Transaction) {
|
|
return isMoneyType(row)
|
|
? 'border-green-300 bg-green-50 text-green-700'
|
|
: 'border-amber-300 bg-amber-50 text-amber-700'
|
|
}
|
|
|
|
function dateLabel(row: Transaction) {
|
|
return row.created_at ? toJalaliNoTime(row.created_at) : '-'
|
|
}
|
|
|
|
function noteLabel(row: Transaction) {
|
|
if (row.note == null) return '-'
|
|
return String(row.note)
|
|
}
|
|
|
|
function metalEntries(row: Transaction) {
|
|
const metals = props.metals?.length
|
|
? props.metals
|
|
: [{ metal_id: row.transaction_metal_id ?? 1, label: row.transaction_metal_label ?? 'طلا' }]
|
|
|
|
return metals
|
|
.map((metal) => {
|
|
const value = metalCellValue(row as Record<string, unknown>, metal.metal_id)
|
|
return {
|
|
metal_id: metal.metal_id,
|
|
label: metal.label,
|
|
value,
|
|
display: value ? formatMetalDisplayValue(value, metal.metal_id) : '-'
|
|
}
|
|
})
|
|
.filter((entry) => entry.value !== 0)
|
|
}
|
|
</script>
|