69 lines
2.2 KiB
Vue
69 lines
2.2 KiB
Vue
<template>
|
|
<MobileCard clickable @click="$emit('open', item)">
|
|
<div class="flex items-center gap-2">
|
|
<div class="min-w-0 flex-1 space-y-1">
|
|
<div class="flex items-center justify-between gap-2">
|
|
<span class="truncate text-sm font-700 text-gray-900">{{ customerName }}</span>
|
|
<span class="shrink-0 rounded-md border px-1.5 py-0.5 text-xs font-600" :class="statusClass">
|
|
{{ statusLabel }}
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-2 text-xs text-gray-600">
|
|
<span class="truncate">{{ item.bank_name || '-' }}</span>
|
|
<span class="shrink-0 text-gray-400">#{{ item.id ?? '-' }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<MobileIconButton
|
|
v-if="can('toggle')"
|
|
:icon="item.sts === 2 ? 'vuesax-linear:card-tick' : 'vuesax-linear:card-remove'"
|
|
:color="item.sts === 2 ? '#16A34A' : '#DC2626'"
|
|
:size="20"
|
|
@click="$emit('toggleSts', item)"
|
|
/>
|
|
<MobileIconButton
|
|
v-if="can('delete')"
|
|
icon="vuesax-linear:trash"
|
|
color="#DC2626"
|
|
:size="20"
|
|
@click="$emit('delete', item)"
|
|
/>
|
|
</div>
|
|
</MobileCard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Card } from '@/model/card'
|
|
import MobileCard from '@/components/mobile/MobileCard.vue'
|
|
import MobileIconButton from '@/components/mobile/MobileIconButton.vue'
|
|
import { usePageActionAccess } from '@/composables/usePageActionAccess'
|
|
|
|
const { can } = usePageActionAccess()
|
|
|
|
type AccountRow = Card & { sts_str?: string; created_at?: string; customer_id?: number }
|
|
|
|
const props = defineProps<{
|
|
item: AccountRow
|
|
}>()
|
|
|
|
defineEmits<{
|
|
(e: 'open', item: AccountRow): void
|
|
(e: 'toggleSts', item: AccountRow): void
|
|
(e: 'delete', item: AccountRow): void
|
|
}>()
|
|
|
|
const customerName = computed(() => props.item.customer?.name || '-')
|
|
const statusLabel = computed(() => props.item.sts_str || '-')
|
|
|
|
const statusClass = computed(() => {
|
|
switch (props.item.sts) {
|
|
case 1:
|
|
return 'border-amber-300 bg-amber-50 text-amber-700'
|
|
case 2:
|
|
return 'border-green-300 bg-green-50 text-green-700'
|
|
default:
|
|
return 'border-red-300 bg-red-50 text-red-600'
|
|
}
|
|
})
|
|
</script>
|