change responsive]

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

@@ -1,7 +1,15 @@
 <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">
+      <template #extra>
+        <BaseButton type="primary" size="small" class="flex shrink-0 md:hidden" @click="emits('add')">
+          <div>افزودن مدیر</div>
+          <BaseIcon icon="vuesax-linear:user-add" Size="16px" />
+        </BaseButton>
+      </template>
+
+      <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>
@@ -10,20 +18,6 @@
         </template>
         <template #action="{ column, record }">
           <div class="gap-2 flex justify-center">
-            <!--            <a-tooltip
-              :key="record.active"
-              placement="bottom"
-              class="cursor-pointer"
-              @click="changeUserActivationFunction(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>
@@ -45,6 +39,16 @@
           </div>
         </template>
       </BaseTable>
+
+      <ManagerMobileCardList
+        v-else
+        ref="mobileListRef"
+        class="min-h-0 flex-1"
+        @info="(row) => emits('info', row)"
+        @edit="(row) => emits('edit', row)"
+        @delete="(id) => emits('delete', id)"
+      />
+      </div>
     </BasicShowContext>
   </div>
 </template>
@@ -52,64 +56,29 @@
 <script lang="tsx" setup>
 import type { TableInput } from '@core/type/baseTable'
 import useBaseTable from '@core/components/BaseTableOld/hooks/useBaseTable'
-import { toJalali, toJalaliNoTime } from '@core/utils/useDataTime'
-import { message, Tag } from 'ant-design-vue'
-import CustomTag from '@/components/CustomTag.vue'
 import Icon from '@core/components/BaseIcon/src/Icon.vue'
-import { changeUserActivation, getUserTable } from '@/api/user'
-import { useUserStore } from '@/store/userStore'
+import { getUserTable } from '@/api/user'
 import { cols } from '../hooks/usersColumns'
-import { changeCustomerActivation } from '@/api/customer'
+import ManagerMobileCardList from './ManagerMobileCardList.vue'
+import { isMobile } from '@core/utils/is'
 
 const [submit, reload] = useBaseTable()
+const mobileListRef = ref<null | { fetch: () => Promise<void> }>(null)
 
-//emits
 const emits = defineEmits(['delete', 'edit', 'add', 'info'])
 
-//define table
-const table = ref(null)
-
-//permission
-function checkPermission(temp: string) {
-  const store = useUserStore()
-  return store.canAccess(temp)
-}
-
-const loading = ref<boolean>(false)
-
-async function changeUserActivationFunction(id: number) {
-  try {
-    loading.value = true
-    await changeUserActivation(id)
-    reload()
-    message.success('تغییر وضعیت با موفقیت انجام شد')
-  } catch (e) {
-    console.error(e)
-  } finally {
-    loading.value = false
-  }
-}
-
 const tblProps = ref<any>({
   columns: cols,
   api: (params: TableInput) => {
     return getUserTable(params)
   }
-  //bordered: true
 })
 
-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>
-
-<style scoped></style>