change responsive]

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

@@ -1,110 +1,73 @@
 <template>
-  <div>
+  <div class="h-full min-h-0">
     <BasicShowContext title="لیست کیف پول">
-      <BaseTable 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:wallet-add" Size="16px" />
-          </BaseButton>
-        </template>-->
-        <template #extraHeader>
-          <div class="w-60vw hidden md:block">
-            <div class="grid grid-cols-2 gap-3 w-full py-2 px-5">
-              <div
-                :class="
-                  sums?.cash >= 0
-                    ? sums?.cash === 0
-                      ? 'bg-amber-100'
-                      : 'bg-green-100'
-                    : 'bg-red-100'
-                "
-                class="rounded-lg p-2"
-              >
-                <div class="mb-1">مجموع موجودی کیف پول:</div>
-                <div class="flex gap-2">
-                  <div
-                    class="gap-5 rounded-lg border-1 border-solid border-gray flex-1 p-1 text-center"
-                  >
-                    <div class="font-bold">{{ usePrice(sums?.cash ?? 0) }}</div>
-                  </div>
-                  <div
-                    class="gap-5 rounded-lg border-1 border-solid border-gray flex-1 p-1 text-center"
-                  >
-                    <div class="font-bold">
-                      {{ usePrice(sums?.cashToGold.toFixed(2) ?? 0, true, 'گرم') }}
-                    </div>
-                  </div>
-                </div>
+      <div class="flex h-full min-h-0 flex-col gap-3">
+        <div class="hidden shrink-0 md:grid md:grid-cols-1 md:gap-3 lg:grid-cols-2">
+          <div
+            class="rounded-lg p-2.5 text-sm"
+            :class="walletSumTone(sums?.cash)"
+          >
+            <div class="mb-2 font-medium">مجموع موجودی کیف پول</div>
+            <div class="grid grid-cols-2 gap-2">
+              <div class="rounded-lg border border-gray-200 bg-white/70 px-2 py-1.5 text-center">
+                <div class="text-xs text-gray-500">ریال</div>
+                <div class="mt-1 font-bold break-all">{{ usePrice(sums?.cash ?? 0) }}</div>
               </div>
-              <div
-                :class="
-                  sums?.gold >= 0
-                    ? sums?.gold === 0
-                      ? 'bg-amber-100'
-                      : 'bg-green-100'
-                    : 'bg-red-100'
-                "
-                class="rounded-lg p-2"
-              >
-                <div class="mb-1">مجموع موجودی کیف طلا:</div>
-                <div class="flex gap-2">
-                  <div
-                    class="gap-5 rounded-lg border-1 border-solid border-gray flex-1 p-1 text-center"
-                  >
-                    <div class="font-bold">{{ usePrice(sums?.gold ?? 0, true, 'گرم') }}</div>
-                  </div>
-                  <div
-                    class="gap-5 rounded-lg border-1 border-solid border-gray flex-1 p-1 text-center"
-                  >
-                    <div class="font-bold">{{ usePrice(sums?.goldToCash ?? 0) }}</div>
-                  </div>
+              <div class="rounded-lg border border-gray-200 bg-white/70 px-2 py-1.5 text-center">
+                <div class="text-xs text-gray-500">گرم</div>
+                <div class="mt-1 font-bold">
+                  {{ usePrice(Number(sums?.cashToGold ?? 0).toFixed(2), true, 'گرم') }}
                 </div>
               </div>
             </div>
           </div>
-        </template>
-        <template #action="{ column, record }">
-          <div class="gap-2 flex justify-center">
-            <!--            <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:tick-circle' : 'vuesax-linear:close-circle'"
-                :color="record.active ? '#54AD06' : '#ad0627'"
-              />
-            </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
-              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
+            class="rounded-lg p-2.5 text-sm"
+            :class="walletSumTone(sums?.gold)"
+          >
+            <div class="mb-2 font-medium">مجموع موجودی کیف طلا</div>
+            <div class="grid grid-cols-2 gap-2">
+              <div class="rounded-lg border border-gray-200 bg-white/70 px-2 py-1.5 text-center">
+                <div class="text-xs text-gray-500">گرم</div>
+                <div class="mt-1 font-bold">
+                  {{ usePrice(sums?.gold ?? 0, true, 'گرم') }}
+                </div>
+              </div>
+              <div class="rounded-lg border border-gray-200 bg-white/70 px-2 py-1.5 text-center">
+                <div class="text-xs text-gray-500">ریال</div>
+                <div class="mt-1 font-bold break-all">{{ usePrice(sums?.goldToCash ?? 0) }}</div>
+              </div>
+            </div>
           </div>
-        </template>
-      </BaseTable>
+        </div>
+
+        <BaseTable v-if="!isMobile" class="min-h-0 min-w-0 flex-1" v-bind="tblProps" @register="submit" ref="tbl">
+          <template #action="{ column, record }">
+            <div class="gap-2 flex justify-center">
+              <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>
+            </div>
+          </template>
+        </BaseTable>
+
+        <WalletMobileCardList
+          v-else
+          ref="mobileListRef"
+          class="min-h-0 flex-1"
+          @sums="onMobileSums"
+        />
+      </div>
     </BasicShowContext>
   </div>
 </template>
@@ -113,30 +76,21 @@
 import type { TableInput } from '@core/type/baseTable'
 import useBaseTable from '@core/components/BaseTableOld/hooks/useBaseTable'
 import Icon from '@core/components/BaseIcon/src/Icon.vue'
-import { changeCustomerActivation, getCustomerTable } from '@/api/customer'
+import { changeCustomerActivation } from '@/api/customer'
 import { cols } from '../hooks/walletColumns'
-import { useUserStore } from '@/store/userStore'
 import { usePrefix } from '@core/composable/usePrefix'
 import { message } from 'ant-design-vue'
 import { getWalletTable } from '@/api/wallet'
 import { usePrice } from '../../../../core/utils/usePrice'
+import WalletMobileCardList from './WalletMobileCardList.vue'
+import { isMobile } from '@core/utils/is'
 
 const [submit, reload] = useBaseTable()
-/*const select = (val) => {
-  val.sts === 1 ? return ['1'] : ['2']
-}*/
-//emits
+const mobileListRef = ref<null | { fetch: () => Promise<void> }>(null)
 const emits = defineEmits(['delete', 'edit', 'add', 'info', 'sums'])
 
 const { prefixCls } = usePrefix('pophoverstatus')
 
-//permission
-/*function checkPermission(temp: string) {
-  const store = useUserStore()
-  return store.canAccess(temp)
-}*/
-
-//define table
 const table = ref(null)
 const sums = ref<any>()
 
@@ -146,13 +100,23 @@ const tblProps = ref<any>({
     const data = await getWalletTable(params)
     sums.value = data?.sums
     emits('sums', data?.sums)
-    console.log(sums.value)
     return data
   }
-  //bordered: true
 })
 const loading = ref<boolean>(false)
 
+function walletSumTone(value?: number) {
+  if (value == null || value >= 0) {
+    return value === 0 ? 'bg-amber-100' : 'bg-green-100'
+  }
+  return 'bg-red-100'
+}
+
+function onMobileSums(payload: unknown) {
+  sums.value = payload
+  emits('sums', payload)
+}
+
 async function changeCustomerActivationFunction(id: number) {
   try {
     loading.value = true
@@ -166,17 +130,12 @@ 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')
-//   table?.value?.loading.value = val
-// }
+
 defineExpose({
   fetch
-  // spinTable
 })
 </script>
 
@@ -192,11 +151,5 @@ defineExpose({
   .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>