feat:部分按钮的双端隐藏和显示配置

2025-06-20 17:25:11 +08:00
parent adfd2426b4
commit f98a1cca4f
6 changed files with 100 additions and 60 deletions
--- a/src/views/billing/bill/index.vue
+++ b/src/views/billing/bill/index.vue
@@ -275,7 +275,7 @@ onMounted(() => {
          :loading="loading"
          row-key="id"
          size="small"
-          :expandIconColumnWidth="24"
+
          :pagination="{
            ...mobilePagination,
            total: mobilePagination.total,
@@ -401,4 +401,10 @@ onMounted(() => {
  min-width: 24px !important;
  padding: 0 !important;
 }
+/* 在PC端隐藏展开按钮图标 */
+@media screen and (min-width: 768px) {
+  :deep(.ant-table-row-expand-icon) {
+    display: none !important;
+  }
+}
 </style>
--- a/src/views/billing/cdrlrecords/index.vue
+++ b/src/views/billing/cdrlrecords/index.vue
@@ -1,17 +1,20 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+import {ref, onMounted, watch, computed} from 'vue'
 import type { TableColumnsType } from 'ant-design-vue'
 import { HistoryOutlined } from '@ant-design/icons-vue'
 import { useI18n } from "vue-i18n";
 import { fetchCDRHistory } from '@/service/api/auth';
 import {useRouter} from "vue-router";
 import dayjs from 'dayjs';
+import {useWindowSize} from "@vueuse/core";

 defineOptions({
  name: 'cdrlrecords'
 });
 const { t } = useI18n();
 const router = useRouter();
+const { width } = useWindowSize();
+const isMobile = computed(() => width.value < 768);
 const handleBack = () => {
  router.push('/billing/billservice');
 };
@@ -317,7 +320,7 @@ watch(tableData, (newData) => {

      <template #extra>
        <a-space size="middle">
-        <a-button @click="handleBack">
+        <a-button v-if="isMobile" @click="handleBack">
          {{ t('page.login.common.back') }}
        </a-button>
        <a-button type="primary" :loading="tableLoading" @click="handleSearch">
--- a/src/views/billing/packagehistories/index.vue
+++ b/src/views/billing/packagehistories/index.vue
@@ -16,7 +16,7 @@ const handleBack = () => {

 const { t } = useI18n();
 const currencySymbol = ref('¥');
-
+const tableLoading = ref(false);
 const fetchCurrencySymbol = async () => {
  try {
    const response = await getPaymentConfig();
@@ -48,6 +48,7 @@ const formatDateTime = (dateTimeString: string) => {
 };

 const getPackageData = async () => {
+  tableLoading.value=true;
  try {
    const response = await fetchPackageHistory({
      pageNum: 1,
@@ -60,6 +61,7 @@ const getPackageData = async () => {
  } catch (error) {
    // console.error('Failed to fetch package history:', error);
  }
+  tableLoading.value=false;
 };

 onMounted(() => {
@@ -236,9 +238,15 @@ const formatTraffic = (bytes: number): string => {
  <div class="p-4">
    <div class="text-lg font-bold mb-4 flex justify-between items-center">
      <span>{{ t('page.packagehistories.title') }}</span>
-      <a-button @click="handleBack">
+      <a-button v-if="isMobile" @click="handleBack" >
        {{ t('page.login.common.back') }}
      </a-button>
+      <a-button type="primary" :loading="tableLoading" @click="getPackageData">
+        <template #icon>
+          <span class="i-carbon:refresh"></span>
+        </template>
+        {{ t('page.cdrlrecords.refresh') }}
+      </a-button>
    </div>
    <div>
      <ATable :columns="columns" :data-source="data" row-key="id"
@@ -317,4 +325,10 @@ const formatTraffic = (bytes: number): string => {
  color: #1890ff;
  text-decoration: underline;
 }
+/* 在PC端隐藏展开按钮图标 */
+@media screen and (min-width: 768px) {
+  :deep(.ant-table-row-expand-icon) {
+    display: none !important;
+  }
+}
 </style>
--- a/src/views/billing/rechargehistory/index.vue
+++ b/src/views/billing/rechargehistory/index.vue
@@ -12,7 +12,7 @@ const router = useRouter();
 const handleBack = () => {
  router.push('/billing/billservice');
 };
-
+const tableLoading = ref(false);
 const { t } = useI18n();
 const currencySymbol = ref('¥');

@@ -46,57 +46,57 @@ const formatDateTime = (dateTimeString: string) => {
  });
 };

+  const {columns, data, loading, getData, mobilePagination, searchParams} = useTable({
+    apiFn: fetchRechargeHistory,
+    apiParams: {
+      pageNum: 1,
+      pageSize: 5,
+    },
+    rowKey: 'id',
+    columns: () => [
+      {
+        title: t('page.Rechargehistory.topupdate'),
+        dataIndex: 'createTime',
+        key: 'createTime',
+        responsive: ['md'],
+        customRender: ({text}) => text ? formatDateTime(text) : ''
+      },
+      {
+        title: t('page.Rechargehistory.amount'),
+        dataIndex: 'orderAmount',
+        key: 'orderAmount',
+        customRender: ({text}: { text: string }) => {
+          const formattedAmount = Number(text).toFixed(2);
+          return `${currencySymbol.value}${formattedAmount}`;
+        }
+      },
+      {
+        title: t('page.Rechargehistory.type'),
+        dataIndex: 'type',
+        key: 'type',
+        customRender: ({text}: { text: number }) => {
+          return h(ATag, {
+            color: text === 1 ? 'blue' : 'green'
+          }, {
+            default: () => text === 1 ? t('page.Rechargehistory.rechargeType') : t('page.Rechargehistory.packageType')
+          })
+        }
+      },
+      {
+        title: t('page.Rechargehistory.status'),
+        dataIndex: 'status',
+        key: 'status',
+        customRender: ({text}: { text: number }) => {
+          return h(ATag, {
+            color: text === 1 ? 'success' : 'warning'
+          }, {
+            default: () => text === 1 ? t('page.Rechargehistory.paid') : t('page.Rechargehistory.unpaid')
+          })
+        }
+      }
+    ]
+  });

-const { columns, data, loading, getData, mobilePagination, searchParams } = useTable({
-  apiFn: fetchRechargeHistory,
-  apiParams: {
-    pageNum: 1,
-    pageSize: 5,
-  },
-  rowKey: 'id',
-  columns: () => [
-  {
-    title: t('page.Rechargehistory.topupdate'),
-    dataIndex: 'createTime',
-    key: 'createTime',
-    responsive: ['md'],
-    customRender: ({ text }) => text ? formatDateTime(text) : ''
-  },
-  {
-    title: t('page.Rechargehistory.amount'),
-    dataIndex: 'orderAmount',
-    key: 'orderAmount',
-    customRender: ({ text }: { text: string }) => {
-      const formattedAmount = Number(text).toFixed(2);
-      return `${currencySymbol.value}${formattedAmount}`;
-    }
-  },
-  {
-    title: t('page.Rechargehistory.type'),
-    dataIndex: 'type',
-    key: 'type',
-    customRender: ({ text }: { text: number }) => {
-      return h(ATag, {
-        color: text === 1 ? 'blue' : 'green'
-      }, {
-        default: () => text === 1 ? t('page.Rechargehistory.rechargeType') : t('page.Rechargehistory.packageType')
-      })
-    }
-  },
-  {
-    title: t('page.Rechargehistory.status'),
-    dataIndex: 'status',
-    key: 'status',
-    customRender: ({ text }: { text: number }) => {
-      return h(ATag, {
-        color: text === 1 ? 'success' : 'warning'
-      }, {
-        default: () => text === 1 ? t('page.Rechargehistory.paid') : t('page.Rechargehistory.unpaid')
-      })
-    }
-  }
-]
-});
 onMounted(()=>{
  fetchCurrencySymbol();
 })
@@ -107,9 +107,15 @@ onMounted(()=>{
  <div class="p-4">
    <div class="text-lg font-bold mb-4 flex justify-between items-center">
      <span>{{ t('page.Rechargehistory.recharge') }}</span>
-      <a-button @click="handleBack">
+      <a-button v-if="isMobile" @click="handleBack">
        {{ t('page.login.common.back') }}
      </a-button>
+<!--      <a-button type="primary" :loading="tableLoading" @click="getPackageData">-->
+<!--        <template #icon>-->
+<!--          <span class="i-carbon:refresh"></span>-->
+<!--        </template>-->
+<!--        {{ t('page.cdrlrecords.refresh') }}-->
+<!--      </a-button>-->
    </div>
    <div>
      <ATable
@@ -147,4 +153,10 @@ onMounted(()=>{
 .pl-4 {
  padding-left: 1rem;
 }
+/* 在PC端隐藏展开按钮图标 */
+@media screen and (min-width: 768px) {
+  :deep(.ant-table-row-expand-icon) {
+    display: none !important;
+  }
+}
 </style>
--- a/src/views/endpoint/access/index.vue
+++ b/src/views/endpoint/access/index.vue
@@ -9,7 +9,9 @@ defineOptions({
 });
 const { t } = useI18n();
 const router = useRouter();
-
+// 响应式布局
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 768)
 const handleBack = () => {
  router.push('/endpoint/clientservice');
 };
@@ -108,7 +110,7 @@ onMounted(() => {

      <template #extra>
        <a-space size="middle">
-        <a-button @click="handleBack">
+        <a-button v-if="isMobile" @click="handleBack">
          {{ t('page.login.common.back') }}
        </a-button>
        <a-button type="primary" :loading="loading" @click="handleRefresh">
--- a/src/views/endpoint/records/index.vue
+++ b/src/views/endpoint/records/index.vue
@@ -10,6 +10,9 @@ defineOptions({
 });
 const router = useRouter();
 const { t } = useI18n();
+// 响应式布局
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 768)
 const handleBack = () => {
  router.push('/endpoint/clientservice');
 };
@@ -134,7 +137,7 @@ onMounted(() => {

      <template #extra>
        <a-space size="middle">
-        <a-button @click="handleBack">
+        <a-button v-if="isMobile" @click="handleBack">
          {{ t('page.login.common.back') }}
        </a-button>
        <a-button type="primary" :loading="loading" @click="handleRefresh">