change responsive]
This commit is contained in:
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<MobileCardList
|
||||
v-model:search="search"
|
||||
:loading="loading"
|
||||
:has-more="hasMore"
|
||||
:show-empty="!loading && items.length === 0"
|
||||
empty-text="مشتری بایگانیشدهای یافت نشد"
|
||||
@search="reload"
|
||||
@load-more="loadMore"
|
||||
>
|
||||
<CustomerArchiveMobileListItem
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
:item="item"
|
||||
@open="openSheet"
|
||||
@info="$emit('info', $event)"
|
||||
@unarchive="$emit('unarchive', $event)"
|
||||
/>
|
||||
</MobileCardList>
|
||||
|
||||
<CustomerArchiveMobileDetailSheet v-model:visible="sheetVisible" :item="selectedItem" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getCustomerArchiveTable } from '@/api/customer'
|
||||
import type { Customer } from '@/model/customer'
|
||||
import MobileCardList from '@/components/mobile/MobileCardList.vue'
|
||||
import { useMobileDetailSheet } from '@/components/mobile/composables/useMobileDetailSheet'
|
||||
import { useMobileTableList } from '@/components/mobile/composables/useMobileTableList'
|
||||
import CustomerArchiveMobileDetailSheet from './CustomerArchiveMobileDetailSheet.vue'
|
||||
import CustomerArchiveMobileListItem from './CustomerArchiveMobileListItem.vue'
|
||||
|
||||
defineEmits<{
|
||||
(e: 'info', item: Customer): void
|
||||
(e: 'unarchive', item: Customer): void
|
||||
}>()
|
||||
|
||||
const { sheetVisible, selectedItem, openSheet, syncSelectedItem } = useMobileDetailSheet<Customer>()
|
||||
|
||||
const { loading, search, items, hasMore, reload, loadMore, fetch } = useMobileTableList<Customer>({
|
||||
fetchApi: getCustomerArchiveTable,
|
||||
onFetched: (rows) => syncSelectedItem(rows)
|
||||
})
|
||||
|
||||
onMounted(() => reload())
|
||||
|
||||
defineExpose({ fetch })
|
||||
</script>
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="item?.name || ''">
|
||||
<template #default="{ item: row }">
|
||||
<MobileSheetHeader :title="row.name || '-'" :show-title="isMobile" />
|
||||
|
||||
<MobileInfoGrid>
|
||||
<MobileDetailRow label="کد کاربری" :value="row.id ?? '-'" />
|
||||
<MobileDetailRow label="شماره موبایل" :value="row.mobile || '-'" />
|
||||
<MobileDetailRow label="وضعیت کاربر" full-width :value-class="row.active ? 'text-green-700' : 'text-red-600'">
|
||||
{{ row.active ? 'فعال' : 'غیرفعال' }}
|
||||
</MobileDetailRow>
|
||||
<MobileDetailRow
|
||||
label="وضعیت سفارش دهی"
|
||||
full-width
|
||||
:value-class="row.trade_active ? 'text-green-700' : 'text-red-600'"
|
||||
>
|
||||
{{ row.trade_active ? 'مجاز' : 'غیر مجاز' }}
|
||||
</MobileDetailRow>
|
||||
</MobileInfoGrid>
|
||||
</template>
|
||||
</MobileDetailSheet>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Customer } from '@/model/customer'
|
||||
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 { isMobile } from '@core/utils/is'
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean
|
||||
item: Customer | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', value: boolean): void
|
||||
}>()
|
||||
|
||||
const visibleProxy = computed({
|
||||
get: () => props.visible,
|
||||
set: (value: boolean) => emit('update:visible', value)
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<MobileCard clickable @click="$emit('open', item)">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex min-w-0 flex-1 items-center gap-2">
|
||||
<BaseIcon icon="vuesax-linear:user" size="20" color="#6b7280" />
|
||||
<button
|
||||
type="button"
|
||||
class="truncate border-none bg-transparent p-0 text-right text-sm font-700 text-gray-900 cursor-pointer"
|
||||
@click.stop="$emit('info', item)"
|
||||
>
|
||||
{{ item.name || '-' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="shrink-0 text-sm text-gray-600">{{ item.mobile || '-' }}</div>
|
||||
|
||||
<div class="flex shrink-0 items-center gap-2">
|
||||
<span class="whitespace-nowrap rounded-lg border px-2 py-0.5 text-xs font-600" :class="typeTagClass">
|
||||
{{ item.type_str || 'کاربر' }}
|
||||
</span>
|
||||
<MobileIconButton
|
||||
icon="vuesax-linear:archive-slash"
|
||||
color="#e3bf00"
|
||||
:size="20"
|
||||
@click="$emit('unarchive', item)"
|
||||
/>
|
||||
<span class="inline-block h-2.5 w-2.5 rounded-full" :class="item.active ? 'bg-green-500' : 'bg-red-500'" />
|
||||
</div>
|
||||
</div>
|
||||
</MobileCard>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Customer } from '@/model/customer'
|
||||
import MobileCard from '@/components/mobile/MobileCard.vue'
|
||||
import MobileIconButton from '@/components/mobile/MobileIconButton.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
item: Customer
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
(e: 'open', item: Customer): void
|
||||
(e: 'info', item: Customer): void
|
||||
(e: 'unarchive', item: Customer): void
|
||||
}>()
|
||||
|
||||
const typeTagClass = computed(() => {
|
||||
const type = props.item.type_str || ''
|
||||
if (type.includes('نماینده')) return 'border-blue-400 bg-blue-50 text-blue-600'
|
||||
return 'border-gray-300 bg-white text-gray-600'
|
||||
})
|
||||
</script>
|
||||
@@ -1,128 +1,87 @@
|
||||
<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 #extraHeader>
|
||||
<BaseButton type="primary" size="small" class="flex" @click="emits('add')">
|
||||
<div>افزودن مشتری عمده</div>
|
||||
<BaseIcon icon="vuesax-linear:user-add" Size="16px" />
|
||||
</BaseButton>
|
||||
</template>-->
|
||||
<template #action="{ column, record }">
|
||||
<div class="gap-2 flex justify-center">
|
||||
<a-tooltip :key="record.is_archive" placement="bottom" class="cursor-pointer">
|
||||
<template #title>
|
||||
<span>{{ record.is_archive ? 'بیرون بردن از بایگانی' : 'بایگانی کردن' }}</span>
|
||||
</template>
|
||||
<a-popconfirm
|
||||
title="آیا مشتری را از بایگانی خارج می کنید؟"
|
||||
ok-text="تایید"
|
||||
cancel-text="رد"
|
||||
placement="topLeft"
|
||||
@confirm="archiveFunction(record.id)"
|
||||
@cancel=""
|
||||
>
|
||||
<!-- <template #icon><question-circle-outlined style="color: red" /></template>-->
|
||||
<Icon class="cursor-pointer" icon="vuesax-linear:archive-slash" color="#e3bf00" />
|
||||
</a-popconfirm>
|
||||
</a-tooltip>
|
||||
<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 #action="{ record }">
|
||||
<div class="flex justify-center gap-2">
|
||||
<a-tooltip :key="record.is_archive" placement="bottom" class="cursor-pointer">
|
||||
<template #title>
|
||||
<span>{{ record.is_archive ? 'بیرون بردن از بایگانی' : 'بایگانی کردن' }}</span>
|
||||
</template>
|
||||
<a-popconfirm
|
||||
title="آیا مشتری را از بایگانی خارج می کنید؟"
|
||||
ok-text="تایید"
|
||||
cancel-text="رد"
|
||||
placement="topLeft"
|
||||
@confirm="archiveFunction(record.id)"
|
||||
>
|
||||
<Icon class="cursor-pointer" icon="vuesax-linear:archive-slash" color="#e3bf00" />
|
||||
</a-popconfirm>
|
||||
</a-tooltip>
|
||||
|
||||
<a-tooltip placement="bottom" class="cursor-pointer" @click="emits('info', record)">
|
||||
<template #title>
|
||||
<span>مشخصات</span>
|
||||
</template>
|
||||
<Icon icon="vuesax-linear:stickynote" color="#10913A" />
|
||||
</a-tooltip>
|
||||
<!-- <a-tooltip
|
||||
placement="bottom"
|
||||
class="cursor-pointer"
|
||||
@click="emits('delete', record.id)"
|
||||
>
|
||||
<template #title>
|
||||
<span>حذف</span>
|
||||
</template>
|
||||
<Icon icon="vuesax-linear:trash" color="#EB3535" />
|
||||
</a-tooltip>-->
|
||||
</div>
|
||||
</template>
|
||||
</BaseTable>
|
||||
<a-tooltip placement="bottom" class="cursor-pointer" @click="emits('info', record)">
|
||||
<template #title><span>مشخصات</span></template>
|
||||
<Icon icon="vuesax-linear:stickynote" color="#10913A" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</BaseTable>
|
||||
|
||||
<CustomerArchiveMobileCardList
|
||||
v-else
|
||||
ref="mobileListRef"
|
||||
class="min-h-0 flex-1"
|
||||
@info="emits('info', $event)"
|
||||
@unarchive="handleUnarchive"
|
||||
/>
|
||||
</div>
|
||||
</BasicShowContext>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="tsx" setup>
|
||||
import type { TableInput } from '@core/type/baseTable'
|
||||
import useBaseTable from '@core/components/BaseTableOld/hooks/useBaseTable'
|
||||
<script setup lang="ts">
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import { ref } from 'vue'
|
||||
import { changeCustomerArchive, getCustomerArchiveTable } from '@/api/customer'
|
||||
import type { Customer } from '@/model/customer'
|
||||
import CustomerArchiveMobileCardList from '@/pages/menuPages/customers/archive/components/CustomerArchiveMobileCardList.vue'
|
||||
import { cols } from '@/pages/menuPages/customers/archive/hooks/archiveColumns'
|
||||
import Icon from '@core/components/BaseIcon/src/Icon.vue'
|
||||
import {
|
||||
changeCustomerActivation,
|
||||
changeCustomerArchive,
|
||||
changeCustomerOrderActivation,
|
||||
getCustomerArchiveTable,
|
||||
getCustomerTable
|
||||
} from '@/api/customer'
|
||||
import { cols } from '../hooks/archiveColumns'
|
||||
import { useUserStore } from '@/store/userStore'
|
||||
import { usePrefix } from '@core/composable/usePrefix'
|
||||
import { message } from 'ant-design-vue'
|
||||
import useBaseTable from '@core/components/BaseTable/hooks/useBaseTable'
|
||||
import type { TableInput } from '@core/type/baseTable'
|
||||
import { isMobile } from '@core/utils/is'
|
||||
|
||||
const [submit, reload] = useBaseTable()
|
||||
/*const select = (val) => {
|
||||
val.sts === 1 ? return ['1'] : ['2']
|
||||
}*/
|
||||
//emits
|
||||
const emits = defineEmits(['delete', 'edit', 'add', 'info', 'charge'])
|
||||
|
||||
const { prefixCls } = usePrefix('pophoverstatus')
|
||||
const loading = ref(false)
|
||||
const mobileListRef = ref<null | { fetch: () => Promise<void> }>(null)
|
||||
|
||||
//permission
|
||||
function checkPermission(temp: string) {
|
||||
const store = useUserStore()
|
||||
return store.canAccess(temp)
|
||||
}
|
||||
|
||||
//define table
|
||||
const table = ref(null)
|
||||
|
||||
const tblProps = ref<any>({
|
||||
const tblProps = ref({
|
||||
columns: cols,
|
||||
api: (params: TableInput) => {
|
||||
return getCustomerArchiveTable(params)
|
||||
}
|
||||
//bordered: true
|
||||
api: (params: TableInput) => getCustomerArchiveTable(params)
|
||||
})
|
||||
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>])
|
||||
}
|
||||
|
||||
async function changeCustomerOrderActivationFunction(id: number) {
|
||||
try {
|
||||
loading.value = true
|
||||
await changeCustomerOrderActivation(id)
|
||||
reload()
|
||||
message.success('تغییر وضعیت سفارش دهی با موفقیت انجام شد')
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
function handleUnarchive(customer: Customer) {
|
||||
Modal.confirm({
|
||||
title: 'آیا مشتری را از بایگانی خارج می کنید؟',
|
||||
okText: 'تایید',
|
||||
cancelText: 'رد',
|
||||
centered: true,
|
||||
onOk: () => archiveFunction(customer.id)
|
||||
})
|
||||
}
|
||||
|
||||
async function archiveFunction(id: number) {
|
||||
try {
|
||||
loading.value = true
|
||||
await changeCustomerArchive(id)
|
||||
reload()
|
||||
await fetch()
|
||||
message.success('مشتری با موفقیت از بایگانی خارج شد.')
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
@@ -130,37 +89,6 @@ async function archiveFunction(id: number) {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
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">
|
||||
@prefix: ~'@{prefixCls}-pophoverstatus';
|
||||
|
||||
.@{prefix} {
|
||||
.ant-menu-rtl.ant-menu-inline,
|
||||
.ant-menu-rtl.ant-menu-vertical {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
@@ -157,7 +157,6 @@ export const cols: BaseTableColumn[] = [
|
||||
dataIndex: 'action',
|
||||
key: 'action',
|
||||
slot: 'action',
|
||||
fixed: 'right',
|
||||
filterable: false
|
||||
}
|
||||
]
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="h-full min-h-0">
|
||||
<!-- <BasicMainCard>-->
|
||||
<div class="flex w-full h-full">
|
||||
<tbl ref="table" class="w-full h-full" @info="info" @edit="edit" @charge="walletCharge" />
|
||||
<div class="flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden">
|
||||
<tbl ref="table" class="h-full min-h-0 w-full" @info="info" @edit="edit" @charge="walletCharge" />
|
||||
|
||||
<!-- <BasicMenu :menu="menu" width="13rem" @onChange="tabSelected" />
|
||||
<component :is="selectedComponent" class="mr-5" />-->
|
||||
@@ -55,15 +55,17 @@
|
||||
</div>
|
||||
</a-form>
|
||||
</BasicModal>
|
||||
<BasicModal
|
||||
<BasicActionSheet
|
||||
v-model:visible="userInfoVisible"
|
||||
width="40vw"
|
||||
title="اطلاعات کاربر"
|
||||
custom-footer
|
||||
modal-width="100vw"
|
||||
:loading="loading"
|
||||
:showButton="false"
|
||||
@close="userInfoVisible = false"
|
||||
>
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<div class="col-span-4 bg-gray-100 w-full rounded-lg flex p-3 justify-between">
|
||||
<div v-if="isMobile" class="mb-3 text-base font-700">اطلاعات کاربر</div>
|
||||
<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>
|
||||
@@ -82,35 +84,38 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="وضعیت سفارش دهی">
|
||||
<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 class="col-span-4 grid grid-cols-2 gap-3">
|
||||
<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="وضعیت سفارش دهی" 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"
|
||||
@@ -124,7 +129,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BasicModal>
|
||||
</BasicActionSheet>
|
||||
|
||||
<BasicModal
|
||||
v-model:visible="showWalletCharge"
|
||||
@@ -150,7 +155,9 @@ import { useStaticApiListsStore } from '@/store/staticApisStore'
|
||||
import { ref } from 'vue'
|
||||
import tbl from './components/table.vue'
|
||||
import type { FormInstance } from 'ant-design-vue'
|
||||
import BasicActionSheet from '@/components/BasicActionSheet.vue'
|
||||
import BasicInfoModal from '@/components/BasicInfoModal/index.vue'
|
||||
import { isMobile } from '@core/utils/is'
|
||||
import { message } from 'ant-design-vue/es'
|
||||
import type { Info } from '@/components/BasicInfoModal/model/Info'
|
||||
import { toJalaliNoTime, toTime } from '@core/utils/useDataTime'
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<MobileCardList
|
||||
v-model:search="search"
|
||||
:loading="loading"
|
||||
:has-more="hasMore"
|
||||
:show-empty="!loading && items.length === 0"
|
||||
empty-text="مشتریای یافت نشد"
|
||||
@search="reload"
|
||||
@load-more="loadMore"
|
||||
>
|
||||
<CustomerMobileListItem
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
:item="item"
|
||||
@open="openSheet"
|
||||
@info="$emit('info', $event)"
|
||||
@edit="$emit('edit', $event)"
|
||||
/>
|
||||
</MobileCardList>
|
||||
|
||||
<CustomerMobileDetailSheet
|
||||
v-model:visible="sheetVisible"
|
||||
:item="selectedItem"
|
||||
@info="$emit('info', $event)"
|
||||
@archive="$emit('archive', $event)"
|
||||
@toggleActive="$emit('toggleActive', $event)"
|
||||
@chargeMoney="$emit('chargeMoney', $event)"
|
||||
@chargeGold="$emit('chargeGold', $event)"
|
||||
@toggleTrade="$emit('toggleTrade', $event)"
|
||||
@confirmUser="$emit('confirmUser', $event)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getCustomerTable } from '@/api/customer'
|
||||
import type { Customer } from '@/model/customer'
|
||||
import MobileCardList from '@/components/mobile/MobileCardList.vue'
|
||||
import { useMobileDetailSheet } from '@/components/mobile/composables/useMobileDetailSheet'
|
||||
import { useMobileTableList } from '@/components/mobile/composables/useMobileTableList'
|
||||
import CustomerMobileListItem from './CustomerMobileListItem.vue'
|
||||
import CustomerMobileDetailSheet from './CustomerMobileDetailSheet.vue'
|
||||
|
||||
defineEmits<{
|
||||
(e: 'info', item: Customer): void
|
||||
(e: 'edit', item: Customer): void
|
||||
(e: 'archive', item: Customer): void
|
||||
(e: 'toggleActive', item: Customer): void
|
||||
(e: 'chargeMoney', item: Customer): void
|
||||
(e: 'chargeGold', item: Customer): void
|
||||
(e: 'toggleTrade', item: Customer): void
|
||||
(e: 'confirmUser', item: Customer): void
|
||||
}>()
|
||||
|
||||
const { sheetVisible, selectedItem, openSheet, syncSelectedItem } = useMobileDetailSheet<Customer>()
|
||||
|
||||
const { loading, search, items, hasMore, reload, loadMore, fetch } = useMobileTableList<Customer>({
|
||||
fetchApi: getCustomerTable,
|
||||
onFetched: (rows) => syncSelectedItem(rows)
|
||||
})
|
||||
|
||||
onMounted(() => reload())
|
||||
|
||||
defineExpose({ fetch })
|
||||
</script>
|
||||
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="item?.name || ''">
|
||||
<template #default="{ item: row }">
|
||||
<MobileSheetHeader :title="row.name || '-'" :show-title="isMobile">
|
||||
<template #actions>
|
||||
<MobileIconButton plain icon="vuesax-linear:archive-tick" color="#e3bf00" :size="22" @click="$emit('archive', row)" />
|
||||
<MobileIconButton
|
||||
plain
|
||||
:icon="row.active ? 'vuesax-linear:user-tick' : 'vuesax-linear:user-remove'"
|
||||
:color="row.active ? '#54AD06' : '#ad0627'"
|
||||
:size="22"
|
||||
@click="$emit('toggleActive', row)"
|
||||
/>
|
||||
<MobileIconButton plain icon="vuesax-linear:wallet-add" color="#9333ea" :size="22" @click="$emit('chargeMoney', row)" />
|
||||
<MobileIconButton plain icon="vuesax-linear:wallet-money" color="#ea580c" :size="22" @click="$emit('chargeGold', row)" />
|
||||
<MobileIconButton
|
||||
plain
|
||||
:icon="row.trade_active ? 'vuesax-linear:box-tick' : 'vuesax-linear:box-remove'"
|
||||
:color="row.trade_active ? '#54AD06' : '#ad0627'"
|
||||
:size="22"
|
||||
@click="$emit('toggleTrade', row)"
|
||||
/>
|
||||
<MobileIconButton
|
||||
v-if="!(row as any).is_legal"
|
||||
plain
|
||||
icon="vuesax-linear:user-search"
|
||||
color="#0d9488"
|
||||
:size="22"
|
||||
@click="$emit('confirmUser', row)"
|
||||
/>
|
||||
</template>
|
||||
</MobileSheetHeader>
|
||||
|
||||
<div class="space-y-2">
|
||||
<MobileStatCard bordered variant="success" label="موجودی طلایی" :value="`${goldBalance(row)} گرم`">
|
||||
<template #prefix>
|
||||
<BaseIcon icon="vuesax-linear:coin" size="18" color="#15803d" />
|
||||
</template>
|
||||
</MobileStatCard>
|
||||
<MobileStatCard
|
||||
bordered
|
||||
variant="success"
|
||||
label="موجودی ریالی"
|
||||
:value="usePrice(cashBalance(row), true, '')"
|
||||
>
|
||||
<template #prefix>
|
||||
<BaseIcon icon="vuesax-linear:empty-wallet" size="18" color="#15803d" />
|
||||
</template>
|
||||
</MobileStatCard>
|
||||
</div>
|
||||
|
||||
<MobileInfoGrid>
|
||||
<MobileDetailRow label="وضعیت کاربر" full-width :value-class="row.active ? 'text-green-700' : 'text-red-600'">
|
||||
{{ row.active ? 'فعال' : 'غیرفعال' }}
|
||||
</MobileDetailRow>
|
||||
<MobileDetailRow
|
||||
label="وضعیت سفارش دهی"
|
||||
full-width
|
||||
:value-class="row.trade_active ? 'text-green-700' : 'text-red-600'"
|
||||
>
|
||||
{{ row.trade_active ? 'مجاز' : 'غیر مجاز' }}
|
||||
</MobileDetailRow>
|
||||
<MobileDetailRow label="کد کاربری" :value="row.id ?? '-'" />
|
||||
<MobileDetailRow label="نوع کاربر" :value="row.type_str || '-'" />
|
||||
<MobileDetailRow label="کد معرف" :value="row.referral_id ?? '-'" />
|
||||
<MobileDetailRow label="نام معرف کاربر" :value="row.referral?.name ?? '-'" />
|
||||
<MobileDetailRow label="گنج (گرم)" :value="row.gold ?? '-'" />
|
||||
<MobileDetailRow label="آخرین بازدید" :value="lastSeen(row)" value-class="text-xs" />
|
||||
</MobileInfoGrid>
|
||||
</template>
|
||||
</MobileDetailSheet>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Customer } from '@/model/customer'
|
||||
import MobileDetailRow from '@/components/mobile/MobileDetailRow.vue'
|
||||
import MobileStatCard from '@/components/mobile/MobileStatCard.vue'
|
||||
import MobileDetailSheet from '@/components/mobile/MobileDetailSheet.vue'
|
||||
import MobileIconButton from '@/components/mobile/MobileIconButton.vue'
|
||||
import MobileInfoGrid from '@/components/mobile/MobileInfoGrid.vue'
|
||||
import MobileSheetHeader from '@/components/mobile/MobileSheetHeader.vue'
|
||||
import { getCashBalance, getGoldBalance } from '@/components/mobile/utils/wallet'
|
||||
import { isMobile } from '@core/utils/is'
|
||||
import { toJalali } from '@core/utils/useDataTime'
|
||||
import { usePrice } from '@core/utils/usePrice'
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean
|
||||
item: Customer | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', value: boolean): void
|
||||
(e: 'info', item: Customer): void
|
||||
(e: 'archive', item: Customer): void
|
||||
(e: 'toggleActive', item: Customer): void
|
||||
(e: 'chargeMoney', item: Customer): void
|
||||
(e: 'chargeGold', item: Customer): void
|
||||
(e: 'toggleTrade', item: Customer): void
|
||||
(e: 'confirmUser', item: Customer): void
|
||||
}>()
|
||||
|
||||
const visibleProxy = computed({
|
||||
get: () => props.visible,
|
||||
set: (value: boolean) => emit('update:visible', value)
|
||||
})
|
||||
|
||||
function cashBalance(row: Customer) {
|
||||
return getCashBalance(row.wallet)
|
||||
}
|
||||
|
||||
function goldBalance(row: Customer) {
|
||||
return getGoldBalance(row.wallet)
|
||||
}
|
||||
|
||||
function lastSeen(row: Customer) {
|
||||
return row.last_seen_at ? toJalali(row.last_seen_at) : '-'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<MobileCard clickable @click="$emit('open', item)">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex min-w-0 flex-1 items-center gap-2">
|
||||
<BaseIcon icon="vuesax-linear:user" size="20" color="#6b7280" />
|
||||
<button
|
||||
type="button"
|
||||
class="truncate border-none bg-transparent p-0 text-right text-sm font-700 text-gray-900 cursor-pointer"
|
||||
@click.stop="$emit('info', item)"
|
||||
>
|
||||
{{ item.name || '-' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="shrink-0 text-sm text-gray-600">{{ item.mobile || '-' }}</div>
|
||||
|
||||
<div class="flex shrink-0 items-center gap-2">
|
||||
<span class="whitespace-nowrap rounded-lg border px-2 py-0.5 text-xs font-600" :class="typeTagClass">
|
||||
{{ item.type_str || 'کاربر' }}
|
||||
</span>
|
||||
<MobileIconButton icon="vuesax-linear:edit" color="#4572E9" :size="20" @click="$emit('edit', item)" />
|
||||
<span class="inline-block h-2.5 w-2.5 rounded-full" :class="item.active ? 'bg-green-500' : 'bg-red-500'" />
|
||||
</div>
|
||||
</div>
|
||||
</MobileCard>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Customer } from '@/model/customer'
|
||||
import MobileCard from '@/components/mobile/MobileCard.vue'
|
||||
import MobileIconButton from '@/components/mobile/MobileIconButton.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
item: Customer
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
(e: 'open', item: Customer): void
|
||||
(e: 'info', item: Customer): void
|
||||
(e: 'edit', item: Customer): void
|
||||
}>()
|
||||
|
||||
const typeTagClass = computed(() => {
|
||||
const type = props.item.type_str || ''
|
||||
if (type.includes('نماینده')) return 'border-blue-400 bg-blue-50 text-blue-600'
|
||||
return 'border-gray-300 bg-white text-gray-600'
|
||||
})
|
||||
</script>
|
||||
@@ -1,138 +1,21 @@
|
||||
<template>
|
||||
<div>
|
||||
<BasicShowContext title=" لیست مشتریان">
|
||||
<BaseTable v-bind="tblProps" @register="submit" ref="tbl">
|
||||
<div class="h-full min-h-0 min-w-0 max-w-full overflow-hidden">
|
||||
<BasicShowContext title="لیست مشتریان">
|
||||
<template #extra>
|
||||
<BaseButton type="primary" size="small" class="flex shrink-0 md:hidden" @click="emits('add')">
|
||||
<div>افزودن</div>
|
||||
<BaseIcon icon="vuesax-linear:user-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 type="primary" size="small" class="flex" @click="emits('add')">
|
||||
<div>افزودن مشتری</div>
|
||||
<BaseIcon icon="vuesax-linear:user-add" Size="16px" />
|
||||
</BaseButton>
|
||||
</template>
|
||||
<template #action="{ column, record }">
|
||||
<div class="md:hidden">
|
||||
<a-popover title="" placement="right" @cancel="">
|
||||
<template #content>
|
||||
<div class="flex flex-col gap-3">
|
||||
<a-tooltip :key="record.is_archive" placement="bottom" class="cursor-pointer">
|
||||
<template #title>
|
||||
<span>{{
|
||||
record.is_archive ? 'بیرون بردن از بایگانی' : 'بایگانی کردن'
|
||||
}}</span>
|
||||
</template>
|
||||
<a-popconfirm
|
||||
title="آیا مشتری را بایگانی می کنید؟"
|
||||
ok-text="تایید"
|
||||
cancel-text="رد"
|
||||
placement="topLeft"
|
||||
@confirm="archiveFunction(record.id)"
|
||||
@cancel=""
|
||||
>
|
||||
<!-- <template #icon><question-circle-outlined style="color: red" /></template>-->
|
||||
<Icon
|
||||
class="cursor-pointer"
|
||||
icon="vuesax-linear:archive-tick"
|
||||
color="#e3bf00"
|
||||
/>
|
||||
</a-popconfirm>
|
||||
</a-tooltip>
|
||||
<a-tooltip
|
||||
:key="record.active"
|
||||
placement="bottom"
|
||||
class="cursor-pointer"
|
||||
@click="changeCustomerActivationFunction(record.id)"
|
||||
>
|
||||
<template #title>
|
||||
<span>
|
||||
{{ record.active ? 'غیرفعال کردن حساب کاربری' : 'فعال کردن حساب کاربری' }}
|
||||
</span>
|
||||
</template>
|
||||
<Icon
|
||||
:icon="
|
||||
record.active ? 'vuesax-linear:user-tick' : 'vuesax-linear:user-remove'
|
||||
"
|
||||
:color="record.active ? '#54AD06' : '#ad0627'"
|
||||
/>
|
||||
</a-tooltip>
|
||||
<a-tooltip
|
||||
placement="bottom"
|
||||
class="cursor-pointer"
|
||||
@click="emits('chargeMoney', record)"
|
||||
>
|
||||
<template #title>
|
||||
<span>شارژ کیف پول ریالی</span>
|
||||
</template>
|
||||
<Icon icon="vuesax-linear:wallet-add" color="#9333ea" />
|
||||
</a-tooltip>
|
||||
<a-tooltip
|
||||
placement="bottom"
|
||||
class="cursor-pointer"
|
||||
@click="emits('chargeGold', record)"
|
||||
>
|
||||
<template #title>
|
||||
<span>شارژ کیف پول طلایی</span>
|
||||
</template>
|
||||
<Icon icon="vuesax-linear:wallet-money" color="#ea580c" />
|
||||
</a-tooltip>
|
||||
<a-tooltip
|
||||
placement="bottom"
|
||||
class="cursor-pointer"
|
||||
@click="emits('info', record)"
|
||||
>
|
||||
<template #title>
|
||||
<span>مشخصات</span>
|
||||
</template>
|
||||
<Icon icon="vuesax-linear:stickynote" color="#10913A" />
|
||||
</a-tooltip>
|
||||
<a-tooltip
|
||||
placement="bottom"
|
||||
class="cursor-pointer"
|
||||
@click="emits('edit', record)"
|
||||
>
|
||||
<template #title>
|
||||
<span>ویرایش</span>
|
||||
</template>
|
||||
<Icon icon="vuesax-linear:edit" color="#4572E9" />
|
||||
</a-tooltip>
|
||||
<a-tooltip
|
||||
:key="record.trade_active"
|
||||
placement="bottom"
|
||||
class="cursor-pointer"
|
||||
@click="changeCustomerOrderActivationFunction(record.id)"
|
||||
>
|
||||
<template #title>
|
||||
<span>
|
||||
{{
|
||||
record.trade_active ? 'غیر مجاز کردن سفارش دهی' : 'مجاز کردن سفارش دهی'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
<Icon
|
||||
:icon="
|
||||
record.trade_active === 1
|
||||
? 'vuesax-linear:box-tick'
|
||||
: 'vuesax-linear:box-remove'
|
||||
"
|
||||
:color="record.trade_active === 1 ? '#54AD06' : '#ad0627'"
|
||||
/>
|
||||
</a-tooltip>
|
||||
<a-tooltip
|
||||
v-if="!record.is_legal"
|
||||
:key="record.trade_active"
|
||||
placement="bottom"
|
||||
class="cursor-pointer"
|
||||
@click="openConfirmUser(record)"
|
||||
>
|
||||
<template #title>
|
||||
<span>تایید کاربر</span>
|
||||
</template>
|
||||
<Icon icon="vuesax-linear:user-search" color="#0d9488" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<!-- <template #icon><question-circle-outlined style="color: red" /></template>-->
|
||||
<Icon class="cursor-pointer" icon="vuesax-linear:setting" color="#000" />
|
||||
</a-popover>
|
||||
</div>
|
||||
<template #action="{ record }">
|
||||
<div class="gap-2 hidden md:flex justify-center">
|
||||
<a-tooltip :key="record.is_archive" placement="bottom" class="cursor-pointer">
|
||||
<template #title>
|
||||
@@ -144,9 +27,7 @@
|
||||
cancel-text="رد"
|
||||
placement="topLeft"
|
||||
@confirm="archiveFunction(record.id)"
|
||||
@cancel=""
|
||||
>
|
||||
<!-- <template #icon><question-circle-outlined style="color: red" /></template>-->
|
||||
<Icon class="cursor-pointer" icon="vuesax-linear:archive-tick" color="#e3bf00" />
|
||||
</a-popconfirm>
|
||||
</a-tooltip>
|
||||
@@ -157,45 +38,27 @@
|
||||
@click="changeCustomerActivationFunction(record.id)"
|
||||
>
|
||||
<template #title>
|
||||
<span>{{
|
||||
record.active ? 'غیرفعال کردن حساب کاربری' : 'فعال کردن حساب کاربری'
|
||||
}}</span>
|
||||
<span>{{ record.active ? 'غیرفعال کردن حساب کاربری' : 'فعال کردن حساب کاربری' }}</span>
|
||||
</template>
|
||||
<Icon
|
||||
:icon="record.active ? 'vuesax-linear:user-tick' : 'vuesax-linear:user-remove'"
|
||||
:color="record.active ? '#54AD06' : '#ad0627'"
|
||||
/>
|
||||
</a-tooltip>
|
||||
<a-tooltip
|
||||
placement="bottom"
|
||||
class="cursor-pointer"
|
||||
@click="emits('chargeMoney', record)"
|
||||
>
|
||||
<template #title>
|
||||
<span>شارژ کیف پول ریالی</span>
|
||||
</template>
|
||||
<a-tooltip placement="bottom" class="cursor-pointer" @click="emits('chargeMoney', record)">
|
||||
<template #title><span>شارژ کیف پول ریالی</span></template>
|
||||
<Icon icon="vuesax-linear:wallet-add" color="#9333ea" />
|
||||
</a-tooltip>
|
||||
<a-tooltip
|
||||
placement="bottom"
|
||||
class="cursor-pointer"
|
||||
@click="emits('chargeGold', record)"
|
||||
>
|
||||
<template #title>
|
||||
<span>شارژ کیف پول طلایی</span>
|
||||
</template>
|
||||
<a-tooltip placement="bottom" class="cursor-pointer" @click="emits('chargeGold', record)">
|
||||
<template #title><span>شارژ کیف پول طلایی</span></template>
|
||||
<Icon icon="vuesax-linear:wallet-money" color="#ea580c" />
|
||||
</a-tooltip>
|
||||
<a-tooltip placement="bottom" class="cursor-pointer" @click="emits('info', record)">
|
||||
<template #title>
|
||||
<span>مشخصات</span>
|
||||
</template>
|
||||
<template #title><span>مشخصات</span></template>
|
||||
<Icon icon="vuesax-linear:stickynote" color="#10913A" />
|
||||
</a-tooltip>
|
||||
<a-tooltip placement="bottom" class="cursor-pointer" @click="emits('edit', record)">
|
||||
<template #title>
|
||||
<span>ویرایش</span>
|
||||
</template>
|
||||
<template #title><span>ویرایش</span></template>
|
||||
<Icon icon="vuesax-linear:edit" color="#4572E9" />
|
||||
</a-tooltip>
|
||||
<a-tooltip
|
||||
@@ -205,42 +68,41 @@
|
||||
@click="changeCustomerOrderActivationFunction(record.id)"
|
||||
>
|
||||
<template #title>
|
||||
<span>{{
|
||||
record.trade_active ? 'غیر مجاز کردن سفارش دهی' : 'مجاز کردن سفارش دهی'
|
||||
}}</span>
|
||||
<span>{{ record.trade_active ? 'غیر مجاز کردن سفارش دهی' : 'مجاز کردن سفارش دهی' }}</span>
|
||||
</template>
|
||||
<Icon
|
||||
:icon="
|
||||
record.trade_active === 1 ? 'vuesax-linear:box-tick' : 'vuesax-linear:box-remove'
|
||||
"
|
||||
:icon="record.trade_active === 1 ? 'vuesax-linear:box-tick' : 'vuesax-linear:box-remove'"
|
||||
:color="record.trade_active === 1 ? '#54AD06' : '#ad0627'"
|
||||
/>
|
||||
</a-tooltip>
|
||||
<a-tooltip
|
||||
v-if="!record.is_legal"
|
||||
:key="record.trade_active"
|
||||
placement="bottom"
|
||||
class="cursor-pointer"
|
||||
@click="openConfirmUser(record)"
|
||||
>
|
||||
<template #title>
|
||||
<span>تایید کاربر</span>
|
||||
</template>
|
||||
<template #title><span>تایید کاربر</span></template>
|
||||
<Icon icon="vuesax-linear:user-search" color="#0d9488" />
|
||||
</a-tooltip>
|
||||
<!-- <a-tooltip
|
||||
placement="bottom"
|
||||
class="cursor-pointer"
|
||||
@click="emits('delete', record.id)"
|
||||
>
|
||||
<template #title>
|
||||
<span>حذف</span>
|
||||
</template>
|
||||
<Icon icon="vuesax-linear:trash" color="#EB3535" />
|
||||
</a-tooltip>-->
|
||||
</div>
|
||||
</template>
|
||||
</BaseTable>
|
||||
|
||||
<CustomerMobileCardList
|
||||
v-else
|
||||
ref="mobileListRef"
|
||||
class="min-h-0 flex-1"
|
||||
@info="emits('info', $event)"
|
||||
@edit="emits('edit', $event)"
|
||||
@archive="handleArchive"
|
||||
@toggleActive="(item) => changeCustomerActivationFunction(item.id)"
|
||||
@chargeMoney="emits('chargeMoney', $event)"
|
||||
@chargeGold="emits('chargeGold', $event)"
|
||||
@toggleTrade="(item) => changeCustomerOrderActivationFunction(item.id)"
|
||||
@confirmUser="openConfirmUser"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<BasicModal
|
||||
v-model:visible="confirmVisible"
|
||||
width="50vw"
|
||||
@@ -268,10 +130,9 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="tsx" setup>
|
||||
import type { TableInput } from '@core/type/baseTable'
|
||||
import useBaseTable from '@core/components/BaseTable/hooks/useBaseTable'
|
||||
import Icon from '@core/components/BaseIcon/src/Icon.vue'
|
||||
<script setup lang="ts">
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
changeCustomerActivation,
|
||||
changeCustomerArchive,
|
||||
@@ -280,59 +141,38 @@ import {
|
||||
getCustomerTable
|
||||
} from '@/api/customer'
|
||||
import { cols } from '@/pages/menuPages/customers/base/hooks/customerColumns'
|
||||
import { useUserStore } from '@/store/userStore'
|
||||
import { usePrefix } from '@core/composable/usePrefix'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { inputRules } from '@/utils/inputRules'
|
||||
import type { User } from '@/model/user'
|
||||
import CustomerMobileCardList from '@/pages/menuPages/customers/base/components/CustomerMobileCardList.vue'
|
||||
import Icon from '@core/components/BaseIcon/src/Icon.vue'
|
||||
import useBaseTable from '@core/components/BaseTable/hooks/useBaseTable'
|
||||
import type { TableInput } from '@core/type/baseTable'
|
||||
import { toJalaliNoTime } from '@core/utils/useDataTime'
|
||||
import type { Customer } from '@/model/customer'
|
||||
import { onMounted } from 'vue'
|
||||
import { isMobile } from '@core/utils/is'
|
||||
|
||||
const [submit, reload] = useBaseTable()
|
||||
/*const select = (val) => {
|
||||
val.sts === 1 ? return ['1'] : ['2']
|
||||
}*/
|
||||
//emits
|
||||
const emits = defineEmits(['delete', 'edit', 'add', 'info', 'chargeMoney', 'chargeGold'])
|
||||
|
||||
const { prefixCls } = usePrefix('pophoverstatus')
|
||||
|
||||
//permission
|
||||
function checkPermission(temp: string) {
|
||||
const store = useUserStore()
|
||||
return store.canAccess(temp)
|
||||
}
|
||||
|
||||
//define table
|
||||
const table = ref(null)
|
||||
|
||||
const confirmVisible = ref<boolean>(false)
|
||||
const loading = ref(false)
|
||||
const confirmVisible = ref(false)
|
||||
const confirmInfo = ref<Customer>()
|
||||
const mobileListRef = ref<null | { fetch: () => Promise<void> }>(null)
|
||||
|
||||
const tblProps = ref<any>({
|
||||
columns: cols,
|
||||
api: (params: TableInput) => {
|
||||
return getCustomerTable(params)
|
||||
}
|
||||
//bordered: true
|
||||
api: (params: TableInput) => getCustomerTable(params)
|
||||
})
|
||||
const refPop = ref()
|
||||
|
||||
// function edit(recordId){
|
||||
// emits('edit', recordId);
|
||||
// console.log( recordId);
|
||||
// console.log( visibleAction.value[parseInt(recordId)]);
|
||||
// visibleAction.value[recordId]=false
|
||||
// console.log('ddddd')
|
||||
// }
|
||||
const loading = ref<boolean>(false)
|
||||
const fetch = async () => {
|
||||
await Promise.allSettled([reload(), mobileListRef.value?.fetch?.() as Promise<void>])
|
||||
}
|
||||
|
||||
defineExpose({ fetch })
|
||||
|
||||
async function changeCustomerActivationFunction(id: number) {
|
||||
try {
|
||||
loading.value = true
|
||||
await changeCustomerActivation(id)
|
||||
reload()
|
||||
await fetch()
|
||||
message.success('تغییر وضعیت با موفقیت انجام شد')
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
@@ -346,11 +186,21 @@ function openConfirmUser(user: Customer) {
|
||||
confirmVisible.value = true
|
||||
}
|
||||
|
||||
function handleArchive(customer: Customer) {
|
||||
Modal.confirm({
|
||||
title: 'آیا مشتری را بایگانی می کنید؟',
|
||||
okText: 'تایید',
|
||||
cancelText: 'رد',
|
||||
centered: true,
|
||||
onOk: () => archiveFunction(customer.id)
|
||||
})
|
||||
}
|
||||
|
||||
async function archiveFunction(id: number) {
|
||||
try {
|
||||
loading.value = true
|
||||
await changeCustomerArchive(id)
|
||||
reload()
|
||||
await fetch()
|
||||
message.success('مشتری با موفقیت بایگانی شد.')
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
@@ -363,7 +213,7 @@ async function confirmUserFunction() {
|
||||
try {
|
||||
loading.value = true
|
||||
await confirmUser(confirmInfo.value?.id)
|
||||
reload()
|
||||
await fetch()
|
||||
confirmVisible.value = false
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
@@ -376,7 +226,7 @@ async function changeCustomerOrderActivationFunction(id: number) {
|
||||
try {
|
||||
loading.value = true
|
||||
await changeCustomerOrderActivation(id)
|
||||
reload()
|
||||
await fetch()
|
||||
message.success('تغییر وضعیت سفارش دهی با موفقیت انجام شد')
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
@@ -384,42 +234,11 @@ async function changeCustomerOrderActivationFunction(id: number) {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const fetch = () => {
|
||||
// console.log('sss')
|
||||
reload()
|
||||
}
|
||||
// const spinTable = (val: boolean) => {
|
||||
// // console.log('sss')
|
||||
// table?.value?.loading.value = val
|
||||
// }
|
||||
defineExpose({
|
||||
fetch
|
||||
// spinTable
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@prefix: ~'@{prefixCls}-pophoverstatus';
|
||||
.ant-popover,
|
||||
.ant-tooltip {
|
||||
z-index: 1001 !important;
|
||||
}
|
||||
|
||||
.@{prefix} {
|
||||
.ant-menu-rtl.ant-menu-inline,
|
||||
.ant-menu-rtl.ant-menu-vertical {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
@@ -208,7 +208,6 @@ export const cols: BaseTableColumn[] = [
|
||||
dataIndex: 'action',
|
||||
key: 'action',
|
||||
slot: 'action',
|
||||
fixed: 'right',
|
||||
filterable: false
|
||||
}
|
||||
]
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- <BasicMainCard>-->
|
||||
<div class="flex w-full h-full">
|
||||
<tbl
|
||||
ref="table"
|
||||
class="w-full h-full"
|
||||
<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"
|
||||
@@ -15,16 +13,21 @@
|
||||
<!-- <BasicMenu :menu="menu" width="13rem" @onChange="tabSelected" />
|
||||
<component :is="selectedComponent" class="mr-5" />-->
|
||||
<!-- <BasicShowContext title="پروژه ها"> <Search /> </BasicShowContext>-->
|
||||
</div>
|
||||
<!-- </BasicMainCard>-->
|
||||
<BasicModal
|
||||
<BasicActionSheet
|
||||
v-model:visible="addUserVisible"
|
||||
width="40rem"
|
||||
:title="`${editId ? 'ویرایش' : 'افزودن'} کاربر`"
|
||||
@ok="ok"
|
||||
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()">
|
||||
@@ -88,19 +91,20 @@
|
||||
</a-form-item>-->
|
||||
</div>
|
||||
</a-form>
|
||||
</BasicModal>
|
||||
<BasicModal
|
||||
</BasicActionSheet>
|
||||
<BasicActionSheet
|
||||
v-model:visible="userInfoVisible"
|
||||
width="100vw"
|
||||
title="اطلاعات کاربر"
|
||||
modal-width="100vw"
|
||||
:loading="loading"
|
||||
custom-footer
|
||||
:showButton="false"
|
||||
@close="userInfoVisible = false"
|
||||
>
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<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="grid grid-cols-4 gap-2">
|
||||
<div class="col-span-4 bg-gray-100 w-full rounded-lg flex p-3 justify-between">
|
||||
<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>
|
||||
@@ -135,47 +139,51 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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="وضعیت سفارش دهی">
|
||||
<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 class="col-span-4 grid grid-cols-2 gap-3">
|
||||
|
||||
<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"
|
||||
@@ -206,7 +214,7 @@
|
||||
<FundsTable ref="fundTable" :customerId="userInfo?.id" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</BasicModal>
|
||||
</BasicActionSheet>
|
||||
<BasicModal
|
||||
v-model:visible="showMoneyWalletCharge"
|
||||
width="20rem"
|
||||
@@ -275,6 +283,7 @@ 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'
|
||||
@@ -295,6 +304,7 @@ import FundsTable from '@/pages/menuPages/customers/base/components/fundsTable.v
|
||||
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('اطلاعات جامع')
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="h-full min-h-0">
|
||||
<BasicMainCard>
|
||||
<div class="flex flex-col md:flex-row md:h-full">
|
||||
<div class="flex h-full min-h-0 min-w-0 flex-col md:flex-row">
|
||||
<!-- {{ menu }}-->
|
||||
<BasicMenu width="11rem" :menu="menu" mode="horizontal" class="md:hidden overflow-auto" />
|
||||
<BasicMenu width="11rem" :menu="menu" mode="horizontal" class="shrink-0 overflow-auto md:hidden" />
|
||||
<BasicMenu
|
||||
width="13rem"
|
||||
:menu="menu"
|
||||
class="hidden md:inline overflow-auto min-w-[13.5rem]"
|
||||
class="hidden min-w-[13.5rem] shrink-0 overflow-auto md:inline"
|
||||
/>
|
||||
<!-- <component :is="selectedComponent" class="mr-5" />-->
|
||||
<RouterView class="md:mr-5 md:mt-0 mt-5 w-full"></RouterView>
|
||||
<RouterView class="mt-5 min-h-0 min-w-0 w-full flex-1 overflow-hidden md:mr-5 md:mt-0" />
|
||||
</div>
|
||||
</BasicMainCard>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user