Files
boursecu_admin/src/pages/menuPages/customers/base/index.vue
T
2026-06-13 17:38:35 +03:30

685 lines
23 KiB
Vue

<template>
<div class="h-full min-h-0 min-w-0 overflow-hidden">
<tbl
ref="table"
class="h-full min-h-0 w-full"
@info="info"
@edit="edit"
@add="add"
@chargeMoney="walletMoneyCharge"
@chargeGold="walletGoldCharge"
/>
<!-- <BasicMenu :menu="menu" width="13rem" @onChange="tabSelected" />
<component :is="selectedComponent" class="mr-5" />-->
<!-- <BasicShowContext title="پروژه ها"> <Search /> </BasicShowContext>-->
<!-- </BasicMainCard>-->
<BasicActionSheet
v-model:visible="addUserVisible"
:title="`${editId ? 'ویرایش' : 'افزودن'} کاربر`"
modal-width="40rem"
:loading="loading"
:showButton="true"
:showCancel="true"
:showOk="true"
ok-text="ثبت"
cancel-text="انصراف"
@ok="ok"
@close="addUserVisible = false"
>
<div v-if="isMobile" class="mb-3 text-base font-700">{{ `${editId ? 'ویرایش' : 'افزودن'} کاربر` }}</div>
<a-form :model="form" ref="formRef" autocomplete="off">
<div class="grid md:grid-cols-2 gap-4">
<a-form-item label="نام" name="fname" :rules="inputRules()">
<BasicInput v-model:value="form.fname" />
</a-form-item>
<a-form-item label="نام خانوادگی" name="lname" :rules="inputRules()">
<BasicInput v-model:value="form.lname" />
</a-form-item>
<a-form-item label="شماره همراه" name="mobile" :rules="inputLenRules(11)">
<BasicInput v-model:value="form.mobile" type="number" />
</a-form-item>
<a-form-item label="پسورد" name="password">
<BasicInput is-password v-model:value="form.password" />
</a-form-item>
<a-form-item label="تاریخ تولد" name="birth_date">
<BaseDatePicker v-model:value="form.birth_date" />
</a-form-item>
<!-- <a-form-item label="ایمیل" name="email" :rules="inputRules()">
<BasicInput v-model:value="form.email" />
</a-form-item>-->
<!-- <a-form-item label="نام" name="shop_name" :rules="inputRules()">
<BasicInput v-model:value="form.shop_name" />
</a-form-item>-->
<a-form-item label="شماره تلفن" name="phone_number">
<BasicInput v-model:value="form.phone_number" type="number" />
</a-form-item>
<a-form-item label="نام استان" name="province">
<BasicInput v-model:value="form.province" />
</a-form-item>
<a-form-item label="نام شهر" name="city">
<BasicInput v-model:value="form.city" />
</a-form-item>
<a-form-item label="شماره ملی" name="n_code">
<BasicInput v-model:value="form.n_code" />
</a-form-item>
<a-form-item label="میزان پاداش" name="profit_amount">
<BasicInput v-model:value="form.profit_amount" />
</a-form-item>
<a-form-item label="گنج" name="gold">
<BasicInput v-model:value="form.gold" />
</a-form-item>
<a-form-item label="حداکثر معرفی" name="add_user_limit">
<BasicInput v-model:value="form.add_user_limit" />
</a-form-item>
<a-form-item label="نوع مشتری" name="n_code">
<BasicSelect
v-model:value="form.type"
:items="customerItems"
valueName="value"
keyName="key"
/>
</a-form-item>
<a-form-item label="کد معرف" name="n_code">
<BasicInput v-model:value="form.referral_to_id" :disabled="editId" />
</a-form-item>
<a-form-item v-if="editId" label="سقف اعتبار" name="gram" :rules="inputRules()">
<BasicInput v-model:value="form.gram" />
</a-form-item>
<!-- <a-form-item label="نام چاپی" name="print_name" :rules="inputRules()">
<BasicInput v-model:value="form.print_name" />
</a-form-item>-->
</div>
</a-form>
</BasicActionSheet>
<BasicActionSheet
v-model:visible="userInfoVisible"
title="اطلاعات کاربر"
modal-width="100vw"
:loading="loading"
:showButton="false"
@close="userInfoVisible = false"
>
<div v-if="isMobile" class="mb-3 text-base font-700">اطلاعات کاربر</div>
<a-tabs v-if="userInfo" v-model:activeKey="activeKey">
<a-tab-pane key="اطلاعات جامع" tab="اطلاعات جامع">
<div class="space-y-2">
<div class="rounded-lg bg-gray-100 w-full flex flex-col gap-3 p-3 md:flex-row md:justify-between">
<div>
<div class="font-bold">{{ userInfo.name }}</div>
<div class="mt-1">{{ userInfo?.mobile }}</div>
</div>
<div class="flex flex-col justify-center items-center pl-3">
<div class="flex flex-col justify-center items-center">
<Icon
:icon="
userInfo.is_legal === 0
? 'vuesax-linear:close-circle'
: 'vuesax-linear:verify'
"
:key="userInfo.is_legal"
:color="userInfo.is_legal === 0 ? '#ff0000' : '#008000'"
/>
<p
class="text-[11px] mt-2"
:class="userInfo.is_legal === 0 ? 'reject' : 'success'"
>
{{ userStatus(userInfo.is_legal).title }}
</p>
</div>
<div>{{ toJalaliNoTime(userInfo?.created_at) }}</div>
<div class="mt-2">
<CustomTag
:textColor="userInfo?.active ? '#25855A' : '#C53030'"
:bgColor="userInfo?.active ? '#E3F4E9' : '#FECACA'"
class="font-bold px-6"
>
{{ userInfo?.active ? 'فعال' : 'غیرفعال' }}
</CustomTag>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-2 md:grid-cols-4">
<BasicInfoItem title="کد کاربری" :value="userInfo?.id" />
<BasicInfoItem title="نوع کاربر" :value="userInfo?.type_str" />
<BasicInfoItem
title="تاریخ تولد"
:value="userInfo?.birth_date ? toJalaliNoTime(userInfo?.birth_date) : '_'"
/>
<BasicInfoItem title="شماره ملی" :value="userInfo?.n_code ?? '_'" />
<BasicInfoItem title="نام استان" :value="userInfo?.province ?? '_'" />
<BasicInfoItem title="نام شهر" :value="userInfo?.city ?? '_'" />
<BasicInfoItem
title="سقف اعتبار"
:value="userInfo?.gram ? `${userInfo?.gram} گرم` : '_'"
/>
<BasicInfoItem title="کد معرف" :value="userInfo?.referral_id" />
<BasicInfoItem
title="کد معرف کاربر"
:value="userInfo?.referral ? userInfo?.referral?.id : '_'"
/>
<BasicInfoItem
title="نام معرف کاربر"
:value="userInfo?.referral ? userInfo?.referral?.name : '_'"
/>
<BasicInfoItem
title="میزان سود معرفی"
:value="userInfo?.profit_amount ? `${userInfo?.profit_amount} گرم` : '_'"
/>
<BasicInfoItem
title="حداکثر معرفی"
:value="userInfo?.add_user_limit ? `${userInfo?.add_user_limit} نفر` : '_'"
/>
<BasicInfoItem title="آخرین بازدید" :value="toJalali(userInfo?.last_seen_at)" />
<BasicInfoItem title="وضعیت سفارش دهی" class="col-span-2 md:col-span-1">
<CustomTag
:textColor="userInfo?.trade_active === 1 ? '#25855A' : '#C53030'"
:bgColor="userInfo?.trade_active === 1 ? '#E3F4E9' : '#FECACA'"
class="font-bold px-6"
>
{{ userInfo?.trade_active === 1 ? 'مجاز' : 'غیر مجاز' }}
</CustomTag>
</BasicInfoItem>
</div>
<div class="grid grid-cols-1 gap-3 md:grid-cols-2">
<div
v-for="(item, index) in userInfo.wallet"
:key="index"
class="grid grid-cols-2 bg-orange-50 gap-2 rounded-lg p-2"
>
<BasicInfoItem
title="نام قلک"
:value="item?.fund ? item?.fund?.title : 'کیف پول طلایی'"
/>
<BasicInfoItem title="مقدار طلا" :value="`${item?.gold} گرم`" />
</div>
</div>
</div>
</a-tab-pane>
<a-tab-pane key="لیست سفارشات" tab="لیست سفارشات">
<orders-tbl ref="orderTable" :customerId="userInfo?.id" @info="infoOrder" />
</a-tab-pane>
<a-tab-pane key="لیست تراکنش ها" tab="لیست تراکنش ها">
<transactions-tbl ref="transactionTable" :customerId="userInfo?.id" />
</a-tab-pane>
<a-tab-pane key="پیامک ها" tab="پیامک ها">
<sms-tbl ref="smsTable" :mobile="userInfo?.mobile" />
</a-tab-pane>
<a-tab-pane key="معرفی کرده ها" tab="معرفی کرده ها">
<ReferralsTable ref="referralTable" :customerId="userInfo?.id" />
</a-tab-pane>
<a-tab-pane key="قلک ها" tab="قلک ها">
<FundsTable ref="fundTable" :customerId="userInfo?.id" />
</a-tab-pane>
</a-tabs>
</BasicActionSheet>
<BasicActionSheet
v-if="isMobile"
v-model:visible="showMoneyWalletCharge"
title="شارژ کیف پول ریالی"
modal-width="24rem"
:loading="loading"
:show-button="true"
:show-cancel="true"
:show-ok="true"
ok-text="ثبت"
cancel-text="انصراف"
@ok="chargeMoneyWallet"
@close="showMoneyWalletCharge = false"
>
<a-form :model="formCharge" ref="formChargeRef" autocomplete="off" class="space-y-1">
<a-form-item name="talabBedehi">
<a-checkbox v-model:checked="formCharge.talabBedehi">طلب/بدهی</a-checkbox>
</a-form-item>
<a-form-item label="مقدار شارژ " name="value" :rules="inputRules()">
<BasicInput addon-before="ریال" v-model:value="formCharge.value" type="price" />
<div v-show="formCharge.value > 10">
معادل {{ usePrice(formCharge.value / 10, true, 'تومان') }}
</div>
</a-form-item>
<a-form-item label="علت شارژ " name="note" :rules="inputRules()">
<BasicInput v-model:value="formCharge.note" />
</a-form-item>
</a-form>
</BasicActionSheet>
<BasicModal
v-else
v-model:visible="showMoneyWalletCharge"
width="20rem"
title="شارژ کیف پول ریالی"
@ok="chargeMoneyWallet"
:loading="loading"
@close="showMoneyWalletCharge = false"
>
<a-form :model="formCharge" ref="formChargeRef" autocomplete="off">
<a-form-item name="talabBedehi">
<a-checkbox v-model:checked="formCharge.talabBedehi">طلب/بدهی</a-checkbox>
</a-form-item>
<a-form-item label="مقدار شارژ " name="value" :rules="inputRules()">
<BasicInput addon-before="ریال" v-model:value="formCharge.value" type="price" />
<div v-show="formCharge.value > 10">
معادل {{ usePrice(formCharge.value / 10, true, 'تومان') }}
</div>
</a-form-item>
<a-form-item label="علت شارژ " name="note" :rules="inputRules()">
<BasicInput v-model:value="formCharge.note" />
</a-form-item>
</a-form>
</BasicModal>
<BasicActionSheet
v-if="isMobile"
v-model:visible="showGoldWalletCharge"
title="شارژ کیف پول طلایی"
modal-width="24rem"
:loading="loading"
:show-button="true"
:show-cancel="true"
:show-ok="true"
ok-text="ثبت"
cancel-text="انصراف"
@ok="chargeGoldWallet"
@close="showGoldWalletCharge = false"
>
<a-form :model="formCharge" ref="formChargeRef" autocomplete="off" class="space-y-1">
<a-form-item name="talabBedehi">
<a-checkbox v-model:checked="formCharge.talabBedehi">طلب/بدهی</a-checkbox>
</a-form-item>
<a-form-item label="مقدار شارژ " name="value" :rules="inputRules()">
<BasicInput addon-before="گرم" v-model:value="formCharge.value" type="number" />
</a-form-item>
<a-form-item label="علت شارژ " name="note" :rules="inputRules()">
<BasicInput v-model:value="formCharge.note" />
</a-form-item>
</a-form>
</BasicActionSheet>
<BasicModal
v-else
v-model:visible="showGoldWalletCharge"
width="20rem"
title="شارژ کیف پول طلایی"
@ok="chargeGoldWallet"
:loading="loading"
@close="showGoldWalletCharge = false"
>
<a-form :model="formCharge" ref="formChargeRef" autocomplete="off">
<a-form-item name="talabBedehi">
<a-checkbox v-model:checked="formCharge.talabBedehi">طلب/بدهی</a-checkbox>
</a-form-item>
<a-form-item label="مقدار شارژ " name="value" :rules="inputRules()">
<BasicInput addon-before="گرم" v-model:value="formCharge.value" type="number" />
</a-form-item>
<a-form-item label="علت شارژ " name="note" :rules="inputRules()">
<BasicInput v-model:value="formCharge.note" />
</a-form-item>
</a-form>
</BasicModal>
<BasicInfoModal
v-model:visible="userInfoOrderVisible"
@close="userInfoOrderVisible = false"
:title="infoParams.title"
:date="infoParams.date"
:time="infoParams.time"
:type="infoParams.type"
:name="infoParams.name"
:items="infoParams.items"
/>
</div>
</template>
<script setup lang="ts">
// import BasicInfoModal from '@/components/BasicInfoModal'
import { inputLenRules, inputRules } from '@/utils/inputRules'
import { useStaticApiListsStore } from '@/store/staticApisStore'
import { ref, watch } 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 { message } from 'ant-design-vue/es'
import type { Info } from '@/components/BasicInfoModal/model/Info'
import { toJalali, 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, updateCustomer } from '@/api/customer'
import type { Charge } from '@/model/wallet'
import customers from '@/router/routes/customers'
import { chargeWallet } from '@/api/wallet'
import { usePrice } from '@core/utils/usePrice'
import jalaliday from 'jalaliday'
import ordersTbl from '@/pages/menuPages/orders/components/table.vue'
import transactionsTbl from '@/pages/menuPages/transactions/components/table.vue'
import smsTbl from '@/pages/menuPages/sms/components/table.vue'
import FundsTable from '@/pages/menuPages/customers/base/components/fundsTable.vue'
import ReferralsTable from '@/pages/menuPages/customers/base/components/referralsTable.vue'
import type { Order } from '@/model/order'
import Icon from '@core/components/BaseIcon/src/Icon.vue'
import { isMobile } from '@core/utils/is'
//tabs
const activeKey = ref('اطلاعات جامع')
//loading
const loading = ref<boolean>(false)
//define store
const store = useStaticApiListsStore()
//define tbl
const table = ref(null)
const orderTable = ref(null)
const transactionTable = ref(null)
const smsTable = ref(null)
const referralTable = ref(null)
const fundTable = ref(null)
const refreshTable = () => table?.value?.fetch()
const refreshOrderTable = () => orderTable?.value?.fetch()
const refreshTransactionTable = () => transactionTable?.value?.fetch()
const refreshSMSTable = () => smsTable?.value?.fetch()
const refreshReferralTable = () => referralTable?.value?.fetch()
const refreshFundTable = () => fundTable?.value?.fetch()
let updateKey = ref<number>(0)
//role confirm items
const confirmItems: Array<Item> = [
{
value: 'بله',
key: true
},
{
value: 'خیر',
key: false
}
]
const customerItems: Array<Item> = [
{
value: 'همکار',
key: 1
},
{
value: 'خانگی',
key: 2
},
{
value: 'سرمایه گذار',
key: 3
}
]
//wallet
const showMoneyWalletCharge = ref<boolean>(false)
const showGoldWalletCharge = ref<boolean>(false)
const userInfoOrderVisible = ref<boolean>(false)
//form
const form = ref<Partial<Customer>>({})
const formCharge = ref<Charge>({})
const formRef = ref<FormInstance>()
const formChargeRef = ref<FormInstance>()
//info
let infoParams = reactive<Info>({})
function infoOrder(val: Order) {
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.amount ?? '-'
},
{
key: 'قیمت هر گرم طلا برای مشتری (ریال)',
value: usePrice(val.price ?? 0) ?? '-'
},
{
key: 'قیمت کل برای مشتری (ریال)',
value: usePrice(val.total_price ?? 0) ?? '-'
},
{
key: '/قیمت هر گرم طلا بدون سود (ریال)',
value: usePrice(val.price_original ?? 0) ?? '-'
},
{
key: 'قیمت کل بدون سود (ریال)',
value: usePrice(val.total_price_original ?? 0) ?? '-'
},
{
key: 'سود هر گرم (ریال)',
value: usePrice(val.fee ?? 0) ?? '-'
},
{
key: 'سود کل (ریال)',
value: usePrice(val.total_fee ?? 0) ?? '-'
},
{
key: 'کد کاربری',
value: val.customer.id ?? '-'
},
{
key: 'شماره ملی',
value: val.customer.n_code ?? '-'
},
/*{
key: 'کارمزد ریالی',
value: usePrice(val.service_charge_price ?? 0)
},*/
{
key: 'کارمزد طلایی',
value: val.service_charge ?? '-' + ' گرم'
},
/* {
key: 'تاریخ تولد',
value: toJalaliNoTime(val.customer.birth_date) ?? '-'
},*/
/* {
key: 'نام فروشگاه',
value: val.customer.shop_name ?? '-'
},*/
{
key: 'شماره تلفن',
value: val.customer.phone_number ?? '-'
},
{
key: 'نام استان',
value: val.customer.province ?? '-'
},
{
key: 'نام شهر',
value: val.customer.city ?? '-'
}
/* {
key: 'نام چاپی',
value: val.print_name ?? '-'
}*/
]
userInfoOrderVisible.value = true
}
async function info(val: Customer) {
activeKey.value = 'اطلاعات جامع'
userInfo.value = cloneDeep(val)
userInfoVisible.value = true
await nextTick(() => {
loading.value = true
refreshFundTable()
refreshReferralTable()
refreshSMSTable()
refreshTransactionTable()
refreshOrderTable()
loading.value = false
})
}
//edit
let editId: number | undefined = undefined
async function edit(record: Customer) {
addUserVisible.value = true
editId = record.id
form.value = cloneDeep(record)
}
//add
async function add() {
loading.value = true
editId = undefined
// await store.getUsersList()
addUserVisible.value = true
updateKey.value++
resetData()
loading.value = false
}
function resetFormCharge(customerId: number) {
formCharge.value = {
customer_id: customerId,
value: undefined,
note: undefined,
talabBedehi: false
}
}
function buildChargePayload(): Charge {
return {
value: formCharge.value.value,
note: formCharge.value.note,
customer_id: formCharge.value.customer_id,
talabBedehi: formCharge.value.talabBedehi === true
}
}
async function walletMoneyCharge(val: Customer) {
resetFormCharge(val.id)
showMoneyWalletCharge.value = true
}
async function walletGoldCharge(val: Customer) {
resetFormCharge(val.id)
showGoldWalletCharge.value = true
}
async function chargeMoneyWallet() {
formChargeRef.value?.validateFields().then(async () => {
try {
loading.value = true
await chargeWallet(buildChargePayload(), 'money')
message.success('افزایش اعتبار با موفقیت انجام شد')
showMoneyWalletCharge.value = false
} catch (e) {
console.log(e)
} finally {
loading.value = false
}
})
}
async function chargeGoldWallet() {
formChargeRef.value?.validateFields().then(async () => {
try {
loading.value = true
await chargeWallet(buildChargePayload(), 'gold')
message.success('افزایش اعتبار با موفقیت انجام شد')
showGoldWalletCharge.value = false
} catch (e) {
console.log(e)
} finally {
loading.value = false
}
})
}
//reset data
const resetData = () => {
formRef.value?.resetFields()
form.value = {
fname: '',
lname: '',
active: true,
avatar_id: undefined,
sts: undefined,
id: undefined,
mobile: undefined
}
}
//delete
const deleteItem = (id: number) => confirmDeleteItem('کاربر', id, deleteCustomer, refreshTable)
//define selects
onMounted(async () => {
loading.value = true
// await getResponsible()
// await getQC()
// await getManager()
loading.value = false
})
//add project modal
const addUserVisible = ref<boolean>(false)
const userInfoVisible = ref<boolean>(false)
const userInfo = ref<Customer>()
//submit user
async function ok() {
formRef.value?.validateFields().then(async () => {
// console.log('salam', form.value)
// return
loading.value = true
try {
if (editId) {
await updateCustomer(editId, form.value)
} else {
await createCustomer(form.value)
}
addUserVisible.value = false
refreshTable()
resetData()
message.success('عملیات با موفقیت انجام شد')
// await getResponsible()
// await getQC()
// await getManager()
} catch (e) {
console.error(e)
// message.error('خطا در بارگذاری اطلاعات')
} finally {
loading.value = false
}
})
}
const result = {
title: ''
}
const userStatus = (status: number) => {
switch (status) {
case 0:
result.title = 'احراز هویت نشده'
break
case 1:
result.title = 'احراز هویت شده توسط سامانه هوشمند'
break
case 2:
result.title = 'احراز هویت شده توسط کارشناس'
break
}
return result
}
</script>
<style scoped>
.reject {
color: #ff0000 !important;
}
.success {
color: #008000 !important;
}
</style>