change responsive]

2026-05-31 11:51:52 +03:30
parent 06568c5858
commit 023b8ee5be
124 changed files with 6296 additions and 4233 deletions
@@ -0,0 +1,66 @@
+<template>
+  <MobileCardList
+    v-model:search="search"
+    :loading="loading"
+    :has-more="hasMore"
+    :show-empty="!loading && items.length === 0"
+    empty-text="حسابی یافت نشد"
+    search-placeholder="جستجو حساب"
+    show-refresh
+    @search="reload"
+    @refresh="reload"
+    @load-more="loadMore"
+  >
+    <AccountMobileListItem
+      v-for="item in items"
+      :key="item.id"
+      :item="item"
+      @open="openSheet"
+      @toggle-sts="confirmToggleSts"
+    />
+  </MobileCardList>
+
+  <AccountMobileDetailSheet v-model:visible="sheetVisible" :item="selectedItem" />
+</template>
+
+<script setup lang="ts">
+import { Modal } from 'ant-design-vue'
+import { getAccountTable } from '@/api/card'
+import type { Card } from '@/model/card'
+import MobileCardList from '@/components/mobile/MobileCardList.vue'
+import { useMobileDetailSheet } from '@/components/mobile/composables/useMobileDetailSheet'
+import { useMobileTableList } from '@/components/mobile/composables/useMobileTableList'
+import AccountMobileDetailSheet from './AccountMobileDetailSheet.vue'
+import AccountMobileListItem from './AccountMobileListItem.vue'
+
+type AccountRow = Card & { sts_str?: string; created_at?: string; customer_id?: number }
+
+const emit = defineEmits<{
+  (e: 'toggleSts', item: AccountRow): void
+}>()
+
+const { sheetVisible, selectedItem, openSheet, syncSelectedItem } = useMobileDetailSheet<AccountRow>()
+
+function confirmToggleSts(item: AccountRow) {
+  const isApproved = item.sts === 2
+  Modal.confirm({
+    title: isApproved ? 'غیر فعال سازی حساب' : 'فعال سازی حساب',
+    content: isApproved
+      ? 'آیا از غیرفعال‌سازی این حساب اطمینان دارید؟'
+      : 'آیا از فعال‌سازی این حساب اطمینان دارید؟',
+    okText: 'تایید',
+    cancelText: 'انصراف',
+    centered: true,
+    onOk: () => emit('toggleSts', item)
+  })
+}
+
+const { loading, search, items, hasMore, reload, loadMore, fetch } = useMobileTableList<AccountRow>({
+  fetchApi: getAccountTable,
+  onFetched: (rows) => syncSelectedItem(rows)
+})
+
+onMounted(() => reload())
+
+defineExpose({ fetch, openSheet })
+</script>
@@ -0,0 +1,73 @@
+<template>
+  <MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="sheetTitle">
+    <template #default="{ item: row }">
+      <MobileSheetHeader :title="sheetTitle" :subtitle="dateLabel(row)" :show-title="isMobile" />
+
+      <span class="inline-flex rounded-lg border px-2 py-0.5 text-xs font-600" :class="statusClass(row)">
+        {{ row.sts_str || '-' }}
+      </span>
+
+      <div class="space-y-2">
+        <MobileStatCard bordered label="نام بانک" :value="row.bank_name || '-'">
+          <template #prefix>
+            <BaseIcon icon="vuesax-linear:bank" size="18" color="#2563eb" />
+          </template>
+        </MobileStatCard>
+      </div>
+
+      <MobileInfoGrid>
+        <MobileDetailRow label="کد حساب" :value="row.id ?? '-'" />
+        <MobileDetailRow label="کد کاربر" :value="row.customer_id ?? '-'" />
+        <MobileDetailRow label="نام مشتری" full-width :value="row.customer?.name || '-'" />
+        <MobileDetailRow label="شماره حساب" full-width :value="row.account_number || '-'" />
+        <MobileDetailRow label="شماره کارت" full-width :value="row.cart_number || '-'" />
+        <MobileDetailRow label="شماره شبا" full-width :value="row.shaba_number || '-'" />
+        <MobileDetailRow label="تاریخ ثبت" :value="dateLabel(row)" />
+      </MobileInfoGrid>
+    </template>
+  </MobileDetailSheet>
+</template>
+
+<script setup lang="ts">
+import type { Card } from '@/model/card'
+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 MobileStatCard from '@/components/mobile/MobileStatCard.vue'
+import { isMobile } from '@core/utils/is'
+import { toJalaliNoTime } from '@core/utils/useDataTime'
+
+type AccountRow = Card & { sts_str?: string; created_at?: string; customer_id?: number }
+
+const props = defineProps<{
+  visible: boolean
+  item: AccountRow | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+}>()
+
+const visibleProxy = computed({
+  get: () => props.visible,
+  set: (value: boolean) => emit('update:visible', value)
+})
+
+const sheetTitle = computed(() => props.item?.customer?.name || `حساب #${props.item?.id ?? '-'}`)
+
+function statusClass(row: AccountRow) {
+  switch (row.sts) {
+    case 1:
+      return 'border-amber-300 bg-amber-50 text-amber-700'
+    case 2:
+      return 'border-green-300 bg-green-50 text-green-700'
+    default:
+      return 'border-red-300 bg-red-50 text-red-600'
+  }
+}
+
+function dateLabel(row: AccountRow) {
+  return row.created_at ? toJalaliNoTime(row.created_at) : '-'
+}
+</script>
@@ -0,0 +1,56 @@
+<template>
+  <MobileCard clickable @click="$emit('open', item)">
+    <div class="flex items-center gap-2">
+      <div class="min-w-0 flex-1 space-y-1">
+        <div class="flex items-center justify-between gap-2">
+          <span class="truncate text-sm font-700 text-gray-900">{{ customerName }}</span>
+          <span class="shrink-0 rounded-md border px-1.5 py-0.5 text-xs font-600" :class="statusClass">
+            {{ statusLabel }}
+          </span>
+        </div>
+        <div class="flex items-center justify-between gap-2 text-xs text-gray-600">
+          <span class="truncate">{{ item.bank_name || '-' }}</span>
+          <span class="shrink-0 text-gray-400">#{{ item.id ?? '-' }}</span>
+        </div>
+      </div>
+
+      <MobileIconButton
+        :icon="item.sts === 2 ? 'vuesax-linear:card-tick' : 'vuesax-linear:card-remove'"
+        :color="item.sts === 2 ? '#16A34A' : '#DC2626'"
+        :size="20"
+        @click="$emit('toggleSts', item)"
+      />
+    </div>
+  </MobileCard>
+</template>
+
+<script setup lang="ts">
+import type { Card } from '@/model/card'
+import MobileCard from '@/components/mobile/MobileCard.vue'
+import MobileIconButton from '@/components/mobile/MobileIconButton.vue'
+
+type AccountRow = Card & { sts_str?: string; created_at?: string; customer_id?: number }
+
+const props = defineProps<{
+  item: AccountRow
+}>()
+
+defineEmits<{
+  (e: 'open', item: AccountRow): void
+  (e: 'toggleSts', item: AccountRow): void
+}>()
+
+const customerName = computed(() => props.item.customer?.name || '-')
+const statusLabel = computed(() => props.item.sts_str || '-')
+
+const statusClass = computed(() => {
+  switch (props.item.sts) {
+    case 1:
+      return 'border-amber-300 bg-amber-50 text-amber-700'
+    case 2:
+      return 'border-green-300 bg-green-50 text-green-700'
+    default:
+      return 'border-red-300 bg-red-50 text-red-600'
+  }
+})
+</script>
@@ -1,7 +1,8 @@
 <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">
+      <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>
@@ -27,6 +28,14 @@
          </div>
        </template>
      </BaseTable>
+
+      <AccountMobileCardList
+        v-else
+        ref="mobileListRef"
+        class="min-h-0 flex-1"
+        @toggle-sts="changeAccountStsFunction"
+      />
+      </div>
    </BasicShowContext>
  </div>
 </template>
@@ -44,7 +53,11 @@ import { getOrderTable } from '@/api/order'
 import { getWithdrawTable } from '@/api/wallet'
 import { changeAccountSts, getAccountTable } from '@/api/card'
 import type { Card } from '@/model/card'
+import AccountMobileCardList from './AccountMobileCardList.vue'
+import { isMobile } from '@core/utils/is'
+
 const [submit, reload] = useBaseTable()
+const mobileListRef = ref<null | { fetch: () => Promise<void> }>(null)
 /*const select = (val) => {
  val.sts === 1 ? return ['1'] : ['2']
 }*/
@@ -64,7 +77,7 @@ async function changeAccountStsFunction(val: Card) {
    loading.value = true
    await changeAccountSts({ id: val.id, sts: val.sts !== 2 ? 2 : 3 })
    message.success(val.sts !== 2 ? 'با موفقیت تایید شد' : 'با موفقیت رد شد')
-    reload()
+    await Promise.allSettled([reload(), mobileListRef.value?.fetch?.() as Promise<void>])
  } catch (e) {
    console.log(e)
  } finally {
@@ -83,9 +96,8 @@ const tblProps = ref<any>({
 })
 const loading = ref<boolean>(false)

-const fetch = () => {
-  // console.log('sss')
-  reload()
+async function fetch() {
+  await Promise.allSettled([reload(), mobileListRef.value?.fetch?.() as Promise<void>])
 }
 // const spinTable = (val: boolean) => {
 //   // console.log('sss')