change responsive]

src/pages/menuPages/withdraw/components/WithdrawMobileCardList.vue

@@ -0,0 +1,72 @@
+<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"
+  >
+    <WithdrawMobileListItem
+      v-for="item in items"
+      :key="item.id"
+      :item="item"
+      @open="openSheet"
+    />
+  </MobileCardList>
+
+  <WithdrawMobileDetailSheet
+    v-model:visible="sheetVisible"
+    :item="selectedItem"
+    @withdraw="(row) => emit('withdraw', row)"
+    @weight="(row) => emit('weight', row)"
+    @change-status="changeStatusHandler"
+  />
+</template>
+
+<script setup lang="ts">
+import { message } from 'ant-design-vue'
+import { getWithdrawTable, updateSts } from '@/api/wallet'
+import type { Withdraw } from '@/model/wallet'
+import MobileCardList from '@/components/mobile/MobileCardList.vue'
+import { useMobileDetailSheet } from '@/components/mobile/composables/useMobileDetailSheet'
+import { useMobileTableList } from '@/components/mobile/composables/useMobileTableList'
+import { status } from '@/pages/menuPages/withdraw/information/hooks/status'
+import WithdrawMobileDetailSheet from './WithdrawMobileDetailSheet.vue'
+import WithdrawMobileListItem from './WithdrawMobileListItem.vue'
+
+const emit = defineEmits<{
+  (e: 'withdraw', item: Withdraw): void
+  (e: 'weight', item: Withdraw): void
+}>()
+
+const { sheetVisible, selectedItem, openSheet, syncSelectedItem } = useMobileDetailSheet<Withdraw>()
+
+const { loading, search, items, hasMore, reload, loadMore, fetch } = useMobileTableList<Withdraw>({
+  fetchApi: getWithdrawTable,
+  onFetched: (rows) => syncSelectedItem(rows)
+})
+
+async function changeStatusHandler(
+  item: Withdraw,
+  statusEntry: [string, (typeof status)[keyof typeof status]]
+) {
+  if (!item.id) return
+  try {
+    await updateSts(item.id, { sts: statusEntry[0] })
+    message.success('وضعیت ثبت شد')
+    await fetch()
+  } catch (e) {
+    console.error(e)
+    message.error('خطا در ثبت اطلاعات')
+  }
+}
+
+onMounted(() => reload())
+
+defineExpose({ fetch, openSheet })
+</script>

src/pages/menuPages/withdraw/components/WithdrawMobileDetailSheet.vue

@@ -0,0 +1,146 @@
+<template>
+  <MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="sheetTitle">
+    <template #default="{ item: row }">
+      <MobileSheetHeader :subtitle="dateLabel(row)" :show-title="isMobile">
+        <template #title>
+          <div class="flex w-full items-center justify-between gap-3">
+            <span class="min-w-0 truncate">{{ sheetTitle }}</span>
+            <div class="flex shrink-0 items-center gap-2">
+              <MobileIconButton
+                v-if="!row.tracked_number"
+                plain
+                icon="vuesax-linear:tick-circle"
+                color="#16A34A"
+                :size="22"
+                @click="$emit('withdraw', row)"
+              />
+              <MobileIconButton
+                plain
+                icon="vuesax-linear:3d-cube-scan"
+                color="#1D4ED8"
+                :size="22"
+                @click="$emit('weight', row)"
+              />
+              <MobileIconButton
+                v-if="showStatusActions(row)"
+                plain
+                icon="vuesax-linear:document-download"
+                color="#1D4ED8"
+                :size="22"
+                @click="goToFactor(row)"
+              />
+              <ADropdown v-if="showStatusActions(row)" :trigger="['click']">
+                <MobileIconButton plain icon="vuesax-linear:status-up" color="#CA8A04" :size="22" />
+                <template #overlay>
+                  <a-menu class="flex flex-col">
+                    <a-menu-item
+                      v-for="(statusItem, index) in statusOptions(row)"
+                      :key="index"
+                      class="m-1 rounded border-none px-2 py-1"
+                      :style="{ color: statusItem[1].color }"
+                      @click="$emit('changeStatus', row, statusItem)"
+                    >
+                      <span class="font-normal">{{ statusItem[1].title }}</span>
+                    </a-menu-item>
+                  </a-menu>
+                </template>
+              </ADropdown>
+            </div>
+          </div>
+        </template>
+      </MobileSheetHeader>
+
+      <span class="inline-flex rounded-lg border px-2 py-0.5 text-xs font-600 border-amber-300 bg-amber-50 text-amber-700">
+        {{ row.sts_str || '-' }}
+      </span>
+
+      <div class="space-y-2">
+        <MobileStatCard bordered variant="danger" label="مقدار (ریال)" :value="usePrice(row.cash ?? 0, true, '')">
+          <template #prefix>
+            <BaseIcon icon="vuesax-linear:empty-wallet" size="18" color="#dc2626" />
+          </template>
+        </MobileStatCard>
+        <MobileStatCard bordered variant="warning" label="طلا" :value="goldLabel(row)">
+          <template #prefix>
+            <BaseIcon icon="vuesax-linear:coin" size="18" color="#b45309" />
+          </template>
+        </MobileStatCard>
+      </div>
+
+      <MobileInfoGrid>
+        <MobileDetailRow label="علت تراکنش" full-width :value="noteLabel(row)" />
+        <MobileDetailRow label="شماره پیگیری" :value="row.tracked_number ?? '-'" />
+        <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.bank_account?.cart_number || '-'" />
+        <MobileDetailRow label="تاریخ ثبت" full-width :value="dateLabel(row)" />
+      </MobileInfoGrid>
+    </template>
+  </MobileDetailSheet>
+</template>
+
+<script setup lang="ts">
+import type { Withdraw } from '@/model/wallet'
+import MobileDetailRow from '@/components/mobile/MobileDetailRow.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 MobileStatCard from '@/components/mobile/MobileStatCard.vue'
+import { status } from '@/pages/menuPages/withdraw/information/hooks/status'
+import { isMobile } from '@core/utils/is'
+import { toJalali } from '@core/utils/useDataTime'
+import { usePrice } from '@core/utils/usePrice'
+import { toNumber } from 'lodash'
+import { useRouter } from 'vue-router'
+
+const props = defineProps<{
+  visible: boolean
+  item: Withdraw | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+  (e: 'withdraw', item: Withdraw): void
+  (e: 'weight', item: Withdraw): void
+  (e: 'changeStatus', item: Withdraw, statusEntry: [string, (typeof status)[keyof typeof status]]): void
+}>()
+
+const router = useRouter()
+
+const visibleProxy = computed({
+  get: () => props.visible,
+  set: (value: boolean) => emit('update:visible', value)
+})
+
+const sheetTitle = computed(() => props.item?.customer?.name || `برداشت #${props.item?.id ?? '-'}`)
+
+function showStatusActions(row: Withdraw) {
+  const sts = row.sts ?? 0
+  return sts >= 50 && sts <= 70
+}
+
+function statusOptions(row: Withdraw) {
+  return Object.entries(status).filter((item) => toNumber(item[0]) !== row.sts) as [string, (typeof status)[keyof typeof status]][]
+}
+
+function goToFactor(row: Withdraw) {
+  if (!row.id) return
+  router.push({ name: 'factor', params: { id: row.id } })
+}
+
+function dateLabel(row: Withdraw) {
+  return row.created_at ? toJalali(row.created_at) : '-'
+}
+
+function noteLabel(row: Withdraw) {
+  if (row.note == null || row.note === '') return '-'
+  return String(row.note)
+}
+
+function goldLabel(row: Withdraw) {
+  if (row.gold == null) return '-'
+  return String(row.gold)
+}
+</script>

src/pages/menuPages/withdraw/components/WithdrawMobileListItem.vue

@@ -0,0 +1,39 @@
+<template>
+  <MobileCard clickable @click="$emit('open', item)">
+    <div class="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 text-xs text-gray-400">{{ dateLabel }}</span>
+      </div>
+
+      <div class="flex items-center justify-between gap-2 text-xs">
+        <span class="truncate text-gray-600">{{ noteLabel }}</span>
+        <span class="shrink-0 font-700 text-red-600">{{ cashLabel }}</span>
+      </div>
+    </div>
+  </MobileCard>
+</template>
+
+<script setup lang="ts">
+import type { Withdraw } from '@/model/wallet'
+import MobileCard from '@/components/mobile/MobileCard.vue'
+import { toJalaliNoTime } from '@core/utils/useDataTime'
+import { usePrice } from '@core/utils/usePrice'
+
+const props = defineProps<{
+  item: Withdraw
+}>()
+
+defineEmits<{
+  (e: 'open', item: Withdraw): void
+}>()
+
+const noteLabel = computed(() => {
+  if (props.item.note == null || props.item.note === '') return `#${props.item.id ?? '-'}`
+  return String(props.item.note)
+})
+
+const customerName = computed(() => props.item.customer?.name || '-')
+const dateLabel = computed(() => (props.item.created_at ? toJalaliNoTime(props.item.created_at) : '-'))
+const cashLabel = computed(() => usePrice(props.item.cash ?? 0, true, ''))
+</script>

src/pages/menuPages/withdraw/components/table.vue

@@ -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>
@@ -61,6 +62,15 @@
           </div>
         </template>
       </BaseTable>
+
+      <WithdrawMobileCardList
+        v-else
+        ref="mobileListRef"
+        class="min-h-0 flex-1"
+        @withdraw="(row) => emits('withdraw', row)"
+        @weight="(row) => emits('weight', row)"
+      />
+      </div>
     </BasicShowContext>
   </div>
 </template>
@@ -76,8 +86,11 @@ import { usePrefix } from '@core/composable/usePrefix'
 import { message } from 'ant-design-vue'
 import { getOrderTable } from '@/api/order'
 import {getWithdrawTable, updateSts} from '@/api/wallet'
+import WithdrawMobileCardList from './WithdrawMobileCardList.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']
 }*/
@@ -117,9 +130,8 @@ async function changeCustomerActivationFunction(id: number) {
   }
 }
 
-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')
@@ -144,7 +156,7 @@ const test = (record: any) => {
 const changeStatusHandler = async (status: any) => {
   try {
     await changeStatus(withdrawId.value as number, status)
-    reload()
+    await fetch()
   } catch (e: any) {
     console.log(e)
   }

src/pages/menuPages/withdraw/index.vue

@@ -20,6 +20,7 @@
       v-model:visible="confirmWithdrawVisible"
       width="15rem"
       title="تایید برداشت"
+      wrap-class-name="withdraw-stack-modal"
       @ok="okWithdraw"
       :loading="loading"
       @close="confirmWithdrawVisible = false"
@@ -51,22 +52,20 @@
         v-model:visible="confirmWeightVisible"
         width="40rem"
         title="ثبت اطلاعات"
+        wrap-class-name="withdraw-stack-modal"
         :loading="loading"
         @close="confirmWeightVisible = false"
     >
-        <div v-for="(item, index) in confirmWithdraw?.transaction">
+        <div v-for="(item, index) in weightTransactions" :key="index">
           <div class="bg-gray-100 rounded-lg p-4 mt-2">
-            <div class="mb-4">{{ item?.title }} ({{ (item.gold * -1) }} عدد)</div>
+            <div class="mb-4">{{ item?.title }} ({{ weightCount(item) }} عدد)</div>
             <ADivider class="!my-0 "/>
-            <div v-if="item.gold && item.gold * -1 > 0">
+            <div v-if="weightCount(item) > 0">
               <div class="h-7 grid grid grid-cols-3">
                 <span class="col-span-1  flex "></span>
                 <span class="col-span-1  flex justify-center">وزن جدید</span>
               </div>
-              <div v-for="i in Math.abs(item.gold * -1)" class="grid grid-cols-3 gap-2 mb-2" >
-<!--                <span class="col-span-1 text-xs font-medium py-[8px] px-[10px]">{{
-                  i
-                }}</span>-->
+              <div v-for="i in weightCount(item)" :key="i" class="grid grid-cols-3 gap-2 mb-2" >
                 <span class="col-span-1 text-xs font-medium py-[8px] px-[10px]">{{ item?.title }} {{ i }}</span>
                 <BasicInput class="col-span-1 text-xs font-medium w-10rem" v-model:value="newWeightArray[i]" />
                 <BaseButton class="col-span-1 text-xs font-medium w-4rem mr-4" @click="ok(i)">ثبت</BaseButton>
@@ -74,6 +73,9 @@
             </div>
           </div>
         </div>
+        <div v-if="!weightTransactions.length" class="py-6 text-center text-sm text-gray-500">
+          اطلاعات تراکنش یافت نشد
+        </div>
     </BasicModal>
   </div>
 </template>
@@ -97,7 +99,7 @@ import type { Customer } from '@/model/customer'
 import { createCustomer, deleteCustomer, updateCustomer } from '@/api/customer'
 import type { Order } from '@/model/order'
 import type { Wallet, Withdraw } from '@/model/wallet'
-import {completeWithdraw, sendWeights} from '@/api/wallet'
+import {completeWithdraw, getWithdrawById, sendWeights} from '@/api/wallet'
 import Button from "@core/components/BaseButton";
 //import DatePicker from '@core/components/_sample/components/datePicker.vue'
 
@@ -214,7 +216,8 @@ async function edit(record: Customer) {
 }*/
 
 function openWithdraw(val: Withdraw) {
-  confirmWithdraw = val
+  confirmWithdraw.value = val
+  resetData()
   confirmWithdrawVisible.value = true
 }
 
@@ -241,7 +244,17 @@ onMounted(async () => {
 //add project modal
 const confirmWithdrawVisible = ref<boolean>(false)
 const confirmWeightVisible = ref<boolean>(false)
-let confirmWithdraw: Withdraw
+const confirmWithdraw = ref<Withdraw | null>(null)
+
+const weightTransactions = computed(() => {
+  const tx = confirmWithdraw.value?.transaction
+  return Array.isArray(tx) ? tx : []
+})
+
+function weightCount(item: { gold?: number }) {
+  const count = Math.floor(Math.abs(Number(item?.gold ?? 0)))
+  return Number.isFinite(count) ? count : 0
+}
 // const userInfoVisible = ref<boolean>(false)
 
 //submit weight
@@ -251,7 +264,7 @@ async function okWithdraw() {
     // return
     loading.value = true
     try {
-      form.value.id = confirmWithdraw
+      form.value.id = confirmWithdraw.value?.id
       await completeWithdraw(form.value)
       confirmWithdrawVisible.value = false
       refreshTable()
@@ -269,10 +282,24 @@ async function okWithdraw() {
   })
 }
 
-const newWeightArray = ref([])
-function openWeight(val) {
-  confirmWithdraw = val
-  confirmWeightVisible.value = true
+const newWeightArray = ref<Record<number, number | undefined>>({})
+
+async function openWeight(val: Withdraw) {
+  try {
+    loading.value = true
+    newWeightArray.value = {}
+    if (val.id && !Array.isArray(val.transaction)) {
+      confirmWithdraw.value = await getWithdrawById(val.id)
+    } else {
+      confirmWithdraw.value = val
+    }
+    confirmWeightVisible.value = true
+  } catch (e) {
+    console.error(e)
+    message.error('خطا در بارگذاری اطلاعات')
+  } finally {
+    loading.value = false
+  }
 }
 function ok(i) {
   try {
@@ -289,3 +316,9 @@ function ok(i) {
 </script>
 
 <style scoped></style>
+
+<style>
+.withdraw-stack-modal {
+  z-index: 1100 !important;
+}
+</style>