change responsive]

src/pages/menuPages/accounting/components/AccountingMobileCardList.vue

@@ -0,0 +1,51 @@
+<template>
+  <MobileCardList
+    v-model:search="search"
+    :loading="loading"
+    :has-more="hasMore"
+    :show-empty="!loading && items.length === 0"
+    empty-text="رکوردی یافت نشد"
+    @search="reload"
+    @load-more="loadMore"
+  >
+    <AccountingMobileListItem
+      v-for="item in items"
+      :key="item.id"
+      :item="item"
+      @open="openSheet"
+    />
+  </MobileCardList>
+
+  <AccountingMobileDetailSheet
+    v-model:visible="sheetVisible"
+    :item="selectedItem"
+    @info="$emit('info', $event)"
+    @orders="$emit('orders', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import { getTotalAccountingTable } from '@/api/accounting'
+import type { TotalAccounting } from '@/model/accounting'
+import MobileCardList from '@/components/mobile/MobileCardList.vue'
+import { useMobileDetailSheet } from '@/components/mobile/composables/useMobileDetailSheet'
+import { useMobileTableList } from '@/components/mobile/composables/useMobileTableList'
+import AccountingMobileDetailSheet from './AccountingMobileDetailSheet.vue'
+import AccountingMobileListItem from './AccountingMobileListItem.vue'
+
+defineEmits<{
+  (e: 'info', item: TotalAccounting): void
+  (e: 'orders', item: TotalAccounting): void
+}>()
+
+const { sheetVisible, selectedItem, openSheet, syncSelectedItem } = useMobileDetailSheet<TotalAccounting>()
+
+const { loading, search, items, hasMore, reload, loadMore, fetch } = useMobileTableList<TotalAccounting>({
+  fetchApi: getTotalAccountingTable,
+  onFetched: (rows) => syncSelectedItem(rows)
+})
+
+onMounted(() => reload())
+
+defineExpose({ fetch, openSheet })
+</script>