change responsive]

This commit is contained in:
2026-05-31 11:51:52 +03:30
parent 06568c5858
commit 023b8ee5be
124 changed files with 6296 additions and 4233 deletions
@@ -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>