✨ feat:

配置: Vxe-Table按需导入;
UI: 店铺信息页面;
新增: useColumns.ts改为tsx使用插槽渲染表格; 封装useResponse可以处理ref类型的loading和reactive对象属性中的loading,适配el-table和vxe-table;

src/main.ts

@@ -35,6 +35,8 @@ import '/@/assets/iconfont/iconfont.css'; //引入css
 import { scanAndInstallPlugins } from '/@/views/plugins/index';
 import VXETable from 'vxe-table'
 import 'vxe-table/lib/style.css'
+import VxeUI from 'vxe-pc-ui'
+import 'vxe-pc-ui/lib/style.css'
 
 import '/@/assets/style/reset.scss';
 // import 'element-tree-line/dist/style.css'
@@ -62,7 +64,7 @@ dayjs.extend(Timezon)
 dayjs.extend(IsSameOrBefore)
 dayjs.locale('zh-cn')
 
-app.use(VXETable)
+app.use(VXETable).use(VxeUI)
 app.use(pinia)
 	.use(router)
 		// @ts-ignore

src/utils/useResponse.ts

@@ -1,11 +1,32 @@
-export async function useResponse(parameter: any = {}, requestApi: any, loading?: Ref<boolean>) {
-  const loadingRef = loading ?? ref(false);
+/**
+ * 请求响应处理
+ * @param parameter 请求参数
+ * @param requestApi 请求接口
+ * @param loadingOrOptions ref-loading | vxe-loading (ref | obj)
+ */
+export async function useResponse(
+    parameter: any = {},
+    requestApi: any,
+    loadingOrOptions: Ref<boolean> | { loading?: boolean, value?: { loading: boolean } } | any
+) {
+  const setLoading = (value: boolean) => {
+    if (isRef(loadingOrOptions)) {
+      loadingOrOptions.value = value;
+    } else if (typeof loadingOrOptions === 'object') {
+      if ('loading' in loadingOrOptions) {
+        loadingOrOptions.loading = value;
+      } else if ('value' in loadingOrOptions && typeof loadingOrOptions.value === 'object') {
+        loadingOrOptions.value.loading = value;
+      }
+    }
+  };
+
   try {
-    loadingRef.value = true;
+    setLoading(true);
     return await requestApi(parameter);
   } catch (error) {
-    console.log('Error==>', error);
+    console.error('Request Error==>', error);
   } finally {
-    loadingRef.value = false;
+    setLoading(false);
   }
 }

src/views/shop-information/components/InfoCard.vue

@@ -18,7 +18,7 @@ function handleNavigate(item: any) {
 
 <template>
   <el-row :gutter="10">
-    <el-col v-for="(item, index) in cardData" :key="index" :lg="6" :md="6" :sm="8" :xl="4" :xs="12" class="mt-2.5">
+    <el-col v-for="(item, index) in cardData" :key="index" :lg="6" :md="6" :sm="8" :xl="4" :xs="12" class="my-1.5">
       <el-card shadow="hover">
         <el-descriptions>
           <template #title>

src/views/shop-information/components/PlatformDetail.vue

@@ -1,4 +1,5 @@
-<script lang="ts" setup>/**
+<script lang="ts" setup>
+/**
  * @Name: PlatformDetail.vue
  * @Description: 平台详情页
  * @Author: Cheney
@@ -7,81 +8,113 @@
 import { useResponse } from '/@/utils/useResponse';
 import * as api from '../api';
 import { Picture as IconPicture } from '@element-plus/icons-vue';
+import { columns } from '../useColumns';
 // import img from '/src/assets/img/headerImage.png'
 
 const route = useRoute();
 const platform = route.query.platform;
+const platformTableData = ref([]);
 
-const gridOptions = reactive<any>({
-  border: 'inner',
-  columns: [
-    { type: 'seq', width: 50, align: 'center' },
-    { field: 'name', title: 'Name' },
-    { field: 'sex', title: 'Sex' },
-    { field: 'age', title: 'Age' }
-  ],
-  data: [
-    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
-    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
-    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
-    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
-  ]
-})
+const gridOptions: any = reactive({
+  border: false,
+  round: true,
+  height: 800,
+  toolbarConfig: {
+    custom: true
+  },
+  columnConfig: {
+    resizable: true
+  },
+  pagerConfig: {
+    total: 0,
+    page: 1,
+    limit: 10
+  },
+  loading: false,
+  loadingConfig: {
+    icon: 'vxe-icon-indicator roll',
+    text: '正在拼命加载中...'
+  },
+  columns: columns,
+  data: platformTableData
+});
 
 onBeforeMount(() => {
   fetchPlatformDetail();
 });
 
 async function fetchPlatformDetail() {
-  const res = await useResponse({ platform: platform }, api.getPlatformDetail);
-  console.log('(PlatformDetail.vue: 21)=> res', res);
+  const query = {
+    platform,
+    page: gridOptions.pagerConfig.page,
+    limit: gridOptions.pagerConfig.limit
+  }
+  const res = await useResponse(query, api.getPlatformDetail, gridOptions);
+  gridOptions.pagerConfig.total = res.total;
+  gridOptions.pagerConfig.page = res.page;
+  gridOptions.pagerConfig.limit = res.limit;
+  platformTableData.value = res.data;
+}
+
+function pageChange({ pageSize, currentPage }: any) {
+  gridOptions.pagerConfig.limit = pageSize;
+  gridOptions.pagerConfig.page = currentPage;
+  fetchPlatformDetail();
 }
 </script>
 
 <template>
-  <div class="mb-2">
-    <el-card class="m-2 h-full" shadow="never" style="border: none;">
-      <el-card body-class="flex items-center" class="w-1/4">
-        <!-- 设置父容器的 display 为 flex，并使用 items-center 使图片和文本对齐 -->
-        <el-image
-            class="mr-4"
-            style="height: 100px; width: 100px; object-fit: cover;"
-        >
-          <template #error>
-            <div class="mr-3.5 flex items-center justify-center text-5xl" style="height: 100px; width: 100px; background-color: #f5f5f5;">
-              <el-icon>
-                <icon-picture/>
-              </el-icon>
-            </div>
-          </template>
-        </el-image>
-        <div>
-          <div class="font-semibold">店铺编号/名称:
-            <span class="font-medium italic" style="color: #64748b">
+  <div class="p-2.5">
+    <!-- overview-card -->
+    <el-card body-class="flex items-center" shadow="hover" style="border: none;">
+      <el-image
+          class="mr-5"
+          src="/src/assets/img/headerImage.png"
+          style="height: 100px; width: 100px; object-fit: cover;"
+      >
+        <template #error>
+          <div class="mr-3.5 flex items-center justify-center text-5xl" style="height: 100px; width: 100px; background-color: #f5f5f5;">
+            <el-icon>
+              <icon-picture/>
+            </el-icon>
+          </div>
+        </template>
+      </el-image>
+      <div>
+        <div class="font-semibold">店铺编号/名称:
+          <span class="font-medium italic" style="color: #64748b">
               123456789
             </span>
-          </div>
-          <div class="font-semibold">所属公司:
-            <span class="font-medium italic" style="color: #64748b">
+        </div>
+        <div class="font-semibold">所属公司:
+          <span class="font-medium italic" style="color: #64748b">
               123456789
             </span>
-          </div>
-          <div class="font-semibold">平台数:
-            <span class="font-medium italic" style="color: #64748b">
+        </div>
+        <div class="font-semibold">平台数:
+          <span class="font-medium italic" style="color: #64748b">
               123456789
             </span>
-          </div>
-          <div class="font-semibold">电脑数:
-            <span class="font-medium italic" style="color: #64748b">
+        </div>
+        <div class="font-semibold">电脑数:
+          <span class="font-medium italic" style="color: #64748b">
               123456789
             </span>
-          </div>
         </div>
-      </el-card>
-      
-      <el-card class="mt-5">
-        <vxe-grid v-bind="gridOptions"></vxe-grid>
-      </el-card>
+      </div>
+    </el-card>
+    <!-- table-card -->
+    <el-card body-style="padding-top: 10px" class="mt-2.5" shadow="hover" style="border: none;">
+      <vxe-grid v-bind="gridOptions">
+        <template #pager>
+          <vxe-pager
+              v-model:currentPage="gridOptions.pagerConfig.page"
+              v-model:pageSize="gridOptions.pagerConfig.limit"
+              :total="gridOptions.pagerConfig.total"
+              @page-change="pageChange">
+          </vxe-pager>
+        </template>
+      </vxe-grid>
     </el-card>
   </div>
 

src/views/shop-information/index.vue

@@ -26,8 +26,11 @@ async function initData() {
 </script>
 
 <template>
-  <div class="mb-2.5">
-    <el-card v-loading="loading" class="m-2 h-full" shadow="never" style="border: none;">
+  <div class="px-2.5">
+    <el-divider content-position="left">
+      <div class="font-bold text-xl">信息概览</div>
+    </el-divider>
+    <el-card v-loading="loading" shadow="never" style="border: none; min-height: 692px;">
       <InfoCard></InfoCard>
     </el-card>
   </div>
@@ -35,5 +38,7 @@ async function initData() {
 </template>
 
 <style scoped>
-
+:deep(.el-divider__text.is-left) {
+  background-color: #F5F5F5;
+}
 </style>

src/views/shop-information/useColumns.tsx

@@ -0,0 +1,170 @@
+export const columns = [
+  { type: 'seq', width: 50, align: 'center', fixed: 'left' },
+  {
+    field: 'operaterName', title: '运营', width: 'auto', align: 'center',  fixed: 'left',
+    slots: {
+      default({ row }: any) {
+        return <span class={ 'font-medium' }>{ row.operaterName ? row.operaterName : '--' }</span>;
+      }
+    }
+  },
+  {
+    field: 'platformNumber', title: '平台编号', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={ 'font-medium' }>{ row.platformNumber ? row.platformNumber : '--' }</span>;
+      }
+    }
+  },
+  {
+    field: 'platformName', title: '平台名称', width: 'auto', align: 'center', slots: {
+      default({ row }: any) {
+        return <span class={ 'font-medium' }>{ row.platformName ? row.platformName : '--' }</span>;
+      }
+    }
+  },
+  {
+    field: 'country', title: '国家', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={ 'font-medium' }>{ row.country ? row.country : '--' }</span>;
+      }
+    }
+  },
+  {
+    field: 'brandName', title: '品牌名称', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={ 'font-medium' }>{ row.brandName ? row.brandName : '--' }</span>;
+      }
+    }
+  },
+  {
+    field: 'currencyCode', title: '货币代码', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={ 'font-medium' }>{ row.currencyCode ? row.currencyCode : '--' }</span>;
+      }
+    }
+  },
+  {
+    field: 'status', title: '状态', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={ 'font-medium' }>{ row.status ? row.status : '--' }</span>;
+      }
+    }
+  },
+  {
+    field: 'platform', title: '平台', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={ 'font-medium' }>{ row.platform ? row.platform : '--' }</span>;
+      }
+    }
+  },
+  {
+    field: 'line', title: '线路', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={ 'font-medium' }>{ row.line ? row.line : '--' }</span>;
+      }
+    }
+  },
+  {
+    field: 'ipaddress', title: 'IP地址', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={ 'font-medium' }>{ row.ipaddress ? row.ipaddress : '--' }</span>;
+      }
+    }
+  },
+  {
+    field: 'company', title: '公司名称', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={ 'font-medium' }>{ row.company ? row.company : '--' }</span>;
+      }
+    }
+  },
+  {
+    field: 'companyEnglishName', title: '公司英文名称', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={ 'font-medium' }>{ row.companyEnglishName ? row.companyEnglishName : '--' }</span>;
+      }
+    }
+  },
+  {
+    field: 'address', title: '公司地址', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={ 'font-medium' }>{ row.address ? row.address : '--' }</span>;
+      }
+    }
+  },
+  {
+    field: 'juridicalPerson', title: '法人', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={ 'font-medium' }>{ row.juridicalPerson ? row.juridicalPerson : '--' }</span>;
+      }
+    }
+  },
+  {
+    field: 'juridicalPersonCreditCard', title: '法人信用卡', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={ 'font-medium' }>{ row.juridicalPersonCreditCard ? row.juridicalPersonCreditCard : '--' }</span>;
+      }
+    }
+  },
+  {
+    field: 'juridicalPersonCreditCardAddress', title: '法人信用卡地址', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={ 'font-medium' }>{ row.juridicalPersonCreditCardAddress ? row.juridicalPersonCreditCardAddress : '--' }</span>;
+      }
+    }
+  },
+  {
+    field: 'receivablesAccount', title: '收款账户', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={ 'font-medium' }>{ row.receivablesAccount ? row.receivablesAccount : '--' }</span>;
+      }
+    }
+  },
+  {
+    field: 'receivablesAccountCompany', title: '收款账户公司', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={ 'font-medium' }>{ row.receivablesAccountCompany ? row.receivablesAccountCompany : '--' }</span>;
+      }
+    }
+  },
+  {
+    field: 'vatNumber', title: 'VAT税号', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={ 'font-medium' }>{ row.vatNumber ? row.vatNumber : '--' }</span>;
+      }
+    }
+  },
+  {
+    field: 'vatCompany', title: 'VAT公司', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={ 'font-medium' }>{ row.vatCompany ? row.vatCompany : '--' }</span>;
+      }
+    }
+  },
+  {
+    field: 'shopPhoneEmail', title: '店铺电话与邮箱', width: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={ 'font-medium' }>{ row.shopPhoneEmail ? row.shopPhoneEmail : '--' }</span>;
+      }
+    }
+  }
+];