86 lines
2.4 KiB
Vue
86 lines
2.4 KiB
Vue
<template>
|
|
<div
|
|
class="physical-receive-item"
|
|
:class="{ 'physical-receive-item--desktop': variant === 'desktop' }"
|
|
>
|
|
<div class="flex justify-between">
|
|
<div class="font-bold">شماره سند: {{ props.item.id }}</div>
|
|
<div class="font-bold">{{ toJalali(props.item.created_at) }}</div>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<div class="flex flex-col w-full gap-1">
|
|
<div
|
|
v-for="tx in props.item.transaction"
|
|
:key="tx.id ?? tx.title"
|
|
class="w-full flex justify-between"
|
|
>
|
|
<div class="flex items-center gap-1">
|
|
<div class="w-7 h-7 flex justify-center rounded-lg bg-gray-100">
|
|
<img
|
|
width="30"
|
|
class="p-1 object-contain"
|
|
:src="getProductDisplayImage(tx.product)"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div>{{ tx.title }}</div>
|
|
</div>
|
|
<div>{{ tx.gold * -1 }} {{ getProductQuantityUnit(tx.product) }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<div class="font-bold">وضعیت:</div>
|
|
<ATag color="blue" class="!py-1 !px-2 !ml-0">
|
|
{{ props.item.sts_str }}
|
|
</ATag>
|
|
</div>
|
|
<ADivider class="!m-1" />
|
|
<div class="flex flex-col justify-between">
|
|
<div class="font-bold">آدرس:</div>
|
|
<div>
|
|
{{ props.item.address.province }}/{{ props.item.address.city }}/{{ props.item.address.address }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Physicalreceive } from '@/models/physicalreceive'
|
|
import { toJalali } from '@/utils/useDateTime'
|
|
import { getProductDisplayImage } from '@/utils/productAssets'
|
|
import { getProductQuantityUnit } from '@/utils/productDealMethod'
|
|
|
|
interface Prop {
|
|
item: Physicalreceive
|
|
variant?: 'mobile' | 'desktop'
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Prop>(), {
|
|
variant: 'mobile',
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.physical-receive-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-inline: 8px;
|
|
padding: 12px;
|
|
border-radius: 12px;
|
|
background: #fff;
|
|
border: 1px solid rgba(15, 23, 42, 0.08);
|
|
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
|
|
}
|
|
|
|
.physical-receive-item--desktop {
|
|
margin: 0;
|
|
padding: 16px;
|
|
border-radius: 16px;
|
|
background: #fff;
|
|
border: 1px solid rgba(15, 23, 42, 0.06);
|
|
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
|
|
}
|
|
</style>
|