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,65 @@
+<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"
+  >
+    <TransactionMobileListItem
+      v-for="item in items"
+      :key="item.id"
+      :item="item"
+      :hide-customer="!!customerId"
+      @open="openSheet"
+    />
+  </MobileCardList>
+
+  <TransactionMobileDetailSheet v-model:visible="sheetVisible" :item="selectedItem" />
+</template>
+
+<script setup lang="ts">
+import { getTransactionTable } from '@/api/transaction'
+import type { Transaction } from '@/model/transaction'
+import MobileCardList from '@/components/mobile/MobileCardList.vue'
+import { useMobileDetailSheet } from '@/components/mobile/composables/useMobileDetailSheet'
+import { useMobileTableList } from '@/components/mobile/composables/useMobileTableList'
+import type { TableInput } from '@core/type/baseTable'
+import TransactionMobileDetailSheet from './TransactionMobileDetailSheet.vue'
+import TransactionMobileListItem from './TransactionMobileListItem.vue'
+
+const props = defineProps<{
+  customerId?: number
+}>()
+
+const { sheetVisible, selectedItem, openSheet, syncSelectedItem } = useMobileDetailSheet<Transaction>()
+
+function fetchTransactions(params: TableInput) {
+  if (props.customerId) {
+    params.filters = params.filters ?? []
+    params.filters.push({
+      field: 'customer_id',
+      type: 'text',
+      value: props.customerId,
+      cr: 'and',
+      op: 'eq',
+      hidden: false
+    })
+  }
+  return getTransactionTable(params)
+}
+
+const { loading, search, items, hasMore, reload, loadMore, fetch } = useMobileTableList<Transaction>({
+  fetchApi: fetchTransactions,
+  onFetched: (rows) => syncSelectedItem(rows)
+})
+
+onMounted(() => reload())
+
+defineExpose({ fetch, openSheet })
+</script>
@@ -0,0 +1,101 @@
+<template>
+  <MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="sheetTitle">
+    <template #default="{ item: row }">
+      <MobileSheetHeader :title="sheetTitle" :subtitle="dateLabel(row)" :show-title="isMobile" />
+
+      <div class="flex items-center gap-2">
+        <span class="rounded-lg border px-2 py-0.5 text-xs font-600" :class="typeTagClass(row)">
+          {{ typeLabel(row) }}
+        </span>
+      </div>
+
+      <div class="space-y-2">
+        <MobileStatCard
+          bordered
+          :variant="(row.gold ?? 0) > 0 ? 'success' : 'danger'"
+          label="مقدار طلا (گرم)"
+          :value="goldLabel(row)"
+        >
+          <template #prefix>
+            <BaseIcon icon="vuesax-linear:coin" size="18" :color="(row.gold ?? 0) > 0 ? '#15803d' : '#dc2626'" />
+          </template>
+        </MobileStatCard>
+        <MobileStatCard
+          bordered
+          :variant="(row.cash ?? 0) > 0 ? 'success' : 'danger'"
+          label="مقدار پول (ریال)"
+          :value="usePrice(row.cash ?? 0, true, '')"
+        >
+          <template #prefix>
+            <BaseIcon icon="vuesax-linear:empty-wallet" size="18" :color="(row.cash ?? 0) > 0 ? '#15803d' : '#dc2626'" />
+          </template>
+        </MobileStatCard>
+      </div>
+
+      <MobileInfoGrid>
+        <MobileDetailRow label="کد تراکنش" :value="row.id ?? '-'" />
+        <MobileDetailRow label="نام تراکنش" :value="row.type_str || '-'" />
+        <MobileDetailRow label="علت تراکنش" full-width :value="noteLabel(row)" />
+        <MobileDetailRow label="نام مشتری" full-width :value="row.customer?.name || '-'" />
+        <MobileDetailRow label="تاریخ تراکنش" :value="dateLabel(row)" />
+      </MobileInfoGrid>
+    </template>
+  </MobileDetailSheet>
+</template>
+
+<script setup lang="ts">
+import type { Transaction } from '@/model/transaction'
+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'
+import { usePrice } from '@core/utils/usePrice'
+
+const props = defineProps<{
+  visible: boolean
+  item: Transaction | 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?.type_str || `تراکنش #${props.item?.id ?? '-'}`)
+
+function isMoneyType(row: Transaction) {
+  return row.type === 4 || row.type === 3
+}
+
+function typeLabel(row: Transaction) {
+  return isMoneyType(row) ? 'پول' : 'طلا'
+}
+
+function typeTagClass(row: Transaction) {
+  return isMoneyType(row)
+    ? 'border-green-300 bg-green-50 text-green-700'
+    : 'border-amber-300 bg-amber-50 text-amber-700'
+}
+
+function dateLabel(row: Transaction) {
+  return row.created_at ? toJalaliNoTime(row.created_at) : '-'
+}
+
+function goldLabel(row: Transaction) {
+  const gold = row.gold
+  if (gold == null) return '-'
+  return `${Number(Number(gold).toFixed(3))} گرم`
+}
+
+function noteLabel(row: Transaction) {
+  if (row.note == null) return '-'
+  return String(row.note)
+}
+</script>
@@ -0,0 +1,43 @@
+<template>
+  <MobileCard clickable @click="$emit('open', item)">
+    <div class="space-y-1">
+      <div class="flex items-center justify-between gap-2">
+        <div class="flex min-w-0 items-center gap-2">
+          <span class="shrink-0 rounded-md border px-1.5 py-0.5 text-xs font-600" :class="typeTagClass">
+            {{ typeLabel }}
+          </span>
+          <span class="truncate text-sm font-700 text-gray-900">{{ item.type_str || '-' }}</span>
+        </div>
+        <span class="shrink-0 text-xs text-gray-400">{{ dateLabel }}</span>
+      </div>
+
+      <div v-if="!hideCustomer" class="truncate text-xs text-gray-600">{{ customerName }}</div>
+    </div>
+  </MobileCard>
+</template>
+
+<script setup lang="ts">
+import type { Transaction } from '@/model/transaction'
+import MobileCard from '@/components/mobile/MobileCard.vue'
+import { toJalaliNoTime } from '@core/utils/useDataTime'
+
+const props = defineProps<{
+  item: Transaction
+  hideCustomer?: boolean
+}>()
+
+defineEmits<{
+  (e: 'open', item: Transaction): void
+}>()
+
+const isMoneyType = computed(() => props.item.type === 4 || props.item.type === 3)
+const typeLabel = computed(() => (isMoneyType.value ? 'پول' : 'طلا'))
+const typeTagClass = computed(() =>
+  isMoneyType.value
+    ? 'border-green-300 bg-green-50 text-green-700'
+    : 'border-amber-300 bg-amber-50 text-amber-700'
+)
+
+const customerName = computed(() => props.item.customer?.name || '-')
+const dateLabel = computed(() => (props.item.created_at ? toJalaliNoTime(props.item.created_at) : '-'))
+</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>
@@ -49,6 +50,14 @@
          </div>
        </template>
      </BaseTable>
+
+      <TransactionMobileCardList
+        v-else
+        ref="mobileListRef"
+        class="min-h-0 flex-1"
+        :customer-id="customerId"
+      />
+      </div>
    </BasicShowContext>
  </div>
 </template>
@@ -63,17 +72,18 @@ import {useUserStore} from '@/store/userStore'
 import {usePrefix} from '@core/composable/usePrefix'
 import {message} from 'ant-design-vue'
 import {getWalletTable} from '@/api/wallet'
-import {getTransactionTable} from '@/api/transaction'
-import {getSMSTable} from "@/api/sms";
-
+import { getTransactionTable } from '@/api/transaction'
+import TransactionMobileCardList from './TransactionMobileCardList.vue'
+import { isMobile } from '@core/utils/is'

 interface Prop {
-  customerId: number
+  customerId?: number
 }

 const props = defineProps<Prop>()

 const [submit, reload] = useBaseTable()
+const mobileListRef = ref<null | { fetch: () => Promise<void> }>(null)
 /*const select = (val) => {
  val.sts === 1 ? return ['1'] : ['2']
 }*/
@@ -124,9 +134,8 @@ 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')