56 lines
2.1 KiB
Vue
56 lines
2.1 KiB
Vue
<template>
|
|
<MobileCard clickable @click="$emit('open', item)">
|
|
<div class="space-y-1">
|
|
<div class="flex items-center justify-between gap-2">
|
|
<div class="truncate text-sm font-700 text-gray-900">{{ customerName }}</div>
|
|
<span class="shrink-0 rounded-full px-2 py-0.5 text-[11px] font-600" :class="statusClass">
|
|
{{ statusText }}
|
|
</span>
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-gray-600">
|
|
<span>نوع: <span class="font-600 text-gray-900">{{ pargarTypeLabel(item.type) }}</span></span>
|
|
<span>مقدار: <span class="font-600 text-gray-900">{{ metalLabel }}</span></span>
|
|
<span>ریال: <span class="font-600 text-gray-900">{{ rialLabel }}</span></span>
|
|
</div>
|
|
<div class="text-xs text-gray-400">{{ createdAtLabel }}</div>
|
|
</div>
|
|
</MobileCard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { PargarRecord } from '@/api/pargar'
|
|
import MobileCard from '@/components/mobile/MobileCard.vue'
|
|
import { toJalali } from '@core/utils/useDataTime'
|
|
import { pargarStatusLabel } from '@/pages/menuPages/accounting/utils/pargarStatus'
|
|
import {
|
|
pargarCustomerLabel,
|
|
pargarMetalAmountLabel,
|
|
pargarRialAmountLabel,
|
|
pargarTypeLabel
|
|
} from '@/pages/menuPages/accounting/utils/pargarDisplay'
|
|
|
|
const props = defineProps<{
|
|
item: PargarRecord
|
|
}>()
|
|
|
|
defineEmits<{
|
|
(e: 'open', item: PargarRecord): void
|
|
}>()
|
|
|
|
const customerName = computed(() => pargarCustomerLabel(props.item))
|
|
const createdAtLabel = computed(() =>
|
|
props.item.created_at ? toJalali(props.item.created_at) : '-'
|
|
)
|
|
const metalLabel = computed(() => pargarMetalAmountLabel(props.item))
|
|
const rialLabel = computed(() => pargarRialAmountLabel(props.item))
|
|
const statusText = computed(() =>
|
|
pargarStatusLabel(props.item.sync_status, props.item.pargar_ref, props.item.desc)
|
|
)
|
|
const statusClass = computed(() => {
|
|
const text = statusText.value
|
|
if (text === 'موفق') return 'bg-green-100 text-green-700'
|
|
if (text === 'ناموفق') return 'bg-red-100 text-red-700'
|
|
return 'bg-amber-100 text-amber-700'
|
|
})
|
|
</script>
|