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,55 @@
+<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"
+  >
+    <ManagerMobileListItem
+      v-for="item in items"
+      :key="item.id"
+      :item="item"
+      @open="openSheet"
+      @edit="(row) => emit('edit', row)"
+    />
+  </MobileCardList>
+
+  <ManagerMobileDetailSheet
+    v-model:visible="sheetVisible"
+    :item="selectedItem"
+    @delete="(id) => emit('delete', id)"
+  />
+</template>
+
+<script setup lang="ts">
+import { getUserTable } from '@/api/user'
+import type { User } from '@/model/user'
+import MobileCardList from '@/components/mobile/MobileCardList.vue'
+import { useMobileDetailSheet } from '@/components/mobile/composables/useMobileDetailSheet'
+import { useMobileTableList } from '@/components/mobile/composables/useMobileTableList'
+import ManagerMobileDetailSheet from './ManagerMobileDetailSheet.vue'
+import ManagerMobileListItem from './ManagerMobileListItem.vue'
+
+const emit = defineEmits<{
+  (e: 'info', item: User): void
+  (e: 'edit', item: User): void
+  (e: 'delete', id: number): void
+}>()
+
+const { sheetVisible, selectedItem, openSheet, syncSelectedItem } = useMobileDetailSheet<User>()
+
+const { loading, search, items, hasMore, reload, loadMore, fetch } = useMobileTableList<User>({
+  fetchApi: getUserTable,
+  onFetched: (rows) => syncSelectedItem(rows)
+})
+
+onMounted(() => reload())
+
+defineExpose({ fetch, openSheet })
+</script>
@@ -0,0 +1,64 @@
+<template>
+  <MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="sheetTitle">
+    <template #default="{ item: row }">
+      <MobileSheetHeader :title="sheetTitle" :subtitle="mobileLabel(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>
+            <MobileIconButton
+              plain
+              icon="vuesax-linear:user-remove"
+              color="#EB3535"
+              :size="22"
+              @click="row.id && $emit('delete', row.id)"
+            />
+          </div>
+        </template>
+      </MobileSheetHeader>
+
+      <MobileInfoGrid>
+        <MobileDetailRow label="کد کاربری" :value="row.id ?? '-'" />
+        <MobileDetailRow label="نام و نام خانوادگی" full-width :value="row.name || '-'" />
+        <MobileDetailRow label="شماره موبایل" full-width :value="mobileLabel(row)" />
+        <MobileDetailRow v-if="row.created_at" label="تاریخ ثبت" full-width :value="createdAtLabel(row)" />
+      </MobileInfoGrid>
+    </template>
+  </MobileDetailSheet>
+</template>
+
+<script setup lang="ts">
+import type { User } from '@/model/user'
+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 { isMobile } from '@core/utils/is'
+import { toJalaliNoTime } from '@core/utils/useDataTime'
+
+const props = defineProps<{
+  visible: boolean
+  item: User | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+  (e: 'delete', id: number): void
+}>()
+
+const visibleProxy = computed({
+  get: () => props.visible,
+  set: (value: boolean) => emit('update:visible', value)
+})
+
+const sheetTitle = computed(() => props.item?.name || `مدیر #${props.item?.id ?? '-'}`)
+
+function mobileLabel(row: User) {
+  if (row.mobile == null || row.mobile === '') return '-'
+  return String(row.mobile)
+}
+
+function createdAtLabel(row: User) {
+  return row.created_at ? toJalaliNoTime(row.created_at) : '-'
+}
+</script>
@@ -0,0 +1,41 @@
+<template>
+  <MobileCard clickable @click="$emit('open', item)">
+    <div class="flex items-center gap-2">
+      <div class="min-w-0 flex-1 space-y-1">
+        <div class="flex items-center justify-between gap-2">
+          <span class="truncate text-sm font-700 text-gray-900">{{ item.name || '-' }}</span>
+          <span class="shrink-0 text-xs text-gray-400">#{{ item.id ?? '-' }}</span>
+        </div>
+
+        <div class="truncate text-xs text-gray-600">{{ mobileLabel }}</div>
+      </div>
+
+      <MobileIconButton
+        icon="vuesax-linear:edit"
+        color="#4572E9"
+        :size="20"
+        @click="$emit('edit', item)"
+      />
+    </div>
+  </MobileCard>
+</template>
+
+<script setup lang="ts">
+import type { User } from '@/model/user'
+import MobileCard from '@/components/mobile/MobileCard.vue'
+import MobileIconButton from '@/components/mobile/MobileIconButton.vue'
+
+const props = defineProps<{
+  item: User
+}>()
+
+defineEmits<{
+  (e: 'open', item: User): void
+  (e: 'edit', item: User): void
+}>()
+
+const mobileLabel = computed(() => {
+  if (props.item.mobile == null || props.item.mobile === '') return '-'
+  return String(props.item.mobile)
+})
+</script>
@@ -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>