107 lines
4.0 KiB
Vue
107 lines
4.0 KiB
Vue
|
<template>
|
||
|
|
<BasicActionSheet
|
||
|
|
v-model:visible="visibleProxy"
|
||
|
|
title="لیست کدهای کارت هدیه"
|
||
|
|
modal-width="80%"
|
||
|
|
drawer-height="90vh"
|
||
|
|
:showButton="true"
|
||
|
|
:showCancel="true"
|
||
|
|
:showOk="false"
|
||
|
|
cancel-text="بستن"
|
||
|
|
@cancel="close"
|
||
|
|
@close="close"
|
||
|
|
>
|
||
|
|
<div v-if="isMobile" class="mb-3 text-base font-700">لیست کدهای کارت هدیه</div>
|
||
|
|
|
||
|
|
<a-table
|
||
|
|
class="hidden md:block"
|
||
|
|
:columns="columns"
|
||
|
|
:data-source="codes"
|
||
|
|
:pagination="{ pageSize: 10 }"
|
||
|
|
row-key="id"
|
||
|
|
>
|
||
|
|
<template #bodyCell="{ column, record, index }">
|
||
|
|
<template v-if="column.key === 'index'">{{ index + 1 }}</template>
|
||
|
|
<template v-else-if="column.key === 'sts'">
|
||
|
|
<CustomTag v-if="record.sts === 1" textColor="#ca8a04" bgColor="#fef3c7">فعال</CustomTag>
|
||
|
|
<CustomTag v-else-if="record.sts === 2" textColor="#25855A" bgColor="#E3F4E9">استفاده شده</CustomTag>
|
||
|
|
<CustomTag v-else textColor="#C53030" bgColor="#FECACA">غیرفعال</CustomTag>
|
||
|
|
</template>
|
||
|
|
<template v-else-if="column.key === 'unit'">
|
||
|
|
<CustomTag v-if="record.unit === 2" textColor="#C53030" bgColor="#FECACA">طلایی</CustomTag>
|
||
|
|
<CustomTag v-else textColor="#25855A" bgColor="#E3F4E9">ریالی</CustomTag>
|
||
|
|
</template>
|
||
|
|
<template v-else-if="column.key === 'amount'">
|
||
|
|
{{ record.amount }} {{ record.unit === 2 ? 'گرم' : 'ریال' }}
|
||
|
|
</template>
|
||
|
|
<template v-else-if="column.key === 'expiry_date'">
|
||
|
|
{{ record.expiry_date ? toJalali(record.expiry_date) : '-' }}
|
||
|
|
</template>
|
||
|
|
<template v-else-if="column.key === 'used_at'">
|
||
|
|
{{ record.used_at ? toJalali(record.used_at) : '-' }}
|
||
|
|
</template>
|
||
|
|
<template v-else-if="column.key === 'assigned_to_name'">
|
||
|
|
{{ record.assigned_to?.name ?? '-' }}
|
||
|
|
</template>
|
||
|
|
<template v-else-if="column.key === 'assigned_to_mobile'">
|
||
|
|
{{ record.assigned_to?.mobile ?? '-' }}
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
</a-table>
|
||
|
|
|
||
|
|
<div class="space-y-2 md:hidden">
|
||
|
|
<GiftCardCodeMobileListItem
|
||
|
|
v-for="item in codes"
|
||
|
|
:key="item.id"
|
||
|
|
:item="item"
|
||
|
|
@open="openSheet"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<GiftCardCodeMobileDetailSheet v-model:visible="sheetVisible" :item="selectedItem" />
|
||
|
|
</BasicActionSheet>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import type { Giftcardcode } from '@/model/giftCard'
|
||
|
|
import BasicActionSheet from '@/components/BasicActionSheet.vue'
|
||
|
|
import CustomTag from '@/components/CustomTag.vue'
|
||
|
|
import { useMobileDetailSheet } from '@/components/mobile/composables/useMobileDetailSheet'
|
||
|
|
import { isMobile } from '@core/utils/is'
|
||
|
|
import { toJalali } from '@core/utils/useDataTime'
|
||
|
|
import GiftCardCodeMobileDetailSheet from './GiftCardCodeMobileDetailSheet.vue'
|
||
|
|
import GiftCardCodeMobileListItem from './GiftCardCodeMobileListItem.vue'
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
visible: boolean
|
||
|
|
codes: Giftcardcode[]
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const emit = defineEmits<{
|
||
|
|
(e: 'update:visible', value: boolean): void
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const visibleProxy = computed({
|
||
|
|
get: () => props.visible,
|
||
|
|
set: (value: boolean) => emit('update:visible', value)
|
||
|
|
})
|
||
|
|
|
||
|
|
const { sheetVisible, selectedItem, openSheet } = useMobileDetailSheet<Giftcardcode>()
|
||
|
|
|
||
|
|
const columns = [
|
||
|
|
{ title: 'ردیف', key: 'index', dataIndex: 'index' },
|
||
|
|
{ title: 'کد', dataIndex: 'code', key: 'code' },
|
||
|
|
{ title: 'نوع', dataIndex: 'unit', key: 'unit' },
|
||
|
|
{ title: 'مقدار', dataIndex: 'amount', key: 'amount' },
|
||
|
|
{ title: 'وضعیت', dataIndex: 'sts', key: 'sts' },
|
||
|
|
{ title: 'تاریخ انقضا', dataIndex: 'expiry_date', key: 'expiry_date' },
|
||
|
|
{ title: 'تاریخ استفاده', dataIndex: 'used_at', key: 'used_at' },
|
||
|
|
{ title: 'نام کاربر اختصاص داده شده', dataIndex: 'assigned_to.name', key: 'assigned_to_name' },
|
||
|
|
{ title: 'شماره موبایل کاربر اختصاص داده شده', dataIndex: 'assigned_to.mobile', key: 'assigned_to_mobile' }
|
||
|
|
]
|
||
|
|
|
||
|
|
function close() {
|
||
|
|
visibleProxy.value = false
|
||
|
|
}
|
||
|
|
</script>
|