This commit is contained in:
2026-06-04 22:33:33 +03:30
parent ec3440d4b3
commit 3d403d61ca
9 changed files with 72 additions and 285 deletions
+2 -28
View File
@@ -50,9 +50,9 @@
:closable="false"
:destroy-on-close="true"
:height="drawerHeight"
:class="['basic-action-sheet', { 'basic-action-sheet--compact': compact }]"
class="basic-action-sheet"
>
<div class="basic-action-sheet__container" :class="{ 'basic-action-sheet__container--compact': compact }">
<div class="basic-action-sheet__container">
<div class="flex cursor-pointer justify-center pt-2" @click="visibleProxy = false">
<span class="w-12 rounded-sm border-t-2 border-t-solid border-t-gray-500"></span>
</div>
@@ -103,8 +103,6 @@ interface Props {
modalWidth?: string
loading?: boolean
drawerHeight?: string
/** When true, drawer height follows content (no empty flex gap). */
compact?: boolean
cancelText?: string
showButton?: boolean
showCancel?: boolean
@@ -118,7 +116,6 @@ const props = withDefaults(defineProps<Props>(), {
modalWidth: '36rem',
loading: false,
drawerHeight: ACTION_SHEET_HEIGHT,
compact: false,
cancelText: 'بازگشت',
showButton: false,
showCancel: true,
@@ -178,29 +175,6 @@ function handleCancel() {
padding: 0 16px 12px;
}
.basic-action-sheet--compact {
.ant-drawer-content-wrapper {
height: auto !important;
max-height: 88vh;
}
.ant-drawer-content {
height: auto !important;
max-height: 88vh;
}
}
.basic-action-sheet__container--compact {
height: auto;
min-height: 0;
max-height: 88vh;
}
.basic-action-sheet__container--compact .basic-action-sheet__content {
flex: 0 1 auto;
max-height: calc(88vh - 40px);
}
.basic-action-sheet__footer {
position: sticky;
bottom: 0;
+1 -2
View File
@@ -1,9 +1,8 @@
<template>
<BasicActionSheet
v-model:visible="visibleModel"
:title="''"
:title="title"
:showButton="false"
:compact="true"
:drawerHeight="drawerHeight"
>
<div v-if="item" class="space-y-3 pb-2">
+1 -2
View File
@@ -5,9 +5,8 @@
:class="
plain
? 'h-auto w-auto border-none bg-transparent p-0'
: 'h-10 min-h-[40px] w-10 min-w-[40px] rounded-full border-none bg-white active:bg-gray-50'
: 'h-9 w-9 rounded-full border-none bg-white active:bg-gray-50'
"
style="touch-action: manipulation"
@click.stop="$emit('click')"
>
<BaseIcon :icon="icon" :size="size" :color="color" />
+5 -13
View File
@@ -1,19 +1,11 @@
<template>
<div class="space-y-3">
<div class="flex items-start justify-between gap-2">
<div class="min-w-0 flex-1 space-y-1">
<div v-if="showTitle" class="text-lg font-700 text-gray-900">
<slot name="title">{{ title }}</slot>
</div>
<div v-if="subtitle || $slots.subtitle" class="text-xs text-gray-500">
<slot name="subtitle">{{ subtitle }}</slot>
</div>
<div class="min-w-0 space-y-1">
<div v-if="showTitle" class="text-lg font-700 text-gray-900">
<slot name="title">{{ title }}</slot>
</div>
<div
v-if="$slots.actions"
class="flex shrink-0 flex-wrap items-center justify-end gap-1"
>
<slot name="actions" />
<div v-if="subtitle || $slots.subtitle" class="text-xs text-gray-500">
<slot name="subtitle">{{ subtitle }}</slot>
</div>
</div>
</div>
@@ -21,14 +21,13 @@
<CustomerMobileDetailSheet
v-model:visible="sheetVisible"
:item="selectedItem"
@info="forwardAndClose('info', $event)"
@edit="forwardAndClose('edit', $event)"
@archive="forwardAndClose('archive', $event)"
@toggleActive="forward('toggleActive', $event)"
@chargeMoney="forwardAndClose('chargeMoney', $event)"
@chargeGold="forwardAndClose('chargeGold', $event)"
@toggleTrade="forward('toggleTrade', $event)"
@confirmUser="forwardAndClose('confirmUser', $event)"
@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>
@@ -41,7 +40,7 @@ import { useMobileTableList } from '@/components/mobile/composables/useMobileTab
import CustomerMobileListItem from './CustomerMobileListItem.vue'
import CustomerMobileDetailSheet from './CustomerMobileDetailSheet.vue'
const emit = defineEmits<{
defineEmits<{
(e: 'info', item: Customer): void
(e: 'edit', item: Customer): void
(e: 'archive', item: Customer): void
@@ -54,17 +53,6 @@ const emit = defineEmits<{
const { sheetVisible, selectedItem, openSheet, syncSelectedItem } = useMobileDetailSheet<Customer>()
type SheetAction = 'info' | 'edit' | 'archive' | 'toggleActive' | 'chargeMoney' | 'chargeGold' | 'toggleTrade' | 'confirmUser'
function forward(action: SheetAction, item: Customer) {
emit(action, item)
}
function forwardAndClose(action: SheetAction, item: Customer) {
sheetVisible.value = false
emit(action, item)
}
const { loading, search, items, hasMore, reload, loadMore, fetch } = useMobileTableList<Customer>({
fetchApi: getCustomerTable,
onFetched: (rows) => syncSelectedItem(rows)
@@ -1,84 +1,35 @@
<template>
<MobileDetailSheet v-model:visible="visibleProxy" :item="item" title="">
<MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="item?.name || ''">
<template #default="{ item: row }">
<h2 class="text-base font-700 leading-relaxed text-gray-900">{{ row.name || '-' }}</h2>
<p v-if="row.mobile" class="text-sm text-gray-500" dir="ltr">{{ row.mobile }}</p>
<div class="customer-sheet-actions grid grid-cols-2 gap-2">
<BaseButton
class="customer-sheet-btn w-full"
size="middle"
type="primary"
icon="vuesax-linear:wallet-add"
@click="$emit('chargeMoney', row)"
>
شارژ ریالی
</BaseButton>
<BaseButton
class="customer-sheet-btn w-full"
size="middle"
type="primary"
icon="vuesax-linear:wallet-money"
@click="$emit('chargeGold', row)"
>
شارژ طلایی
</BaseButton>
<BaseButton
v-if="!row.is_legal"
class="customer-sheet-btn w-full"
size="middle"
type="default"
icon="vuesax-linear:user-search"
@click="$emit('confirmUser', row)"
>
تایید کاربر
</BaseButton>
<BaseButton
class="customer-sheet-btn w-full"
size="middle"
type="default"
icon="vuesax-linear:stickynote"
@click="$emit('info', row)"
>
مشخصات کامل
</BaseButton>
<BaseButton
class="customer-sheet-btn w-full"
size="middle"
type="default"
icon="vuesax-linear:edit"
@click="$emit('edit', row)"
>
ویرایش
</BaseButton>
<BaseButton
class="customer-sheet-btn w-full"
size="middle"
type="default"
icon="vuesax-linear:archive-tick"
@click="$emit('archive', row)"
>
بایگانی
</BaseButton>
<BaseButton
class="customer-sheet-btn w-full"
size="middle"
:type="row.active ? 'default' : 'primary'"
:icon="row.active ? 'vuesax-linear:user-remove' : 'vuesax-linear:user-tick'"
@click="$emit('toggleActive', row)"
>
{{ row.active ? 'غیرفعال کردن' : 'فعال کردن' }}
</BaseButton>
<BaseButton
class="customer-sheet-btn w-full"
size="middle"
:type="row.trade_active === 1 ? 'default' : 'primary'"
:icon="row.trade_active === 1 ? 'vuesax-linear:box-remove' : 'vuesax-linear:box-tick'"
@click="$emit('toggleTrade', row)"
>
{{ row.trade_active === 1 ? 'ممنوعیت سفارش' : 'مجاز کردن سفارش' }}
</BaseButton>
</div>
<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)} گرم`">
@@ -105,9 +56,9 @@
<MobileDetailRow
label="وضعیت سفارش دهی"
full-width
:value-class="row.trade_active === 1 ? 'text-green-700' : 'text-red-600'"
:value-class="row.trade_active ? 'text-green-700' : 'text-red-600'"
>
{{ row.trade_active === 1 ? 'مجاز' : 'غیر مجاز' }}
{{ row.trade_active ? 'مجاز' : 'غیر مجاز' }}
</MobileDetailRow>
<MobileDetailRow label="کد کاربری" :value="row.id ?? '-'" />
<MobileDetailRow label="نوع کاربر" :value="row.type_str || '-'" />
@@ -125,8 +76,11 @@ 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'
@@ -138,7 +92,6 @@ const props = defineProps<{
const emit = defineEmits<{
(e: 'update:visible', value: boolean): void
(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
@@ -164,19 +117,3 @@ function lastSeen(row: Customer) {
return row.last_seen_at ? toJalali(row.last_seen_at) : '-'
}
</script>
<style scoped lang="less">
.customer-sheet-actions {
:deep(.customer-sheet-btn.ant-btn) {
display: inline-flex;
width: 100%;
justify-content: right;
text-align: right;
}
:deep(.customer-sheet-btn.ant-btn > div) {
width: 100%;
justify-content: right !important;
}
}
</style>
@@ -1,55 +1,25 @@
<template>
<MobileCard clickable @click="$emit('open', item)">
<div class="flex items-start gap-3">
<div
class="mt-1 flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gray-100"
>
<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="min-w-0 flex-1 space-y-1.5">
<div class="flex items-center gap-2">
<button
type="button"
class="min-w-0 flex-1 truncate border-none bg-transparent p-0 text-right text-sm font-700 text-gray-900"
@click.stop="$emit('info', item)"
>
{{ item.name || '-' }}
</button>
<span
class="inline-block h-2.5 w-2.5 shrink-0 rounded-full"
:class="item.active ? 'bg-green-500' : 'bg-red-500'"
:title="item.active ? 'فعال' : 'غیرفعال'"
/>
</div>
<div class="shrink-0 text-sm text-gray-600">{{ item.mobile || '-' }}</div>
<div class="flex flex-wrap items-center gap-2 text-xs text-gray-600">
<span dir="ltr" class="font-mono">{{ item.mobile || '-' }}</span>
<span class="whitespace-nowrap rounded-lg border px-2 py-0.5 font-600" :class="typeTagClass">
{{ item.type_str || 'کاربر' }}
</span>
</div>
</div>
<div class="flex shrink-0 flex-col items-stretch gap-1">
<BaseButton
type="primary"
size="small"
class="w-full min-w-[4.5rem]"
icon="vuesax-linear:setting-4"
@click.stop="$emit('open', item)"
>
عملیات
</BaseButton>
<BaseButton
type="default"
size="small"
class="w-full min-w-[4.5rem]"
icon="vuesax-linear:edit"
@click.stop="$emit('edit', item)"
>
ویرایش
</BaseButton>
<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>
@@ -58,6 +28,7 @@
<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
@@ -105,8 +105,7 @@
<BasicModal
v-model:visible="confirmVisible"
:width="isMobile ? '92vw' : '50vw'"
wrap-class-name="customer-stack-modal"
width="50vw"
title="تایید مشتری"
@ok="confirmUserFunction"
ok-text="تایید"
@@ -193,7 +192,6 @@ function handleArchive(customer: Customer) {
okText: 'تایید',
cancelText: 'رد',
centered: true,
zIndex: 1100,
onOk: () => archiveFunction(customer.id)
})
}
@@ -244,9 +242,3 @@ async function changeCustomerOrderActivationFunction(id: number) {
z-index: 1001 !important;
}
</style>
<style>
.customer-stack-modal {
z-index: 1100 !important;
}
</style>
+2 -67
View File
@@ -215,41 +215,10 @@
</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="شارژ کیف پول ریالی"
wrap-class-name="customer-stack-modal"
@ok="chargeMoneyWallet"
:loading="loading"
@close="showMoneyWalletCharge = false"
@@ -264,44 +233,16 @@
معادل {{ usePrice(formCharge.value / 10, true, 'تومان') }}
</div>
</a-form-item>
<a-form-item label="علت شارژ " name="note" :rules="inputRules()">
<a-form-item label="علت شارژ " name="value" :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="شارژ کیف پول طلایی"
wrap-class-name="customer-stack-modal"
@ok="chargeGoldWallet"
:loading="loading"
@close="showGoldWalletCharge = false"
@@ -313,7 +254,7 @@
<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()">
<a-form-item label="علت شارژ " name="value" :rules="inputRules()">
<BasicInput v-model:value="formCharge.note" />
</a-form-item>
</a-form>
@@ -684,9 +625,3 @@ const userStatus = (status: number) => {
color: #008000 !important;
}
</style>
<style>
.customer-stack-modal {
z-index: 1100 !important;
}
</style>