change responsive]
This commit is contained in:
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="sheetTitle">
|
||||
<template #default="{ item: row }">
|
||||
<MobileSheetHeader :title="sheetTitle" :show-title="isMobile" />
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="rounded-lg border px-2 py-0.5 text-xs font-600" :class="unitTagClass(row)">
|
||||
{{ unitLabel(row) }}
|
||||
</span>
|
||||
<span class="rounded-lg border px-2 py-0.5 text-xs font-600" :class="statusClass(row)">
|
||||
{{ statusLabel(row) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<MobileStatCard bordered label="مقدار" :value="amountLabel(row)">
|
||||
<template #prefix>
|
||||
<BaseIcon
|
||||
:icon="row.unit === 2 ? 'vuesax-linear:coin' : 'vuesax-linear:empty-wallet'"
|
||||
size="18"
|
||||
color="#2563eb"
|
||||
/>
|
||||
</template>
|
||||
</MobileStatCard>
|
||||
|
||||
<MobileInfoGrid>
|
||||
<MobileDetailRow label="کد" full-width :value="row.code || '-'" />
|
||||
<MobileDetailRow label="تاریخ انقضا" full-width :value="dateLabel(row.expiry_date)" />
|
||||
<MobileDetailRow label="تاریخ استفاده" full-width :value="dateLabel(row.used_at)" />
|
||||
<MobileDetailRow label="نام کاربر" full-width :value="row.assigned_to?.name || '-'" />
|
||||
<MobileDetailRow label="موبایل کاربر" full-width :value="row.assigned_to?.mobile || '-'" />
|
||||
</MobileInfoGrid>
|
||||
</template>
|
||||
</MobileDetailSheet>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Giftcardcode } from '@/model/giftCard'
|
||||
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 { toJalali } from '@core/utils/useDataTime'
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean
|
||||
item: Giftcardcode | null
|
||||
}>()
|
||||
|
||||
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?.code || 'کد کارت هدیه')
|
||||
|
||||
function statusLabel(row: Giftcardcode) {
|
||||
switch (row.sts) {
|
||||
case 1:
|
||||
return 'فعال'
|
||||
case 2:
|
||||
return 'استفاده شده'
|
||||
default:
|
||||
return 'غیرفعال'
|
||||
}
|
||||
}
|
||||
|
||||
function statusClass(row: Giftcardcode) {
|
||||
switch (row.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'
|
||||
}
|
||||
}
|
||||
|
||||
function unitLabel(row: Giftcardcode) {
|
||||
return row.unit === 2 ? 'طلایی' : 'ریالی'
|
||||
}
|
||||
|
||||
function unitTagClass(row: Giftcardcode) {
|
||||
return row.unit === 2
|
||||
? 'border-amber-300 bg-amber-50 text-amber-700'
|
||||
: 'border-green-300 bg-green-50 text-green-700'
|
||||
}
|
||||
|
||||
function amountLabel(row: Giftcardcode) {
|
||||
return `${row.amount ?? 0} ${row.unit === 2 ? 'گرم' : 'ریال'}`
|
||||
}
|
||||
|
||||
function dateLabel(value?: string) {
|
||||
return value ? toJalali(value) : '-'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<MobileCard clickable @click="$emit('open', item)">
|
||||
<div class="space-y-1">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<span class="truncate font-mono text-sm font-700 text-gray-900">{{ item.code || '-' }}</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="rounded-md border px-1.5 py-0.5 font-600" :class="unitTagClass">{{ unitLabel }}</span>
|
||||
<span class="font-600 text-gray-900">{{ amountLabel }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</MobileCard>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Giftcardcode } from '@/model/giftCard'
|
||||
import MobileCard from '@/components/mobile/MobileCard.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
item: Giftcardcode
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
(e: 'open', item: Giftcardcode): void
|
||||
}>()
|
||||
|
||||
const statusLabel = computed(() => {
|
||||
switch (props.item.sts) {
|
||||
case 1:
|
||||
return 'فعال'
|
||||
case 2:
|
||||
return 'استفاده شده'
|
||||
default:
|
||||
return 'غیرفعال'
|
||||
}
|
||||
})
|
||||
|
||||
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'
|
||||
}
|
||||
})
|
||||
|
||||
const unitLabel = computed(() => (props.item.unit === 2 ? 'طلایی' : 'ریالی'))
|
||||
const unitTagClass = computed(() =>
|
||||
props.item.unit === 2
|
||||
? 'border-amber-300 bg-amber-50 text-amber-700'
|
||||
: 'border-green-300 bg-green-50 text-green-700'
|
||||
)
|
||||
|
||||
const amountLabel = computed(() => `${props.item.amount ?? 0} ${props.item.unit === 2 ? 'گرم' : 'ریال'}`)
|
||||
</script>
|
||||
@@ -0,0 +1,106 @@
|
||||
<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>
|
||||
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<a-form :model="form" ref="formRef" autocomplete="off">
|
||||
<div class="space-y-3">
|
||||
<a-form-item label="شماره موبایل مشتری" name="mobile" :rules="inputLenRules(11)">
|
||||
<BasicInput v-model:value="form.mobile" type="tel" placeholder="09123456789" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="نام مشتری" name="name" :rules="inputRules()">
|
||||
<BasicInput v-model:value="form.name" placeholder="نام و نام خانوادگی مشتری" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="نوع کارت هدیه" name="unit" :rules="inputRules()">
|
||||
<a-radio-group v-model:value="form.unit" button-style="solid">
|
||||
<a-radio-button value="1">ریالی</a-radio-button>
|
||||
<a-radio-button value="2">طلایی</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="تعداد کدها" name="count" :rules="inputRulesNumber()">
|
||||
<BasicInput v-model:value="form.count" type="tel" placeholder="تعداد کدهای کارت هدیه" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:label="`مقدار ${form.unit === '2' ? '(گرم)' : '(ریال)'}`"
|
||||
name="amount"
|
||||
:rules="inputRulesNumber()"
|
||||
>
|
||||
<BasicInput
|
||||
v-model:value="form.amount"
|
||||
:addon-before="form.unit === '2' ? 'گرم' : 'ریال'"
|
||||
type="tel"
|
||||
placeholder="مقدار کارت هدیه"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="تاریخ انقضا" name="expiry_date" :rules="inputRules()">
|
||||
<BaseDatePicker v-model:value="form.expiry_date" format="YYYY-MM-DD" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="توضیحات" name="description" class="mb-0">
|
||||
<BasicTextArea v-model:value="form.description" place-holder="توضیحات اختیاری" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { FormInstance } from 'ant-design-vue'
|
||||
import type { GiftcardInput } from '@/model/giftCard'
|
||||
import { inputLenRules, inputRules, inputRulesNumber } from '@/utils/inputRules'
|
||||
|
||||
defineProps<{
|
||||
form: GiftcardInput
|
||||
}>()
|
||||
|
||||
const formRef = ref<FormInstance>()
|
||||
|
||||
defineExpose({
|
||||
validateFields: () => formRef.value?.validateFields(),
|
||||
resetFields: () => formRef.value?.resetFields()
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<MobileCardList
|
||||
v-model:search="search"
|
||||
:loading="loading"
|
||||
:has-more="hasMore"
|
||||
:show-empty="!loading && items.length === 0"
|
||||
empty-text="کارت هدیهای یافت نشد"
|
||||
search-placeholder="جستجو کارت هدیه"
|
||||
show-refresh
|
||||
@search="reload"
|
||||
@refresh="reload"
|
||||
@load-more="loadMore"
|
||||
>
|
||||
<GiftCardMobileListItem
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
:item="item"
|
||||
:hide-customer="!!customerId"
|
||||
@open="openSheet"
|
||||
@gift-card-codes="$emit('giftCardCodes', $event)"
|
||||
/>
|
||||
</MobileCardList>
|
||||
|
||||
<GiftCardMobileDetailSheet v-model:visible="sheetVisible" :item="selectedItem" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getGiftCardTable } from '@/api/giftCard'
|
||||
import type { Giftcard } from '@/model/giftCard'
|
||||
import MobileCardList from '@/components/mobile/MobileCardList.vue'
|
||||
import { useMobileDetailSheet } from '@/components/mobile/composables/useMobileDetailSheet'
|
||||
import { useMobileTableList } from '@/components/mobile/composables/useMobileTableList'
|
||||
import type { TableInput } from '@core/type/baseTable'
|
||||
import GiftCardMobileDetailSheet from './GiftCardMobileDetailSheet.vue'
|
||||
import GiftCardMobileListItem from './GiftCardMobileListItem.vue'
|
||||
|
||||
type GiftCardRow = Giftcard & { customer?: { name?: string; mobile?: string } }
|
||||
|
||||
const props = defineProps<{
|
||||
customerId?: number
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
(e: 'giftCardCodes', item: GiftCardRow): void
|
||||
}>()
|
||||
|
||||
const { sheetVisible, selectedItem, openSheet, syncSelectedItem } = useMobileDetailSheet<GiftCardRow>()
|
||||
|
||||
function fetchGiftCards(params: TableInput) {
|
||||
if (props.customerId) {
|
||||
params.filters = params.filters ?? []
|
||||
params.filters.push({
|
||||
field: 'customer_id',
|
||||
type: 'text',
|
||||
value: props.customerId,
|
||||
cr: 'and',
|
||||
op: 'eq',
|
||||
hidden: false
|
||||
})
|
||||
}
|
||||
return getGiftCardTable(params)
|
||||
}
|
||||
|
||||
const { loading, search, items, hasMore, reload, loadMore, fetch } = useMobileTableList<GiftCardRow>({
|
||||
fetchApi: fetchGiftCards,
|
||||
onFetched: (rows) => syncSelectedItem(rows)
|
||||
})
|
||||
|
||||
onMounted(() => reload())
|
||||
|
||||
defineExpose({ fetch, openSheet })
|
||||
</script>
|
||||
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="sheetTitle">
|
||||
<template #default="{ item: row }">
|
||||
<MobileSheetHeader :title="sheetTitle" :subtitle="createdAtLabel(row)" :show-title="isMobile" />
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="rounded-lg border px-2 py-0.5 text-xs font-600" :class="unitTagClass(row)">
|
||||
{{ unitLabel(row) }}
|
||||
</span>
|
||||
<span
|
||||
v-if="row.sts_str"
|
||||
class="rounded-lg border px-2 py-0.5 text-xs font-600"
|
||||
:class="statusClass(row)"
|
||||
>
|
||||
{{ row.sts_str }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<MobileStatCard bordered variant="success" :label="amountLabel(row)" :value="amountValue(row)">
|
||||
<template #prefix>
|
||||
<BaseIcon
|
||||
:icon="row.unit === 2 ? 'vuesax-linear:coin' : 'vuesax-linear:empty-wallet'"
|
||||
size="18"
|
||||
color="#15803d"
|
||||
/>
|
||||
</template>
|
||||
</MobileStatCard>
|
||||
<MobileStatCard
|
||||
v-if="row.unit !== 2"
|
||||
bordered
|
||||
label="مبلغ کل (ریال)"
|
||||
:value="usePrice(row.total ?? 0, true, '')"
|
||||
>
|
||||
<template #prefix>
|
||||
<BaseIcon icon="vuesax-linear:money-send" size="18" color="#2563eb" />
|
||||
</template>
|
||||
</MobileStatCard>
|
||||
</div>
|
||||
|
||||
<MobileInfoGrid>
|
||||
<MobileDetailRow label="کد" :value="row.id ?? '-'" />
|
||||
<MobileDetailRow label="تعداد کدها" :value="row.count ?? '-'" />
|
||||
<MobileDetailRow label="تعداد استفاده شده" full-width :value="row.used_count ?? '-'" />
|
||||
<MobileDetailRow label="کد یکتا" full-width :value="row.unique_code || '-'" />
|
||||
<MobileDetailRow label="نام مشتری" full-width :value="row.customer?.name || '-'" />
|
||||
<MobileDetailRow label="موبایل مشتری" full-width :value="row.customer?.mobile ?? '-'" />
|
||||
<MobileDetailRow label="تاریخ ثبت" full-width :value="createdAtLabel(row)" />
|
||||
<MobileDetailRow label="تاریخ انقضا" full-width :value="expiryLabel(row)" />
|
||||
<MobileDetailRow label="توضیحات" full-width :value="row.description || '-'" />
|
||||
</MobileInfoGrid>
|
||||
</template>
|
||||
</MobileDetailSheet>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Giftcard } from '@/model/giftCard'
|
||||
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 { toJalali, toJalaliNoTime } from '@core/utils/useDataTime'
|
||||
import { usePrice } from '@core/utils/usePrice'
|
||||
|
||||
type GiftCardRow = Giftcard & { customer?: { name?: string; mobile?: string } }
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean
|
||||
item: GiftCardRow | null
|
||||
}>()
|
||||
|
||||
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?.unique_code || `کارت هدیه #${props.item?.id ?? '-'}`)
|
||||
|
||||
function unitLabel(row: GiftCardRow) {
|
||||
return row.unit === 2 ? 'طلایی' : 'ریالی'
|
||||
}
|
||||
|
||||
function unitTagClass(row: GiftCardRow) {
|
||||
return row.unit === 2
|
||||
? 'border-amber-300 bg-amber-50 text-amber-700'
|
||||
: 'border-green-300 bg-green-50 text-green-700'
|
||||
}
|
||||
|
||||
function statusClass(row: GiftCardRow) {
|
||||
switch (row.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'
|
||||
}
|
||||
}
|
||||
|
||||
function amountLabel(row: GiftCardRow) {
|
||||
return row.unit === 2 ? 'مقدار (گرم)' : 'مقدار (ریال)'
|
||||
}
|
||||
|
||||
function amountValue(row: GiftCardRow) {
|
||||
if (row.unit === 2) return `${row.amount ?? 0} گرم`
|
||||
return usePrice(row.amount ?? 0, true, '')
|
||||
}
|
||||
|
||||
function createdAtLabel(row: GiftCardRow) {
|
||||
return row.created_at ? toJalali(row.created_at) : '-'
|
||||
}
|
||||
|
||||
function expiryLabel(row: GiftCardRow) {
|
||||
return row.expiry_date ? toJalali(row.expiry_date) : '-'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,68 @@
|
||||
<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">
|
||||
<div class="flex min-w-0 items-center gap-2">
|
||||
<span class="shrink-0 rounded-md border px-1.5 py-0.5 text-xs font-600" :class="unitTagClass">
|
||||
{{ unitLabel }}
|
||||
</span>
|
||||
<span class="truncate text-sm font-700 text-gray-900">{{ uniqueCodeLabel }}</span>
|
||||
</div>
|
||||
<span class="shrink-0 rounded-md border px-1.5 py-0.5 text-xs font-600" :class="statusClass">
|
||||
{{ statusLabel }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="!hideCustomer" class="truncate text-xs text-gray-600">{{ customerName }}</div>
|
||||
</div>
|
||||
|
||||
<MobileIconButton
|
||||
icon="vuesax-linear:document-text"
|
||||
color="#1890ff"
|
||||
:size="20"
|
||||
@click="$emit('giftCardCodes', item)"
|
||||
/>
|
||||
</div>
|
||||
</MobileCard>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Giftcard } from '@/model/giftCard'
|
||||
import MobileCard from '@/components/mobile/MobileCard.vue'
|
||||
import MobileIconButton from '@/components/mobile/MobileIconButton.vue'
|
||||
|
||||
type GiftCardRow = Giftcard & { customer?: { name?: string; mobile?: string } }
|
||||
|
||||
const props = defineProps<{
|
||||
item: GiftCardRow
|
||||
hideCustomer?: boolean
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
(e: 'open', item: GiftCardRow): void
|
||||
(e: 'giftCardCodes', item: GiftCardRow): void
|
||||
}>()
|
||||
|
||||
const unitLabel = computed(() => (props.item.unit === 2 ? 'طلایی' : 'ریالی'))
|
||||
const unitTagClass = computed(() =>
|
||||
props.item.unit === 2
|
||||
? 'border-amber-300 bg-amber-50 text-amber-700'
|
||||
: 'border-green-300 bg-green-50 text-green-700'
|
||||
)
|
||||
|
||||
const uniqueCodeLabel = computed(() => props.item.unique_code || `#${props.item.id ?? '-'}`)
|
||||
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>
|
||||
@@ -1,7 +1,15 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="h-full min-h-0 min-w-0 max-w-full overflow-hidden">
|
||||
<BasicShowContext title="لیست کارت های هدیه">
|
||||
<BaseTable v-bind="tblProps" @register="submit" ref="tbl">
|
||||
<template v-if="!customerId" #extra>
|
||||
<BaseButton type="primary" size="small" class="flex shrink-0 md:hidden" @click="emits('add')">
|
||||
<div>افزودن</div>
|
||||
<BaseIcon icon="vuesax-linear:receipt-add" Size="16px" />
|
||||
</BaseButton>
|
||||
</template>
|
||||
|
||||
<div class="flex h-full min-h-0 flex-col">
|
||||
<BaseTable v-if="!isMobile" class="h-full min-h-0 min-w-0" v-bind="tblProps" @register="submit" ref="tbl">
|
||||
<template #extraHeader>
|
||||
<BaseButton v-if="!customerId" type="primary" size="small" class="flex" @click="emits('add')">
|
||||
<div>افزودن کارت هدیه</div>
|
||||
@@ -25,6 +33,15 @@
|
||||
</div>
|
||||
</template>
|
||||
</BaseTable>
|
||||
|
||||
<GiftCardMobileCardList
|
||||
v-else
|
||||
ref="mobileListRef"
|
||||
class="min-h-0 flex-1"
|
||||
:customer-id="customerId"
|
||||
@gift-card-codes="emits('giftcardcodes', $event)"
|
||||
/>
|
||||
</div>
|
||||
</BasicShowContext>
|
||||
</div>
|
||||
</template>
|
||||
@@ -33,81 +50,47 @@
|
||||
import type { TableInput } from '@core/type/baseTable'
|
||||
import useBaseTable from '@core/components/BaseTableOld/hooks/useBaseTable'
|
||||
import Icon from '@core/components/BaseIcon/src/Icon.vue'
|
||||
import { changeCustomerActivation, getCustomerTable } from '@/api/customer'
|
||||
import { cols } from '../hooks/orderColumns'
|
||||
import { useUserStore } from '@/store/userStore'
|
||||
import { usePrefix } from '@core/composable/usePrefix'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { getOrderTable } from '@/api/order'
|
||||
import {getGiftCardTable} from "@/api/giftCard";
|
||||
import { getGiftCardTable } from '@/api/giftCard'
|
||||
import GiftCardMobileCardList from './GiftCardMobileCardList.vue'
|
||||
import { isMobile } from '@core/utils/is'
|
||||
|
||||
interface Prop {
|
||||
customerId?: number
|
||||
}
|
||||
|
||||
const props = defineProps<Prop>()
|
||||
const emits = defineEmits(['delete', 'edit', 'add', 'info', 'giftcardcodes'])
|
||||
|
||||
const [submit, reload] = useBaseTable()
|
||||
/*const select = (val) => {
|
||||
val.sts === 1 ? return ['1'] : ['2']
|
||||
}*/
|
||||
//emits
|
||||
interface Prop {
|
||||
customerId: number
|
||||
}
|
||||
const emits = defineEmits(['delete', 'edit', 'add', 'info', 'giftcardcodes'])
|
||||
const props = defineProps<Prop>()
|
||||
const mobileListRef = ref<null | { fetch: () => Promise<void> }>(null)
|
||||
|
||||
const { prefixCls } = usePrefix('pophoverstatus')
|
||||
|
||||
//permission
|
||||
function checkPermission(temp: string) {
|
||||
const store = useUserStore()
|
||||
return store.canAccess(temp)
|
||||
}
|
||||
|
||||
//define table
|
||||
const table = ref(null)
|
||||
|
||||
const tblProps = ref<any>({
|
||||
columns: cols,
|
||||
api: (params: TableInput) => {
|
||||
if (props.customerId) {
|
||||
params.filters = []
|
||||
params.filters?.push({
|
||||
field: "customer_id",
|
||||
type: "text",
|
||||
field: 'customer_id',
|
||||
type: 'text',
|
||||
value: props.customerId,
|
||||
cr: "and",
|
||||
op: "eq",
|
||||
cr: 'and',
|
||||
op: 'eq',
|
||||
hidden: false
|
||||
})
|
||||
}
|
||||
return getGiftCardTable(params)
|
||||
}
|
||||
//bordered: true
|
||||
})
|
||||
const loading = ref<boolean>(false)
|
||||
|
||||
async function changeCustomerActivationFunction(id: number) {
|
||||
try {
|
||||
loading.value = true
|
||||
await changeCustomerActivation(id)
|
||||
reload()
|
||||
message.success('تغییر وضعیت با موفقیت انجام شد')
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
async function fetch() {
|
||||
await Promise.allSettled([reload(), mobileListRef.value?.fetch?.() as Promise<void>])
|
||||
}
|
||||
|
||||
const fetch = () => {
|
||||
// console.log('sss')
|
||||
reload()
|
||||
}
|
||||
// const spinTable = (val: boolean) => {
|
||||
// // console.log('sss')
|
||||
// table?.value?.loading.value = val
|
||||
// }
|
||||
defineExpose({
|
||||
fetch
|
||||
// spinTable
|
||||
})
|
||||
defineExpose({ fetch })
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@@ -122,11 +105,5 @@ defineExpose({
|
||||
.ant-menu-item-only-child {
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
//bor
|
||||
/* .ant-input-group-addon:first-child {
|
||||
!* border: #d9d9d9 1px solid;
|
||||
border-radius: 0 6px 6px 0;*!
|
||||
}*/
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -17,69 +17,24 @@
|
||||
<!-- <BasicShowContext title="پروژه ها"> <Search /> </BasicShowContext>-->
|
||||
</div>
|
||||
</BasicMainCard>
|
||||
<BasicModal
|
||||
<BasicActionSheet
|
||||
v-model:visible="addGiftCardVisible"
|
||||
width="30rem"
|
||||
:title="`${editId ? 'ویرایش' : 'افزودن'} کارت هدیه`"
|
||||
@ok="ok"
|
||||
:title="giftCardSheetTitle"
|
||||
modal-width="30rem"
|
||||
drawer-height="90vh"
|
||||
:loading="loading"
|
||||
@close="addGiftCardVisible = false"
|
||||
:showButton="true"
|
||||
:showCancel="true"
|
||||
:showOk="true"
|
||||
ok-text="ثبت"
|
||||
cancel-text="انصراف"
|
||||
@ok="ok"
|
||||
@close="closeGiftCardSheet"
|
||||
@cancel="closeGiftCardSheet"
|
||||
>
|
||||
<a-form :model="form" ref="formRef" autocomplete="off">
|
||||
<div class="grid md:grid-cols-1 gap-4">
|
||||
<a-form-item label="شماره موبایل مشتری" name="mobile" :rules="inputLenRules(11)">
|
||||
<BasicInput
|
||||
v-model:value="form.mobile"
|
||||
type="tel"
|
||||
placeholder="09123456789"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="نام مشتری" name="name" :rules="inputRules()">
|
||||
<BasicInput
|
||||
v-model:value="form.name"
|
||||
placeholder="نام و نام خانوادگی مشتری"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="نوع کارت هدیه" name="unit" :rules="inputRules()">
|
||||
<a-radio-group
|
||||
v-model:value="form.unit"
|
||||
button-style="solid"
|
||||
>
|
||||
<a-radio-button value="1">ریالی</a-radio-button>
|
||||
<a-radio-button value="2">طلایی</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="تعداد کدها" name="count" :rules="inputRulesNumber()">
|
||||
<BasicInput
|
||||
v-model:value="form.count"
|
||||
type="tel"
|
||||
placeholder="تعداد کدهای کارت هدیه"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:label="`مقدار ${form.unit === '2' ? '(گرم)' : '(ریال)'}`"
|
||||
name="amount"
|
||||
:rules="inputRulesNumber()"
|
||||
>
|
||||
<BasicInput
|
||||
v-model:value="form.amount"
|
||||
:addon-before="form.unit === '2' ? 'گرم' : 'ریال'"
|
||||
type="tel"
|
||||
placeholder="مقدار کارت هدیه"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="تاریخ انقضا" name="expiry_date" :rules="inputRules()">
|
||||
<BaseDatePicker v-model:value="form.expiry_date" format="YYYY-MM-DD" />
|
||||
</a-form-item>
|
||||
<a-form-item label="توضیحات" name="description">
|
||||
<BasicTextArea
|
||||
v-model:value="form.description"
|
||||
place-holder="توضیحات اختیاری"
|
||||
/>
|
||||
</a-form-item>
|
||||
</div>
|
||||
</a-form>
|
||||
</BasicModal>
|
||||
<div v-if="isMobile" class="mb-3 text-base font-700">{{ giftCardSheetTitle }}</div>
|
||||
<GiftCardEditorFormBody ref="giftCardEditorRef" :form="form" />
|
||||
</BasicActionSheet>
|
||||
<BasicInfoModal
|
||||
v-model:visible="userInfoVisible"
|
||||
@close="userInfoVisible = false"
|
||||
@@ -90,94 +45,20 @@
|
||||
:name="infoParams.name"
|
||||
:items="infoParams.items"
|
||||
/>
|
||||
<BasicModal
|
||||
v-model:visible="giftCardCodesVisible"
|
||||
width="80%"
|
||||
title="لیست کدهای کارت هدیه"
|
||||
custom-footer
|
||||
@close="giftCardCodesVisible = false"
|
||||
>
|
||||
<template #footer>
|
||||
<a-button @click="giftCardCodesVisible = false">بستن</a-button>
|
||||
</template>
|
||||
<a-table
|
||||
:columns="giftCardCodesColumns"
|
||||
:data-source="selectedGiftCardCodes"
|
||||
: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>
|
||||
</BasicModal>
|
||||
<GiftCardCodesSheet v-model:visible="giftCardCodesVisible" :codes="selectedGiftCardCodes" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// import BasicInfoModal from '@/components/BasicInfoModal'
|
||||
import { inputLenRules, inputRules, inputRulesNumber } from '@/utils/inputRules'
|
||||
import { useStaticApiListsStore } from '@/store/staticApisStore'
|
||||
import { ref } from 'vue'
|
||||
import tbl from './components/table.vue'
|
||||
import type { FormInstance } from 'ant-design-vue'
|
||||
import BasicInfoModal from '@/components/BasicInfoModal/index.vue'
|
||||
import BasicActionSheet from '@/components/BasicActionSheet.vue'
|
||||
import GiftCardEditorFormBody from './components/GiftCardEditorFormBody.vue'
|
||||
import GiftCardCodesSheet from './components/GiftCardCodesSheet.vue'
|
||||
import { message } from 'ant-design-vue/es'
|
||||
import type { Info } from '@/components/BasicInfoModal/model/Info'
|
||||
import { toJalaliNoTime, toTime } from '@core/utils/useDataTime'
|
||||
@@ -188,10 +69,9 @@ import type { Customer } from '@/model/customer'
|
||||
import { createCustomer, deleteCustomer, getCustomersList, updateCustomer } from '@/api/customer'
|
||||
import { usePrice } from '@core/utils/usePrice'
|
||||
import type { Giftcard, Giftcardcode, GiftcardInput } from '@/model/giftCard'
|
||||
import CustomTag from '@/components/CustomTag.vue'
|
||||
import { toJalali } from '@core/utils/useDataTime'
|
||||
import { createGiftCard } from '@/api/giftCard'
|
||||
import dayjs from 'dayjs'
|
||||
import { isMobile } from '@core/utils/is'
|
||||
|
||||
//loading
|
||||
const loading = ref<boolean>(false)
|
||||
@@ -203,6 +83,17 @@ const store = useStaticApiListsStore()
|
||||
const table = ref(null)
|
||||
const refreshTable = () => table?.value?.fetch()
|
||||
|
||||
const giftCardEditorRef = ref<{
|
||||
validateFields?: () => ReturnType<NonNullable<FormInstance['validateFields']>>
|
||||
resetFields?: () => void
|
||||
}>()
|
||||
|
||||
const giftCardSheetTitle = computed(() => `${editId ? 'ویرایش' : 'افزودن'} کارت هدیه`)
|
||||
|
||||
function closeGiftCardSheet() {
|
||||
addGiftCardVisible.value = false
|
||||
}
|
||||
|
||||
//form
|
||||
const form = ref<GiftcardInput>({
|
||||
mobile: '',
|
||||
@@ -213,61 +104,12 @@ const form = ref<GiftcardInput>({
|
||||
expiry_date: '',
|
||||
description: ''
|
||||
})
|
||||
const formRef = ref<FormInstance>()
|
||||
|
||||
//info
|
||||
let infoParams = reactive<Info>({})
|
||||
const giftCardCodesVisible = ref<boolean>(false)
|
||||
const selectedGiftCardCodes = ref<Giftcardcode[]>([])
|
||||
|
||||
const giftCardCodesColumns = [
|
||||
{
|
||||
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 info(val: Giftcard) {
|
||||
// نمایش اطلاعات اصلی در BasicInfoModal
|
||||
infoParams.title = 'اطلاعات کارت هدیه'
|
||||
@@ -361,7 +203,7 @@ async function add() {
|
||||
|
||||
//reset data
|
||||
const resetData = () => {
|
||||
formRef.value?.resetFields()
|
||||
giftCardEditorRef.value?.resetFields?.()
|
||||
form.value = {
|
||||
mobile: '',
|
||||
name: '',
|
||||
@@ -382,7 +224,7 @@ const userInfoVisible = ref<boolean>(false)
|
||||
|
||||
//submit gift card
|
||||
async function ok() {
|
||||
formRef.value?.validateFields().then(async () => {
|
||||
await giftCardEditorRef.value?.validateFields?.().then(async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
// تنظیم تاریخ انقضا به آخر همان روز (23:59:59) و تبدیل به میلادی
|
||||
|
||||
Reference in New Issue
Block a user