364 lines
11 KiB
Vue
364 lines
11 KiB
Vue
<template>
|
|
<div>
|
|
<BasicMainCard>
|
|
<div class="flex w-full h-full">
|
|
<tbl
|
|
ref="table"
|
|
class="w-full h-full"
|
|
@info="info"
|
|
@edit="edit"
|
|
@delete="deleteItem"
|
|
@add="addGiftOrDiscount"
|
|
@giftcardcodes="showGiftCardCodes"
|
|
/>
|
|
|
|
<!-- <BasicMenu :menu="menu" width="13rem" @onChange="tabSelected" />
|
|
<component :is="selectedComponent" class="mr-5" />-->
|
|
<!-- <BasicShowContext title="پروژه ها"> <Search /> </BasicShowContext>-->
|
|
</div>
|
|
</BasicMainCard>
|
|
<BasicActionSheet
|
|
v-model:visible="addDiscountVisible"
|
|
:title="discountSheetTitle"
|
|
modal-width="30rem"
|
|
drawer-height="90vh"
|
|
:loading="loading"
|
|
:showButton="true"
|
|
:showCancel="true"
|
|
:showOk="true"
|
|
ok-text="ثبت"
|
|
cancel-text="انصراف"
|
|
@ok="okDiscount"
|
|
@close="closeDiscountSheet"
|
|
@cancel="closeDiscountSheet"
|
|
>
|
|
<div v-if="isMobile" class="mb-3 text-base font-700">{{ discountSheetTitle }}</div>
|
|
<a-form :model="discountForm" ref="discountFormRef" autocomplete="off" layout="vertical">
|
|
<a-form-item label="نام پویش" name="name" :rules="inputRules()">
|
|
<BasicInput v-model:value="discountForm.name" placeholder="نام پویش" />
|
|
<AdminFieldHelp :text="discountNameHelp" root-class="mt-1" />
|
|
</a-form-item>
|
|
<a-form-item label="درصد تخفیف" name="amount" :rules="inputRulesNumber()">
|
|
<BasicInput v-model:value="discountForm.amount" type="tel" placeholder="مثلاً 10" addon-before="%" />
|
|
<AdminFieldHelp :text="discountPercentHelp" root-class="mt-1" />
|
|
</a-form-item>
|
|
<a-form-item label="تعداد کدها" name="count" :rules="inputRulesNumber()">
|
|
<BasicInput v-model:value="discountForm.count" type="tel" />
|
|
<AdminFieldHelp :text="discountCountHelp" root-class="mt-1" />
|
|
</a-form-item>
|
|
<a-form-item label="تاریخ انقضا" name="expiry_date" :rules="inputRules()">
|
|
<BaseDatePicker v-model:value="discountForm.expiry_date" format="YYYY-MM-DD" />
|
|
<AdminFieldHelp :text="discountExpiryHelp" root-class="mt-1" />
|
|
</a-form-item>
|
|
<a-form-item label="توضیحات" name="description">
|
|
<BasicTextArea v-model:value="discountForm.description" place-holder="توضیحات اختیاری — فقط برای یادداشت شما" />
|
|
</a-form-item>
|
|
</a-form>
|
|
</BasicActionSheet>
|
|
<BasicActionSheet
|
|
v-model:visible="addGiftCardVisible"
|
|
:title="giftCardSheetTitle"
|
|
modal-width="30rem"
|
|
drawer-height="90vh"
|
|
:loading="loading"
|
|
:showButton="true"
|
|
:showCancel="true"
|
|
:showOk="true"
|
|
ok-text="ثبت"
|
|
cancel-text="انصراف"
|
|
@ok="ok"
|
|
@close="closeGiftCardSheet"
|
|
@cancel="closeGiftCardSheet"
|
|
>
|
|
<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"
|
|
:title="infoParams.title"
|
|
:date="infoParams.date"
|
|
:time="infoParams.time"
|
|
:type="infoParams.type"
|
|
:name="infoParams.name"
|
|
:items="infoParams.items"
|
|
/>
|
|
<GiftCardCodesSheet v-model:visible="giftCardCodesVisible" :codes="selectedGiftCardCodes" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// import BasicInfoModal from '@/components/BasicInfoModal'
|
|
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'
|
|
import { confirmDeleteItem } from '@/utils/confirmModal'
|
|
import { cloneDeep } from 'lodash'
|
|
import type { Item } from '@/model/Item'
|
|
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 { createGiftCard } from '@/api/giftCard'
|
|
import dayjs from 'dayjs'
|
|
import { isMobile } from '@core/utils/is'
|
|
import { metalLabel } from '@/utils/adminMetalLabels'
|
|
import { isStoreApp } from '@/utils/config'
|
|
import { inputRules, inputRulesNumber } from '@/utils/inputRules'
|
|
import BasicInput from '@/components/BasicInput.vue'
|
|
import BasicTextArea from '@/components/BasicTextArea.vue'
|
|
import AdminFieldHelp from '@/components/AdminFieldHelp.vue'
|
|
import {
|
|
discountCountHelp,
|
|
discountExpiryHelp,
|
|
discountNameHelp,
|
|
discountPercentHelp,
|
|
} from '@/utils/adminHelpCopy'
|
|
import BaseDatePicker from '@core/components/BaseDatePicker'
|
|
|
|
//loading
|
|
const loading = ref<boolean>(false)
|
|
|
|
//define store
|
|
const store = useStaticApiListsStore()
|
|
|
|
//define tbl
|
|
const table = ref(null)
|
|
const refreshTable = () => table?.value?.fetch()
|
|
|
|
const giftCardEditorRef = ref<{
|
|
validateFields?: () => ReturnType<NonNullable<FormInstance['validateFields']>>
|
|
resetFields?: () => void
|
|
}>()
|
|
|
|
const giftCardSheetTitle = computed(() => `${editId ? 'ویرایش' : 'افزودن'} کارت هدیه`)
|
|
const discountSheetTitle = computed(() => `${editId ? 'ویرایش' : 'افزودن'} کد تخفیف`)
|
|
const addDiscountVisible = ref(false)
|
|
const discountFormRef = ref<FormInstance>()
|
|
const discountForm = ref({
|
|
name: '',
|
|
count: undefined as number | undefined,
|
|
amount: undefined as number | undefined,
|
|
expiry_date: '',
|
|
description: ''
|
|
})
|
|
|
|
function closeGiftCardSheet() {
|
|
addGiftCardVisible.value = false
|
|
}
|
|
|
|
//form
|
|
const form = ref<GiftcardInput>({
|
|
mobile: '',
|
|
name: '',
|
|
count: undefined,
|
|
amount: undefined,
|
|
unit: '1',
|
|
expiry_date: '',
|
|
description: ''
|
|
})
|
|
|
|
//info
|
|
let infoParams = reactive<Info>({})
|
|
const giftCardCodesVisible = ref<boolean>(false)
|
|
const selectedGiftCardCodes = ref<Giftcardcode[]>([])
|
|
|
|
function info(val: Giftcard) {
|
|
// نمایش اطلاعات اصلی در BasicInfoModal
|
|
infoParams.title = 'اطلاعات کارت هدیه'
|
|
infoParams.name = val.customer?.name ?? '-'
|
|
infoParams.type = val.customer?.mobile ?? '-'
|
|
infoParams.date = toJalaliNoTime(val.created_at)
|
|
infoParams.time = toTime(val.created_at)
|
|
infoParams.itemsTitle = 'اطلاعات کارت هدیه'
|
|
infoParams.items = [
|
|
{
|
|
key: 'کد',
|
|
value: val.id ?? '-'
|
|
},
|
|
{
|
|
key: 'نوع کارت هدیه',
|
|
value: val.unit === 3 ? 'تخفیف' : val.unit === 2 ? metalLabel.goldWalletShort() : 'ریالی'
|
|
},
|
|
{
|
|
key: 'تعداد کدها',
|
|
value: val.count ?? '-'
|
|
},
|
|
{
|
|
key: 'مقدار (گرم)',
|
|
value: val.amount ?? '-'
|
|
},
|
|
{
|
|
key: 'مبلغ کل (ریال)',
|
|
value: usePrice(val.total ?? 0)
|
|
},
|
|
{
|
|
key: 'کد یکتا',
|
|
value: val.unique_code ?? '-'
|
|
},
|
|
{
|
|
key: 'تعداد استفاده شده',
|
|
value: val.used_count ?? '-'
|
|
},
|
|
{
|
|
key: 'وضعیت',
|
|
value: val.sts_str ?? '-'
|
|
},
|
|
{
|
|
key: 'تاریخ ثبت',
|
|
value: toJalaliNoTime(val.created_at)
|
|
},
|
|
{
|
|
key: 'تاریخ انقضا',
|
|
value: toJalaliNoTime(val.expiry_date)
|
|
},
|
|
{
|
|
key: 'توضیحات',
|
|
value: val.description ?? '-'
|
|
}
|
|
]
|
|
userInfoVisible.value = true
|
|
}
|
|
|
|
function showGiftCardCodes(val: Giftcard) {
|
|
// نمایش کدهای کارت هدیه در مودال جداگانه
|
|
if (val.giftcardcodes && val.giftcardcodes.length > 0) {
|
|
selectedGiftCardCodes.value = val.giftcardcodes
|
|
giftCardCodesVisible.value = true
|
|
} else {
|
|
message.info('کد کارت هدیهای برای این کارت وجود ندارد')
|
|
}
|
|
}
|
|
|
|
//edit
|
|
let editId: number | undefined = undefined
|
|
|
|
async function edit(record: Giftcard) {
|
|
addGiftCardVisible.value = true
|
|
editId = record.id
|
|
form.value = {
|
|
mobile: record.customer?.mobile ?? '',
|
|
name: record.customer?.name ?? '',
|
|
count: record.count,
|
|
amount: record.amount,
|
|
unit: record.unit.toString(),
|
|
expiry_date: record.expiry_date,
|
|
description: record.description ?? ''
|
|
}
|
|
}
|
|
|
|
function closeDiscountSheet() {
|
|
addDiscountVisible.value = false
|
|
}
|
|
|
|
function resetDiscountData() {
|
|
discountForm.value = {
|
|
name: '',
|
|
count: undefined,
|
|
amount: undefined,
|
|
expiry_date: '',
|
|
description: ''
|
|
}
|
|
}
|
|
|
|
async function okDiscount() {
|
|
await discountFormRef.value?.validateFields?.().then(async () => {
|
|
loading.value = true
|
|
try {
|
|
const formData: any = {
|
|
...discountForm.value,
|
|
unit: '3',
|
|
use_once: 0
|
|
}
|
|
if (formData.expiry_date) {
|
|
formData.expiry_date = dayjs(formData.expiry_date)
|
|
.calendar('gregory')
|
|
.endOf('day')
|
|
.format('YYYY-MM-DD HH:mm:ss')
|
|
}
|
|
await createGiftCard(formData)
|
|
message.success('کد تخفیف با موفقیت ثبت شد')
|
|
addDiscountVisible.value = false
|
|
resetDiscountData()
|
|
refreshTable()
|
|
} catch (e) {
|
|
console.error(e)
|
|
message.error('خطا در ثبت کد تخفیف')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
})
|
|
}
|
|
|
|
//add
|
|
async function addGiftOrDiscount(type: 'gift' | 'discount' = 'gift') {
|
|
editId = undefined
|
|
if (type === 'discount' && isStoreApp()) {
|
|
resetDiscountData()
|
|
addDiscountVisible.value = true
|
|
return
|
|
}
|
|
resetData()
|
|
addGiftCardVisible.value = true
|
|
}
|
|
|
|
//reset data
|
|
const resetData = () => {
|
|
giftCardEditorRef.value?.resetFields?.()
|
|
form.value = {
|
|
mobile: '',
|
|
name: '',
|
|
count: undefined,
|
|
amount: undefined,
|
|
unit: '1',
|
|
expiry_date: '',
|
|
description: ''
|
|
}
|
|
}
|
|
|
|
//delete
|
|
const deleteItem = (id: number) => confirmDeleteItem('کارت هدیه', id, deleteCustomer, refreshTable)
|
|
|
|
//add project modal
|
|
const addGiftCardVisible = ref<boolean>(false)
|
|
const userInfoVisible = ref<boolean>(false)
|
|
|
|
//submit gift card
|
|
async function ok() {
|
|
await giftCardEditorRef.value?.validateFields?.().then(async () => {
|
|
loading.value = true
|
|
try {
|
|
// تنظیم تاریخ انقضا به آخر همان روز (23:59:59) و تبدیل به میلادی
|
|
const formData = { ...form.value }
|
|
if (formData.expiry_date) {
|
|
// تبدیل به میلادی و تنظیم به آخر روز
|
|
formData.expiry_date = dayjs(formData.expiry_date)
|
|
.calendar('gregory')
|
|
.endOf('day')
|
|
.format('YYYY-MM-DD HH:mm:ss')
|
|
}
|
|
await createGiftCard(formData)
|
|
message.success('کارت هدیه با موفقیت ثبت شد')
|
|
addGiftCardVisible.value = false
|
|
resetData()
|
|
refreshTable()
|
|
} catch (e) {
|
|
console.error(e)
|
|
message.error('خطا در ثبت کارت هدیه')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style>
|