change responsive]
This commit is contained in:
@@ -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