change responsive]

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

@@ -1,11 +1,19 @@
 <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 v-if="!mobile" #extra>
+        <BaseButton type="primary" size="small" class="flex shrink-0 md:hidden" @click="emits('add')">
+          <div>ارسال پیامک</div>
+          <BaseIcon icon="vuesax-linear:sms" Size="16px" />
+        </BaseButton>
+      </template>
+
+      <div class="flex h-full min-h-0 flex-col">
+        <BaseTable v-if="!isMobileScreen" class="h-full min-h-0 min-w-0" v-bind="tblProps" @register="submit" ref="tbl">
         <template #extraHeader>
           <BaseButton v-if="!mobile" type="primary" size="small" class="flex" @click="emits('add')">
             <div>ارسال پیامک</div>
-            <BaseIcon icon="vuesax-linear:sms" Size="16px"/>
+            <BaseIcon icon="vuesax-linear:sms" Size="16px" />
           </BaseButton>
         </template>
         <template #action="{ column, record }">
@@ -19,42 +27,30 @@
           </div>-->
         </template>
       </BaseTable>
+
+      <SmsMobileCardList v-else ref="mobileListRef" class="min-h-0 flex-1" :mobile="mobile" />
+      </div>
     </BasicShowContext>
   </div>
 </template>
 
 <script lang="tsx" setup>
-import type {TableInput} from '@core/type/baseTable'
+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 {cols} from '../hooks/smsColumns'
-import {useUserStore} from '@/store/userStore'
-import {usePrefix} from '@core/composable/usePrefix'
-import {message} from 'ant-design-vue'
-import {getOrderTable} from '@/api/order'
-import {getPriceTable} from '@/api/price'
-import {getSMSTable} from '@/api/sms'
-
-const [submit, reload] = useBaseTable()
+import { cols } from '../hooks/smsColumns'
+import { getSMSTable } from '@/api/sms'
+import SmsMobileCardList from './SmsMobileCardList.vue'
+import { isMobile as isMobileScreen } from '@core/utils/is'
 
 interface Prop {
-  mobile: number
+  mobile?: number | string
 }
 
 const props = defineProps<Prop>()
 const emits = defineEmits(['delete', 'edit', 'add', 'info'])
 
-// const { prefixCls } = usePrefix('pophoverstatus')
-
-//permission
-/*function checkPermission(temp: string) {
-  const store = useUserStore()
-  return store.canAccess(temp)
-}*/
-
-//define table
-const table = ref(null)
+const [submit, reload] = useBaseTable()
+const mobileListRef = ref<null | { fetch: () => Promise<void> }>(null)
 
 const tblProps = ref<any>({
   columns: cols,
@@ -62,52 +58,24 @@ const tblProps = ref<any>({
     if (props.mobile) {
       params.filters = []
       params.filters?.push({
-        field: "receiver",
-        type: "text",
+        field: 'receiver',
+        type: 'text',
         value: props.mobile,
-        cr: "and",
-        op: "eq",
+        cr: 'and',
+        op: 'eq',
         hidden: false
       })
     }
 
     return getSMSTable(params)
   }
-  //bordered: true
 })
-// const loading = ref<boolean>(false)
 
-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 lang="less">
-@prefix: ~'@{prefixCls}-pophoverstatus';
-
-.@{prefix} {
-  .ant-menu-rtl.ant-menu-inline,
-  .ant-menu-rtl.ant-menu-vertical {
-    border-left: none;
-  }
-
-  .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>